@antadesign/anta 0.3.33 → 0.3.35

package/docs/packages/plot.md

@@ -24,7 +24,7 @@ Combine multiple series in one plot to compare values, show trends, and add cont
 
 
 ```ts
-import { area, line, rule, scatter, type PlotArgs, type Series } from '@antadesign/plot'
+import { area, line, rule, scatter, type PlotArgs } from '@antadesign/plot'
 import '@antadesign/plot/elements/a-plot'
 import type { APlotElement } from '@antadesign/plot/browser'
 
@@ -52,8 +52,8 @@ function overviewExample(): PlotArgs<Node> {
 
   const meanExpected = forecast.reduce((sum, point) => sum + point.expected, 0) / forecast.length
 
-  const series: Series<Node>[] = [
-    area<Node>({
+  const series: PlotArgs<Node>['series'] = [
+    area({
       data: forecast,
       x: 'hour',
       y: 'high',
@@ -61,14 +61,14 @@ function overviewExample(): PlotArgs<Node> {
       color: { light: '#ede9fe', dark: '#30274e' },
       hoverable: false,
     }),
-    rule<Node>({
+    rule({
       y: meanExpected,
       color: { light: '#d97706', dark: '#fbbf24' },
       width: 2,
       dash: [8, 4],
       hoverable: false,
     }),
-    line<Node>({
+    line({
       data: forecast,
       x: 'hour',
       y: 'expected',
@@ -77,7 +77,7 @@ function overviewExample(): PlotArgs<Node> {
       dash: [5, 5],
       tooltip: ({ x, y }) => document.createTextNode('Forecast at ' + x + 'h: ' + Math.round(Number(y)) + ' requests/s'),
     }),
-    line<Node>({
+    line({
       data: trend,
       x: 'hour',
       y: 'average',
@@ -85,7 +85,7 @@ function overviewExample(): PlotArgs<Node> {
       width: 3,
       tooltip: ({ x, y }) => document.createTextNode('Trend at ' + x + 'h: ' + Math.round(Number(y)) + ' requests/s'),
     }),
-    scatter<Node>({
+    scatter({
       data: observations.filter(point => !point.outside),
       x: 'hour',
       y: 'actual',
@@ -93,7 +93,7 @@ function overviewExample(): PlotArgs<Node> {
       size: 4,
       tooltip: ({ x, y }) => document.createTextNode('Observed at ' + x + 'h: ' + y + ' requests/s'),
     }),
-    scatter<Node>({
+    scatter({
       data: observations.filter(point => point.outside),
       x: 'hour',
       y: 'actual',
@@ -126,7 +126,7 @@ function overviewExample(): PlotArgs<Node> {
 
   const grid = false
 
-  const zoom_pan = { x: true, y: true, modifier: false }
+  const zoom_pan = { x: true, y: true }
 
   // Replace the object to apply a change; Plot does not observe in-place mutation.
   const plotArgs: PlotArgs<Node> = { ...options, series, axis, margin, grid, zoom_pan }
@@ -165,11 +165,11 @@ function energyExample(): PlotArgs<Node> {
   ]
   return {
     series: [
-      bar<Node>({ data, y: ['solar', 'wind'],
+      bar({ data, y: ['solar', 'wind'],
         color: [{ light: '#fbbf24', dark: '#d97706' }, { light: '#2dd4bf', dark: '#0d9488' }],
         inset: 5, border_radius: 3,
         tooltip: ({ x, y, label }) => document.createTextNode('Site ' + x + ' · ' + label + ': ' + y + ' kW') }),
-      scatter<Node>({ data, y: 'demand', mark: 'diamond', size: 7,
+      scatter({ data, y: 'demand', mark: 'diamond', size: 7,
         tooltip: ({ x, y }) => document.createTextNode('Site ' + x + ' · Demand: ' + y + ' kW'),
         color: { light: '#7c3aed', dark: '#c4b5fd' },
         stroke: { color: { light: '#ffffff', dark: '#151b28' }, width: 1.5 } }),
@@ -210,12 +210,12 @@ function latencyExample(): PlotArgs<Node> {
   const curve = Array.from({ length: 121 }, (_, i) => ({ x: i * 2, y: density(i * 2) }))
   return {
     series: [
-      area<Node>({ data: curve, y2: 0, color: { light: '#fce7f3', dark: '#452039' }, hoverable: false }),
-      rect<Node>({ data: bins, color: { light: '#f472b6', dark: '#be185d' },
+      area({ data: curve, y2: 0, color: { light: '#fce7f3', dark: '#452039' }, hoverable: false }),
+      rect({ data: bins, color: { light: '#f472b6', dark: '#be185d' },
         tooltip: ({ row, y }) => document.createTextNode(
           (Number(row.x) - 1) + '–' + (Number(row.x2) + 1) + ' ms · ' + Math.round(Number(y)) + ' requests',
         ) }),
-      line<Node>({ data: curve, color: { light: '#9d174d', dark: '#fbcfe8' }, width: 2.5,
+      line({ data: curve, color: { light: '#9d174d', dark: '#fbcfe8' }, width: 2.5,
         tooltip: ({ x, y }) => document.createTextNode('Distribution at ' + x + ' ms: ' + Number(y).toFixed(1) + ' requests') }),
 
     ],
@@ -279,24 +279,24 @@ function mixedExample(): PlotArgs<Node> {
   ]
   return {
     series: [
-      area<Node>({ data: Array.from({ length: 81 }, (_, i) => {
+      area({ data: Array.from({ length: 81 }, (_, i) => {
         const x = i * 1.25
         const center = 50 + 7 * Math.sin(i / 9) + 3 * Math.cos(i / 4)
         const spread = 3 + 1.5 * Math.sin(i / 11) ** 2
         return { x, y: center + spread, y2: center - spread }
       }), color: { light: '#99f6e4', dark: '#115e59' },
         stroke: { color: { light: '#14b8a6', dark: '#5eead4' }, width: 1 } }),
-      ...points.map((point, i) => scatter<Node>({ data: [point], size: [7, 12, 21, 10, 15, 9, 26, 13, 11, 8, 14][i],
+      ...points.map((point, i) => scatter({ data: [point], size: [7, 12, 21, 10, 15, 9, 26, 13, 11, 8, 14][i],
         mark: 'circle', color: colors[i % colors.length],
         tooltip: ({ x, y }) => document.createTextNode('Point ' + (i + 1) + ' · (' + x + ', ' + y + ')'),
         stroke: { color: { light: '#ffffff', dark: '#151b28' }, width: 1.5 } })),
-      rect<Node>({ data: [{ x: 32, x2: 44, y: 31, y2: 47 }],
+      rect({ data: [{ x: 32, x2: 44, y: 31, y2: 47 }],
         color: { light: '#ddd6fe', dark: '#5b21b6' },
         stroke: { color: { light: '#8b5cf6', dark: '#c4b5fd' }, width: 1.5 } }),
-      rect<Node>({ data: [{ x: 76, x2: 97, y: 76, y2: 96 }],
+      rect({ data: [{ x: 76, x2: 97, y: 76, y2: 96 }],
         color: { light: 'rgba(254, 215, 170, 0.55)', dark: 'rgba(154, 52, 18, 0.55)' },
         stroke: { color: { light: '#f97316', dark: '#fdba74' }, width: 1.5 } }),
-      ...smoothPaths.map((data, i) => line<Node>({ data, width: 2.5, dash: i === 1 ? [7, 5] : [],
+      ...smoothPaths.map((data, i) => line({ data, width: 2.5, dash: i === 1 ? [7, 5] : [],
         tooltip: ({ x, y }) => document.createTextNode(
           'Line ' + (i + 1) + ' · (' + Number(x).toFixed(1) + ', ' + Number(y).toFixed(1) + ')',
         ),
@@ -304,7 +304,7 @@ function mixedExample(): PlotArgs<Node> {
           : { light: '#f97316', dark: '#fdba74' },
       })),
 
-      rule<Node>({ y: 10, color: { light: '#0284c7', dark: '#7dd3fc' }, width: 1.5, dash: [6, 4] }),
+      rule({ y: 10, color: { light: '#0284c7', dark: '#7dd3fc' }, width: 1.5, dash: [6, 4] }),
     ],
     axis: { x: { min: 0, max: 100, label: '' }, y: { min: 0, max: 100, label: '' } },
     background: { light: '#ffffff', dark: '#151b28' },
@@ -394,7 +394,7 @@ const examplePoints = [
 
 function presentation(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: examplePoints, size: 3,
+    series: [scatter({ data: examplePoints, size: 3,
       color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
     title: { text: 'Plot title', font: { size: 16, color: { light: '#374151', dark: '#e5e7eb' } } },
     height: 260,
@@ -429,7 +429,7 @@ const examplePoints = [
 
 function spacing(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: examplePoints, size: 3,
+    series: [scatter({ data: examplePoints, size: 3,
       color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
     height: 260,
     margin: { top: 40, right: 40, bottom: 68, left: 88 },
@@ -461,12 +461,15 @@ document.body.append(plot)
 | [`chrome_color?`](#theme-colors) | `string \| { light, dark }` | Theme defaults | Color for axis lines, tick marks, grid lines, and the plot border. Text colors are configured separately. |
 | [`background?`](#theme-colors) | `boolean \| string \| { light, dark }` | White | Plot fill. `false` paints none; `true` and an absent value use `#fff`. |
 | [`theme_invert?`](#theme-colors) | `boolean` | Automatic | Forces dark-mode inversion on or off. Absent means invert unless a series color or the background is a `{ light, dark }` pair. |
-| [`zoom_pan?`](#zoom-and-pan) | `boolean \| { x?, y?, modifier? }` | Both axes, Ctrl required | Require Ctrl for zoom and pan by default. Set `modifier: false` to allow gestures without Ctrl. Set both axes to `false` to disable zoom and pan. |
+| [`zoom_pan?`](#zoom-and-pan) | `boolean \| { x?, y?, menu_zoom_step? }` | Both continuous axes | Scroll to zoom and drag to pan. Scroll or drag on an axis to affect only that axis. Set both axes to `false` to disable zoom and pan. |
 | [`viewport?`](#viewport) | `{ x?, y?, key? }` | Full domain | Requested starting window per axis. Applied at mount and on each `key` change, clamped to the full domain. |
 | [`on_viewport_change?`](#viewport-changes) | `(change: ViewportChange) => void` | None | Fires with each axis's current window and full extent after a gesture or reset. |
 
-A zoomed plot shows a **Reset zoom** button in the plot area; it
-disappears once the view is back to its full extent.
+Right-click the plot for **Reset Zoom**, **Zoom Out**, and **Zoom In**.
+Unavailable actions stay visible and disabled. Reset restores the full viewport;
+double-clicking does not reset. Focus the plot zoom controls and press Shift+F10
+or the Context Menu key to open the menu from the keyboard. Ctrl-primary click
+is reserved for rectangle zoom on macOS too; use a secondary click for the menu.
 
 ### Axes
 
@@ -491,7 +494,7 @@ const examplePoints = [
 function logarithmic(): PlotArgs<Node> {
   const data = examplePoints.map(({ x, y }) => ({ x, y: 10 ** (y / 20 - 1) }))
   return {
-    series: [scatter<Node>({ data, size: 3,
+    series: [scatter({ data, size: 3,
       color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
     height: 260,
     margin: { top: 12, right: 14, bottom: 44, left: 80 },
@@ -531,7 +534,7 @@ function timeAxis(): PlotArgs<Node> {
   const start = Date.UTC(2026, 0, 12)
   const data = examplePoints.map(({ x, y }) => ({ x: start + x / 100 * 86400000, y }))
   return {
-    series: [scatter<Node>({ data, size: 3,
+    series: [scatter({ data, size: 3,
       color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
     height: 260,
     margin: { top: 12, right: 16, bottom: 44, left: 76 },
@@ -680,7 +683,7 @@ Scatter arguments
 | `x?` | [`FieldArg`](#data-fields) | `'x'` | Horizontal field name or accessor. |
 | `y?` | [`FieldArg`](#data-fields) | `'y'` | Vertical field name or accessor. |
 | `color?` | [`ColorArg`](#series-colors) | Black | Series color; theme pairs provide separate light and dark colors. |
-| `size?` | `number \| ((row, index) => number)` | `5` | Mark diameter in pixels, or a per-row accessor. A row’s `size` takes precedence. |
+| `size?` | `number \| ((row, index, viewport) => number)` | `5` | [Mark diameter](#size) in pixels, or a per-row accessor. A row’s `size` takes precedence. |
 | [`mark?`](#mark-shapes) | `MarkShape` | `'circle'` | Mark shape: circle, square, diamond, or triangle. |
 | [`stroke?`](#strokes) | `StrokeArg` | None | Outline color and optional width. |
 | [`tooltip?`](#tooltips) | `TooltipArg` | None | Use `true` for the default tooltip, or a callback for custom content. |
@@ -731,7 +734,7 @@ const data = Array.from({ length: 97 }, (_, i) => ({
 
 plot.plotArgs = {
   series: [
-    line<Node>({
+    line({
       data,
       y: 'expected',
       color: { light: '#c2410c', dark: '#fdba74' },
@@ -739,7 +742,7 @@ plot.plotArgs = {
       dash: [7, 5],
       tooltip: ({ y }) => document.createTextNode('Expected: ' + Math.round(Number(y))),
     }),
-    line<Node>({
+    line({
       data,
       y: 'measured',
       color: { light: '#0891b2', dark: '#67e8f9' },
@@ -776,7 +779,7 @@ const data = Array.from({ length: 13 }, (_, i) => ({
 }))
 
 plot.plotArgs = {
-  series: [line<Node>({
+  series: [line({
     data,
     color: { light: '#7c3aed', dark: '#c4b5fd' },
     width: 3,
@@ -864,7 +867,7 @@ const data = [
 ]
 
 plot.plotArgs = {
-  series: [bar<Node>({
+  series: [bar({
     data,
     x: 'day',
     y: 'requests',
@@ -908,7 +911,7 @@ const data = [
 ]
 
 plot.plotArgs = {
-  series: [bar<Node>({
+  series: [bar({
     data,
     x: 'requests',
     y: 'service',
@@ -952,7 +955,7 @@ const data = [
 ]
 
 plot.plotArgs = {
-  series: [bar<Node>({
+  series: [bar({
     data,
     x: 'month',
     y: 'change',
@@ -991,7 +994,7 @@ function categoryOrder(): PlotArgs<Node> {
     { severity: 'Critical', count: 12 }, { severity: 'Medium', count: 35 },
   ]
   return {
-    series: [bar<Node>({ data, x: 'severity', y: 'count', inset: 10, border_radius: 3,
+    series: [bar({ data, x: 'severity', y: 'count', inset: 10, border_radius: 3,
       color: { light: '#64748b', dark: '#94a3b8' },
       tooltip: ({ x, y }) => document.createTextNode(x + ': ' + y + ' issues'),
     })],
@@ -1078,7 +1081,7 @@ const data = [
 ]
 
 plot.plotArgs = {
-  series: [bar<Node>({
+  series: [bar({
     data,
     x: 'day',
     y: ['network', 'compute', 'storage'],
@@ -1120,7 +1123,7 @@ function stackedHorizontal(): PlotArgs<Node> {
     { service: 'Export', network: 12, compute: 36, storage: 18 },
   ]
   return {
-    series: [bar<Node>({ data, x: ['network', 'compute', 'storage'], y: 'service',
+    series: [bar({ data, x: ['network', 'compute', 'storage'], y: 'service',
       color: [
         { light: '#0d9488', dark: '#5eead4' },
         { light: '#6366f1', dark: '#a5b4fc' },
@@ -1163,7 +1166,7 @@ function stackedDiverging(): PlotArgs<Node> {
     { month: 'May', new: 32, expansion: 10, churn: -12, contraction: -8 },
   ]
   return {
-    series: [bar<Node>({ data, x: 'month', y: ['new', 'expansion', 'churn', 'contraction'],
+    series: [bar({ data, x: 'month', y: ['new', 'expansion', 'churn', 'contraction'],
       color: [
         { light: '#0d9488', dark: '#2dd4bf' },
         { light: '#5eead4', dark: '#99f6e4' },
@@ -1208,7 +1211,7 @@ function stackedTooltip(): PlotArgs<Node> {
   ]
 
   return {
-    series: [bar<Node>({
+    series: [bar({
       data,
       x: 'day',
       y: ['network', 'compute', 'storage'],
@@ -1222,7 +1225,8 @@ function stackedTooltip(): PlotArgs<Node> {
       hover_span_y: false,
       tooltip: ({ label, row }) => {
         const content = document.createElement('div')
-        for (const field of ['network', 'compute', 'storage']) {
+        const fields: (keyof typeof row)[] = ['network', 'compute', 'storage']
+        for (const field of fields) {
           const entry = document.createElement('div')
           const value = document.createElement(field === label ? 'strong' : 'span')
           value.textContent = field + ': ' + row[field] + ' ms'
@@ -1295,7 +1299,7 @@ const data = Array.from({ length: 97 }, (_, i) => ({
 
 plot.plotArgs = {
   series: [
-    area<Node>({
+    area({
       data,
       y2: 0,
       color: { light: '#99f6e4', dark: '#134e4a' },
@@ -1334,7 +1338,7 @@ const data = Array.from({ length: 81 }, (_, i) => {
 
 plot.plotArgs = {
   series: [
-    area<Node>({
+    area({
       data,
       y: 'high',
       y2: 'low',
@@ -1376,21 +1380,21 @@ const data = Array.from({ length: 97 }, (_, i) => {
 
 plot.plotArgs = {
   series: [
-    area<Node>({
+    area({
       data,
       y: 'first',
       y2: 0,
       color: { light: '#2dd4bf', dark: '#0d9488' },
       tooltip: ({ row }) => document.createTextNode('Network: ' + Math.round(Number(row.first))),
     }),
-    area<Node>({
+    area({
       data,
       y: 'second',
       y2: 'first',
       color: { light: '#a5b4fc', dark: '#6366f1' },
       tooltip: ({ row }) => document.createTextNode('Compute: ' + Math.round(Number(row.second) - Number(row.first))),
     }),
-    area<Node>({
+    area({
       data,
       y: 'total',
       y2: 'second',
@@ -1429,7 +1433,7 @@ const data = Array.from({ length: 81 }, (_, i) => {
 
 plot.plotArgs = {
   series: [
-    area<Node>({
+    area({
       data,
       x: 'low',
       x2: 'high',
@@ -1528,7 +1532,7 @@ const data = days.flatMap((day, d) => hours.map((hour, h) => ({
 
 plot.plotArgs = {
   series: [
-    rect<Node>({
+    rect({
       data,
       x: 'hour',
       y: 'day',
@@ -1573,7 +1577,7 @@ const data = [
 
 plot.plotArgs = {
   series: [
-    rect<Node>({
+    rect({
       data,
       x: 'start',
       x2: 'end',
@@ -1616,7 +1620,7 @@ const data = Array.from({ length: 32 }, (_, i) => ({
 
 plot.plotArgs = {
   series: [
-    rect<Node>({
+    rect({
       data,
       size: { width: 16, height: 9 },
       color: row => Number(row.value) > 65
@@ -1658,7 +1662,7 @@ const data = Array.from({ length: 36 }, (_, i) => ({
 
 plot.plotArgs = {
   series: [
-    rect<Node>({
+    rect({
       data: data.filter(row => row.lane === 'Passed'),
       x: 'end_ms',
       y: 'lane',
@@ -1669,7 +1673,7 @@ plot.plotArgs = {
       stroke: { color: { light: '#ffffff', dark: '#151b28' }, width: 0.5 },
       tooltip: ({ row }) => document.createTextNode('Run ' + row.run + ': ' + row.lane),
     }),
-    rect<Node>({
+    rect({
       data: data.filter(row => row.lane === 'Failed'),
       x: 'end_ms',
       y: 'lane',
@@ -1814,19 +1818,19 @@ const data = Array.from({ length: 97 }, (_, i) => ({
 
 plot.plotArgs = {
   series: [
-    line<Node>({
+    line({
       data,
       color: { light: '#0891b2', dark: '#67e8f9' },
       width: 2,
     }),
-    rule<Node>({
+    rule({
       y: 60,
       color: { light: '#7c3aed', dark: '#c4b5fd' },
       width: 1,
       dash: [7, 4],
       tooltip: () => document.createTextNode('Target: 60 ms'),
     }),
-    rule<Node>({
+    rule({
       y: 90,
       color: { light: '#c2410c', dark: '#fdba74' },
       width: 4,
@@ -1869,19 +1873,19 @@ const events = [
 
 plot.plotArgs = {
   series: [
-    line<Node>({
+    line({
       data,
       color: { light: '#6366f1', dark: '#a5b4fc' },
       width: 2,
     }),
-    rule<Node>({
+    rule({
       data: events.filter(event => !event.recovery),
       x: 'hour',
       color: { light: '#c2410c', dark: '#fdba74' },
       width: 3,
       tooltip: ({ row }) => document.createTextNode(row?.name + ' at hour ' + row?.hour),
     }),
-    rule<Node>({
+    rule({
       data: events.filter(event => event.recovery),
       x: 'hour',
       color: { light: '#0d9488', dark: '#5eead4' },
@@ -1982,7 +1986,7 @@ const points = groups.flatMap((group, g) => Array.from({ length: 80 }, (_, i) =>
 
 plot.plotArgs = {
   series: [
-    scatter<Node>({
+    scatter({
       data: points,
       size: 3,
       color: row => Number(row.group) === 0
@@ -1990,7 +1994,7 @@ plot.plotArgs = {
         : { light: '#7c3aed', dark: '#c4b5fd' },
       tooltip: ({ x, y }) => document.createTextNode(Number(x).toFixed(1) + ', ' + Number(y).toFixed(1)),
     }),
-    custom<Node>({
+    custom({
       data: groups,
       x: 'x', y: 'y',
       color: (_, i) => i === 0
@@ -2068,7 +2072,7 @@ const groups = matrix.map((row, i) => {
 })
 
 plot.plotArgs = {
-  series: [custom<Node>({
+  series: [custom({
     data: groups,
     color: (_, i) => [
       { light: '#0d9488', dark: '#5eead4' },
@@ -2213,7 +2217,7 @@ const data = Array.from({ length: 6 }, (_, i) => {
 const peak = Math.max(...data.flatMap(row => row.density.map(point => point.density)))
 
 plot.plotArgs = {
-  series: [custom<Node>({
+  series: [custom({
     data,
     y: 'group',
     color: (_, i) => ({ light: 'hsl(' + (175 + i * 15) + ', 55%, 55%)', dark: 'hsl(' + (175 + i * 15) + ', 50%, 45%)' }),
@@ -2320,7 +2324,7 @@ const data = distributions()
 const peak = Math.max(...data.flatMap(row => row.density.map(point => point.density)))
 
 plot.plotArgs = {
-  series: [custom<Node>({
+  series: [custom({
     data,
     x: 'group',
     color: (_, i) => [
@@ -2400,13 +2404,14 @@ Without `highlight_renderer`, Anta calls `renderer` on the overlay with a single
 For connected geometry or a different highlight, supply `highlight_renderer(series, point_index, context)`. It receives the full composed series, the original hovered index, and the normal render helpers plus `highlight_color_at(index)`. Anta handles DPR, clearing, clipping, and canvas-state isolation. Set `highlight: false` to disable either path. Both paths require data and hit testing.
 
 ```ts
-import { custom, type CustomRendererFn, type CustomHitTestFn, type CustomHighlightRendererFn } from '@antadesign/plot'
+import { custom, type PlotArgs, type CustomRendererFn, type CustomHitTestFn, type CustomHighlightRendererFn } from '@antadesign/plot'
 import type { APlotElement } from '@antadesign/plot/browser'
 import '@antadesign/plot/elements/a-plot'
 
 const plot = document.createElement('a-plot') as APlotElement
-function highlights() {
-  const renderer: CustomRendererFn<Node> = (series, { ctx, resolve_x, resolve_y, color_at }) => {
+function highlights(): PlotArgs<Node> {
+  type Point = { x: number; y: number }
+  const renderer: CustomRendererFn<Point> = (series, { ctx, resolve_x, resolve_y, color_at }) => {
     for (let i = 0; i < series.x.length; i++) {
       const x = resolve_x(i), y = resolve_y(i)
       if (x === undefined || y === undefined) continue
@@ -2416,14 +2421,14 @@ function highlights() {
       ctx.fill()
     }
   }
-  const hit_test: CustomHitTestFn<Node> = (series, { cursor, resolve_x, resolve_y }) => {
+  const hit_test: CustomHitTestFn<Point> = (series, { cursor, resolve_x, resolve_y }) => {
     for (let i = series.x.length - 1; i >= 0; i--) {
       const x = resolve_x(i), y = resolve_y(i)
       if (x !== undefined && y !== undefined && Math.hypot(cursor.x - x, cursor.y - y) <= 16) return i
     }
     return null
   }
-  const highlight_renderer: CustomHighlightRendererFn<Node> = (series, i, { ctx, resolve_x, resolve_y, highlight_color_at }) => {
+  const highlight_renderer: CustomHighlightRendererFn<Point> = (series, i, { ctx, resolve_x, resolve_y, highlight_color_at }) => {
     const x = resolve_x(i), y = resolve_y(i)
     if (x === undefined || y === undefined) return
     ctx.strokeStyle = highlight_color_at(i)
@@ -2438,15 +2443,15 @@ function highlights() {
     margin: { top: 12, right: 12, bottom: 28, left: 32 },
     grid: false, zoom_pan: false,
     series: [
-      custom<Node>({
+      custom({
         data: [{ x: 20, y: 35 }, { x: 20, y: 65 }], x: 'x', y: 'y', renderer, hit_test,
         color: 'color-mix(in oklch, teal 40%, transparent)', tooltip: true,
       }),
-      custom<Node>({
+      custom({
         data: [{ x: 50, y: 35 }, { x: 50, y: 65 }], x: 'x', y: 'y', renderer, hit_test, highlight_renderer,
         color: { light: '#7c3aed', dark: '#c4b5fd' }, tooltip: true,
       }),
-      custom<Node>({
+      custom({
         data: [{ x: 80, y: 35 }, { x: 80, y: 65 }], x: 'x', y: 'y', renderer, hit_test,
         color: '#94a3b8', highlight: false, tooltip: true,
       }),
@@ -2556,23 +2561,23 @@ const data = [
 
 plot.plotArgs = {
   series: [
-    bar<Node>({
+    bar({
       data: data.slice(0, 2), inset: 7, border_radius: 4,
       color: { light: 'rgba(13, 148, 136, 0.35)', dark: 'rgba(94, 234, 212, 0.35)' },
     }),
-    bar<Node>({
+    bar({
       data: data.slice(2, 4), inset: 7, border_radius: 4,
       color: { light: '#0d9488', dark: '#5eead4' },
       highlight_color: row => row.x === 'C'
         ? { light: '#f97316', dark: '#fdba74' }
         : 'color-mix(in oklch, magenta 50%, transparent)',
     }),
-    bar<Node>({
+    bar({
       data: data.slice(4, 5), inset: 7, border_radius: 4,
       color: { light: '#7c3aed', dark: '#c4b5fd' },
       highlight: false,
     }),
-    bar<Node>({
+    bar({
       data: data.slice(5), inset: 7, border_radius: 4,
       color: { light: '#94a3b8', dark: '#64748b' },
       hoverable: false,
@@ -2593,14 +2598,14 @@ document.body.append(plot)
 
 #### Custom hit testing
 
-`CustomHitTestFn<TooltipContent>` receives the composed custom series and a
+`CustomHitTestFn<Row>` receives a `CustomSeriesView<Row>` and a
 `HitContext`. Return the matching row index or `null` when there is no hit.
 Custom series need this callback for tooltips and selection.
 
 ```ts
-import type { ComposedCustom, HitContext } from '@antadesign/plot'
+import type { CustomSeriesView, HitContext } from '@antadesign/plot'
 
-type HitTest = (series: ComposedCustom, context: HitContext) => number | null
+type HitTest<Row> = (series: CustomSeriesView<Row>, context: HitContext) => number | null
 ```
 
 | Context field | Type | Description |
@@ -2631,13 +2636,13 @@ const data = [
 
 plot.plotArgs = {
   series: [
-    rect<Node>({
+    rect({
       data,
       color: { light: 'rgba(13, 148, 136, 0.45)', dark: 'rgba(94, 234, 212, 0.45)' },
       stroke: { color: { light: '#0d9488', dark: '#5eead4' }, width: 2 },
       tooltip: true,
     }),
-    rect<Node>({
+    rect({
       data: data.map(row => ({
         ...row, x: row.x + 12, x2: row.x2 + 8, y: row.y + 12, y2: row.y2 + 10,
       })),
@@ -2695,6 +2700,16 @@ Hover the overlapping rectangles to compare baseline and current bounds under on
 import { rect, type APlotElement } from '@antadesign/plot/browser'
 import '@antadesign/plot/elements/a-plot'
 
+function windowRow(row: unknown) {
+  if (typeof row !== 'object' || row === null) return undefined
+  if (!('name' in row) || typeof row.name !== 'string'
+    || !('x' in row) || typeof row.x !== 'number'
+    || !('x2' in row) || typeof row.x2 !== 'number'
+    || !('y' in row) || typeof row.y !== 'number'
+    || !('y2' in row) || typeof row.y2 !== 'number') return undefined
+  return row
+}
+
 const plot = document.createElement('a-plot') as APlotElement
 const data = [
   { x: 8, x2: 38, y: 15, y2: 48, name: 'Window A' },
@@ -2726,8 +2741,8 @@ plot.plotArgs = {
     }),
   ],
   tooltip: ([baseline_hit, current_hit]) => {
-    const baseline = baseline_hit?.data.row
-    const current = current_hit?.data.row
+    const baseline = windowRow(baseline_hit?.data.row)
+    const current = windowRow(current_hit?.data.row)
     const content = document.createElement('div')
     const title = document.createElement('strong')
     title.textContent = String((current ?? baseline)?.name ?? 'Window comparison')
@@ -2740,7 +2755,10 @@ plot.plotArgs = {
       header.append(cell)
     }
     const body = table.createTBody()
-    for (const [field, label] of [['x', 'X start'], ['x2', 'X end'], ['y', 'Y start'], ['y2', 'Y end']]) {
+    const bounds: ['x' | 'x2' | 'y' | 'y2', string][] = [
+      ['x', 'X start'], ['x2', 'X end'], ['y', 'Y start'], ['y2', 'Y end'],
+    ]
+    for (const [field, label] of bounds) {
       const before = baseline?.[field]
       const after = current?.[field]
       const delta = typeof before === 'number' && typeof after === 'number' ? after - before : undefined
@@ -2797,7 +2815,7 @@ const data = Array.from({ length: 24 }, (_, i) => ({
 
 plot.plotArgs = {
   series: [
-    scatter<Node>({
+    scatter({
       data, size: 13,
       color: { light: '#0891b2', dark: '#67e8f9' },
       tooltip: true,
@@ -2848,11 +2866,15 @@ the same fields with an optional `row`.
 
 ### Zoom and pan
 
-Zoom continuous axes with the scroll wheel and pan by dragging. The reset control restores the full extent after the view changes. Categorical axes do not zoom. See [Zoom and pan options](#zoom-and-pan-options).
+Zoom continuous axes with the scroll wheel and pan by dragging. Reset Zoom in the context menu restores the full extent after the view changes. Categorical axes do not zoom. See [Zoom and pan options](#zoom-and-pan-options).
+
+Zoom and pan in the plot
+
+Scroll to zoom around the pointer, or drag to pan. Plain wheel zoom activates after the pointer settles over the plot; Ctrl-wheel and pinch activate immediately. Horizontal scrolling does not change the viewport. Hold Ctrl and drag inside the plot to draw a zoom rectangle. Releasing fits the viewport to the rectangle, subject to each enabled axis's limits.
 
-Zoom with a modifier
+Ctrl-wheel and pinch share the same browser signal. Small samples use higher sensitivity, while each sample is capped at a 1.2× change to keep physical mouse-wheel notches manageable. Switching between pinch and ordinary scrolling preserves the existing pointer dwell.
 
-Hold Ctrl and scroll to zoom around the pointer, or hold Ctrl and drag to pan. The modifier leaves ordinary scrolling available for navigating the page.
+Right-click for **Reset Zoom**, **Zoom Out**, and **Zoom In**. Menu zoom anchors at the context-click position and applies the same factor to both enabled axes, with independent limits. Set `zoom_pan: { menu_zoom_step: 1.5 }` to change that factor from its default of `2`. Zoom In divides each span by the factor; Zoom Out multiplies it. The value must be finite and greater than 1. It affects only menu actions; wheel and drag sensitivity stay fixed.
 
 ```ts
 import { line, type APlotElement } from '@antadesign/plot/browser'
@@ -2862,7 +2884,7 @@ const plot = document.createElement('a-plot') as APlotElement
 const output = document.createElement('output')
 output.setAttribute('aria-live', 'polite')
 output.style.display = 'block'
-output.textContent = 'Hold Ctrl and scroll to zoom, or Ctrl-drag to pan.'
+output.textContent = 'Scroll to zoom, drag to pan, or Ctrl-drag to zoom to a rectangle.'
 
 const data = Array.from({ length: 201 }, (_, i) => ({
   x: i / 2,
@@ -2871,20 +2893,20 @@ const data = Array.from({ length: 201 }, (_, i) => ({
 
 plot.plotArgs = {
   series: [
-    line<Node>({
+    line({
       data, width: 2,
       color: { light: '#6366f1', dark: '#a5b4fc' },
       tooltip: true,
     }),
   ],
-  height: 260,
+  height: 420,
   margin: { top: 8, right: 12, bottom: 24, left: 32 },
   axis: { x: { min: 0, max: 100, label: '' }, y: { min: 0, max: 100, label: '' } },
   background: { light: '#ffffff', dark: '#151b28' },
   chrome_color: { light: '#e2e8f0', dark: '#334155' },
   grid: false,
   border: false,
-  zoom_pan: { x: true, y: true, modifier: true },
+  zoom_pan: { x: true, y: true },
   on_viewport_change: ({ x, y }) => {
     const format = (axis: { window: number[] } | null) => axis
       ? axis.window.map(value => value.toFixed(1)).join('–') : 'full extent'
@@ -2895,9 +2917,9 @@ plot.plotArgs = {
 document.body.append(plot, output)
 ```
 
-Zoom without a modifier
+Navigate an axis
 
-Scroll over the plot to zoom, or drag to pan. Set `modifier: false` when the plot should own these gestures without requiring Ctrl.
+Scroll over an axis to zoom around the pointer, or drag on the axis to zoom around the value where the drag started. No modifier is needed. Enabled continuous axes show directional arrows on hover. Drag inside the plot to pan. Drag right on x or up on y to zoom in; drag the other way to zoom out. Moving a quarter of the full axis length halves or doubles the starting span, subject to zoom limits. The other axis keeps its viewport.
 
 ```ts
 import { line, type APlotElement } from '@antadesign/plot/browser'
@@ -2907,7 +2929,7 @@ const plot = document.createElement('a-plot') as APlotElement
 const output = document.createElement('output')
 output.setAttribute('aria-live', 'polite')
 output.style.display = 'block'
-output.textContent = 'Scroll to zoom, or drag to pan.'
+output.textContent = 'Scroll to zoom, drag to pan, or Ctrl-drag to zoom to a rectangle.'
 
 const data = Array.from({ length: 201 }, (_, i) => ({
   x: i / 2,
@@ -2916,7 +2938,7 @@ const data = Array.from({ length: 201 }, (_, i) => ({
 
 plot.plotArgs = {
   series: [
-    line<Node>({
+    line({
       data, width: 2,
       color: { light: '#6366f1', dark: '#a5b4fc' },
       tooltip: true,
@@ -2929,7 +2951,7 @@ plot.plotArgs = {
   chrome_color: { light: '#e2e8f0', dark: '#334155' },
   grid: false,
   border: false,
-  zoom_pan: { x: true, y: true, modifier: false },
+  zoom_pan: { x: true, y: true },
   on_viewport_change: ({ x, y }) => {
     const format = (axis: { window: number[] } | null) => axis
       ? axis.window.map(value => value.toFixed(1)).join('–') : 'full extent'
@@ -2942,7 +2964,7 @@ document.body.append(plot, output)
 
 Zoom on one axis
 
-Hold Ctrl and scroll or drag. Only the horizontal window changes; the vertical range stays fixed. Set `x: false, y: true` for vertical-only navigation.
+Scroll to zoom or drag to pan. Only the horizontal window changes; the vertical range stays fixed. Set `x: false, y: true` for vertical-only navigation.
 
 ```ts
 import { line, type APlotElement } from '@antadesign/plot/browser'
@@ -2952,7 +2974,7 @@ const plot = document.createElement('a-plot') as APlotElement
 const output = document.createElement('output')
 output.setAttribute('aria-live', 'polite')
 output.style.display = 'block'
-output.textContent = 'Hold Ctrl and scroll to zoom, or Ctrl-drag to pan.'
+output.textContent = 'Scroll to zoom, drag to pan, or Ctrl-drag to zoom to a rectangle.'
 
 const data = Array.from({ length: 201 }, (_, i) => ({
   x: i / 2,
@@ -2961,7 +2983,7 @@ const data = Array.from({ length: 201 }, (_, i) => ({
 
 plot.plotArgs = {
   series: [
-    line<Node>({
+    line({
       data, width: 2,
       color: { light: '#6366f1', dark: '#a5b4fc' },
       tooltip: true,
@@ -2974,7 +2996,7 @@ plot.plotArgs = {
   chrome_color: { light: '#e2e8f0', dark: '#334155' },
   grid: false,
   border: false,
-  zoom_pan: { x: true, y: false, modifier: true },
+  zoom_pan: { x: true, y: false },
   on_viewport_change: ({ x, y }) => {
     const format = (axis: { window: number[] } | null) => axis
       ? axis.window.map(value => value.toFixed(1)).join('–') : 'full extent'
@@ -2993,13 +3015,13 @@ document.body.append(plot, output)
 |---|---|---|---|
 | `x?` | `boolean` | `true` | Enable horizontal zoom and pan on a continuous axis. |
 | `y?` | `boolean` | `true` | Enable vertical zoom and pan on a continuous axis. |
-| `modifier?` | `boolean` | `true` | Require Ctrl for gestures. Set `false` to allow gestures without a modifier. |
+| `menu_zoom_step?` | `number` | `2` | Multiplicative menu zoom factor. Must be finite and greater than 1; does not affect wheel or drag sensitivity. |
 
 Setting both axes to `false` disables zoom and pan. Categorical axes do not zoom.
 
 ### Controlling the viewport
 
-Use the buttons to focus on a range or restore the full extent. You can still zoom and pan horizontally with Ctrl after a button sets the view.
+Use the buttons to focus on a range or restore the full extent. You can still zoom and pan horizontally after a button sets the view.
 
 Set `viewport` to control the visible range. Increment its `key` to apply a new request after the user zooms or pans. See [Viewport](#viewport) for initialization and reset behavior.
 
@@ -3014,7 +3036,7 @@ const plot = document.createElement('a-plot') as APlotElement
 const output = document.createElement('output')
 output.setAttribute('aria-live', 'polite')
 output.style.display = 'block'
-output.textContent = 'Hold Ctrl and scroll to zoom, or Ctrl-drag to pan.'
+output.textContent = 'Scroll to zoom, drag to pan, or Ctrl-drag to zoom to a rectangle.'
 
 const data = Array.from({ length: 201 }, (_, i) => ({
   x: i / 2,
@@ -3023,7 +3045,7 @@ const data = Array.from({ length: 201 }, (_, i) => ({
 
 plot.plotArgs = {
   series: [
-    line<Node>({
+    line({
       data, width: 2,
       color: { light: '#6366f1', dark: '#a5b4fc' },
       tooltip: true,
@@ -3036,7 +3058,7 @@ plot.plotArgs = {
   chrome_color: { light: '#e2e8f0', dark: '#334155' },
   grid: false,
   border: false,
-  zoom_pan: { x: true, y: false, modifier: true },
+  zoom_pan: { x: true, y: false },
   viewport: { x: [20, 45], y: null, key: 0 },
   on_viewport_change: ({ x, y }) => {
     const format = (axis: { window: number[] } | null) => axis
@@ -3086,6 +3108,7 @@ to continuous axes.
 |---|---|---|
 | `x` | `AxisViewport \| null` | Current horizontal viewport, or `null` for a categorical axis. |
 | `y` | `AxisViewport \| null` | Current vertical viewport, or `null` for a categorical axis. |
+| `zoom_factor` | `{ x: number; y: number }` | Per-axis gesture magnification, initially 1; preserved during pan, resize, and data-domain changes. |
 
 Each `AxisViewport` contains:
 
@@ -3096,6 +3119,68 @@ Each `AxisViewport` contains:
 
 ## Configuration details
 
+### Size
+
+Scatter `size` accepts a fixed pixel diameter or a pure accessor returning a number.
+The accessor receives `(row, index, viewport)`, so you can combine data and viewport
+without storing zoom in application state.
+
+Scroll near **50**. The first series stays at 4px. The other series
+alternate between 2px and 4px based on their data, then grow with horizontal zoom,
+at different rates, up to 16px. Drag to pan; **Reset Zoom** in the context menu restores
+the starting sizes.
+
+```ts
+import { scatter, type PlotArgs } from '@antadesign/plot'
+import '@antadesign/plot/elements/a-plot'
+import type { APlotElement } from '@antadesign/plot/browser'
+
+export function viewportSizes(): PlotArgs<Node> {
+  const labels = ['Fixed 4px', 'Data + gradual zoom', 'Data + faster zoom']
+  const positions = [0, 10, 25, 40, 45, 48, 49, 49.5, 49.75, 50, 50.25, 50.5, 51, 52, 55, 60, 75, 90, 100]
+  const rows = (label: string) => positions.map((x, i) => ({ x, y: label, weight: i % 2 ? 4 : 2 }))
+  return {
+    height: 260,
+    margin: { top: 24, right: 20, bottom: 48, left: 160 },
+    axis: { x: { min: 0, max: 100, label: 'Zoom near 50' }, y: { categories: labels, label: '' } },
+    background: { light: '#ffffff', dark: '#202124' },
+    chrome_color: { light: '#64748b', dark: '#cbd5e1' },
+    grid: false,
+    zoom_pan: { x: true, y: false },
+    series: [
+      scatter({ data: rows(labels[0]), size: 4,
+        color: { light: '#64748b', dark: '#cbd5e1' }, tooltip: true }),
+      scatter({ data: rows(labels[1]),
+        size: (row, index, viewport) => Math.min(16, Number(row.weight) * viewport.zoom_factor.x ** 0.25),
+        color: { light: '#7c3aed', dark: '#c4b5fd' }, tooltip: true }),
+      scatter({ data: rows(labels[2]),
+        size: (row, index, viewport) => Math.min(16, Number(row.weight) * viewport.zoom_factor.x ** 0.5),
+        color: { light: '#c2410c', dark: '#fdba74' }, tooltip: true }),
+    ],
+  }
+}
+
+const plot = document.createElement('a-plot') as APlotElement
+plot.plotArgs = viewportSizes()
+document.body.append(plot)
+```
+
+`viewport` has the same shape as [Viewport changes](#viewport-changes): `x` and `y`
+contain visible and full domains (`null` for a categorical axis), and `zoom_factor.x` and
+`zoom_factor.y` contain gesture magnification. Each starts at 1. Panning, resizing, and
+data-domain changes preserve magnification. Reset and new keyed viewport requests
+establish factor 1 on their affected axes. Zooming out beyond a requested initial
+window can yield factors below 1. Use `Math.max(viewport.zoom_factor.x, viewport.zoom_factor.y)`
+to follow the more magnified axis.
+
+Size accessors run during composition, including zoom and pan, rather than when
+the series is constructed. Keep them pure and inexpensive. Existing accessors
+that only read the row or index remain valid. Returned sizes must be finite and
+non-negative; invalid results report a composition error and retain the previous
+plot. Numeric row `size` fields take precedence, and the index stays tied to the
+original input row after category filtering. Drawing, hit testing, and highlights
+reuse the composed sizes. Other series' size options and font sizes remain numeric.
+
 ### Font
 
 `font` on the plot supplies shared text settings. `title.font`,
@@ -3140,7 +3225,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3192,7 +3277,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3248,7 +3333,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3291,7 +3376,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3344,7 +3429,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3362,7 +3447,7 @@ function base(): PlotArgs<Node> {
 function grid(): PlotArgs<Node> {
   const categories = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
   return { ...base(), height: 160, margin: { top: 10, right: 10, bottom: 10, left: 10 },
-    series: [scatter<Node>({ data: categories.map((x, i) => ({ x, y: 20 + i * 9 })),
+    series: [scatter({ data: categories.map((x, i) => ({ x, y: 20 + i * 9 })),
       size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
     axis: { x: { categories, label: '', tick_mark: false, tick_label: { format: () => '' } },
       y: { min: 0, max: 100, label: '', tick_mark: false, tick_label: { format: () => '' } } },
@@ -3383,7 +3468,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3401,7 +3486,7 @@ function base(): PlotArgs<Node> {
 function grid(): PlotArgs<Node> {
   const categories = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
   return { ...base(), height: 160, margin: { top: 10, right: 10, bottom: 10, left: 10 },
-    series: [scatter<Node>({ data: categories.map((x, i) => ({ x, y: 20 + i * 9 })),
+    series: [scatter({ data: categories.map((x, i) => ({ x, y: 20 + i * 9 })),
       size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
     axis: { x: { categories, label: '', tick_mark: false, tick_label: { format: () => '' } },
       y: { min: 0, max: 100, label: '', tick_mark: false, tick_label: { format: () => '' } } },
@@ -3426,7 +3511,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3444,7 +3529,7 @@ function base(): PlotArgs<Node> {
 function grid(): PlotArgs<Node> {
   const categories = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
   return { ...base(), height: 160, margin: { top: 10, right: 10, bottom: 10, left: 10 },
-    series: [scatter<Node>({ data: categories.map((x, i) => ({ x, y: 20 + i * 9 })),
+    series: [scatter({ data: categories.map((x, i) => ({ x, y: 20 + i * 9 })),
       size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
     axis: { x: { categories, label: '', tick_mark: false, tick_label: { format: () => '' } },
       y: { min: 0, max: 100, label: '', tick_mark: false, tick_label: { format: () => '' } } },
@@ -3469,7 +3554,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3487,7 +3572,7 @@ function base(): PlotArgs<Node> {
 function grid(): PlotArgs<Node> {
   const categories = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
   return { ...base(), height: 160, margin: { top: 10, right: 10, bottom: 10, left: 10 },
-    series: [scatter<Node>({ data: categories.map((x, i) => ({ x, y: 20 + i * 9 })),
+    series: [scatter({ data: categories.map((x, i) => ({ x, y: 20 + i * 9 })),
       size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
     axis: { x: { categories, label: '', tick_mark: false, tick_label: { format: () => '' } },
       y: { min: 0, max: 100, label: '', tick_mark: false, tick_label: { format: () => '' } } },
@@ -3521,7 +3606,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3537,7 +3622,7 @@ function base(): PlotArgs<Node> {
 }
 
 function themeColors(): PlotArgs<Node> {
-  return { ...base(), series: [scatter<Node>({
+  return { ...base(), series: [scatter({
     data: [{ x: 20, y: 30 }, { x: 50, y: 65 }, { x: 80, y: 45 }],
     size: 18, color: { light: 'tomato', dark: 'lightskyblue' }, hoverable: false,
   })] }
@@ -3572,7 +3657,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3589,7 +3674,7 @@ function base(): PlotArgs<Node> {
 
 function scales(): PlotArgs<Node> {
   return { ...base(),
-    series: [scatter<Node>({ data: [1, 10, 100, 1000, 10000].map((y, i) => ({ x: 10 + i * 20, y })),
+    series: [scatter({ data: [1, 10, 100, 1000, 10000].map((y, i) => ({ x: 10 + i * 20, y })),
       size: 4, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
     axis: { x: { scale: 'linear', min: 0, max: 100, label: 'Linear' },
       y: { scale: 'log', min: 1, max: 10000, label: 'Logarithmic',
@@ -3612,7 +3697,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3630,7 +3715,7 @@ function base(): PlotArgs<Node> {
 function timeCategory(): PlotArgs<Node> {
   const start = new Date(2026, 0, 12).getTime()
   return { ...base(),
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: start, y: 'Alpha' }, { x: start + 3600000, y: 'Beta' },
       { x: start + 7200000, y: 'Alpha' }, { x: start + 10800000, y: 'Gamma' },
       { x: start + 14400000, y: 'Beta' },
@@ -3674,7 +3759,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3710,7 +3795,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3758,7 +3843,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3803,7 +3888,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3819,7 +3904,7 @@ function base(): PlotArgs<Node> {
 }
 
 function seriesColors(): PlotArgs<Node> {
-  return { ...base(), series: [scatter<Node>({
+  return { ...base(), series: [scatter({
     data: [{ x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 }, { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 }],
     size: 8, color: row => Number(row.y) >= 60
       ? { light: '#c2410c', dark: '#fdba74' } : { light: '#64748b', dark: '#94a3b8' },
@@ -3838,12 +3923,12 @@ and custom series accept it; line and area use one `ThemeColor` per series.
 | Form | Type | Description |
 |---|---|---|
 | Shared color | [`ThemeColor`](#theme-colors) | Apply one color or theme pair to the series. |
-| Accessor | [`(row: Record<string, unknown>, index: number) => ThemeColor`](#theme-colors) | Choose a color or theme pair for each row. |
+| Accessor | [`(row: Row, index: number) => ThemeColor`](#theme-colors) | Choose a color or theme pair for each row. |
 
 ```ts
 import type { ColorArg } from '@antadesign/plot'
 
-const color: ColorArg = (row) => Number(row.value) >= 10 ? 'coral' : 'steelblue'
+const color: ColorArg<{ value: number }> = (row) => row.value >= 10 ? 'coral' : 'steelblue'
 ```
 
 For these series, a valid `color` on a data row takes precedence over the
@@ -3861,7 +3946,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3878,7 +3963,7 @@ function base(): PlotArgs<Node> {
 
 function markShapes(): PlotArgs<Node> {
   const marks = ['circle', 'square', 'diamond', 'triangle'] as const
-  return { ...base(), series: marks.map((mark, i) => scatter<Node>({
+  return { ...base(), series: marks.map((mark, i) => scatter({
     data: [{ x: mark, y: 40 + i * 10 }], mark, size: 12,
     color: [
       { light: '#7c3aed', dark: '#c4b5fd' }, { light: '#db2777', dark: '#f9a8d4' },
@@ -3916,7 +4001,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function base(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({ data: [
+    series: [scatter({ data: [
       { x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
       { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 },
     ], size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false })],
@@ -3932,7 +4017,7 @@ function base(): PlotArgs<Node> {
 }
 
 function strokes(): PlotArgs<Node> {
-  return { ...base(), series: [1, 3, 5].map((width, i) => scatter<Node>({
+  return { ...base(), series: [1, 3, 5].map((width, i) => scatter({
     data: [{ x: 25 + i * 25, y: 50 }], size: 18,
     color: { light: '#f0abfc', dark: '#c026d3' },
     stroke: { color: { light: '#7e22ce', dark: '#f5d0fe' }, width }, hoverable: false,
@@ -3968,25 +4053,26 @@ such as `x` and `y`, or for a second boundary where the series supports one.
 
 | Form | Type | Description |
 |---|---|---|
-| Field name | `string` | Read the named property from each row. |
-| Accessor | `(row: Record<string, unknown>, index: number) => number \| string` | Compute a value from the row and its zero-based index. Return numbers for continuous axes or strings for categories. |
+| Field name | `keyof Row & string` | Read the named property from each row. |
+| Accessor | `(row: Row, index: number) => number \| string` | Compute a value from the row and its zero-based index. Return numbers for continuous axes or strings for categories. |
 
 ```ts
 import type { FieldArg } from '@antadesign/plot'
 
-const x: FieldArg = 'elapsed_ms'
-const y: FieldArg = (row) => Number(row.duration_ms) / 1000
+type Timing = { elapsed_ms: number; duration_ms: number }
+const x: FieldArg<Timing> = 'elapsed_ms'
+const y: FieldArg<Timing> = (row) => row.duration_ms / 1000
 ```
 
 ### Custom rendering
 
-`CustomRendererFn<TooltipContent>` receives the composed custom series and
+`CustomRendererFn<Row>` receives a `CustomSeriesView<Row>` and
 its drawing context:
 
 ```ts
-import type { ComposedCustom, CustomRenderContext } from '@antadesign/plot'
+import type { CustomSeriesView, CustomRenderContext } from '@antadesign/plot'
 
-type Renderer = (series: ComposedCustom, context: CustomRenderContext) => void
+type Renderer<Row> = (series: CustomSeriesView<Row>, context: CustomRenderContext) => void
 ```
 
 The composed series contains resolved `x` and `y` columns, source `rows` when
@@ -4052,7 +4138,7 @@ import type { APlotElement } from '@antadesign/plot/browser'
 
 function stylingExample(): PlotArgs<Node> {
   return {
-    series: [scatter<Node>({
+    series: [scatter({
       data: [{ x: 12, y: 18 }, { x: 30, y: 42 }, { x: 48, y: 35 },
         { x: 58, y: 64 }, { x: 76, y: 58 }, { x: 88, y: 82 }],
       size: 3, color: { light: '#9ca3af', dark: '#6b7280' }, hoverable: false,
@@ -4121,5 +4207,4 @@ Set text colors separately with `title.font.color`, `axis.x.label.font.color`,
 
 With the JSX `Plot` component, return content supported by your renderer from a
 series’ [`tooltip`](#tooltips) callback and style it like other markup. Anta’s
-`Tooltip` renders that content in the component tree. The reset control is an Anta `Button` and
-follows the application’s theme.
+`Tooltip` renders that content in the component tree. The zoom context menu uses Anta `Menu` and follows the application’s theme.