waveform-analysis 0.1.75 → 0.1.77

package/dist/types/demo/remoteWaveformLoader.d.ts

@@ -0,0 +1,23 @@
+import type { InjectionKey } from 'vue';
+import type { WaveformData } from '../types';
+export interface RemoteWindowRequest {
+    start: number;
+    end: number;
+    seriesIds?: string[];
+}
+export type RemoteWindowLoader = (request: RemoteWindowRequest, signal: AbortSignal) => Promise<WaveformData>;
+export declare const remoteWindowLoaderKey: InjectionKey<RemoteWindowLoader>;
+export interface MockWindowOptions {
+    delayMs?: number | ((request: RemoteWindowRequest) => number);
+    empty?: boolean | ((request: RemoteWindowRequest) => boolean);
+    fail?: boolean | ((request: RemoteWindowRequest) => boolean);
+}
+/** Preserve series identities even when a window has no samples. */
+export declare function selectWaveformWindow(data: WaveformData, request: RemoteWindowRequest, empty?: boolean): WaveformData;
+export declare function mergeWaveformWindow(current: WaveformData, response: WaveformData, seriesIds?: string[]): WaveformData;
+/** Metadata is derived from the complete record, never from a loaded window. */
+export declare function waveformRecordMetadata(data: WaveformData): {
+    domain: [number, number];
+    minZoomSpan: number | undefined;
+};
+export declare function createMockWindowLoader(source: () => WaveformData, options?: MockWindowOptions): RemoteWindowLoader;

package/dist/types/demo/types.d.ts

@@ -1,4 +1,5 @@
-import type { WaveformAnnotation, WaveformAxesOptions, WaveformData, WaveformDisplayMode, WaveformFrameStyle, WaveformGridTrackLines, WaveformInteractionMode, WaveformLegendOrientation, WaveformLegendPosition, WaveformLineStyle, WaveformOverlayMode, WaveformPlotMargin, WaveformTitleOptions, WaveformZeroLineOptions, WaveformZoomEndPayload } from '../components';
+import type { WaveformAnnotation, WaveformAxesOptions, WaveformData, WaveformDisplayMode, WaveformFrameStyle, WaveformGridTrackLines, WaveformInteractionMode, WaveformLegendOrientation, WaveformLegendPosition, WaveformLineStyle, WaveformOverlayMode, WaveformPlotMargin, WaveformTitleOptions, WaveformZeroLineOptions, WaveformZoomEndPayload, WaveformZoomIntentPayload } from '../components';
+import type { WaveformZoomResetPayload, WaveformPanEndPayload } from '../types';
 import type { DemoXAxisLabelFormat, DemoXAxisLabelTimeZone } from './useDemoXAxisLabelControls';
 interface SelectOption<T> {
     label: string;
@@ -78,6 +79,11 @@ export interface DemoChartModel {
     toolbarVisible: boolean;
     data: WaveformData;
     initialXDomain?: [number, number];
+    recordDomain: [number, number];
+    minZoomSpan?: number;
+    loading: boolean;
+    errors: string[];
+    retry: () => Promise<void[]>;
     displayMode: WaveformDisplayMode;
     overlayMode: WaveformOverlayMode;
     rowCount: number;
@@ -101,6 +107,9 @@ export interface DemoChartModel {
     interactionMode: WaveformInteractionMode;
     hiddenSeriesIds: string[];
     handleZoomEnd: (payload: WaveformZoomEndPayload) => void | Promise<void>;
-    resetWaveformViewport: () => void;
+    handleZoomIntent: (payload: WaveformZoomIntentPayload) => void;
+    handleZoomChange: (domain: [number, number]) => void;
+    handlePanEnd: (payload: WaveformPanEndPayload) => void | Promise<void>;
+    resetWaveformViewport: (payload?: WaveformZoomResetPayload) => void | Promise<void>;
 }
 export {};

package/dist/types/demo/useRemoteWaveformWindow.d.ts

@@ -0,0 +1,22 @@
+import { type Ref } from 'vue';
+import type { WaveformData, WaveformPanEndPayload, WaveformZoomEndPayload, WaveformZoomIntentPayload, WaveformZoomResetPayload } from '../types';
+import { type RemoteWindowLoader } from './remoteWaveformLoader';
+interface RemoteWindowOptions {
+    loadWindow?: RemoteWindowLoader;
+    resetViewport?: (trackIndex?: number) => void;
+}
+export declare function useRemoteWaveformWindow(source: Ref<WaveformData>, options?: RemoteWindowOptions): {
+    chartData: import("vue").ShallowRef<WaveformData, WaveformData>;
+    recordDomain: import("vue").ComputedRef<[number, number]>;
+    initialXDomain: import("vue").ComputedRef<[number, number]>;
+    minZoomSpan: import("vue").ComputedRef<number | undefined>;
+    loading: import("vue").ComputedRef<boolean>;
+    errors: import("vue").ComputedRef<string[]>;
+    handleZoomIntent: (payload: WaveformZoomIntentPayload) => void;
+    handleZoomChange: (domain: [number, number]) => void;
+    handleZoomEnd: (payload: WaveformZoomEndPayload) => Promise<void>;
+    handlePanEnd: (payload: WaveformPanEndPayload) => Promise<void>;
+    resetWaveformViewport: (payload?: WaveformZoomResetPayload) => Promise<void>;
+    retry: () => Promise<void[]>;
+};
+export {};

package/dist/types/index.d.ts

@@ -13,7 +13,7 @@ export { Animation } from './animation/core/Animation';
 export { Animator, globalAnimator } from './animation/core/Animator';
 export type { AnimationValue, AnimationDirection, AnimationState, AnimationFrame, AnimationTrack, AnimationConfig, AnimationHandle, AnimationScheduler, EasingFunction, EasingFamily, EasingType, } from './animation/core/types';
 export type { LineDrawingDirection, AnnotationAnimationType, LineDrawingOptions, StaggeredLineDrawingOptions, DataUpdateOptions, AnnotationAnimationOptions, WaveformEnterAnimationOptions, WaveformUpdateAnimationOptions, WaveformAnnotationAnimationOptions, WaveformAnimationProps, ClipAnimationState, AnimationBinding, NumericGeometry, GeometryTransitionInput, GeometryTransitionFrame, AnnotationAnimationState, AnimationScope, AnimationObjectKey, WaveformAnimationControllerOptions, } from './animation/types';
-export type { WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformYAxisLabelTextStyle, WaveformZeroLineOptions, SingleWaveformData, WaveformLineType, WaveformLineStyle, WaveformPointType, WaveformErrorBarOptions, ResolvedWaveformErrorBarOptions, WaveformTypedValues, TypedSampleData, TypedPointData, WaveformSeries, WaveformData, NormalizedWaveformSeries, } from './types';
+export type { WaveformAmplitudeLimit, WaveformAmplitudeLimits, WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformYAxisLabelTextStyle, WaveformZeroLineOptions, SingleWaveformData, WaveformLineType, WaveformLineStyle, WaveformPointType, WaveformErrorBarOptions, ResolvedWaveformErrorBarOptions, WaveformTypedValues, TypedSampleData, TypedPointData, WaveformSeries, WaveformData, NormalizedWaveformSeries, } from './types';
 export type { WaveformGridOptions, WaveformGridLineOptions, WaveformGridTrackLines, } from './components/core/grid';
 export { normalizeWaveformData, normalizeWaveformSeries } from './core';
 export { paddedDomain, buildMinorTicks, displayTime, formatEndpointTime, formatAxisTime, formatTooltipTime, resolveTrackGeometry, clamp, type TimeUnit, type TrackGeometry, } from './utils';

package/dist/types/types/chart.d.ts

@@ -68,7 +68,7 @@ export interface WaveformZoomIntentPayload extends WaveformCommandMetadata {
     trackIndex?: number;
     seriesIds?: string[];
 }
-/** Identifies the viewport reset by a double-click gesture. */
+/** Identifies the viewport reset by a toolbar or API command. */
 export interface WaveformZoomResetPayload extends WaveformCommandMetadata {
     trackIndex?: number;
     seriesIds?: string[];
@@ -279,3 +279,10 @@ export interface WaveformZeroLineOptions {
     /** Hide within this fraction of a Y-axis tick interval from either boundary. Defaults to 0.02. */
     boundaryThreshold?: number;
 }
+/** Strict amplitude display bounds, in the series' original Y units. */
+export interface WaveformAmplitudeLimit {
+    lower?: number;
+    upper?: number;
+}
+/** Keyed by stable normalized series IDs (not track IDs). */
+export type WaveformAmplitudeLimits = Record<string, WaveformAmplitudeLimit>;

package/dist/types/types/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * 类型定义统一导出
  */
-export type { WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformYAxisLabelTextStyle, WaveformZeroLineOptions, } from './chart';
+export type { WaveformAmplitudeLimit, WaveformAmplitudeLimits, WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformYAxisLabelTextStyle, WaveformZeroLineOptions, } from './chart';
 export type { SingleWaveformData, WaveformLineType, WaveformLineStyle, WaveformPointType, WaveformErrorBarOptions, ResolvedWaveformErrorBarOptions, WaveformTypedValues, TypedSampleData, TypedPointData, WaveformSeries, WaveformData, NormalizedWaveformSeries, } from './data';
 export type { WaveformToolbarItem, WaveformToolbarOptions, WaveformControlTarget, WaveformControlAction, WaveformCommandMetadata, WaveformTargetStatus, WaveformViewportSnapshot, WaveformTargetResult, WaveformControlResult, WaveformControlState, WaveformImageExportOptions, WaveformImageExportErrorCode, WaveformImageExportError, WaveformChartHandle, } from './controls';

package/dist/types/utils/formatters.d.ts

@@ -46,18 +46,18 @@ export declare function formatXAxisLabel(rawValue: number, domain: [number, numb
  */
 export declare function endpointFractionDigits(domain: [number, number], timeUnit: TimeUnit): number;
 /**
- * 将 X 轴端点时间格式化为当前显示单位下的普通十进制文本
+ * 将 X 轴端点时间格式化为当前显示单位下的自适应精度文本
  * @param value 时间值（秒）
- * @param _domain 数据域（为保持现有调用签名而保留）
+ * @param _domain 用于计算显示精度的可视域
  * @param timeUnit 时间单位
  * @returns 格式化的时间字符串
  */
 export declare function formatEndpointTime(value: number, _domain: [number, number], timeUnit: TimeUnit): string;
 /**
- * 将 X 轴时间刻度格式化为当前显示单位下的普通十进制文本
+ * 将 X 轴时间刻度格式化为当前显示单位下的自适应精度文本
  * @param value 时间值（秒）
  * @param timeUnit 时间单位
- * @param _domain 数据域（为保持现有调用签名而保留）
+ * @param _domain 用于计算显示精度的可视域
  * @returns 格式化的时间字符串
  */
 export declare function formatAxisTime(value: number, timeUnit: TimeUnit, _domain?: [number, number]): string;

package/dist/types/utils/xAxisNumber.d.ts

@@ -0,0 +1,2 @@
+/** Compact labels share precision so even extremely close endpoints stay distinct. */
+export declare function formatXAxisNumber(value: number, domain: [number, number]): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveform-analysis",
-  "version": "0.1.75",
+  "version": "0.1.77",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",

package/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { computed, inject, onBeforeUnmount, onMounted, reactive, ref, shallowRef } from 'vue'
 import 'vue3-colorpicker/style.css'
 
 import {
@@ -16,7 +16,6 @@ import {
   type WaveformOverlayMode,
   type WaveformPlotMargin,
   type WaveformTitleOptions,
-  type WaveformZoomEndPayload,
   type WaveformZeroLineOptions,
 } from './components'
 import { normalizeWaveformSeries } from './core'
@@ -25,6 +24,8 @@ import DemoChartHost from './demo/DemoChartHost.vue'
 import DemoControlPanel from './demo/DemoControlPanel.vue'
 import type { DemoChartModel, DemoControlPanelModel } from './demo/types'
 import { useDemoXAxisLabelControls } from './demo/useDemoXAxisLabelControls'
+import { remoteWindowLoaderKey } from './demo/remoteWaveformLoader'
+import { useRemoteWaveformWindow } from './demo/useRemoteWaveformWindow'
 
 const demoPreset = new URLSearchParams(window.location.search).get('demo')
 const compactNineDemo = demoPreset === 'compact-nine'
@@ -164,20 +165,27 @@ const plotMargin = computed<WaveformPlotMargin>(() => ({
   bottom: plotMarginBottom.value,
 }))
 
-const initialXValues = normalizeWaveformSeries(fullChartData).flatMap((series) =>
-  series.points.map((point) => point.x),
-)
-const [initialXMinimum, initialXMaximum] = initialXValues.reduce<[number, number]>(
-  ([minimum, maximum], value) => [Math.min(minimum, value), Math.max(maximum, value)],
-  [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY],
-)
-const initialXDomainValue: [number, number] | undefined =
-  Number.isFinite(initialXMinimum) && Number.isFinite(initialXMaximum)
-    ? [initialXMinimum, initialXMaximum]
-    : undefined
-// Keep the full source domain stable while viewport data windows are replaced.
-const initialXDomain = ref<[number, number] | undefined>(initialXDomainValue)
-const chartData = ref<WaveformData>(fullChartData)
+const demoChartHostRef = ref<{ resetViewport: (trackIndex?: number) => void }>()
+const sourceData = shallowRef<WaveformData>(fullChartData)
+const remoteWindow = useRemoteWaveformWindow(sourceData, {
+  loadWindow: inject(remoteWindowLoaderKey, undefined),
+  resetViewport: (trackIndex) => demoChartHostRef.value?.resetViewport(trackIndex),
+})
+const {
+  chartData,
+  initialXDomain,
+  recordDomain,
+  minZoomSpan,
+  loading,
+  errors,
+  handleZoomIntent,
+  handleZoomChange,
+  handleZoomEnd,
+  handlePanEnd,
+  resetWaveformViewport,
+  retry,
+} = remoteWindow
+onMounted(() => void resetWaveformViewport())
 const lineStyleOverrides = ref<Record<string, WaveformLineStyle>>({})
 const selectedSeriesId = ref(
   fullChartData.kind === 'series' ? (fullChartData.series[0]?.id ?? '') : '',
@@ -188,7 +196,7 @@ const lineStyleOptions: Array<{ label: string; value: WaveformLineStyle }> = [
   { label: '点划线', value: 'dash-dot' },
 ]
 const seriesStyleOptions = computed(() =>
-  normalizeWaveformSeries(chartData.value).map((series) => ({
+  normalizeWaveformSeries(sourceData.value).map((series) => ({
     label: series.name || series.id,
     value: series.id,
   })),
@@ -214,7 +222,7 @@ const displayChartData = computed<WaveformData>(() => {
 })
 const gridTrackLines = computed<WaveformGridTrackLines>(() =>
   Object.fromEntries(
-    normalizeWaveformSeries(displayChartData.value).map((series) => [
+    normalizeWaveformSeries(sourceData.value).map((series) => [
       series.trackId ?? series.id,
       {
         horizontal: horizontalGridVisible.value,
@@ -225,88 +233,6 @@ const gridTrackLines = computed<WaveformGridTrackLines>(() =>
     ]),
   ),
 )
-const demoChartHostRef = ref<{ resetViewport: (trackIndex?: number) => void }>()
-
-let zoomRequestSequence = 0
-
-function filterWaveformData(data: WaveformData, start: number, end: number): WaveformData {
-  const lower = Math.min(start, end)
-  const upper = Math.max(start, end)
-  if (data.kind !== 'series') {
-    if (data.kind !== 'points') return data
-    return {
-      kind: 'points',
-      points: data.points.filter((point) => point.x >= lower && point.x <= upper),
-    }
-  }
-  return {
-    kind: 'series',
-    series: data.series.map((series) => ({
-      ...series,
-      data:
-        series.data.kind === 'points'
-          ? {
-              kind: 'points',
-              points: series.data.points.filter((point) => point.x >= lower && point.x <= upper),
-            }
-          : series.data,
-    })),
-  }
-}
-
-function mergeIndependentWindow(
-  currentData: WaveformData,
-  responseData: WaveformData,
-  seriesIds: string[],
-): WaveformData {
-  if (currentData.kind !== 'series' || responseData.kind !== 'series') return responseData
-  const responseById = new Map(responseData.series.map((series) => [series.id, series]))
-  const changedIds = new Set(seriesIds)
-  return {
-    kind: 'series',
-    series: currentData.series.map((series) =>
-      series.id && changedIds.has(series.id) ? (responseById.get(series.id) ?? series) : series,
-    ),
-  }
-}
-
-let pendingCommandId: string | undefined
-let pendingPayloads: WaveformZoomEndPayload[] = []
-async function handleZoomEnd(payload: WaveformZoomEndPayload) {
-  if (payload.action === 'fit') return
-  if (payload.commandId && payload.commandId === pendingCommandId) {
-    pendingPayloads.push(payload)
-    return
-  }
-  pendingCommandId = payload.commandId
-  const batch = [payload]
-  pendingPayloads = batch
-  // Demo-only sequence number cancellation. Production code should use AbortController
-  // to cancel in-flight requests when a newer zoom gesture arrives.
-  const requestSequence = ++zoomRequestSequence
-  await new Promise((resolve) => window.setTimeout(resolve, 80))
-  if (requestSequence !== zoomRequestSequence) return
-
-  // Demo-only stand-in for the backend response. Production code should replace this
-  // with a request using payload.start/payload.end and the optional channel metadata.
-  let nextData = chartData.value
-  batch.forEach((item) => {
-    const responseData = filterWaveformData(fullChartData, item.start, item.end)
-    nextData =
-      item.trackIndex !== undefined && item.seriesIds?.length
-        ? mergeIndependentWindow(nextData, responseData, item.seriesIds)
-        : responseData
-  })
-  chartData.value = nextData
-  pendingCommandId = undefined
-}
-
-function resetWaveformViewport() {
-  zoomRequestSequence += 1
-  chartData.value = fullChartData
-  initialXDomain.value = initialXDomainValue
-  demoChartHostRef.value?.resetViewport()
-}
 const titleOptions = computed<WaveformTitleOptions>(() => ({
   visible: titleVisible.value,
   text: titleText.value,
@@ -406,6 +332,11 @@ const chartModel = reactive({
   toolbarVisible,
   data: displayChartData,
   initialXDomain,
+  recordDomain,
+  minZoomSpan,
+  loading,
+  errors,
+  retry,
   displayMode,
   overlayMode,
   rowCount,
@@ -428,7 +359,10 @@ const chartModel = reactive({
   annotationsVisible,
   interactionMode,
   hiddenSeriesIds,
+  handleZoomIntent,
+  handleZoomChange,
   handleZoomEnd,
+  handlePanEnd,
   resetWaveformViewport,
 }) satisfies DemoChartModel
 </script>

package/src/components/WaveformChartView.vue

@@ -46,11 +46,9 @@ const {
   chartWidth,
   drawingHeight,
   hasWaveformData,
-  requestViewportReset,
   trackLayouts,
   presentationTracks,
   presentationAnnotations,
-  paginationOpacity,
   stabilizeAnimations,
   clipPathId,
   chartTopMargin,
@@ -189,7 +187,6 @@ function handleChartPointerLeave() {
       :height="drawingHeight"
       role="img"
       :aria-label="hasWaveformData ? '波形折线图' : '暂无波形数据'"
-      @dblclick="requestViewportReset"
     >
       <defs>
         <clipPath
@@ -244,7 +241,6 @@ function handleChartPointerLeave() {
           v-for="track in trackLayouts"
           :key="`${track.index}-${track.id}`"
           :track="presentationTracks.find((item) => item.id === track.id) ?? track"
-          :pagination-opacity="paginationOpacity"
           :frame-path="
             displayMode === 'compact'
               ? compactFramePath(track, trackLayouts, compactFrameInset)

package/src/components/animation/config.ts

@@ -62,7 +62,7 @@ export function resolveAnimationProps(
     animationEnabled: field(props.animationEnabled, true, boolean, 'animationEnabled'),
     animationThreshold: field(
       props.animationThreshold,
-      50000,
+      200000,
       (v) => nonnegative(v) && Number.isInteger(v),
       'animationThreshold',
     ),

package/src/components/animation/context.ts

@@ -1,5 +1,6 @@
 import type { ComputedRef, Ref, ShallowRef } from 'vue'
 import type { TrackLayout } from '../core/types'
+import { normalizeGridOptions } from '../core/grid'
 import type { PreparedWaveformSeries } from '../core/useWaveformData'
 import type { ResolvedWaveformChartProps } from '../core/waveformChartTypes'
 
@@ -18,6 +19,11 @@ export interface AnimationContext {
   }
 }
 
+export function animationGridShape(context: AnimationContext) {
+  const grid = normalizeGridOptions(context.props.grid)
+  return `${grid.rowCount}:${grid.columnCount}`
+}
+
 export function animationLayoutSignature(context: AnimationContext) {
   const { props, tracks } = context
   return JSON.stringify({
@@ -27,8 +33,10 @@ export function animationLayoutSignature(context: AnimationContext) {
       track.top,
       track.width,
       track.height,
+      track.xScale.domain(),
+      track.yScale.domain(),
       track.seriesList.map((series) => series.id),
-      track.yAxes.map((axis) => axis.seriesList.map((series) => series.id)),
+      track.yAxes.map((axis) => [axis.seriesList.map((series) => series.id), axis.scale.domain()]),
     ]),
     width: context.innerWidth.value,
     height: context.innerHeight.value,

package/src/components/animation/paginationPresentation.ts

@@ -1,22 +1,27 @@
-import { shallowRef, type ComputedRef } from 'vue'
-import type { AnimationContext } from './context'
+import type { ComputedRef } from 'vue'
+import { animationLayoutSignature, type AnimationContext } from './context'
 import type { ResolvedAnimationProps } from './config'
 import type { WaveformAnimationController } from '@/animation/WaveformAnimationController'
-import { clampProgress } from '@/animation/presets/shared'
 import { chartExportOptions } from '../controls/chartExportOptions'
 
-/** A single owner-scoped fade; it holds no old page geometry. */
+/** Coordinates entrance replay; drawing remains owned by the normal series pipeline. */
 export function createPaginationPresentation(
   context: AnimationContext,
   controller: WaveformAnimationController,
   config: ComputedRef<ResolvedAnimationProps>,
   effective: ComputedRef<boolean>,
-  commit: () => void,
+  prepare: () => void,
 ) {
-  const opacity = shallowRef(1)
-  const key = { kind: 'custom', id: 'pagination', scope: 'update' } as const
-  let sequence = 0
-  let request: { page: number; version: number; environment: string; started: boolean } | undefined
+  let request:
+    | {
+        page: number
+        trigger: 'page' | 'grid'
+        environment: string
+        started: boolean
+        geometry?: string
+        signature?: string
+      }
+    | undefined
   const environment = () =>
     JSON.stringify({
       options: Object.fromEntries(
@@ -25,82 +30,58 @@ export function createPaginationPresentation(
         ),
       ),
       size: context.containerSize.value,
+      amplitudeLimits: context.props.amplitudeLimits,
       hidden: context.props.hiddenSeriesIds,
       presentation: context.props.presentationMode,
     })
   function reset() {
     request = undefined
-    opacity.value = 1
   }
-  function cancel() {
-    controller.cancel(key)
+  function requestPage(page: number, trigger: 'page' | 'grid' = 'page') {
     reset()
-  }
-  function requestPage(page: number) {
-    cancel()
+    controller.cancelAll()
+    // Discard old-page presentation before recording the new request.
     controller.finishAll()
-    if (!effective.value || !config.value.animationUpdate.enabled) return
-    request = { page, version: ++sequence, environment: environment(), started: false }
-    if (config.value.animationUpdate.duration > 0) opacity.value = 0
+    if (!effective.value || !config.value.animation.enabled) return
+    request = { page, trigger, environment: environment(), started: false }
   }
-  function reconcile(dataChanged: boolean) {
+  function reconcile(dataChanged: boolean): 'replay' | 'static' | undefined {
     const current = request
-    if (!current) return false
+    if (!current) return
+    if (!config.value.animation.enabled) {
+      // Category closure is handled by finishWhere; it must release, not finish annotations.
+      reset()
+      return
+    }
     if (
       dataChanged ||
       current.page !== context.currentPage.value ||
       current.environment !== environment() ||
       !effective.value ||
-      !config.value.animationUpdate.enabled
+      (!current.started && config.value.animation.duration === 0) ||
+      ['fallback', 'error'].includes(context.sampling.state.value) ||
+      (current.started &&
+        (current.geometry !== animationLayoutSignature(context) ||
+          current.signature !== context.sampling.requestSignature.value ||
+          context.sampling.state.value !== 'success'))
     ) {
       controller.finishAll()
       reset()
-      return true
+      return 'static'
     }
-    if (!current.started && config.value.animationUpdate.duration === 0) opacity.value = 1
-    commit()
-    if (context.sampling.state.value === 'pending' || !context.layoutReady.value) return true
-    if (context.sampling.state.value !== 'success') {
-      controller.finishAll()
+    if (current.started && !controller.getActiveAnimationCount()) {
       reset()
-      return true
+      return
     }
-    if (current.started) return true
-    const ids = context.tracks.value.flatMap((track) =>
-      track.width > 0 && track.height > 0
-        ? track.seriesList
-            .filter((series) => (series.source?.length ?? series.points.length) > 0)
-            .map((series) => series.id)
-        : [],
-    )
-    if (!ids.length) {
-      reset()
-      return true
+    if (!current.started) {
+      prepare()
+      current.started = context.sampling.state.value === 'success' && context.layoutReady.value
+      if (current.started) {
+        current.geometry = animationLayoutSignature(context)
+        current.signature = context.sampling.requestSignature.value
+      }
     }
-    current.started = true
-    const options = config.value.animationUpdate
-    const notify = (callback?: () => void) => ids.forEach(() => callback?.())
-    controller.animate(key, {
-      duration: options.duration,
-      easing: options.easing,
-      force: true,
-      initialize: () => {
-        opacity.value = options.duration > 0 ? 0 : 1
-      },
-      during: (progress, frame) => {
-        if (request?.version === current.version)
-          opacity.value = frame.terminal ? 1 : clampProgress(progress)
-      },
-      done: () => {
-        if (request?.version === current.version) reset()
-        notify(options.onComplete)
-      },
-      aborted: () => {
-        if (request?.version === current.version) reset()
-        notify(options.onAbort)
-      },
-    })
-    return true
+    return 'replay'
   }
   function wrapPagination(goToPage: (page: number) => void, count: ComputedRef<number>) {
     return (page: number) => {
@@ -110,5 +91,15 @@ export function createPaginationPresentation(
       goToPage(page)
     }
   }
-  return { opacity, reset, cancel, reconcile, wrapPagination, active: () => !!request }
+  return {
+    reset,
+    reconcile,
+    wrapPagination,
+    requestLayout: () => requestPage(context.currentPage.value, 'grid'),
+    enterDuration: () =>
+      request?.trigger === 'page' && config.value.animation.duration > 0
+        ? 500
+        : config.value.animation.duration,
+    active: () => !!request && (!request.started || controller.getActiveAnimationCount() > 0),
+  }
 }