From 681df8eb8a39fdfc68452beb04b3f754d0fa98a8 Mon Sep 17 00:00:00 2001
From: Kyle Gill <kylerobertgill@gmail.com>
Date: Fri, 31 Jul 2026 23:29:05 -0600
Subject: [PATCH 1/5] Add geometry-aware point selection

---
 .changeset/bright-hit-regions.md              |    8 +
 API-FRICTION.md                               |   62 +
 README.md                                     |    6 +
 .../entries/charts-pointer-anchor-kernel.ts   |   30 +
 .../entries/charts-pointer-geometry-kernel.ts |    1 +
 benchmarks/interaction/README.md              |   89 ++
 benchmarks/interaction/nearest.ts             |  864 +++++++++++++
 docs/guides/custom-marks-and-renderers.md     |   31 +
 docs/reference/focus-and-interaction.md       |   35 +
 docs/reference/runtime-and-scene.md           |    5 +-
 docs/reference/types.md                       |    5 +
 examples/sandbox/README.md                    |   19 +
 examples/sandbox/package.json                 |    3 +-
 .../src/InteractionGeometryLab.test.ts        |  114 ++
 .../sandbox/src/InteractionGeometryLab.tsx    | 1110 +++++++++++++++++
 examples/sandbox/src/main.tsx                 |   11 +-
 examples/sandbox/src/styles.css               |  353 ++++++
 package.json                                  |    2 +
 .../docs/guides/custom-marks-and-renderers.md |   31 +
 .../docs/reference/focus-and-interaction.md   |   35 +
 .../docs/reference/runtime-and-scene.md       |    5 +-
 packages/charts-core/docs/reference/types.md  |    5 +
 packages/charts-core/src/area.ts              |    1 +
 packages/charts-core/src/band.ts              |   28 +-
 packages/charts-core/src/bar.ts               |   19 +-
 packages/charts-core/src/dot.ts               |    2 +
 packages/charts-core/src/facet.ts             |   20 +
 packages/charts-core/src/hexagon.ts           |    2 +
 packages/charts-core/src/index.ts             |    5 +
 packages/charts-core/src/line.ts              |    1 +
 packages/charts-core/src/nearest.test.ts      |  293 +++++
 packages/charts-core/src/nearest.ts           |  195 ++-
 packages/charts-core/src/rect.ts              |   20 +-
 packages/charts-core/src/renderer.test.ts     |   36 +-
 packages/charts-core/src/scene.ts             |   15 +-
 packages/charts-core/src/types.ts             |   27 +
 packages/charts-core/src/universal-types.ts   |    5 +
 scripts/measure-bundles.mjs                   |    9 +
 scripts/measure-pointer-resolution.mjs        |   22 +
 39 files changed, 3487 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/bright-hit-regions.md
 create mode 100644 benchmarks/entries/charts-pointer-anchor-kernel.ts
 create mode 100644 benchmarks/entries/charts-pointer-geometry-kernel.ts
 create mode 100644 benchmarks/interaction/README.md
 create mode 100644 benchmarks/interaction/nearest.ts
 create mode 100644 examples/sandbox/README.md
 create mode 100644 examples/sandbox/src/InteractionGeometryLab.test.ts
 create mode 100644 examples/sandbox/src/InteractionGeometryLab.tsx
 create mode 100644 packages/charts-core/src/nearest.test.ts
 create mode 100644 scripts/measure-pointer-resolution.mjs

diff --git a/.changeset/bright-hit-regions.md b/.changeset/bright-hit-regions.md
new file mode 100644
index 00000000..8236b259
--- /dev/null
+++ b/.changeset/bright-hit-regions.md
@@ -0,0 +1,8 @@
+---
+'@tanstack/charts': patch
+---
+
+Resolve default pointer focus against painted mark geometry before applying a
+mark's natural x, y, or two-dimensional fallback. Built-in bars, bands, dots,
+rectangles, and hexagons now expose their hit regions, while custom marks can
+provide rectangle, circle, or polygon regions directly on scene points.
diff --git a/API-FRICTION.md b/API-FRICTION.md
index 67f48f09..8d09d76f 100644
--- a/API-FRICTION.md
+++ b/API-FRICTION.md
@@ -211,6 +211,7 @@ Each entry records:
 | F-173 | Metro retained the complete universal barrel             | API/Tooling     | monitoring |
 | F-174 | OIDC release cannot claim a new npm package name         | Tooling         | monitoring |
 | F-175 | Native SVG resource normalization collapsed authored IDs | Application     | resolved   |
+| F-176 | Large marks were focused by distant anchor points        | API             | monitoring |
 
 ## Findings
 
@@ -4257,3 +4258,64 @@ Each entry records:
 - Verification: the native scene regression renders the formerly colliding
   IDs plus empty and delimiter-containing IDs, and checks matching definition
   IDs and paint references.
+
+### F-176 — Large marks were focused by distant anchor points
+
+- Status: monitoring
+- Severity: high
+- Owner: API
+- Observed in: stacked-bar tooltip report and interaction-geometry lab
+- Friction: vertical bars emit their value endpoint as the interaction anchor,
+  and the default resolver measured `maxFocusDistance` only from that anchor.
+  A pointer inside a tall bar could therefore select an adjacent endpoint less
+  than 48 pixels away. Raising the threshold retained the wrong two-dimensional
+  ranking, while chart-wide nearest-x made off-bar selection too permissive.
+  Pure x fallback also tied every segment in one stack and selected the bottom
+  segment when the pointer was above the stack.
+- Current decision: use a two-stage mark contract rather than infer a strategy
+  from chart composition. Interaction points may expose their painted
+  rectangle, circle, or polygon, while the mark declares its natural off-shape
+  fallback as `x`, `y`, `xy`, or `geometry`. Exact containment wins across all
+  marks before fallback ranking. Axis fallback compares its declared axis
+  first, then uses full painted-geometry distance to break ties. Overlapping
+  contained shapes resolve topmost-first in paint order. Points without either
+  field retain legacy point-distance behavior. Explicit focus strategies and
+  custom spatial indexes continue to own their complete search semantics.
+- Verification: focused tests cover containment priority, x/y/xy/geometry
+  fallback, rectangle/circle/polygon shapes, built-in bar affinity, reversed
+  rectangles, paint-order overlap, stack-edge selection, spatial-index
+  ownership, and legacy tie order. The twelve-case sandbox compares before and
+  after behavior for stacked and horizontal bars, line/area, bubbles, cells,
+  financial intervals, timelines, pie and annular sectors, radar, maps, and
+  Sankey geometry. The full unit matrix passes 675 tests across 123 files;
+  typecheck, documentation, packed-consumer, framework-adapter, formatting, and
+  sandbox production-build gates also pass.
+
+  On Node 24 arm64 on an Apple M4 Pro, the optimized resolver improves the
+  original POC's median
+  query time from 116.7 to 23.8 microseconds for 10k ordinary points, 62.2 to
+  27.1 for contained rectangles, 210.5 to 127.0 for stacked fallback, 64.5 to
+  25.7 for circles, and 132.9 to 79.5 for 2k polygons. On an exact-target point
+  fixture, production, optimized geometry, Observable Plot 0.6.17, D3 quadtree,
+  cold D3 Delaunay, and coherent Delaunay take 13.9, 25.2, 41.4, 2.8, 8.6, and
+  2.8 microseconds. Quadtree and Delaunay construction take 1.76 and 2.47
+  milliseconds for 10k points. A source-equivalent Vega cached-bounds pass
+  takes 9.8 microseconds versus 23.8 for the generic rectangle resolver, but
+  deliberately excludes Vega's subsequent Canvas path test.
+
+  The isolated resolver grows from 157 minified / 153 gzip bytes to 1,955 / 869
+  bytes, a 716-byte gzip feature cost beneath a new 1 kB ceiling. The D3
+  quadtree and Delaunay kernels are 1,971 and 7,308 gzip bytes before geometry
+  refinement. The complete DOM host remains 685 gzip bytes above the
+  pre-feature lock rather than silently accepting a new baseline.
+  [Observable Plot](https://observablehq.com/plot/interactions/pointer)
+  documents point-only dead spots and dominant-axis modes;
+  [D3 quadtree](https://d3js.org/d3-quadtree#quadtree_find) and
+  [D3 Delaunay](https://d3js.org/d3-delaunay/delaunay#delaunay_find) establish
+  indexed point lookup and its build/rebuild tradeoff; Vega's
+  [reverse visitor](https://github.com/vega/vega/blob/main/packages/vega-scenegraph/src/util/visit.js)
+  and [Canvas picker](https://github.com/vega/vega/blob/main/packages/vega-scenegraph/src/util/canvas/pick.js)
+  establish topmost traversal, cached-bounds rejection, and exact path tests.
+
+- Follow-up: verify rounded corners and true paths, negative bars, animation,
+  and SVG/Canvas parity before resolving this entry.
diff --git a/README.md b/README.md
index 67bfc53b..311b8303 100644
--- a/README.md
+++ b/README.md
@@ -293,9 +293,14 @@ Run a local example:
 pnpm dev:charts-react
 pnpm dev:charts-octane
 pnpm dev:sandbox
+pnpm dev:interaction-geometry
 pnpm dev:conformance
 ```
 
+The sandbox opens its existing integrated data dashboard by default. The
+interaction-geometry command opens a before-and-after lab for exercising
+painted hit regions and mark-level focus fallback across chart families.
+
 The repository includes three complementary benchmark suites:
 
 - [`benchmarks/bundle-size`](./benchmarks/bundle-size) locks ordinary consumer
@@ -309,6 +314,7 @@ The repository includes three complementary benchmark suites:
 ```sh
 pnpm bundle:check
 pnpm performance
+pnpm performance:pointer
 pnpm benchmark:check
 pnpm benchmark:stress:quick
 pnpm conformance:quick
diff --git a/benchmarks/entries/charts-pointer-anchor-kernel.ts b/benchmarks/entries/charts-pointer-anchor-kernel.ts
new file mode 100644
index 00000000..061287ef
--- /dev/null
+++ b/benchmarks/entries/charts-pointer-anchor-kernel.ts
@@ -0,0 +1,30 @@
+import type {
+  ChartPoint,
+  ChartValue,
+} from '../../packages/charts-core/src/types'
+
+// Historical production baseline retained for isolated bundle comparison.
+export function nearestPoint<
+  TDatum,
+  TXValue extends ChartValue,
+  TYValue extends ChartValue,
+>(
+  points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
+  x: number,
+  y: number,
+  maxDistance: number,
+): ChartPoint<TDatum, TXValue, TYValue> | null {
+  let result: ChartPoint<TDatum, TXValue, TYValue> | undefined
+  let resultDistance = Infinity
+  for (const point of points) {
+    const dx = point.x - x
+    const dy = point.y - y
+    const distance = dx * dx + dy * dy
+    if (distance < resultDistance) {
+      result = point
+      resultDistance = distance
+    }
+  }
+  if (!result) return null
+  return resultDistance <= Math.max(0, maxDistance) ** 2 ? result : null
+}
diff --git a/benchmarks/entries/charts-pointer-geometry-kernel.ts b/benchmarks/entries/charts-pointer-geometry-kernel.ts
new file mode 100644
index 00000000..ed752e44
--- /dev/null
+++ b/benchmarks/entries/charts-pointer-geometry-kernel.ts
@@ -0,0 +1 @@
+export { nearestPoint } from '../../packages/charts-core/src/nearest'
diff --git a/benchmarks/interaction/README.md b/benchmarks/interaction/README.md
new file mode 100644
index 00000000..37c57c7e
--- /dev/null
+++ b/benchmarks/interaction/README.md
@@ -0,0 +1,89 @@
+# Pointer-resolution benchmark
+
+The algorithm change is intentionally visible as two different selection
+pipelines:
+
+```text
+CURRENT PRODUCTION (anchor-only)
+
+pointer (x, y)
+      |
+      v
+scan every point anchor ---------------- O(n), one pass
+      |
+      v
+nearest dx^2 + dy^2
+      |
+      v
+anchor within max distance? ----------- yes -> point
+      |
+      `--------------------------------- no  -> null
+
+NEW OPTIMIZED GEOMETRY
+
+pointer (x, y)
+      |
+      v
+scan hit regions, topmost-first -------- O(n), allocation-free
+      | exact containment
+      `--------------------------------- yes -> first painted hit
+      |
+      | no exact hit
+      v
+all targets are ordinary points? ------- yes -> reuse nearest anchor from pass
+      |
+      | no (geometry or axis affinity exists)
+      v
+rank declared x / y / xy fallback ------ O(n), second pass only on miss
+      |
+      v
+break axis ties by boundary distance
+      |
+      v
+region within max distance? ------------ yes -> point; no -> null
+```
+
+Run the focused interaction benchmark with:
+
+```sh
+pnpm performance:pointer
+```
+
+It measures median and p95 time per pointer query for 10,000 point, rectangle,
+stacked-rectangle, and circle targets plus 2,000 polygons. The benchmark runs
+the former allocation-heavy geometry POC beside the optimized resolver and an
+anchor-only production baseline. Before timing, it verifies that the POC and
+optimized resolver select the same target for every non-overlap probe. The
+anchor-only resolver is a speed baseline, not a correctness baseline for the
+geometry rows: it cannot return the intended large-mark behavior.
+
+The point-only section compares identical nearest-anchor targets on a
+deterministic fixture against the selection loop from the installed Observable
+Plot 0.6.17 pointer transform, D3 quadtree 3.0.1, and D3 Delaunay 6.0.4. Plot
+timings intentionally exclude DOM coordinate conversion, mark rendering,
+pooling, and event dispatch. D3 query timings exclude index construction, which
+is reported separately; those indexes also do not reproduce hit-region
+containment or mark affinity without additional candidate refinement.
+
+The rectangle section additionally measures a source-equivalent lower bound
+for Vega 5.2.1's first picking stage. Vega's Canvas picker traverses
+topmost-first, rejects against stored bounds, and then runs mark-specific path
+tests. The benchmark stops before that exact Canvas path test, so it is useful
+for learning from cached bounds but is not reported as end-to-end Vega
+performance.
+
+The comparison follows the primary implementations and contracts documented by
+[Observable Plot's pointer transform](https://observablehq.com/plot/interactions/pointer),
+[D3 quadtree](https://d3js.org/d3-quadtree#quadtree_find),
+[D3 Delaunay](https://d3js.org/d3-delaunay/delaunay#delaunay_find), and Vega's
+[reverse visitor](https://github.com/vega/vega/blob/main/packages/vega-scenegraph/src/util/visit.js)
+and [Canvas picker](https://github.com/vega/vega/blob/main/packages/vega-scenegraph/src/util/canvas/pick.js).
+
+`pnpm bundle:check` reports isolated anchor-only and geometry resolver entries
+beside the existing D3 quadtree and Delaunay kernels. The geometry resolver has
+a 1 kB gzip ceiling; the historical anchor-only entry stays unbudgeted so the
+comparison remains visible without treating removed behavior as a product.
+
+The command exposes explicit garbage collection and rotates implementation
+order between samples to reduce allocation and thermal bias. Results are
+machine-specific evidence, not a portable CI timing threshold.
diff --git a/benchmarks/interaction/nearest.ts b/benchmarks/interaction/nearest.ts
new file mode 100644
index 00000000..06337e91
--- /dev/null
+++ b/benchmarks/interaction/nearest.ts
@@ -0,0 +1,864 @@
+import { performance } from 'node:perf_hooks'
+import { Delaunay } from 'd3-delaunay'
+import { quadtree } from 'd3-quadtree'
+import { nearestPoint } from '../../packages/charts-core/src/nearest'
+import type {
+  ChartPoint,
+  ChartValue,
+} from '../../packages/charts-core/src/types'
+
+interface Datum {
+  index: number
+}
+
+interface PointerQuery {
+  x: number
+  y: number
+  maxDistance: number
+}
+
+interface PointerCase {
+  label: string
+  points: readonly ChartPoint<Datum, number, number>[]
+  queries: readonly PointerQuery[]
+  repetitions: number
+}
+
+interface VegaRectItem {
+  point: ChartPoint<Datum, number, number>
+  bounds: {
+    x1: number
+    y1: number
+    x2: number
+    y2: number
+    contains: (x: number, y: number) => boolean
+  }
+}
+
+type Resolver = (
+  points: readonly ChartPoint<Datum, number, number>[],
+  x: number,
+  y: number,
+  maxDistance: number,
+) => ChartPoint<Datum, number, number> | null
+
+type Implementation = readonly [label: string, resolver: Resolver]
+
+const densePoints = Array.from({ length: 10_000 }, (_, index) =>
+  point(index, index % 1_000, Math.floor(index / 1_000) * 20),
+)
+const rectangles = Array.from({ length: 10_000 }, (_, index) => {
+  const x = (index % 200) * 6
+  const y = Math.floor(index / 200) * 10
+  return point(index, x + 2.5, y, {
+    kind: 'rect',
+    x,
+    y,
+    width: 5,
+    height: 9,
+  })
+})
+const stackedRectangles = Array.from({ length: 10_000 }, (_, index) => {
+  const category = Math.floor(index / 10)
+  const segment = index % 10
+  const x = category * 12
+  const y = 200 - (segment + 1) * 20
+  return point(
+    index,
+    x + 5,
+    y,
+    { kind: 'rect', x, y, width: 10, height: 20 },
+    'x',
+  )
+})
+const circles = Array.from({ length: 10_000 }, (_, index) => {
+  const x = (index % 200) * 8
+  const y = Math.floor(index / 200) * 8
+  return point(index, x, y, { kind: 'circle', x, y, radius: 3.5 })
+})
+const hexagons = Array.from({ length: 2_000 }, (_, index) => {
+  const x = (index % 100) * 14
+  const y = Math.floor(index / 100) * 14
+  const radius = 6
+  const vertices = Array.from({ length: 6 }, (__, vertex) => {
+    const angle = (Math.PI / 3) * vertex
+    return [x + Math.cos(angle) * radius, y + Math.sin(angle) * radius] as const
+  })
+  return point(index, x, y, { kind: 'polygon', points: vertices })
+})
+
+const cases: readonly PointerCase[] = [
+  {
+    label: '10k points · ordinary nearest',
+    points: densePoints,
+    queries: queries(16, (index) => ({
+      x: 23 + index * 57,
+      y: 89,
+      maxDistance: 48,
+    })),
+    repetitions: 4,
+  },
+  {
+    label: '10k rectangles · containment',
+    points: rectangles,
+    queries: queries(16, (index) => {
+      const target = rectangles[(index * 613) % rectangles.length]!
+      return { x: target.x, y: target.y + 4, maxDistance: 48 }
+    }),
+    repetitions: 4,
+  },
+  {
+    label: '10k stacked rectangles · x fallback',
+    points: stackedRectangles,
+    queries: queries(16, (index) => ({
+      x: ((index * 61) % 1_000) * 12 + 5,
+      y: index % 2 ? -12 : 212,
+      maxDistance: 48,
+    })),
+    repetitions: 4,
+  },
+  {
+    label: '10k circles · containment',
+    points: circles,
+    queries: queries(16, (index) => {
+      const target = circles[(index * 613) % circles.length]!
+      return { x: target.x + 2, y: target.y, maxDistance: 48 }
+    }),
+    repetitions: 4,
+  },
+  {
+    label: '2k polygons · off-shape fallback',
+    points: hexagons,
+    queries: queries(16, (index) => ({
+      x: index * 83 + 7,
+      y: 300,
+      maxDistance: 48,
+    })),
+    repetitions: 8,
+  },
+]
+
+const implementations: readonly Implementation[] = [
+  ['anchor-only baseline', anchorNearestPoint],
+  ['unoptimized POC', pocNearestPoint],
+  ['optimized geometry', nearestPoint],
+] as const
+
+const comparisonCase: PointerCase = {
+  label: '10k point-only targets',
+  points: densePoints,
+  queries: queries(128, (index) => ({
+    x: ((index * 83) % 997) + 0.37,
+    y: 90 + Math.sin((index / 128) * Math.PI * 2) * 82 + 0.19,
+    maxDistance: 48,
+  })),
+  repetitions: 16,
+}
+const rectangleComparisonCase: PointerCase = {
+  label: '10k contained rectangles',
+  points: rectangles,
+  queries: queries(128, (index) => {
+    const target = rectangles[(index * 613) % rectangles.length]!
+    return { x: target.x, y: target.y + 4, maxDistance: 48 }
+  }),
+  repetitions: 16,
+}
+const vegaRectItems: readonly VegaRectItem[] = rectangles.map((point) => {
+  if (point.hitRegion?.kind !== 'rect') {
+    throw new Error('Expected rectangle benchmark geometry')
+  }
+  const { x, y, width, height } = point.hitRegion
+  const bounds = {
+    x1: Math.min(x, x + width),
+    y1: Math.min(y, y + height),
+    x2: Math.max(x, x + width),
+    y2: Math.max(y, y + height),
+    contains(px: number, py: number) {
+      return !(px < this.x1 || px > this.x2 || py < this.y1 || py > this.y2)
+    },
+  }
+  return { point, bounds }
+})
+const plotIndexes = Uint32Array.from(densePoints, (_point, index) => index)
+const plotX = Float64Array.from(densePoints, (point) => point.x)
+const plotY = Float64Array.from(densePoints, (point) => point.y)
+const plotPx = (index: number) => plotX[index]!
+const plotPy = (index: number) => plotY[index]!
+const quadtreeIndex = quadtree<ChartPoint<Datum, number, number>>()
+  .x((point) => point.x)
+  .y((point) => point.y)
+  .addAll([...densePoints])
+const delaunayIndex = Delaunay.from(
+  densePoints,
+  (point) => point.x,
+  (point) => point.y,
+)
+let delaunayCursor = 0
+const comparisonImplementations: readonly Implementation[] = [
+  ['current prod · linear anchor', anchorNearestPoint],
+  ['new geometry · point-only', nearestPoint],
+  ['Observable Plot 0.6.17 · pointer kernel', plotPointerNearestPoint],
+  ['D3 quadtree 3.0.1 · indexed', quadtreeNearestPoint],
+  ['D3 Delaunay 6.0.4 · cold start', delaunayNearestPoint],
+  ['D3 Delaunay 6.0.4 · coherent start', coherentDelaunayNearestPoint],
+] as const
+const rectangleComparisonImplementations: readonly Implementation[] = [
+  ['new geometry · generic rect', nearestPoint],
+  ['Vega 5.2.1 · bounds-only lower bound', vegaBoundsNearestPoint],
+] as const
+const collectGarbage = (globalThis as { gc?: () => void }).gc
+
+verifyEquivalentResults()
+verifyComparisonResults()
+verifyRectangleComparisonResults()
+console.log(`Pointer resolution · ${process.version} · ${process.arch}`)
+console.log(
+  'Production is a speed baseline; geometry rows intentionally add semantics it cannot return.',
+)
+console.log('| Case | Resolver | Median / query | p95 / query |')
+console.log('| --- | --- | ---: | ---: |')
+
+let checksum = 0
+const scenarioMeasurements: Array<{
+  benchmark: PointerCase
+  measurements: Map<string, number[]>
+}> = []
+for (const benchmark of cases) {
+  const measurements = measure(benchmark)
+  scenarioMeasurements.push({ benchmark, measurements })
+  for (const [label] of implementations) {
+    const samples = measurements.get(label)!
+    console.log(
+      `| ${benchmark.label} | ${label} | ${formatDuration(percentile(samples, 0.5))} | ${formatDuration(percentile(samples, 0.95))} |`,
+    )
+  }
+}
+printScenarioComparisons(scenarioMeasurements)
+
+console.log('\nPoint-only comparison · identical targets on this fixture')
+console.log('| Resolver | Median / query | p95 / query |')
+console.log('| --- | ---: | ---: |')
+const comparisonMeasurements = measure(
+  comparisonCase,
+  comparisonImplementations,
+)
+for (const [label] of comparisonImplementations) {
+  const samples = comparisonMeasurements.get(label)!
+  console.log(
+    `| ${label} | ${formatDuration(percentile(samples, 0.5))} | ${formatDuration(percentile(samples, 0.95))} |`,
+  )
+}
+printAsciiDurations(comparisonMeasurements, comparisonImplementations)
+printIndexBuildTimes()
+printIndexStorage()
+
+console.log(
+  '\nRectangle containment comparison · identical targets on this fixture',
+)
+console.log(
+  'Vega result is a bounds-only lower bound; its Canvas picker then builds and tests the mark path.',
+)
+console.log('| Resolver | Median / query | p95 / query |')
+console.log('| --- | ---: | ---: |')
+const rectangleComparisonMeasurements = measure(
+  rectangleComparisonCase,
+  rectangleComparisonImplementations,
+)
+for (const [label] of rectangleComparisonImplementations) {
+  const samples = rectangleComparisonMeasurements.get(label)!
+  console.log(
+    `| ${label} | ${formatDuration(percentile(samples, 0.5))} | ${formatDuration(percentile(samples, 0.95))} |`,
+  )
+}
+printAsciiDurations(
+  rectangleComparisonMeasurements,
+  rectangleComparisonImplementations,
+)
+console.log(`checksum: ${checksum}`)
+
+function measure(
+  benchmark: PointerCase,
+  resolvers: readonly Implementation[] = implementations,
+) {
+  for (let round = 0; round < 3; round += 1) {
+    for (const [, resolver] of resolvers) run(resolver, benchmark)
+  }
+
+  const samples = new Map(resolvers.map(([label]) => [label, [] as number[]]))
+  for (let round = 0; round < 18; round += 1) {
+    for (let offset = 0; offset < resolvers.length; offset += 1) {
+      const [label, resolver] = resolvers[(round + offset) % resolvers.length]!
+      collectGarbage?.()
+      const startedAt = performance.now()
+      run(resolver, benchmark)
+      samples
+        .get(label)!
+        .push(
+          (performance.now() - startedAt) /
+            (benchmark.queries.length * benchmark.repetitions),
+        )
+    }
+  }
+  for (const values of samples.values()) {
+    values.sort((left, right) => left - right)
+  }
+  return samples
+}
+
+function run(resolver: Resolver, benchmark: PointerCase) {
+  for (
+    let repetition = 0;
+    repetition < benchmark.repetitions;
+    repetition += 1
+  ) {
+    for (const query of benchmark.queries) {
+      const result = resolver(
+        benchmark.points,
+        query.x,
+        query.y,
+        query.maxDistance,
+      )
+      checksum = (checksum + (result?.datumIndex ?? 0) + 1) % 1_000_000_007
+    }
+  }
+}
+
+function anchorNearestPoint<
+  TDatum,
+  TXValue extends ChartValue,
+  TYValue extends ChartValue,
+>(
+  points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
+  x: number,
+  y: number,
+  maxDistance: number,
+) {
+  let result: ChartPoint<TDatum, TXValue, TYValue> | undefined
+  let resultDistance = Infinity
+  for (const candidate of points) {
+    const dx = candidate.x - x
+    const dy = candidate.y - y
+    const distance = dx * dx + dy * dy
+    if (distance < resultDistance) {
+      result = candidate
+      resultDistance = distance
+    }
+  }
+  return resultDistance <= Math.max(0, maxDistance) ** 2
+    ? (result ?? null)
+    : null
+}
+
+// Selection loop copied from Observable Plot 0.6.17 pointer(), excluding DOM
+// coordinate conversion, rendering, pooling, and event dispatch.
+function plotPointerNearestPoint(
+  points: readonly ChartPoint<Datum, number, number>[],
+  x: number,
+  y: number,
+  maxDistance: number,
+) {
+  let resultIndex = -1
+  let resultDistance = Math.max(0, maxDistance) ** 2
+  for (const index of plotIndexes) {
+    const dx = plotPx(index) - x
+    const dy = plotPy(index) - y
+    const distance = dx * dx + dy * dy
+    if (distance <= resultDistance) {
+      resultIndex = index
+      resultDistance = distance
+    }
+  }
+  return resultIndex < 0 ? null : (points[resultIndex] ?? null)
+}
+
+function quadtreeNearestPoint(
+  _points: readonly ChartPoint<Datum, number, number>[],
+  x: number,
+  y: number,
+  maxDistance: number,
+) {
+  return quadtreeIndex.find(x, y, Math.max(0, maxDistance)) ?? null
+}
+
+function delaunayNearestPoint(
+  points: readonly ChartPoint<Datum, number, number>[],
+  x: number,
+  y: number,
+  maxDistance: number,
+) {
+  return pointWithinDistance(
+    points[delaunayIndex.find(x, y)],
+    x,
+    y,
+    maxDistance,
+  )
+}
+
+function coherentDelaunayNearestPoint(
+  points: readonly ChartPoint<Datum, number, number>[],
+  x: number,
+  y: number,
+  maxDistance: number,
+) {
+  delaunayCursor = delaunayIndex.find(x, y, delaunayCursor)
+  return pointWithinDistance(points[delaunayCursor], x, y, maxDistance)
+}
+
+function pointWithinDistance(
+  point: ChartPoint<Datum, number, number> | undefined,
+  x: number,
+  y: number,
+  maxDistance: number,
+) {
+  if (!point) return null
+  const dx = point.x - x
+  const dy = point.y - y
+  return dx * dx + dy * dy <= Math.max(0, maxDistance) ** 2 ? point : null
+}
+
+// Vega's Canvas picker traverses the scene in reverse paint order and first
+// rejects items against cached bounds. This intentionally stops before Vega's
+// mark-specific Canvas path test, so it is a lower bound rather than a claim
+// about full Vega interaction performance.
+function vegaBoundsNearestPoint(
+  _points: readonly ChartPoint<Datum, number, number>[],
+  x: number,
+  y: number,
+  _maxDistance: number,
+) {
+  return vegaPickVisit(vegaRectItems, (item) =>
+    item.bounds.contains(x, y) ? item.point : null,
+  )
+}
+
+function vegaPickVisit<TItem, TResult>(
+  items: readonly TItem[],
+  visitor: (item: TItem) => TResult | null,
+) {
+  for (let index = items.length; index--;) {
+    const hit = visitor(items[index]!)
+    if (hit) return hit
+  }
+  return null
+}
+
+function pocNearestPoint<
+  TDatum,
+  TXValue extends ChartValue,
+  TYValue extends ChartValue,
+>(
+  points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
+  x: number,
+  y: number,
+  maxDistance: number,
+) {
+  let containing: ChartPoint<TDatum, TXValue, TYValue> | undefined
+  let containingAnchorDistance = Infinity
+  for (const candidate of points) {
+    if (!candidate.hitRegion || !pocContains(candidate.hitRegion, x, y)) {
+      continue
+    }
+    const dx = candidate.x - x
+    const dy = candidate.y - y
+    const anchorDistance = dx * dx + dy * dy
+    if (anchorDistance <= containingAnchorDistance) {
+      containing = candidate
+      containingAnchorDistance = anchorDistance
+    }
+  }
+  if (containing) return containing
+
+  let result: ChartPoint<TDatum, TXValue, TYValue> | undefined
+  let resultDistance = { primary: Infinity, geometry: Infinity }
+  for (const candidate of points) {
+    const distance = pocFallbackDistance(candidate, x, y)
+    if (
+      distance.primary < resultDistance.primary ||
+      (distance.primary === resultDistance.primary &&
+        distance.geometry < resultDistance.geometry)
+    ) {
+      result = candidate
+      resultDistance = distance
+    }
+  }
+  return result && resultDistance.primary <= Math.max(0, maxDistance) ** 2
+    ? result
+    : null
+}
+
+function pocFallbackDistance(point: ChartPoint, x: number, y: number) {
+  const affinity = point.focusAffinity ?? 'xy'
+  if (affinity === 'geometry') {
+    return { primary: Infinity, geometry: Infinity }
+  }
+  const geometry = pocSquaredDistanceToRegion(point, x, y)
+  if (affinity === 'x' || affinity === 'y') {
+    const coordinate = affinity === 'x' ? 0 : 1
+    const [minimum, maximum] = pocExtentForPoint(point, coordinate)
+    const value = coordinate === 0 ? x : y
+    const distance =
+      value < minimum ? minimum - value : value > maximum ? value - maximum : 0
+    return { primary: distance * distance, geometry }
+  }
+  return { primary: geometry, geometry }
+}
+
+function pocSquaredDistanceToRegion(point: ChartPoint, x: number, y: number) {
+  const region = point.hitRegion
+  if (!region) {
+    const dx = point.x - x
+    const dy = point.y - y
+    return dx * dx + dy * dy
+  }
+  if (region.kind === 'rect') {
+    const [left, right] = ordered(region.x, region.x + region.width)
+    const [top, bottom] = ordered(region.y, region.y + region.height)
+    const dx = x < left ? left - x : x > right ? x - right : 0
+    const dy = y < top ? top - y : y > bottom ? y - bottom : 0
+    return dx * dx + dy * dy
+  }
+  if (region.kind === 'circle') {
+    const dx = x - region.x
+    const dy = y - region.y
+    const distance = Math.sqrt(dx * dx + dy * dy)
+    const outside = Math.max(0, distance - Math.max(0, region.radius))
+    return outside * outside
+  }
+  if (pocContains(region, x, y)) return 0
+  let distance = Infinity
+  for (let index = 0; index < region.points.length; index += 1) {
+    const start = region.points[index]!
+    const end = region.points[(index + 1) % region.points.length]!
+    distance = Math.min(
+      distance,
+      pocSquaredDistanceToSegment(x, y, start[0], start[1], end[0], end[1]),
+    )
+  }
+  return distance
+}
+
+function pocContains(
+  region: NonNullable<ChartPoint['hitRegion']>,
+  x: number,
+  y: number,
+) {
+  if (region.kind === 'rect') {
+    const [left, right] = ordered(region.x, region.x + region.width)
+    const [top, bottom] = ordered(region.y, region.y + region.height)
+    return x >= left && x <= right && y >= top && y <= bottom
+  }
+  if (region.kind === 'circle') {
+    const dx = x - region.x
+    const dy = y - region.y
+    return dx * dx + dy * dy <= Math.max(0, region.radius) ** 2
+  }
+
+  let inside = false
+  for (
+    let index = 0, previous = region.points.length - 1;
+    index < region.points.length;
+    previous = index++
+  ) {
+    const current = region.points[index]!
+    const prior = region.points[previous]!
+    if (
+      current[1] > y !== prior[1] > y &&
+      x <
+        ((prior[0] - current[0]) * (y - current[1])) / (prior[1] - current[1]) +
+          current[0]
+    ) {
+      inside = !inside
+    }
+  }
+  return inside
+}
+
+function pocExtentForPoint(
+  point: ChartPoint,
+  coordinate: 0 | 1,
+): readonly [number, number] {
+  const region = point.hitRegion
+  if (!region) {
+    const value = coordinate === 0 ? point.x : point.y
+    return [value, value]
+  }
+  if (region.kind === 'rect') {
+    const value = coordinate === 0 ? region.x : region.y
+    const size = coordinate === 0 ? region.width : region.height
+    return ordered(value, value + size)
+  }
+  if (region.kind === 'circle') {
+    const value = coordinate === 0 ? region.x : region.y
+    return [value - region.radius, value + region.radius]
+  }
+
+  let minimum = Infinity
+  let maximum = -Infinity
+  for (const vertex of region.points) {
+    minimum = Math.min(minimum, vertex[coordinate])
+    maximum = Math.max(maximum, vertex[coordinate])
+  }
+  const fallback = coordinate === 0 ? point.x : point.y
+  return minimum <= maximum ? [minimum, maximum] : [fallback, fallback]
+}
+
+function pocSquaredDistanceToSegment(
+  x: number,
+  y: number,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+) {
+  const dx = x2 - x1
+  const dy = y2 - y1
+  const length = dx * dx + dy * dy
+  if (!length) return (x - x1) ** 2 + (y - y1) ** 2
+  const amount = Math.max(
+    0,
+    Math.min(1, ((x - x1) * dx + (y - y1) * dy) / length),
+  )
+  const offsetX = x - (x1 + amount * dx)
+  const offsetY = y - (y1 + amount * dy)
+  return offsetX * offsetX + offsetY * offsetY
+}
+
+function ordered(left: number, right: number): readonly [number, number] {
+  return left <= right ? [left, right] : [right, left]
+}
+
+function verifyEquivalentResults() {
+  for (const benchmark of cases) {
+    for (const query of benchmark.queries) {
+      const reference = pocNearestPoint(
+        benchmark.points,
+        query.x,
+        query.y,
+        query.maxDistance,
+      )
+      const optimized = nearestPoint(
+        benchmark.points,
+        query.x,
+        query.y,
+        query.maxDistance,
+      )
+      if (reference?.key !== optimized?.key) {
+        throw new Error(
+          `Pointer resolver changed ${benchmark.label}: ${String(reference?.key)} !== ${String(optimized?.key)}`,
+        )
+      }
+    }
+  }
+}
+
+function verifyComparisonResults() {
+  delaunayCursor = 0
+  for (const query of comparisonCase.queries) {
+    const reference = anchorNearestPoint(
+      comparisonCase.points,
+      query.x,
+      query.y,
+      query.maxDistance,
+    )
+    for (const [label, resolver] of comparisonImplementations.slice(1)) {
+      const candidate = resolver(
+        comparisonCase.points,
+        query.x,
+        query.y,
+        query.maxDistance,
+      )
+      if (reference?.key !== candidate?.key) {
+        throw new Error(
+          `Point comparison changed ${label}: ${String(reference?.key)} !== ${String(candidate?.key)}`,
+        )
+      }
+    }
+  }
+  delaunayCursor = 0
+}
+
+function verifyRectangleComparisonResults() {
+  for (const query of rectangleComparisonCase.queries) {
+    const reference = nearestPoint(
+      rectangleComparisonCase.points,
+      query.x,
+      query.y,
+      query.maxDistance,
+    )
+    const candidate = vegaBoundsNearestPoint(
+      rectangleComparisonCase.points,
+      query.x,
+      query.y,
+      query.maxDistance,
+    )
+    if (reference?.key !== candidate?.key) {
+      throw new Error(
+        `Rectangle comparison changed Vega bounds lower bound: ${String(reference?.key)} !== ${String(candidate?.key)}`,
+      )
+    }
+  }
+}
+
+function printAsciiDurations(
+  measurements: ReadonlyMap<string, readonly number[]>,
+  resolvers: readonly Implementation[],
+) {
+  const medians = resolvers.map(([label]) => ({
+    label,
+    value: percentile(measurements.get(label)!, 0.5),
+  }))
+  const maximum = Math.max(...medians.map(({ value }) => value))
+  const labelWidth = Math.max(...medians.map(({ label }) => label.length))
+  console.log('\nMedian query time · shorter is faster')
+  for (const { label, value } of medians) {
+    const width = Math.max(1, Math.round((value / maximum) * 40))
+    console.log(
+      `${label.padEnd(labelWidth)}  ${'#'.repeat(width).padEnd(40)}  ${formatDuration(value)}`,
+    )
+  }
+}
+
+function printScenarioComparisons(
+  scenarios: readonly {
+    benchmark: PointerCase
+    measurements: ReadonlyMap<string, readonly number[]>
+  }[],
+) {
+  console.log('\nCurrent production vs new geometry · median query time')
+  for (const { benchmark, measurements } of scenarios) {
+    const current = percentile(measurements.get('anchor-only baseline')!, 0.5)
+    const optimized = percentile(measurements.get('optimized geometry')!, 0.5)
+    const maximum = Math.max(current, optimized)
+    const currentWidth = Math.max(1, Math.round((current / maximum) * 36))
+    const optimizedWidth = Math.max(1, Math.round((optimized / maximum) * 36))
+    console.log(`\n${benchmark.label}`)
+    console.log(
+      `current prod  ${'#'.repeat(currentWidth).padEnd(36)}  ${formatDuration(current)}`,
+    )
+    console.log(
+      `new geometry  ${'#'.repeat(optimizedWidth).padEnd(36)}  ${formatDuration(optimized)}`,
+    )
+  }
+}
+
+function printIndexBuildTimes() {
+  const builders = [
+    [
+      'D3 quadtree 3.0.1',
+      () =>
+        quadtree<ChartPoint<Datum, number, number>>()
+          .x((point) => point.x)
+          .y((point) => point.y)
+          .addAll([...densePoints])
+          .size(),
+    ],
+    [
+      'D3 Delaunay.from 6.0.4',
+      () =>
+        Delaunay.from(
+          densePoints,
+          (point) => point.x,
+          (point) => point.y,
+        ).triangles.length,
+    ],
+  ] as const
+  const rows = builders.map(([label, build]) => {
+    for (let index = 0; index < 3; index += 1) checksum += build()
+    const samples: number[] = []
+    for (let index = 0; index < 18; index += 1) {
+      collectGarbage?.()
+      const startedAt = performance.now()
+      checksum += build()
+      samples.push(performance.now() - startedAt)
+    }
+    samples.sort((left, right) => left - right)
+    return { label, samples }
+  })
+  console.log('\nOne-time index construction · 10k points')
+  console.log('| Index | Median build | p95 build |')
+  console.log('| --- | ---: | ---: |')
+  for (const { label, samples } of rows) {
+    console.log(
+      `| ${label} | ${formatDuration(percentile(samples, 0.5))} | ${formatDuration(percentile(samples, 0.95))} |`,
+    )
+  }
+}
+
+function printIndexStorage() {
+  let internalNodes = 0
+  let leafNodes = 0
+  quadtreeIndex.visit((node) => {
+    if (node.length) internalNodes += 1
+    else leafNodes += 1
+    return false
+  })
+  const delaunayArrays: readonly ArrayBufferView[] = [
+    delaunayIndex.points as Float64Array,
+    delaunayIndex.triangles,
+    delaunayIndex.halfedges,
+    delaunayIndex.hull,
+    delaunayIndex.inedges,
+  ]
+  const delaunayBytes = delaunayArrays.reduce(
+    (total, array) => total + array.byteLength,
+    0,
+  )
+
+  console.log('\nPersistent index structure · 10k-point fixture')
+  console.log('| Index | Measured retained structure |')
+  console.log('| --- | ---: |')
+  console.log(
+    `| D3 quadtree 3.0.1 | ${internalNodes.toLocaleString()} internal arrays + ${leafNodes.toLocaleString()} leaf objects |`,
+  )
+  console.log(
+    `| D3 Delaunay 6.0.4 | at least ${formatStorage(delaunayBytes)} in public typed arrays |`,
+  )
+  console.log(
+    'Object headers, accessors, internal fields, and the original points are excluded.',
+  )
+}
+
+function point(
+  index: number,
+  x: number,
+  y: number,
+  hitRegion?: ChartPoint['hitRegion'],
+  focusAffinity?: ChartPoint['focusAffinity'],
+): ChartPoint<Datum, number, number> {
+  return {
+    key: `point:${index}`,
+    markId: 'benchmark',
+    group: null,
+    groupLabel: 'benchmark',
+    datum: { index },
+    datumIndex: index,
+    xValue: x,
+    yValue: y,
+    x,
+    y,
+    hitRegion,
+    focusAffinity,
+    color: 'currentColor',
+  }
+}
+
+function queries(
+  count: number,
+  create: (index: number) => PointerQuery,
+): readonly PointerQuery[] {
+  return Array.from({ length: count }, (_, index) => create(index))
+}
+
+function percentile(samples: readonly number[], value: number) {
+  return samples[Math.floor((samples.length - 1) * value)] ?? 0
+}
+
+function formatDuration(milliseconds: number) {
+  return milliseconds < 1
+    ? `${(milliseconds * 1_000).toFixed(1)} µs`
+    : `${milliseconds.toFixed(2)} ms`
+}
+
+function formatStorage(bytes: number) {
+  return `${(bytes / 1_024).toFixed(1)} KiB`
+}
diff --git a/docs/guides/custom-marks-and-renderers.md b/docs/guides/custom-marks-and-renderers.md
index 0d200f5b..bf2adf40 100644
--- a/docs/guides/custom-marks-and-renderers.md
+++ b/docs/guides/custom-marks-and-renderers.md
@@ -111,6 +111,37 @@ Each point should retain:
 - resolved pixel coordinates;
 - group identity and color.
 
+For a large painted mark, set `hitRegion` on each emitted point and declare
+the mark's off-shape fallback once with `focusAffinity`:
+
+```ts
+return {
+  id,
+  focusAffinity: 'x',
+  channels,
+  render(context) {
+    return {
+      nodes,
+      points: nodes.map((node, index) => ({
+        ...interactionPoint(index),
+        hitRegion: {
+          kind: 'rect',
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+        },
+      })),
+    }
+  },
+}
+```
+
+Use `x` for vertically oriented marks, `y` for horizontal marks, `xy` for
+ordinary two-dimensional proximity, and `geometry` when only exact
+containment should focus the mark. The default resolver checks containment
+across every mark before applying any fallback.
+
 Omit points for decorative geometry. Do not invent fake interactive data for a
 frame, grid, or threshold that should not receive focus.
 
diff --git a/docs/reference/focus-and-interaction.md b/docs/reference/focus-and-interaction.md
index fac5fbcf..83669685 100644
--- a/docs/reference/focus-and-interaction.md
+++ b/docs/reference/focus-and-interaction.md
@@ -27,6 +27,36 @@ With no custom focus strategy:
 normal tab-order participation while keeping keyboard handling enabled. Set
 `keyboard: false` to remove keyboard navigation and force tab index `-1`.
 
+### Interaction geometry
+
+When neither `focus` nor `spatialIndex` is supplied, pointer resolution has two
+stages:
+
+1. The topmost scene point whose `hitRegion` contains the pointer wins. Point
+   order follows paint order.
+2. If no region contains the pointer, `focusAffinity` ranks the fallback.
+   `x` and `y` compare distance from that axis boundary first and use complete
+   geometry distance to break ties; `xy` compares complete geometry distance;
+   `geometry` has no off-shape fallback.
+
+`maxFocusDistance` applies to that primary boundary distance, not necessarily
+to the point used as the tooltip and keyboard anchor. Points without either
+field retain anchor-based two-dimensional distance.
+
+`ChartPoint.hitRegion` accepts painted rectangles, circles, and polygons.
+Built-in marks declare these natural defaults:
+
+| Mark                     | Hit region | Fallback |
+| ------------------------ | ---------- | -------- |
+| `barY`                   | Rectangle  | `x`      |
+| `barX`                   | Rectangle  | `y`      |
+| `lineY`, `areaY`         | None       | `x`      |
+| `rect`, `dot`, `hexagon` | Shape      | `xy`     |
+| `bandX`                  | Rectangle  | `x`      |
+| `bandY`                  | Rectangle  | `y`      |
+
+An explicit focus preset or custom strategy replaces this default resolver.
+
 ## Focus modes
 
 Use a preset for built-in focus behavior:
@@ -284,6 +314,11 @@ owns its search algorithm and must apply `maxDistance`.
 Use the granular spatial primitive appropriate to the data; the boundary is
 described in [Scales and D3](../concepts/scales-and-d3.md).
 
+Supplying an index also replaces default hit-region containment and affinity
+ranking; the host does not add a linear safety scan after an indexed query. An
+index that wants identical geometry semantics should index the region bounds
+and perform exact shape checks on its candidates.
+
 A custom `focus` strategy takes precedence over `spatialIndex` for pointer
 resolution.
 
diff --git a/docs/reference/runtime-and-scene.md b/docs/reference/runtime-and-scene.md
index 4ba0e901..20c2d51c 100644
--- a/docs/reference/runtime-and-scene.md
+++ b/docs/reference/runtime-and-scene.md
@@ -131,8 +131,9 @@ function findNearestPoint<
 ```
 
 Coordinates are in scene pixels. `maxDistance` defaults to `Infinity`.
-The function performs a linear scan of the scene's interaction points. For a
-large point set, supply a spatial index to the DOM or framework host; see
+The function performs a linear scan of the scene's interaction points, using
+hit-region containment and mark affinity before anchor distance. For a large
+point set, supply a spatial index to the DOM or framework host; see
 [Focus and interaction](./focus-and-interaction.md#spatial-indexes).
 
 ## `ChartScene`
diff --git a/docs/reference/types.md b/docs/reference/types.md
index a0ab5e43..7b5705e2 100644
--- a/docs/reference/types.md
+++ b/docs/reference/types.md
@@ -137,6 +137,10 @@ The complete overloads and runtime rules are in
 | `MarkScene`             | Mark-owned scene nodes and optional interaction points                        |
 | `ChartScene`            | Complete renderer-neutral output                                              |
 | `ChartPoint`            | Typed interaction target                                                      |
+| `ChartHitRegion`        | Rectangle, circle, or polygon interaction geometry union                      |
+| `ChartRectHitRegion`    | Painted rectangular interaction bounds                                        |
+| `ChartCircleHitRegion`  | Painted circular interaction bounds                                           |
+| `ChartPolygonHitRegion` | Painted polygon interaction vertices                                          |
 | `ChartTick`             | Semantic value, formatted label, and pixel position                           |
 | `ResolvedScale`         | Final positional scale                                                        |
 | `ResolvedColorScale`    | Final color scale                                                             |
@@ -227,6 +231,7 @@ See [DOM host](./dom-host.md) and
 | `ChartFocusSource`                    | Pointer, keyboard, programmatic, or restored source                    |
 | `ChartFocusFilter`                    | Focus-filtered mark matching configuration                             |
 | `ChartFocusMatch`                     | Primary, group, key, x, y, or series matching                          |
+| `ChartFocusAffinity`                  | Mark fallback axis after exact hit-region containment                  |
 | `ChartSpatialIndex`                   | Nearest-point query                                                    |
 | `ChartSpatialIndexFactory`            | Builds an index from current scene points                              |
 | `ChartExtensionInput`                 | Generic bare-token or `{ use, ...options }` extension input            |
diff --git a/examples/sandbox/README.md b/examples/sandbox/README.md
new file mode 100644
index 00000000..9560310d
--- /dev/null
+++ b/examples/sandbox/README.md
@@ -0,0 +1,19 @@
+# Charts sandbox
+
+The private sandbox contains two complementary development surfaces:
+
+- `pnpm dev:sandbox` opens the integrated data dashboard at `/`;
+- `pnpm dev:interaction-geometry` opens the interaction geometry lab at
+  `/?lab=interaction-geometry`.
+
+## Interaction geometry lab
+
+The lab compares legacy anchor-only focus with the current two-stage resolver:
+painted-shape containment first, then the mark's declared `x`, `y`, `xy`, or
+`geometry` fallback. Every chart keeps its source disclosure directly beneath
+the rendered result.
+
+Add a focused case in `src/InteractionGeometryLab.tsx` when a distinct mark
+family or interaction shape exercises behavior not already represented. Keep
+resolver invariants in Charts core tests; the lab test only locks each case's
+before-and-after outcome and the contextual source contract.
diff --git a/examples/sandbox/package.json b/examples/sandbox/package.json
index 70ac8c9a..6ce9d1b4 100644
--- a/examples/sandbox/package.json
+++ b/examples/sandbox/package.json
@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "dev": "vite --host --port 5183 --strictPort"
+    "dev": "vite --host --port 5183 --strictPort",
+    "dev:interaction-geometry": "vite --host --port 5183 --strictPort --open '/?lab=interaction-geometry'"
   },
   "dependencies": {
     "@charts-poc/demo-data": "workspace:*",
diff --git a/examples/sandbox/src/InteractionGeometryLab.test.ts b/examples/sandbox/src/InteractionGeometryLab.test.ts
new file mode 100644
index 00000000..75c5392d
--- /dev/null
+++ b/examples/sandbox/src/InteractionGeometryLab.test.ts
@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest'
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { createChartScene } from '../../../packages/charts-core/src/scene'
+import { nearestPoint } from '../../../packages/charts-core/src/nearest'
+import type { ChartPoint } from '@tanstack/charts'
+import {
+  InteractionGeometryLab,
+  proofCases,
+  type ProofDatum,
+} from './InteractionGeometryLab'
+
+describe('interaction geometry source disclosure', () => {
+  it('renders contextual source beneath every before and after chart', () => {
+    const markup = renderToStaticMarkup(createElement(InteractionGeometryLab))
+
+    expect(markup.match(/class="hit-region-proof__source"/g)).toHaveLength(
+      proofCases.length * 2,
+    )
+    expect(proofCases).toHaveLength(12)
+    expect(markup).toContain('const stackedSeries = [')
+    expect(markup).toContain('polarGuideMark(&#x27;polar-sector-guides&#x27;)')
+    expect(markup).toContain(
+      'normalizedPolygonMark(&#x27;radar&#x27;, radar, &#x27;polar&#x27;)',
+    )
+    expect(markup).toContain(
+      'const beforeDefinition = interactiveDefinition(verticalBase, legacyPointFocus)',
+    )
+    expect(markup).toContain(
+      'const afterDefinition = interactiveDefinition(verticalBase)',
+    )
+    expect(markup).toContain('focusAffinity: &#x27;geometry&#x27;')
+    expect(markup).toContain(
+      'hitRegion: { kind: &#x27;polygon&#x27;, points: polygon }',
+    )
+    expect(markup).not.toContain('packages/charts-core/src/nearest.ts')
+  })
+})
+
+describe('interaction geometry proof gallery', () => {
+  for (const proof of proofCases) {
+    it(`${proof.id} demonstrates its before and after result`, () => {
+      const scene = createChartScene(proof.after, {
+        width: 520,
+        height: 230,
+      })
+      const probe = proof.probe(scene)
+      expect(probe).not.toBeNull()
+      if (!probe) return
+
+      const before = legacyNearest(scene.points, probe.x, probe.y, 48)
+      const after = nearestPoint(scene.points, probe.x, probe.y, 48)
+
+      expect(before?.datum.label ?? 'Nothing focused yet').toBe(
+        proof.beforeExpected,
+      )
+      expect(after?.datum.label ?? 'Nothing focused yet').toBe(
+        proof.afterExpected,
+      )
+    })
+  }
+
+  it('selects the nearest stacked segment outside the stack', () => {
+    const proof = proofCases.find(
+      (candidate) => candidate.id === 'stacked-bars',
+    )
+    expect(proof).toBeDefined()
+    if (!proof) return
+
+    const scene = createChartScene(proof.after, { width: 520, height: 230 })
+    const top = scene.points.find((point) => point.datum.id === 'october-other')
+    const bottom = scene.points.find(
+      (point) => point.datum.id === 'october-disease',
+    )
+    expect(top?.hitRegion?.kind).toBe('rect')
+    expect(bottom?.hitRegion?.kind).toBe('rect')
+    if (top?.hitRegion?.kind !== 'rect' || bottom?.hitRegion?.kind !== 'rect')
+      return
+
+    const above = Math.min(
+      top.hitRegion.y,
+      top.hitRegion.y + top.hitRegion.height,
+    )
+    const below = Math.max(
+      bottom.hitRegion.y,
+      bottom.hitRegion.y + bottom.hitRegion.height,
+    )
+
+    expect(nearestPoint(scene.points, top.x, above - 12, 48)?.datum.id).toBe(
+      'october-other',
+    )
+    expect(nearestPoint(scene.points, bottom.x, below + 12, 48)?.datum.id).toBe(
+      'october-disease',
+    )
+  })
+})
+
+function legacyNearest<TDatum>(
+  points: readonly ChartPoint<TDatum, number, number>[],
+  x: number,
+  y: number,
+  maxDistance: number,
+) {
+  let result: ChartPoint<TDatum, number, number> | undefined
+  let distance = Number.POSITIVE_INFINITY
+  for (const point of points) {
+    const candidate = (point.x - x) ** 2 + (point.y - y) ** 2
+    if (candidate < distance) {
+      result = point
+      distance = candidate
+    }
+  }
+  return distance <= maxDistance ** 2 ? result : null
+}
diff --git a/examples/sandbox/src/InteractionGeometryLab.tsx b/examples/sandbox/src/InteractionGeometryLab.tsx
new file mode 100644
index 00000000..34066f9c
--- /dev/null
+++ b/examples/sandbox/src/InteractionGeometryLab.tsx
@@ -0,0 +1,1110 @@
+import * as React from 'react'
+import {
+  areaY,
+  barX,
+  barY,
+  createMark,
+  defineChart,
+  dot,
+  rect,
+  stack,
+  type ChartFocusAffinity,
+  type ChartFocusStrategy,
+  type ChartPoint,
+  type ChartRenderContext,
+  type ChartScene,
+  type SceneNode,
+  type StaticChartDefinition,
+} from '@tanstack/charts'
+import { tooltip } from '@tanstack/charts/tooltip'
+import { Chart } from '@tanstack/react-charts'
+import { scaleBand, scaleLinear } from 'd3-scale'
+import proofSource from './InteractionGeometryLab.tsx?raw'
+
+export interface ProofDatum {
+  id: string
+  label: string
+  x?: number
+  y?: number
+  x1?: number
+  x2?: number
+  y1?: number
+  y2?: number
+  value?: number
+  series?: string
+  radius?: number
+  polygon?: readonly (readonly [number, number])[]
+  probe?: readonly [number, number]
+  color?: string
+}
+
+interface ProofCase {
+  id: string
+  title: string
+  affinity: ChartFocusAffinity
+  explanation: string
+  beforeExpected: string
+  afterExpected: string
+  source: string
+  before: StaticChartDefinition<ProofDatum, number, number>
+  after: StaticChartDefinition<ProofDatum, number, number>
+  probe: (
+    scene: ChartScene<ProofDatum, number, number>,
+  ) => { x: number; y: number } | null
+}
+
+const legacyPointFocus: ChartFocusStrategy<ProofDatum, number, number> = {
+  resolve(points, x, y, maxDistance) {
+    let nearest: ChartPoint<ProofDatum, number, number> | undefined
+    let nearestDistance = Number.POSITIVE_INFINITY
+    for (const point of points) {
+      const distance = (point.x - x) ** 2 + (point.y - y) ** 2
+      if (distance < nearestDistance) {
+        nearest = point
+        nearestDistance = distance
+      }
+    }
+    return nearest && nearestDistance <= Math.max(0, maxDistance) ** 2
+      ? [nearest]
+      : []
+  },
+  group(_points, point) {
+    return [point]
+  },
+  navigation(points) {
+    return points
+  },
+}
+
+export const proofCases = createProofCases()
+
+export function InteractionGeometryLab() {
+  return (
+    <main className="hit-region-proof">
+      <header className="hit-region-proof__header">
+        <h1>Interaction geometry</h1>
+        <p>
+          Each comparison uses the same pointer position and 48px threshold.
+          Before measures from a mark’s anchor point. After tests its painted
+          shape first, then uses the mark’s natural interaction axis.
+        </p>
+      </header>
+
+      <div className="hit-region-proof__gallery">
+        {proofCases.map((proof) => (
+          <section
+            className="hit-region-proof__case"
+            key={proof.id}
+            data-proof-case={proof.id}
+          >
+            <header className="hit-region-proof__case-header">
+              <h2>{proof.title}</h2>
+              <code>fallback: {proof.affinity}</code>
+            </header>
+            <p className="hit-region-proof__case-description">
+              {proof.explanation}
+            </p>
+            <div
+              className="hit-region-proof__grid"
+              aria-label={`${proof.title} before and after`}
+            >
+              <ProofChart proof={proof} mode="before" />
+              <ProofChart proof={proof} mode="after" />
+            </div>
+          </section>
+        ))}
+      </div>
+    </main>
+  )
+}
+
+function SourceIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16">
+      <path d="m6 3-5 5 5 5M10 3l5 5-5 5" />
+    </svg>
+  )
+}
+
+function ProofChart({
+  proof,
+  mode,
+}: {
+  proof: ProofCase
+  mode: 'before' | 'after'
+}) {
+  const [focused, setFocused] = React.useState<ProofDatum | null>(null)
+  const [probe, setProbe] = React.useState<{ x: number; y: number } | null>(
+    null,
+  )
+  const onRender = React.useCallback(
+    (context: ChartRenderContext<ProofDatum, number, number>) => {
+      const next = proof.probe(context.scene)
+      if (!next) return
+      setProbe((current) =>
+        current && current.x === next.x && current.y === next.y
+          ? current
+          : next,
+      )
+    },
+    [proof],
+  )
+  const expected =
+    mode === 'before' ? proof.beforeExpected : proof.afterExpected
+  const actual = focused?.label ?? 'Nothing focused yet'
+
+  return (
+    <article
+      className={`hit-region-proof__card hit-region-proof__card--${mode}`}
+      data-proof-chart={`${proof.id}-${mode}`}
+    >
+      <div className="hit-region-proof__card-header">
+        <span className="hit-region-proof__badge">{mode}</span>
+        <span className="hit-region-proof__distance">48px</span>
+      </div>
+
+      <div className="hit-region-proof__chart">
+        <Chart
+          definition={mode === 'before' ? proof.before : proof.after}
+          height={230}
+          initialWidth={520}
+          ariaLabel={`${proof.title}: ${mode}`}
+          onFocusChange={(point) => setFocused(point?.datum ?? null)}
+          onRender={onRender}
+        />
+        {probe ? (
+          <div
+            className="hit-region-proof__probe"
+            data-proof-probe={`${proof.id}-${mode}`}
+            style={{ left: probe.x, top: probe.y }}
+            aria-hidden="true"
+          >
+            <span />
+          </div>
+        ) : null}
+      </div>
+
+      <dl className="hit-region-proof__result">
+        <div>
+          <dt>Expected</dt>
+          <dd>{expected}</dd>
+        </div>
+        <div>
+          <dt>Actually focused</dt>
+          <dd data-proof-result={`${proof.id}-${mode}`}>{actual}</dd>
+        </div>
+      </dl>
+
+      <ChartSourceDisclosure proof={proof} mode={mode} />
+    </article>
+  )
+}
+
+function ChartSourceDisclosure({
+  proof,
+  mode,
+}: {
+  proof: ProofCase
+  mode: 'before' | 'after'
+}) {
+  const source = sourceForMode(proof.source, mode)
+
+  return (
+    <details className="hit-region-proof__source">
+      <summary>
+        <span>
+          <SourceIcon />
+          Source
+        </span>
+        <span className="hit-region-proof__source-meta">
+          {lineCount(source).toLocaleString('en-US')} lines · {mode}
+        </span>
+      </summary>
+      <pre>
+        <code>{source}</code>
+      </pre>
+    </details>
+  )
+}
+
+function sourceForMode(source: string, mode: 'before' | 'after') {
+  const baseName = /const (\w+Base)\s*=/.exec(source)?.[1] ?? 'base'
+  const focus = mode === 'before' ? ', legacyPointFocus' : ''
+  const helpers = source.includes('normalizedRectMark(')
+    ? [sourceSection('normalized-rect-mark')]
+    : source.includes('normalizedPolygonMark(')
+      ? [sourceSection('normalized-polygon-mark')]
+      : []
+  if (source.includes('polarGuideMark(')) {
+    helpers.unshift(sourceSection('polar-guide-mark'))
+  }
+  return [
+    source,
+    ...helpers,
+    `const ${mode}Definition = interactiveDefinition(${baseName}${focus})`,
+  ].join('\n\n')
+}
+
+function sourceSection(id: string) {
+  const startMarker = `// source:${id}:start`
+  const endMarker = `// source:${id}:end`
+  const start = proofSource.indexOf(startMarker)
+  const end = proofSource.indexOf(endMarker)
+  if (start < 0 || end <= start) {
+    throw new TypeError(`Missing proof source section: ${id}`)
+  }
+  return proofSource
+    .slice(start + startMarker.length, end)
+    .trim()
+    .replace(/^ {2}/gm, '')
+}
+
+function lineCount(source: string) {
+  return source ? source.split('\n').length : 0
+}
+
+function createProofCases(): ProofCase[] {
+  // source:stacked-bars:start
+  const stackedMonths = [
+    { month: 'May', disease: 86, wounds: 26, other: 14 },
+    { month: 'June', disease: 80, wounds: 31, other: 11 },
+    { month: 'July', disease: 92, wounds: 25, other: 18 },
+    { month: 'August', disease: 84, wounds: 34, other: 12 },
+    { month: 'September', disease: 72, wounds: 29, other: 16 },
+    { month: 'October', disease: 210, wounds: 96, other: 48 },
+    { month: 'November', disease: 76, wounds: 35, other: 15 },
+    { month: 'December', disease: 88, wounds: 28, other: 20 },
+    { month: 'January', disease: 81, wounds: 32, other: 17 },
+    { month: 'February', disease: 94, wounds: 27, other: 13 },
+    { month: 'March', disease: 85, wounds: 30, other: 19 },
+  ] as const
+  const stackedSeries = ['disease', 'wounds', 'other'] as const
+  const verticalBars = stackedMonths.flatMap((month, x) =>
+    stackedSeries.map((series) => ({
+      id: `${month.month.toLowerCase()}-${series}`,
+      label: `${month.month} · ${series} · ${month[series]}`,
+      x,
+      y: month[series],
+      series,
+    })),
+  ) satisfies ProofDatum[]
+  const verticalBase = baseDefinition(
+    [
+      barY(verticalBars, {
+        id: 'vertical-bars',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        key: 'id',
+        layout: stack({ order: stackedSeries }),
+        inset: 10,
+      }),
+    ],
+    scaleBand<number>()
+      .domain(verticalBars.map((datum) => datum.x))
+      .padding(0.15),
+    scaleLinear().domain([0, 380]),
+  )
+  // source:stacked-bars:end
+
+  // source:horizontal-bars:start
+  const horizontalBars = [
+    { id: 'long', label: 'Long ranking bar · 190', x: 190, y: 0 },
+    { id: 'near', label: 'Neighbor endpoint · 82', x: 82, y: 1 },
+    { id: 'third', label: 'Third bar · 130', x: 130, y: 2 },
+    { id: 'fourth', label: 'Fourth bar · 105', x: 105, y: 3 },
+    { id: 'fifth', label: 'Fifth bar · 118', x: 118, y: 4 },
+  ] satisfies ProofDatum[]
+  const horizontalBase = baseDefinition(
+    [
+      barX(horizontalBars, {
+        id: 'horizontal-bars',
+        x: 'x',
+        y: 'y',
+        key: 'id',
+        inset: 5,
+      }),
+    ],
+    scaleLinear().domain([0, 210]),
+    scaleBand<number>().domain([0, 1, 2, 3, 4]).padding(0.12),
+  )
+  // source:horizontal-bars:end
+
+  // source:line-area:start
+  const areaRows = [
+    { id: 'left', label: 'Left sample · 84', x: 0, y: 84 },
+    { id: 'middle', label: 'Middle slice · 205', x: 1, y: 205 },
+    { id: 'right', label: 'Right sample · 92', x: 2, y: 92 },
+  ] satisfies ProofDatum[]
+  const areaBase = baseDefinition(
+    [
+      areaY(areaRows, {
+        id: 'area',
+        x: 'x',
+        y: 'y',
+        key: 'id',
+        fillOpacity: 0.42,
+        stroke: '#404040',
+        strokeWidth: 2,
+      }),
+    ],
+    scaleLinear().domain([0, 2]),
+    scaleLinear().domain([0, 220]),
+  )
+  // source:line-area:end
+
+  // source:bubbles:start
+  const bubbles = [
+    {
+      id: 'large-bubble',
+      label: 'Large bubble',
+      x: 40,
+      y: 55,
+      radius: 46,
+    },
+    {
+      id: 'small-bubble',
+      label: 'Nearby small bubble',
+      x: 49,
+      y: 55,
+      radius: 5,
+    },
+    { id: 'other-bubble', label: 'Other bubble', x: 78, y: 28, radius: 12 },
+  ] satisfies ProofDatum[]
+  const bubbleBase = baseDefinition(
+    [
+      dot(bubbles, {
+        id: 'bubbles',
+        x: 'x',
+        y: 'y',
+        r: 'radius',
+        key: 'id',
+        fillOpacity: 0.7,
+        stroke: '#ffffff',
+        strokeWidth: 1.5,
+      }),
+    ],
+    scaleLinear().domain([0, 100]),
+    scaleLinear().domain([0, 100]),
+  )
+  // source:bubbles:end
+
+  // source:cells:start
+  const cells = [
+    {
+      id: 'large-cell',
+      label: 'Large heatmap / treemap cell',
+      x1: 0,
+      x2: 70,
+      y1: 0,
+      y2: 100,
+      color: '#404040',
+    },
+    {
+      id: 'small-cell',
+      label: 'Neighbor cell',
+      x1: 70.5,
+      x2: 79,
+      y1: 42,
+      y2: 58,
+      color: '#a3a3a3',
+    },
+  ] satisfies ProofDatum[]
+  const cellBase = baseDefinition(
+    [
+      rect(cells, {
+        id: 'cells',
+        x1: 'x1',
+        x2: 'x2',
+        y1: 'y1',
+        y2: 'y2',
+        key: 'id',
+        color: 'id',
+        inset: 2,
+      }),
+    ],
+    scaleLinear().domain([0, 100]),
+    scaleLinear().domain([0, 100]),
+  )
+  // source:cells:end
+
+  // source:financial:start
+  const financial = [
+    {
+      id: 'tall-candle',
+      label: 'Tall candle / box plot',
+      x1: 0.34,
+      x2: 0.42,
+      y1: 0.08,
+      y2: 0.92,
+      probe: [0.38, 0.78],
+      color: '#404040',
+    },
+    {
+      id: 'near-candle',
+      label: 'Nearby candle endpoint',
+      x1: 0.445,
+      x2: 0.49,
+      y1: 0.67,
+      y2: 0.79,
+      color: '#a3a3a3',
+    },
+  ] satisfies ProofDatum[]
+  const financialBase = baseDefinition(
+    [normalizedRectMark('financial', financial, 'x')],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:financial:end
+
+  // source:timeline:start
+  const timeline = [
+    {
+      id: 'long-task',
+      label: 'Long Gantt interval',
+      x1: 0.08,
+      x2: 0.83,
+      y1: 0.25,
+      y2: 0.43,
+      probe: [0.76, 0.34],
+      color: '#404040',
+    },
+    {
+      id: 'milestone',
+      label: 'Nearby milestone',
+      x1: 0.72,
+      x2: 0.8,
+      y1: 0.5,
+      y2: 0.64,
+      color: '#a3a3a3',
+    },
+  ] satisfies ProofDatum[]
+  const timelineBase = baseDefinition(
+    [normalizedRectMark('timeline', timeline, 'y')],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:timeline:end
+
+  // source:pie:start
+  const pie = [
+    {
+      id: 'large-slice',
+      label: 'Large pie / donut slice',
+      polygon: [
+        [0.5, 0.5],
+        [0.5, 0.08],
+        [0.86, 0.22],
+        [0.9, 0.56],
+      ],
+      probe: [0.82, 0.23],
+      color: '#404040',
+    },
+    {
+      id: 'small-slice',
+      label: 'Neighbor slice centroid',
+      polygon: [
+        [0.5, 0.5],
+        [0.9, 0.56],
+        [0.69, 0.9],
+      ],
+      color: '#a3a3a3',
+    },
+    {
+      id: 'last-slice',
+      label: 'Last slice',
+      polygon: [
+        [0.5, 0.5],
+        [0.69, 0.9],
+        [0.16, 0.7],
+        [0.5, 0.08],
+      ],
+      color: '#d4d4d4',
+    },
+  ] satisfies ProofDatum[]
+  const pieBase = baseDefinition(
+    [normalizedPolygonMark('pie', pie)],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:pie:end
+
+  // source:polar-sectors:start
+  const annularSector = (
+    startAngle: number,
+    endAngle: number,
+    innerRadius: number,
+    outerRadius: number,
+  ) => {
+    const center = 0.5
+    const steps = 10
+    const angles = Array.from(
+      { length: steps + 1 },
+      (_, index) => startAngle + ((endAngle - startAngle) * index) / steps,
+    )
+    const point = (angle: number, radius: number) =>
+      [
+        center + Math.cos(angle) * radius,
+        center + Math.sin(angle) * radius,
+      ] as const
+    return [
+      ...angles.map((angle) => point(angle, outerRadius)),
+      ...[...angles].reverse().map((angle) => point(angle, innerRadius)),
+    ]
+  }
+  const polarSectors = [
+    {
+      id: 'long-sector',
+      label: 'Long radial bar / annular sector',
+      polygon: annularSector(-2.2, 0.25, 0.15, 0.43),
+      probe: [0.83, 0.57],
+      color: '#404040',
+    },
+    {
+      id: 'near-sector',
+      label: 'Neighbor sector centroid',
+      polygon: annularSector(0.29, 0.7, 0.15, 0.43),
+      color: '#a3a3a3',
+    },
+    {
+      id: 'remaining-sector',
+      label: 'Remaining polar sector',
+      polygon: annularSector(0.74, 4.02, 0.15, 0.43),
+      color: '#d4d4d4',
+    },
+  ] satisfies ProofDatum[]
+  const polarSectorBase = baseDefinition(
+    [
+      polarGuideMark('polar-sector-guides'),
+      normalizedPolygonMark('polar-sectors', polarSectors, 'polar'),
+    ],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:polar-sectors:end
+
+  // source:radar-area:start
+  const radar = [
+    {
+      id: 'radar-profile',
+      label: 'Large radar profile',
+      polygon: [
+        [0.5, 0.1],
+        [0.76, 0.32],
+        [0.84, 0.68],
+        [0.5, 0.82],
+        [0.2, 0.68],
+        [0.28, 0.34],
+      ],
+      probe: [0.76, 0.36],
+      color: '#525252',
+    },
+    {
+      id: 'radar-neighbor',
+      label: 'Nearby polar point',
+      polygon: [
+        [0.79, 0.27],
+        [0.82, 0.25],
+        [0.85, 0.27],
+        [0.85, 0.31],
+        [0.82, 0.33],
+        [0.79, 0.31],
+      ],
+      color: '#b3b3b3',
+    },
+  ] satisfies ProofDatum[]
+  const radarBase = baseDefinition(
+    [
+      polarGuideMark('radar-guides'),
+      normalizedPolygonMark('radar', radar, 'polar'),
+    ],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:radar-area:end
+
+  // source:map:start
+  const map = [
+    {
+      id: 'west-region',
+      label: 'Large map region',
+      polygon: [
+        [0.08, 0.2],
+        [0.52, 0.12],
+        [0.61, 0.42],
+        [0.44, 0.82],
+        [0.12, 0.72],
+      ],
+      probe: [0.58, 0.4],
+      color: '#404040',
+    },
+    {
+      id: 'east-region',
+      label: 'Neighbor region centroid',
+      polygon: [
+        [0.62, 0.28],
+        [0.72, 0.22],
+        [0.73, 0.58],
+        [0.63, 0.62],
+      ],
+      color: '#a3a3a3',
+    },
+  ] satisfies ProofDatum[]
+  const mapBase = baseDefinition(
+    [normalizedPolygonMark('map', map)],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:map:end
+
+  // source:sankey:start
+  const sankey = [
+    {
+      id: 'wide-link',
+      label: 'Wide Sankey / network link',
+      polygon: [
+        [0.16, 0.2],
+        [0.84, 0.58],
+        [0.84, 0.74],
+        [0.16, 0.36],
+      ],
+      probe: [0.76, 0.56],
+      color: '#525252',
+    },
+    {
+      id: 'node',
+      label: 'Nearby node anchor',
+      polygon: [
+        [0.79, 0.36],
+        [0.89, 0.36],
+        [0.89, 0.52],
+        [0.79, 0.52],
+      ],
+      color: '#a3a3a3',
+    },
+  ] satisfies ProofDatum[]
+  const sankeyBase = baseDefinition(
+    [normalizedPolygonMark('sankey', sankey)],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:sankey:end
+
+  return [
+    makeCase({
+      id: 'stacked-bars',
+      title: 'Stacked bars',
+      affinity: 'x',
+      explanation:
+        'Containment selects the tall October rectangle; outside all bars, only horizontal category distance matters.',
+      beforeExpected: 'September · disease · 72',
+      afterExpected: 'October · disease · 210',
+      base: verticalBase,
+      probe: (scene) => pointAtValue(scene, 'october-disease', 'y', 72),
+    }),
+    makeCase({
+      id: 'horizontal-bars',
+      title: 'Rankings and horizontal bars',
+      affinity: 'y',
+      explanation:
+        'The long painted bar wins directly; off-mark fallback stays in its row rather than jumping diagonally.',
+      beforeExpected: 'Neighbor endpoint · 82',
+      afterExpected: 'Long ranking bar · 190',
+      base: horizontalBase,
+      probe: (scene) => pointAtValue(scene, 'long', 'x', 82),
+    }),
+    makeCase({
+      id: 'line-area',
+      title: 'Lines and vertical areas',
+      affinity: 'x',
+      explanation:
+        'There is no large point to hit, so the mark’s x affinity resolves the sample at the pointer’s time/category.',
+      beforeExpected: 'Nothing focused yet',
+      afterExpected: 'Middle slice · 205',
+      base: areaBase,
+      probe: (scene) => pointAtValue(scene, 'middle', 'y', 8),
+    }),
+    makeCase({
+      id: 'bubbles',
+      title: 'Scatterplots and bubbles',
+      affinity: 'xy',
+      explanation:
+        'A large circle is targetable across its painted radius before ordinary two-dimensional proximity is considered.',
+      beforeExpected: 'Nearby small bubble',
+      afterExpected: 'Large bubble',
+      base: bubbleBase,
+      probe: (scene) => circleEdgeProbe(scene, 'large-bubble', 0.78),
+    }),
+    makeCase({
+      id: 'cells',
+      title: 'Heatmaps and treemaps',
+      affinity: 'xy',
+      explanation:
+        'The containing cell wins; outside the cells, distance is measured to their rectangle boundaries in both axes.',
+      beforeExpected: 'Neighbor cell',
+      afterExpected: 'Large heatmap / treemap cell',
+      base: cellBase,
+      probe: (scene) => rectProbe(scene, 'large-cell', 0.94, 0.5),
+    }),
+    makeCase({
+      id: 'financial',
+      title: 'Candlesticks and box plots',
+      affinity: 'x',
+      explanation:
+        'Tall financial intervals use their body or whisker geometry first, then the natural x position of the observation.',
+      beforeExpected: 'Nearby candle endpoint',
+      afterExpected: 'Tall candle / box plot',
+      base: financialBase,
+      probe: normalizedDatumProbe('tall-candle'),
+    }),
+    makeCase({
+      id: 'timeline',
+      title: 'Timelines and Gantt charts',
+      affinity: 'y',
+      explanation:
+        'Long intervals remain targetable throughout their body, and nearby fallback follows the task lane.',
+      beforeExpected: 'Nearby milestone',
+      afterExpected: 'Long Gantt interval',
+      base: timelineBase,
+      probe: normalizedDatumProbe('long-task'),
+    }),
+    makeCase({
+      id: 'pie',
+      title: 'Pie and donut slices',
+      affinity: 'geometry',
+      explanation:
+        'Irregular slices opt out of axis fallback: the pointer must be inside the slice instead of near an arbitrary centroid.',
+      beforeExpected: 'Nothing focused yet',
+      afterExpected: 'Large pie / donut slice',
+      base: pieBase,
+      probe: normalizedDatumProbe('large-slice'),
+    }),
+    makeCase({
+      id: 'polar-sectors',
+      title: 'Radial bars and annular sectors',
+      affinity: 'geometry',
+      explanation:
+        'Long polar marks remain targetable across their full angular and radial extent instead of only near an arc centroid.',
+      beforeExpected: 'Neighbor sector centroid',
+      afterExpected: 'Long radial bar / annular sector',
+      base: polarSectorBase,
+      probe: normalizedPolarDatumProbe('long-sector'),
+    }),
+    makeCase({
+      id: 'radar-area',
+      title: 'Radar and polar areas',
+      affinity: 'geometry',
+      explanation:
+        'The radar profile owns its painted interior; a nearby polar sample cannot steal the pointer just because its anchor is closer.',
+      beforeExpected: 'Nearby polar point',
+      afterExpected: 'Large radar profile',
+      base: radarBase,
+      probe: normalizedPolarDatumProbe('radar-profile'),
+    }),
+    makeCase({
+      id: 'map',
+      title: 'Maps and geographic regions',
+      affinity: 'geometry',
+      explanation:
+        'A region’s polygon is the interaction contract; neighboring centroids no longer steal interior pointer positions.',
+      beforeExpected: 'Neighbor region centroid',
+      afterExpected: 'Large map region',
+      base: mapBase,
+      probe: normalizedDatumProbe('west-region'),
+    }),
+    makeCase({
+      id: 'sankey',
+      title: 'Sankey and network geometry',
+      affinity: 'geometry',
+      explanation:
+        'Wide links and nodes expose their own shapes, avoiding a global x or y rule that would be wrong for topology.',
+      beforeExpected: 'Nearby node anchor',
+      afterExpected: 'Wide Sankey / network link',
+      base: sankeyBase,
+      probe: normalizedDatumProbe('wide-link'),
+    }),
+  ]
+}
+
+function baseDefinition(
+  marks: StaticChartDefinition<ProofDatum, number, number>['marks'],
+  xScale:
+    | ReturnType<typeof scaleLinear<number, number>>
+    | ReturnType<typeof scaleBand<number>>,
+  yScale:
+    | ReturnType<typeof scaleLinear<number, number>>
+    | ReturnType<typeof scaleBand<number>>,
+): StaticChartDefinition<ProofDatum, number, number> {
+  return {
+    marks,
+    x: { scale: xScale, grid: true },
+    y: { scale: yScale, grid: true },
+    guides: false,
+    margin: { top: 18, right: 20, bottom: 18, left: 20 },
+    theme: {
+      foreground: '#171717',
+      muted: '#737373',
+      grid: '#e5e5e5',
+      background: 'transparent',
+      palette: ['#171717', '#737373', '#d4d4d4', '#a3a3a3', '#525252'],
+    },
+  }
+}
+
+function makeCase(
+  input: Omit<ProofCase, 'before' | 'after' | 'source'> & {
+    base: StaticChartDefinition<ProofDatum, number, number>
+  },
+): ProofCase {
+  const { base, ...proof } = input
+  return {
+    ...proof,
+    source: sourceSection(proof.id),
+    before: interactiveDefinition(base, legacyPointFocus),
+    after: interactiveDefinition(base),
+  }
+}
+
+function interactiveDefinition(
+  base: StaticChartDefinition<ProofDatum, number, number>,
+  focus?: ChartFocusStrategy<ProofDatum, number, number>,
+) {
+  return defineChart(base, {
+    focus,
+    maxFocusDistance: 48,
+    animate: false,
+    tooltip: {
+      use: tooltip,
+      className: 'hit-region-proof__tooltip',
+      sticky: true,
+      placement: ['top', 'right', 'left', 'bottom'],
+      format: (point) => point.datum.label,
+    },
+  })
+}
+
+// source:normalized-rect-mark:start
+function normalizedRectMark(
+  id: string,
+  data: readonly ProofDatum[],
+  focusAffinity: ChartFocusAffinity,
+) {
+  return createMark<ProofDatum, number, number>(() => ({
+    id,
+    focusAffinity,
+    channels: {},
+    render: ({ chart }) => {
+      const nodes: SceneNode[] = []
+      const points: ChartPoint<ProofDatum, number, number>[] = []
+      data.forEach((datum, datumIndex) => {
+        if (
+          datum.x1 === undefined ||
+          datum.x2 === undefined ||
+          datum.y1 === undefined ||
+          datum.y2 === undefined
+        )
+          return
+        const x = chart.x + datum.x1 * chart.width
+        const y = chart.y + datum.y1 * chart.height
+        const width = (datum.x2 - datum.x1) * chart.width
+        const height = (datum.y2 - datum.y1) * chart.height
+        const centerX = x + width / 2
+        const centerY = y + height / 2
+        nodes.push({
+          kind: 'rect',
+          key: datum.id,
+          x,
+          y,
+          width,
+          height,
+          radius: 4,
+          style: { fill: datum.color ?? '#404040', fillOpacity: 0.78 },
+        })
+        points.push({
+          key: datum.id,
+          markId: id,
+          group: null,
+          groupLabel: id,
+          datum,
+          datumIndex,
+          xValue: centerX,
+          yValue: centerY,
+          x: centerX,
+          y: centerY,
+          hitRegion: { kind: 'rect', x, y, width, height },
+          color: datum.color ?? '#404040',
+        })
+      })
+      return { nodes, points }
+    },
+  }))
+}
+// source:normalized-rect-mark:end
+
+// source:polar-guide-mark:start
+function polarGuideMark(id: string) {
+  return createMark<ProofDatum, number, number>(() => ({
+    id,
+    channels: {},
+    render: ({ chart }) => {
+      const centerX = chart.x + chart.width / 2
+      const centerY = chart.y + chart.height / 2
+      const radius = Math.min(chart.width, chart.height) * 0.43
+      const nodes: SceneNode[] = []
+      for (const ratio of [0.25, 0.5, 0.75, 1]) {
+        nodes.push({
+          kind: 'dot',
+          key: `${id}:ring:${ratio}`,
+          x: centerX,
+          y: centerY,
+          radius: radius * ratio,
+          style: { fill: 'none', stroke: '#e5e5e5', strokeWidth: 1 },
+        })
+      }
+      for (let index = 0; index < 8; index++) {
+        const angle = (index / 8) * Math.PI * 2
+        nodes.push({
+          kind: 'polyline',
+          key: `${id}:spoke:${index}`,
+          points: [
+            [centerX, centerY],
+            [
+              centerX + Math.cos(angle) * radius,
+              centerY + Math.sin(angle) * radius,
+            ],
+          ],
+          style: { fill: 'none', stroke: '#e5e5e5', strokeWidth: 1 },
+        })
+      }
+      return { nodes, points: [] }
+    },
+  }))
+}
+// source:polar-guide-mark:end
+
+// source:normalized-polygon-mark:start
+function normalizedPolygonMark(
+  id: string,
+  data: readonly ProofDatum[],
+  coordinate: 'cartesian' | 'polar' = 'cartesian',
+) {
+  return createMark<ProofDatum, number, number>(() => ({
+    id,
+    focusAffinity: 'geometry',
+    channels: {},
+    render: ({ chart }) => {
+      const nodes: SceneNode[] = []
+      const points: ChartPoint<ProofDatum, number, number>[] = []
+      const size = Math.min(chart.width, chart.height)
+      const originX =
+        coordinate === 'polar' ? chart.x + (chart.width - size) / 2 : chart.x
+      const originY =
+        coordinate === 'polar' ? chart.y + (chart.height - size) / 2 : chart.y
+      const width = coordinate === 'polar' ? size : chart.width
+      const height = coordinate === 'polar' ? size : chart.height
+      data.forEach((datum, datumIndex) => {
+        if (!datum.polygon?.length) return
+        const polygon = datum.polygon.map(
+          ([x, y]) => [originX + x * width, originY + y * height] as const,
+        )
+        const x =
+          polygon.reduce((sum, point) => sum + point[0], 0) / polygon.length
+        const y =
+          polygon.reduce((sum, point) => sum + point[1], 0) / polygon.length
+        nodes.push({
+          kind: 'area',
+          key: datum.id,
+          points: polygon,
+          style: {
+            fill: datum.color ?? '#404040',
+            fillOpacity: 0.78,
+            stroke: '#ffffff',
+            strokeWidth: 1,
+          },
+        })
+        points.push({
+          key: datum.id,
+          markId: id,
+          group: null,
+          groupLabel: id,
+          datum,
+          datumIndex,
+          xValue: x,
+          yValue: y,
+          x,
+          y,
+          hitRegion: { kind: 'polygon', points: polygon },
+          color: datum.color ?? '#404040',
+        })
+      })
+      return { nodes, points }
+    },
+  }))
+}
+// source:normalized-polygon-mark:end
+
+function pointAtValue(
+  scene: ChartScene<ProofDatum, number, number>,
+  id: string,
+  axis: 'x' | 'y',
+  value: number,
+) {
+  const point = scene.points.find((candidate) => candidate.datum.id === id)
+  const coordinate = scene.scales[axis]?.map(value)
+  if (!point || !Number.isFinite(coordinate)) return null
+  return axis === 'x'
+    ? { x: coordinate!, y: point.y }
+    : { x: point.x, y: coordinate! }
+}
+
+function circleEdgeProbe(
+  scene: ChartScene<ProofDatum, number, number>,
+  id: string,
+  amount: number,
+) {
+  const point = scene.points.find((candidate) => candidate.datum.id === id)
+  if (point?.hitRegion?.kind !== 'circle') return null
+  return {
+    x: point.hitRegion.x + point.hitRegion.radius * amount,
+    y: point.hitRegion.y,
+  }
+}
+
+function rectProbe(
+  scene: ChartScene<ProofDatum, number, number>,
+  id: string,
+  xAmount: number,
+  yAmount: number,
+) {
+  const point = scene.points.find((candidate) => candidate.datum.id === id)
+  if (point?.hitRegion?.kind !== 'rect') return null
+  return {
+    x: point.hitRegion.x + point.hitRegion.width * xAmount,
+    y: point.hitRegion.y + point.hitRegion.height * yAmount,
+  }
+}
+
+function normalizedDatumProbe(id: string) {
+  return (scene: ChartScene<ProofDatum, number, number>) => {
+    const point = scene.points.find((candidate) => candidate.datum.id === id)
+    const probe = point?.datum.probe
+    if (!probe) return null
+    return {
+      x: scene.chart.x + probe[0] * scene.chart.width,
+      y: scene.chart.y + probe[1] * scene.chart.height,
+    }
+  }
+}
+
+function normalizedPolarDatumProbe(id: string) {
+  return (scene: ChartScene<ProofDatum, number, number>) => {
+    const point = scene.points.find((candidate) => candidate.datum.id === id)
+    const probe = point?.datum.probe
+    if (!probe) return null
+    const size = Math.min(scene.chart.width, scene.chart.height)
+    return {
+      x: scene.chart.x + (scene.chart.width - size) / 2 + probe[0] * size,
+      y: scene.chart.y + (scene.chart.height - size) / 2 + probe[1] * size,
+    }
+  }
+}
diff --git a/examples/sandbox/src/main.tsx b/examples/sandbox/src/main.tsx
index 4271663e..c7460c8d 100644
--- a/examples/sandbox/src/main.tsx
+++ b/examples/sandbox/src/main.tsx
@@ -1,5 +1,14 @@
 import { createRoot } from 'react-dom/client'
 import './styles.css'
 import { App } from './App'
+import { InteractionGeometryLab } from './InteractionGeometryLab'
 
-createRoot(document.getElementById('root')!).render(<App />)
+const lab = new URLSearchParams(window.location.search).get('lab')
+const showInteractionGeometryLab = lab === 'interaction-geometry'
+if (showInteractionGeometryLab) {
+  document.title = 'Charts interaction geometry lab'
+}
+
+createRoot(document.getElementById('root')!).render(
+  showInteractionGeometryLab ? <InteractionGeometryLab /> : <App />,
+)
diff --git a/examples/sandbox/src/styles.css b/examples/sandbox/src/styles.css
index 82bafecc..923b1bea 100644
--- a/examples/sandbox/src/styles.css
+++ b/examples/sandbox/src/styles.css
@@ -30,6 +30,359 @@
   --ts-chart-5: #45d49c;
 }
 
+.hit-region-proof {
+  min-height: 100vh;
+  padding: 44px clamp(20px, 4vw, 64px) 72px;
+  color-scheme: light;
+  background: #ffffff;
+  color: #171717;
+}
+
+.hit-region-proof__header {
+  width: min(760px, 100%);
+  margin: 0 auto 36px;
+}
+
+.hit-region-proof__header h1 {
+  margin: 0;
+  color: #171717;
+  font-size: clamp(30px, 4vw, 44px);
+  letter-spacing: -0.04em;
+}
+
+.hit-region-proof__header p {
+  max-width: 700px;
+  margin: 12px 0 0;
+  color: #525252;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.hit-region-proof__source {
+  width: 100%;
+  margin: 10px 0 0;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.hit-region-proof__source summary {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 11px 14px 11px 34px;
+  cursor: pointer;
+  list-style: none;
+  color: #262626;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+}
+
+.hit-region-proof__source summary::-webkit-details-marker {
+  display: none;
+}
+
+.hit-region-proof__source summary:focus-visible {
+  border-radius: 7px;
+  outline: 2px solid #171717;
+  outline-offset: -2px;
+}
+
+.hit-region-proof__source summary::before {
+  position: absolute;
+  top: 50%;
+  left: 15px;
+  color: #737373;
+  content: '›';
+  font-size: 17px;
+  line-height: 1;
+  transform: translateY(-50%);
+  transition: transform 140ms ease;
+}
+
+.hit-region-proof__source[open] > summary::before {
+  transform: translateY(-50%) rotate(90deg);
+}
+
+.hit-region-proof__source > summary > span:first-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+}
+
+.hit-region-proof__source > summary svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: #525252;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.5;
+}
+
+.hit-region-proof__source-meta {
+  overflow: hidden;
+  color: #737373;
+  font-size: 10px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hit-region-proof__source > pre {
+  overflow: auto;
+  width: 100%;
+  max-height: 320px;
+  margin: 0;
+  padding: 15px 17px;
+  border: 0;
+  border-top: 1px solid #e5e5e5;
+  border-radius: 0;
+  color: #262626;
+  background: #fafafa;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  line-height: 1.6;
+  tab-size: 2;
+}
+
+.hit-region-proof__source code {
+  font: inherit;
+}
+
+.hit-region-proof__gallery {
+  display: grid;
+  width: min(1220px, 100%);
+  margin: 0 auto;
+  gap: 34px;
+}
+
+.hit-region-proof__case {
+  padding-top: 34px;
+  border-top: 1px solid #e5e5e5;
+}
+
+.hit-region-proof__case:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.hit-region-proof__case-header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 7px;
+}
+
+.hit-region-proof__case-header h2 {
+  margin: 0;
+  color: #171717;
+  font-size: 21px;
+  letter-spacing: -0.03em;
+}
+
+.hit-region-proof__case-header code {
+  padding: 6px 9px;
+  border: 1px solid #d4d4d4;
+  border-radius: 6px;
+  color: #525252;
+  background: #fafafa;
+  font-size: 10px;
+}
+
+.hit-region-proof__case-description {
+  max-width: 780px;
+  margin: 0 0 12px;
+  color: #525252;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.hit-region-proof__grid {
+  display: grid;
+  width: 100%;
+  margin: 0;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.hit-region-proof__card {
+  min-width: 0;
+  padding: 15px;
+  border: 1px solid #d4d4d4;
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.hit-region-proof__card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.hit-region-proof__badge,
+.hit-region-proof__distance {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid #d4d4d4;
+  border-radius: 999px;
+  color: #525252;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hit-region-proof__badge {
+  height: 23px;
+  padding: 0 9px;
+}
+
+.hit-region-proof__card--before .hit-region-proof__badge {
+  color: #262626;
+  background: #ffffff;
+}
+
+.hit-region-proof__card--after .hit-region-proof__badge {
+  border-color: #171717;
+  color: #ffffff;
+  background: #171717;
+}
+
+.hit-region-proof__distance {
+  height: 28px;
+  padding: 0 10px;
+}
+
+.hit-region-proof__chart {
+  position: relative;
+  overflow: visible;
+  min-width: 0;
+}
+
+.hit-region-proof__chart > svg,
+.hit-region-proof__chart > div:first-child {
+  min-height: 230px;
+}
+
+.hit-region-proof__chart svg {
+  overflow: visible;
+}
+
+.hit-region-proof__probe {
+  position: absolute;
+  z-index: 3;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.hit-region-proof__probe span {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border: 2px solid #171717;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 72%);
+  box-shadow: 0 0 0 4px rgb(23 23 23 / 10%);
+  transform: translate(-50%, -50%);
+}
+
+.hit-region-proof__probe span::before,
+.hit-region-proof__probe span::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: #171717;
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+.hit-region-proof__probe span::before {
+  width: 34px;
+  height: 1px;
+}
+
+.hit-region-proof__probe span::after {
+  width: 1px;
+  height: 34px;
+}
+
+.hit-region-proof__result {
+  display: grid;
+  margin: 5px 0 0;
+  padding: 14px 16px;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  background: #fafafa;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.hit-region-proof__result div {
+  min-width: 0;
+}
+
+.hit-region-proof__result dt {
+  margin-bottom: 5px;
+  color: #737373;
+  font-size: 9px;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hit-region-proof__result dd {
+  overflow: hidden;
+  margin: 0;
+  color: #262626;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hit-region-proof__card--after [data-proof-result='after'] {
+  color: #171717;
+  font-weight: 700;
+}
+
+.hit-region-proof__card--before [data-proof-result='before'] {
+  color: #525252;
+}
+
+.hit-region-proof__tooltip {
+  border: 1px solid #d4d4d4 !important;
+  color: #171717 !important;
+  background: #ffffff !important;
+  box-shadow: none !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+
+@media (max-width: 900px) {
+  .hit-region-proof__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hit-region-proof__case-header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .hit-region-proof__source-meta {
+    max-width: 46vw;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/package.json b/package.json
index ce317adf..3b5fbe6e 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "dev:react": "pnpm --filter @plot-poc/react-example dev",
     "dev:octane": "pnpm --filter @plot-poc/octane-example dev",
     "dev:sandbox": "pnpm --filter @charts-poc/sandbox dev",
+    "dev:interaction-geometry": "pnpm --filter @charts-poc/sandbox dev:interaction-geometry",
     "demo-data:check": "node scripts/sync-demo-data.mjs --check",
     "demo-data:sync": "node scripts/sync-demo-data.mjs",
     "docs:check": "nx run charts-workspace:docs-check",
@@ -47,6 +48,7 @@
     "conformance:quick": "node scripts/compare-plot-catalog.mjs --profile=quick",
     "conformance:size": "node scripts/compare-plot-catalog.mjs --size-only",
     "performance": "node scripts/measure-rendering.mjs",
+    "performance:pointer": "node --expose-gc scripts/measure-pointer-resolution.mjs",
     "react-native:poc:bundle": "node scripts/measure-react-native-poc.mjs",
     "react-native:poc:types": "node scripts/check-react-native-types.mjs",
     "package:check": "nx run charts-workspace:package-check",
diff --git a/packages/charts-core/docs/guides/custom-marks-and-renderers.md b/packages/charts-core/docs/guides/custom-marks-and-renderers.md
index 0d200f5b..bf2adf40 100644
--- a/packages/charts-core/docs/guides/custom-marks-and-renderers.md
+++ b/packages/charts-core/docs/guides/custom-marks-and-renderers.md
@@ -111,6 +111,37 @@ Each point should retain:
 - resolved pixel coordinates;
 - group identity and color.
 
+For a large painted mark, set `hitRegion` on each emitted point and declare
+the mark's off-shape fallback once with `focusAffinity`:
+
+```ts
+return {
+  id,
+  focusAffinity: 'x',
+  channels,
+  render(context) {
+    return {
+      nodes,
+      points: nodes.map((node, index) => ({
+        ...interactionPoint(index),
+        hitRegion: {
+          kind: 'rect',
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+        },
+      })),
+    }
+  },
+}
+```
+
+Use `x` for vertically oriented marks, `y` for horizontal marks, `xy` for
+ordinary two-dimensional proximity, and `geometry` when only exact
+containment should focus the mark. The default resolver checks containment
+across every mark before applying any fallback.
+
 Omit points for decorative geometry. Do not invent fake interactive data for a
 frame, grid, or threshold that should not receive focus.
 
diff --git a/packages/charts-core/docs/reference/focus-and-interaction.md b/packages/charts-core/docs/reference/focus-and-interaction.md
index fac5fbcf..83669685 100644
--- a/packages/charts-core/docs/reference/focus-and-interaction.md
+++ b/packages/charts-core/docs/reference/focus-and-interaction.md
@@ -27,6 +27,36 @@ With no custom focus strategy:
 normal tab-order participation while keeping keyboard handling enabled. Set
 `keyboard: false` to remove keyboard navigation and force tab index `-1`.
 
+### Interaction geometry
+
+When neither `focus` nor `spatialIndex` is supplied, pointer resolution has two
+stages:
+
+1. The topmost scene point whose `hitRegion` contains the pointer wins. Point
+   order follows paint order.
+2. If no region contains the pointer, `focusAffinity` ranks the fallback.
+   `x` and `y` compare distance from that axis boundary first and use complete
+   geometry distance to break ties; `xy` compares complete geometry distance;
+   `geometry` has no off-shape fallback.
+
+`maxFocusDistance` applies to that primary boundary distance, not necessarily
+to the point used as the tooltip and keyboard anchor. Points without either
+field retain anchor-based two-dimensional distance.
+
+`ChartPoint.hitRegion` accepts painted rectangles, circles, and polygons.
+Built-in marks declare these natural defaults:
+
+| Mark                     | Hit region | Fallback |
+| ------------------------ | ---------- | -------- |
+| `barY`                   | Rectangle  | `x`      |
+| `barX`                   | Rectangle  | `y`      |
+| `lineY`, `areaY`         | None       | `x`      |
+| `rect`, `dot`, `hexagon` | Shape      | `xy`     |
+| `bandX`                  | Rectangle  | `x`      |
+| `bandY`                  | Rectangle  | `y`      |
+
+An explicit focus preset or custom strategy replaces this default resolver.
+
 ## Focus modes
 
 Use a preset for built-in focus behavior:
@@ -284,6 +314,11 @@ owns its search algorithm and must apply `maxDistance`.
 Use the granular spatial primitive appropriate to the data; the boundary is
 described in [Scales and D3](../concepts/scales-and-d3.md).
 
+Supplying an index also replaces default hit-region containment and affinity
+ranking; the host does not add a linear safety scan after an indexed query. An
+index that wants identical geometry semantics should index the region bounds
+and perform exact shape checks on its candidates.
+
 A custom `focus` strategy takes precedence over `spatialIndex` for pointer
 resolution.
 
diff --git a/packages/charts-core/docs/reference/runtime-and-scene.md b/packages/charts-core/docs/reference/runtime-and-scene.md
index 4ba0e901..20c2d51c 100644
--- a/packages/charts-core/docs/reference/runtime-and-scene.md
+++ b/packages/charts-core/docs/reference/runtime-and-scene.md
@@ -131,8 +131,9 @@ function findNearestPoint<
 ```
 
 Coordinates are in scene pixels. `maxDistance` defaults to `Infinity`.
-The function performs a linear scan of the scene's interaction points. For a
-large point set, supply a spatial index to the DOM or framework host; see
+The function performs a linear scan of the scene's interaction points, using
+hit-region containment and mark affinity before anchor distance. For a large
+point set, supply a spatial index to the DOM or framework host; see
 [Focus and interaction](./focus-and-interaction.md#spatial-indexes).
 
 ## `ChartScene`
diff --git a/packages/charts-core/docs/reference/types.md b/packages/charts-core/docs/reference/types.md
index a0ab5e43..7b5705e2 100644
--- a/packages/charts-core/docs/reference/types.md
+++ b/packages/charts-core/docs/reference/types.md
@@ -137,6 +137,10 @@ The complete overloads and runtime rules are in
 | `MarkScene`             | Mark-owned scene nodes and optional interaction points                        |
 | `ChartScene`            | Complete renderer-neutral output                                              |
 | `ChartPoint`            | Typed interaction target                                                      |
+| `ChartHitRegion`        | Rectangle, circle, or polygon interaction geometry union                      |
+| `ChartRectHitRegion`    | Painted rectangular interaction bounds                                        |
+| `ChartCircleHitRegion`  | Painted circular interaction bounds                                           |
+| `ChartPolygonHitRegion` | Painted polygon interaction vertices                                          |
 | `ChartTick`             | Semantic value, formatted label, and pixel position                           |
 | `ResolvedScale`         | Final positional scale                                                        |
 | `ResolvedColorScale`    | Final color scale                                                             |
@@ -227,6 +231,7 @@ See [DOM host](./dom-host.md) and
 | `ChartFocusSource`                    | Pointer, keyboard, programmatic, or restored source                    |
 | `ChartFocusFilter`                    | Focus-filtered mark matching configuration                             |
 | `ChartFocusMatch`                     | Primary, group, key, x, y, or series matching                          |
+| `ChartFocusAffinity`                  | Mark fallback axis after exact hit-region containment                  |
 | `ChartSpatialIndex`                   | Nearest-point query                                                    |
 | `ChartSpatialIndexFactory`            | Builds an index from current scene points                              |
 | `ChartExtensionInput`                 | Generic bare-token or `{ use, ...options }` extension input            |
diff --git a/packages/charts-core/src/area.ts b/packages/charts-core/src/area.ts
index 393ca9ec..1c82ac13 100644
--- a/packages/charts-core/src/area.ts
+++ b/packages/charts-core/src/area.ts
@@ -113,6 +113,7 @@ export function areaY<TDatum>(
 
     return {
       id,
+      focusAffinity: 'x',
       states: markStates(data, options.states),
       seriesFromColor: options.z === undefined && options.color !== undefined,
       channels: {
diff --git a/packages/charts-core/src/band.ts b/packages/charts-core/src/band.ts
index 3ac33bfd..16fdae71 100644
--- a/packages/charts-core/src/band.ts
+++ b/packages/charts-core/src/band.ts
@@ -77,6 +77,7 @@ export function bandX<
 
     return {
       id,
+      focusAffinity: 'x',
       channels: {
         x: { scale: 'x', values: values.filter(isChartValue) },
         color: { scale: 'color', values: colorValues.filter(isChartKey) },
@@ -101,12 +102,14 @@ export function bandX<
           )
           const group = zValues[index] ?? null
           const key = `${id}:${valueKey(group)}:${valueKey(keys[index])}`
+          const left = x - width / 2 + inset
+          const paintedWidth = Math.max(0, width - inset * 2)
           nodes.push({
             kind: 'rect',
             key,
-            x: x - width / 2 + inset,
+            x: left,
             y: chart.y,
-            width: Math.max(0, width - inset * 2),
+            width: paintedWidth,
             height: chart.height,
             radius: resolved.radius,
             style: { fill, fillOpacity: resolved.fillOpacity },
@@ -122,6 +125,13 @@ export function bandX<
             yValue: 0,
             x,
             y: chart.y + chart.height / 2,
+            hitRegion: {
+              kind: 'rect',
+              x: left,
+              y: chart.y,
+              width: paintedWidth,
+              height: chart.height,
+            },
             color: fill,
           })
         })
@@ -170,6 +180,7 @@ export function bandY<
 
     return {
       id,
+      focusAffinity: 'y',
       channels: {
         y: { scale: 'y', values: values.filter(isChartValue) },
         color: { scale: 'color', values: colorValues.filter(isChartKey) },
@@ -194,13 +205,15 @@ export function bandY<
           )
           const group = zValues[index] ?? null
           const key = `${id}:${valueKey(group)}:${valueKey(keys[index])}`
+          const top = y - height / 2 + inset
+          const paintedHeight = Math.max(0, height - inset * 2)
           nodes.push({
             kind: 'rect',
             key,
             x: chart.x,
-            y: y - height / 2 + inset,
+            y: top,
             width: chart.width,
-            height: Math.max(0, height - inset * 2),
+            height: paintedHeight,
             radius: resolved.radius,
             style: { fill, fillOpacity: resolved.fillOpacity },
           })
@@ -215,6 +228,13 @@ export function bandY<
             yValue,
             x: chart.x + chart.width / 2,
             y,
+            hitRegion: {
+              kind: 'rect',
+              x: chart.x,
+              y: top,
+              width: chart.width,
+              height: paintedHeight,
+            },
             color: fill,
           })
         })
diff --git a/packages/charts-core/src/bar.ts b/packages/charts-core/src/bar.ts
index 7c94fd04..71bafb13 100644
--- a/packages/charts-core/src/bar.ts
+++ b/packages/charts-core/src/bar.ts
@@ -133,6 +133,7 @@ export function barY<TDatum>(
 
     return {
       id,
+      focusAffinity: 'x',
       states: markStates(data, options.states),
       seriesFromColor:
         options.z === undefined &&
@@ -194,14 +195,16 @@ export function barY<TDatum>(
           const valuePosition = scales.y.map(y2Value)
           const x = center - totalBandwidth / 2 + groupOffset + inset
           const y = Math.min(baselinePosition, valuePosition)
+          const width = Math.max(0, groupBandwidth - inset * 2)
+          const height = Math.abs(baselinePosition - valuePosition)
           const key = `${id}:${valueKey(group)}:${valueKey(keys[datumIndex])}`
           nodes.push({
             kind: 'rect',
             key,
             x,
             y,
-            width: Math.max(0, groupBandwidth - inset * 2),
-            height: Math.abs(baselinePosition - valuePosition),
+            width,
+            height,
             radius: options.radius,
             inset,
             style: {
@@ -223,6 +226,7 @@ export function barY<TDatum>(
             yInterval: 'difference',
             x: center - totalBandwidth / 2 + groupOffset + groupBandwidth / 2,
             y: valuePosition,
+            hitRegion: { kind: 'rect', x, y, width, height },
             color: fill,
           })
         })
@@ -311,6 +315,7 @@ export function barX<TDatum>(
 
     return {
       id,
+      focusAffinity: 'y',
       states: markStates(data, options.states),
       seriesFromColor:
         options.z === undefined &&
@@ -371,14 +376,17 @@ export function barX<TDatum>(
           const valuePosition = scales.x.map(x2Value)
           const center = scales.y.map(yValue)
           const y = center - totalBandwidth / 2 + groupOffset + inset
+          const x = Math.min(baselinePosition, valuePosition)
+          const width = Math.abs(baselinePosition - valuePosition)
+          const height = Math.max(0, groupBandwidth - inset * 2)
           const key = `${id}:${valueKey(group)}:${valueKey(keys[datumIndex])}`
           nodes.push({
             kind: 'rect',
             key,
-            x: Math.min(baselinePosition, valuePosition),
+            x,
             y,
-            width: Math.abs(baselinePosition - valuePosition),
-            height: Math.max(0, groupBandwidth - inset * 2),
+            width,
+            height,
             radius: options.radius,
             inset,
             style: {
@@ -400,6 +408,7 @@ export function barX<TDatum>(
             xInterval: 'difference',
             x: valuePosition,
             y: center - totalBandwidth / 2 + groupOffset + groupBandwidth / 2,
+            hitRegion: { kind: 'rect', x, y, width, height },
             color: fill,
           })
         })
diff --git a/packages/charts-core/src/dot.ts b/packages/charts-core/src/dot.ts
index 9b2e645b..f439578e 100644
--- a/packages/charts-core/src/dot.ts
+++ b/packages/charts-core/src/dot.ts
@@ -90,6 +90,7 @@ export function dot<TDatum>(
 
     return {
       id,
+      focusAffinity: 'xy',
       states: markStates(data, options.states),
       channels: {
         x: { scale: 'x', values: xValues.filter(isChartValue) },
@@ -145,6 +146,7 @@ export function dot<TDatum>(
             yValue,
             x,
             y,
+            hitRegion: { kind: 'circle', x, y, radius },
             color,
           })
         })
diff --git a/packages/charts-core/src/facet.ts b/packages/charts-core/src/facet.ts
index 9c3544ff..4cf8bdac 100644
--- a/packages/charts-core/src/facet.ts
+++ b/packages/charts-core/src/facet.ts
@@ -753,9 +753,29 @@ function offsetPoints<TDatum>(
     key: `${id}:${identity}:${point.key}`,
     x: point.x + x,
     y: point.y + y,
+    ...(point.hitRegion
+      ? { hitRegion: offsetHitRegion(point.hitRegion, x, y) }
+      : {}),
   }))
 }
 
+function offsetHitRegion(
+  region: NonNullable<ChartPoint['hitRegion']>,
+  x: number,
+  y: number,
+): NonNullable<ChartPoint['hitRegion']> {
+  switch (region.kind) {
+    case 'rect':
+    case 'circle':
+      return { ...region, x: region.x + x, y: region.y + y }
+    case 'polygon':
+      return {
+        ...region,
+        points: region.points.map((point) => [point[0] + x, point[1] + y]),
+      }
+  }
+}
+
 function maxSceneMargins(scenes: readonly ChartScene[]): ChartMargin {
   return maxMargins(scenes.map((scene) => scene.margin))
 }
diff --git a/packages/charts-core/src/hexagon.ts b/packages/charts-core/src/hexagon.ts
index 86933e17..32b795a5 100644
--- a/packages/charts-core/src/hexagon.ts
+++ b/packages/charts-core/src/hexagon.ts
@@ -84,6 +84,7 @@ export function hexagon<TDatum>(
 
     return {
       id,
+      focusAffinity: 'xy',
       channels: {
         x: { scale: 'x', values: xValues.filter(isChartValue) },
         y: { scale: 'y', values: yValues.filter(isChartValue) },
@@ -151,6 +152,7 @@ export function hexagon<TDatum>(
             yValue,
             x,
             y,
+            hitRegion: { kind: 'polygon', points: vertices },
             color: fill,
           })
         })
diff --git a/packages/charts-core/src/index.ts b/packages/charts-core/src/index.ts
index d819d0f6..63e51af6 100644
--- a/packages/charts-core/src/index.ts
+++ b/packages/charts-core/src/index.ts
@@ -186,15 +186,18 @@ export type {
   ChartCurve,
   ChartDefinition,
   ChartDefinitionOptions,
+  ChartCircleHitRegion,
   ChartExtensionInput,
   ChartFocusMode,
   ChartFocusFilter,
+  ChartFocusAffinity,
   ChartFocusMatch,
   ChartFocusPreset,
   ChartFocusSource,
   ChartFocusState,
   ChartFocusStrategy,
   ChartGradientStop,
+  ChartHitRegion,
   ChartKey,
   ChartLayoutOptions,
   ChartMargin,
@@ -217,6 +220,8 @@ export type {
   ChartMarkX,
   ChartMarkY,
   ChartPoint,
+  ChartPolygonHitRegion,
+  ChartRectHitRegion,
   ChartRuntime,
   ChartScene,
   ChartScale,
diff --git a/packages/charts-core/src/line.ts b/packages/charts-core/src/line.ts
index d9520096..32f72dc5 100644
--- a/packages/charts-core/src/line.ts
+++ b/packages/charts-core/src/line.ts
@@ -96,6 +96,7 @@ export function lineY<TDatum>(
 
     return {
       id,
+      focusAffinity: 'x',
       states: markStates(data, options.states),
       seriesFromColor: options.z === undefined && options.color !== undefined,
       channels: {
diff --git a/packages/charts-core/src/nearest.test.ts b/packages/charts-core/src/nearest.test.ts
new file mode 100644
index 00000000..762b628b
--- /dev/null
+++ b/packages/charts-core/src/nearest.test.ts
@@ -0,0 +1,293 @@
+import { scaleBand, scaleLinear } from 'd3-scale'
+import { describe, expect, it } from 'vitest'
+import { barX, barY } from './bar'
+import { nearestPoint } from './nearest'
+import { createChartScene, defineChart } from './scene'
+import type {
+  ChartPoint,
+  ChartFocusAffinity,
+  ChartValue,
+  SceneNode,
+  StaticChartDefinition,
+} from './types'
+
+describe('nearest point hit regions', () => {
+  it('selects a containing rectangle before a closer interaction anchor', () => {
+    const tallBar = point('tall', 100, 20, {
+      kind: 'rect',
+      x: 90,
+      y: 20,
+      width: 20,
+      height: 180,
+    })
+    const neighboringPoint = point('neighbor', 140, 170)
+
+    expect(nearestPoint([tallBar, neighboringPoint], 100, 170, 48)?.key).toBe(
+      'tall',
+    )
+  })
+
+  it('applies maximum distance from the rectangle boundary', () => {
+    const bar = point('bar', 100, 20, {
+      kind: 'rect',
+      x: 90,
+      y: 20,
+      width: 20,
+      height: 180,
+    })
+
+    expect(nearestPoint([bar], 119, 100, 10)?.key).toBe('bar')
+    expect(nearestPoint([bar], 121, 100, 10)).toBeNull()
+  })
+
+  it('uses exact containment before a competing axis fallback', () => {
+    const containing = point('containing', 100, 20, {
+      kind: 'rect',
+      x: 90,
+      y: 20,
+      width: 20,
+      height: 180,
+    })
+    const sameX = point('same-x', 100, 170, undefined, 'x')
+
+    expect(nearestPoint([containing, sameX], 100, 170, 48)?.key).toBe(
+      'containing',
+    )
+  })
+
+  it('uses paint order when hit regions overlap', () => {
+    const lower = point('lower', 100, 100, {
+      kind: 'rect',
+      x: 80,
+      y: 80,
+      width: 100,
+      height: 100,
+    })
+    const upper = point('upper', 170, 170, {
+      kind: 'rect',
+      x: 80,
+      y: 80,
+      width: 100,
+      height: 100,
+    })
+
+    expect(nearestPoint([lower, upper], 100, 100, 48)?.key).toBe('upper')
+  })
+
+  it('falls back along the mark affinity after missing every region', () => {
+    const xAligned = point('x-aligned', 100, 20, undefined, 'x')
+    const yAligned = point('y-aligned', 250, 170, undefined, 'y')
+
+    expect(nearestPoint([xAligned], 109, 190, 10)?.key).toBe('x-aligned')
+    expect(nearestPoint([xAligned], 111, 20, 10)).toBeNull()
+    expect(nearestPoint([yAligned], 20, 179, 10)?.key).toBe('y-aligned')
+    expect(nearestPoint([yAligned], 250, 181, 10)).toBeNull()
+  })
+
+  it('uses geometry to break x-affinity ties between stacked segments', () => {
+    const bottom = point(
+      'bottom',
+      100,
+      100,
+      { kind: 'rect', x: 90, y: 100, width: 20, height: 100 },
+      'x',
+    )
+    const middle = point(
+      'middle',
+      100,
+      60,
+      { kind: 'rect', x: 90, y: 60, width: 20, height: 40 },
+      'x',
+    )
+    const top = point(
+      'top',
+      100,
+      20,
+      { kind: 'rect', x: 90, y: 20, width: 20, height: 40 },
+      'x',
+    )
+
+    expect(nearestPoint([bottom, middle, top], 100, 10, 48)?.key).toBe('top')
+    expect(nearestPoint([bottom, middle, top], 100, 210, 48)?.key).toBe(
+      'bottom',
+    )
+  })
+
+  it('uses geometry to break y-affinity ties between stacked segments', () => {
+    const left = point(
+      'left',
+      20,
+      100,
+      { kind: 'rect', x: 20, y: 90, width: 40, height: 20 },
+      'y',
+    )
+    const middle = point(
+      'middle',
+      60,
+      100,
+      { kind: 'rect', x: 60, y: 90, width: 40, height: 20 },
+      'y',
+    )
+    const right = point(
+      'right',
+      100,
+      100,
+      { kind: 'rect', x: 100, y: 90, width: 100, height: 20 },
+      'y',
+    )
+
+    expect(nearestPoint([left, middle, right], 10, 100, 48)?.key).toBe('left')
+    expect(nearestPoint([left, middle, right], 210, 100, 48)?.key).toBe('right')
+  })
+
+  it('requires containment for geometry-only marks', () => {
+    const region = point(
+      'region',
+      100,
+      100,
+      {
+        kind: 'polygon',
+        points: [
+          [80, 80],
+          [120, 80],
+          [100, 130],
+        ],
+      },
+      'geometry',
+    )
+
+    expect(nearestPoint([region], 100, 100, 48)?.key).toBe('region')
+    expect(nearestPoint([region], 125, 100, 48)).toBeNull()
+  })
+
+  it('supports circular painted geometry', () => {
+    const bubble = point('bubble', 100, 100, {
+      kind: 'circle',
+      x: 100,
+      y: 100,
+      radius: 40,
+    })
+    const neighbor = point('neighbor', 137, 100)
+
+    expect(nearestPoint([bubble, neighbor], 135, 100, 48)?.key).toBe('bubble')
+  })
+
+  it('preserves point-distance behavior without a hit region', () => {
+    const anchor = point('anchor', 100, 20)
+
+    expect(nearestPoint([anchor], 100, 29, 10)?.key).toBe('anchor')
+    expect(nearestPoint([anchor], 100, 31, 10)).toBeNull()
+  })
+
+  it('preserves the first point when anchor distances tie', () => {
+    const first = point('first', 90, 100)
+    const second = point('second', 110, 100)
+
+    expect(nearestPoint([first, second], 100, 100, 10)?.key).toBe('first')
+  })
+
+  it('supports reversed rectangle bounds', () => {
+    const bar = point('bar', 100, 20, {
+      kind: 'rect',
+      x: 110,
+      y: 200,
+      width: -20,
+      height: -180,
+    })
+
+    expect(nearestPoint([bar], 119, 100, 10)?.key).toBe('bar')
+    expect(nearestPoint([bar], 121, 100, 10)).toBeNull()
+  })
+
+  it('uses the painted vertical bar rectangle as its hit region', () => {
+    expectBarUsesPaintedRect(
+      defineChart({
+        marks: [
+          barY([{ category: 'A', value: 80 }], {
+            x: 'category',
+            y: 'value',
+          }),
+        ],
+        x: { scale: scaleBand<string>().domain(['A']) },
+        y: { scale: scaleLinear().domain([0, 100]) },
+        guides: false,
+        margin: 0,
+      }),
+      'x',
+    )
+  })
+
+  it('uses the painted horizontal bar rectangle as its hit region', () => {
+    expectBarUsesPaintedRect(
+      defineChart({
+        marks: [
+          barX([{ category: 'A', value: 80 }], {
+            x: 'value',
+            y: 'category',
+          }),
+        ],
+        x: { scale: scaleLinear().domain([0, 100]) },
+        y: { scale: scaleBand<string>().domain(['A']) },
+        guides: false,
+        margin: 0,
+      }),
+      'y',
+    )
+  })
+})
+
+function point(
+  key: string,
+  x: number,
+  y: number,
+  hitRegion?: ChartPoint['hitRegion'],
+  focusAffinity?: ChartFocusAffinity,
+): ChartPoint {
+  return {
+    key,
+    markId: 'test',
+    group: null,
+    groupLabel: 'test',
+    datum: key,
+    datumIndex: 0,
+    xValue: x,
+    yValue: y,
+    x,
+    y,
+    hitRegion,
+    focusAffinity,
+    color: 'currentColor',
+  }
+}
+
+function flatten(nodes: readonly SceneNode[]): SceneNode[] {
+  return nodes.flatMap((node) =>
+    node.kind === 'group' ? [node, ...flatten(node.children)] : [node],
+  )
+}
+
+function expectBarUsesPaintedRect<
+  TDatum,
+  TXValue extends ChartValue,
+  TYValue extends ChartValue,
+>(
+  definition: StaticChartDefinition<TDatum, TXValue, TYValue>,
+  expectedAffinity: ChartFocusAffinity,
+) {
+  const scene = createChartScene(definition, { width: 300, height: 200 })
+  const point = scene.points[0]!
+  const rect = flatten(scene.nodes).find(
+    (node) => node.kind === 'rect' && node.key === point.key,
+  )
+
+  expect(rect?.kind).toBe('rect')
+  if (rect?.kind !== 'rect') throw new Error('Expected bar rectangle')
+  expect(point.hitRegion).toEqual({
+    kind: 'rect',
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height,
+  })
+  expect(point.focusAffinity).toBe(expectedAffinity)
+}
diff --git a/packages/charts-core/src/nearest.ts b/packages/charts-core/src/nearest.ts
index c5ef91e6..258425a6 100644
--- a/packages/charts-core/src/nearest.ts
+++ b/packages/charts-core/src/nearest.ts
@@ -1,4 +1,4 @@
-import type { ChartPoint, ChartValue } from './types'
+import type { ChartHitRegion, ChartPoint, ChartValue } from './types'
 
 export function nearestPoint<
   TDatum,
@@ -11,16 +11,193 @@ export function nearestPoint<
   maxDistance: number,
 ): ChartPoint<TDatum, TXValue, TYValue> | null {
   let result: ChartPoint<TDatum, TXValue, TYValue> | undefined
-  let resultDistance = Infinity
+  let resultPrimaryDistance = Infinity
+  let anchorOnly = true
+
+  // Resolve exact painted containment before considering any nearby fallback.
+  for (let index = points.length; index--;) {
+    const point = points[index]!
+    const region = point.hitRegion
+    if (region) {
+      anchorOnly = false
+      if (contains(region, x, y)) {
+        // Scene points follow paint order, so reverse traversal finds topmost first.
+        return point
+      }
+    } else if (point.focusAffinity && point.focusAffinity !== 'xy') {
+      anchorOnly = false
+    } else {
+      const dx = point.x - x
+      const dy = point.y - y
+      const distance = dx * dx + dy * dy
+      // Reverse traversal uses <= so legacy ties still resolve to the first point.
+      if (distance <= resultPrimaryDistance) {
+        result = point
+        resultPrimaryDistance = distance
+      }
+    }
+  }
+  if (anchorOnly) {
+    return result && resultPrimaryDistance <= Math.max(0, maxDistance) ** 2
+      ? result
+      : null
+  }
+
+  result = undefined
+  resultPrimaryDistance = Infinity
+  let resultGeometryDistance = Infinity
   for (const point of points) {
-    const dx = point.x - x
-    const dy = point.y - y
-    const distance = dx * dx + dy * dy
-    if (distance < resultDistance) {
+    const affinity = point.focusAffinity ?? 'xy'
+    if (affinity === 'geometry') continue
+
+    const region = point.hitRegion
+    let primaryDistance: number
+    let geometryDistance: number
+    if (!region) {
+      const dx = point.x - x
+      const dy = point.y - y
+      geometryDistance = dx * dx + dy * dy
+      primaryDistance =
+        affinity === 'x'
+          ? dx * dx
+          : affinity === 'y'
+            ? dy * dy
+            : geometryDistance
+    } else {
+      primaryDistance =
+        affinity === 'x'
+          ? squaredAxisDistance(region, x, 0)
+          : affinity === 'y'
+            ? squaredAxisDistance(region, y, 1)
+            : 0
+      if (affinity !== 'xy' && primaryDistance > resultPrimaryDistance) {
+        continue
+      }
+      geometryDistance = squaredDistanceToBoundary(region, x, y)
+      if (affinity === 'xy') primaryDistance = geometryDistance
+    }
+    if (
+      primaryDistance < resultPrimaryDistance ||
+      (primaryDistance === resultPrimaryDistance &&
+        geometryDistance < resultGeometryDistance)
+    ) {
       result = point
-      resultDistance = distance
+      resultPrimaryDistance = primaryDistance
+      resultGeometryDistance = geometryDistance
     }
   }
-  if (!result) return null
-  return resultDistance <= Math.max(0, maxDistance) ** 2 ? result : null
+
+  return result && resultPrimaryDistance <= Math.max(0, maxDistance) ** 2
+    ? result
+    : null
+}
+
+function contains(region: ChartHitRegion, x: number, y: number) {
+  if (region.kind === 'rect') {
+    const left = Math.min(region.x, region.x + region.width)
+    const right = Math.max(region.x, region.x + region.width)
+    const top = Math.min(region.y, region.y + region.height)
+    const bottom = Math.max(region.y, region.y + region.height)
+    return x >= left && x <= right && y >= top && y <= bottom
+  }
+  if (region.kind === 'circle') {
+    const dx = x - region.x
+    const dy = y - region.y
+    const radius = Math.max(0, region.radius)
+    return dx * dx + dy * dy <= radius * radius
+  }
+
+  const points = region.points
+  let inside = false
+  for (
+    let index = 0, previous = points.length - 1;
+    index < points.length;
+    previous = index++
+  ) {
+    const current = points[index]!
+    const prior = points[previous]!
+    if (
+      current[1] > y !== prior[1] > y &&
+      x <
+        ((prior[0] - current[0]) * (y - current[1])) / (prior[1] - current[1]) +
+          current[0]
+    ) {
+      inside = !inside
+    }
+  }
+  return inside
+}
+
+function squaredAxisDistance(
+  region: ChartHitRegion,
+  value: number,
+  coordinate: 0 | 1,
+) {
+  let minimum: number
+  let maximum: number
+  if (region.kind === 'circle') {
+    const center = coordinate === 0 ? region.x : region.y
+    const radius = Math.max(0, region.radius)
+    minimum = center - radius
+    maximum = center + radius
+  } else if (region.kind === 'rect') {
+    const start = coordinate === 0 ? region.x : region.y
+    const size = coordinate === 0 ? region.width : region.height
+    minimum = Math.min(start, start + size)
+    maximum = Math.max(start, start + size)
+  } else {
+    minimum = Infinity
+    maximum = -Infinity
+    for (const vertex of region.points) {
+      minimum = Math.min(minimum, vertex[coordinate])
+      maximum = Math.max(maximum, vertex[coordinate])
+    }
+  }
+  const distance =
+    value < minimum ? minimum - value : value > maximum ? value - maximum : 0
+  return distance * distance
+}
+
+function squaredDistanceToBoundary(
+  region: ChartHitRegion,
+  x: number,
+  y: number,
+) {
+  if (region.kind === 'rect') {
+    const left = Math.min(region.x, region.x + region.width)
+    const right = Math.max(region.x, region.x + region.width)
+    const top = Math.min(region.y, region.y + region.height)
+    const bottom = Math.max(region.y, region.y + region.height)
+    const dx = x < left ? left - x : x > right ? x - right : 0
+    const dy = y < top ? top - y : y > bottom ? y - bottom : 0
+    return dx * dx + dy * dy
+  }
+  if (region.kind === 'circle') {
+    const dx = x - region.x
+    const dy = y - region.y
+    const distance = Math.max(
+      0,
+      Math.sqrt(dx * dx + dy * dy) - Math.max(0, region.radius),
+    )
+    return distance * distance
+  }
+
+  let distance = Infinity
+  for (let index = 0; index < region.points.length; index += 1) {
+    const start = region.points[index]!
+    const end = region.points[(index + 1) % region.points.length]!
+    const dx = end[0] - start[0]
+    const dy = end[1] - start[1]
+    const length = dx * dx + dy * dy
+    const amount = length
+      ? Math.max(
+          0,
+          Math.min(1, ((x - start[0]) * dx + (y - start[1]) * dy) / length),
+        )
+      : 0
+    const offsetX = x - (start[0] + amount * dx)
+    const offsetY = y - (start[1] + amount * dy)
+    distance = Math.min(distance, offsetX * offsetX + offsetY * offsetY)
+  }
+  return distance
 }
diff --git a/packages/charts-core/src/rect.ts b/packages/charts-core/src/rect.ts
index db484454..92ebc732 100644
--- a/packages/charts-core/src/rect.ts
+++ b/packages/charts-core/src/rect.ts
@@ -137,6 +137,7 @@ export function rect<TDatum>(
 
     return {
       id,
+      focusAffinity: 'xy',
       states: markStates(data, options.states),
       channels: {
         x: {
@@ -192,13 +193,17 @@ export function rect<TDatum>(
           const color =
             options.fill ?? resolveColor(colorValues[datumIndex] ?? null)
           const key = `${id}:${valueKey(group)}:${valueKey(keys[datumIndex])}`
+          const paintedX = left + inset
+          const paintedY = top + inset
+          const paintedWidth = Math.max(0, width - inset * 2)
+          const paintedHeight = Math.max(0, height - inset * 2)
           nodes.push({
             kind: 'rect',
             key,
-            x: left + inset,
-            y: top + inset,
-            width: Math.max(0, width - inset * 2),
-            height: Math.max(0, height - inset * 2),
+            x: paintedX,
+            y: paintedY,
+            width: paintedWidth,
+            height: paintedHeight,
             radius: options.radius,
             inset,
             style: {
@@ -228,6 +233,13 @@ export function rect<TDatum>(
             yInterval: 'range',
             x: left + width / 2,
             y: top + height / 2,
+            hitRegion: {
+              kind: 'rect',
+              x: paintedX,
+              y: paintedY,
+              width: paintedWidth,
+              height: paintedHeight,
+            },
             color,
           })
         })
diff --git a/packages/charts-core/src/renderer.test.ts b/packages/charts-core/src/renderer.test.ts
index 20d8d4bb..63cc0bd4 100644
--- a/packages/charts-core/src/renderer.test.ts
+++ b/packages/charts-core/src/renderer.test.ts
@@ -10,7 +10,7 @@ import type {
   ChartSurface,
   ChartSurfaceRenderOptions,
 } from './dom-types'
-import type { ChartScene, ChartTooltipAnchorContext } from './types'
+import type { ChartPoint, ChartScene, ChartTooltipAnchorContext } from './types'
 
 interface Datum {
   id: string
@@ -139,6 +139,40 @@ describe('renderer-neutral chart host', () => {
     expect(container.childElementCount).toBe(0)
   })
 
+  it('lets a spatial index fully own pointer resolution', () => {
+    const fake = createFakeRenderer()
+    const container = document.createElement('div')
+    const onFocusChange = vi.fn()
+    const findNearest = vi.fn()
+    const spatialIndex = vi.fn(
+      (points: readonly ChartPoint<Datum, number, number>[]) => {
+        findNearest.mockReturnValue(points[1] ?? null)
+        return { findNearest }
+      },
+    )
+    const host = mountChartRenderer(container, {
+      definition: defineChart(definition, { spatialIndex }),
+      renderer: fake.renderer,
+      width: 480,
+      height: 260,
+      ariaLabel: 'Indexed chart',
+      onFocusChange,
+    })
+
+    fake.element.dispatchEvent(
+      new MouseEvent('pointermove', {
+        bubbles: true,
+        clientX: 0,
+        clientY: 0,
+      }),
+    )
+
+    const firstPoint = host.getScene().points[0]!
+    expect(findNearest).toHaveBeenCalledWith(firstPoint.x, firstPoint.y, 48)
+    expect(onFocusChange).toHaveBeenLastCalledWith(host.getScene().points[1])
+    host.destroy()
+  })
+
   it('anchors to the pointer, follows placement fallbacks, and clears pointer state for keyboard focus', () => {
     const fake = createFakeRenderer()
     fake.clientToScene.mockReturnValue({ x: 20, y: 20 })
diff --git a/packages/charts-core/src/scene.ts b/packages/charts-core/src/scene.ts
index fde6f894..288c80f4 100644
--- a/packages/charts-core/src/scene.ts
+++ b/packages/charts-core/src/scene.ts
@@ -236,6 +236,11 @@ function createChartSceneWithScaleResolver<
         children: rendered.nodes,
       })
     } else {
+      const markPoints = (rendered.points ?? []).map((point) =>
+        point.focusAffinity || !mark.focusAffinity
+          ? point
+          : { ...point, focusAffinity: mark.focusAffinity },
+      ) as readonly ChartPoint<TDatum, TXValue, TYValue>[]
       if (mark.states) {
         markNodes.push({
           kind: 'group',
@@ -244,19 +249,13 @@ function createChartSceneWithScaleResolver<
           states: {
             data: mark.states.data,
             definitions: mark.states.definitions,
-            points: rendered.points ?? [],
+            points: markPoints,
           },
         })
       } else {
         for (const node of rendered.nodes) markNodes.push(node)
       }
-      for (const point of (rendered.points ?? []) as readonly ChartPoint<
-        TDatum,
-        TXValue,
-        TYValue
-      >[]) {
-        points.push(point)
-      }
+      for (const point of markPoints) points.push(point)
     }
   })
   const nodes: SceneNode[] = [
diff --git a/packages/charts-core/src/types.ts b/packages/charts-core/src/types.ts
index b035d581..79b536bf 100644
--- a/packages/charts-core/src/types.ts
+++ b/packages/charts-core/src/types.ts
@@ -683,6 +683,8 @@ export interface InitializedMark<
   channels: Readonly<Record<string, MaterializedChannel>>
   /** The mark uses a discrete color channel as inferred series identity. */
   seriesFromColor?: boolean
+  /** Natural pointer fallback after exact hit-region containment. */
+  focusAffinity?: ChartFocusAffinity
   focus?: ChartFocusFilter
   states?: {
     data: readonly unknown[]
@@ -701,6 +703,27 @@ export interface MarkScene<
   points?: readonly ChartPoint<TDatum, TXValue, TYValue>[]
 }
 
+export interface ChartRectHitRegion extends ChartBounds {
+  kind: 'rect'
+}
+
+export interface ChartCircleHitRegion {
+  kind: 'circle'
+  x: number
+  y: number
+  radius: number
+}
+
+export interface ChartPolygonHitRegion {
+  kind: 'polygon'
+  points: readonly (readonly [number, number])[]
+}
+
+export type ChartHitRegion =
+  ChartRectHitRegion | ChartCircleHitRegion | ChartPolygonHitRegion
+
+export type ChartFocusAffinity = 'x' | 'y' | 'xy' | 'geometry'
+
 export interface ChartPoint<
   TDatum = unknown,
   TXValue extends ChartValue = ChartValue,
@@ -722,6 +745,10 @@ export interface ChartPoint<
   yInterval?: 'range' | 'difference'
   x: number
   y: number
+  /** Optional painted geometry used by the default pointer-distance resolver. */
+  hitRegion?: ChartHitRegion
+  /** Resolved mark-level pointer fallback after exact geometry containment. */
+  focusAffinity?: ChartFocusAffinity
   color: string
 }
 
diff --git a/packages/charts-core/src/universal-types.ts b/packages/charts-core/src/universal-types.ts
index 3ae69950..434e6b22 100644
--- a/packages/charts-core/src/universal-types.ts
+++ b/packages/charts-core/src/universal-types.ts
@@ -108,7 +108,9 @@ export type {
   ChartCurve,
   ChartDefinition,
   ChartDefinitionOptions,
+  ChartCircleHitRegion,
   ChartFocusFilter,
+  ChartFocusAffinity,
   ChartFocusMatch,
   ChartExtensionInput,
   ChartFocusMode,
@@ -117,6 +119,7 @@ export type {
   ChartFocusState,
   ChartFocusStrategy,
   ChartGradientStop,
+  ChartHitRegion,
   ChartKey,
   ChartLayoutOptions,
   ChartMargin,
@@ -139,6 +142,8 @@ export type {
   ChartMarkX,
   ChartMarkY,
   ChartPoint,
+  ChartPolygonHitRegion,
+  ChartRectHitRegion,
   ChartRuntime,
   ChartScene,
   ChartScale,
diff --git a/scripts/measure-bundles.mjs b/scripts/measure-bundles.mjs
index 7f20ed4d..90dc082c 100644
--- a/scripts/measure-bundles.mjs
+++ b/scripts/measure-bundles.mjs
@@ -744,6 +744,15 @@ const entries = [
     'benchmarks/entries/d3-delaunay-kernel.ts',
     7.3,
   ),
+  measured(
+    'Anchor-only pointer resolver baseline',
+    'benchmarks/entries/charts-pointer-anchor-kernel.ts',
+  ),
+  budgeted(
+    'Geometry pointer resolver kernel',
+    'benchmarks/entries/charts-pointer-geometry-kernel.ts',
+    1,
+  ),
   budgeted(
     'D3 brush controller kernel',
     'benchmarks/entries/d3-brush-kernel.ts',
diff --git a/scripts/measure-pointer-resolution.mjs b/scripts/measure-pointer-resolution.mjs
new file mode 100644
index 00000000..0966ad79
--- /dev/null
+++ b/scripts/measure-pointer-resolution.mjs
@@ -0,0 +1,22 @@
+import { mkdir } from 'node:fs/promises'
+import { pathToFileURL } from 'node:url'
+import { resolve } from 'node:path'
+import { build } from 'esbuild'
+
+const root = resolve(import.meta.dirname, '..')
+const outputDirectory = resolve(root, '.bundle-output')
+const outfile = resolve(outputDirectory, 'pointer-resolution.mjs')
+
+await mkdir(outputDirectory, { recursive: true })
+await build({
+  entryPoints: [resolve(root, 'benchmarks/interaction/nearest.ts')],
+  outfile,
+  bundle: true,
+  platform: 'node',
+  format: 'esm',
+  target: 'node22',
+  legalComments: 'none',
+  logLevel: 'silent',
+})
+
+await import(`${pathToFileURL(outfile).href}?time=${Date.now()}`)

From 3bedab8d214ea99cc00c15452b3b6b85dcfd4814 Mon Sep 17 00:00:00 2001
From: Kyle Gill <kylerobertgill@gmail.com>
Date: Fri, 31 Jul 2026 23:48:25 -0600
Subject: [PATCH 2/5] Add interaction geometry stress cases

---
 API-FRICTION.md                               |   5 +-
 examples/sandbox/README.md                    |   3 +-
 .../src/InteractionGeometryLab.test.ts        |  36 ++++-
 .../sandbox/src/InteractionGeometryLab.tsx    | 148 +++++++++++++++++-
 examples/sandbox/src/styles.css               |   9 ++
 5 files changed, 192 insertions(+), 9 deletions(-)

diff --git a/API-FRICTION.md b/API-FRICTION.md
index 8d09d76f..3de40e19 100644
--- a/API-FRICTION.md
+++ b/API-FRICTION.md
@@ -4284,10 +4284,11 @@ Each entry records:
 - Verification: focused tests cover containment priority, x/y/xy/geometry
   fallback, rectangle/circle/polygon shapes, built-in bar affinity, reversed
   rectangles, paint-order overlap, stack-edge selection, spatial-index
-  ownership, and legacy tie order. The twelve-case sandbox compares before and
+  ownership, and legacy tie order. The fourteen-case sandbox compares before and
   after behavior for stacked and horizontal bars, line/area, bubbles, cells,
   financial intervals, timelines, pie and annular sectors, radar, maps, and
-  Sankey geometry. The full unit matrix passes 675 tests across 123 files;
+  Sankey geometry, then stress-tests 4,098 rectangles and 2,050 polygons with
+  13,318 total vertices. The full unit matrix passes 678 tests across 123 files;
   typecheck, documentation, packed-consumer, framework-adapter, formatting, and
   sandbox production-build gates also pass.
 
diff --git a/examples/sandbox/README.md b/examples/sandbox/README.md
index 9560310d..9157f1ed 100644
--- a/examples/sandbox/README.md
+++ b/examples/sandbox/README.md
@@ -11,7 +11,8 @@ The private sandbox contains two complementary development surfaces:
 The lab compares legacy anchor-only focus with the current two-stage resolver:
 painted-shape containment first, then the mark's declared `x`, `y`, `xy`, or
 `geometry` fallback. Every chart keeps its source disclosure directly beneath
-the rendered result.
+the rendered result. Its final stress cases exercise 4,098 rectangles and
+2,050 polygons containing 13,318 vertices.
 
 Add a focused case in `src/InteractionGeometryLab.tsx` when a distinct mark
 family or interaction shape exercises behavior not already represented. Keep
diff --git a/examples/sandbox/src/InteractionGeometryLab.test.ts b/examples/sandbox/src/InteractionGeometryLab.test.ts
index 75c5392d..72504988 100644
--- a/examples/sandbox/src/InteractionGeometryLab.test.ts
+++ b/examples/sandbox/src/InteractionGeometryLab.test.ts
@@ -17,7 +17,7 @@ describe('interaction geometry source disclosure', () => {
     expect(markup.match(/class="hit-region-proof__source"/g)).toHaveLength(
       proofCases.length * 2,
     )
-    expect(proofCases).toHaveLength(12)
+    expect(proofCases).toHaveLength(14)
     expect(markup).toContain('const stackedSeries = [')
     expect(markup).toContain('polarGuideMark(&#x27;polar-sector-guides&#x27;)')
     expect(markup).toContain(
@@ -93,6 +93,40 @@ describe('interaction geometry proof gallery', () => {
       'october-disease',
     )
   })
+
+  it('keeps the large rectangle and polygon stress fixtures intact', () => {
+    const rectangleProof = proofCases.find(
+      (candidate) => candidate.id === 'dense-rectangles',
+    )
+    const polygonProof = proofCases.find(
+      (candidate) => candidate.id === 'complex-polygons',
+    )
+    expect(rectangleProof).toBeDefined()
+    expect(polygonProof).toBeDefined()
+    if (!rectangleProof || !polygonProof) return
+
+    const rectangleScene = createChartScene(rectangleProof.after, {
+      width: 1_120,
+      height: 320,
+    })
+    const polygonScene = createChartScene(polygonProof.after, {
+      width: 1_120,
+      height: 320,
+    })
+
+    expect(rectangleScene.points).toHaveLength(4_098)
+    expect(polygonScene.points).toHaveLength(2_050)
+    expect(
+      polygonScene.points.reduce(
+        (total, point) =>
+          total +
+          (point.hitRegion?.kind === 'polygon'
+            ? point.hitRegion.points.length
+            : 0),
+        0,
+      ),
+    ).toBe(13_318)
+  })
 })
 
 function legacyNearest<TDatum>(
diff --git a/examples/sandbox/src/InteractionGeometryLab.tsx b/examples/sandbox/src/InteractionGeometryLab.tsx
index 34066f9c..f48340a0 100644
--- a/examples/sandbox/src/InteractionGeometryLab.tsx
+++ b/examples/sandbox/src/InteractionGeometryLab.tsx
@@ -42,6 +42,10 @@ interface ProofCase {
   id: string
   title: string
   affinity: ChartFocusAffinity
+  stress?: {
+    geometryLabel: string
+    height: number
+  }
   explanation: string
   beforeExpected: string
   afterExpected: string
@@ -86,20 +90,25 @@ export function InteractionGeometryLab() {
         <p>
           Each comparison uses the same pointer position and 48px threshold.
           Before measures from a mark’s anchor point. After tests its painted
-          shape first, then uses the mark’s natural interaction axis.
+          shape first, then uses the mark’s natural interaction axis. The final
+          two comparisons scale that contract to thousands of regions.
         </p>
       </header>
 
       <div className="hit-region-proof__gallery">
         {proofCases.map((proof) => (
           <section
-            className="hit-region-proof__case"
+            className={`hit-region-proof__case${proof.stress ? ' hit-region-proof__case--stress' : ''}`}
             key={proof.id}
             data-proof-case={proof.id}
           >
             <header className="hit-region-proof__case-header">
               <h2>{proof.title}</h2>
-              <code>fallback: {proof.affinity}</code>
+              <code>
+                {proof.stress
+                  ? `${proof.stress.geometryLabel} · fallback: ${proof.affinity}`
+                  : `fallback: ${proof.affinity}`}
+              </code>
             </header>
             <p className="hit-region-proof__case-description">
               {proof.explanation}
@@ -166,8 +175,8 @@ function ProofChart({
       <div className="hit-region-proof__chart">
         <Chart
           definition={mode === 'before' ? proof.before : proof.after}
-          height={230}
-          initialWidth={520}
+          height={proof.stress?.height ?? 230}
+          initialWidth={proof.stress ? 1120 : 520}
           ariaLabel={`${proof.title}: ${mode}`}
           onFocusChange={(point) => setFocused(point?.datum ?? null)}
           onRender={onRender}
@@ -690,6 +699,108 @@ function createProofCases(): ProofCase[] {
   )
   // source:sankey:end
 
+  // source:dense-rectangles:start
+  const denseRectangleGrid = Array.from({ length: 4_096 }, (_, index) => {
+    const columns = 128
+    const rows = 32
+    const column = index % columns
+    const row = Math.floor(index / columns)
+    const columnWidth = 0.36 / columns
+    const rowHeight = 0.9 / rows
+    return {
+      id: `dense-cell-${index}`,
+      label: `Dense cell ${index + 1}`,
+      x1: 0.62 + column * columnWidth,
+      x2: 0.62 + (column + 0.82) * columnWidth,
+      y1: 0.05 + row * rowHeight,
+      y2: 0.05 + (row + 0.82) * rowHeight,
+      color: index % 2 ? '#d4d4d4' : '#e5e5e5',
+    }
+  }) satisfies ProofDatum[]
+  const denseRectangles = [
+    {
+      id: 'dense-giant-rectangle',
+      label: 'Giant rectangle across 4,098 regions',
+      x1: 0.03,
+      x2: 0.58,
+      y1: 0.06,
+      y2: 0.94,
+      probe: [0.57, 0.5],
+      color: '#404040',
+    },
+    {
+      id: 'dense-rectangle-decoy',
+      label: 'Closest micro-cell',
+      x1: 0.584,
+      x2: 0.604,
+      y1: 0.47,
+      y2: 0.53,
+      color: '#a3a3a3',
+    },
+    ...denseRectangleGrid,
+  ] satisfies ProofDatum[]
+  const denseRectangleBase = baseDefinition(
+    [normalizedRectMark('dense-rectangles', denseRectangles, 'xy')],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:dense-rectangles:end
+
+  // source:complex-polygons:start
+  const regularPolygon = (
+    x: number,
+    y: number,
+    radius: number,
+    vertices: number,
+    wobble = 0,
+    verticalRatio = 1,
+  ) =>
+    Array.from({ length: vertices }, (_, index) => {
+      const angle = (index / vertices) * Math.PI * 2
+      const adjustedRadius =
+        radius * (1 + Math.sin(index * 17) * Math.max(0, wobble))
+      return [
+        x + Math.cos(angle) * adjustedRadius,
+        y + Math.sin(angle) * adjustedRadius * verticalRatio,
+      ] as const
+    })
+  const polygonCloud = Array.from({ length: 2_048 }, (_, index) => {
+    const columns = 64
+    const rows = 32
+    const column = index % columns
+    const row = Math.floor(index / columns)
+    const x = 0.64 + ((column + 0.5) / columns) * 0.34
+    const y = 0.06 + ((row + 0.5) / rows) * 0.88
+    return {
+      id: `cloud-polygon-${index}`,
+      label: `Cloud polygon ${index + 1}`,
+      polygon: regularPolygon(x, y, 0.0022, 6, 0, 3),
+      color: index % 2 ? '#a3a3a3' : '#d4d4d4',
+    }
+  }) satisfies ProofDatum[]
+  const complexPolygons = [
+    {
+      id: 'complex-giant-polygon',
+      label: '1,024-vertex contour across 13,318 vertices',
+      polygon: regularPolygon(0.31, 0.5, 0.26, 1_024, 0.03),
+      probe: [0.56, 0.5],
+      color: '#404040',
+    },
+    {
+      id: 'complex-polygon-decoy',
+      label: 'Closest six-vertex polygon',
+      polygon: regularPolygon(0.59, 0.5, 0.014, 6),
+      color: '#a3a3a3',
+    },
+    ...polygonCloud,
+  ] satisfies ProofDatum[]
+  const complexPolygonBase = baseDefinition(
+    [normalizedPolygonMark('complex-polygons', complexPolygons)],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:complex-polygons:end
+
   return [
     makeCase({
       id: 'stacked-bars',
@@ -823,6 +934,33 @@ function createProofCases(): ProofCase[] {
       base: sankeyBase,
       probe: normalizedDatumProbe('wide-link'),
     }),
+    makeCase({
+      id: 'dense-rectangles',
+      title: 'Stress: thousands of rectangles',
+      affinity: 'xy',
+      stress: { geometryLabel: '4,098 rectangles', height: 320 },
+      explanation:
+        'A giant region sits behind 4,097 later-painted rectangles. The exact pass must reject every unrelated boundary before finding the containing shape.',
+      beforeExpected: 'Closest micro-cell',
+      afterExpected: 'Giant rectangle across 4,098 regions',
+      base: denseRectangleBase,
+      probe: normalizedDatumProbe('dense-giant-rectangle'),
+    }),
+    makeCase({
+      id: 'complex-polygons',
+      title: 'Stress: thousands of complex polygons',
+      affinity: 'geometry',
+      stress: {
+        geometryLabel: '2,050 polygons · 13,318 vertices',
+        height: 320,
+      },
+      explanation:
+        'A 1,024-vertex contour sits behind 2,049 later-painted polygons, forcing a worst-direction containment scan without an axis shortcut.',
+      beforeExpected: 'Closest six-vertex polygon',
+      afterExpected: '1,024-vertex contour across 13,318 vertices',
+      base: complexPolygonBase,
+      probe: normalizedDatumProbe('complex-giant-polygon'),
+    }),
   ]
 }
 
diff --git a/examples/sandbox/src/styles.css b/examples/sandbox/src/styles.css
index 923b1bea..8218289c 100644
--- a/examples/sandbox/src/styles.css
+++ b/examples/sandbox/src/styles.css
@@ -211,6 +211,15 @@
   gap: 18px;
 }
 
+.hit-region-proof__case--stress .hit-region-proof__grid {
+  grid-template-columns: 1fr;
+}
+
+.hit-region-proof__case--stress .hit-region-proof__chart > svg,
+.hit-region-proof__case--stress .hit-region-proof__chart > div:first-child {
+  min-height: 320px;
+}
+
 .hit-region-proof__card {
   min-width: 0;
   padding: 15px;

From 054d23b8b7d4c1abaa6c58a6b302a09df8cd410d Mon Sep 17 00:00:00 2001
From: Kyle Gill <kylerobertgill@gmail.com>
Date: Sat, 1 Aug 2026 22:09:01 -0600
Subject: [PATCH 3/5] Refine scene-owned interaction geometry

---
 .changeset/bright-hit-regions.md              |   12 +-
 API-FRICTION.md                               |  135 +-
 README.md                                     |    3 +-
 .../cases/scatter-bubble/model.test.ts        |   15 +
 .../conformance/cases/scatter-bubble/model.ts |   24 +
 .../conformance/cases/scatter-bubble/plot.ts  |   13 +-
 .../cases/scatter-bubble/tanstack.ts          |   13 +-
 .../entries/charts-pointer-geometry-kernel.ts |    2 +-
 benchmarks/interaction/README.md              |    2 +-
 benchmarks/interaction/nearest.ts             |   83 +-
 docs/guides/custom-marks-and-renderers.md     |   55 +-
 docs/guides/tooltips-and-focus.md             |   25 +-
 docs/reference/custom-extensions.md           |    7 +-
 docs/reference/focus-and-interaction.md       |   80 +-
 docs/reference/rendering-and-export.md        |   13 +-
 docs/reference/runtime-and-scene.md           |   35 +-
 docs/reference/types.md                       |    9 +-
 examples/sandbox/README.md                    |   23 +-
 .../src/InteractionGeometryLab.test.ts        |  255 ++-
 .../sandbox/src/InteractionGeometryLab.tsx    | 1894 ++++++++++++++++-
 examples/sandbox/src/styles.css               |    7 +-
 .../docs/guides/custom-marks-and-renderers.md |   55 +-
 .../docs/guides/tooltips-and-focus.md         |   25 +-
 .../docs/reference/custom-extensions.md       |    7 +-
 .../docs/reference/focus-and-interaction.md   |   80 +-
 .../docs/reference/rendering-and-export.md    |   13 +-
 .../docs/reference/runtime-and-scene.md       |   35 +-
 packages/charts-core/docs/reference/types.md  |    9 +-
 packages/charts-core/src/area-x.ts            |   10 +-
 packages/charts-core/src/area.ts              |   11 +-
 packages/charts-core/src/band.ts              |   68 +-
 packages/charts-core/src/bar.ts               |   72 +-
 packages/charts-core/src/canvas.ts            |    1 +
 packages/charts-core/src/dom-types.ts         |    2 +-
 packages/charts-core/src/dot.ts               |   31 +-
 packages/charts-core/src/facet.test.ts        |  186 +-
 packages/charts-core/src/facet.ts             |  143 +-
 packages/charts-core/src/focus-layer.ts       |   20 +-
 packages/charts-core/src/focus-mark.test.ts   |  100 +-
 packages/charts-core/src/hexagon.ts           |   31 +-
 packages/charts-core/src/index.ts             |    5 +-
 packages/charts-core/src/line.ts              |    9 +-
 packages/charts-core/src/mark-state.ts        |   10 +-
 packages/charts-core/src/marks.test.ts        |    6 +-
 packages/charts-core/src/nearest.test.ts      |  442 ++--
 packages/charts-core/src/nearest.ts           |  629 ++++--
 packages/charts-core/src/rect.ts              |   46 +-
 packages/charts-core/src/renderer.test.ts     |   65 +-
 packages/charts-core/src/renderer.ts          |   11 +-
 packages/charts-core/src/scene.test.ts        |    6 +-
 packages/charts-core/src/scene.ts             |   74 +-
 packages/charts-core/src/svg-surface.ts       |    1 +
 .../charts-core/src/type-contract.test.ts     |    3 +-
 packages/charts-core/src/types.ts             |   58 +-
 packages/charts-core/src/universal-types.ts   |    5 +-
 .../react-native-charts/src/interaction.ts    |    2 +-
 scripts/measure-bundles.mjs                   |    2 +-
 57 files changed, 4077 insertions(+), 901 deletions(-)
 create mode 100644 benchmarks/conformance/cases/scatter-bubble/model.test.ts
 create mode 100644 benchmarks/conformance/cases/scatter-bubble/model.ts

diff --git a/.changeset/bright-hit-regions.md b/.changeset/bright-hit-regions.md
index 8236b259..d8035065 100644
--- a/.changeset/bright-hit-regions.md
+++ b/.changeset/bright-hit-regions.md
@@ -3,6 +3,12 @@
 ---
 
 Resolve default pointer focus against painted mark geometry before applying a
-mark's natural x, y, or two-dimensional fallback. Built-in bars, bands, dots,
-rectangles, and hexagons now expose their hit regions, while custom marks can
-provide rectangle, circle, or polygon regions directly on scene points.
+mark's natural x, y, or two-dimensional fallback. Interaction metadata now
+lives on the resolved scene primitive, so built-in and custom marks share the
+same rectangle, circle, polygon, line, or area geometry used by renderers after
+layout, facets, transforms, clipping, and inline state resolution.
+
+Facet-local default markers now stay bound to the primary point even when
+another panel has identical channel values; explicit x/y focus marks remain the
+opt-in synchronized-cursor path. Animated bar inset states also preserve the
+quantitative axis and baseline while changing only categorical width or height.
diff --git a/API-FRICTION.md b/API-FRICTION.md
index 3de40e19..b202fbe1 100644
--- a/API-FRICTION.md
+++ b/API-FRICTION.md
@@ -212,6 +212,7 @@ Each entry records:
 | F-174 | OIDC release cannot claim a new npm package name         | Tooling         | monitoring |
 | F-175 | Native SVG resource normalization collapsed authored IDs | Application     | resolved   |
 | F-176 | Large marks were focused by distant anchor points        | API             | monitoring |
+| F-177 | Bubble overlap inherited incidental source order         | Application     | resolved   |
 
 ## Findings
 
@@ -4272,43 +4273,81 @@ Each entry records:
   ranking, while chart-wide nearest-x made off-bar selection too permissive.
   Pure x fallback also tied every segment in one stack and selected the bottom
   segment when the pointer was above the stack.
-- Current decision: use a two-stage mark contract rather than infer a strategy
-  from chart composition. Interaction points may expose their painted
-  rectangle, circle, or polygon, while the mark declares its natural off-shape
-  fallback as `x`, `y`, `xy`, or `geometry`. Exact containment wins across all
-  marks before fallback ranking. Axis fallback compares its declared axis
-  first, then uses full painted-geometry distance to break ties. Overlapping
-  contained shapes resolve topmost-first in paint order. Points without either
-  field retain legacy point-distance behavior. Explicit focus strategies and
-  custom spatial indexes continue to own their complete search semantics.
+- Current decision: use a two-stage scene contract rather than infer a strategy
+  from chart composition or copy geometry onto `ChartPoint`. A resolved `rect`,
+  `dot`, `area`, `polyline`, or `rule` attaches its semantic point or points and
+  natural `x`, `y`, `xy`, or `geometry` fallback. The default resolver collects
+  those targets from the final scene in paint order, accumulating facet and
+  group translations and clips. Exact containment wins across all marks before
+  fallback ranking; axis fallback uses visible primitive bounds first and full
+  geometry distance to break ties. Inline mark states return their destination
+  scene to the host, which intentionally uses that scene during animation.
+  Points not attached to a primitive retain legacy point-distance behavior.
+  Explicit focus strategies and custom spatial indexes continue to own their
+  complete search semantics; the spatial-index factory now receives the final
+  scene as a backward-compatible second argument so bounds, quadtrees, or
+  Delaunay can remain optional acceleration layers without copying geometry
+  onto points. Facet layout also scopes the final primitive and focus-layer
+  keys. Default `primary`/`group` presentation matches canonical focused points
+  instead of treating equal x/y/series tuples in another panel as the same
+  point; `whenFocused(..., { match: "x" })` or `match: "y"` remains the
+  explicit synchronized-cursor contract.
 - Verification: focused tests cover containment priority, x/y/xy/geometry
-  fallback, rectangle/circle/polygon shapes, built-in bar affinity, reversed
-  rectangles, paint-order overlap, stack-edge selection, spatial-index
-  ownership, and legacy tie order. The fourteen-case sandbox compares before and
-  after behavior for stacked and horizontal bars, line/area, bubbles, cells,
-  financial intervals, timelines, pie and annular sectors, radar, maps, and
-  Sankey geometry, then stress-tests 4,098 rectangles and 2,050 polygons with
-  13,318 total vertices. The full unit matrix passes 678 tests across 123 files;
-  typecheck, documentation, packed-consumer, framework-adapter, formatting, and
-  sandbox production-build gates also pass.
-
-  On Node 24 arm64 on an Apple M4 Pro, the optimized resolver improves the
-  original POC's median
-  query time from 116.7 to 23.8 microseconds for 10k ordinary points, 62.2 to
-  27.1 for contained rectangles, 210.5 to 127.0 for stacked fallback, 64.5 to
-  25.7 for circles, and 132.9 to 79.5 for 2k polygons. On an exact-target point
-  fixture, production, optimized geometry, Observable Plot 0.6.17, D3 quadtree,
-  cold D3 Delaunay, and coherent Delaunay take 13.9, 25.2, 41.4, 2.8, 8.6, and
-  2.8 microseconds. Quadtree and Delaunay construction take 1.76 and 2.47
-  milliseconds for 10k points. A source-equivalent Vega cached-bounds pass
-  takes 9.8 microseconds versus 23.8 for the generic rectangle resolver, but
-  deliberately excludes Vega's subsequent Canvas path test.
-
-  The isolated resolver grows from 157 minified / 153 gzip bytes to 1,955 / 869
-  bytes, a 716-byte gzip feature cost beneath a new 1 kB ceiling. The D3
-  quadtree and Delaunay kernels are 1,971 and 7,308 gzip bytes before geometry
-  refinement. The complete DOM host remains 685 gzip bytes above the
-  pre-feature lock rather than silently accepting a new baseline.
+  fallback, rounded/reversed rectangles, circles, polygons, rules and lines,
+  built-in bar affinity, paint-order overlap, stack-edge selection, nested
+  translation, partial and complete clipping, destination-state scene
+  selection, spatial-index ownership, legacy tie order, duplicate-valued facet
+  identity, explicit synchronized x/y facet bands, and axis-correct animated
+  bar insets. The sandbox adds default-primary, x-synchronized, and
+  y-synchronized facet focus modes with contextual source, plus a live
+  destination-animation contract before twenty-four chart-family, grouped-bar,
+  clipping, polar, facet, and large-geometry comparisons. The lab now includes
+  dense scatter, pre-binned hexagon, nested-bubble paint-order, and richer
+  Sankey/network probes; its twenty-eight proof families split evenly between
+  labelled SVG and Canvas cards, and the destination-animation contract renders
+  in both so attribute interpolation and buffer crossfading share the same
+  picking semantics. Four composed cases verify that built-in bars, areas,
+  lines, rectangles, and dots contribute their natural affinity per primitive
+  without a chart-wide setting, including topmost containment when unlike marks
+  overlap. Facet coverage includes plain, grouped, stacked, and bubble marks.
+  Three mixed-mark cases now include an additional native `group-x` or
+  `group-y` tooltip card. This exposed that grouped tooltips are not an
+  independent presentation option: each grouped preset replaces the default
+  scene-containment resolver with nearest-axis selection as well as returning
+  the focus group. The lab keeps those cards separate and labelled rather than
+  claiming that geometry-first primary selection and axis grouping currently
+  compose.
+  The full unit matrix passes 745 tests across 131 files;
+  typecheck, documentation,
+  formatting, packed-consumer, seven-adapter, sandbox production-build, and
+  live browser checks also pass.
+
+  On Node 24 arm64 on an Apple M4 Pro, the cached scene resolver improves the
+  unoptimized POC's median query time from 113.5 to 14.2 microseconds for 10k
+  ordinary points, 62.5 to 16.4 for contained rectangles, 210.6 to 118.0 for
+  stacked fallback, 64.5 to 16.2 for circles, and 126.2 to 71.8 for 2k
+  polygons. On an exact-target point fixture, production, scene geometry,
+  Observable Plot 0.6.17, D3 quadtree, cold D3 Delaunay, and coherent Delaunay
+  take 13.7, 13.7, 41.4, 2.6, 8.7, and 3.0 microseconds. Quadtree and Delaunay
+  construction take 1.92 and 2.53 milliseconds for 10k points. A
+  source-equivalent Vega cached-bounds pass takes 10.0 microseconds versus 15.2
+  for the generic rectangle resolver, but deliberately excludes Vega's
+  subsequent Canvas path test.
+
+  The isolated scene resolver is 4,952 minified / 1,981 gzip bytes versus 157 /
+  153 for the anchor-only kernel: a 1,828-byte gzip feature cost under an
+  explicit 2 kB ceiling. The complete DOM host is 1,816 gzip bytes above the
+  pre-feature product lock, which remains unchanged for reviewer approval
+  rather than silently accepting a new baseline. A final size audit removed
+  redundant built-in `MarkScene.points` arrays and explicit default `xy`
+  affinity fields while retaining the optional point list for custom-mark
+  compatibility. Against the immediate pre-audit build, that saves 119
+  minified / 58 gzip / 67 Brotli bytes in the representative-marks entry and 24
+  / 10 / 39 bytes in the D3-line scene. The interactive host is unchanged
+  because it does not bundle those mark encoders. Packing cached interaction
+  targets into tuples was rejected after the same 10k stacked-fallback fixture
+  regressed from about 118 to 294 microseconds per query; the larger but
+  optimizer-friendly object shape remains.
   [Observable Plot](https://observablehq.com/plot/interactions/pointer)
   documents point-only dead spots and dominant-axis modes;
   [D3 quadtree](https://d3js.org/d3-quadtree#quadtree_find) and
@@ -4318,5 +4357,25 @@ Each entry records:
   and [Canvas picker](https://github.com/vega/vega/blob/main/packages/vega-scenegraph/src/util/canvas/pick.js)
   establish topmost traversal, cached-bounds rejection, and exact path tests.
 
-- Follow-up: verify rounded corners and true paths, negative bars, animation,
-  and SVG/Canvas parity before resolving this entry.
+- Follow-up: exact picking against optional authored SVG path strings and an
+  interpolated mid-transition scene remain separate refinements. Verify full
+  SVG/Canvas parity before resolving this entry.
+
+### F-177 — Bubble overlap inherited incidental source order
+
+- Status: resolved
+- Severity: medium
+- Owner: Application
+- Observed in: Palmer penguin bubble-scatter conformance pair
+- Friction: translucent bubbles deliberately use paint order to resolve
+  overlapping containment, but the conformance rows retained incidental source
+  order. A smaller observation could therefore be painted behind and become
+  difficult to target even though it remained visually perceptible.
+- Decision: share one typed row selector between the Plot and TanStack cases,
+  filter complete channel values with a type predicate, and paint larger body
+  masses first so smaller bubbles remain visible and targetable on top. Keep
+  the library's generic paint-order policy unchanged because authored scene
+  order can be semantically meaningful.
+- Verification: the model regression covers the initial 320-row fixture and
+  asserts monotonically descending body mass for the paired renderers' shared
+  row selector.
diff --git a/README.md b/README.md
index 311b8303..ecb05529 100644
--- a/README.md
+++ b/README.md
@@ -299,7 +299,8 @@ pnpm dev:conformance
 
 The sandbox opens its existing integrated data dashboard by default. The
 interaction-geometry command opens a before-and-after lab for exercising
-painted hit regions and mark-level focus fallback across chart families.
+scene-owned interaction geometry, paint order, transforms, clipping, and
+natural focus fallback across chart families.
 
 The repository includes three complementary benchmark suites:
 
diff --git a/benchmarks/conformance/cases/scatter-bubble/model.test.ts b/benchmarks/conformance/cases/scatter-bubble/model.test.ts
new file mode 100644
index 00000000..0d8adece
--- /dev/null
+++ b/benchmarks/conformance/cases/scatter-bubble/model.test.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+import { bubbleRows } from './model'
+
+describe('bubbleRows', () => {
+  it('paints larger bubbles first so smaller overlaps remain targetable', () => {
+    const rows = bubbleRows(0)
+
+    expect(rows).toHaveLength(320)
+    for (let index = 1; index < rows.length; index += 1) {
+      expect(rows[index - 1]!.body_mass_g).toBeGreaterThanOrEqual(
+        rows[index]!.body_mass_g,
+      )
+    }
+  })
+})
diff --git a/benchmarks/conformance/cases/scatter-bubble/model.ts b/benchmarks/conformance/cases/scatter-bubble/model.ts
new file mode 100644
index 00000000..36cb39a0
--- /dev/null
+++ b/benchmarks/conformance/cases/scatter-bubble/model.ts
@@ -0,0 +1,24 @@
+import { penguins } from '@charts-poc/demo-data/penguins'
+import type { PenguinsRow } from '@charts-poc/demo-data/penguins'
+
+export type BubblePenguin = PenguinsRow & {
+  culmen_length_mm: number
+  culmen_depth_mm: number
+  body_mass_g: number
+}
+
+const completePenguins = penguins.filter(isBubblePenguin)
+
+export function bubbleRows(revision: number): readonly BubblePenguin[] {
+  return completePenguins
+    .slice(revision * 8, revision * 8 + 320)
+    .sort((left, right) => right.body_mass_g - left.body_mass_g)
+}
+
+function isBubblePenguin(row: PenguinsRow): row is BubblePenguin {
+  return (
+    row.culmen_length_mm !== null &&
+    row.culmen_depth_mm !== null &&
+    row.body_mass_g !== null
+  )
+}
diff --git a/benchmarks/conformance/cases/scatter-bubble/plot.ts b/benchmarks/conformance/cases/scatter-bubble/plot.ts
index a5936b7d..7e02826e 100644
--- a/benchmarks/conformance/cases/scatter-bubble/plot.ts
+++ b/benchmarks/conformance/cases/scatter-bubble/plot.ts
@@ -1,22 +1,13 @@
-import { penguins } from '@charts-poc/demo-data/penguins'
 import * as Plot from '@observablehq/plot'
 import { mountObservablePlot } from '../../shared/mount'
 import type { ConformanceMount } from '../../types'
+import { bubbleRows } from './model'
 
 const groupRange = ['#2563eb', '#f97316', '#10b981']
-const completePenguins = penguins.filter(
-  (row) =>
-    row.culmen_length_mm !== null &&
-    row.culmen_depth_mm !== null &&
-    row.body_mass_g !== null,
-)
 
 export const mount: ConformanceMount = (container, input) =>
   mountObservablePlot(container, input, (nextInput) => {
-    const rows = completePenguins.slice(
-      nextInput.revision * 8,
-      nextInput.revision * 8 + 320,
-    )
+    const rows = bubbleRows(nextInput.revision)
 
     return Plot.plot({
       width: nextInput.width,
diff --git a/benchmarks/conformance/cases/scatter-bubble/tanstack.ts b/benchmarks/conformance/cases/scatter-bubble/tanstack.ts
index f3373c03..6c1e3544 100644
--- a/benchmarks/conformance/cases/scatter-bubble/tanstack.ts
+++ b/benchmarks/conformance/cases/scatter-bubble/tanstack.ts
@@ -1,22 +1,13 @@
-import { penguins } from '@charts-poc/demo-data/penguins'
 import { colorLegend, defineChart, dot } from '@tanstack/charts'
 import { scaleLinear, scaleSqrt } from 'd3-scale'
 import { tanstackMount } from '../../shared/mount'
 import type { ConformanceInput } from '../../types'
+import { bubbleRows } from './model'
 
 const groupRange = ['#2563eb', '#f97316', '#10b981']
-const completePenguins = penguins.filter(
-  (row) =>
-    row.culmen_length_mm !== null &&
-    row.culmen_depth_mm !== null &&
-    row.body_mass_g !== null,
-)
 
 const definition = (input: ConformanceInput) => {
-  const rows = completePenguins.slice(
-    input.revision * 8,
-    input.revision * 8 + 320,
-  )
+  const rows = bubbleRows(input.revision)
 
   return defineChart({
     marks: [
diff --git a/benchmarks/entries/charts-pointer-geometry-kernel.ts b/benchmarks/entries/charts-pointer-geometry-kernel.ts
index ed752e44..0f3e9339 100644
--- a/benchmarks/entries/charts-pointer-geometry-kernel.ts
+++ b/benchmarks/entries/charts-pointer-geometry-kernel.ts
@@ -1 +1 @@
-export { nearestPoint } from '../../packages/charts-core/src/nearest'
+export { nearestScenePoint } from '../../packages/charts-core/src/nearest'
diff --git a/benchmarks/interaction/README.md b/benchmarks/interaction/README.md
index 37c57c7e..06cfe35b 100644
--- a/benchmarks/interaction/README.md
+++ b/benchmarks/interaction/README.md
@@ -81,7 +81,7 @@ and [Canvas picker](https://github.com/vega/vega/blob/main/packages/vega-scenegr
 
 `pnpm bundle:check` reports isolated anchor-only and geometry resolver entries
 beside the existing D3 quadtree and Delaunay kernels. The geometry resolver has
-a 1 kB gzip ceiling; the historical anchor-only entry stays unbudgeted so the
+a 2 kB gzip ceiling; the historical anchor-only entry stays unbudgeted so the
 comparison remains visible without treating removed behavior as a product.
 
 The command exposes explicit garbage collection and rotates implementation
diff --git a/benchmarks/interaction/nearest.ts b/benchmarks/interaction/nearest.ts
index 06337e91..f00e9254 100644
--- a/benchmarks/interaction/nearest.ts
+++ b/benchmarks/interaction/nearest.ts
@@ -1,12 +1,32 @@
 import { performance } from 'node:perf_hooks'
 import { Delaunay } from 'd3-delaunay'
 import { quadtree } from 'd3-quadtree'
-import { nearestPoint } from '../../packages/charts-core/src/nearest'
+import { nearestScenePoint } from '../../packages/charts-core/src/nearest'
 import type {
-  ChartPoint,
+  ChartFocusAffinity,
+  ChartPoint as CoreChartPoint,
+  ChartScene,
   ChartValue,
+  SceneNode,
 } from '../../packages/charts-core/src/types'
 
+type BenchmarkHitRegion =
+  | { kind: 'rect'; x: number; y: number; width: number; height: number }
+  | { kind: 'circle'; x: number; y: number; radius: number }
+  | {
+      kind: 'polygon'
+      points: readonly (readonly [number, number])[]
+    }
+
+type ChartPoint<
+  TDatum = unknown,
+  TXValue extends ChartValue = ChartValue,
+  TYValue extends ChartValue = ChartValue,
+> = CoreChartPoint<TDatum, TXValue, TYValue> & {
+  hitRegion?: BenchmarkHitRegion
+  focusAffinity?: ChartFocusAffinity
+}
+
 interface Datum {
   index: number
 }
@@ -44,6 +64,11 @@ type Resolver = (
 
 type Implementation = readonly [label: string, resolver: Resolver]
 
+const benchmarkSceneCache = new WeakMap<
+  readonly ChartPoint<Datum, number, number>[],
+  ChartScene<Datum, number, number>
+>()
+
 const densePoints = Array.from({ length: 10_000 }, (_, index) =>
   point(index, index % 1_000, Math.floor(index / 1_000) * 20),
 )
@@ -141,7 +166,7 @@ const cases: readonly PointerCase[] = [
 const implementations: readonly Implementation[] = [
   ['anchor-only baseline', anchorNearestPoint],
   ['unoptimized POC', pocNearestPoint],
-  ['optimized geometry', nearestPoint],
+  ['scene geometry', sceneNearestPoint],
 ] as const
 
 const comparisonCase: PointerCase = {
@@ -196,14 +221,14 @@ const delaunayIndex = Delaunay.from(
 let delaunayCursor = 0
 const comparisonImplementations: readonly Implementation[] = [
   ['current prod · linear anchor', anchorNearestPoint],
-  ['new geometry · point-only', nearestPoint],
+  ['new geometry · point-only', sceneNearestPoint],
   ['Observable Plot 0.6.17 · pointer kernel', plotPointerNearestPoint],
   ['D3 quadtree 3.0.1 · indexed', quadtreeNearestPoint],
   ['D3 Delaunay 6.0.4 · cold start', delaunayNearestPoint],
   ['D3 Delaunay 6.0.4 · coherent start', coherentDelaunayNearestPoint],
 ] as const
 const rectangleComparisonImplementations: readonly Implementation[] = [
-  ['new geometry · generic rect', nearestPoint],
+  ['new geometry · generic rect', sceneNearestPoint],
   ['Vega 5.2.1 · bounds-only lower bound', vegaBoundsNearestPoint],
 ] as const
 const collectGarbage = (globalThis as { gc?: () => void }).gc
@@ -416,6 +441,48 @@ function pointWithinDistance(
   return dx * dx + dy * dy <= Math.max(0, maxDistance) ** 2 ? point : null
 }
 
+function sceneNearestPoint(
+  points: readonly ChartPoint<Datum, number, number>[],
+  x: number,
+  y: number,
+  maxDistance: number,
+) {
+  let scene = benchmarkSceneCache.get(points)
+  if (!scene) {
+    const nodes: SceneNode[] = []
+    for (const point of points) {
+      const region = point.hitRegion
+      if (!region) continue
+      const interaction = {
+        point,
+        affinity: point.focusAffinity,
+      }
+      nodes.push(
+        region.kind === 'rect'
+          ? { ...region, key: point.key, interaction }
+          : region.kind === 'circle'
+            ? {
+                kind: 'dot',
+                key: point.key,
+                x: region.x,
+                y: region.y,
+                radius: region.radius,
+                interaction,
+              }
+            : {
+                kind: 'area',
+                key: point.key,
+                points: region.points,
+                interaction,
+              },
+      )
+    }
+    scene = { nodes, points } as unknown as ChartScene<Datum, number, number>
+    benchmarkSceneCache.set(points, scene)
+  }
+  return nearestScenePoint(scene, x, y, maxDistance)
+}
+
 // Vega's Canvas picker traverses the scene in reverse paint order and first
 // rejects items against cached bounds. This intentionally stops before Vega's
 // mark-specific Canvas path test, so it is a lower bound rather than a claim
@@ -636,7 +703,7 @@ function verifyEquivalentResults() {
         query.y,
         query.maxDistance,
       )
-      const optimized = nearestPoint(
+      const optimized = sceneNearestPoint(
         benchmark.points,
         query.x,
         query.y,
@@ -679,7 +746,7 @@ function verifyComparisonResults() {
 
 function verifyRectangleComparisonResults() {
   for (const query of rectangleComparisonCase.queries) {
-    const reference = nearestPoint(
+    const reference = sceneNearestPoint(
       rectangleComparisonCase.points,
       query.x,
       query.y,
@@ -727,7 +794,7 @@ function printScenarioComparisons(
   console.log('\nCurrent production vs new geometry · median query time')
   for (const { benchmark, measurements } of scenarios) {
     const current = percentile(measurements.get('anchor-only baseline')!, 0.5)
-    const optimized = percentile(measurements.get('optimized geometry')!, 0.5)
+    const optimized = percentile(measurements.get('scene geometry')!, 0.5)
     const maximum = Math.max(current, optimized)
     const currentWidth = Math.max(1, Math.round((current / maximum) * 36))
     const optimizedWidth = Math.max(1, Math.round((optimized / maximum) * 36))
diff --git a/docs/guides/custom-marks-and-renderers.md b/docs/guides/custom-marks-and-renderers.md
index bf2adf40..06413984 100644
--- a/docs/guides/custom-marks-and-renderers.md
+++ b/docs/guides/custom-marks-and-renderers.md
@@ -111,36 +111,38 @@ Each point should retain:
 - resolved pixel coordinates;
 - group identity and color.
 
-For a large painted mark, set `hitRegion` on each emitted point and declare
-the mark's off-shape fallback once with `focusAffinity`:
+For a large painted mark, create the semantic point once and attach that same
+object to the scene primitive that paints it:
 
 ```ts
-return {
-  id,
-  focusAffinity: 'x',
-  channels,
-  render(context) {
-    return {
-      nodes,
-      points: nodes.map((node, index) => ({
-        ...interactionPoint(index),
-        hitRegion: {
-          kind: 'rect',
-          x: node.x,
-          y: node.y,
-          width: node.width,
-          height: node.height,
-        },
-      })),
-    }
-  },
+import type { SceneRect } from '@tanstack/charts'
+
+const point = interactionPoint(index)
+const node: SceneRect = {
+  kind: 'rect',
+  key: point.key,
+  x,
+  y,
+  width,
+  height,
+  interaction: { point, affinity: 'x' },
 }
+
+return { nodes: [node], points: [point] }
 ```
 
 Use `x` for vertically oriented marks, `y` for horizontal marks, `xy` for
 ordinary two-dimensional proximity, and `geometry` when only exact
 containment should focus the mark. The default resolver checks containment
-across every mark before applying any fallback.
+across every mark before applying any fallback. A continuous `polyline` or
+`area` may attach all of the semantic samples it represents with
+`interaction: { points, affinity }`; containment selects the closest sample
+within that primitive.
+
+Keep primitive coordinates local when returning translated groups. Scene
+traversal applies nested translation, clipping, facets, and paint order after
+layout. Do not calculate a second set of global hit bounds beside the rendered
+node.
 
 Omit points for decorative geometry. Do not invent fake interactive data for a
 frame, grid, or threshold that should not receive focus.
@@ -201,6 +203,10 @@ coordinate conversion, focus painting, and cleanup. The host retains sizing,
 runtime, keyboard, tooltip, selection, and focus-strategy behavior. Keep
 `prerender` deterministic and make `mount` adopt compatible server markup.
 
+If `paintFocus` resolves and paints inline mark-state geometry, return that
+destination `ChartScene`. The host will use it for subsequent pointer hits;
+returning nothing preserves base-scene interaction for simpler renderers.
+
 Use `ChartRendererRenderContext.surface` instead of assuming `onRender` exposes
 an SVG element. Framework consumers pass `renderer` through
 `@tanstack/react-charts/core` or `@tanstack/octane-charts/core`.
@@ -236,8 +242,9 @@ navigation. Its generic types must remain identical to the chart points it
 receives.
 
 A `ChartSpatialIndexFactory` builds optional nearest-point acceleration from
-scene points. Return original typed points from the index. Do not erase them to
-`unknown` and cast them back in callbacks.
+scene points and receives the complete resolved scene as its second argument.
+Return original typed points from the index. Do not erase them to `unknown` and
+cast them back in callbacks.
 
 ## Extension checklist
 
diff --git a/docs/guides/tooltips-and-focus.md b/docs/guides/tooltips-and-focus.md
index 07b58783..87cfc900 100644
--- a/docs/guides/tooltips-and-focus.md
+++ b/docs/guides/tooltips-and-focus.md
@@ -48,6 +48,23 @@ category. A sparse snapped cursor can opt into
 `maxFocusDistance: Number.POSITIVE_INFINITY`; keep the finite default when
 empty space should mean no focus.
 
+Default `primary` and `group` presentation follows the canonical focused scene
+points. Equal x/y/series values in another facet do not implicitly paint a
+second focus marker. To synchronize a visual cursor across facets without
+turning those mirrors into additional selected data, add an ordinary focus
+mark with `whenFocused(..., { match: 'x' })` or `match: 'y'`. The tooltip and
+focus callback still receive the resolver's primary point or explicit focus
+group.
+
+```ts
+whenFocused(bandX(rows, { x: 'date' }), { match: 'x' })
+whenFocused(bandY(rows, { y: 'value' }), { match: 'y' })
+```
+
+These are presentation filters, not alternate selection strategies. The first
+paints a vertical band wherever the focused x value exists; the second paints a
+horizontal band wherever the focused y value exists.
+
 <iframe
   src="https://tanstack.com/charts/catalog/embed/35-grouped-tooltip/?theme=system&height=480"
   title="Grouped x-axis focus and tooltip across multiple lines"
@@ -161,8 +178,8 @@ const pointDefinition = defineChart(definition, {
 })
 ```
 
-Pointer anchoring is useful when a dense mark has a large hit region. Keyboard
-focus falls back to the primary point:
+Pointer anchoring is useful when a dense mark has a large interactive
+primitive. Keyboard focus falls back to the primary point:
 
 ```ts
 const pointerDefinition = defineChart(definition, {
@@ -441,7 +458,9 @@ Do not supply a pointer-only strategy.
 
 Linear nearest-point search is deliberately small. For many independently
 focusable points, pass a `ChartSpatialIndexFactory` built with an optional
-spatial dependency. The host rebuilds the index when scene points change.
+spatial dependency. The factory also receives the resolved scene when it needs
+primitive bounds rather than point anchors. The host rebuilds the index when
+the scene changes.
 
 See [Large Data](./large-data.md) before adding an index: when many rows share
 the same pixels, a bounded representation is usually more useful than faster
diff --git a/docs/reference/custom-extensions.md b/docs/reference/custom-extensions.md
index 4a399cf7..50e05d09 100644
--- a/docs/reference/custom-extensions.md
+++ b/docs/reference/custom-extensions.md
@@ -195,9 +195,10 @@ for the contract.
 ## Spatial indexes
 
 `ChartSpatialIndexFactory` replaces the default linear pointer lookup without
-changing scene compilation. Build the index from supplied points and return
-the nearest point within the requested distance. The host recreates it when
-the scene or factory changes.
+changing scene compilation. Build a point-only index from its first argument,
+or use its second `scene` argument to index resolved primitive bounds. Return
+the nearest original point within the requested distance. The host recreates
+the index when the scene or factory changes.
 
 See [Spatial indexes](./focus-and-interaction.md#spatial-indexes). The
 appropriate granular spatial primitive can be brought through the boundary
diff --git a/docs/reference/focus-and-interaction.md b/docs/reference/focus-and-interaction.md
index 83669685..a9273aca 100644
--- a/docs/reference/focus-and-interaction.md
+++ b/docs/reference/focus-and-interaction.md
@@ -4,9 +4,10 @@ description: Configure pointer focus, grouped focus, keyboard navigation, native
 ---
 
 The DOM host and framework adapters provide point-level interaction from each
-mark's emitted `ChartPoint` values. The defaults cover nearest-point pointer
-focus, linear keyboard navigation, activation, and an optional native tooltip.
-Definitions own these policies; adapters only mount them and report events.
+mark's emitted `ChartPoint` values and rendered scene primitives. The defaults
+cover geometry-aware pointer focus, linear keyboard navigation, activation,
+and an optional native tooltip. Definitions own these policies; adapters only
+mount them and report events.
 
 ## Default behavior
 
@@ -32,28 +33,48 @@ normal tab-order participation while keeping keyboard handling enabled. Set
 When neither `focus` nor `spatialIndex` is supplied, pointer resolution has two
 stages:
 
-1. The topmost scene point whose `hitRegion` contains the pointer wins. Point
-   order follows paint order.
-2. If no region contains the pointer, `focusAffinity` ranks the fallback.
-   `x` and `y` compare distance from that axis boundary first and use complete
-   geometry distance to break ties; `xy` compares complete geometry distance;
-   `geometry` has no off-shape fallback.
+1. The topmost interactive scene primitive containing the pointer wins. The
+   resolver traverses the final scene in reverse paint order and applies nested
+   translations and clips.
+2. If no primitive contains the pointer, its `interaction.affinity` ranks the
+   fallback. `x` and `y` compare distance from that axis boundary first and use
+   complete geometry distance to break ties; `xy` compares complete geometry
+   distance; `geometry` has no off-shape fallback.
 
 `maxFocusDistance` applies to that primary boundary distance, not necessarily
-to the point used as the tooltip and keyboard anchor. Points without either
-field retain anchor-based two-dimensional distance.
-
-`ChartPoint.hitRegion` accepts painted rectangles, circles, and polygons.
-Built-in marks declare these natural defaults:
-
-| Mark                     | Hit region | Fallback |
-| ------------------------ | ---------- | -------- |
-| `barY`                   | Rectangle  | `x`      |
-| `barX`                   | Rectangle  | `y`      |
-| `lineY`, `areaY`         | None       | `x`      |
-| `rect`, `dot`, `hexagon` | Shape      | `xy`     |
-| `bandX`                  | Rectangle  | `x`      |
-| `bandY`                  | Rectangle  | `y`      |
+to the point used as the tooltip and keyboard anchor. A semantic point that is
+not attached to a scene primitive retains anchor-based two-dimensional
+distance.
+
+The primitive is the geometry source of truth: `rect` includes its rounded
+corners, `dot` uses its radius, `area` uses its polygon, and `polyline` and
+`rule` use their stroked paths. Its `interaction` attaches either one semantic
+point or the ordered points represented by a continuous primitive. Groups and
+labels cannot carry interaction metadata.
+
+Built-in marks attach these natural defaults:
+
+| Mark                     | Scene primitive       | Fallback |
+| ------------------------ | --------------------- | -------- |
+| `barY`                   | Rounded rectangle     | `x`      |
+| `barX`                   | Rounded rectangle     | `y`      |
+| `lineY`                  | Stroked polyline      | `x`      |
+| `areaY`                  | Filled area           | `x`      |
+| `areaX`                  | Filled area           | `y`      |
+| `rect`, `dot`, `hexagon` | Rect, circle, polygon | `xy`     |
+| `bandX`                  | Rounded rectangle     | `x`      |
+| `bandY`                  | Rounded rectangle     | `y`      |
+
+Facet layout rewrites the primitive's attached point references while leaving
+the primitive in local coordinates. The resolver therefore observes the same
+post-layout translations and clips as SVG and Canvas instead of maintaining a
+second geometry copy. Inline mark states similarly return a resolved scene to
+the host; during a transition, pointer selection intentionally follows that
+destination scene rather than interpolating a second hit-test scene.
+
+For curved `polyline` and `area` nodes, the current resolver uses the
+primitive's structured point geometry. Exact picking against an optional
+authored SVG path string remains a separate refinement.
 
 An explicit focus preset or custom strategy replaces this default resolver.
 
@@ -296,7 +317,7 @@ reports `null`; Enter and Space do nothing until a point is focused.
 
 ## Spatial indexes
 
-The default nearest-point lookup scans all interaction points. Dense charts can
+The default lookup scans the cached scene targets linearly. Dense charts can
 inject an index:
 
 ```ts
@@ -306,18 +327,21 @@ type ChartSpatialIndexFactory<
   TYValue extends ChartValue = ChartValue,
 > = (
   points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
+  scene: ChartScene<TDatum, TXValue, TYValue>,
 ) => ChartSpatialIndex<TDatum, TXValue, TYValue>
 ```
 
 The host rebuilds the index when the scene or definition changes. The index
-owns its search algorithm and must apply `maxDistance`.
+owns its search algorithm and must apply `maxDistance`. Existing point-only
+factories can ignore the second argument; geometry-aware indexes can traverse
+the resolved scene and use primitive bounds as their acceleration layer.
 Use the granular spatial primitive appropriate to the data; the boundary is
 described in [Scales and D3](../concepts/scales-and-d3.md).
 
-Supplying an index also replaces default hit-region containment and affinity
+Supplying an index also replaces default primitive containment and affinity
 ranking; the host does not add a linear safety scan after an indexed query. An
-index that wants identical geometry semantics should index the region bounds
-and perform exact shape checks on its candidates.
+index that wants identical geometry semantics should index scene-primitive
+bounds and perform exact shape checks on its candidates.
 
 A custom `focus` strategy takes precedence over `spatialIndex` for pointer
 resolution.
diff --git a/docs/reference/rendering-and-export.md b/docs/reference/rendering-and-export.md
index 58f53f5d..595be826 100644
--- a/docs/reference/rendering-and-export.md
+++ b/docs/reference/rendering-and-export.md
@@ -428,7 +428,10 @@ interface ChartSurface<
     clientX: number,
     clientY: number,
   ) => { x: number; y: number } | null
-  paintFocus: (focus: ChartFocusState<TDatum, TXValue, TYValue> | null) => void
+  paintFocus: (
+    focus: ChartFocusState<TDatum, TXValue, TYValue> | null,
+    pointer?: ChartTooltipPosition | null,
+  ) => ChartScene | void
   destroy: () => void
 }
 
@@ -458,7 +461,7 @@ interface ChartRenderer<
 | `ChartSurface.element`  | Expose the accessible, focusable root used by shared keyboard and focus handling                           |
 | `render()`              | Paint the complete scene and apply accessible name, class, tab index, ID prefix, and optional animation    |
 | `clientToScene()`       | Convert viewport client coordinates to scene coordinates, or return `null` when conversion is unavailable  |
-| `paintFocus()`          | Paint or clear the complete focus state: primary, group, source, and pinned status                         |
+| `paintFocus()`          | Paint or clear focus and optionally return the resolved destination scene used for subsequent pointer hits |
 | `destroy()`             | Release renderer-owned animation, observers, listeners, and resources                                      |
 
 `requestRender()` asks the shared host to rebuild and repaint on its next
@@ -467,6 +470,12 @@ animation frame; ordinary requests proceed only when responsive width changed.
 width or chart-option change, such as device-pixel ratio or resolved theme
 colors. Requests made before the same frame are coalesced.
 
+When focus activates inline mark-state geometry, return the resolved scene that
+the surface paints. The host uses that destination scene for subsequent
+pointer resolution while the renderer animates toward it. Returning `void`
+keeps the base scene as the interaction source and remains valid for renderers
+that do not resolve alternate scene geometry.
+
 The shared host continues to own runtime updates, responsive sizing, text
 measurement, focus resolution, keyboard behavior, native tooltips, selection,
 and callbacks. `ChartRendererRenderContext` reports the live `surface` instead
diff --git a/docs/reference/runtime-and-scene.md b/docs/reference/runtime-and-scene.md
index 20c2d51c..716f83d8 100644
--- a/docs/reference/runtime-and-scene.md
+++ b/docs/reference/runtime-and-scene.md
@@ -131,9 +131,12 @@ function findNearestPoint<
 ```
 
 Coordinates are in scene pixels. `maxDistance` defaults to `Infinity`.
-The function performs a linear scan of the scene's interaction points, using
-hit-region containment and mark affinity before anchor distance. For a large
-point set, supply a spatial index to the DOM or framework host; see
+The function caches a paint-ordered interaction target list for the scene,
+checks primitive containment first, and then applies each target's natural
+axis or geometric affinity. Scene traversal accumulates group translation and
+clipping, so the resolver and renderer consume the same post-layout tree.
+Semantic points not attached to primitives retain legacy anchor distance. For
+a large point set, supply a spatial index to the DOM or framework host; see
 [Focus and interaction](./focus-and-interaction.md#spatial-indexes).
 
 ## `ChartScene`
@@ -172,7 +175,8 @@ interface ChartScene<
 ## Scene nodes
 
 Every scene node has a stable `key`, optional `className`, optional
-`SceneStyle`, and optional `ariaHidden`.
+`SceneStyle`, and optional `ariaHidden`. Geometric primitives may also attach
+a `SceneInteraction`; groups and labels cannot.
 
 | `kind`     | Geometry                                                   |
 | ---------- | ---------------------------------------------------------- |
@@ -187,6 +191,29 @@ Every scene node has a stable `key`, optional `className`, optional
 `SceneStyle` supports fill, fill opacity, stroke, stroke opacity, stroke width,
 overall opacity, line cap, line join, and dash array.
 
+`SceneRect.inset` retains the resolved inset for absolute inline-state
+overrides. Its optional `insetAxis` is `x`, `y`, or `xy`; vertical and
+horizontal bars use only their categorical axis, while ordinary rectangles use
+both axes. Renderers consume the already-resolved rectangle geometry.
+
+```ts
+type SceneInteraction =
+  | {
+      point: ChartPoint
+      points?: never
+      affinity?: 'x' | 'y' | 'xy' | 'geometry'
+    }
+  | {
+      point?: never
+      points: readonly ChartPoint[]
+      affinity?: 'x' | 'y' | 'xy' | 'geometry'
+    }
+```
+
+Attach the exact point object returned in `MarkScene.points`. A continuous
+primitive can attach several points, allowing one rendered line or area to
+choose its nearest semantic sample without duplicating the primitive geometry.
+
 Custom marks should return the smallest honest scene tree and stable keys. The
 full initialization and render contracts are in
 [Custom extensions](./custom-extensions.md#custom-marks).
diff --git a/docs/reference/types.md b/docs/reference/types.md
index 7b5705e2..0a640106 100644
--- a/docs/reference/types.md
+++ b/docs/reference/types.md
@@ -137,10 +137,7 @@ The complete overloads and runtime rules are in
 | `MarkScene`             | Mark-owned scene nodes and optional interaction points                        |
 | `ChartScene`            | Complete renderer-neutral output                                              |
 | `ChartPoint`            | Typed interaction target                                                      |
-| `ChartHitRegion`        | Rectangle, circle, or polygon interaction geometry union                      |
-| `ChartRectHitRegion`    | Painted rectangular interaction bounds                                        |
-| `ChartCircleHitRegion`  | Painted circular interaction bounds                                           |
-| `ChartPolygonHitRegion` | Painted polygon interaction vertices                                          |
+| `SceneInteraction`      | Semantic point or points attached to a rendered scene primitive               |
 | `ChartTick`             | Semantic value, formatted label, and pixel position                           |
 | `ResolvedScale`         | Final positional scale                                                        |
 | `ResolvedColorScale`    | Final color scale                                                             |
@@ -231,9 +228,9 @@ See [DOM host](./dom-host.md) and
 | `ChartFocusSource`                    | Pointer, keyboard, programmatic, or restored source                    |
 | `ChartFocusFilter`                    | Focus-filtered mark matching configuration                             |
 | `ChartFocusMatch`                     | Primary, group, key, x, y, or series matching                          |
-| `ChartFocusAffinity`                  | Mark fallback axis after exact hit-region containment                  |
+| `ChartFocusAffinity`                  | Primitive fallback axis after exact geometry containment               |
 | `ChartSpatialIndex`                   | Nearest-point query                                                    |
-| `ChartSpatialIndexFactory`            | Builds an index from current scene points                              |
+| `ChartSpatialIndexFactory`            | Builds an index from current scene points and resolved scene           |
 | `ChartExtensionInput`                 | Generic bare-token or `{ use, ...options }` extension input            |
 | `ChartTooltipInput`                   | Tooltip extension token or configured extension options                |
 | `ChartTooltipExtensionToken`          | Environment-neutral contract implemented by host tooltip extensions    |
diff --git a/examples/sandbox/README.md b/examples/sandbox/README.md
index 9157f1ed..bfa484d1 100644
--- a/examples/sandbox/README.md
+++ b/examples/sandbox/README.md
@@ -9,10 +9,25 @@ The private sandbox contains two complementary development surfaces:
 ## Interaction geometry lab
 
 The lab compares legacy anchor-only focus with the current two-stage resolver:
-painted-shape containment first, then the mark's declared `x`, `y`, `xy`, or
-`geometry` fallback. Every chart keeps its source disclosure directly beneath
-the rendered result. Its final stress cases exercise 4,098 rectangles and
-2,050 polygons containing 13,318 vertices.
+scene-primitive containment in paint order first, then the primitive's `x`,
+`y`, `xy`, or `geometry` fallback. Facet and nested transform/clip cases verify
+post-layout traversal. Dedicated contracts contrast one-point default facet
+focus with explicit synchronized x and y cursors and exercise destination-scene
+picking while a bar animates in matched SVG and Canvas cards. Every chart names
+its renderer and keeps its source disclosure directly beneath the rendered
+result. The twenty-eight before/after families split evenly between SVG and
+Canvas. Built-in marks contribute their natural focus affinity automatically;
+four mixed-mark compositions combine vertical bars/lines/dots, horizontal
+bars/dots, areas/lines/dots, and cells/bubbles without a chart-wide affinity
+setting. The first three mixed compositions also add a third native grouped
+tooltip card: `group-x` for vertical bars/lines/points and areas, and `group-y`
+for horizontal bars/points. Those presets intentionally own nearest-axis
+selection as well as grouping; they are shown separately from the default
+containment-first card instead of implying that grouping is a tooltip-only
+switch. The remaining cases include grouped bars, dense scatter, hexbin cells,
+nested bubbles, a Sankey composition, plus faceted plain, grouped, stacked, and
+bubble geometry. The final stress cases exercise 4,098 rectangles and 2,050
+polygons containing 13,318 vertices.
 
 Add a focused case in `src/InteractionGeometryLab.tsx` when a distinct mark
 family or interaction shape exercises behavior not already represented. Keep
diff --git a/examples/sandbox/src/InteractionGeometryLab.test.ts b/examples/sandbox/src/InteractionGeometryLab.test.ts
index 72504988..66eb0950 100644
--- a/examples/sandbox/src/InteractionGeometryLab.test.ts
+++ b/examples/sandbox/src/InteractionGeometryLab.test.ts
@@ -1,10 +1,15 @@
 import { describe, expect, it } from 'vitest'
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { createChartScene } from '../../../packages/charts-core/src/scene'
-import { nearestPoint } from '../../../packages/charts-core/src/nearest'
-import type { ChartPoint } from '@tanstack/charts'
 import {
+  createChartScene,
+  findNearestPoint,
+} from '../../../packages/charts-core/src/scene'
+import type { ChartPoint, SceneNode } from '@tanstack/charts'
+import { focusX, focusY } from '@tanstack/charts/focus'
+import {
+  animatedDestinationDefinition,
+  facetFocusDefinitions,
   InteractionGeometryLab,
   proofCases,
   type ProofDatum,
@@ -13,11 +18,27 @@ import {
 describe('interaction geometry source disclosure', () => {
   it('renders contextual source beneath every before and after chart', () => {
     const markup = renderToStaticMarkup(createElement(InteractionGeometryLab))
+    const groupedProofs = proofCases.filter((proof) => proof.grouped)
 
     expect(markup.match(/class="hit-region-proof__source"/g)).toHaveLength(
-      proofCases.length * 2,
+      proofCases.length * 2 + groupedProofs.length + 5,
+    )
+    expect(groupedProofs).toHaveLength(3)
+    expect(proofCases).toHaveLength(28)
+    expect(
+      proofCases.filter((proof) => proof.renderer === 'canvas'),
+    ).toHaveLength(14)
+    expect(proofCases.filter((proof) => proof.renderer === 'svg')).toHaveLength(
+      14,
     )
-    expect(proofCases).toHaveLength(14)
+    expect(markup.match(/data-proof-renderer="canvas"/g)).toHaveLength(30)
+    expect(markup.match(/data-proof-renderer="svg"/g)).toHaveLength(29)
+    expect(markup.match(/data-animation-renderer=/g)).toHaveLength(2)
+    expect(markup).toContain('data-animation-renderer="svg"')
+    expect(markup).toContain('data-animation-renderer="canvas"')
+    expect(markup).toContain('class="ts-chart-canvas__scene"')
+    expect(markup).toContain('&lt;CanvasChart')
+    expect(markup).toContain('&lt;Chart')
     expect(markup).toContain('const stackedSeries = [')
     expect(markup).toContain('polarGuideMark(&#x27;polar-sector-guides&#x27;)')
     expect(markup).toContain(
@@ -29,14 +50,138 @@ describe('interaction geometry source disclosure', () => {
     expect(markup).toContain(
       'const afterDefinition = interactiveDefinition(verticalBase)',
     )
-    expect(markup).toContain('focusAffinity: &#x27;geometry&#x27;')
     expect(markup).toContain(
-      'hitRegion: { kind: &#x27;polygon&#x27;, points: polygon }',
+      'interaction: { point, affinity: &#x27;geometry&#x27; }',
+    )
+    expect(markup).toContain('facetedBarsDefinition(&#x27;x&#x27;)')
+    expect(markup).toContain('facetedBarsDefinition(&#x27;y&#x27;)')
+    expect(markup).toContain('{ match: &#x27;x&#x27; }')
+    expect(markup).toContain('{ match: &#x27;y&#x27; }')
+    expect(markup).toContain('layout: group({ padding: 0.16 })')
+    expect(markup).toContain('facet(facetedGroupedBars, {')
+    expect(markup).toContain('facet(facetedStackedBars, {')
+    expect(markup).toContain('facet(facetedBubbles, {')
+    expect(markup).toContain('dot(scatterRows, {')
+    expect(markup).toContain('hexagon(hexbinCells, {')
+    expect(markup).toContain('dot(nestedBubbles, {')
+    expect(markup).toContain('barY(mixedVerticalBars, {')
+    expect(markup).toContain('barX(mixedHorizontalBars, {')
+    expect(markup).toContain('areaY(mixedAreaRows, {')
+    expect(markup).toContain('rect(mixedCell, {')
+    expect(markup).toContain('bar x · line x · dot xy')
+    expect(markup).toContain('bar y · dot xy')
+    expect(markup).toContain('area x · line x · dot xy')
+    expect(markup).toContain('rect xy · dot xy · paint order')
+    expect(markup.match(/data-proof-group-result=/g)).toHaveLength(3)
+    expect(markup).toContain(
+      'groupedInteractiveDefinition(mixedVerticalBase, &#x27;x&#x27;)',
+    )
+    expect(markup).toContain(
+      'groupedInteractiveDefinition(mixedHorizontalBase, &#x27;y&#x27;)',
+    )
+    expect(markup).toContain(
+      'groupedInteractiveDefinition(mixedAreaBase, &#x27;x&#x27;)',
+    )
+    expect(markup).toContain(
+      'normalizedPolygonMark(&#x27;sankey&#x27;, sankey)',
+    )
+    expect(markup).toContain(
+      'transition: { duration: 700, easing: &#x27;ease-out&#x27; }',
     )
     expect(markup).not.toContain('packages/charts-core/src/nearest.ts')
   })
 })
 
+describe('intentional interaction contracts', () => {
+  it('keeps grouped tooltip focus explicit on the mixed x and y examples', () => {
+    const groupedProofs = proofCases.filter(
+      (
+        proof,
+      ): proof is typeof proof & {
+        grouped: NonNullable<typeof proof.grouped>
+      } => proof.grouped !== undefined,
+    )
+
+    expect(groupedProofs.map((proof) => proof.id)).toEqual([
+      'mixed-vertical-bars-line-dots',
+      'mixed-horizontal-bars-dots',
+      'mixed-area-line-dots',
+    ])
+
+    for (const proof of groupedProofs) {
+      const scene = createChartScene(proof.grouped.definition, {
+        width: 520,
+        height: 230,
+      })
+      const probe = proof.probe(scene)
+      expect(probe).not.toBeNull()
+      if (!probe) continue
+
+      const strategy = proof.grouped.axis === 'x' ? focusX : focusY
+      const points = strategy.resolve(scene.points, probe.x, probe.y, 48)
+
+      expect(proof.grouped.definition.focus).toBe(
+        proof.grouped.axis === 'x' ? 'group-x' : 'group-y',
+      )
+      expect(points.map((point) => point.datum.label)).toEqual(
+        proof.grouped.expected,
+      )
+    }
+  })
+
+  it('keeps default, x-sync, and y-sync facet focus separate', () => {
+    const primary = createChartScene(facetFocusDefinitions.primary, {
+      width: 520,
+      height: 230,
+    })
+    const synchronizedX = createChartScene(facetFocusDefinitions.x, {
+      width: 520,
+      height: 230,
+    })
+    const synchronizedY = createChartScene(facetFocusDefinitions.y, {
+      width: 520,
+      height: 230,
+    })
+
+    const primaryLayers = flatten(primary.nodes).filter(
+      (node): node is Extract<SceneNode, { kind: 'group' }> =>
+        node.kind === 'group' && node.focus !== undefined,
+    )
+    const synchronizedXLayers = flatten(synchronizedX.nodes).filter(
+      (node): node is Extract<SceneNode, { kind: 'group' }> =>
+        node.kind === 'group' && node.focus !== undefined,
+    )
+    const synchronizedYLayers = flatten(synchronizedY.nodes).filter(
+      (node): node is Extract<SceneNode, { kind: 'group' }> =>
+        node.kind === 'group' && node.focus !== undefined,
+    )
+    expect(primaryLayers).toHaveLength(1)
+    expect(primaryLayers.every((node) => node.focus?.match === 'primary')).toBe(
+      true,
+    )
+    expect(synchronizedXLayers).toHaveLength(2)
+    expect(synchronizedXLayers.every((node) => node.focus?.match === 'x')).toBe(
+      true,
+    )
+    expect(synchronizedYLayers).toHaveLength(2)
+    expect(synchronizedYLayers.every((node) => node.focus?.match === 'y')).toBe(
+      true,
+    )
+  })
+
+  it('keeps the animated case on a deliberately tight fallback threshold', () => {
+    const scene = createChartScene(animatedDestinationDefinition, {
+      width: 1_120,
+      height: 270,
+    })
+    const middle = findRect(scene.nodes, 'animated-middle')
+
+    expect(animatedDestinationDefinition.maxFocusDistance).toBe(12)
+    expect(middle).not.toBeNull()
+    expect(middle?.node.width).toBeLessThan(250)
+  })
+})
+
 describe('interaction geometry proof gallery', () => {
   for (const proof of proofCases) {
     it(`${proof.id} demonstrates its before and after result`, () => {
@@ -49,7 +194,7 @@ describe('interaction geometry proof gallery', () => {
       if (!probe) return
 
       const before = legacyNearest(scene.points, probe.x, probe.y, 48)
-      const after = nearestPoint(scene.points, probe.x, probe.y, 48)
+      const after = findNearestPoint(scene, probe.x, probe.y, 48)
 
       expect(before?.datum.label ?? 'Nothing focused yet').toBe(
         proof.beforeExpected,
@@ -68,30 +213,34 @@ describe('interaction geometry proof gallery', () => {
     if (!proof) return
 
     const scene = createChartScene(proof.after, { width: 520, height: 230 })
-    const top = scene.points.find((point) => point.datum.id === 'october-other')
-    const bottom = scene.points.find(
-      (point) => point.datum.id === 'october-disease',
-    )
-    expect(top?.hitRegion?.kind).toBe('rect')
-    expect(bottom?.hitRegion?.kind).toBe('rect')
-    if (top?.hitRegion?.kind !== 'rect' || bottom?.hitRegion?.kind !== 'rect')
-      return
+    const top = findRect(scene.nodes, 'october-other')
+    const bottom = findRect(scene.nodes, 'october-disease')
+    expect(top).not.toBeNull()
+    expect(bottom).not.toBeNull()
+    if (!top || !bottom) return
 
-    const above = Math.min(
-      top.hitRegion.y,
-      top.hitRegion.y + top.hitRegion.height,
-    )
-    const below = Math.max(
-      bottom.hitRegion.y,
-      bottom.hitRegion.y + bottom.hitRegion.height,
-    )
+    const above =
+      top.offsetY + Math.min(top.node.y, top.node.y + top.node.height)
+    const below =
+      bottom.offsetY +
+      Math.max(bottom.node.y, bottom.node.y + bottom.node.height)
 
-    expect(nearestPoint(scene.points, top.x, above - 12, 48)?.datum.id).toBe(
-      'october-other',
-    )
-    expect(nearestPoint(scene.points, bottom.x, below + 12, 48)?.datum.id).toBe(
-      'october-disease',
-    )
+    expect(
+      findNearestPoint(
+        scene,
+        scene.points.find((point) => point.datum.id === 'october-other')!.x,
+        above - 12,
+        48,
+      )?.datum.id,
+    ).toBe('october-other')
+    expect(
+      findNearestPoint(
+        scene,
+        scene.points.find((point) => point.datum.id === 'october-disease')!.x,
+        below + 12,
+        48,
+      )?.datum.id,
+    ).toBe('october-disease')
   })
 
   it('keeps the large rectangle and polygon stress fixtures intact', () => {
@@ -117,18 +266,54 @@ describe('interaction geometry proof gallery', () => {
     expect(rectangleScene.points).toHaveLength(4_098)
     expect(polygonScene.points).toHaveLength(2_050)
     expect(
-      polygonScene.points.reduce(
-        (total, point) =>
+      flatten(polygonScene.nodes).reduce(
+        (total, node) =>
           total +
-          (point.hitRegion?.kind === 'polygon'
-            ? point.hitRegion.points.length
-            : 0),
+          (node.kind === 'area' && node.interaction ? node.points.length : 0),
         0,
       ),
     ).toBe(13_318)
   })
 })
 
+function flatten(nodes: readonly SceneNode[]): SceneNode[] {
+  return nodes.flatMap((node) =>
+    node.kind === 'group' ? [node, ...flatten(node.children)] : [node],
+  )
+}
+
+function findRect(
+  nodes: readonly SceneNode[],
+  datumId: string,
+  offsetX = 0,
+  offsetY = 0,
+): {
+  node: Extract<SceneNode, { kind: 'rect' }>
+  offsetX: number
+  offsetY: number
+} | null {
+  for (const node of nodes) {
+    if (node.kind === 'group') {
+      const target = findRect(
+        node.children,
+        datumId,
+        offsetX + (node.translateX ?? 0),
+        offsetY + (node.translateY ?? 0),
+      )
+      if (target) return target
+      continue
+    }
+    if (node.kind !== 'rect' || !node.interaction) continue
+    const matches = node.interaction.point
+      ? (node.interaction.point.datum as ProofDatum).id === datumId
+      : node.interaction.points.some(
+          (point) => (point.datum as ProofDatum).id === datumId,
+        )
+    if (matches) return { node, offsetX, offsetY }
+  }
+  return null
+}
+
 function legacyNearest<TDatum>(
   points: readonly ChartPoint<TDatum, number, number>[],
   x: number,
diff --git a/examples/sandbox/src/InteractionGeometryLab.tsx b/examples/sandbox/src/InteractionGeometryLab.tsx
index f48340a0..00c9ffc4 100644
--- a/examples/sandbox/src/InteractionGeometryLab.tsx
+++ b/examples/sandbox/src/InteractionGeometryLab.tsx
@@ -1,23 +1,30 @@
 import * as React from 'react'
 import {
   areaY,
+  bandX,
+  bandY,
   barX,
   barY,
   createMark,
   defineChart,
   dot,
+  facet,
+  group,
+  hexagon,
+  lineY,
   rect,
   stack,
+  whenFocused,
   type ChartFocusAffinity,
   type ChartFocusStrategy,
   type ChartPoint,
-  type ChartRenderContext,
   type ChartScene,
   type SceneNode,
   type StaticChartDefinition,
 } from '@tanstack/charts'
 import { tooltip } from '@tanstack/charts/tooltip'
 import { Chart } from '@tanstack/react-charts'
+import { Chart as CanvasChart } from '@tanstack/react-charts/canvas'
 import { scaleBand, scaleLinear } from 'd3-scale'
 import proofSource from './InteractionGeometryLab.tsx?raw'
 
@@ -32,6 +39,7 @@ export interface ProofDatum {
   y2?: number
   value?: number
   series?: string
+  panel?: string
   radius?: number
   polygon?: readonly (readonly [number, number])[]
   probe?: readonly [number, number]
@@ -42,6 +50,8 @@ interface ProofCase {
   id: string
   title: string
   affinity: ChartFocusAffinity
+  affinityLabel?: string
+  renderer: ProofRenderer
   stress?: {
     geometryLabel: string
     height: number
@@ -52,11 +62,35 @@ interface ProofCase {
   source: string
   before: StaticChartDefinition<ProofDatum, number, number>
   after: StaticChartDefinition<ProofDatum, number, number>
+  grouped?: {
+    axis: 'x' | 'y'
+    expected: readonly string[]
+    definition: StaticChartDefinition<ProofDatum, number, number>
+  }
   probe: (
     scene: ChartScene<ProofDatum, number, number>,
   ) => { x: number; y: number } | null
 }
 
+type ProofRenderer = 'svg' | 'canvas'
+
+const canvasProofIds = new Set<string>([
+  'grouped-horizontal-bars',
+  'line-area',
+  'mixed-horizontal-bars-dots',
+  'mixed-area-line-dots',
+  'scatterplot',
+  'hexbin',
+  'nested-bubbles',
+  'cells',
+  'polar-sectors',
+  'sankey',
+  'faceted-stacked-bars',
+  'translated-clipped',
+  'dense-rectangles',
+  'complex-polygons',
+])
+
 const legacyPointFocus: ChartFocusStrategy<ProofDatum, number, number> = {
   resolve(points, x, y, maxDistance) {
     let nearest: ChartPoint<ProofDatum, number, number> | undefined
@@ -80,6 +114,160 @@ const legacyPointFocus: ChartFocusStrategy<ProofDatum, number, number> = {
   },
 }
 
+// source:faceted-bars:start
+const facetedBars = ['North', 'South'].flatMap((panel) =>
+  [72, 84, 90, panel === 'North' ? 240 : 105, 78, 88].map((value, x) => ({
+    id:
+      panel === 'North' && x === 3
+        ? 'north-tall'
+        : panel === 'North' && x === 2
+          ? 'north-neighbor'
+          : `${panel.toLowerCase()}-${x}`,
+    label:
+      panel === 'North' && x === 3
+        ? 'North tall bar · 240'
+        : panel === 'North' && x === 2
+          ? 'North neighbor · 90'
+          : `${panel} bar ${x + 1} · ${value}`,
+    panel,
+    x,
+    y: value,
+  })),
+) satisfies ProofDatum[]
+
+type FacetSyncAxis = 'x' | 'y'
+
+function facetedBarsDefinition(syncAxis?: FacetSyncAxis) {
+  return baseDefinition(
+    [
+      facet(facetedBars, {
+        id: 'faceted-bars',
+        by: 'panel',
+        columns: 2,
+        gap: 12,
+        axes: 'cell',
+        chart: (rows) => ({
+          marks:
+            syncAxis === 'x'
+              ? [
+                  whenFocused(
+                    bandX(rows, {
+                      id: 'facet-x-cursor',
+                      x: 'x',
+                      key: 'id',
+                      fill: '#d4d4d4',
+                      fillOpacity: 0.55,
+                      inset: 4,
+                    }),
+                    { match: 'x' },
+                  ),
+                  barY(rows, {
+                    id: 'facet-bars',
+                    x: 'x',
+                    y: 'y',
+                    key: 'id',
+                    inset: 5,
+                  }),
+                ]
+              : syncAxis === 'y'
+                ? [
+                    whenFocused(
+                      bandY(rows, {
+                        id: 'facet-y-cursor',
+                        y: 'y',
+                        key: 'id',
+                        fill: '#d4d4d4',
+                        fillOpacity: 0.55,
+                        inset: -4,
+                      }),
+                      { match: 'y' },
+                    ),
+                    barY(rows, {
+                      id: 'facet-bars',
+                      x: 'x',
+                      y: 'y',
+                      key: 'id',
+                      inset: 5,
+                    }),
+                  ]
+                : [
+                    barY(rows, {
+                      id: 'facet-bars',
+                      x: 'x',
+                      y: 'y',
+                      key: 'id',
+                      inset: 5,
+                    }),
+                  ],
+          x: { scale: scaleBand<number>().domain([0, 1, 2, 3, 4, 5]) },
+          y: { scale: scaleLinear().domain([0, 260]) },
+          guides: false,
+          margin: 0,
+          clip: true,
+        }),
+      }),
+    ],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+}
+
+const facetedBase = facetedBarsDefinition()
+const synchronizedXFacetedBase = facetedBarsDefinition('x')
+const synchronizedYFacetedBase = facetedBarsDefinition('y')
+// source:faceted-bars:end
+
+// source:animated-destination:start
+const animatedBars = [
+  { id: 'animated-left', label: 'Left bar · 120', x: 0, y: 120 },
+  { id: 'animated-middle', label: 'Expanding bar · 210', x: 1, y: 210 },
+  { id: 'animated-right', label: 'Right bar · 150', x: 2, y: 150 },
+] satisfies ProofDatum[]
+
+const animatedDestinationBase = baseDefinition(
+  [
+    barY(animatedBars, {
+      id: 'animated-bars',
+      x: 'x',
+      y: 'y',
+      key: 'id',
+      inset: 62,
+      radius: 4,
+      states: [
+        {
+          when: { focus: 'primary' },
+          style: { inset: 8, radius: 10, fill: '#171717' },
+          transition: { duration: 700, easing: 'ease-out' },
+        },
+      ],
+    }),
+  ],
+  scaleBand<number>().domain([0, 1, 2]).padding(0.04),
+  scaleLinear().domain([0, 240]),
+)
+
+export const animatedDestinationDefinition = defineChart(
+  animatedDestinationBase,
+  {
+    maxFocusDistance: 12,
+    animate: false,
+    tooltip: {
+      use: tooltip,
+      className: 'hit-region-proof__tooltip',
+      sticky: false,
+      placement: ['top', 'right', 'left', 'bottom'],
+      format: (point) => point.datum.label,
+    },
+  },
+)
+// source:animated-destination:end
+
+export const facetFocusDefinitions = {
+  primary: interactiveDefinition(facetedBase),
+  x: interactiveDefinition(synchronizedXFacetedBase),
+  y: interactiveDefinition(synchronizedYFacetedBase),
+}
+
 export const proofCases = createProofCases()
 
 export function InteractionGeometryLab() {
@@ -89,13 +277,26 @@ export function InteractionGeometryLab() {
         <h1>Interaction geometry</h1>
         <p>
           Each comparison uses the same pointer position and 48px threshold.
-          Before measures from a mark’s anchor point. After tests its painted
-          shape first, then uses the mark’s natural interaction axis. The final
-          two comparisons scale that contract to thousands of regions.
+          Before measures from a mark’s anchor point. After traverses the final
+          rendered scene in paint order, tests its primitive first, then uses
+          its natural interaction axis. Facets, nested transforms, and clips
+          prove that interaction follows layout without copied hit bounds. Every
+          card names its renderer, the proof families are split evenly between
+          SVG and Canvas, the first two sections make facet focus scope, axis
+          synchronization, and destination-scene animation explicit, and the
+          final comparisons scale the geometry contract to thousands of shapes.
+          Built-in marks attach their natural affinity automatically; mixed-mark
+          charts therefore resolve each rendered primitive independently without
+          a chart-level affinity setting. Selected mixed cases add a third
+          grouped-focus card: it uses the existing group-x or group-y preset to
+          return every series at the shared axis value and render them as native
+          tooltip rows.
         </p>
       </header>
 
       <div className="hit-region-proof__gallery">
+        <FacetFocusModes />
+        <AnimatedDestinationCase />
         {proofCases.map((proof) => (
           <section
             className={`hit-region-proof__case${proof.stress ? ' hit-region-proof__case--stress' : ''}`}
@@ -105,20 +306,27 @@ export function InteractionGeometryLab() {
             <header className="hit-region-proof__case-header">
               <h2>{proof.title}</h2>
               <code>
-                {proof.stress
-                  ? `${proof.stress.geometryLabel} · fallback: ${proof.affinity}`
-                  : `fallback: ${proof.affinity}`}
+                {`${proof.renderer} · ${
+                  proof.stress
+                    ? `${proof.stress.geometryLabel} · ${proof.affinityLabel ?? `fallback: ${proof.affinity}`}`
+                    : (proof.affinityLabel ?? `fallback: ${proof.affinity}`)
+                }`}
               </code>
             </header>
             <p className="hit-region-proof__case-description">
               {proof.explanation}
             </p>
             <div
-              className="hit-region-proof__grid"
-              aria-label={`${proof.title} before and after`}
+              className={`hit-region-proof__grid${proof.grouped ? ' hit-region-proof__grid--three' : ''}`}
+              aria-label={
+                proof.grouped
+                  ? `${proof.title} before, after, and grouped focus`
+                  : `${proof.title} before and after`
+              }
             >
               <ProofChart proof={proof} mode="before" />
               <ProofChart proof={proof} mode="after" />
+              {proof.grouped ? <GroupedProofChart proof={proof} /> : null}
             </div>
           </section>
         ))}
@@ -127,6 +335,188 @@ export function InteractionGeometryLab() {
   )
 }
 
+function FacetFocusModes() {
+  return (
+    <section
+      className="hit-region-proof__case"
+      data-interaction-contract="facet-focus"
+    >
+      <header className="hit-region-proof__case-header">
+        <h2>Facet focus is explicit</h2>
+        <code>selection: 1 datum</code>
+      </header>
+      <p className="hit-region-proof__case-description">
+        Default focus paints only the selected scene point. Focus marks with{' '}
+        <code>match: 'x'</code> or <code>match: 'y'</code> deliberately mirror a
+        vertical or horizontal cursor band across matching facets while the
+        tooltip and callback still report one primary datum. Hover a final 88
+        bar to see either axis synchronize across both panels.
+      </p>
+      <div
+        className="hit-region-proof__grid hit-region-proof__grid--three"
+        aria-label="Default, x-synchronized, and y-synchronized facet focus"
+      >
+        <FacetFocusChart mode="primary" />
+        <FacetFocusChart mode="x" />
+        <FacetFocusChart mode="y" />
+      </div>
+    </section>
+  )
+}
+
+function FacetFocusChart({
+  mode,
+}: {
+  mode: keyof typeof facetFocusDefinitions
+}) {
+  const [focused, setFocused] = React.useState<ProofDatum | null>(null)
+  const syncAxis = mode === 'primary' ? null : mode
+  const source = React.useMemo(
+    () =>
+      [
+        sourceSection('faceted-bars'),
+        `const definition = interactiveDefinition(\n  facetedBarsDefinition(${syncAxis ? `'${syncAxis}'` : ''}),\n)`,
+      ].join('\n\n'),
+    [syncAxis],
+  )
+  const onFocusChange = React.useCallback(
+    (point: ChartPoint<ProofDatum, number, number> | null) => {
+      setFocused(point?.datum ?? null)
+    },
+    [],
+  )
+
+  return (
+    <article className="hit-region-proof__card" data-facet-focus-chart={mode}>
+      <div className="hit-region-proof__card-header">
+        <span className="hit-region-proof__badge">
+          {syncAxis ? `opt-in ${syncAxis} sync · svg` : 'default primary · svg'}
+        </span>
+        <span className="hit-region-proof__distance">48px</span>
+      </div>
+      <div className="hit-region-proof__chart">
+        <Chart
+          definition={facetFocusDefinitions[mode]}
+          height={230}
+          initialWidth={520}
+          ariaLabel={
+            syncAxis
+              ? `Faceted bars with synchronized ${syncAxis} cursor`
+              : 'Faceted bars with primary focus'
+          }
+          onFocusChange={onFocusChange}
+        />
+      </div>
+      <dl className="hit-region-proof__result">
+        <div>
+          <dt>Selected datum</dt>
+          <dd data-facet-focus-result={mode}>
+            {focused?.label ?? 'Nothing focused yet'}
+          </dd>
+        </div>
+        <div>
+          <dt>Focus presentation</dt>
+          <dd>
+            {syncAxis
+              ? `${syncAxis} band in matching facets`
+              : 'one primary marker'}
+          </dd>
+        </div>
+      </dl>
+      <SourceDisclosure source={source} label={`${mode} · svg`} />
+    </article>
+  )
+}
+
+function AnimatedDestinationCase() {
+  return (
+    <section
+      className="hit-region-proof__case"
+      data-interaction-contract="animated-destination"
+    >
+      <header className="hit-region-proof__case-header">
+        <h2>Animated destination geometry</h2>
+        <code>svg + canvas · destination scene · 700ms</code>
+      </header>
+      <p className="hit-region-proof__case-description">
+        Hover a narrow bar, then slide sideways into the width it expands to.
+        Picking switches to the resolved destination scene immediately in both
+        renderers. SVG interpolates element attributes while Canvas crossfades
+        painted buffers, so this deliberately tests their shared destination
+        contract rather than claiming exact picking against every intermediate
+        frame.
+      </p>
+      <div
+        className="hit-region-proof__grid"
+        aria-label="Animated destination geometry in SVG and Canvas"
+      >
+        <AnimatedDestinationChart renderer="svg" />
+        <AnimatedDestinationChart renderer="canvas" />
+      </div>
+    </section>
+  )
+}
+
+function AnimatedDestinationChart({ renderer }: { renderer: ProofRenderer }) {
+  const [focused, setFocused] = React.useState<ProofDatum | null>(null)
+  const source = React.useMemo(
+    () =>
+      [
+        sourceSection('animated-destination'),
+        chartComponentSource(renderer, 'animatedDestinationDefinition'),
+      ].join('\n\n'),
+    [renderer],
+  )
+  const onFocusChange = React.useCallback(
+    (point: ChartPoint<ProofDatum, number, number> | null) => {
+      setFocused(point?.datum ?? null)
+    },
+    [],
+  )
+  const chartProps = {
+    definition: animatedDestinationDefinition,
+    height: 270,
+    initialWidth: 520,
+    ariaLabel: `Bars expanding to focused destination geometry in ${renderer.toUpperCase()}`,
+    onFocusChange,
+  }
+
+  return (
+    <article
+      className="hit-region-proof__card hit-region-proof__card--animation"
+      data-animation-chart="destination-scene"
+      data-animation-renderer={renderer}
+    >
+      <div className="hit-region-proof__card-header">
+        <span className="hit-region-proof__badge">
+          interactive · {renderer}
+        </span>
+        <span className="hit-region-proof__distance">12px</span>
+      </div>
+      <div className="hit-region-proof__chart">
+        {renderer === 'canvas' ? (
+          <CanvasChart {...chartProps} />
+        ) : (
+          <Chart {...chartProps} />
+        )}
+      </div>
+      <dl className="hit-region-proof__result">
+        <div>
+          <dt>Expected</dt>
+          <dd>Focus survives in expanded-only area</dd>
+        </div>
+        <div>
+          <dt>Actually focused</dt>
+          <dd data-animation-focus-result={renderer}>
+            {focused?.label ?? 'Nothing focused yet'}
+          </dd>
+        </div>
+      </dl>
+      <SourceDisclosure source={source} label={`animated · ${renderer}`} />
+    </article>
+  )
+}
+
 function SourceIcon() {
   return (
     <svg aria-hidden="true" viewBox="0 0 16 16">
@@ -146,8 +536,14 @@ function ProofChart({
   const [probe, setProbe] = React.useState<{ x: number; y: number } | null>(
     null,
   )
+  const onFocusChange = React.useCallback(
+    (point: ChartPoint<ProofDatum, number, number> | null) => {
+      setFocused(point?.datum ?? null)
+    },
+    [],
+  )
   const onRender = React.useCallback(
-    (context: ChartRenderContext<ProofDatum, number, number>) => {
+    (context: { scene: ChartScene<ProofDatum, number, number> }) => {
       const next = proof.probe(context.scene)
       if (!next) return
       setProbe((current) =>
@@ -161,26 +557,34 @@ function ProofChart({
   const expected =
     mode === 'before' ? proof.beforeExpected : proof.afterExpected
   const actual = focused?.label ?? 'Nothing focused yet'
+  const chartProps = {
+    definition: mode === 'before' ? proof.before : proof.after,
+    height: proof.stress?.height ?? 230,
+    initialWidth: proof.stress ? 1120 : 520,
+    ariaLabel: `${proof.title}: ${mode} in ${proof.renderer.toUpperCase()}`,
+    onFocusChange,
+    onRender,
+  }
 
   return (
     <article
       className={`hit-region-proof__card hit-region-proof__card--${mode}`}
       data-proof-chart={`${proof.id}-${mode}`}
+      data-proof-renderer={proof.renderer}
     >
       <div className="hit-region-proof__card-header">
-        <span className="hit-region-proof__badge">{mode}</span>
+        <span className="hit-region-proof__badge">
+          {mode} · {proof.renderer}
+        </span>
         <span className="hit-region-proof__distance">48px</span>
       </div>
 
       <div className="hit-region-proof__chart">
-        <Chart
-          definition={mode === 'before' ? proof.before : proof.after}
-          height={proof.stress?.height ?? 230}
-          initialWidth={proof.stress ? 1120 : 520}
-          ariaLabel={`${proof.title}: ${mode}`}
-          onFocusChange={(point) => setFocused(point?.datum ?? null)}
-          onRender={onRender}
-        />
+        {proof.renderer === 'canvas' ? (
+          <CanvasChart {...chartProps} />
+        ) : (
+          <Chart {...chartProps} />
+        )}
         {probe ? (
           <div
             className="hit-region-proof__probe"
@@ -209,6 +613,112 @@ function ProofChart({
   )
 }
 
+function GroupedProofChart({ proof }: { proof: ProofCase }) {
+  const grouped = proof.grouped
+  const [primary, setPrimary] = React.useState<ProofDatum | null>(null)
+  const [focusedGroup, setFocusedGroup] = React.useState<
+    readonly ChartPoint<ProofDatum, number, number>[]
+  >([])
+  const [probe, setProbe] = React.useState<{ x: number; y: number } | null>(
+    null,
+  )
+  const onFocusChange = React.useCallback(
+    (point: ChartPoint<ProofDatum, number, number> | null) => {
+      setPrimary(point?.datum ?? null)
+    },
+    [],
+  )
+  const onFocusGroupChange = React.useCallback(
+    (points: readonly ChartPoint<ProofDatum, number, number>[]) => {
+      setFocusedGroup(points)
+    },
+    [],
+  )
+  const onRender = React.useCallback(
+    (context: { scene: ChartScene<ProofDatum, number, number> }) => {
+      const next = proof.probe(context.scene)
+      if (!next) return
+      setProbe((current) =>
+        current && current.x === next.x && current.y === next.y
+          ? current
+          : next,
+      )
+    },
+    [proof],
+  )
+
+  if (!grouped) return null
+
+  const chartProps = {
+    definition: grouped.definition,
+    height: proof.stress?.height ?? 230,
+    initialWidth: proof.stress ? 1120 : 520,
+    ariaLabel: `${proof.title}: grouped ${grouped.axis.toUpperCase()} focus in ${proof.renderer.toUpperCase()}`,
+    onFocusChange,
+    onFocusGroupChange,
+    onRender,
+  }
+  const actual = focusedGroup.length
+    ? focusedGroup
+        .map(
+          (point) =>
+            `${point.groupLabel}: ${grouped.axis === 'x' ? point.yValue : point.xValue}`,
+        )
+        .join(' · ')
+    : 'Nothing focused yet'
+
+  return (
+    <article
+      className="hit-region-proof__card hit-region-proof__card--grouped"
+      data-proof-chart={`${proof.id}-group-${grouped.axis}`}
+      data-proof-renderer={proof.renderer}
+    >
+      <div className="hit-region-proof__card-header">
+        <span className="hit-region-proof__badge">
+          group-{grouped.axis} · {proof.renderer}
+        </span>
+        <span className="hit-region-proof__distance">48px</span>
+      </div>
+
+      <div className="hit-region-proof__chart">
+        {proof.renderer === 'canvas' ? (
+          <CanvasChart {...chartProps} />
+        ) : (
+          <Chart {...chartProps} />
+        )}
+        {probe ? (
+          <div
+            className="hit-region-proof__probe"
+            data-proof-probe={`${proof.id}-group-${grouped.axis}`}
+            style={{ left: probe.x, top: probe.y }}
+            aria-hidden="true"
+          >
+            <span />
+          </div>
+        ) : null}
+      </div>
+
+      <dl className="hit-region-proof__result">
+        <div>
+          <dt>Primary point</dt>
+          <dd>{primary?.label ?? 'Nothing focused yet'}</dd>
+        </div>
+        <div>
+          <dt>Grouped points</dt>
+          <dd data-proof-group-result={`${proof.id}-${grouped.axis}`}>
+            {actual}
+          </dd>
+        </div>
+      </dl>
+
+      <SourceDisclosure
+        source={sourceForGrouped(proof)}
+        label={`group-${grouped.axis} · ${proof.renderer}`}
+      />
+    </article>
+  )
+}
+
 function ChartSourceDisclosure({
   proof,
   mode,
@@ -216,8 +726,23 @@ function ChartSourceDisclosure({
   proof: ProofCase
   mode: 'before' | 'after'
 }) {
-  const source = sourceForMode(proof.source, mode)
+  const source = React.useMemo(
+    () => sourceForMode(proof.source, mode, proof.renderer),
+    [mode, proof.renderer, proof.source],
+  )
 
+  return (
+    <SourceDisclosure source={source} label={`${mode} · ${proof.renderer}`} />
+  )
+}
+
+function SourceDisclosure({
+  source,
+  label,
+}: {
+  source: string
+  label: string
+}) {
   return (
     <details className="hit-region-proof__source">
       <summary>
@@ -226,7 +751,7 @@ function ChartSourceDisclosure({
           Source
         </span>
         <span className="hit-region-proof__source-meta">
-          {lineCount(source).toLocaleString('en-US')} lines · {mode}
+          {lineCount(source).toLocaleString('en-US')} lines · {label}
         </span>
       </summary>
       <pre>
@@ -236,22 +761,54 @@ function ChartSourceDisclosure({
   )
 }
 
-function sourceForMode(source: string, mode: 'before' | 'after') {
+function sourceForMode(
+  source: string,
+  mode: 'before' | 'after',
+  renderer: ProofRenderer,
+) {
   const baseName = /const (\w+Base)\s*=/.exec(source)?.[1] ?? 'base'
   const focus = mode === 'before' ? ', legacyPointFocus' : ''
+  const helpers = sourceHelpers(source)
+  return [
+    source,
+    ...helpers,
+    `const ${mode}Definition = interactiveDefinition(${baseName}${focus})`,
+    chartComponentSource(renderer, `${mode}Definition`),
+  ].join('\n\n')
+}
+
+function sourceForGrouped(proof: ProofCase) {
+  if (!proof.grouped) return proof.source
+  const baseName = /const (\w+Base)\s*=/.exec(proof.source)?.[1] ?? 'base'
+  return [
+    proof.source,
+    ...sourceHelpers(proof.source),
+    `const groupedDefinition = groupedInteractiveDefinition(${baseName}, '${proof.grouped.axis}')`,
+    chartComponentSource(proof.renderer, 'groupedDefinition'),
+  ].join('\n\n')
+}
+
+function sourceHelpers(source: string) {
   const helpers = source.includes('normalizedRectMark(')
     ? [sourceSection('normalized-rect-mark')]
     : source.includes('normalizedPolygonMark(')
       ? [sourceSection('normalized-polygon-mark')]
       : []
+  if (source.includes('translatedClipMark(')) {
+    helpers.unshift(sourceSection('translated-clip-mark'))
+  }
   if (source.includes('polarGuideMark(')) {
     helpers.unshift(sourceSection('polar-guide-mark'))
   }
-  return [
-    source,
-    ...helpers,
-    `const ${mode}Definition = interactiveDefinition(${baseName}${focus})`,
-  ].join('\n\n')
+  return helpers
+}
+
+function chartComponentSource(renderer: ProofRenderer, definition: string) {
+  const component = renderer === 'canvas' ? 'CanvasChart' : 'Chart'
+  return `<${component}
+  definition={${definition}}
+  ariaLabel="Interaction geometry proof"
+/>`
 }
 
 function sourceSection(id: string) {
@@ -339,6 +896,223 @@ function createProofCases(): ProofCase[] {
   )
   // source:horizontal-bars:end
 
+  // source:grouped-vertical-bars:start
+  const groupedVerticalBars = [
+    {
+      id: 'grouped-v-0-a',
+      label: 'A · observed · 120',
+      x: 0,
+      y: 120,
+      series: 'observed',
+    },
+    {
+      id: 'grouped-v-0-b',
+      label: 'A · comparison · 105',
+      x: 0,
+      y: 105,
+      series: 'comparison',
+    },
+    {
+      id: 'grouped-v-0-c',
+      label: 'A · baseline · 96',
+      x: 0,
+      y: 96,
+      series: 'baseline',
+    },
+    {
+      id: 'grouped-v-1-a',
+      label: 'B · observed · 150',
+      x: 1,
+      y: 150,
+      series: 'observed',
+    },
+    {
+      id: 'grouped-v-1-b',
+      label: 'B · comparison · 130',
+      x: 1,
+      y: 130,
+      series: 'comparison',
+    },
+    {
+      id: 'grouped-v-1-c',
+      label: 'B · baseline · 112',
+      x: 1,
+      y: 112,
+      series: 'baseline',
+    },
+    {
+      id: 'grouped-vertical-tall',
+      label: 'C · tall grouped bar · 220',
+      x: 2,
+      y: 220,
+      series: 'observed',
+    },
+    {
+      id: 'grouped-vertical-neighbor',
+      label: 'C · nearby grouped endpoint · 90',
+      x: 2,
+      y: 90,
+      series: 'comparison',
+    },
+    {
+      id: 'grouped-v-2-c',
+      label: 'C · baseline · 118',
+      x: 2,
+      y: 118,
+      series: 'baseline',
+    },
+    {
+      id: 'grouped-v-3-a',
+      label: 'D · observed · 135',
+      x: 3,
+      y: 135,
+      series: 'observed',
+    },
+    {
+      id: 'grouped-v-3-b',
+      label: 'D · comparison · 160',
+      x: 3,
+      y: 160,
+      series: 'comparison',
+    },
+    {
+      id: 'grouped-v-3-c',
+      label: 'D · baseline · 122',
+      x: 3,
+      y: 122,
+      series: 'baseline',
+    },
+    {
+      id: 'grouped-v-4-a',
+      label: 'E · observed · 110',
+      x: 4,
+      y: 110,
+      series: 'observed',
+    },
+    {
+      id: 'grouped-v-4-b',
+      label: 'E · comparison · 128',
+      x: 4,
+      y: 128,
+      series: 'comparison',
+    },
+    {
+      id: 'grouped-v-4-c',
+      label: 'E · baseline · 116',
+      x: 4,
+      y: 116,
+      series: 'baseline',
+    },
+  ] satisfies ProofDatum[]
+  const groupedVerticalBase = baseDefinition(
+    [
+      barY(groupedVerticalBars, {
+        id: 'grouped-vertical-bars',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        color: 'series',
+        key: 'id',
+        layout: group({ padding: 0.16 }),
+        inset: 2,
+      }),
+    ],
+    scaleBand<number>().domain([0, 1, 2, 3, 4]).padding(0.15),
+    scaleLinear().domain([0, 240]),
+  )
+  // source:grouped-vertical-bars:end
+
+  // source:grouped-horizontal-bars:start
+  const groupedHorizontalBars = [
+    {
+      id: 'grouped-h-0-a',
+      label: 'A · observed · 140',
+      x: 140,
+      y: 0,
+      series: 'observed',
+    },
+    {
+      id: 'grouped-h-0-b',
+      label: 'A · comparison · 118',
+      x: 118,
+      y: 0,
+      series: 'comparison',
+    },
+    {
+      id: 'grouped-h-1-a',
+      label: 'B · observed · 155',
+      x: 155,
+      y: 1,
+      series: 'observed',
+    },
+    {
+      id: 'grouped-h-1-b',
+      label: 'B · comparison · 132',
+      x: 132,
+      y: 1,
+      series: 'comparison',
+    },
+    {
+      id: 'grouped-horizontal-long',
+      label: 'C · long grouped bar · 190',
+      x: 190,
+      y: 2,
+      series: 'observed',
+    },
+    {
+      id: 'grouped-horizontal-neighbor',
+      label: 'C · nearby grouped endpoint · 82',
+      x: 82,
+      y: 2,
+      series: 'comparison',
+    },
+    {
+      id: 'grouped-h-3-a',
+      label: 'D · observed · 126',
+      x: 126,
+      y: 3,
+      series: 'observed',
+    },
+    {
+      id: 'grouped-h-3-b',
+      label: 'D · comparison · 146',
+      x: 146,
+      y: 3,
+      series: 'comparison',
+    },
+    {
+      id: 'grouped-h-4-a',
+      label: 'E · observed · 112',
+      x: 112,
+      y: 4,
+      series: 'observed',
+    },
+    {
+      id: 'grouped-h-4-b',
+      label: 'E · comparison · 124',
+      x: 124,
+      y: 4,
+      series: 'comparison',
+    },
+  ] satisfies ProofDatum[]
+  const groupedHorizontalBase = baseDefinition(
+    [
+      barX(groupedHorizontalBars, {
+        id: 'grouped-horizontal-bars',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        color: 'series',
+        key: 'id',
+        layout: group({ padding: 0.16 }),
+        inset: 2,
+      }),
+    ],
+    scaleLinear().domain([0, 210]),
+    scaleBand<number>().domain([0, 1, 2, 3, 4]).padding(0.15),
+  )
+  // source:grouped-horizontal-bars:end
+
   // source:line-area:start
   const areaRows = [
     { id: 'left', label: 'Left sample · 84', x: 0, y: 84 },
@@ -398,6 +1172,138 @@ function createProofCases(): ProofCase[] {
   )
   // source:bubbles:end
 
+  // source:scatterplot:start
+  const scatterCloud = Array.from({ length: 54 }, (_, index) => ({
+    id: `scatter-${index}`,
+    label: `Scatter observation ${index + 1}`,
+    x: 8 + (index % 18) * 5,
+    y: 12 + Math.floor(index / 18) * 36,
+    radius: 3 + (index % 3),
+    color: index % 2 ? '#a3a3a3' : '#d4d4d4',
+  })) satisfies ProofDatum[]
+  const scatterRows = [
+    ...scatterCloud,
+    {
+      id: 'scatter-emphasis',
+      label: 'Large emphasized scatter observation',
+      x: 40,
+      y: 60,
+      radius: 28,
+      color: '#404040',
+    },
+    {
+      id: 'scatter-decoy',
+      label: 'Nearby tiny scatter anchor',
+      x: 46,
+      y: 60,
+      radius: 3.5,
+      color: '#737373',
+    },
+  ] satisfies ProofDatum[]
+  const scatterBase = baseDefinition(
+    [
+      dot(scatterRows, {
+        id: 'scatterplot',
+        x: 'x',
+        y: 'y',
+        r: 'radius',
+        key: 'id',
+        fill: '#737373',
+        fillOpacity: 0.72,
+        stroke: '#ffffff',
+        strokeWidth: 1,
+      }),
+    ],
+    scaleLinear().domain([0, 100]),
+    scaleLinear().domain([0, 100]),
+  )
+  // source:scatterplot:end
+
+  // source:hexbin:start
+  const ordinaryHexbinCells = Array.from({ length: 36 }, (_, index) => ({
+    id: `hexbin-${index}`,
+    label: `Hexbin cell ${index + 1}`,
+    x: 8 + (index % 12) * 7.5,
+    y: 16 + Math.floor(index / 12) * 34,
+    radius: 6 + (index % 4),
+    color: index % 3 === 0 ? '#a3a3a3' : '#d4d4d4',
+  })) satisfies ProofDatum[]
+  const hexbinCells = [
+    ...ordinaryHexbinCells,
+    {
+      id: 'dense-hexbin',
+      label: 'Dense hexbin cell',
+      x: 40,
+      y: 60,
+      radius: 28,
+      color: '#404040',
+    },
+    {
+      id: 'hexbin-decoy',
+      label: 'Nearby sparse hexbin cell',
+      x: 46,
+      y: 60,
+      radius: 3.5,
+      color: '#737373',
+    },
+  ] satisfies ProofDatum[]
+  const hexbinBase = baseDefinition(
+    [
+      hexagon(hexbinCells, {
+        id: 'hexbin-cells',
+        x: 'x',
+        y: 'y',
+        r: 'radius',
+        key: 'id',
+        fill: '#525252',
+        fillOpacity: 0.76,
+        stroke: '#ffffff',
+        strokeWidth: 1,
+      }),
+    ],
+    scaleLinear().domain([0, 100]),
+    scaleLinear().domain([0, 100]),
+  )
+  // source:hexbin:end
+
+  // source:nested-bubbles:start
+  const nestedBubbles = [
+    {
+      id: 'outer-bubble',
+      label: 'Outer packed bubble',
+      x: 50,
+      y: 50,
+      radius: 48,
+      color: '#737373',
+    },
+    {
+      id: 'inner-bubble',
+      label: 'Topmost inner bubble',
+      x: 50,
+      y: 50,
+      radius: 16,
+      color: '#171717',
+    },
+  ] satisfies ProofDatum[]
+  const nestedBubbleBase = baseDefinition(
+    [
+      dot(nestedBubbles, {
+        id: 'nested-bubbles',
+        x: 'x',
+        y: 'y',
+        r: 'radius',
+        key: 'id',
+        fill: '#525252',
+        fillOpacity: 0.82,
+        stroke: '#ffffff',
+        strokeWidth: 2,
+      }),
+    ],
+    scaleLinear().domain([0, 100]),
+    scaleLinear().domain([0, 100]),
+  )
+  // source:nested-bubbles:end
+
   // source:cells:start
   const cells = [
     {
@@ -680,6 +1586,50 @@ function createProofCases(): ProofCase[] {
       probe: [0.76, 0.56],
       color: '#525252',
     },
+    {
+      id: 'secondary-link',
+      label: 'Secondary Sankey flow',
+      polygon: [
+        [0.16, 0.42],
+        [0.52, 0.56],
+        [0.52, 0.67],
+        [0.16, 0.55],
+      ],
+      color: '#a3a3a3',
+    },
+    {
+      id: 'recombined-link',
+      label: 'Recombined Sankey flow',
+      polygon: [
+        [0.52, 0.56],
+        [0.84, 0.58],
+        [0.84, 0.74],
+        [0.52, 0.67],
+      ],
+      color: '#737373',
+    },
+    {
+      id: 'source-node',
+      label: 'Sankey source node',
+      polygon: [
+        [0.12, 0.18],
+        [0.17, 0.18],
+        [0.17, 0.56],
+        [0.12, 0.56],
+      ],
+      color: '#171717',
+    },
+    {
+      id: 'middle-node',
+      label: 'Sankey subtotal node',
+      polygon: [
+        [0.5, 0.45],
+        [0.55, 0.45],
+        [0.55, 0.69],
+        [0.5, 0.69],
+      ],
+      color: '#737373',
+    },
     {
       id: 'node',
       label: 'Nearby node anchor',
@@ -691,13 +1641,246 @@ function createProofCases(): ProofCase[] {
       ],
       color: '#a3a3a3',
     },
+    {
+      id: 'sink-node',
+      label: 'Sankey sink node',
+      polygon: [
+        [0.84, 0.56],
+        [0.89, 0.56],
+        [0.89, 0.76],
+        [0.84, 0.76],
+      ],
+      color: '#171717',
+    },
+  ] satisfies ProofDatum[]
+  const sankeyBase = baseDefinition(
+    [normalizedPolygonMark('sankey', sankey)],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:sankey:end
+
+  // source:faceted-grouped-bars:start
+  const facetedGroupedBars = ['North', 'South'].flatMap((panel) =>
+    [0, 1, 2].flatMap((x) =>
+      ['observed', 'comparison'].map((series) => {
+        const isTarget = panel === 'North' && x === 1 && series === 'observed'
+        const isNeighbor =
+          panel === 'North' && x === 1 && series === 'comparison'
+        const value = isTarget
+          ? 230
+          : isNeighbor
+            ? 92
+            : 74 + x * 24 + (series === 'comparison' ? 18 : 0)
+        return {
+          id: isTarget
+            ? 'faceted-grouped-target'
+            : isNeighbor
+              ? 'faceted-grouped-neighbor'
+              : `${panel.toLowerCase()}-grouped-${x}-${series}`,
+          label: isTarget
+            ? 'North · tall grouped bar · 230'
+            : isNeighbor
+              ? 'North · nearby grouped endpoint · 92'
+              : `${panel} · ${series} · ${value}`,
+          panel,
+          x,
+          y: value,
+          series,
+        }
+      }),
+    ),
+  ) satisfies ProofDatum[]
+  const facetedGroupedBase = baseDefinition(
+    [
+      facet(facetedGroupedBars, {
+        id: 'faceted-grouped-bars',
+        by: 'panel',
+        columns: 2,
+        gap: 12,
+        axes: 'cell',
+        chart: (rows) => ({
+          marks: [
+            barY(rows, {
+              id: 'grouped-bars',
+              x: 'x',
+              y: 'y',
+              z: 'series',
+              color: 'series',
+              key: 'id',
+              layout: group({ padding: 0.16 }),
+              inset: 2,
+            }),
+          ],
+          x: { scale: scaleBand<number>().domain([0, 1, 2]).padding(0.12) },
+          y: { scale: scaleLinear().domain([0, 250]) },
+          guides: false,
+          margin: 0,
+          clip: true,
+        }),
+      }),
+    ],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:faceted-grouped-bars:end
+
+  // source:faceted-stacked-bars:start
+  const facetedStackedBars = ['North', 'South'].flatMap((panel) =>
+    [0, 1, 2].flatMap((x) =>
+      ['base', 'top'].map((series) => {
+        const isBase = panel === 'North' && x === 1 && series === 'base'
+        const isTop = panel === 'North' && x === 1 && series === 'top'
+        const value = isBase
+          ? 60
+          : isTop
+            ? 170
+            : 48 + x * 13 + (series === 'top' ? 22 : 0)
+        return {
+          id: isBase
+            ? 'faceted-stack-base'
+            : isTop
+              ? 'faceted-stack-top'
+              : `${panel.toLowerCase()}-stack-${x}-${series}`,
+          label: `${panel} · ${series} · ${value}`,
+          panel,
+          x,
+          y: value,
+          series,
+        }
+      }),
+    ),
+  ) satisfies ProofDatum[]
+  const facetedStackedBase = baseDefinition(
+    [
+      facet(facetedStackedBars, {
+        id: 'faceted-stacked-bars',
+        by: 'panel',
+        columns: 2,
+        gap: 12,
+        axes: 'cell',
+        chart: (rows) => ({
+          marks: [
+            barY(rows, {
+              id: 'stacked-bars',
+              x: 'x',
+              y: 'y',
+              z: 'series',
+              color: 'series',
+              key: 'id',
+              layout: stack({ order: ['base', 'top'] }),
+              inset: 6,
+            }),
+          ],
+          x: { scale: scaleBand<number>().domain([0, 1, 2]).padding(0.12) },
+          y: { scale: scaleLinear().domain([0, 250]) },
+          guides: false,
+          margin: 0,
+          clip: true,
+        }),
+      }),
+    ],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:faceted-stacked-bars:end
+
+  // source:faceted-bubbles:start
+  const facetedBubbles = [
+    {
+      id: 'faceted-large-bubble',
+      label: 'North · large bubble',
+      panel: 'North',
+      x: 40,
+      y: 55,
+      radius: 44,
+    },
+    {
+      id: 'faceted-bubble-neighbor',
+      label: 'North · nearby bubble',
+      panel: 'North',
+      x: 49,
+      y: 55,
+      radius: 5,
+    },
+    {
+      id: 'faceted-north-other',
+      label: 'North · other bubble',
+      panel: 'North',
+      x: 76,
+      y: 30,
+      radius: 12,
+    },
+    {
+      id: 'faceted-south-large',
+      label: 'South · large bubble',
+      panel: 'South',
+      x: 34,
+      y: 62,
+      radius: 28,
+    },
+    {
+      id: 'faceted-south-near',
+      label: 'South · nearby bubble',
+      panel: 'South',
+      x: 55,
+      y: 48,
+      radius: 9,
+    },
+    {
+      id: 'faceted-south-other',
+      label: 'South · other bubble',
+      panel: 'South',
+      x: 78,
+      y: 25,
+      radius: 14,
+    },
+  ] satisfies ProofDatum[]
+  const facetedBubbleBase = baseDefinition(
+    [
+      facet(facetedBubbles, {
+        id: 'faceted-bubbles',
+        by: 'panel',
+        columns: 2,
+        gap: 12,
+        axes: 'cell',
+        chart: (rows) => ({
+          marks: [
+            dot(rows, {
+              id: 'bubbles',
+              x: 'x',
+              y: 'y',
+              r: 'radius',
+              key: 'id',
+              fillOpacity: 0.72,
+              stroke: '#ffffff',
+              strokeWidth: 1.5,
+            }),
+          ],
+          x: { scale: scaleLinear().domain([0, 100]) },
+          y: { scale: scaleLinear().domain([0, 100]) },
+          guides: false,
+          margin: 0,
+          clip: true,
+        }),
+      }),
+    ],
+    scaleLinear().domain([0, 1]),
+    scaleLinear().domain([0, 1]),
+  )
+  // source:faceted-bubbles:end
+
+  // source:translated-clipped:start
+  const translatedClipRows = [
+    { id: 'clipped-target', label: 'Translated clipped rectangle' },
+    { id: 'clipped-decoy', label: 'Nearby transformed anchor' },
   ] satisfies ProofDatum[]
-  const sankeyBase = baseDefinition(
-    [normalizedPolygonMark('sankey', sankey)],
+  const translatedClipBase = baseDefinition(
+    [translatedClipMark('translated-clipped', translatedClipRows)],
     scaleLinear().domain([0, 1]),
     scaleLinear().domain([0, 1]),
   )
-  // source:sankey:end
+  // source:translated-clipped:end
 
   // source:dense-rectangles:start
   const denseRectangleGrid = Array.from({ length: 4_096 }, (_, index) => {
@@ -801,6 +1984,232 @@ function createProofCases(): ProofCase[] {
   )
   // source:complex-polygons:end
 
+  // source:mixed-vertical-bars-line-dots:start
+  const mixedVerticalBars = Array.from({ length: 9 }, (_, x) => {
+    const target = x === 4
+    const y = target ? 220 : 58 + ((x * 17) % 42)
+    return {
+      id: target ? 'mixed-vertical-target' : `mixed-vertical-bar-${x}`,
+      label: target
+        ? 'Tall observed bar · 220'
+        : `Observed bar ${x + 1} · ${y}`,
+      x,
+      y,
+      series: 'Observed',
+    }
+  }) satisfies ProofDatum[]
+  const mixedVerticalForecast = Array.from({ length: 9 }, (_, x) => {
+    const y = x === 4 ? 75 : 70 + ((x * 13) % 35)
+    return {
+      id: x === 4 ? 'mixed-forecast-decoy' : `mixed-forecast-${x}`,
+      label:
+        x === 4
+          ? 'Forecast point at target category · 75'
+          : `Forecast point ${x + 1} · ${y}`,
+      x,
+      y,
+      series: 'Forecast',
+    }
+  }) satisfies ProofDatum[]
+  const mixedVerticalBase = baseDefinition(
+    [
+      barY(mixedVerticalBars, {
+        id: 'mixed-observed-bars',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        key: 'id',
+        inset: 5,
+        fill: '#d4d4d4',
+      }),
+      lineY(mixedVerticalForecast, {
+        id: 'mixed-forecast-line',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        key: 'id',
+        stroke: '#525252',
+        strokeWidth: 2,
+      }),
+      dot(mixedVerticalForecast, {
+        id: 'mixed-forecast-dots',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        key: 'id',
+        r: 5,
+        fill: '#737373',
+      }),
+    ],
+    scaleBand<number>().domain([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    scaleLinear().domain([0, 240]),
+  )
+  // source:mixed-vertical-bars-line-dots:end
+
+  // source:mixed-horizontal-bars-dots:start
+  const mixedHorizontalBars = Array.from({ length: 7 }, (_, y) => {
+    const target = y === 3
+    const x = target ? 220 : 45 + ((y * 11) % 35)
+    return {
+      id: target ? 'mixed-horizontal-target' : `mixed-horizontal-bar-${y}`,
+      label: target
+        ? 'Long interval bar · 220'
+        : `Interval bar ${y + 1} · ${x}`,
+      x,
+      y,
+      series: 'Interval',
+    }
+  }) satisfies ProofDatum[]
+  const mixedHorizontalDots = Array.from({ length: 7 }, (_, y) => {
+    const x = y === 3 ? 85 : 30 + ((y * 7) % 15)
+    return {
+      id: y === 3 ? 'mixed-horizontal-decoy' : `mixed-horizontal-dot-${y}`,
+      label:
+        y === 3 ? 'Nearby event in target lane · 85' : `Event ${y + 1} · ${x}`,
+      x,
+      y,
+      series: 'Event',
+    }
+  }) satisfies ProofDatum[]
+  const mixedHorizontalBase = baseDefinition(
+    [
+      barX(mixedHorizontalBars, {
+        id: 'mixed-interval-bars',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        key: 'id',
+        inset: 5,
+        fill: '#d4d4d4',
+      }),
+      dot(mixedHorizontalDots, {
+        id: 'mixed-lane-events',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        key: 'id',
+        r: 5,
+        fill: '#737373',
+      }),
+    ],
+    scaleLinear().domain([0, 240]),
+    scaleBand<number>().domain([0, 1, 2, 3, 4, 5, 6]),
+  )
+  // source:mixed-horizontal-bars-dots:end
+
+  // source:mixed-area-line-dots:start
+  const mixedAreaRows = [80, 140, 190, 210, 150, 90].map((y, x) => ({
+    id: x === 3 ? 'mixed-area-peak' : `mixed-area-${x}`,
+    label: x === 3 ? 'Area peak · 210' : `Area sample ${x + 1} · ${y}`,
+    x,
+    y,
+    series: 'Trend',
+  })) satisfies ProofDatum[]
+  const mixedAreaDots = [
+    {
+      id: 'mixed-area-dot-1',
+      label: 'Observation 2 · 110',
+      x: 1,
+      y: 110,
+      series: 'Observation',
+    },
+    {
+      id: 'mixed-area-decoy',
+      label: 'Nearby observation at peak · 85',
+      x: 3,
+      y: 85,
+      series: 'Observation',
+    },
+    {
+      id: 'mixed-area-dot-4',
+      label: 'Observation 5 · 120',
+      x: 4,
+      y: 120,
+      series: 'Observation',
+    },
+  ] satisfies ProofDatum[]
+  const mixedAreaBase = baseDefinition(
+    [
+      areaY(mixedAreaRows, {
+        id: 'mixed-area',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        key: 'id',
+        fill: '#d4d4d4',
+        fillOpacity: 0.72,
+      }),
+      lineY(mixedAreaRows, {
+        id: 'mixed-area-line',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        key: 'id',
+        stroke: '#525252',
+        strokeWidth: 2,
+      }),
+      dot(mixedAreaDots, {
+        id: 'mixed-area-observations',
+        x: 'x',
+        y: 'y',
+        z: 'series',
+        key: 'id',
+        r: 5,
+        fill: '#737373',
+      }),
+    ],
+    scaleLinear().domain([0, 5]),
+    scaleLinear().domain([0, 240]),
+  )
+  // source:mixed-area-line-dots:end
+
+  // source:mixed-cell-bubble:start
+  const mixedCell = [
+    {
+      id: 'mixed-background-cell',
+      label: 'Background heatmap cell',
+      x1: 0,
+      x2: 100,
+      y1: 0,
+      y2: 100,
+    },
+  ] satisfies ProofDatum[]
+  const mixedCellBubble = [
+    {
+      id: 'mixed-overlay-bubble',
+      label: 'Topmost overlay bubble',
+      x: 65,
+      y: 50,
+      radius: 70,
+    },
+  ] satisfies ProofDatum[]
+  const mixedCellBubbleBase = baseDefinition(
+    [
+      rect(mixedCell, {
+        id: 'mixed-background-cell',
+        x1: 'x1',
+        x2: 'x2',
+        y1: 'y1',
+        y2: 'y2',
+        key: 'id',
+        inset: 8,
+        fill: '#d4d4d4',
+      }),
+      dot(mixedCellBubble, {
+        id: 'mixed-overlay-bubble',
+        x: 'x',
+        y: 'y',
+        r: 'radius',
+        key: 'id',
+        fill: '#737373',
+        fillOpacity: 0.82,
+      }),
+    ],
+    scaleLinear().domain([0, 100]),
+    scaleLinear().domain([0, 100]),
+  )
+  // source:mixed-cell-bubble:end
+
   return [
     makeCase({
       id: 'stacked-bars',
@@ -824,6 +2233,95 @@ function createProofCases(): ProofCase[] {
       base: horizontalBase,
       probe: (scene) => pointAtValue(scene, 'long', 'x', 82),
     }),
+    makeCase({
+      id: 'grouped-vertical-bars',
+      title: 'Grouped vertical bars',
+      affinity: 'x',
+      explanation:
+        'Each subgroup owns its complete rectangle. A nearby series endpoint in the same category cannot steal the interior of a taller grouped bar.',
+      beforeExpected: 'C · nearby grouped endpoint · 90',
+      afterExpected: 'C · tall grouped bar · 220',
+      base: groupedVerticalBase,
+      probe: (scene) => pointAtValue(scene, 'grouped-vertical-tall', 'y', 90),
+    }),
+    makeCase({
+      id: 'grouped-horizontal-bars',
+      title: 'Grouped horizontal bars',
+      affinity: 'y',
+      explanation:
+        'Horizontal subgroup geometry behaves symmetrically: containment wins inside the long bar, then row affinity handles empty space.',
+      beforeExpected: 'C · nearby grouped endpoint · 82',
+      afterExpected: 'C · long grouped bar · 190',
+      base: groupedHorizontalBase,
+      probe: (scene) => pointAtValue(scene, 'grouped-horizontal-long', 'x', 82),
+    }),
+    makeCase({
+      id: 'mixed-vertical-bars-line-dots',
+      title: 'Mixed vertical bars, line, and points',
+      affinity: 'x',
+      affinityLabel: 'bar x · line x · dot xy',
+      explanation:
+        'Each built-in mark contributes its own affinity. Inside the tall bar, rectangle containment wins before the nearby forecast line and point can use their fallback anchors.',
+      beforeExpected: 'Forecast point at target category · 75',
+      afterExpected: 'Tall observed bar · 220',
+      grouped: {
+        axis: 'x',
+        expected: [
+          'Forecast point at target category · 75',
+          'Tall observed bar · 220',
+        ],
+      },
+      base: mixedVerticalBase,
+      probe: (scene) => pointAtValue(scene, 'mixed-vertical-target', 'y', 100),
+    }),
+    makeCase({
+      id: 'mixed-horizontal-bars-dots',
+      title: 'Mixed horizontal intervals and events',
+      affinity: 'y',
+      affinityLabel: 'bar y · dot xy',
+      explanation:
+        'The long interval owns its row-shaped body while event dots retain ordinary two-dimensional targeting. The chart does not need to choose one policy for both.',
+      beforeExpected: 'Nearby event in target lane · 85',
+      afterExpected: 'Long interval bar · 220',
+      grouped: {
+        axis: 'y',
+        expected: [
+          'Nearby event in target lane · 85',
+          'Long interval bar · 220',
+        ],
+      },
+      base: mixedHorizontalBase,
+      probe: (scene) =>
+        pointAtValue(scene, 'mixed-horizontal-target', 'x', 105),
+    }),
+    makeCase({
+      id: 'mixed-area-line-dots',
+      title: 'Mixed area, boundary line, and observations',
+      affinity: 'x',
+      affinityLabel: 'area x · line x · dot xy',
+      explanation:
+        'The filled area remains selectable between its boundary and baseline, while the line and observation dots keep their own narrower geometry and fallback behavior.',
+      beforeExpected: 'Nearby observation at peak · 85',
+      afterExpected: 'Area peak · 210',
+      grouped: {
+        axis: 'x',
+        expected: ['Nearby observation at peak · 85', 'Area peak · 210'],
+      },
+      base: mixedAreaBase,
+      probe: (scene) => pointAtValue(scene, 'mixed-area-peak', 'y', 105),
+    }),
+    makeCase({
+      id: 'mixed-cell-bubble',
+      title: 'Overlaid heatmap cell and bubble',
+      affinity: 'xy',
+      affinityLabel: 'rect xy · dot xy · paint order',
+      explanation:
+        'Both primitives contain the pointer. Reverse scene traversal selects the large bubble painted on top even though the background cell center is the closer legacy anchor.',
+      beforeExpected: 'Background heatmap cell',
+      afterExpected: 'Topmost overlay bubble',
+      base: mixedCellBubbleBase,
+      probe: (scene) => circleEdgeProbe(scene, 'mixed-overlay-bubble', -0.9),
+    }),
     makeCase({
       id: 'line-area',
       title: 'Lines and vertical areas',
@@ -846,6 +2344,39 @@ function createProofCases(): ProofCase[] {
       base: bubbleBase,
       probe: (scene) => circleEdgeProbe(scene, 'large-bubble', 0.78),
     }),
+    makeCase({
+      id: 'scatterplot',
+      title: 'Dense scatterplot with an emphasized point',
+      affinity: 'xy',
+      explanation:
+        'The resolver tests every rendered circle radius, so a highlighted observation remains targetable at its edge even when a tiny nearby anchor is closer.',
+      beforeExpected: 'Nearby tiny scatter anchor',
+      afterExpected: 'Large emphasized scatter observation',
+      base: scatterBase,
+      probe: (scene) => circleEdgeProbe(scene, 'scatter-emphasis', 0.8),
+    }),
+    makeCase({
+      id: 'hexbin',
+      title: 'Hexbin density cells',
+      affinity: 'xy',
+      explanation:
+        'Each pre-binned density cell contributes its rendered six-sided polygon; the dense cell wins across its area instead of losing to a sparse cell center.',
+      beforeExpected: 'Nearby sparse hexbin cell',
+      afterExpected: 'Dense hexbin cell',
+      base: hexbinBase,
+      probe: (scene) => areaEdgeProbe(scene, 'dense-hexbin', 0.82),
+    }),
+    makeCase({
+      id: 'nested-bubbles',
+      title: 'Nested bubbles and paint order',
+      affinity: 'xy',
+      explanation:
+        'Both bubbles contain the pointer and share one anchor. Reverse scene traversal deliberately selects the smaller inner bubble painted on top.',
+      beforeExpected: 'Outer packed bubble',
+      afterExpected: 'Topmost inner bubble',
+      base: nestedBubbleBase,
+      probe: (scene) => circleEdgeProbe(scene, 'inner-bubble', 0),
+    }),
     makeCase({
       id: 'cells',
       title: 'Heatmaps and treemaps',
@@ -929,11 +2460,66 @@ function createProofCases(): ProofCase[] {
       affinity: 'geometry',
       explanation:
         'Wide links and nodes expose their own shapes, avoiding a global x or y rule that would be wrong for topology.',
-      beforeExpected: 'Nearby node anchor',
+      beforeExpected: 'Recombined Sankey flow',
       afterExpected: 'Wide Sankey / network link',
       base: sankeyBase,
       probe: normalizedDatumProbe('wide-link'),
     }),
+    makeCase({
+      id: 'faceted-bars',
+      title: 'Faceted tall bars',
+      affinity: 'x',
+      explanation:
+        'The target is attached before facet layout. Scene traversal applies the final cell translation and clip once, so its visible rectangle remains authoritative.',
+      beforeExpected: 'North neighbor · 90',
+      afterExpected: 'North tall bar · 240',
+      base: facetedBase,
+      probe: (scene) => rectProbe(scene, 'north-tall', 0.5, 0.625),
+    }),
+    makeCase({
+      id: 'faceted-grouped-bars',
+      title: 'Faceted grouped bars',
+      affinity: 'x',
+      explanation:
+        'Facet translation and subgroup layout both happen before interaction targets are collected, so the final side-by-side rectangle remains authoritative.',
+      beforeExpected: 'North · nearby grouped endpoint · 92',
+      afterExpected: 'North · tall grouped bar · 230',
+      base: facetedGroupedBase,
+      probe: (scene) => rectProbe(scene, 'faceted-grouped-target', 0.9, 0.6),
+    }),
+    makeCase({
+      id: 'faceted-stacked-bars',
+      title: 'Faceted stacked bars',
+      affinity: 'x',
+      explanation:
+        'The final stacked segment rectangle wins inside its facet; an earlier segment endpoint at the same category no longer steals the pointer.',
+      beforeExpected: 'North · base · 60',
+      afterExpected: 'North · top · 170',
+      base: facetedStackedBase,
+      probe: (scene) => rectProbe(scene, 'faceted-stack-top', 0.5, 0.62),
+    }),
+    makeCase({
+      id: 'faceted-bubbles',
+      title: 'Faceted bubbles',
+      affinity: 'xy',
+      explanation:
+        'Circle containment is evaluated after facet translation and clipping, so another bubble anchor cannot steal the painted edge of a large bubble.',
+      beforeExpected: 'North · nearby bubble',
+      afterExpected: 'North · large bubble',
+      base: facetedBubbleBase,
+      probe: (scene) => circleEdgeProbe(scene, 'faceted-large-bubble', 0.82),
+    }),
+    makeCase({
+      id: 'translated-clipped',
+      title: 'Nested transforms and clipping',
+      affinity: 'xy',
+      explanation:
+        'The primitive stays in local coordinates. The resolver follows the same group translation and clip as the renderer instead of maintaining translated interaction geometry beside it.',
+      beforeExpected: 'Nearby transformed anchor',
+      afterExpected: 'Translated clipped rectangle',
+      base: translatedClipBase,
+      probe: (scene) => rectProbe(scene, 'clipped-target', 0.82, 0.82),
+    }),
     makeCase({
       id: 'dense-rectangles',
       title: 'Stress: thousands of rectangles',
@@ -990,16 +2576,30 @@ function baseDefinition(
 }
 
 function makeCase(
-  input: Omit<ProofCase, 'before' | 'after' | 'source'> & {
+  input: Omit<
+    ProofCase,
+    'before' | 'after' | 'grouped' | 'renderer' | 'source'
+  > & {
     base: StaticChartDefinition<ProofDatum, number, number>
+    grouped?: {
+      axis: 'x' | 'y'
+      expected: readonly string[]
+    }
   },
 ): ProofCase {
-  const { base, ...proof } = input
+  const { base, grouped, ...proof } = input
   return {
     ...proof,
+    renderer: canvasProofIds.has(proof.id) ? 'canvas' : 'svg',
     source: sourceSection(proof.id),
     before: interactiveDefinition(base, legacyPointFocus),
     after: interactiveDefinition(base),
+    grouped: grouped
+      ? {
+          ...grouped,
+          definition: groupedInteractiveDefinition(base, grouped.axis),
+        }
+      : undefined,
   }
 }
 
@@ -1021,6 +2621,24 @@ function interactiveDefinition(
   })
 }
 
+function groupedInteractiveDefinition(
+  base: StaticChartDefinition<ProofDatum, number, number>,
+  axis: 'x' | 'y',
+) {
+  return defineChart(base, {
+    focus: axis === 'x' ? 'group-x' : 'group-y',
+    maxFocusDistance: 48,
+    animate: false,
+    tooltip: {
+      use: tooltip,
+      className: 'hit-region-proof__tooltip',
+      sticky: true,
+      anchor: 'group-center',
+      placement: ['top', 'right', 'left', 'bottom'],
+    },
+  })
+}
+
 // source:normalized-rect-mark:start
 function normalizedRectMark(
   id: string,
@@ -1029,7 +2647,6 @@ function normalizedRectMark(
 ) {
   return createMark<ProofDatum, number, number>(() => ({
     id,
-    focusAffinity,
     channels: {},
     render: ({ chart }) => {
       const nodes: SceneNode[] = []
@@ -1048,17 +2665,7 @@ function normalizedRectMark(
         const height = (datum.y2 - datum.y1) * chart.height
         const centerX = x + width / 2
         const centerY = y + height / 2
-        nodes.push({
-          kind: 'rect',
-          key: datum.id,
-          x,
-          y,
-          width,
-          height,
-          radius: 4,
-          style: { fill: datum.color ?? '#404040', fillOpacity: 0.78 },
-        })
-        points.push({
+        const point: ChartPoint<ProofDatum, number, number> = {
           key: datum.id,
           markId: id,
           group: null,
@@ -1069,9 +2676,20 @@ function normalizedRectMark(
           yValue: centerY,
           x: centerX,
           y: centerY,
-          hitRegion: { kind: 'rect', x, y, width, height },
           color: datum.color ?? '#404040',
+        }
+        nodes.push({
+          kind: 'rect',
+          key: datum.id,
+          x,
+          y,
+          width,
+          height,
+          radius: 4,
+          interaction: { point, affinity: focusAffinity },
+          style: { fill: datum.color ?? '#404040', fillOpacity: 0.78 },
         })
+        points.push(point)
       })
       return { nodes, points }
     },
@@ -1079,6 +2697,92 @@ function normalizedRectMark(
 }
 // source:normalized-rect-mark:end
 
+// source:translated-clip-mark:start
+function translatedClipMark(id: string, data: readonly ProofDatum[]) {
+  return createMark<ProofDatum, number, number>(() => ({
+    id,
+    channels: {},
+    render: ({ chart }) => {
+      const translateX = chart.x + chart.width * 0.08
+      const translateY = chart.y + chart.height * 0.1
+      const targetWidth = chart.width * 0.62
+      const targetHeight = chart.height * 0.72
+      const target: ChartPoint<ProofDatum, number, number> = {
+        key: data[0]!.id,
+        markId: id,
+        group: null,
+        groupLabel: id,
+        datum: data[0]!,
+        datumIndex: 0,
+        xValue: 0.31,
+        yValue: 0.36,
+        x: translateX + targetWidth / 2,
+        y: translateY + targetHeight / 2,
+        color: '#404040',
+      }
+      const decoyX = chart.width * 0.485
+      const decoyY = chart.height * 0.56
+      const decoyWidth = chart.width * 0.02
+      const decoyHeight = chart.height * 0.06
+      const decoy: ChartPoint<ProofDatum, number, number> = {
+        key: data[1]!.id,
+        markId: id,
+        group: null,
+        groupLabel: id,
+        datum: data[1]!,
+        datumIndex: 1,
+        xValue: 0.495,
+        yValue: 0.59,
+        x: translateX + decoyX + decoyWidth / 2,
+        y: translateY + decoyY + decoyHeight / 2,
+        color: '#a3a3a3',
+      }
+      return {
+        nodes: [
+          {
+            kind: 'group',
+            key: `${id}:translated`,
+            translateX,
+            translateY,
+            clip: {
+              x: 0,
+              y: 0,
+              width: chart.width * 0.52,
+              height: chart.height * 0.65,
+            },
+            children: [
+              {
+                kind: 'rect',
+                key: target.key,
+                x: 0,
+                y: 0,
+                width: targetWidth,
+                height: targetHeight,
+                radius: 12,
+                interaction: { point: target, affinity: 'xy' },
+                style: { fill: '#404040', fillOpacity: 0.78 },
+              },
+              {
+                kind: 'rect',
+                key: decoy.key,
+                x: decoyX,
+                y: decoyY,
+                width: decoyWidth,
+                height: decoyHeight,
+                radius: 3,
+                interaction: { point: decoy, affinity: 'xy' },
+                style: { fill: '#a3a3a3' },
+              },
+            ],
+          },
+        ],
+        points: [target, decoy],
+      }
+    },
+  }))
+}
+// source:translated-clip-mark:end
+
 // source:polar-guide-mark:start
 function polarGuideMark(id: string) {
   return createMark<ProofDatum, number, number>(() => ({
@@ -1128,7 +2832,6 @@ function normalizedPolygonMark(
 ) {
   return createMark<ProofDatum, number, number>(() => ({
     id,
-    focusAffinity: 'geometry',
     channels: {},
     render: ({ chart }) => {
       const nodes: SceneNode[] = []
@@ -1149,18 +2852,7 @@ function normalizedPolygonMark(
           polygon.reduce((sum, point) => sum + point[0], 0) / polygon.length
         const y =
           polygon.reduce((sum, point) => sum + point[1], 0) / polygon.length
-        nodes.push({
-          kind: 'area',
-          key: datum.id,
-          points: polygon,
-          style: {
-            fill: datum.color ?? '#404040',
-            fillOpacity: 0.78,
-            stroke: '#ffffff',
-            strokeWidth: 1,
-          },
-        })
-        points.push({
+        const point: ChartPoint<ProofDatum, number, number> = {
           key: datum.id,
           markId: id,
           group: null,
@@ -1171,9 +2863,21 @@ function normalizedPolygonMark(
           yValue: y,
           x,
           y,
-          hitRegion: { kind: 'polygon', points: polygon },
           color: datum.color ?? '#404040',
+        }
+        nodes.push({
+          kind: 'area',
+          key: datum.id,
+          points: polygon,
+          interaction: { point, affinity: 'geometry' },
+          style: {
+            fill: datum.color ?? '#404040',
+            fillOpacity: 0.78,
+            stroke: '#ffffff',
+            strokeWidth: 1,
+          },
         })
+        points.push(point)
       })
       return { nodes, points }
     },
@@ -1200,11 +2904,33 @@ function circleEdgeProbe(
   id: string,
   amount: number,
 ) {
-  const point = scene.points.find((candidate) => candidate.datum.id === id)
-  if (point?.hitRegion?.kind !== 'circle') return null
+  const target = findSceneTarget(scene.nodes, id)
+  if (target?.node.kind !== 'dot') return null
+  return {
+    x: target.offsetX + target.node.x + target.node.radius * amount,
+    y: target.offsetY + target.node.y,
+  }
+}
+
+function areaEdgeProbe(
+  scene: ChartScene<ProofDatum, number, number>,
+  id: string,
+  amount: number,
+) {
+  const target = findSceneTarget(scene.nodes, id)
+  if (target?.node.kind !== 'area' || !target.node.points.length) return null
+  const center = target.node.points.reduce(
+    (result, point) => ({ x: result.x + point[0], y: result.y + point[1] }),
+    { x: 0, y: 0 },
+  )
+  center.x /= target.node.points.length
+  center.y /= target.node.points.length
+  const edge = target.node.points.reduce((rightmost, point) =>
+    point[0] > rightmost[0] ? point : rightmost,
+  )
   return {
-    x: point.hitRegion.x + point.hitRegion.radius * amount,
-    y: point.hitRegion.y,
+    x: target.offsetX + center.x + (edge[0] - center.x) * amount,
+    y: target.offsetY + center.y + (edge[1] - center.y) * amount,
   }
 }
 
@@ -1214,12 +2940,44 @@ function rectProbe(
   xAmount: number,
   yAmount: number,
 ) {
-  const point = scene.points.find((candidate) => candidate.datum.id === id)
-  if (point?.hitRegion?.kind !== 'rect') return null
+  const target = findSceneTarget(scene.nodes, id)
+  if (target?.node.kind !== 'rect') return null
   return {
-    x: point.hitRegion.x + point.hitRegion.width * xAmount,
-    y: point.hitRegion.y + point.hitRegion.height * yAmount,
+    x: target.offsetX + target.node.x + target.node.width * xAmount,
+    y: target.offsetY + target.node.y + target.node.height * yAmount,
+  }
+}
+
+function findSceneTarget(
+  nodes: readonly SceneNode[],
+  datumId: string,
+  offsetX = 0,
+  offsetY = 0,
+): {
+  node: Exclude<SceneNode, { kind: 'group' | 'label' }>
+  offsetX: number
+  offsetY: number
+} | null {
+  for (const node of nodes) {
+    if (node.kind === 'group') {
+      const target = findSceneTarget(
+        node.children,
+        datumId,
+        offsetX + (node.translateX ?? 0),
+        offsetY + (node.translateY ?? 0),
+      )
+      if (target) return target
+      continue
+    }
+    if (node.kind === 'label' || !node.interaction) continue
+    const matches = node.interaction.point
+      ? (node.interaction.point.datum as ProofDatum).id === datumId
+      : node.interaction.points.some(
+          (point) => (point.datum as ProofDatum).id === datumId,
+        )
+    if (matches) return { node, offsetX, offsetY }
   }
+  return null
 }
 
 function normalizedDatumProbe(id: string) {
diff --git a/examples/sandbox/src/styles.css b/examples/sandbox/src/styles.css
index 8218289c..f7002f7e 100644
--- a/examples/sandbox/src/styles.css
+++ b/examples/sandbox/src/styles.css
@@ -211,6 +211,10 @@
   gap: 18px;
 }
 
+.hit-region-proof__grid--three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .hit-region-proof__case--stress .hit-region-proof__grid {
   grid-template-columns: 1fr;
 }
@@ -377,7 +381,8 @@
 }
 
 @media (max-width: 900px) {
-  .hit-region-proof__grid {
+  .hit-region-proof__grid,
+  .hit-region-proof__grid--three {
     grid-template-columns: 1fr;
   }
 
diff --git a/packages/charts-core/docs/guides/custom-marks-and-renderers.md b/packages/charts-core/docs/guides/custom-marks-and-renderers.md
index bf2adf40..06413984 100644
--- a/packages/charts-core/docs/guides/custom-marks-and-renderers.md
+++ b/packages/charts-core/docs/guides/custom-marks-and-renderers.md
@@ -111,36 +111,38 @@ Each point should retain:
 - resolved pixel coordinates;
 - group identity and color.
 
-For a large painted mark, set `hitRegion` on each emitted point and declare
-the mark's off-shape fallback once with `focusAffinity`:
+For a large painted mark, create the semantic point once and attach that same
+object to the scene primitive that paints it:
 
 ```ts
-return {
-  id,
-  focusAffinity: 'x',
-  channels,
-  render(context) {
-    return {
-      nodes,
-      points: nodes.map((node, index) => ({
-        ...interactionPoint(index),
-        hitRegion: {
-          kind: 'rect',
-          x: node.x,
-          y: node.y,
-          width: node.width,
-          height: node.height,
-        },
-      })),
-    }
-  },
+import type { SceneRect } from '@tanstack/charts'
+
+const point = interactionPoint(index)
+const node: SceneRect = {
+  kind: 'rect',
+  key: point.key,
+  x,
+  y,
+  width,
+  height,
+  interaction: { point, affinity: 'x' },
 }
+
+return { nodes: [node], points: [point] }
 ```
 
 Use `x` for vertically oriented marks, `y` for horizontal marks, `xy` for
 ordinary two-dimensional proximity, and `geometry` when only exact
 containment should focus the mark. The default resolver checks containment
-across every mark before applying any fallback.
+across every mark before applying any fallback. A continuous `polyline` or
+`area` may attach all of the semantic samples it represents with
+`interaction: { points, affinity }`; containment selects the closest sample
+within that primitive.
+
+Keep primitive coordinates local when returning translated groups. Scene
+traversal applies nested translation, clipping, facets, and paint order after
+layout. Do not calculate a second set of global hit bounds beside the rendered
+node.
 
 Omit points for decorative geometry. Do not invent fake interactive data for a
 frame, grid, or threshold that should not receive focus.
@@ -201,6 +203,10 @@ coordinate conversion, focus painting, and cleanup. The host retains sizing,
 runtime, keyboard, tooltip, selection, and focus-strategy behavior. Keep
 `prerender` deterministic and make `mount` adopt compatible server markup.
 
+If `paintFocus` resolves and paints inline mark-state geometry, return that
+destination `ChartScene`. The host will use it for subsequent pointer hits;
+returning nothing preserves base-scene interaction for simpler renderers.
+
 Use `ChartRendererRenderContext.surface` instead of assuming `onRender` exposes
 an SVG element. Framework consumers pass `renderer` through
 `@tanstack/react-charts/core` or `@tanstack/octane-charts/core`.
@@ -236,8 +242,9 @@ navigation. Its generic types must remain identical to the chart points it
 receives.
 
 A `ChartSpatialIndexFactory` builds optional nearest-point acceleration from
-scene points. Return original typed points from the index. Do not erase them to
-`unknown` and cast them back in callbacks.
+scene points and receives the complete resolved scene as its second argument.
+Return original typed points from the index. Do not erase them to `unknown` and
+cast them back in callbacks.
 
 ## Extension checklist
 
diff --git a/packages/charts-core/docs/guides/tooltips-and-focus.md b/packages/charts-core/docs/guides/tooltips-and-focus.md
index 07b58783..87cfc900 100644
--- a/packages/charts-core/docs/guides/tooltips-and-focus.md
+++ b/packages/charts-core/docs/guides/tooltips-and-focus.md
@@ -48,6 +48,23 @@ category. A sparse snapped cursor can opt into
 `maxFocusDistance: Number.POSITIVE_INFINITY`; keep the finite default when
 empty space should mean no focus.
 
+Default `primary` and `group` presentation follows the canonical focused scene
+points. Equal x/y/series values in another facet do not implicitly paint a
+second focus marker. To synchronize a visual cursor across facets without
+turning those mirrors into additional selected data, add an ordinary focus
+mark with `whenFocused(..., { match: 'x' })` or `match: 'y'`. The tooltip and
+focus callback still receive the resolver's primary point or explicit focus
+group.
+
+```ts
+whenFocused(bandX(rows, { x: 'date' }), { match: 'x' })
+whenFocused(bandY(rows, { y: 'value' }), { match: 'y' })
+```
+
+These are presentation filters, not alternate selection strategies. The first
+paints a vertical band wherever the focused x value exists; the second paints a
+horizontal band wherever the focused y value exists.
+
 <iframe
   src="https://tanstack.com/charts/catalog/embed/35-grouped-tooltip/?theme=system&height=480"
   title="Grouped x-axis focus and tooltip across multiple lines"
@@ -161,8 +178,8 @@ const pointDefinition = defineChart(definition, {
 })
 ```
 
-Pointer anchoring is useful when a dense mark has a large hit region. Keyboard
-focus falls back to the primary point:
+Pointer anchoring is useful when a dense mark has a large interactive
+primitive. Keyboard focus falls back to the primary point:
 
 ```ts
 const pointerDefinition = defineChart(definition, {
@@ -441,7 +458,9 @@ Do not supply a pointer-only strategy.
 
 Linear nearest-point search is deliberately small. For many independently
 focusable points, pass a `ChartSpatialIndexFactory` built with an optional
-spatial dependency. The host rebuilds the index when scene points change.
+spatial dependency. The factory also receives the resolved scene when it needs
+primitive bounds rather than point anchors. The host rebuilds the index when
+the scene changes.
 
 See [Large Data](./large-data.md) before adding an index: when many rows share
 the same pixels, a bounded representation is usually more useful than faster
diff --git a/packages/charts-core/docs/reference/custom-extensions.md b/packages/charts-core/docs/reference/custom-extensions.md
index 4a399cf7..50e05d09 100644
--- a/packages/charts-core/docs/reference/custom-extensions.md
+++ b/packages/charts-core/docs/reference/custom-extensions.md
@@ -195,9 +195,10 @@ for the contract.
 ## Spatial indexes
 
 `ChartSpatialIndexFactory` replaces the default linear pointer lookup without
-changing scene compilation. Build the index from supplied points and return
-the nearest point within the requested distance. The host recreates it when
-the scene or factory changes.
+changing scene compilation. Build a point-only index from its first argument,
+or use its second `scene` argument to index resolved primitive bounds. Return
+the nearest original point within the requested distance. The host recreates
+the index when the scene or factory changes.
 
 See [Spatial indexes](./focus-and-interaction.md#spatial-indexes). The
 appropriate granular spatial primitive can be brought through the boundary
diff --git a/packages/charts-core/docs/reference/focus-and-interaction.md b/packages/charts-core/docs/reference/focus-and-interaction.md
index 83669685..a9273aca 100644
--- a/packages/charts-core/docs/reference/focus-and-interaction.md
+++ b/packages/charts-core/docs/reference/focus-and-interaction.md
@@ -4,9 +4,10 @@ description: Configure pointer focus, grouped focus, keyboard navigation, native
 ---
 
 The DOM host and framework adapters provide point-level interaction from each
-mark's emitted `ChartPoint` values. The defaults cover nearest-point pointer
-focus, linear keyboard navigation, activation, and an optional native tooltip.
-Definitions own these policies; adapters only mount them and report events.
+mark's emitted `ChartPoint` values and rendered scene primitives. The defaults
+cover geometry-aware pointer focus, linear keyboard navigation, activation,
+and an optional native tooltip. Definitions own these policies; adapters only
+mount them and report events.
 
 ## Default behavior
 
@@ -32,28 +33,48 @@ normal tab-order participation while keeping keyboard handling enabled. Set
 When neither `focus` nor `spatialIndex` is supplied, pointer resolution has two
 stages:
 
-1. The topmost scene point whose `hitRegion` contains the pointer wins. Point
-   order follows paint order.
-2. If no region contains the pointer, `focusAffinity` ranks the fallback.
-   `x` and `y` compare distance from that axis boundary first and use complete
-   geometry distance to break ties; `xy` compares complete geometry distance;
-   `geometry` has no off-shape fallback.
+1. The topmost interactive scene primitive containing the pointer wins. The
+   resolver traverses the final scene in reverse paint order and applies nested
+   translations and clips.
+2. If no primitive contains the pointer, its `interaction.affinity` ranks the
+   fallback. `x` and `y` compare distance from that axis boundary first and use
+   complete geometry distance to break ties; `xy` compares complete geometry
+   distance; `geometry` has no off-shape fallback.
 
 `maxFocusDistance` applies to that primary boundary distance, not necessarily
-to the point used as the tooltip and keyboard anchor. Points without either
-field retain anchor-based two-dimensional distance.
-
-`ChartPoint.hitRegion` accepts painted rectangles, circles, and polygons.
-Built-in marks declare these natural defaults:
-
-| Mark                     | Hit region | Fallback |
-| ------------------------ | ---------- | -------- |
-| `barY`                   | Rectangle  | `x`      |
-| `barX`                   | Rectangle  | `y`      |
-| `lineY`, `areaY`         | None       | `x`      |
-| `rect`, `dot`, `hexagon` | Shape      | `xy`     |
-| `bandX`                  | Rectangle  | `x`      |
-| `bandY`                  | Rectangle  | `y`      |
+to the point used as the tooltip and keyboard anchor. A semantic point that is
+not attached to a scene primitive retains anchor-based two-dimensional
+distance.
+
+The primitive is the geometry source of truth: `rect` includes its rounded
+corners, `dot` uses its radius, `area` uses its polygon, and `polyline` and
+`rule` use their stroked paths. Its `interaction` attaches either one semantic
+point or the ordered points represented by a continuous primitive. Groups and
+labels cannot carry interaction metadata.
+
+Built-in marks attach these natural defaults:
+
+| Mark                     | Scene primitive       | Fallback |
+| ------------------------ | --------------------- | -------- |
+| `barY`                   | Rounded rectangle     | `x`      |
+| `barX`                   | Rounded rectangle     | `y`      |
+| `lineY`                  | Stroked polyline      | `x`      |
+| `areaY`                  | Filled area           | `x`      |
+| `areaX`                  | Filled area           | `y`      |
+| `rect`, `dot`, `hexagon` | Rect, circle, polygon | `xy`     |
+| `bandX`                  | Rounded rectangle     | `x`      |
+| `bandY`                  | Rounded rectangle     | `y`      |
+
+Facet layout rewrites the primitive's attached point references while leaving
+the primitive in local coordinates. The resolver therefore observes the same
+post-layout translations and clips as SVG and Canvas instead of maintaining a
+second geometry copy. Inline mark states similarly return a resolved scene to
+the host; during a transition, pointer selection intentionally follows that
+destination scene rather than interpolating a second hit-test scene.
+
+For curved `polyline` and `area` nodes, the current resolver uses the
+primitive's structured point geometry. Exact picking against an optional
+authored SVG path string remains a separate refinement.
 
 An explicit focus preset or custom strategy replaces this default resolver.
 
@@ -296,7 +317,7 @@ reports `null`; Enter and Space do nothing until a point is focused.
 
 ## Spatial indexes
 
-The default nearest-point lookup scans all interaction points. Dense charts can
+The default lookup scans the cached scene targets linearly. Dense charts can
 inject an index:
 
 ```ts
@@ -306,18 +327,21 @@ type ChartSpatialIndexFactory<
   TYValue extends ChartValue = ChartValue,
 > = (
   points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
+  scene: ChartScene<TDatum, TXValue, TYValue>,
 ) => ChartSpatialIndex<TDatum, TXValue, TYValue>
 ```
 
 The host rebuilds the index when the scene or definition changes. The index
-owns its search algorithm and must apply `maxDistance`.
+owns its search algorithm and must apply `maxDistance`. Existing point-only
+factories can ignore the second argument; geometry-aware indexes can traverse
+the resolved scene and use primitive bounds as their acceleration layer.
 Use the granular spatial primitive appropriate to the data; the boundary is
 described in [Scales and D3](../concepts/scales-and-d3.md).
 
-Supplying an index also replaces default hit-region containment and affinity
+Supplying an index also replaces default primitive containment and affinity
 ranking; the host does not add a linear safety scan after an indexed query. An
-index that wants identical geometry semantics should index the region bounds
-and perform exact shape checks on its candidates.
+index that wants identical geometry semantics should index scene-primitive
+bounds and perform exact shape checks on its candidates.
 
 A custom `focus` strategy takes precedence over `spatialIndex` for pointer
 resolution.
diff --git a/packages/charts-core/docs/reference/rendering-and-export.md b/packages/charts-core/docs/reference/rendering-and-export.md
index 58f53f5d..595be826 100644
--- a/packages/charts-core/docs/reference/rendering-and-export.md
+++ b/packages/charts-core/docs/reference/rendering-and-export.md
@@ -428,7 +428,10 @@ interface ChartSurface<
     clientX: number,
     clientY: number,
   ) => { x: number; y: number } | null
-  paintFocus: (focus: ChartFocusState<TDatum, TXValue, TYValue> | null) => void
+  paintFocus: (
+    focus: ChartFocusState<TDatum, TXValue, TYValue> | null,
+    pointer?: ChartTooltipPosition | null,
+  ) => ChartScene | void
   destroy: () => void
 }
 
@@ -458,7 +461,7 @@ interface ChartRenderer<
 | `ChartSurface.element`  | Expose the accessible, focusable root used by shared keyboard and focus handling                           |
 | `render()`              | Paint the complete scene and apply accessible name, class, tab index, ID prefix, and optional animation    |
 | `clientToScene()`       | Convert viewport client coordinates to scene coordinates, or return `null` when conversion is unavailable  |
-| `paintFocus()`          | Paint or clear the complete focus state: primary, group, source, and pinned status                         |
+| `paintFocus()`          | Paint or clear focus and optionally return the resolved destination scene used for subsequent pointer hits |
 | `destroy()`             | Release renderer-owned animation, observers, listeners, and resources                                      |
 
 `requestRender()` asks the shared host to rebuild and repaint on its next
@@ -467,6 +470,12 @@ animation frame; ordinary requests proceed only when responsive width changed.
 width or chart-option change, such as device-pixel ratio or resolved theme
 colors. Requests made before the same frame are coalesced.
 
+When focus activates inline mark-state geometry, return the resolved scene that
+the surface paints. The host uses that destination scene for subsequent
+pointer resolution while the renderer animates toward it. Returning `void`
+keeps the base scene as the interaction source and remains valid for renderers
+that do not resolve alternate scene geometry.
+
 The shared host continues to own runtime updates, responsive sizing, text
 measurement, focus resolution, keyboard behavior, native tooltips, selection,
 and callbacks. `ChartRendererRenderContext` reports the live `surface` instead
diff --git a/packages/charts-core/docs/reference/runtime-and-scene.md b/packages/charts-core/docs/reference/runtime-and-scene.md
index 20c2d51c..716f83d8 100644
--- a/packages/charts-core/docs/reference/runtime-and-scene.md
+++ b/packages/charts-core/docs/reference/runtime-and-scene.md
@@ -131,9 +131,12 @@ function findNearestPoint<
 ```
 
 Coordinates are in scene pixels. `maxDistance` defaults to `Infinity`.
-The function performs a linear scan of the scene's interaction points, using
-hit-region containment and mark affinity before anchor distance. For a large
-point set, supply a spatial index to the DOM or framework host; see
+The function caches a paint-ordered interaction target list for the scene,
+checks primitive containment first, and then applies each target's natural
+axis or geometric affinity. Scene traversal accumulates group translation and
+clipping, so the resolver and renderer consume the same post-layout tree.
+Semantic points not attached to primitives retain legacy anchor distance. For
+a large point set, supply a spatial index to the DOM or framework host; see
 [Focus and interaction](./focus-and-interaction.md#spatial-indexes).
 
 ## `ChartScene`
@@ -172,7 +175,8 @@ interface ChartScene<
 ## Scene nodes
 
 Every scene node has a stable `key`, optional `className`, optional
-`SceneStyle`, and optional `ariaHidden`.
+`SceneStyle`, and optional `ariaHidden`. Geometric primitives may also attach
+a `SceneInteraction`; groups and labels cannot.
 
 | `kind`     | Geometry                                                   |
 | ---------- | ---------------------------------------------------------- |
@@ -187,6 +191,29 @@ Every scene node has a stable `key`, optional `className`, optional
 `SceneStyle` supports fill, fill opacity, stroke, stroke opacity, stroke width,
 overall opacity, line cap, line join, and dash array.
 
+`SceneRect.inset` retains the resolved inset for absolute inline-state
+overrides. Its optional `insetAxis` is `x`, `y`, or `xy`; vertical and
+horizontal bars use only their categorical axis, while ordinary rectangles use
+both axes. Renderers consume the already-resolved rectangle geometry.
+
+```ts
+type SceneInteraction =
+  | {
+      point: ChartPoint
+      points?: never
+      affinity?: 'x' | 'y' | 'xy' | 'geometry'
+    }
+  | {
+      point?: never
+      points: readonly ChartPoint[]
+      affinity?: 'x' | 'y' | 'xy' | 'geometry'
+    }
+```
+
+Attach the exact point object returned in `MarkScene.points`. A continuous
+primitive can attach several points, allowing one rendered line or area to
+choose its nearest semantic sample without duplicating the primitive geometry.
+
 Custom marks should return the smallest honest scene tree and stable keys. The
 full initialization and render contracts are in
 [Custom extensions](./custom-extensions.md#custom-marks).
diff --git a/packages/charts-core/docs/reference/types.md b/packages/charts-core/docs/reference/types.md
index 7b5705e2..0a640106 100644
--- a/packages/charts-core/docs/reference/types.md
+++ b/packages/charts-core/docs/reference/types.md
@@ -137,10 +137,7 @@ The complete overloads and runtime rules are in
 | `MarkScene`             | Mark-owned scene nodes and optional interaction points                        |
 | `ChartScene`            | Complete renderer-neutral output                                              |
 | `ChartPoint`            | Typed interaction target                                                      |
-| `ChartHitRegion`        | Rectangle, circle, or polygon interaction geometry union                      |
-| `ChartRectHitRegion`    | Painted rectangular interaction bounds                                        |
-| `ChartCircleHitRegion`  | Painted circular interaction bounds                                           |
-| `ChartPolygonHitRegion` | Painted polygon interaction vertices                                          |
+| `SceneInteraction`      | Semantic point or points attached to a rendered scene primitive               |
 | `ChartTick`             | Semantic value, formatted label, and pixel position                           |
 | `ResolvedScale`         | Final positional scale                                                        |
 | `ResolvedColorScale`    | Final color scale                                                             |
@@ -231,9 +228,9 @@ See [DOM host](./dom-host.md) and
 | `ChartFocusSource`                    | Pointer, keyboard, programmatic, or restored source                    |
 | `ChartFocusFilter`                    | Focus-filtered mark matching configuration                             |
 | `ChartFocusMatch`                     | Primary, group, key, x, y, or series matching                          |
-| `ChartFocusAffinity`                  | Mark fallback axis after exact hit-region containment                  |
+| `ChartFocusAffinity`                  | Primitive fallback axis after exact geometry containment               |
 | `ChartSpatialIndex`                   | Nearest-point query                                                    |
-| `ChartSpatialIndexFactory`            | Builds an index from current scene points                              |
+| `ChartSpatialIndexFactory`            | Builds an index from current scene points and resolved scene           |
 | `ChartExtensionInput`                 | Generic bare-token or `{ use, ...options }` extension input            |
 | `ChartTooltipInput`                   | Tooltip extension token or configured extension options                |
 | `ChartTooltipExtensionToken`          | Environment-neutral contract implemented by host tooltip extensions    |
diff --git a/packages/charts-core/src/area-x.ts b/packages/charts-core/src/area-x.ts
index 31a9316e..befe2528 100644
--- a/packages/charts-core/src/area-x.ts
+++ b/packages/charts-core/src/area-x.ts
@@ -138,7 +138,6 @@ export function areaX<TDatum>(
       },
       render: ({ scales, color: resolveColor }) => {
         const nodes: SceneNode[] = []
-        const points: ChartPoint<TDatum>[] = []
 
         for (const [groupKey, indices] of groups) {
           const firstIndex = indices[0]
@@ -165,6 +164,7 @@ export function areaX<TDatum>(
                 )
           let right: (readonly [number, number])[] = []
           let left: (readonly [number, number])[] = []
+          let segmentPoints: ChartPoint<TDatum>[] = []
           let segmentIndex = 0
 
           const flush = () => {
@@ -176,6 +176,7 @@ export function areaX<TDatum>(
               key: `${id}:${groupKey}:segment:${segmentIndex}`,
               points: [...right, ...lower],
               path,
+              interaction: { points: segmentPoints, affinity: 'y' },
               style: {
                 fill,
                 fillOpacity: options.fillOpacity ?? 0.2,
@@ -185,6 +186,7 @@ export function areaX<TDatum>(
             })
             right = []
             left = []
+            segmentPoints = []
             segmentIndex += 1
           }
 
@@ -207,7 +209,7 @@ export function areaX<TDatum>(
             right.push([x, y])
             left.push([scales.x.map(x1Value), y])
             const key = `${id}:${groupKey}:${valueKey(keys[datumIndex])}`
-            points.push({
+            const point: ChartPoint<TDatum> = {
               key,
               markId: id,
               group,
@@ -222,7 +224,8 @@ export function areaX<TDatum>(
               x,
               y,
               color: fill,
-            })
+            }
+            segmentPoints.push(point)
           }
           flush()
         }
@@ -237,7 +240,6 @@ export function areaX<TDatum>(
               children: nodes,
             },
           ],
-          points,
         }
       },
     }
diff --git a/packages/charts-core/src/area.ts b/packages/charts-core/src/area.ts
index 1c82ac13..0506d9d7 100644
--- a/packages/charts-core/src/area.ts
+++ b/packages/charts-core/src/area.ts
@@ -113,7 +113,6 @@ export function areaY<TDatum>(
 
     return {
       id,
-      focusAffinity: 'x',
       states: markStates(data, options.states),
       seriesFromColor: options.z === undefined && options.color !== undefined,
       channels: {
@@ -133,7 +132,6 @@ export function areaY<TDatum>(
       },
       render: ({ scales, color: resolveColor }) => {
         const nodes: SceneNode[] = []
-        const points: ChartPoint<TDatum>[] = []
 
         for (const [groupKey, indices] of groups) {
           const firstIndex = indices[0]
@@ -160,6 +158,7 @@ export function areaY<TDatum>(
                 )
           let top: (readonly [number, number])[] = []
           let bottom: (readonly [number, number])[] = []
+          let segmentPoints: ChartPoint<TDatum>[] = []
           let segmentIndex = 0
 
           const flush = () => {
@@ -171,6 +170,7 @@ export function areaY<TDatum>(
               key: `${id}:${groupKey}:segment:${segmentIndex}`,
               points: [...top, ...lower],
               path,
+              interaction: { points: segmentPoints, affinity: 'x' },
               style: {
                 fill,
                 fillOpacity: options.fillOpacity ?? 0.2,
@@ -180,6 +180,7 @@ export function areaY<TDatum>(
             })
             top = []
             bottom = []
+            segmentPoints = []
             segmentIndex += 1
           }
 
@@ -202,7 +203,7 @@ export function areaY<TDatum>(
             top.push([x, y])
             bottom.push([x, scales.y.map(y1Value)])
             const key = `${id}:${groupKey}:${valueKey(keys[datumIndex])}`
-            points.push({
+            const point: ChartPoint<TDatum> = {
               key,
               markId: id,
               group,
@@ -217,7 +218,8 @@ export function areaY<TDatum>(
               x,
               y,
               color: fill,
-            })
+            }
+            segmentPoints.push(point)
           }
           flush()
         }
@@ -232,7 +234,6 @@ export function areaY<TDatum>(
               children: nodes,
             },
           ],
-          points,
         }
       },
     }
diff --git a/packages/charts-core/src/band.ts b/packages/charts-core/src/band.ts
index 16fdae71..c8c3657e 100644
--- a/packages/charts-core/src/band.ts
+++ b/packages/charts-core/src/band.ts
@@ -77,7 +77,6 @@ export function bandX<
 
     return {
       id,
-      focusAffinity: 'x',
       channels: {
         x: { scale: 'x', values: values.filter(isChartValue) },
         color: { scale: 'color', values: colorValues.filter(isChartKey) },
@@ -88,7 +87,6 @@ export function bandX<
           inferBandwidth(scales.x, values, chart.width, data.length)
         const inset = Number.isFinite(resolved.inset) ? resolved.inset! : 0
         const nodes: SceneNode[] = []
-        const points: ChartPoint<TDatum>[] = []
         data.forEach((datum, index) => {
           const xValue = values[index]
           if (!isChartValue(xValue)) return
@@ -104,17 +102,7 @@ export function bandX<
           const key = `${id}:${valueKey(group)}:${valueKey(keys[index])}`
           const left = x - width / 2 + inset
           const paintedWidth = Math.max(0, width - inset * 2)
-          nodes.push({
-            kind: 'rect',
-            key,
-            x: left,
-            y: chart.y,
-            width: paintedWidth,
-            height: chart.height,
-            radius: resolved.radius,
-            style: { fill, fillOpacity: resolved.fillOpacity },
-          })
-          points.push({
+          const point: ChartPoint<TDatum> = {
             key,
             markId: id,
             group,
@@ -125,17 +113,21 @@ export function bandX<
             yValue: 0,
             x,
             y: chart.y + chart.height / 2,
-            hitRegion: {
-              kind: 'rect',
-              x: left,
-              y: chart.y,
-              width: paintedWidth,
-              height: chart.height,
-            },
             color: fill,
+          }
+          nodes.push({
+            kind: 'rect',
+            key,
+            x: left,
+            y: chart.y,
+            width: paintedWidth,
+            height: chart.height,
+            radius: resolved.radius,
+            interaction: { point, affinity: 'x' },
+            style: { fill, fillOpacity: resolved.fillOpacity },
           })
         })
-        return { nodes, points }
+        return { nodes }
       },
     }
   }) as ChartMark<
@@ -180,7 +172,6 @@ export function bandY<
 
     return {
       id,
-      focusAffinity: 'y',
       channels: {
         y: { scale: 'y', values: values.filter(isChartValue) },
         color: { scale: 'color', values: colorValues.filter(isChartKey) },
@@ -191,7 +182,6 @@ export function bandY<
           inferBandwidth(scales.y, values, chart.height, data.length)
         const inset = Number.isFinite(resolved.inset) ? resolved.inset! : 0
         const nodes: SceneNode[] = []
-        const points: ChartPoint<TDatum>[] = []
         data.forEach((datum, index) => {
           const yValue = values[index]
           if (!isChartValue(yValue)) return
@@ -207,17 +197,7 @@ export function bandY<
           const key = `${id}:${valueKey(group)}:${valueKey(keys[index])}`
           const top = y - height / 2 + inset
           const paintedHeight = Math.max(0, height - inset * 2)
-          nodes.push({
-            kind: 'rect',
-            key,
-            x: chart.x,
-            y: top,
-            width: chart.width,
-            height: paintedHeight,
-            radius: resolved.radius,
-            style: { fill, fillOpacity: resolved.fillOpacity },
-          })
-          points.push({
+          const point: ChartPoint<TDatum> = {
             key,
             markId: id,
             group,
@@ -228,17 +208,21 @@ export function bandY<
             yValue,
             x: chart.x + chart.width / 2,
             y,
-            hitRegion: {
-              kind: 'rect',
-              x: chart.x,
-              y: top,
-              width: chart.width,
-              height: paintedHeight,
-            },
             color: fill,
+          }
+          nodes.push({
+            kind: 'rect',
+            key,
+            x: chart.x,
+            y: top,
+            width: chart.width,
+            height: paintedHeight,
+            radius: resolved.radius,
+            interaction: { point, affinity: 'y' },
+            style: { fill, fillOpacity: resolved.fillOpacity },
           })
         })
-        return { nodes, points }
+        return { nodes }
       },
     }
   }) as ChartMark<
diff --git a/packages/charts-core/src/bar.ts b/packages/charts-core/src/bar.ts
index 71bafb13..5f0253d7 100644
--- a/packages/charts-core/src/bar.ts
+++ b/packages/charts-core/src/bar.ts
@@ -133,7 +133,6 @@ export function barY<TDatum>(
 
     return {
       id,
-      focusAffinity: 'x',
       states: markStates(data, options.states),
       seriesFromColor:
         options.z === undefined &&
@@ -166,7 +165,6 @@ export function barY<TDatum>(
         const groupBandwidth = groupScale?.bandwidth ?? totalBandwidth
         const inset = Math.max(0, options.inset ?? 0)
         const nodes: SceneNode[] = []
-        const points: ChartPoint<TDatum>[] = []
 
         data.forEach((datum, datumIndex) => {
           const xValue = xValues[datumIndex]
@@ -198,21 +196,7 @@ export function barY<TDatum>(
           const width = Math.max(0, groupBandwidth - inset * 2)
           const height = Math.abs(baselinePosition - valuePosition)
           const key = `${id}:${valueKey(group)}:${valueKey(keys[datumIndex])}`
-          nodes.push({
-            kind: 'rect',
-            key,
-            x,
-            y,
-            width,
-            height,
-            radius: options.radius,
-            inset,
-            style: {
-              fill,
-              fillOpacity: options.fillOpacity,
-            },
-          })
-          points.push({
+          const point: ChartPoint<TDatum> = {
             key,
             markId: id,
             group,
@@ -226,8 +210,23 @@ export function barY<TDatum>(
             yInterval: 'difference',
             x: center - totalBandwidth / 2 + groupOffset + groupBandwidth / 2,
             y: valuePosition,
-            hitRegion: { kind: 'rect', x, y, width, height },
             color: fill,
+          }
+          nodes.push({
+            kind: 'rect',
+            key,
+            x,
+            y,
+            width,
+            height,
+            radius: options.radius,
+            inset,
+            insetAxis: 'x',
+            interaction: { point, affinity: 'x' },
+            style: {
+              fill,
+              fillOpacity: options.fillOpacity,
+            },
           })
         })
 
@@ -241,7 +240,6 @@ export function barY<TDatum>(
               children: nodes,
             },
           ],
-          points,
         }
       },
     }
@@ -315,7 +313,6 @@ export function barX<TDatum>(
 
     return {
       id,
-      focusAffinity: 'y',
       states: markStates(data, options.states),
       seriesFromColor:
         options.z === undefined &&
@@ -348,7 +345,6 @@ export function barX<TDatum>(
         const groupBandwidth = groupScale?.bandwidth ?? totalBandwidth
         const inset = Math.max(0, options.inset ?? 0)
         const nodes: SceneNode[] = []
-        const points: ChartPoint<TDatum>[] = []
 
         data.forEach((datum, datumIndex) => {
           const xValue = rawXValues[datumIndex]
@@ -380,21 +376,7 @@ export function barX<TDatum>(
           const width = Math.abs(baselinePosition - valuePosition)
           const height = Math.max(0, groupBandwidth - inset * 2)
           const key = `${id}:${valueKey(group)}:${valueKey(keys[datumIndex])}`
-          nodes.push({
-            kind: 'rect',
-            key,
-            x,
-            y,
-            width,
-            height,
-            radius: options.radius,
-            inset,
-            style: {
-              fill,
-              fillOpacity: options.fillOpacity,
-            },
-          })
-          points.push({
+          const point: ChartPoint<TDatum> = {
             key,
             markId: id,
             group,
@@ -408,8 +390,23 @@ export function barX<TDatum>(
             xInterval: 'difference',
             x: valuePosition,
             y: center - totalBandwidth / 2 + groupOffset + groupBandwidth / 2,
-            hitRegion: { kind: 'rect', x, y, width, height },
             color: fill,
+          }
+          nodes.push({
+            kind: 'rect',
+            key,
+            x,
+            y,
+            width,
+            height,
+            radius: options.radius,
+            inset,
+            insetAxis: 'y',
+            interaction: { point, affinity: 'y' },
+            style: {
+              fill,
+              fillOpacity: options.fillOpacity,
+            },
           })
         })
 
@@ -423,7 +420,6 @@ export function barX<TDatum>(
               children: nodes,
             },
           ],
-          points,
         }
       },
     }
diff --git a/packages/charts-core/src/canvas.ts b/packages/charts-core/src/canvas.ts
index 1997f9f1..85d8cb61 100644
--- a/packages/charts-core/src/canvas.ts
+++ b/packages/charts-core/src/canvas.ts
@@ -246,6 +246,7 @@ export function createCanvasChartRenderer<
             resolver,
             root,
           )
+          return resolved.scene
         },
         destroy() {
           if (destroyed) return
diff --git a/packages/charts-core/src/dom-types.ts b/packages/charts-core/src/dom-types.ts
index 01fb5432..122de606 100644
--- a/packages/charts-core/src/dom-types.ts
+++ b/packages/charts-core/src/dom-types.ts
@@ -41,7 +41,7 @@ export interface ChartSurface<
   paintFocus: (
     focus: ChartFocusState<TDatum, TXValue, TYValue> | null,
     pointer?: ChartTooltipPosition | null,
-  ) => void
+  ) => ChartScene<any, any, any> | void
   destroy: () => void
 }
 
diff --git a/packages/charts-core/src/dot.ts b/packages/charts-core/src/dot.ts
index f439578e..15029653 100644
--- a/packages/charts-core/src/dot.ts
+++ b/packages/charts-core/src/dot.ts
@@ -90,7 +90,6 @@ export function dot<TDatum>(
 
     return {
       id,
-      focusAffinity: 'xy',
       states: markStates(data, options.states),
       channels: {
         x: { scale: 'x', values: xValues.filter(isChartValue) },
@@ -102,7 +101,6 @@ export function dot<TDatum>(
       },
       render: ({ scales, color: resolveColor }) => {
         const nodes: SceneNode[] = []
-        const points: ChartPoint<TDatum>[] = []
 
         data.forEach((datum, datumIndex) => {
           const xValue = xValues[datumIndex]
@@ -121,12 +119,26 @@ export function dot<TDatum>(
           const x = scales.x.map(xValue)
           const y = scales.y.map(yValue)
           const key = `${id}:${groupKey}:${valueKey(keys[datumIndex])}`
+          const point: ChartPoint<TDatum> = {
+            key,
+            markId: id,
+            group,
+            groupLabel: group == null ? id : String(group),
+            datum,
+            datumIndex,
+            xValue,
+            yValue,
+            x,
+            y,
+            color,
+          }
           nodes.push({
             kind: 'dot',
             key,
             x,
             y,
             radius,
+            interaction: { point },
             style: {
               fill: color,
               fillOpacity: options.fillOpacity,
@@ -135,20 +147,6 @@ export function dot<TDatum>(
               strokeWidth: options.strokeWidth,
             },
           })
-          points.push({
-            key,
-            markId: id,
-            group,
-            groupLabel: group == null ? id : String(group),
-            datum,
-            datumIndex,
-            xValue,
-            yValue,
-            x,
-            y,
-            hitRegion: { kind: 'circle', x, y, radius },
-            color,
-          })
         })
 
         return {
@@ -161,7 +159,6 @@ export function dot<TDatum>(
               children: nodes,
             },
           ],
-          points,
         }
       },
     }
diff --git a/packages/charts-core/src/facet.test.ts b/packages/charts-core/src/facet.test.ts
index bbff813c..3785e5e6 100644
--- a/packages/charts-core/src/facet.test.ts
+++ b/packages/charts-core/src/facet.test.ts
@@ -1,11 +1,15 @@
 import { describe, expect, it } from 'vitest'
-import { scaleLinear } from 'd3-scale'
+import { scaleBand, scaleLinear } from 'd3-scale'
+import { bandX, bandY } from './band'
+import { barY } from './bar'
 import { facet, facetChart } from './facet'
+import { whenFocused } from './focus-mark'
 import { measureSceneLabelBounds } from './guide-layout'
 import { lineY } from './line'
 import { createMark } from './mark'
 import { createChartScene } from './scene'
 import { renderChartSvg } from './svg'
+import { svgChartRenderer } from './svg-surface'
 import { linearAxes } from './test-scales'
 import type { SceneNode } from './types'
 
@@ -338,6 +342,186 @@ describe('facets', () => {
     )
   })
 
+  it('paints one primary marker when facet points share every channel value', () => {
+    const data = ['North', 'South'].flatMap((panel) =>
+      [72, 88].map((value, x) => ({ panel, x, value })),
+    )
+    const scene = createChartScene(
+      facetChart(data, {
+        by: 'panel',
+        columns: 2,
+        axes: 'cell',
+        chart: (rows) => ({
+          marks: [barY(rows, { x: 'x', y: 'value' })],
+          x: { scale: scaleBand<number>().domain([0, 1]) },
+          y: { scale: scaleLinear().domain([0, 100]) },
+          guides: false,
+          margin: 0,
+        }),
+      }),
+      { width: 640, height: 260 },
+    )
+    const focusLayers = flatten(scene.nodes).filter(
+      (node) => node.kind === 'group' && node.focus,
+    )
+    const primary = scene.points.find(
+      (point) => point.datum.panel === 'North' && point.datum.x === 1,
+    )
+    expect(primary).toBeDefined()
+    expect(focusLayers).toHaveLength(1)
+    if (!primary) return
+
+    const container = document.createElement('div')
+    const surface = svgChartRenderer.mount(container, () => {})
+    surface.render(scene, { ariaLabel: 'Default faceted focus' })
+    surface.paintFocus({
+      primary,
+      group: [primary],
+      source: 'pointer',
+      pinned: false,
+    })
+
+    const visibleLayers = [
+      ...container.querySelectorAll<SVGGElement>(
+        '[data-ts-focus-layer][visibility="visible"]',
+      ),
+    ]
+    const visibleMarkers = visibleLayers.flatMap((layer) =>
+      [...layer.querySelectorAll<SVGElement>('[visibility="visible"]')].filter(
+        (node) => node.matches('circle, rect'),
+      ),
+    )
+    expect(visibleLayers).toHaveLength(1)
+    expect(visibleMarkers).toHaveLength(1)
+    expect(visibleMarkers[0]?.dataset.tsKey).toContain('string:North')
+    surface.destroy()
+  })
+
+  it('synchronizes facet cursors only through an explicit x focus mark', () => {
+    const data = ['North', 'South'].flatMap((panel) =>
+      [72, 88].map((value, x) => ({ panel, x, value })),
+    )
+    const scene = createChartScene(
+      facetChart(data, {
+        by: 'panel',
+        columns: 2,
+        axes: 'cell',
+        chart: (rows) => ({
+          marks: [
+            whenFocused(
+              bandX(rows, {
+                x: 'x',
+                fill: '#d4d4d4',
+                inset: 4,
+              }),
+              { match: 'x' },
+            ),
+            barY(rows, { x: 'x', y: 'value' }),
+          ],
+          x: { scale: scaleBand<number>().domain([0, 1]) },
+          y: { scale: scaleLinear().domain([0, 100]) },
+          guides: false,
+          margin: 0,
+        }),
+      }),
+      { width: 640, height: 260 },
+    )
+    const primary = scene.points.find(
+      (point) => point.datum.panel === 'North' && point.datum.x === 1,
+    )
+    expect(primary).toBeDefined()
+    if (!primary) return
+
+    const container = document.createElement('div')
+    const surface = svgChartRenderer.mount(container, () => {})
+    surface.render(scene, { ariaLabel: 'Synchronized faceted focus' })
+    surface.paintFocus({
+      primary,
+      group: [primary],
+      source: 'pointer',
+      pinned: false,
+    })
+
+    const visibleLayers = [
+      ...container.querySelectorAll<SVGGElement>(
+        '[data-ts-focus-layer][visibility="visible"]',
+      ),
+    ]
+    const visibleBands = visibleLayers.flatMap((layer) => [
+      ...layer.querySelectorAll<SVGRectElement>('rect[visibility="visible"]'),
+    ])
+    expect(visibleLayers).toHaveLength(2)
+    expect(visibleBands).toHaveLength(2)
+    expect(
+      new Set(visibleBands.map((band) => band.getAttribute('x'))),
+    ).toHaveLength(1)
+    surface.destroy()
+  })
+
+  it('synchronizes facet cursors only through an explicit y focus mark', () => {
+    const data = ['North', 'South'].flatMap((panel) =>
+      [72, 88].map((value, x) => ({ panel, x, value })),
+    )
+    const scene = createChartScene(
+      facetChart(data, {
+        by: 'panel',
+        columns: 2,
+        axes: 'cell',
+        chart: (rows) => ({
+          marks: [
+            whenFocused(
+              bandY(rows, {
+                y: 'value',
+                fill: '#d4d4d4',
+                inset: -4,
+              }),
+              { match: 'y' },
+            ),
+            barY(rows, { x: 'x', y: 'value' }),
+          ],
+          x: { scale: scaleBand<number>().domain([0, 1]) },
+          y: { scale: scaleLinear().domain([0, 100]) },
+          guides: false,
+          margin: 0,
+        }),
+      }),
+      { width: 640, height: 260 },
+    )
+    const primary = scene.points.find(
+      (point) => point.datum.panel === 'North' && point.datum.value === 88,
+    )
+    expect(primary).toBeDefined()
+    if (!primary) return
+
+    const container = document.createElement('div')
+    const surface = svgChartRenderer.mount(container, () => {})
+    surface.render(scene, { ariaLabel: 'Y-synchronized faceted focus' })
+    surface.paintFocus({
+      primary,
+      group: [primary],
+      source: 'pointer',
+      pinned: false,
+    })
+
+    const visibleLayers = [
+      ...container.querySelectorAll<SVGGElement>(
+        '[data-ts-focus-layer][visibility="visible"]',
+      ),
+    ]
+    const visibleBands = visibleLayers.flatMap((layer) => [
+      ...layer.querySelectorAll<SVGRectElement>('rect[visibility="visible"]'),
+    ])
+    expect(visibleLayers).toHaveLength(2)
+    expect(visibleBands).toHaveLength(2)
+    expect(
+      visibleBands.every((band) => Number(band.getAttribute('height')) > 0),
+    ).toBe(true)
+    expect(
+      new Set(visibleBands.map((band) => band.getAttribute('y'))),
+    ).toHaveLength(1)
+    surface.destroy()
+  })
+
   it('retains complete cell axes when independent scales are explicit', () => {
     const data = [
       { group: 'A', value: 1 },
diff --git a/packages/charts-core/src/facet.ts b/packages/charts-core/src/facet.ts
index 4cf8bdac..4d717154 100644
--- a/packages/charts-core/src/facet.ts
+++ b/packages/charts-core/src/facet.ts
@@ -281,15 +281,8 @@ function renderCellAxes<TDatum>(options: CellRenderOptions<TDatum>) {
       layout,
     )
     const identity = valueKey(entry.key)
-    for (const point of offsetPoints(
-      id,
-      identity,
-      scene.points,
-      x,
-      y + labelHeight,
-    )) {
-      points.push(point)
-    }
+    const offset = offsetScene(id, identity, scene, x, y + labelHeight)
+    points.push(...offset.points)
     return facetCell({
       id,
       identity,
@@ -301,7 +294,7 @@ function renderCellAxes<TDatum>(options: CellRenderOptions<TDatum>) {
       showLabel,
       label,
       theme,
-      nodes: scene.nodes,
+      nodes: offset.nodes,
     })
   })
   return facetScene(id, children, points)
@@ -368,9 +361,8 @@ function renderOuterAxes<TDatum>(options: OuterRenderOptions<TDatum>) {
     )
     const identity = valueKey(entry.key)
     deepestPlotBottom = Math.max(deepestPlotBottom, plotY + plotHeight)
-    for (const point of offsetPoints(id, identity, scene.points, x, plotY)) {
-      points.push(point)
-    }
+    const offset = offsetScene(id, identity, scene, x, plotY)
+    points.push(...offset.points)
 
     if (axis && column === 0) {
       const yChildren = axis.children.filter(
@@ -426,7 +418,7 @@ function renderOuterAxes<TDatum>(options: OuterRenderOptions<TDatum>) {
       showLabel,
       label,
       theme,
-      nodes: scene.nodes.filter((node) => node.key !== 'axes'),
+      nodes: offset.nodes.filter((node) => node.key !== 'axes'),
     })
   })
 
@@ -741,39 +733,112 @@ function mergeTheme<TDatum>(
   }
 }
 
-function offsetPoints<TDatum>(
+function offsetScene<TDatum>(
   id: string,
   identity: string,
-  points: readonly ChartPoint<TDatum>[],
+  scene: ChartScene<TDatum>,
   x: number,
   y: number,
-): ChartPoint<TDatum>[] {
-  return points.map((point) => ({
-    ...point,
-    key: `${id}:${identity}:${point.key}`,
-    x: point.x + x,
-    y: point.y + y,
-    ...(point.hitRegion
-      ? { hitRegion: offsetHitRegion(point.hitRegion, x, y) }
-      : {}),
-  }))
+): { nodes: readonly SceneNode[]; points: readonly ChartPoint<TDatum>[] } {
+  const prefix = `${id}:${identity}`
+  const pointMap = new Map<ChartPoint, ChartPoint<TDatum>>()
+  const mapPoint = (point: ChartPoint): ChartPoint<TDatum> => {
+    const existing = pointMap.get(point)
+    if (existing) return existing
+    const mapped = {
+      ...point,
+      key: `${id}:${identity}:${point.key}`,
+      x: point.x + x,
+      y: point.y + y,
+    } as ChartPoint<TDatum>
+    pointMap.set(point, mapped)
+    return mapped
+  }
+  const points = scene.points.map(mapPoint)
+  return {
+    nodes: mapScenePoints(
+      withoutDefaultFocusLayers(scene.nodes),
+      mapPoint,
+      prefix,
+    ),
+    points,
+  }
 }
 
-function offsetHitRegion(
-  region: NonNullable<ChartPoint['hitRegion']>,
-  x: number,
-  y: number,
-): NonNullable<ChartPoint['hitRegion']> {
-  switch (region.kind) {
-    case 'rect':
-    case 'circle':
-      return { ...region, x: region.x + x, y: region.y + y }
-    case 'polygon':
+function withoutDefaultFocusLayers(
+  nodes: readonly SceneNode[],
+): readonly SceneNode[] {
+  return nodes.flatMap((node): readonly SceneNode[] => {
+    if (node.kind !== 'group') return [node]
+    if (
+      node.focus &&
+      node.className?.includes('ts-chart__focus-layer--default')
+    ) {
+      return []
+    }
+    return [
+      {
+        ...node,
+        children: withoutDefaultFocusLayers(node.children),
+      },
+    ]
+  })
+}
+
+function mapScenePoints(
+  nodes: readonly SceneNode[],
+  mapPoint: (point: ChartPoint) => ChartPoint,
+  prefix: string,
+  prefixKeys = false,
+): readonly SceneNode[] {
+  return nodes.map((node): SceneNode => {
+    const shouldPrefixKeys =
+      prefixKeys ||
+      (node.kind === 'group' &&
+        (node.focus !== undefined || node.className === 'ts-chart__marks'))
+    const key = shouldPrefixKeys ? `${prefix}:${node.key}` : node.key
+    if (node.kind === 'group') {
       return {
-        ...region,
-        points: region.points.map((point) => [point[0] + x, point[1] + y]),
+        ...node,
+        key,
+        children: mapScenePoints(
+          node.children,
+          mapPoint,
+          prefix,
+          shouldPrefixKeys,
+        ),
+        ...(node.focus
+          ? {
+              focus: {
+                ...node.focus,
+                points: node.focus.points.map(mapPoint),
+              },
+            }
+          : {}),
+        ...(node.states
+          ? {
+              states: {
+                ...node.states,
+                points: node.states.points.map(mapPoint),
+              },
+            }
+          : {}),
       }
-  }
+    }
+    if (node.kind === 'label' || !node.interaction) {
+      return shouldPrefixKeys ? { ...node, key } : node
+    }
+    return {
+      ...node,
+      key,
+      interaction: node.interaction.point
+        ? { ...node.interaction, point: mapPoint(node.interaction.point) }
+        : {
+            ...node.interaction,
+            points: node.interaction.points.map(mapPoint),
+          },
+    }
+  })
 }
 
 function maxSceneMargins(scenes: readonly ChartScene[]): ChartMargin {
diff --git a/packages/charts-core/src/focus-layer.ts b/packages/charts-core/src/focus-layer.ts
index 5f0adc01..9871825f 100644
--- a/packages/charts-core/src/focus-layer.ts
+++ b/packages/charts-core/src/focus-layer.ts
@@ -96,18 +96,14 @@ export function matchesFocusPoint(
     )
   }
   if (match === 'group') {
-    return focus.group.some((point) => sameSemanticPoint(candidate, point))
+    return focus.group.some((point) => sameFocusedPoint(candidate, point))
   }
-  return sameSemanticPoint(candidate, focus.primary)
+  return sameFocusedPoint(candidate, focus.primary)
 }
 
-function sameSemanticPoint(left: ChartPoint, right: ChartPoint) {
-  return (
-    left.datum === right.datum ||
-    (sameValue(left.xValue, right.xValue) &&
-      sameValue(left.yValue, right.yValue) &&
-      sameValue(left.group, right.group))
-  )
+function sameFocusedPoint(left: ChartPoint, right: ChartPoint) {
+  if (left === right || left.key === right.key) return true
+  return isReference(left.datum) && left.datum === right.datum
 }
 
 function sameValue(left: unknown, right: unknown) {
@@ -122,6 +118,12 @@ function keysRelate(left: string, right: string) {
   )
 }
 
+function isReference(value: unknown) {
+  return (
+    (typeof value === 'object' && value !== null) || typeof value === 'function'
+  )
+}
+
 function visitNodes(
   nodes: readonly SceneNode[],
   visit: (node: SceneNode) => void,
diff --git a/packages/charts-core/src/focus-mark.test.ts b/packages/charts-core/src/focus-mark.test.ts
index 0ad23a09..01e906a4 100644
--- a/packages/charts-core/src/focus-mark.test.ts
+++ b/packages/charts-core/src/focus-mark.test.ts
@@ -1,12 +1,13 @@
 import { scaleBand, scaleLinear } from 'd3-scale'
 import { describe, expect, it } from 'vitest'
 import { bandX } from './band'
-import { barY } from './bar'
+import { barX, barY } from './bar'
 import { dot } from './dot'
 import { whenFocused } from './focus-mark'
 import { lineY } from './line'
 import { createChartScene, defineChart } from './scene'
 import { svgChartRenderer } from './svg-surface'
+import type { ChartScene, ChartValue } from './types'
 
 describe('focus-filtered marks', () => {
   const rows = [
@@ -188,6 +189,103 @@ describe('inline mark states', () => {
     surface.destroy()
   })
 
+  it('applies bar inset states only along the categorical axis', () => {
+    const vertical = createChartScene(
+      defineChart({
+        marks: [
+          barY([{ id: 'vertical', category: 'A', value: 8 }], {
+            x: 'category',
+            y: 'value',
+            key: 'id',
+            inset: 12,
+            states: [
+              {
+                when: { focus: 'primary' },
+                style: { inset: 2 },
+                transition: { duration: 0 },
+              },
+            ],
+          }),
+        ],
+        x: { scale: scaleBand<string>().domain(['A']) },
+        y: { scale: scaleLinear().domain([0, 10]) },
+      }),
+      { width: 240, height: 180 },
+    )
+    const horizontal = createChartScene(
+      defineChart({
+        marks: [
+          barX([{ id: 'horizontal', category: 'A', value: 8 }], {
+            x: 'value',
+            y: 'category',
+            key: 'id',
+            inset: 12,
+            states: [
+              {
+                when: { focus: 'primary' },
+                style: { inset: 2 },
+                transition: { duration: 0 },
+              },
+            ],
+          }),
+        ],
+        x: { scale: scaleLinear().domain([0, 10]) },
+        y: { scale: scaleBand<string>().domain(['A']) },
+      }),
+      { width: 240, height: 180 },
+    )
+
+    const inspect = <
+      TDatum,
+      TXValue extends ChartValue,
+      TYValue extends ChartValue,
+    >(
+      resolved: ChartScene<TDatum, TXValue, TYValue>,
+    ) => {
+      const primary = resolved.points[0]
+      if (!primary) throw new Error('Expected a bar point')
+      const container = document.createElement('div')
+      const surface = svgChartRenderer.mount(container, () => {})
+      surface.render(resolved, { ariaLabel: 'Stateful bar' })
+      const read = () => {
+        const rect = [
+          ...container.querySelectorAll<SVGRectElement>('rect'),
+        ].find((candidate) => candidate.dataset.tsKey === primary.key)
+        if (!rect) throw new Error('Expected a bar rectangle')
+        return {
+          x: Number(rect.getAttribute('x')),
+          y: Number(rect.getAttribute('y')),
+          width: Number(rect.getAttribute('width')),
+          height: Number(rect.getAttribute('height')),
+        }
+      }
+      const before = read()
+      surface.paintFocus({
+        primary,
+        group: [primary],
+        source: 'pointer',
+        pinned: false,
+      })
+      const after = read()
+      surface.destroy()
+      return { before, after }
+    }
+
+    const verticalState = inspect(vertical)
+    expect(verticalState.after.x).toBe(verticalState.before.x - 10)
+    expect(verticalState.after.width).toBe(verticalState.before.width + 20)
+    expect(verticalState.after.y).toBe(verticalState.before.y)
+    expect(verticalState.after.height).toBe(verticalState.before.height)
+
+    const horizontalState = inspect(horizontal)
+    expect(horizontalState.after.x).toBe(horizontalState.before.x)
+    expect(horizontalState.after.width).toBe(horizontalState.before.width)
+    expect(horizontalState.after.y).toBe(horizontalState.before.y - 10)
+    expect(horizontalState.after.height).toBe(
+      horizontalState.before.height + 20,
+    )
+  })
+
   it('applies series states to line geometry through the point index', () => {
     const seriesRows = [
       { id: 'a:1', series: 'A', x: 1, y: 2 },
diff --git a/packages/charts-core/src/hexagon.ts b/packages/charts-core/src/hexagon.ts
index 32b795a5..2d917f67 100644
--- a/packages/charts-core/src/hexagon.ts
+++ b/packages/charts-core/src/hexagon.ts
@@ -84,7 +84,6 @@ export function hexagon<TDatum>(
 
     return {
       id,
-      focusAffinity: 'xy',
       channels: {
         x: { scale: 'x', values: xValues.filter(isChartValue) },
         y: { scale: 'y', values: yValues.filter(isChartValue) },
@@ -92,7 +91,6 @@ export function hexagon<TDatum>(
       },
       render: ({ scales, color: resolveColor }) => {
         const nodes: SceneNode[] = []
-        const points: ChartPoint<TDatum>[] = []
 
         data.forEach((datum, datumIndex) => {
           const xValue = xValues[datumIndex]
@@ -128,11 +126,25 @@ export function hexagon<TDatum>(
               y + Math.sin(angle) * radius,
             ] as const
           })
+          const point: ChartPoint<TDatum> = {
+            key,
+            markId: id,
+            group,
+            groupLabel: group == null ? id : String(group),
+            datum,
+            datumIndex,
+            xValue,
+            yValue,
+            x,
+            y,
+            color: fill,
+          }
 
           nodes.push({
             kind: 'area',
             key,
             points: vertices,
+            interaction: { point },
             style: {
               fill,
               fillOpacity: options.fillOpacity,
@@ -141,20 +153,6 @@ export function hexagon<TDatum>(
               strokeWidth: options.strokeWidth,
             },
           })
-          points.push({
-            key,
-            markId: id,
-            group,
-            groupLabel: group == null ? id : String(group),
-            datum,
-            datumIndex,
-            xValue,
-            yValue,
-            x,
-            y,
-            hitRegion: { kind: 'polygon', points: vertices },
-            color: fill,
-          })
         })
 
         return {
@@ -167,7 +165,6 @@ export function hexagon<TDatum>(
               children: nodes,
             },
           ],
-          points,
         }
       },
     }
diff --git a/packages/charts-core/src/index.ts b/packages/charts-core/src/index.ts
index 63e51af6..303f89cb 100644
--- a/packages/charts-core/src/index.ts
+++ b/packages/charts-core/src/index.ts
@@ -186,7 +186,6 @@ export type {
   ChartCurve,
   ChartDefinition,
   ChartDefinitionOptions,
-  ChartCircleHitRegion,
   ChartExtensionInput,
   ChartFocusMode,
   ChartFocusFilter,
@@ -197,7 +196,6 @@ export type {
   ChartFocusState,
   ChartFocusStrategy,
   ChartGradientStop,
-  ChartHitRegion,
   ChartKey,
   ChartLayoutOptions,
   ChartMargin,
@@ -220,8 +218,6 @@ export type {
   ChartMarkX,
   ChartMarkY,
   ChartPoint,
-  ChartPolygonHitRegion,
-  ChartRectHitRegion,
   ChartRuntime,
   ChartScene,
   ChartScale,
@@ -278,6 +274,7 @@ export type {
   ResolvedColorScale,
   SceneDot,
   SceneArea,
+  SceneInteraction,
   SceneGroup,
   SceneLabel,
   SceneNode,
diff --git a/packages/charts-core/src/line.ts b/packages/charts-core/src/line.ts
index 32f72dc5..4bda7f93 100644
--- a/packages/charts-core/src/line.ts
+++ b/packages/charts-core/src/line.ts
@@ -96,7 +96,6 @@ export function lineY<TDatum>(
 
     return {
       id,
-      focusAffinity: 'x',
       states: markStates(data, options.states),
       seriesFromColor: options.z === undefined && options.color !== undefined,
       channels: {
@@ -116,7 +115,6 @@ export function lineY<TDatum>(
       render: ({ scales, color: resolveColor }) => {
         const groups = groupRows(rows)
         const nodes: SceneNode[] = []
-        const points: ChartPoint<TDatum>[] = []
 
         for (const [groupKey, groupRows] of groups) {
           const firstRow = groupRows[0]
@@ -130,6 +128,7 @@ export function lineY<TDatum>(
           )
           const children: SceneNode[] = []
           let segment: (readonly [number, number])[] = []
+          let segmentPoints: ChartPoint<TDatum>[] = []
           let segmentIndex = 0
 
           const flushSegment = () => {
@@ -139,6 +138,7 @@ export function lineY<TDatum>(
               key: `${id}:${groupKey}:segment:${segmentIndex}`,
               points: segment,
               path: options.curve?.line(segment),
+              interaction: { points: segmentPoints, affinity: 'x' },
               style: {
                 fill: 'none',
                 stroke: color,
@@ -150,6 +150,7 @@ export function lineY<TDatum>(
               },
             })
             segment = []
+            segmentPoints = []
             segmentIndex += 1
           }
 
@@ -174,7 +175,7 @@ export function lineY<TDatum>(
               y,
               color,
             }
-            points.push(point)
+            segmentPoints.push(point)
             segment.push([x, y])
 
             if (options.points) {
@@ -199,7 +200,7 @@ export function lineY<TDatum>(
           })
         }
 
-        return { nodes, points }
+        return { nodes }
       },
     }
   })
diff --git a/packages/charts-core/src/mark-state.ts b/packages/charts-core/src/mark-state.ts
index 69d1bb26..10234fd1 100644
--- a/packages/charts-core/src/mark-state.ts
+++ b/packages/charts-core/src/mark-state.ts
@@ -222,12 +222,14 @@ function applyStateStyle(
     case 'rect': {
       const nextInset = Math.max(0, inset ?? output.inset ?? 0)
       const amount = nextInset - (output.inset ?? 0)
+      const insetX = output.insetAxis !== 'y' ? amount : 0
+      const insetY = output.insetAxis !== 'x' ? amount : 0
       output = {
         ...output,
-        x: output.x + amount + dx,
-        y: output.y + amount + dy,
-        width: Math.max(0, output.width - amount * 2),
-        height: Math.max(0, output.height - amount * 2),
+        x: output.x + insetX + dx,
+        y: output.y + insetY + dy,
+        width: Math.max(0, output.width - insetX * 2),
+        height: Math.max(0, output.height - insetY * 2),
         radius: radius ?? output.radius,
         inset: nextInset,
       }
diff --git a/packages/charts-core/src/marks.test.ts b/packages/charts-core/src/marks.test.ts
index 738affb9..40accf2f 100644
--- a/packages/charts-core/src/marks.test.ts
+++ b/packages/charts-core/src/marks.test.ts
@@ -874,10 +874,12 @@ describe('core marks and categorical scales', () => {
     )
     const nodes = flatten(scene.nodes)
     const svg = renderChartSvg(scene, { ariaLabel: 'Composite chart' })
+    const marks = scene.nodes.find((node) => node.key === 'marks')
+    if (marks?.kind !== 'group') throw new Error('Expected mark group')
 
     expect(nodes.some((node) => node.kind === 'area')).toBe(true)
-    const baseDots = nodes.filter(
-      (node) => node.kind === 'dot' && !node.key.startsWith('default-focus:'),
+    const baseDots = flatten(marks.children).filter(
+      (node) => node.kind === 'dot',
     )
     expect(baseDots).toHaveLength(2)
     expect(baseDots).toMatchObject([
diff --git a/packages/charts-core/src/nearest.test.ts b/packages/charts-core/src/nearest.test.ts
index 762b628b..223cbc30 100644
--- a/packages/charts-core/src/nearest.test.ts
+++ b/packages/charts-core/src/nearest.test.ts
@@ -1,182 +1,276 @@
 import { scaleBand, scaleLinear } from 'd3-scale'
 import { describe, expect, it } from 'vitest'
 import { barX, barY } from './bar'
-import { nearestPoint } from './nearest'
+import { nearestPoint, nearestScenePoint } from './nearest'
 import { createChartScene, defineChart } from './scene'
 import type {
-  ChartPoint,
   ChartFocusAffinity,
+  ChartPoint,
+  ChartScene,
   ChartValue,
   SceneNode,
+  SceneRect,
   StaticChartDefinition,
 } from './types'
 
-describe('nearest point hit regions', () => {
+describe('scene interaction geometry', () => {
   it('selects a containing rectangle before a closer interaction anchor', () => {
-    const tallBar = point('tall', 100, 20, {
-      kind: 'rect',
-      x: 90,
-      y: 20,
-      width: 20,
-      height: 180,
-    })
-    const neighboringPoint = point('neighbor', 140, 170)
-
-    expect(nearestPoint([tallBar, neighboringPoint], 100, 170, 48)?.key).toBe(
-      'tall',
+    const tall = point('tall', 100, 20)
+    const neighbor = point('neighbor', 140, 170)
+    const scene = testScene(
+      [rect(tall, 90, 20, 20, 180), anchor(neighbor)],
+      [tall, neighbor],
     )
+
+    expect(nearestScenePoint(scene, 100, 170, 48)?.key).toBe('tall')
   })
 
   it('applies maximum distance from the rectangle boundary', () => {
-    const bar = point('bar', 100, 20, {
-      kind: 'rect',
-      x: 90,
-      y: 20,
-      width: 20,
-      height: 180,
-    })
-
-    expect(nearestPoint([bar], 119, 100, 10)?.key).toBe('bar')
-    expect(nearestPoint([bar], 121, 100, 10)).toBeNull()
+    const bar = point('bar', 100, 20)
+    const scene = testScene([rect(bar, 90, 20, 20, 180)], [bar])
+
+    expect(nearestScenePoint(scene, 119, 100, 10)?.key).toBe('bar')
+    expect(nearestScenePoint(scene, 121, 100, 10)).toBeNull()
   })
 
-  it('uses exact containment before a competing axis fallback', () => {
-    const containing = point('containing', 100, 20, {
-      kind: 'rect',
-      x: 90,
-      y: 20,
-      width: 20,
-      height: 180,
-    })
-    const sameX = point('same-x', 100, 170, undefined, 'x')
-
-    expect(nearestPoint([containing, sameX], 100, 170, 48)?.key).toBe(
-      'containing',
+  it('uses paint order when scene primitives overlap', () => {
+    const lower = point('lower', 100, 100)
+    const upper = point('upper', 170, 170)
+    const scene = testScene(
+      [rect(lower, 80, 80, 100, 100), rect(upper, 80, 80, 100, 100)],
+      [lower, upper],
     )
-  })
 
-  it('uses paint order when hit regions overlap', () => {
-    const lower = point('lower', 100, 100, {
-      kind: 'rect',
-      x: 80,
-      y: 80,
-      width: 100,
-      height: 100,
-    })
-    const upper = point('upper', 170, 170, {
-      kind: 'rect',
-      x: 80,
-      y: 80,
-      width: 100,
-      height: 100,
-    })
-
-    expect(nearestPoint([lower, upper], 100, 100, 48)?.key).toBe('upper')
+    expect(nearestScenePoint(scene, 100, 100, 48)?.key).toBe('upper')
   })
 
-  it('falls back along the mark affinity after missing every region', () => {
-    const xAligned = point('x-aligned', 100, 20, undefined, 'x')
-    const yAligned = point('y-aligned', 250, 170, undefined, 'y')
+  it('falls back along the primitive affinity after missing every shape', () => {
+    const xAligned = point('x-aligned', 100, 20)
+    const yAligned = point('y-aligned', 250, 170)
+    const xScene = testScene([rect(xAligned, 95, 15, 10, 10, 'x')], [xAligned])
+    const yScene = testScene(
+      [rect(yAligned, 245, 165, 10, 10, 'y')],
+      [yAligned],
+    )
 
-    expect(nearestPoint([xAligned], 109, 190, 10)?.key).toBe('x-aligned')
-    expect(nearestPoint([xAligned], 111, 20, 10)).toBeNull()
-    expect(nearestPoint([yAligned], 20, 179, 10)?.key).toBe('y-aligned')
-    expect(nearestPoint([yAligned], 250, 181, 10)).toBeNull()
+    expect(nearestScenePoint(xScene, 109, 190, 10)?.key).toBe('x-aligned')
+    expect(nearestScenePoint(xScene, 116, 20, 10)).toBeNull()
+    expect(nearestScenePoint(yScene, 20, 179, 10)?.key).toBe('y-aligned')
+    expect(nearestScenePoint(yScene, 250, 186, 10)).toBeNull()
   })
 
   it('uses geometry to break x-affinity ties between stacked segments', () => {
-    const bottom = point(
-      'bottom',
-      100,
-      100,
-      { kind: 'rect', x: 90, y: 100, width: 20, height: 100 },
-      'x',
+    const bottom = point('bottom', 100, 100)
+    const middle = point('middle', 100, 60)
+    const top = point('top', 100, 20)
+    const scene = testScene(
+      [
+        rect(bottom, 90, 100, 20, 100, 'x'),
+        rect(middle, 90, 60, 20, 40, 'x'),
+        rect(top, 90, 20, 20, 40, 'x'),
+      ],
+      [bottom, middle, top],
     )
-    const middle = point(
-      'middle',
-      100,
-      60,
-      { kind: 'rect', x: 90, y: 60, width: 20, height: 40 },
-      'x',
+
+    expect(nearestScenePoint(scene, 100, 10, 48)?.key).toBe('top')
+    expect(nearestScenePoint(scene, 100, 210, 48)?.key).toBe('bottom')
+  })
+
+  it('uses geometry to break y-affinity ties between stacked segments', () => {
+    const left = point('left', 20, 100)
+    const middle = point('middle', 60, 100)
+    const right = point('right', 100, 100)
+    const scene = testScene(
+      [
+        rect(left, 20, 90, 40, 20, 'y'),
+        rect(middle, 60, 90, 40, 20, 'y'),
+        rect(right, 100, 90, 100, 20, 'y'),
+      ],
+      [left, middle, right],
     )
-    const top = point(
-      'top',
-      100,
-      20,
-      { kind: 'rect', x: 90, y: 20, width: 20, height: 40 },
-      'x',
+
+    expect(nearestScenePoint(scene, 10, 100, 48)?.key).toBe('left')
+    expect(nearestScenePoint(scene, 210, 100, 48)?.key).toBe('right')
+  })
+
+  it('requires containment for geometry-only areas', () => {
+    const region = point('region', 100, 100)
+    const scene = testScene(
+      [
+        {
+          kind: 'area',
+          key: region.key,
+          points: [
+            [80, 80],
+            [120, 80],
+            [100, 130],
+          ],
+          interaction: { point: region, affinity: 'geometry' },
+        },
+      ],
+      [region],
     )
 
-    expect(nearestPoint([bottom, middle, top], 100, 10, 48)?.key).toBe('top')
-    expect(nearestPoint([bottom, middle, top], 100, 210, 48)?.key).toBe(
-      'bottom',
+    expect(nearestScenePoint(scene, 100, 100, 48)?.key).toBe('region')
+    expect(nearestScenePoint(scene, 125, 100, 48)).toBeNull()
+  })
+
+  it('uses the rendered circle radius', () => {
+    const bubble = point('bubble', 100, 100)
+    const neighbor = point('neighbor', 137, 100)
+    const scene = testScene(
+      [
+        {
+          kind: 'dot',
+          key: bubble.key,
+          x: 100,
+          y: 100,
+          radius: 40,
+          interaction: { point: bubble, affinity: 'xy' },
+        },
+        anchor(neighbor),
+      ],
+      [bubble, neighbor],
     )
+
+    expect(nearestScenePoint(scene, 135, 100, 48)?.key).toBe('bubble')
   })
 
-  it('uses geometry to break y-affinity ties between stacked segments', () => {
-    const left = point(
-      'left',
-      20,
-      100,
-      { kind: 'rect', x: 20, y: 90, width: 40, height: 20 },
-      'y',
+  it('uses rendered stroke width for rules and polylines', () => {
+    const rulePoint = point('rule', 100, 100)
+    const linePoint = point('line', 100, 150)
+    const ruleScene = testScene(
+      [
+        {
+          kind: 'rule',
+          key: rulePoint.key,
+          x1: 50,
+          y1: 100,
+          x2: 150,
+          y2: 100,
+          interaction: { point: rulePoint, affinity: 'geometry' },
+          style: { strokeWidth: 10 },
+        },
+      ],
+      [rulePoint],
     )
-    const middle = point(
-      'middle',
-      60,
-      100,
-      { kind: 'rect', x: 60, y: 90, width: 40, height: 20 },
-      'y',
+    const lineScene = testScene(
+      [
+        {
+          kind: 'polyline',
+          key: linePoint.key,
+          points: [
+            [50, 150],
+            [150, 150],
+          ],
+          interaction: { point: linePoint, affinity: 'geometry' },
+          style: { strokeWidth: 6 },
+        },
+      ],
+      [linePoint],
     )
-    const right = point(
-      'right',
-      100,
-      100,
-      { kind: 'rect', x: 100, y: 90, width: 100, height: 20 },
-      'y',
+
+    expect(nearestScenePoint(ruleScene, 100, 105, 0)?.key).toBe('rule')
+    expect(nearestScenePoint(ruleScene, 100, 106, 48)).toBeNull()
+    expect(nearestScenePoint(lineScene, 100, 153, 0)?.key).toBe('line')
+    expect(nearestScenePoint(lineScene, 100, 154, 48)).toBeNull()
+  })
+
+  it('respects rounded corners from the rendered rectangle', () => {
+    const rounded = point('rounded', 100, 100)
+    const scene = testScene(
+      [
+        {
+          ...rect(rounded, 80, 80, 40, 40, 'geometry'),
+          radius: 20,
+        },
+      ],
+      [rounded],
     )
 
-    expect(nearestPoint([left, middle, right], 10, 100, 48)?.key).toBe('left')
-    expect(nearestPoint([left, middle, right], 210, 100, 48)?.key).toBe('right')
+    expect(nearestScenePoint(scene, 82, 82, 48)).toBeNull()
+    expect(nearestScenePoint(scene, 100, 82, 48)?.key).toBe('rounded')
   })
 
-  it('requires containment for geometry-only marks', () => {
-    const region = point(
-      'region',
-      100,
-      100,
-      {
-        kind: 'polygon',
-        points: [
-          [80, 80],
-          [120, 80],
-          [100, 130],
-        ],
-      },
-      'geometry',
+  it('measures rounded-rectangle fallback from the curved boundary', () => {
+    const rounded = point('rounded', 100, 100)
+    const scene = testScene(
+      [
+        {
+          ...rect(rounded, 80, 80, 40, 40),
+          radius: 20,
+        },
+      ],
+      [rounded],
     )
 
-    expect(nearestPoint([region], 100, 100, 48)?.key).toBe('region')
-    expect(nearestPoint([region], 125, 100, 48)).toBeNull()
+    expect(nearestScenePoint(scene, 82, 82, 5)).toBeNull()
+    expect(nearestScenePoint(scene, 82, 82, 6)?.key).toBe('rounded')
   })
 
-  it('supports circular painted geometry', () => {
-    const bubble = point('bubble', 100, 100, {
-      kind: 'circle',
-      x: 100,
-      y: 100,
-      radius: 40,
-    })
-    const neighbor = point('neighbor', 137, 100)
+  it('accumulates group translations before hit testing', () => {
+    const translated = point('translated', 150, 120)
+    const scene = testScene(
+      [
+        {
+          kind: 'group',
+          key: 'facet',
+          translateX: 100,
+          translateY: 70,
+          children: [rect(translated, 40, 40, 20, 20)],
+        },
+      ],
+      [translated],
+    )
+
+    expect(nearestScenePoint(scene, 150, 120, 1)?.key).toBe('translated')
+    expect(nearestScenePoint(scene, 50, 50, 1)).toBeNull()
+  })
+
+  it('rejects geometry outside the effective scene clip', () => {
+    const clipped = point('clipped', 100, 100)
+    const hidden = point('hidden', 60, 60)
+    const scene = testScene(
+      [
+        {
+          kind: 'group',
+          key: 'clipped-group',
+          clip: { x: 80, y: 80, width: 40, height: 40 },
+          children: [
+            rect(clipped, 40, 40, 120, 120, 'geometry'),
+            rect(hidden, 50, 50, 20, 20),
+          ],
+        },
+      ],
+      [clipped, hidden],
+    )
+
+    expect(nearestScenePoint(scene, 100, 100, 48)?.key).toBe('clipped')
+    expect(nearestScenePoint(scene, 60, 60, 1)).toBeNull()
+  })
 
-    expect(nearestPoint([bubble, neighbor], 135, 100, 48)?.key).toBe('bubble')
+  it('does not revive a fully clipped primitive through its point anchor', () => {
+    const hidden = point('hidden', 60, 60)
+    const scene = testScene(
+      [
+        {
+          kind: 'group',
+          key: 'fully-clipped-group',
+          clip: { x: 80, y: 80, width: 40, height: 40 },
+          children: [rect(hidden, 50, 50, 20, 20)],
+        },
+      ],
+      [hidden],
+    )
+
+    expect(nearestScenePoint(scene, 60, 60, 1)).toBeNull()
   })
 
-  it('preserves point-distance behavior without a hit region', () => {
-    const anchor = point('anchor', 100, 20)
+  it('preserves point-distance behavior for unattached semantic points', () => {
+    const anchorPoint = point('anchor', 100, 20)
 
-    expect(nearestPoint([anchor], 100, 29, 10)?.key).toBe('anchor')
-    expect(nearestPoint([anchor], 100, 31, 10)).toBeNull()
+    expect(nearestPoint([anchorPoint], 100, 29, 10)?.key).toBe('anchor')
+    expect(nearestPoint([anchorPoint], 100, 31, 10)).toBeNull()
   })
 
   it('preserves the first point when anchor distances tie', () => {
@@ -187,20 +281,15 @@ describe('nearest point hit regions', () => {
   })
 
   it('supports reversed rectangle bounds', () => {
-    const bar = point('bar', 100, 20, {
-      kind: 'rect',
-      x: 110,
-      y: 200,
-      width: -20,
-      height: -180,
-    })
-
-    expect(nearestPoint([bar], 119, 100, 10)?.key).toBe('bar')
-    expect(nearestPoint([bar], 121, 100, 10)).toBeNull()
+    const bar = point('bar', 100, 20)
+    const scene = testScene([rect(bar, 110, 200, -20, -180)], [bar])
+
+    expect(nearestScenePoint(scene, 119, 100, 10)?.key).toBe('bar')
+    expect(nearestScenePoint(scene, 121, 100, 10)).toBeNull()
   })
 
-  it('uses the painted vertical bar rectangle as its hit region', () => {
-    expectBarUsesPaintedRect(
+  it('attaches vertical bars to their rendered primitive', () => {
+    expectBarUsesScenePrimitive(
       defineChart({
         marks: [
           barY([{ category: 'A', value: 80 }], {
@@ -217,8 +306,8 @@ describe('nearest point hit regions', () => {
     )
   })
 
-  it('uses the painted horizontal bar rectangle as its hit region', () => {
-    expectBarUsesPaintedRect(
+  it('attaches horizontal bars to their rendered primitive', () => {
+    expectBarUsesScenePrimitive(
       defineChart({
         marks: [
           barX([{ category: 'A', value: 80 }], {
@@ -236,13 +325,7 @@ describe('nearest point hit regions', () => {
   })
 })
 
-function point(
-  key: string,
-  x: number,
-  y: number,
-  hitRegion?: ChartPoint['hitRegion'],
-  focusAffinity?: ChartFocusAffinity,
-): ChartPoint {
+function point(key: string, x: number, y: number): ChartPoint {
   return {
     key,
     markId: 'test',
@@ -254,19 +337,50 @@ function point(
     yValue: y,
     x,
     y,
-    hitRegion,
-    focusAffinity,
     color: 'currentColor',
   }
 }
 
+function rect(
+  target: ChartPoint,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  affinity: ChartFocusAffinity = 'xy',
+): SceneRect {
+  return {
+    kind: 'rect',
+    key: target.key,
+    x,
+    y,
+    width,
+    height,
+    interaction: { point: target, affinity },
+  }
+}
+
+function anchor(target: ChartPoint): SceneNode {
+  return {
+    kind: 'label',
+    key: target.key,
+    x: target.x,
+    y: target.y,
+    text: target.key,
+  }
+}
+
+function testScene(nodes: readonly SceneNode[], points: readonly ChartPoint[]) {
+  return { nodes, points } as ChartScene
+}
+
 function flatten(nodes: readonly SceneNode[]): SceneNode[] {
   return nodes.flatMap((node) =>
     node.kind === 'group' ? [node, ...flatten(node.children)] : [node],
   )
 }
 
-function expectBarUsesPaintedRect<
+function expectBarUsesScenePrimitive<
   TDatum,
   TXValue extends ChartValue,
   TYValue extends ChartValue,
@@ -276,18 +390,14 @@ function expectBarUsesPaintedRect<
 ) {
   const scene = createChartScene(definition, { width: 300, height: 200 })
   const point = scene.points[0]!
-  const rect = flatten(scene.nodes).find(
+  const rectNode = flatten(scene.nodes).find(
     (node) => node.kind === 'rect' && node.key === point.key,
   )
 
-  expect(rect?.kind).toBe('rect')
-  if (rect?.kind !== 'rect') throw new Error('Expected bar rectangle')
-  expect(point.hitRegion).toEqual({
-    kind: 'rect',
-    x: rect.x,
-    y: rect.y,
-    width: rect.width,
-    height: rect.height,
+  expect(rectNode?.kind).toBe('rect')
+  if (rectNode?.kind !== 'rect') throw new Error('Expected bar rectangle')
+  expect(rectNode.interaction).toEqual({
+    point,
+    affinity: expectedAffinity,
   })
-  expect(point.focusAffinity).toBe(expectedAffinity)
 }
diff --git a/packages/charts-core/src/nearest.ts b/packages/charts-core/src/nearest.ts
index 258425a6..29380272 100644
--- a/packages/charts-core/src/nearest.ts
+++ b/packages/charts-core/src/nearest.ts
@@ -1,5 +1,34 @@
-import type { ChartHitRegion, ChartPoint, ChartValue } from './types'
+import type {
+  ChartBounds,
+  ChartFocusAffinity,
+  ChartPoint,
+  ChartScene,
+  ChartValue,
+  SceneInteraction,
+  SceneNode,
+} from './types'
 
+type GeometricSceneNode = Exclude<SceneNode, { kind: 'group' | 'label' }>
+type InteractiveSceneNode = GeometricSceneNode & {
+  interaction: SceneInteraction
+}
+
+interface SceneInteractionTarget {
+  node: InteractiveSceneNode
+  offsetX: number
+  offsetY: number
+  bounds: ChartBounds
+  clip?: ChartBounds
+}
+
+interface SceneInteractionIndex {
+  targets: readonly SceneInteractionTarget[]
+  attachedPoints: ReadonlySet<ChartPoint>
+}
+
+const sceneInteractionCache = new WeakMap<object, SceneInteractionIndex>()
+
+/** Legacy point-anchor lookup used by explicit point-only indexes. */
 export function nearestPoint<
   TDatum,
   TXValue extends ChartValue,
@@ -11,103 +40,363 @@ export function nearestPoint<
   maxDistance: number,
 ): ChartPoint<TDatum, TXValue, TYValue> | null {
   let result: ChartPoint<TDatum, TXValue, TYValue> | undefined
-  let resultPrimaryDistance = Infinity
-  let anchorOnly = true
-
-  // Resolve exact painted containment before considering any nearby fallback.
+  let resultDistance = Infinity
   for (let index = points.length; index--;) {
     const point = points[index]!
-    const region = point.hitRegion
-    if (region) {
-      anchorOnly = false
-      if (contains(region, x, y)) {
-        // Scene points follow paint order, so reverse traversal finds topmost first.
-        return point
-      }
-    } else if (point.focusAffinity && point.focusAffinity !== 'xy') {
-      anchorOnly = false
-    } else {
-      const dx = point.x - x
-      const dy = point.y - y
-      const distance = dx * dx + dy * dy
-      // Reverse traversal uses <= so legacy ties still resolve to the first point.
-      if (distance <= resultPrimaryDistance) {
-        result = point
-        resultPrimaryDistance = distance
-      }
+    const dx = point.x - x
+    const dy = point.y - y
+    const distance = dx * dx + dy * dy
+    // Reverse traversal with <= preserves the historical first-point tie.
+    if (distance <= resultDistance) {
+      result = point
+      resultDistance = distance
     }
   }
-  if (anchorOnly) {
-    return result && resultPrimaryDistance <= Math.max(0, maxDistance) ** 2
-      ? result
-      : null
+  return result && resultDistance <= Math.max(0, maxDistance) ** 2
+    ? result
+    : null
+}
+
+export function nearestScenePoint<
+  TDatum,
+  TXValue extends ChartValue,
+  TYValue extends ChartValue,
+>(
+  scene: ChartScene<TDatum, TXValue, TYValue>,
+  x: number,
+  y: number,
+  maxDistance: number,
+): ChartPoint<TDatum, TXValue, TYValue> | null {
+  const index = interactionIndex(scene)
+  if (!index.targets.length && !index.attachedPoints.size) {
+    return nearestPoint(scene.points, x, y, maxDistance)
+  }
+
+  // Painted containment is authoritative and follows actual reverse paint order.
+  for (let targetIndex = index.targets.length; targetIndex--;) {
+    const target = index.targets[targetIndex]!
+    if (containsBounds(target.bounds, x, y) && containsTarget(target, x, y)) {
+      return bestInteractionPoint(target.node.interaction, x, y) as ChartPoint<
+        TDatum,
+        TXValue,
+        TYValue
+      > | null
+    }
   }
 
-  result = undefined
-  resultPrimaryDistance = Infinity
+  let resultPoint: ChartPoint | undefined
+  let resultInteraction: SceneInteraction | undefined
+  let resultPrimaryDistance = Infinity
   let resultGeometryDistance = Infinity
-  for (const point of points) {
-    const affinity = point.focusAffinity ?? 'xy'
+
+  for (const target of index.targets) {
+    const interaction = target.node.interaction
+    const affinity = interaction.affinity ?? 'xy'
     if (affinity === 'geometry') continue
+    const axis = affinity === 'x' ? 'x' : affinity === 'y' ? 'y' : undefined
+    const primaryDistance = axis
+      ? squaredAxisDistance(target.bounds, axis === 'x' ? x : y, axis)
+      : distanceToTarget(target, x, y)
+    if (primaryDistance > resultPrimaryDistance) continue
+    const geometryDistance = axis
+      ? distanceToTarget(target, x, y)
+      : primaryDistance
+    if (
+      primaryDistance < resultPrimaryDistance ||
+      (primaryDistance === resultPrimaryDistance &&
+        geometryDistance < resultGeometryDistance)
+    ) {
+      resultInteraction = interaction
+      resultPoint = undefined
+      resultPrimaryDistance = primaryDistance
+      resultGeometryDistance = geometryDistance
+    }
+  }
 
-    const region = point.hitRegion
-    let primaryDistance: number
-    let geometryDistance: number
-    if (!region) {
+  // Plain semantic points remain a backwards-compatible anchor-only target.
+  if (resultPrimaryDistance !== 0) {
+    for (const point of scene.points) {
+      if (index.attachedPoints.has(point)) continue
       const dx = point.x - x
       const dy = point.y - y
-      geometryDistance = dx * dx + dy * dy
-      primaryDistance =
-        affinity === 'x'
-          ? dx * dx
-          : affinity === 'y'
-            ? dy * dy
-            : geometryDistance
-    } else {
-      primaryDistance =
-        affinity === 'x'
-          ? squaredAxisDistance(region, x, 0)
-          : affinity === 'y'
-            ? squaredAxisDistance(region, y, 1)
-            : 0
-      if (affinity !== 'xy' && primaryDistance > resultPrimaryDistance) {
-        continue
+      const distance = dx * dx + dy * dy
+      if (distance < resultPrimaryDistance) {
+        resultPoint = point
+        resultInteraction = undefined
+        resultPrimaryDistance = distance
+        resultGeometryDistance = distance
       }
-      geometryDistance = squaredDistanceToBoundary(region, x, y)
-      if (affinity === 'xy') primaryDistance = geometryDistance
     }
+  }
+
+  if (resultPrimaryDistance > Math.max(0, maxDistance) ** 2) return null
+  const result =
+    resultPoint ??
+    (resultInteraction
+      ? bestInteractionPoint(resultInteraction, x, y)
+      : undefined)
+  return (result as ChartPoint<TDatum, TXValue, TYValue> | undefined) ?? null
+}
+
+function interactionIndex(scene: ChartScene): SceneInteractionIndex {
+  const cached = sceneInteractionCache.get(scene)
+  if (cached) return cached
+  const targets: SceneInteractionTarget[] = []
+  const attachedPoints = new Set<ChartPoint>()
+  collectTargets(scene.nodes, 0, 0, undefined, targets, attachedPoints)
+  const index = { targets, attachedPoints }
+  sceneInteractionCache.set(scene, index)
+  return index
+}
+
+function collectTargets(
+  nodes: readonly SceneNode[],
+  offsetX: number,
+  offsetY: number,
+  clip: ChartBounds | null | undefined,
+  targets: SceneInteractionTarget[],
+  attachedPoints: Set<ChartPoint>,
+): void {
+  for (const node of nodes) {
+    if (node.kind === 'group') {
+      if (node.focus) continue
+      const nextOffsetX = offsetX + (node.translateX ?? 0)
+      const nextOffsetY = offsetY + (node.translateY ?? 0)
+      const groupClip = node.clip
+        ? translateBounds(node.clip, nextOffsetX, nextOffsetY)
+        : undefined
+      const nextClip = clip === null ? null : intersectBounds(clip, groupClip)
+      collectTargets(
+        node.children,
+        nextOffsetX,
+        nextOffsetY,
+        nextClip,
+        targets,
+        attachedPoints,
+      )
+      continue
+    }
+    if (node.kind === 'label' || !node.interaction) continue
+    if (node.interaction.point) attachedPoints.add(node.interaction.point)
+    else {
+      for (const point of node.interaction.points) attachedPoints.add(point)
+    }
+    if (clip === null) continue
+    const localBounds = boundsForNode(node)
+    if (!localBounds) continue
+    const paintedBounds = translateBounds(localBounds, offsetX, offsetY)
+    const visibleBounds = clip
+      ? intersectBounds(paintedBounds, clip)
+      : paintedBounds
+    if (visibleBounds == null) continue
+    targets.push({
+      node: node as InteractiveSceneNode,
+      offsetX,
+      offsetY,
+      bounds: visibleBounds,
+      clip,
+    })
+  }
+}
+
+function bestInteractionPoint(
+  interaction: SceneInteraction,
+  x: number,
+  y: number,
+): ChartPoint | null {
+  if (interaction.point) return interaction.point
+  const affinity = interaction.affinity ?? 'xy'
+  let result: ChartPoint | undefined
+  let primaryDistance = Infinity
+  let secondaryDistance = Infinity
+  for (const point of interaction.points) {
+    const dx = point.x - x
+    const dy = point.y - y
+    const fullDistance = dx * dx + dy * dy
+    const nextPrimary =
+      affinity === 'x' ? dx * dx : affinity === 'y' ? dy * dy : fullDistance
     if (
-      primaryDistance < resultPrimaryDistance ||
-      (primaryDistance === resultPrimaryDistance &&
-        geometryDistance < resultGeometryDistance)
+      nextPrimary < primaryDistance ||
+      (nextPrimary === primaryDistance && fullDistance < secondaryDistance)
     ) {
       result = point
-      resultPrimaryDistance = primaryDistance
-      resultGeometryDistance = geometryDistance
+      primaryDistance = nextPrimary
+      secondaryDistance = fullDistance
     }
   }
+  return result ?? null
+}
 
-  return result && resultPrimaryDistance <= Math.max(0, maxDistance) ** 2
-    ? result
-    : null
+function containsTarget(target: SceneInteractionTarget, x: number, y: number) {
+  const localX = x - target.offsetX
+  const localY = y - target.offsetY
+  const { node } = target
+  switch (node.kind) {
+    case 'rect':
+      return containsRoundedRect(node, localX, localY)
+    case 'dot': {
+      const dx = localX - node.x
+      const dy = localY - node.y
+      const radius = Math.max(0, node.radius)
+      return dx * dx + dy * dy <= radius * radius
+    }
+    case 'area':
+      return containsPolygon(node.points, localX, localY)
+    case 'polyline':
+      return (
+        squaredDistanceToPolyline(node.points, localX, localY, false) <=
+        strokeRadius(node) ** 2
+      )
+    case 'rule':
+      return (
+        squaredDistanceToSegment(
+          node.x1,
+          node.y1,
+          node.x2,
+          node.y2,
+          localX,
+          localY,
+        ) <=
+        strokeRadius(node) ** 2
+      )
+  }
 }
 
-function contains(region: ChartHitRegion, x: number, y: number) {
-  if (region.kind === 'rect') {
-    const left = Math.min(region.x, region.x + region.width)
-    const right = Math.max(region.x, region.x + region.width)
-    const top = Math.min(region.y, region.y + region.height)
-    const bottom = Math.max(region.y, region.y + region.height)
-    return x >= left && x <= right && y >= top && y <= bottom
+function distanceToTarget(
+  target: SceneInteractionTarget,
+  x: number,
+  y: number,
+) {
+  const localX = x - target.offsetX
+  const localY = y - target.offsetY
+  const { node } = target
+  let distance: number
+  switch (node.kind) {
+    case 'rect':
+      distance = node.radius
+        ? squaredDistanceToRoundedRect(node, localX, localY)
+        : squaredDistanceToBounds(node, localX, localY)
+      break
+    case 'dot': {
+      const dx = localX - node.x
+      const dy = localY - node.y
+      const amount = Math.max(
+        0,
+        Math.sqrt(dx * dx + dy * dy) - Math.max(0, node.radius),
+      )
+      distance = amount * amount
+      break
+    }
+    case 'area':
+      distance = squaredDistanceToPolyline(node.points, localX, localY, true)
+      break
+    case 'polyline': {
+      const raw = squaredDistanceToPolyline(node.points, localX, localY, false)
+      const amount = Math.max(0, Math.sqrt(raw) - strokeRadius(node))
+      distance = amount * amount
+      break
+    }
+    case 'rule': {
+      const raw = squaredDistanceToSegment(
+        node.x1,
+        node.y1,
+        node.x2,
+        node.y2,
+        localX,
+        localY,
+      )
+      const amount = Math.max(0, Math.sqrt(raw) - strokeRadius(node))
+      distance = amount * amount
+      break
+    }
   }
-  if (region.kind === 'circle') {
-    const dx = x - region.x
-    const dy = y - region.y
-    const radius = Math.max(0, region.radius)
-    return dx * dx + dy * dy <= radius * radius
+  return target.clip
+    ? Math.max(distance, squaredDistanceToBounds(target.clip, x, y))
+    : distance
+}
+
+function boundsForNode(node: GeometricSceneNode): ChartBounds | null {
+  switch (node.kind) {
+    case 'rect':
+      return normalizeRect(node)
+    case 'dot': {
+      const radius = Math.max(0, node.radius)
+      return {
+        x: node.x - radius,
+        y: node.y - radius,
+        width: radius * 2,
+        height: radius * 2,
+      }
+    }
+    case 'area':
+      return boundsFromPoints(node.points)
+    case 'polyline': {
+      const bounds = boundsFromPoints(node.points)
+      return bounds ? expandBounds(bounds, strokeRadius(node)) : null
+    }
+    case 'rule':
+      return expandBounds(
+        {
+          x: Math.min(node.x1, node.x2),
+          y: Math.min(node.y1, node.y2),
+          width: Math.abs(node.x2 - node.x1),
+          height: Math.abs(node.y2 - node.y1),
+        },
+        strokeRadius(node),
+      )
   }
+}
 
-  const points = region.points
+function containsRoundedRect(
+  node: Extract<SceneNode, { kind: 'rect' }>,
+  x: number,
+  y: number,
+) {
+  const bounds = normalizeRect(node)
+  if (!containsBounds(bounds, x, y)) return false
+  const radius = Math.max(
+    0,
+    Math.min(node.radius ?? 0, bounds.width / 2, bounds.height / 2),
+  )
+  if (
+    radius === 0 ||
+    (x >= bounds.x + radius && x <= bounds.x + bounds.width - radius) ||
+    (y >= bounds.y + radius && y <= bounds.y + bounds.height - radius)
+  ) {
+    return true
+  }
+  const cornerX =
+    x < bounds.x + radius ? bounds.x + radius : bounds.x + bounds.width - radius
+  const cornerY =
+    y < bounds.y + radius
+      ? bounds.y + radius
+      : bounds.y + bounds.height - radius
+  const dx = x - cornerX
+  const dy = y - cornerY
+  return dx * dx + dy * dy <= radius * radius
+}
+
+function squaredDistanceToRoundedRect(
+  node: Extract<SceneNode, { kind: 'rect' }>,
+  x: number,
+  y: number,
+) {
+  const bounds = normalizeRect(node)
+  const halfWidth = bounds.width / 2
+  const halfHeight = bounds.height / 2
+  const radius = Math.max(0, Math.min(node.radius ?? 0, halfWidth, halfHeight))
+  const offsetX = Math.abs(x - (bounds.x + halfWidth)) - (halfWidth - radius)
+  const offsetY = Math.abs(y - (bounds.y + halfHeight)) - (halfHeight - radius)
+  const outside =
+    Math.sqrt(Math.max(0, offsetX) ** 2 + Math.max(0, offsetY) ** 2) - radius
+  return Math.max(0, outside) ** 2
+}
+
+function containsPolygon(
+  points: readonly (readonly [number, number])[],
+  x: number,
+  y: number,
+) {
   let inside = false
   for (
     let index = 0, previous = points.length - 1;
@@ -128,76 +417,144 @@ function contains(region: ChartHitRegion, x: number, y: number) {
   return inside
 }
 
-function squaredAxisDistance(
-  region: ChartHitRegion,
-  value: number,
-  coordinate: 0 | 1,
+function squaredDistanceToPolyline(
+  points: readonly (readonly [number, number])[],
+  x: number,
+  y: number,
+  closed: boolean,
 ) {
-  let minimum: number
-  let maximum: number
-  if (region.kind === 'circle') {
-    const center = coordinate === 0 ? region.x : region.y
-    const radius = Math.max(0, region.radius)
-    minimum = center - radius
-    maximum = center + radius
-  } else if (region.kind === 'rect') {
-    const start = coordinate === 0 ? region.x : region.y
-    const size = coordinate === 0 ? region.width : region.height
-    minimum = Math.min(start, start + size)
-    maximum = Math.max(start, start + size)
-  } else {
-    minimum = Infinity
-    maximum = -Infinity
-    for (const vertex of region.points) {
-      minimum = Math.min(minimum, vertex[coordinate])
-      maximum = Math.max(maximum, vertex[coordinate])
-    }
+  if (!points.length) return Infinity
+  let distance = Infinity
+  const segmentCount = closed ? points.length : Math.max(0, points.length - 1)
+  for (let index = 0; index < segmentCount; index += 1) {
+    const start = points[index]!
+    const end = points[(index + 1) % points.length]!
+    distance = Math.min(
+      distance,
+      squaredDistanceToSegment(start[0], start[1], end[0], end[1], x, y),
+    )
   }
-  const distance =
-    value < minimum ? minimum - value : value > maximum ? value - maximum : 0
-  return distance * distance
+  return distance
 }
 
-function squaredDistanceToBoundary(
-  region: ChartHitRegion,
+function squaredDistanceToSegment(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
   x: number,
   y: number,
 ) {
-  if (region.kind === 'rect') {
-    const left = Math.min(region.x, region.x + region.width)
-    const right = Math.max(region.x, region.x + region.width)
-    const top = Math.min(region.y, region.y + region.height)
-    const bottom = Math.max(region.y, region.y + region.height)
-    const dx = x < left ? left - x : x > right ? x - right : 0
-    const dy = y < top ? top - y : y > bottom ? y - bottom : 0
-    return dx * dx + dy * dy
-  }
-  if (region.kind === 'circle') {
-    const dx = x - region.x
-    const dy = y - region.y
-    const distance = Math.max(
-      0,
-      Math.sqrt(dx * dx + dy * dy) - Math.max(0, region.radius),
-    )
-    return distance * distance
+  const dx = x2 - x1
+  const dy = y2 - y1
+  const length = dx * dx + dy * dy
+  const amount = length
+    ? Math.max(0, Math.min(1, ((x - x1) * dx + (y - y1) * dy) / length))
+    : 0
+  const offsetX = x - (x1 + amount * dx)
+  const offsetY = y - (y1 + amount * dy)
+  return offsetX * offsetX + offsetY * offsetY
+}
+
+function boundsFromPoints(
+  points: readonly (readonly [number, number])[],
+): ChartBounds | null {
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+  for (const point of points) {
+    if (!Number.isFinite(point[0]) || !Number.isFinite(point[1])) continue
+    minX = Math.min(minX, point[0])
+    minY = Math.min(minY, point[1])
+    maxX = Math.max(maxX, point[0])
+    maxY = Math.max(maxY, point[1])
   }
+  return Number.isFinite(minX)
+    ? { x: minX, y: minY, width: maxX - minX, height: maxY - minY }
+    : null
+}
 
-  let distance = Infinity
-  for (let index = 0; index < region.points.length; index += 1) {
-    const start = region.points[index]!
-    const end = region.points[(index + 1) % region.points.length]!
-    const dx = end[0] - start[0]
-    const dy = end[1] - start[1]
-    const length = dx * dx + dy * dy
-    const amount = length
-      ? Math.max(
-          0,
-          Math.min(1, ((x - start[0]) * dx + (y - start[1]) * dy) / length),
-        )
-      : 0
-    const offsetX = x - (start[0] + amount * dx)
-    const offsetY = y - (start[1] + amount * dy)
-    distance = Math.min(distance, offsetX * offsetX + offsetY * offsetY)
+function normalizeRect(rect: ChartBounds): ChartBounds {
+  return {
+    x: Math.min(rect.x, rect.x + rect.width),
+    y: Math.min(rect.y, rect.y + rect.height),
+    width: Math.abs(rect.width),
+    height: Math.abs(rect.height),
   }
-  return distance
+}
+
+function translateBounds(bounds: ChartBounds, x: number, y: number) {
+  const normalized = normalizeRect(bounds)
+  return { ...normalized, x: normalized.x + x, y: normalized.y + y }
+}
+
+function expandBounds(bounds: ChartBounds, amount: number): ChartBounds {
+  return {
+    x: bounds.x - amount,
+    y: bounds.y - amount,
+    width: bounds.width + amount * 2,
+    height: bounds.height + amount * 2,
+  }
+}
+
+function intersectBounds(
+  left: ChartBounds | undefined,
+  right: ChartBounds | undefined,
+): ChartBounds | undefined | null {
+  if (!left) return right
+  if (!right) return left
+  const x = Math.max(left.x, right.x)
+  const y = Math.max(left.y, right.y)
+  const rightEdge = Math.min(left.x + left.width, right.x + right.width)
+  const bottomEdge = Math.min(left.y + left.height, right.y + right.height)
+  return rightEdge < x || bottomEdge < y
+    ? null
+    : { x, y, width: rightEdge - x, height: bottomEdge - y }
+}
+
+function containsBounds(bounds: ChartBounds, x: number, y: number) {
+  return (
+    x >= bounds.x &&
+    x <= bounds.x + bounds.width &&
+    y >= bounds.y &&
+    y <= bounds.y + bounds.height
+  )
+}
+
+function squaredAxisDistance(
+  bounds: ChartBounds,
+  value: number,
+  axis: 'x' | 'y',
+) {
+  const start = axis === 'x' ? bounds.x : bounds.y
+  const size = axis === 'x' ? bounds.width : bounds.height
+  const distance =
+    value < start
+      ? start - value
+      : value > start + size
+        ? value - start - size
+        : 0
+  return distance * distance
+}
+
+function squaredDistanceToBounds(bounds: ChartBounds, x: number, y: number) {
+  const normalized = normalizeRect(bounds)
+  const dx =
+    x < normalized.x
+      ? normalized.x - x
+      : x > normalized.x + normalized.width
+        ? x - normalized.x - normalized.width
+        : 0
+  const dy =
+    y < normalized.y
+      ? normalized.y - y
+      : y > normalized.y + normalized.height
+        ? y - normalized.y - normalized.height
+        : 0
+  return dx * dx + dy * dy
+}
+
+function strokeRadius(node: GeometricSceneNode) {
+  return Math.max(0, node.style?.strokeWidth ?? 1) / 2
 }
diff --git a/packages/charts-core/src/rect.ts b/packages/charts-core/src/rect.ts
index 92ebc732..4a56d722 100644
--- a/packages/charts-core/src/rect.ts
+++ b/packages/charts-core/src/rect.ts
@@ -137,7 +137,6 @@ export function rect<TDatum>(
 
     return {
       id,
-      focusAffinity: 'xy',
       states: markStates(data, options.states),
       channels: {
         x: {
@@ -155,7 +154,6 @@ export function rect<TDatum>(
       },
       render: ({ scales, color: resolveColor }) => {
         const nodes: SceneNode[] = []
-        const points: ChartPoint<TDatum>[] = []
         const inset = Math.max(0, options.inset ?? 0.75)
 
         data.forEach((datum, datumIndex) => {
@@ -197,26 +195,9 @@ export function rect<TDatum>(
           const paintedY = top + inset
           const paintedWidth = Math.max(0, width - inset * 2)
           const paintedHeight = Math.max(0, height - inset * 2)
-          nodes.push({
-            kind: 'rect',
-            key,
-            x: paintedX,
-            y: paintedY,
-            width: paintedWidth,
-            height: paintedHeight,
-            radius: options.radius,
-            inset,
-            style: {
-              fill: color,
-              fillOpacity: options.fillOpacity,
-              stroke: options.stroke,
-              strokeWidth: options.strokeWidth,
-            },
-          })
-
           const pointXValue = isChartValue(xValue) ? xValue : x2Value
           const pointYValue = isChartValue(yValue) ? yValue : y2Value
-          points.push({
+          const point: ChartPoint<TDatum> = {
             key,
             markId: id,
             group,
@@ -233,14 +214,24 @@ export function rect<TDatum>(
             yInterval: 'range',
             x: left + width / 2,
             y: top + height / 2,
-            hitRegion: {
-              kind: 'rect',
-              x: paintedX,
-              y: paintedY,
-              width: paintedWidth,
-              height: paintedHeight,
-            },
             color,
+          }
+          nodes.push({
+            kind: 'rect',
+            key,
+            x: paintedX,
+            y: paintedY,
+            width: paintedWidth,
+            height: paintedHeight,
+            radius: options.radius,
+            inset,
+            interaction: { point },
+            style: {
+              fill: color,
+              fillOpacity: options.fillOpacity,
+              stroke: options.stroke,
+              strokeWidth: options.strokeWidth,
+            },
           })
         })
 
@@ -254,7 +245,6 @@ export function rect<TDatum>(
               children: nodes,
             },
           ],
-          points,
         }
       },
     }
diff --git a/packages/charts-core/src/renderer.test.ts b/packages/charts-core/src/renderer.test.ts
index 63cc0bd4..88118149 100644
--- a/packages/charts-core/src/renderer.test.ts
+++ b/packages/charts-core/src/renderer.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { scaleBand, scaleLinear } from 'd3-scale'
 import { lineY } from './line'
 import { mountChartRenderer } from './renderer'
-import { defineChart } from './scene'
+import { defineChart, findNearestPoint } from './scene'
 import { tooltip as tooltipExtension } from './tooltip'
 import { portal as portalExtension } from './tooltip-portal'
 import type {
@@ -168,11 +168,74 @@ describe('renderer-neutral chart host', () => {
     )
 
     const firstPoint = host.getScene().points[0]!
+    expect(spatialIndex).toHaveBeenCalledWith(
+      host.getScene().points,
+      host.getScene(),
+    )
     expect(findNearest).toHaveBeenCalledWith(firstPoint.x, firstPoint.y, 48)
     expect(onFocusChange).toHaveBeenLastCalledWith(host.getScene().points[1])
     host.destroy()
   })
 
+  it('resolves pointers against the destination scene returned by focus paint', () => {
+    const fake = createFakeRenderer()
+    const container = document.createElement('div')
+    const onFocusChange = vi.fn()
+    const host = mountChartRenderer(container, {
+      definition: defineChart(definition, { maxFocusDistance: 1 }),
+      renderer: fake.renderer,
+      width: 480,
+      height: 260,
+      ariaLabel: 'Destination-scene interaction',
+      onFocusChange,
+    })
+    const baseScene = host.getScene()
+    const first = baseScene.points[0]!
+    const second = baseScene.points[1]!
+    const movedX = 310
+    const movedY = 190
+    const destinationScene: ChartScene<Datum, number, number> = {
+      ...baseScene,
+      nodes: [
+        {
+          kind: 'rect',
+          key: 'moved-first',
+          x: movedX - 20,
+          y: movedY - 20,
+          width: 40,
+          height: 40,
+          interaction: { point: first, affinity: 'xy' },
+        },
+      ],
+    }
+
+    expect(findNearestPoint(baseScene, movedX, movedY, 1)).toBe(second)
+    fake.paintFocus.mockReturnValue(destinationScene)
+    fake.clientToScene.mockReturnValueOnce({ x: first.x, y: first.y })
+    fake.element.dispatchEvent(
+      new MouseEvent('pointermove', {
+        bubbles: true,
+        clientX: first.x,
+        clientY: first.y,
+      }),
+    )
+    expect(onFocusChange).toHaveBeenLastCalledWith(first)
+
+    onFocusChange.mockClear()
+    fake.clientToScene.mockReturnValue({ x: movedX, y: movedY })
+    fake.element.dispatchEvent(
+      new MouseEvent('pointermove', {
+        bubbles: true,
+        clientX: movedX,
+        clientY: movedY,
+      }),
+    )
+
+    expect(onFocusChange).not.toHaveBeenCalled()
+    expect(fake.paintFocus).toHaveBeenCalledOnce()
+    host.destroy()
+  })
+
   it('anchors to the pointer, follows placement fallbacks, and clears pointer state for keyboard focus', () => {
     const fake = createFakeRenderer()
     fake.clientToScene.mockReturnValue({ x: 20, y: 20 })
diff --git a/packages/charts-core/src/renderer.ts b/packages/charts-core/src/renderer.ts
index d4b15230..99e14b0e 100644
--- a/packages/charts-core/src/renderer.ts
+++ b/packages/charts-core/src/renderer.ts
@@ -46,6 +46,7 @@ export function mountChartRenderer<
 ): ChartRendererHost<TDatum, TXValue, TYValue> {
   let options = initialOptions
   let scene!: ChartScene<TDatum, TXValue, TYValue>
+  let interactionScene!: ChartScene<TDatum, TXValue, TYValue>
   let focusedPoint: ChartPoint<TDatum, TXValue, TYValue> | null = null
   let focusSource: ChartFocusSource = 'pointer'
   let pointerPosition: ChartTooltipPosition | null = null
@@ -75,6 +76,7 @@ export function mountChartRenderer<
     if (refreshText && !options.measureText) domText.refresh()
     const previousFocusedPoint = focusedPoint
     scene = createScene()
+    interactionScene = scene
     if (!surface) {
       surface = options.renderer.mount(container, scheduleRender)
     } else if (surface.renderer !== options.renderer) {
@@ -96,7 +98,7 @@ export function mountChartRenderer<
         : undefined,
     })
     hasRendered = true
-    spatialIndex = options.definition.spatialIndex?.(scene.points)
+    spatialIndex = options.definition.spatialIndex?.(scene.points, scene)
     const nextFocusedPoint = previousFocusedPoint
       ? restoreFocusedPoint(scene.points, previousFocusedPoint)
       : null
@@ -215,7 +217,7 @@ export function mountChartRenderer<
     point: ChartPoint<TDatum, TXValue, TYValue> | null,
     points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
   ) => {
-    surface?.paintFocus(
+    const paintedScene = surface?.paintFocus(
       point
         ? {
             primary: point,
@@ -226,6 +228,9 @@ export function mountChartRenderer<
         : null,
       pointerPosition,
     )
+    interactionScene =
+      (paintedScene as ChartScene<TDatum, TXValue, TYValue> | undefined) ??
+      scene
     paintTooltip(point, points)
   }
 
@@ -434,7 +439,7 @@ export function mountChartRenderer<
     }
     const point = spatialIndex
       ? spatialIndex.findNearest(x, y, maxDistance)
-      : findNearestPoint(scene, x, y, maxDistance)
+      : findNearestPoint(interactionScene, x, y, maxDistance)
     return point ? [point] : []
   }
 
diff --git a/packages/charts-core/src/scene.test.ts b/packages/charts-core/src/scene.test.ts
index f702923b..65347b5e 100644
--- a/packages/charts-core/src/scene.test.ts
+++ b/packages/charts-core/src/scene.test.ts
@@ -89,10 +89,10 @@ describe('native mark and channel scene', () => {
 
     expect(scene.points.map((point) => point.datum)).toEqual(values)
     expect(scene.points.map((point) => point.xValue)).toEqual([0, 1, 2])
+    const marks = scene.nodes.find((node) => node.key === 'marks')
+    if (marks?.kind !== 'group') throw new Error('Expected mark group')
     expect(
-      flatten(scene.nodes).filter(
-        (node) => node.kind === 'dot' && !node.key.startsWith('default-focus:'),
-      ),
+      flatten(marks.children).filter((node) => node.kind === 'dot'),
     ).toHaveLength(3)
   })
 
diff --git a/packages/charts-core/src/scene.ts b/packages/charts-core/src/scene.ts
index 288c80f4..62555b81 100644
--- a/packages/charts-core/src/scene.ts
+++ b/packages/charts-core/src/scene.ts
@@ -1,7 +1,7 @@
 import { createColorScale, valueKey } from './scales'
 import { resolveConfiguredScale } from './configured-scale'
 import { measureSceneLabelBounds } from './guide-layout'
-import { nearestPoint } from './nearest'
+import { nearestScenePoint } from './nearest'
 import type {
   DynamicChartDefinition,
   InitializedMark,
@@ -207,7 +207,7 @@ function createChartSceneWithScaleResolver<
   const markNodes: SceneNode[] = []
   const points: ChartPoint<TDatum, TXValue, TYValue>[] = []
   const firstBaseMarkIndex = initialized.findIndex((mark) => !mark.focus)
-  const hasFocusMarks = initialized.some((mark) => mark.focus)
+  let hasFocusLayers = initialized.some((mark) => mark.focus)
 
   initialized.forEach((mark, markIndex) => {
     const rendered = mark.render({
@@ -219,6 +219,11 @@ function createChartSceneWithScaleResolver<
       colors,
       layout,
     })
+    const renderedPoints = collectRenderedPoints(
+      rendered.nodes,
+      rendered.points,
+    )
+    hasFocusLayers ||= containsFocusLayer(rendered.nodes)
     if (mark.focus) {
       markNodes.push({
         kind: 'group',
@@ -227,7 +232,7 @@ function createChartSceneWithScaleResolver<
         ariaHidden: true,
         focus: {
           match: mark.focus.match ?? 'primary',
-          points: rendered.points ?? [],
+          points: renderedPoints,
           placement:
             firstBaseMarkIndex < 0 || markIndex < firstBaseMarkIndex
               ? 'under'
@@ -236,11 +241,11 @@ function createChartSceneWithScaleResolver<
         children: rendered.nodes,
       })
     } else {
-      const markPoints = (rendered.points ?? []).map((point) =>
-        point.focusAffinity || !mark.focusAffinity
-          ? point
-          : { ...point, focusAffinity: mark.focusAffinity },
-      ) as readonly ChartPoint<TDatum, TXValue, TYValue>[]
+      const markPoints = renderedPoints as readonly ChartPoint<
+        TDatum,
+        TXValue,
+        TYValue
+      >[]
       if (mark.states) {
         markNodes.push({
           kind: 'group',
@@ -277,12 +282,7 @@ function createChartSceneWithScaleResolver<
     nodes.push(axisNodes)
   }
   if (legend) nodes.push(legend.render({ colors, chart, theme, width }))
-  if (!hasFocusMarks && points.length) {
-    const focusPoints = points.map((point) => ({
-      ...point,
-      key: `default-focus:${point.key}`,
-      markId: 'default-focus',
-    }))
+  if (!hasFocusLayers && points.length) {
     nodes.push({
       kind: 'group',
       key: 'default-focus',
@@ -290,10 +290,10 @@ function createChartSceneWithScaleResolver<
       ariaHidden: true,
       focus: {
         match: 'primary',
-        points: focusPoints,
+        points,
         placement: 'over',
       },
-      children: focusPoints.map((point) => ({
+      children: points.map((point) => ({
         kind: 'dot',
         key: point.key,
         x: point.x,
@@ -332,7 +332,47 @@ export function findNearestPoint<
   y: number,
   maxDistance = Infinity,
 ): ChartPoint<TDatum, TXValue, TYValue> | null {
-  return nearestPoint(scene.points, x, y, maxDistance)
+  return nearestScenePoint(scene, x, y, maxDistance)
+}
+
+function collectRenderedPoints(
+  nodes: readonly SceneNode[],
+  emitted: readonly ChartPoint[] | undefined,
+): readonly ChartPoint[] {
+  const points = emitted ? [...emitted] : []
+  const seen = new Set(points)
+  const visit = (children: readonly SceneNode[]) => {
+    for (const node of children) {
+      if (node.kind === 'group') {
+        if (!node.focus) visit(node.children)
+        continue
+      }
+      if (node.kind === 'label' || !node.interaction) continue
+      const interaction = node.interaction
+      if (interaction.point) {
+        if (!seen.has(interaction.point)) {
+          seen.add(interaction.point)
+          points.push(interaction.point)
+        }
+      } else {
+        for (const point of interaction.points) {
+          if (seen.has(point)) continue
+          seen.add(point)
+          points.push(point)
+        }
+      }
+    }
+  }
+  visit(nodes)
+  return points
+}
+
+function containsFocusLayer(nodes: readonly SceneNode[]): boolean {
+  return nodes.some(
+    (node) =>
+      node.kind === 'group' &&
+      (node.focus !== undefined || containsFocusLayer(node.children)),
+  )
 }
 
 function collectScaleChannels(
diff --git a/packages/charts-core/src/svg-surface.ts b/packages/charts-core/src/svg-surface.ts
index 1ea2296c..8b7d6b84 100644
--- a/packages/charts-core/src/svg-surface.ts
+++ b/packages/charts-core/src/svg-surface.ts
@@ -79,6 +79,7 @@ export function createSvgChartRenderer<
             ? (resolved.transition ?? previousTransition)
             : undefined
           paintSvgFocus(svgElement(), resolved.scene, focus)
+          return resolved.scene
         },
         destroy() {
           cancelAnimation()
diff --git a/packages/charts-core/src/type-contract.test.ts b/packages/charts-core/src/type-contract.test.ts
index a8dc3b74..efb3a537 100644
--- a/packages/charts-core/src/type-contract.test.ts
+++ b/packages/charts-core/src/type-contract.test.ts
@@ -446,12 +446,13 @@ if (false) {
         }
       },
     },
-    spatialIndex(points) {
+    spatialIndex(points, scene) {
       expectTypeOf(points).items.toMatchTypeOf<{
         datum: Row
         xValue: string
         yValue: number
       }>()
+      expectTypeOf(scene.points).toEqualTypeOf<typeof points>()
       return {
         findNearest: () => points[0] ?? null,
       }
diff --git a/packages/charts-core/src/types.ts b/packages/charts-core/src/types.ts
index 79b536bf..d9229a83 100644
--- a/packages/charts-core/src/types.ts
+++ b/packages/charts-core/src/types.ts
@@ -683,8 +683,6 @@ export interface InitializedMark<
   channels: Readonly<Record<string, MaterializedChannel>>
   /** The mark uses a discrete color channel as inferred series identity. */
   seriesFromColor?: boolean
-  /** Natural pointer fallback after exact hit-region containment. */
-  focusAffinity?: ChartFocusAffinity
   focus?: ChartFocusFilter
   states?: {
     data: readonly unknown[]
@@ -703,25 +701,6 @@ export interface MarkScene<
   points?: readonly ChartPoint<TDatum, TXValue, TYValue>[]
 }
 
-export interface ChartRectHitRegion extends ChartBounds {
-  kind: 'rect'
-}
-
-export interface ChartCircleHitRegion {
-  kind: 'circle'
-  x: number
-  y: number
-  radius: number
-}
-
-export interface ChartPolygonHitRegion {
-  kind: 'polygon'
-  points: readonly (readonly [number, number])[]
-}
-
-export type ChartHitRegion =
-  ChartRectHitRegion | ChartCircleHitRegion | ChartPolygonHitRegion
-
 export type ChartFocusAffinity = 'x' | 'y' | 'xy' | 'geometry'
 
 export interface ChartPoint<
@@ -745,13 +724,24 @@ export interface ChartPoint<
   yInterval?: 'range' | 'difference'
   x: number
   y: number
-  /** Optional painted geometry used by the default pointer-distance resolver. */
-  hitRegion?: ChartHitRegion
-  /** Resolved mark-level pointer fallback after exact geometry containment. */
-  focusAffinity?: ChartFocusAffinity
   color: string
 }
 
+/** Semantic focus data attached to the scene primitive that paints it. */
+export type SceneInteraction =
+  | {
+      point: ChartPoint
+      points?: never
+      /** Natural pointer fallback after exact geometry containment. */
+      affinity?: ChartFocusAffinity
+    }
+  | {
+      point?: never
+      points: readonly ChartPoint[]
+      /** Natural pointer fallback after exact geometry containment. */
+      affinity?: ChartFocusAffinity
+    }
+
 export interface ChartTick {
   value: ChartValue
   label: string
@@ -777,6 +767,11 @@ interface SceneNodeBase {
   ariaHidden?: boolean
 }
 
+interface InteractiveSceneNodeBase extends SceneNodeBase {
+  /** Interaction semantics for this primitive's rendered geometry. */
+  interaction?: SceneInteraction
+}
+
 export interface SceneGroup extends SceneNodeBase {
   kind: 'group'
   children: readonly SceneNode[]
@@ -795,7 +790,7 @@ export interface SceneGroup extends SceneNodeBase {
   }
 }
 
-export interface SceneRule extends SceneNodeBase {
+export interface SceneRule extends InteractiveSceneNodeBase {
   kind: 'rule'
   x1: number
   y1: number
@@ -803,26 +798,26 @@ export interface SceneRule extends SceneNodeBase {
   y2: number
 }
 
-export interface ScenePolyline extends SceneNodeBase {
+export interface ScenePolyline extends InteractiveSceneNodeBase {
   kind: 'polyline'
   points: readonly (readonly [number, number])[]
   path?: string
 }
 
-export interface SceneArea extends SceneNodeBase {
+export interface SceneArea extends InteractiveSceneNodeBase {
   kind: 'area'
   points: readonly (readonly [number, number])[]
   path?: string
 }
 
-export interface SceneDot extends SceneNodeBase {
+export interface SceneDot extends InteractiveSceneNodeBase {
   kind: 'dot'
   x: number
   y: number
   radius: number
 }
 
-export interface SceneRect extends SceneNodeBase {
+export interface SceneRect extends InteractiveSceneNodeBase {
   kind: 'rect'
   x: number
   y: number
@@ -831,6 +826,8 @@ export interface SceneRect extends SceneNodeBase {
   radius?: number
   /** Applied inset retained for absolute inline-state overrides. */
   inset?: number
+  /** Axes affected by `inset`; bars use only their categorical axis. */
+  insetAxis?: 'x' | 'y' | 'xy'
 }
 
 export interface SceneLabel extends SceneNodeBase {
@@ -1188,6 +1185,7 @@ export type ChartSpatialIndexFactory<
   TYValue extends ChartValue = ChartValue,
 > = (
   points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
+  scene: ChartScene<TDatum, TXValue, TYValue>,
 ) => ChartSpatialIndex<TDatum, TXValue, TYValue>
 
 export interface ChartRuntime<
diff --git a/packages/charts-core/src/universal-types.ts b/packages/charts-core/src/universal-types.ts
index 434e6b22..deb68c58 100644
--- a/packages/charts-core/src/universal-types.ts
+++ b/packages/charts-core/src/universal-types.ts
@@ -108,7 +108,6 @@ export type {
   ChartCurve,
   ChartDefinition,
   ChartDefinitionOptions,
-  ChartCircleHitRegion,
   ChartFocusFilter,
   ChartFocusAffinity,
   ChartFocusMatch,
@@ -119,7 +118,6 @@ export type {
   ChartFocusState,
   ChartFocusStrategy,
   ChartGradientStop,
-  ChartHitRegion,
   ChartKey,
   ChartLayoutOptions,
   ChartMargin,
@@ -142,8 +140,6 @@ export type {
   ChartMarkX,
   ChartMarkY,
   ChartPoint,
-  ChartPolygonHitRegion,
-  ChartRectHitRegion,
   ChartRuntime,
   ChartScene,
   ChartScale,
@@ -200,6 +196,7 @@ export type {
   ResolvedColorScale,
   SceneDot,
   SceneArea,
+  SceneInteraction,
   SceneGroup,
   SceneLabel,
   SceneNode,
diff --git a/packages/react-native-charts/src/interaction.ts b/packages/react-native-charts/src/interaction.ts
index 180d5e9c..6a11d72e 100644
--- a/packages/react-native-charts/src/interaction.ts
+++ b/packages/react-native-charts/src/interaction.ts
@@ -41,7 +41,7 @@ export function createNativeChartFocusModel<
   definition: ChartDefinition<TDatum, TXValue, TYValue>,
 ): NativeChartFocusModel<TDatum, TXValue, TYValue> {
   const strategy = resolveFocusStrategy(definition.focus)
-  const spatialIndex = definition.spatialIndex?.(scene.points)
+  const spatialIndex = definition.spatialIndex?.(scene.points, scene)
   const maxDistance = definition.maxFocusDistance ?? 48
   const navigation =
     strategy?.navigation(scene.points) ?? sceneOrder(scene.points)
diff --git a/scripts/measure-bundles.mjs b/scripts/measure-bundles.mjs
index 90dc082c..a1cfd560 100644
--- a/scripts/measure-bundles.mjs
+++ b/scripts/measure-bundles.mjs
@@ -751,7 +751,7 @@ const entries = [
   budgeted(
     'Geometry pointer resolver kernel',
     'benchmarks/entries/charts-pointer-geometry-kernel.ts',
-    1,
+    2,
   ),
   budgeted(
     'D3 brush controller kernel',

From 2e1f7ee5d9f33f1ef5258cfb3b905ea2acf092f6 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Sat, 1 Aug 2026 22:27:18 -0600
Subject: [PATCH 4/5] Accept shared interaction geometry bundle cost

---
 API-FRICTION.md                               | 10 +++--
 PLAN.md                                       |  2 +-
 benchmarks/bundle-size/README.md              |  8 +++-
 .../bundle-size/universal-baseline.json       | 40 +++++++++----------
 docs/guides/bundle-size-and-performance.md    |  2 +-
 .../guides/bundle-size-and-performance.md     |  2 +-
 scripts/measure-bundles.mjs                   | 16 ++++----
 7 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/API-FRICTION.md b/API-FRICTION.md
index b202fbe1..61dc6ff3 100644
--- a/API-FRICTION.md
+++ b/API-FRICTION.md
@@ -4336,9 +4336,13 @@ Each entry records:
 
   The isolated scene resolver is 4,952 minified / 1,981 gzip bytes versus 157 /
   153 for the anchor-only kernel: a 1,828-byte gzip feature cost under an
-  explicit 2 kB ceiling. The complete DOM host is 1,816 gzip bytes above the
-  pre-feature product lock, which remains unchanged for reviewer approval
-  rather than silently accepting a new baseline. A final size audit removed
+  explicit 2 kB ceiling. Against the pre-feature product lock, the complete
+  DOM host adds 1,816 gzip bytes, the React line consumer adds 1,833, and the
+  native host adds 1,801. These shared-host costs and the related aggregate
+  fixture ceilings were reviewed and accepted because painted-geometry
+  interaction is the default contract across DOM, Canvas, and native charts;
+  the exact locked baselines now record that decision while the isolated 2 kB
+  ceiling continues to constrain the resolver itself. A final size audit removed
   redundant built-in `MarkScene.points` arrays and explicit default `xy`
   affinity fields while retaining the optional point list for custom-mark
   compatibility. Against the immediate pre-audit build, that saves 119
diff --git a/PLAN.md b/PLAN.md
index 255a04b9..fe7bd89f 100644
--- a/PLAN.md
+++ b/PLAN.md
@@ -744,7 +744,7 @@ Measured by `pnpm bundle` with esbuild minification and Node gzip. These are loc
 
 | Bundle                                  |  Minified |      Gzip |
 | --------------------------------------- | --------: | --------: |
-| Core host                               |   6.97 kB |   2.85 kB |
+| Legacy Plot POC host core               |   6.97 kB |   2.85 kB |
 | Native `lineY` scene                    |   7.46 kB |   3.06 kB |
 | Native `lineY` plus static SVG          |   9.75 kB |   3.93 kB |
 | Native DOM host                         |   9.59 kB |   3.90 kB |
diff --git a/benchmarks/bundle-size/README.md b/benchmarks/bundle-size/README.md
index e631ee44..d7465ec6 100644
--- a/benchmarks/bundle-size/README.md
+++ b/benchmarks/bundle-size/README.md
@@ -25,12 +25,18 @@ may add only its transport module over the tooltip consumer. Ordinary line,
 compact-scale, and tooltip kernels also reject all transform modules.
 
 The compact linear scene and React consumer are both locked and budgeted. The
-scene has an 8.1 KiB gzip ceiling. The React line consumer has a 16.8 KiB
+scene has an 8.1 KiB gzip ceiling. The React line consumer has an 18.6 KiB
 ceiling with React and React DOM external. `d3-array` tick helpers are allowed
 only in the compact linear path; categorical compact-scale kernels reject
 every D3 runtime input. All compact fixtures reject `d3-scale`, `d3-format`,
 `d3-interpolate`, `d3-color`, and `internmap`.
 
+Painted-geometry interaction is part of the default scene and host contract
+across DOM, Canvas, and native rendering. Its isolated resolver has a 2 KiB
+gzip ceiling. The locked shared-host entries record the reviewed integration
+cost, while noninteractive consumers retain only the small scene-compiler
+portion of that contract.
+
 Every public transform family has an isolated budget and retained-input
 allowlist. Numeric and 2D bins may retain `d3-array`, and row stacks may retain
 `d3-shape`. Other transform entries reject those dependencies, while every
diff --git a/benchmarks/bundle-size/universal-baseline.json b/benchmarks/bundle-size/universal-baseline.json
index ec3e2747..a089f75d 100644
--- a/benchmarks/bundle-size/universal-baseline.json
+++ b/benchmarks/bundle-size/universal-baseline.json
@@ -3,44 +3,44 @@
   "policy": "Exact minified and gzip output for entries that optional features must not affect. Review every change before updating.",
   "bundles": {
     "D3-scale line scene": {
-      "bytes": 39086,
-      "gzip": 15175
+      "bytes": 39461,
+      "gzip": 15332
     },
     "D3-scale line + static SVG": {
-      "bytes": 42027,
-      "gzip": 16268
+      "bytes": 42402,
+      "gzip": 16421
     },
     "Representative marks": {
-      "bytes": 57688,
-      "gzip": 21428
+      "bytes": 58137,
+      "gzip": 21586
     },
     "TanStack DOM host": {
-      "bytes": 38770,
-      "gzip": 14229
+      "bytes": 44082,
+      "gzip": 16045
     },
     "React adapter": {
-      "bytes": 40937,
-      "gzip": 14924
+      "bytes": 46250,
+      "gzip": 16756
     },
     "React line consumer": {
-      "bytes": 63516,
-      "gzip": 23973
+      "bytes": 68866,
+      "gzip": 25806
     },
     "Compact-scale line scene": {
-      "bytes": 21550,
-      "gzip": 8118
+      "bytes": 21925,
+      "gzip": 8275
     },
     "React compact-scale line consumer": {
-      "bytes": 46033,
-      "gzip": 16876
+      "bytes": 51379,
+      "gzip": 18710
     },
     "Custom-scale line scene": {
-      "bytes": 19734,
-      "gzip": 7371
+      "bytes": 20110,
+      "gzip": 7529
     },
     "D3 linear-scale line scene": {
-      "bytes": 39018,
-      "gzip": 15139
+      "bytes": 39393,
+      "gzip": 15295
     }
   }
 }
diff --git a/docs/guides/bundle-size-and-performance.md b/docs/guides/bundle-size-and-performance.md
index f61bb378..f28e22b4 100644
--- a/docs/guides/bundle-size-and-performance.md
+++ b/docs/guides/bundle-size-and-performance.md
@@ -66,7 +66,7 @@ const interactive = defineChart(definition, {
 })
 ```
 
-The locked compact React line consumer must remain at or below 16.8 kB gzip.
+The locked compact React line consumer must remain at or below 18.6 kB gzip.
 Its retained-module gate rejects tooltip, portal, `d3-scale`, `d3-format`,
 `d3-interpolate`, `d3-color`, transforms, and sibling compact-scale entries.
 Separate incremental gates limit tooltip and portal growth.
diff --git a/packages/charts-core/docs/guides/bundle-size-and-performance.md b/packages/charts-core/docs/guides/bundle-size-and-performance.md
index f61bb378..f28e22b4 100644
--- a/packages/charts-core/docs/guides/bundle-size-and-performance.md
+++ b/packages/charts-core/docs/guides/bundle-size-and-performance.md
@@ -66,7 +66,7 @@ const interactive = defineChart(definition, {
 })
 ```
 
-The locked compact React line consumer must remain at or below 16.8 kB gzip.
+The locked compact React line consumer must remain at or below 18.6 kB gzip.
 Its retained-module gate rejects tooltip, portal, `d3-scale`, `d3-format`,
 `d3-interpolate`, `d3-color`, transforms, and sibling compact-scale entries.
 Separate incremental gates limit tooltip and portal growth.
diff --git a/scripts/measure-bundles.mjs b/scripts/measure-bundles.mjs
index a1cfd560..f953e543 100644
--- a/scripts/measure-bundles.mjs
+++ b/scripts/measure-bundles.mjs
@@ -135,7 +135,7 @@ const nativeExternals = [
   'react-native-svg/*',
 ]
 const entries = [
-  measured('Core host', 'benchmarks/entries/core.ts', {
+  measured('Legacy Plot POC host core', 'benchmarks/entries/core.ts', {
     inputBoundary: { forbid: ['d3GeometryRuntime'] },
   }),
   budgeted(
@@ -250,7 +250,7 @@ const entries = [
   budgeted(
     'D3-scale facets + static SVG',
     'benchmarks/entries/charts-facet-svg.ts',
-    18.8,
+    19.2,
   ),
   budgeted(
     'D3-scale arrows + static SVG',
@@ -281,7 +281,7 @@ const entries = [
   budgeted(
     'D3-scale ticks + static SVG',
     'benchmarks/entries/charts-tick-svg.ts',
-    16.6,
+    16.75,
   ),
   budgeted(
     'D3-scale vectors + static SVG',
@@ -447,7 +447,7 @@ const entries = [
   lockedBudgeted(
     'React compact-scale line consumer',
     'benchmarks/entries/charts-react-compact-line.ts',
-    16.8,
+    18.6,
     {
       external: ['react', 'react/jsx-runtime', 'react-dom'],
       rendererBoundary: 'svg',
@@ -555,7 +555,7 @@ const entries = [
   budgeted(
     'Stats parity surface',
     'benchmarks/entries/charts-stats-parity.ts',
-    40.5,
+    42.3,
   ),
   locked(
     'Custom-scale line scene',
@@ -606,12 +606,12 @@ const entries = [
   budgeted(
     'Direct D3 quadtree + TanStack DOM host',
     'benchmarks/entries/charts-d3-quadtree-dom.ts',
-    25.9,
+    26.4,
   ),
   budgeted(
     'Direct D3 Delaunay + TanStack DOM host',
     'benchmarks/entries/charts-d3-delaunay-dom.ts',
-    31.2,
+    31.6,
   ),
   measured('D3 array numeric kernel', 'benchmarks/entries/d3-array-kernel.ts'),
   measured(
@@ -781,7 +781,7 @@ const entries = [
   budgeted(
     'React Stats parity surface',
     'benchmarks/entries/charts-react-stats-parity.tsx',
-    41.5,
+    43.4,
     { external: ['react', 'react/jsx-runtime', 'react-dom'] },
   ),
   measured('Plot renderer integration', 'benchmarks/entries/plot-renderer.ts'),

From 76bcdbb409eab0ba3dfb4957c48af7525d1d34be Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Sat, 1 Aug 2026 22:54:04 -0600
Subject: [PATCH 5/5] Address interaction geometry review

---
 API-FRICTION.md                               | 10 ++---
 benchmarks/bundle-size/README.md              | 10 ++---
 .../bundle-size/universal-baseline.json       | 16 +++----
 benchmarks/interaction/README.md              |  2 +-
 docs/guides/bundle-size-and-performance.md    |  2 +-
 examples/sandbox/package.json                 |  2 +-
 .../src/InteractionGeometryLab.test.ts        | 33 ++++----------
 .../sandbox/src/InteractionGeometryLab.tsx    | 43 ++++++++++---------
 examples/sandbox/src/main.tsx                 | 15 ++++++-
 examples/sandbox/src/styles.css               |  4 +-
 .../guides/bundle-size-and-performance.md     |  2 +-
 packages/charts-core/src/canvas.ts            | 37 ++++++++++++++--
 packages/charts-core/src/dom-types.ts         |  6 ++-
 packages/charts-core/src/facet.test.ts        | 15 +++++--
 packages/charts-core/src/nearest.test.ts      | 24 +++++++++--
 packages/charts-core/src/nearest.ts           |  4 ++
 packages/charts-core/src/renderer.ts          |  4 +-
 17 files changed, 143 insertions(+), 86 deletions(-)

diff --git a/API-FRICTION.md b/API-FRICTION.md
index 61dc6ff3..977cef47 100644
--- a/API-FRICTION.md
+++ b/API-FRICTION.md
@@ -4334,11 +4334,11 @@ Each entry records:
   for the generic rectangle resolver, but deliberately excludes Vega's
   subsequent Canvas path test.
 
-  The isolated scene resolver is 4,952 minified / 1,981 gzip bytes versus 157 /
-  153 for the anchor-only kernel: a 1,828-byte gzip feature cost under an
-  explicit 2 kB ceiling. Against the pre-feature product lock, the complete
-  DOM host adds 1,816 gzip bytes, the React line consumer adds 1,833, and the
-  native host adds 1,801. These shared-host costs and the related aggregate
+  The isolated scene resolver is 5,010 minified / 2,005 gzip bytes versus 157 /
+  153 for the anchor-only kernel: a 1,852-byte gzip feature cost under an
+  explicit 2 KiB ceiling. Against the pre-feature product lock, the complete
+  DOM host adds 1,840 gzip bytes, the React line consumer adds 1,859, and the
+  native host adds 1,824. These shared-host costs and the related aggregate
   fixture ceilings were reviewed and accepted because painted-geometry
   interaction is the default contract across DOM, Canvas, and native charts;
   the exact locked baselines now record that decision while the isolated 2 kB
diff --git a/benchmarks/bundle-size/README.md b/benchmarks/bundle-size/README.md
index d7465ec6..0756029c 100644
--- a/benchmarks/bundle-size/README.md
+++ b/benchmarks/bundle-size/README.md
@@ -25,11 +25,11 @@ may add only its transport module over the tooltip consumer. Ordinary line,
 compact-scale, and tooltip kernels also reject all transform modules.
 
 The compact linear scene and React consumer are both locked and budgeted. The
-scene has an 8.1 KiB gzip ceiling. The React line consumer has an 18.6 KiB
-ceiling with React and React DOM external. `d3-array` tick helpers are allowed
-only in the compact linear path; categorical compact-scale kernels reject
-every D3 runtime input. All compact fixtures reject `d3-scale`, `d3-format`,
-`d3-interpolate`, `d3-color`, and `internmap`.
+scene has an 8.1 KiB gzip ceiling. The React compact-scale line consumer has an
+18.6 KiB ceiling with React and React DOM external. `d3-array` tick helpers are
+allowed only in the compact linear path; categorical compact-scale kernels
+reject every D3 runtime input. All compact fixtures reject `d3-scale`,
+`d3-format`, `d3-interpolate`, `d3-color`, and `internmap`.
 
 Painted-geometry interaction is part of the default scene and host contract
 across DOM, Canvas, and native rendering. Its isolated resolver has a 2 KiB
diff --git a/benchmarks/bundle-size/universal-baseline.json b/benchmarks/bundle-size/universal-baseline.json
index a089f75d..972100ce 100644
--- a/benchmarks/bundle-size/universal-baseline.json
+++ b/benchmarks/bundle-size/universal-baseline.json
@@ -15,24 +15,24 @@
       "gzip": 21586
     },
     "TanStack DOM host": {
-      "bytes": 44082,
-      "gzip": 16045
+      "bytes": 44140,
+      "gzip": 16069
     },
     "React adapter": {
-      "bytes": 46250,
-      "gzip": 16756
+      "bytes": 46308,
+      "gzip": 16790
     },
     "React line consumer": {
-      "bytes": 68866,
-      "gzip": 25806
+      "bytes": 68924,
+      "gzip": 25832
     },
     "Compact-scale line scene": {
       "bytes": 21925,
       "gzip": 8275
     },
     "React compact-scale line consumer": {
-      "bytes": 51379,
-      "gzip": 18710
+      "bytes": 51437,
+      "gzip": 18736
     },
     "Custom-scale line scene": {
       "bytes": 20110,
diff --git a/benchmarks/interaction/README.md b/benchmarks/interaction/README.md
index 06cfe35b..6ae9f952 100644
--- a/benchmarks/interaction/README.md
+++ b/benchmarks/interaction/README.md
@@ -81,7 +81,7 @@ and [Canvas picker](https://github.com/vega/vega/blob/main/packages/vega-scenegr
 
 `pnpm bundle:check` reports isolated anchor-only and geometry resolver entries
 beside the existing D3 quadtree and Delaunay kernels. The geometry resolver has
-a 2 kB gzip ceiling; the historical anchor-only entry stays unbudgeted so the
+a 2 KiB gzip ceiling; the historical anchor-only entry stays unbudgeted so the
 comparison remains visible without treating removed behavior as a product.
 
 The command exposes explicit garbage collection and rotates implementation
diff --git a/docs/guides/bundle-size-and-performance.md b/docs/guides/bundle-size-and-performance.md
index f28e22b4..065f5802 100644
--- a/docs/guides/bundle-size-and-performance.md
+++ b/docs/guides/bundle-size-and-performance.md
@@ -66,7 +66,7 @@ const interactive = defineChart(definition, {
 })
 ```
 
-The locked compact React line consumer must remain at or below 18.6 kB gzip.
+The locked compact React line consumer must remain at or below 18.6 KiB gzip.
 Its retained-module gate rejects tooltip, portal, `d3-scale`, `d3-format`,
 `d3-interpolate`, `d3-color`, transforms, and sibling compact-scale entries.
 Separate incremental gates limit tooltip and portal growth.
diff --git a/examples/sandbox/package.json b/examples/sandbox/package.json
index 6ce9d1b4..dbf8ca0d 100644
--- a/examples/sandbox/package.json
+++ b/examples/sandbox/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite --host --port 5183 --strictPort",
-    "dev:interaction-geometry": "vite --host --port 5183 --strictPort --open '/?lab=interaction-geometry'"
+    "dev:interaction-geometry": "vite --host --port 5183 --strictPort --open /?lab=interaction-geometry"
   },
   "dependencies": {
     "@charts-poc/demo-data": "workspace:*",
diff --git a/examples/sandbox/src/InteractionGeometryLab.test.ts b/examples/sandbox/src/InteractionGeometryLab.test.ts
index 66eb0950..2b41a2c1 100644
--- a/examples/sandbox/src/InteractionGeometryLab.test.ts
+++ b/examples/sandbox/src/InteractionGeometryLab.test.ts
@@ -1,16 +1,14 @@
 import { describe, expect, it } from 'vitest'
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import {
-  createChartScene,
-  findNearestPoint,
-} from '../../../packages/charts-core/src/scene'
-import type { ChartPoint, SceneNode } from '@tanstack/charts'
+import { createChartScene, findNearestPoint } from '@tanstack/charts'
+import type { SceneNode } from '@tanstack/charts'
 import { focusX, focusY } from '@tanstack/charts/focus'
 import {
   animatedDestinationDefinition,
   facetFocusDefinitions,
   InteractionGeometryLab,
+  legacyPointFocus,
   proofCases,
   type ProofDatum,
 } from './InteractionGeometryLab'
@@ -193,7 +191,12 @@ describe('interaction geometry proof gallery', () => {
       expect(probe).not.toBeNull()
       if (!probe) return
 
-      const before = legacyNearest(scene.points, probe.x, probe.y, 48)
+      const before = legacyPointFocus.resolve(
+        scene.points,
+        probe.x,
+        probe.y,
+        48,
+      )[0]
       const after = findNearestPoint(scene, probe.x, probe.y, 48)
 
       expect(before?.datum.label ?? 'Nothing focused yet').toBe(
@@ -313,21 +316,3 @@ function findRect(
   }
   return null
 }
-
-function legacyNearest<TDatum>(
-  points: readonly ChartPoint<TDatum, number, number>[],
-  x: number,
-  y: number,
-  maxDistance: number,
-) {
-  let result: ChartPoint<TDatum, number, number> | undefined
-  let distance = Number.POSITIVE_INFINITY
-  for (const point of points) {
-    const candidate = (point.x - x) ** 2 + (point.y - y) ** 2
-    if (candidate < distance) {
-      result = point
-      distance = candidate
-    }
-  }
-  return distance <= maxDistance ** 2 ? result : null
-}
diff --git a/examples/sandbox/src/InteractionGeometryLab.tsx b/examples/sandbox/src/InteractionGeometryLab.tsx
index 00c9ffc4..517b3644 100644
--- a/examples/sandbox/src/InteractionGeometryLab.tsx
+++ b/examples/sandbox/src/InteractionGeometryLab.tsx
@@ -91,28 +91,29 @@ const canvasProofIds = new Set<string>([
   'complex-polygons',
 ])
 
-const legacyPointFocus: ChartFocusStrategy<ProofDatum, number, number> = {
-  resolve(points, x, y, maxDistance) {
-    let nearest: ChartPoint<ProofDatum, number, number> | undefined
-    let nearestDistance = Number.POSITIVE_INFINITY
-    for (const point of points) {
-      const distance = (point.x - x) ** 2 + (point.y - y) ** 2
-      if (distance < nearestDistance) {
-        nearest = point
-        nearestDistance = distance
+export const legacyPointFocus: ChartFocusStrategy<ProofDatum, number, number> =
+  {
+    resolve(points, x, y, maxDistance) {
+      let nearest: ChartPoint<ProofDatum, number, number> | undefined
+      let nearestDistance = Number.POSITIVE_INFINITY
+      for (const point of points) {
+        const distance = (point.x - x) ** 2 + (point.y - y) ** 2
+        if (distance < nearestDistance) {
+          nearest = point
+          nearestDistance = distance
+        }
       }
-    }
-    return nearest && nearestDistance <= Math.max(0, maxDistance) ** 2
-      ? [nearest]
-      : []
-  },
-  group(_points, point) {
-    return [point]
-  },
-  navigation(points) {
-    return points
-  },
-}
+      return nearest && nearestDistance <= Math.max(0, maxDistance) ** 2
+        ? [nearest]
+        : []
+    },
+    group(_points, point) {
+      return [point]
+    },
+    navigation(points) {
+      return points
+    },
+  }
 
 // source:faceted-bars:start
 const facetedBars = ['North', 'South'].flatMap((panel) =>
diff --git a/examples/sandbox/src/main.tsx b/examples/sandbox/src/main.tsx
index c7460c8d..7f433370 100644
--- a/examples/sandbox/src/main.tsx
+++ b/examples/sandbox/src/main.tsx
@@ -1,7 +1,12 @@
+import { lazy, Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
 import './styles.css'
 import { App } from './App'
-import { InteractionGeometryLab } from './InteractionGeometryLab'
+
+const InteractionGeometryLab = lazy(async () => {
+  const module = await import('./InteractionGeometryLab')
+  return { default: module.InteractionGeometryLab }
+})
 
 const lab = new URLSearchParams(window.location.search).get('lab')
 const showInteractionGeometryLab = lab === 'interaction-geometry'
@@ -10,5 +15,11 @@ if (showInteractionGeometryLab) {
 }
 
 createRoot(document.getElementById('root')!).render(
-  showInteractionGeometryLab ? <InteractionGeometryLab /> : <App />,
+  showInteractionGeometryLab ? (
+    <Suspense fallback={null}>
+      <InteractionGeometryLab />
+    </Suspense>
+  ) : (
+    <App />
+  ),
 )
diff --git a/examples/sandbox/src/styles.css b/examples/sandbox/src/styles.css
index f7002f7e..82a58602 100644
--- a/examples/sandbox/src/styles.css
+++ b/examples/sandbox/src/styles.css
@@ -220,7 +220,7 @@
 }
 
 .hit-region-proof__case--stress .hit-region-proof__chart > svg,
-.hit-region-proof__case--stress .hit-region-proof__chart > div:first-child {
+.hit-region-proof__case--stress .hit-region-proof__chart > .ts-chart-canvas {
   min-height: 320px;
 }
 
@@ -281,7 +281,7 @@
 }
 
 .hit-region-proof__chart > svg,
-.hit-region-proof__chart > div:first-child {
+.hit-region-proof__chart > .ts-chart-canvas {
   min-height: 230px;
 }
 
diff --git a/packages/charts-core/docs/guides/bundle-size-and-performance.md b/packages/charts-core/docs/guides/bundle-size-and-performance.md
index f28e22b4..065f5802 100644
--- a/packages/charts-core/docs/guides/bundle-size-and-performance.md
+++ b/packages/charts-core/docs/guides/bundle-size-and-performance.md
@@ -66,7 +66,7 @@ const interactive = defineChart(definition, {
 })
 ```
 
-The locked compact React line consumer must remain at or below 18.6 kB gzip.
+The locked compact React line consumer must remain at or below 18.6 KiB gzip.
 Its retained-module gate rejects tooltip, portal, `d3-scale`, `d3-format`,
 `d3-interpolate`, `d3-color`, transforms, and sibling compact-scale entries.
 Separate incremental gates limit tooltip and portal growth.
diff --git a/packages/charts-core/src/canvas.ts b/packages/charts-core/src/canvas.ts
index 85d8cb61..f658f727 100644
--- a/packages/charts-core/src/canvas.ts
+++ b/packages/charts-core/src/canvas.ts
@@ -16,6 +16,7 @@ import type {
   ChartRuntime,
   ChartScene,
   ChartValue,
+  RenderChartOptions,
   SceneNode,
   SceneStyle,
 } from './types'
@@ -46,6 +47,26 @@ export interface CanvasChartRenderer<
   ) => CanvasChartSurface<TDatum, TXValue, TYValue>
 }
 
+interface UniversalCanvasChartRenderer {
+  readonly id: string
+  prerender: <
+    TDatum = unknown,
+    TXValue extends ChartValue = ChartValue,
+    TYValue extends ChartValue = ChartValue,
+  >(
+    scene: ChartScene<TDatum, TXValue, TYValue>,
+    options: RenderChartOptions,
+  ) => string
+  mount: <
+    TDatum = unknown,
+    TXValue extends ChartValue = ChartValue,
+    TYValue extends ChartValue = ChartValue,
+  >(
+    container: HTMLElement,
+    requestRender: (force?: boolean) => void,
+  ) => CanvasChartSurface<TDatum, TXValue, TYValue>
+}
+
 type DistributiveOmit<TValue, TKey extends PropertyKey> = TValue extends unknown
   ? Omit<TValue, TKey>
   : never
@@ -118,12 +139,22 @@ export function createCanvasChartRenderer<
 >(
   rendererOptions: CanvasChartRendererOptions = {},
 ): CanvasChartRenderer<TDatum, TXValue, TYValue> {
-  const renderer: CanvasChartRenderer<TDatum, TXValue, TYValue> = {
+  return createUniversalCanvasChartRenderer(rendererOptions)
+}
+
+function createUniversalCanvasChartRenderer(
+  rendererOptions: CanvasChartRendererOptions = {},
+): UniversalCanvasChartRenderer {
+  const renderer: UniversalCanvasChartRenderer = {
     id: 'canvas',
     prerender(scene, options) {
       return renderCanvasShell(scene, options)
     },
-    mount(container, requestRender) {
+    mount<
+      TDatum = unknown,
+      TXValue extends ChartValue = ChartValue,
+      TYValue extends ChartValue = ChartValue,
+    >(container: HTMLElement, requestRender: (force?: boolean) => void) {
       const document = container.ownerDocument
       const view = document.defaultView
       const root = findOrCreateRoot(container)
@@ -267,7 +298,7 @@ export function createCanvasChartRenderer<
   return renderer
 }
 
-export const canvasChartRenderer = createCanvasChartRenderer()
+export const canvasChartRenderer = createUniversalCanvasChartRenderer()
 
 export function mountCanvasChart<
   TDatum,
diff --git a/packages/charts-core/src/dom-types.ts b/packages/charts-core/src/dom-types.ts
index 122de606..fc41a8b3 100644
--- a/packages/charts-core/src/dom-types.ts
+++ b/packages/charts-core/src/dom-types.ts
@@ -38,10 +38,14 @@ export interface ChartSurface<
     clientX: number,
     clientY: number,
   ) => { x: number; y: number } | null
+  /**
+   * Paints focus and may return a destination scene for interaction during a
+   * transition. A returned scene preserves the rendered scene's layout.
+   */
   paintFocus: (
     focus: ChartFocusState<TDatum, TXValue, TYValue> | null,
     pointer?: ChartTooltipPosition | null,
-  ) => ChartScene<any, any, any> | void
+  ) => ChartScene<TDatum, TXValue, TYValue> | void
   destroy: () => void
 }
 
diff --git a/packages/charts-core/src/facet.test.ts b/packages/charts-core/src/facet.test.ts
index 3785e5e6..2a0604ec 100644
--- a/packages/charts-core/src/facet.test.ts
+++ b/packages/charts-core/src/facet.test.ts
@@ -44,6 +44,13 @@ describe('facets', () => {
     ).toHaveLength(2)
     expect(scene.points).toHaveLength(4)
     expect(new Set(scene.points.map((point) => point.key)).size).toBe(4)
+    expect(
+      flatten(scene.nodes).filter(
+        (node) =>
+          node.kind === 'group' &&
+          node.className?.includes('ts-chart__focus-layer--default'),
+      ),
+    ).toHaveLength(1)
     expect(scene.points[2]?.x).toBeGreaterThan(scene.points[0]?.x ?? 0)
     expect(svg).toContain('transform="translate(')
     expect(svg).toContain('Alpha')
@@ -453,8 +460,8 @@ describe('facets', () => {
     expect(visibleLayers).toHaveLength(2)
     expect(visibleBands).toHaveLength(2)
     expect(
-      new Set(visibleBands.map((band) => band.getAttribute('x'))),
-    ).toHaveLength(1)
+      new Set(visibleBands.map((band) => band.getAttribute('x'))).size,
+    ).toBe(1)
     surface.destroy()
   })
 
@@ -517,8 +524,8 @@ describe('facets', () => {
       visibleBands.every((band) => Number(band.getAttribute('height')) > 0),
     ).toBe(true)
     expect(
-      new Set(visibleBands.map((band) => band.getAttribute('y'))),
-    ).toHaveLength(1)
+      new Set(visibleBands.map((band) => band.getAttribute('y'))).size,
+    ).toBe(1)
     surface.destroy()
   })
 
diff --git a/packages/charts-core/src/nearest.test.ts b/packages/charts-core/src/nearest.test.ts
index 223cbc30..086bf35f 100644
--- a/packages/charts-core/src/nearest.test.ts
+++ b/packages/charts-core/src/nearest.test.ts
@@ -176,6 +176,24 @@ describe('scene interaction geometry', () => {
     expect(nearestScenePoint(lineScene, 100, 154, 48)).toBeNull()
   })
 
+  it('keeps one-point polylines selectable', () => {
+    const linePoint = point('line', 100, 100)
+    const scene = testScene(
+      [
+        {
+          kind: 'polyline',
+          key: linePoint.key,
+          points: [[100, 100]],
+          interaction: { point: linePoint, affinity: 'geometry' },
+        },
+      ],
+      [linePoint],
+    )
+
+    expect(nearestScenePoint(scene, 100, 100, 0)?.key).toBe('line')
+    expect(nearestScenePoint(scene, 102, 100, 0)).toBeNull()
+  })
+
   it('respects rounded corners from the rendered rectangle', () => {
     const rounded = point('rounded', 100, 100)
     const scene = testScene(
@@ -396,8 +414,6 @@ function expectBarUsesScenePrimitive<
 
   expect(rectNode?.kind).toBe('rect')
   if (rectNode?.kind !== 'rect') throw new Error('Expected bar rectangle')
-  expect(rectNode.interaction).toEqual({
-    point,
-    affinity: expectedAffinity,
-  })
+  expect(rectNode.interaction?.point).toBe(point)
+  expect(rectNode.interaction?.affinity).toBe(expectedAffinity)
 }
diff --git a/packages/charts-core/src/nearest.ts b/packages/charts-core/src/nearest.ts
index 29380272..5484c571 100644
--- a/packages/charts-core/src/nearest.ts
+++ b/packages/charts-core/src/nearest.ts
@@ -424,6 +424,10 @@ function squaredDistanceToPolyline(
   closed: boolean,
 ) {
   if (!points.length) return Infinity
+  if (points.length === 1) {
+    const point = points[0]!
+    return (point[0] - x) ** 2 + (point[1] - y) ** 2
+  }
   let distance = Infinity
   const segmentCount = closed ? points.length : Math.max(0, points.length - 1)
   for (let index = 0; index < segmentCount; index += 1) {
diff --git a/packages/charts-core/src/renderer.ts b/packages/charts-core/src/renderer.ts
index 99e14b0e..bb297909 100644
--- a/packages/charts-core/src/renderer.ts
+++ b/packages/charts-core/src/renderer.ts
@@ -228,9 +228,7 @@ export function mountChartRenderer<
         : null,
       pointerPosition,
     )
-    interactionScene =
-      (paintedScene as ChartScene<TDatum, TXValue, TYValue> | undefined) ??
-      scene
+    interactionScene = paintedScene ?? scene
     paintTooltip(point, points)
   }