Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/animation/AnimatedItems.tsx`:
- Around line 43-47: The public interpolator type AnimationInterpolateFn
currently types prevItems as ReadonlyArray<T> | null which disallows empty
slots; change that parameter to ReadonlyArray<T | null> | null so predecessors
may contain holes (or use T | undefined if your codebase prefers undefined), and
make the same change to the other interpolator type declared later (the second
occurrence around lines 129-135) so any custom interpolator used with
animationMatchBy can safely handle missing entries.

In `@src/animation/CSSTransitionAnimate.tsx`:
- Around line 100-108: The cleanup calls onAnimationEnd directly while the
animationManager also receives onAnimationEnd via animationManager.start,
risking double invocation; create a safe wrapper (e.g., safeOnAnimationEnd) that
guards with an internal "called" flag and use that wrapper both when passing to
animationManager.start and in the cleanup instead of calling onAnimationEnd
directly (or remove the direct call and only call animationManager.stop with the
wrapper if needed); reference animationManager.start, stopJSAnimation.current,
onAnimationEnd and replace usages with safeOnAnimationEnd to ensure
onAnimationEnd is only invoked once.

In `@src/animation/ManualTimeoutController.ts`:
- Around line 13-17: The current setTimeout implementation pushes an entry with
only { callback } and the returned cancel function filters out all entries with
the same callback, which removes multiple scheduled timeouts; change it to
create a distinct entry object (e.g., const entry = { callback, ... } or assign
a unique id) and push that entry into this.timeouts, then have the returned
CancelableTimeout remove only that specific entry by reference or id (e.g.,
this.timeouts = this.timeouts.filter(t => t !== entry || t.id !== entry.id)).
Apply the same fix to the analogous removal logic in the other method around
lines 20-24 so cancellations remove only the single scheduled item.

In `@src/animation/matchBy.ts`:
- Around line 43-49: The matchByDataKey function currently uses unsafe `as`
casts and its declared match return type doesn't reflect that unmatched items
yield undefined; update the AnimationMatchBy return type to allow undefined
(e.g. include | undefined in the match result array type) and remove all `as`
assertions in this module (notably the cast on item.payload in matchByDataKey
and the assertions referenced at lines 86–88) — after the runtime guard
(item.payload == null || typeof item.payload !== 'object') payload is already
narrowed to object so pass it directly to getValueByDataKey(item.payload,
dataKey) and return value or undefined, and ensure any callers/types are
adjusted to accept ReadonlyArray<T | undefined>.

In `@src/cartesian/Area.tsx`:
- Around line 625-663: The defaultAreaAnimateItems and interpolateBaseLine
functions are using Math.floor(index * prevPointsDiffFactor) which breaks
key-based (animationMatchBy) alignment; change the lookup to use the direct
index when points were already aligned (i.e., when prevPointsDiffFactor === 1)
and only apply the stretched-index math when prevPointsDiffFactor !== 1. Update
defaultAreaAnimateItems (replace prevPointIndex calculation) and
interpolateBaseLine (replace prevPointIndex calculation) to compute
prevPointIndex = index when prevPointsDiffFactor === 1, otherwise prevPointIndex
= Math.floor(index * prevPointsDiffFactor), so keyed AnimatedItems read
prevItems[index] and stacked/range baselines still use the stretch logic.

In `@src/cartesian/Line.tsx`:
- Around line 585-608: The defaultLineAnimateItems function currently uses
prevPointsDiffFactor to compute prevPointIndex which breaks correct key-based
matching done by animationMatchBy; change the lookup to use prevItems[index]
when prevItems are already matched by key (i.e., when animationMatchBy is in
effect) and only use the stretched-index computation (Math.floor(index *
prevPointsDiffFactor)) for the match-by-index code path; update the analogous
logic in the other occurrences noted (around the blocks identified at lines
653-655 and 711-712) so inserted/removed points interpolate from the true
matched previous item when keys are used and fall back to the stretched lookup
only for index-based matching.

In `@src/cartesian/Scatter.tsx`:
- Around line 625-627: The animationInput currently passes the entire props
object to AnimatedItems (animationInput={props}), causing unnecessary animation
restarts; update Scatter to pass a stable, minimal input such as the computed
points array or a memoized subset of props that only changes when geometry
changes (e.g., use the existing points variable or create a useMemo that derives
[points, dataKey, cx, cy] and pass that to animationInput), and ensure
AnimatedItems still receives animationIdPrefix="recharts-scatter-" so only
genuine geometry updates trigger transitions.

---

Nitpick comments:
In `@omnidoc/verifyExamples.spec.ts`:
- Around line 193-200: The examples-exemption list currently includes runtime
APIs (matchByIndex, matchByDataKey, AnimationProgressProvider,
useAnimationProgress) which should remain covered by runtime checks; update the
list to remove those runtime symbols and only exempt type-only exports (e.g.,
AnimationInterpolateFn, AnimationMatchBy, AnimationHandle, AnimationStatus) so
that runtime animation APIs continue to be enforced by the verification test.
Locate the array containing the exempted names and delete the runtime entries
(matchByIndex, matchByDataKey, AnimationProgressProvider, useAnimationProgress),
leaving only the type-only export names in the exemption list.

In `@src/animation/CSSTransitionAnimate.tsx`:
- Around line 87-97: In onAnimationActive, timingUpdate currently reschedules
itself unconditionally via tc.setTimeout even after t reaches 1, causing
unnecessary work; modify timingUpdate (and related stopJSAnimation handling) to
check computed t and when t >= 1 stop scheduling further frames (clear or avoid
setting stopJSAnimation.current) and ensure the final
setStyle(interpolateCSSValue(from, to, 1)) is applied once before stopping so
the loop does not run past completion; update references to beginTime,
stopJSAnimation, tc.setTimeout, setStyle, interpolateCSSValue and duration
accordingly.

In `@src/cartesian/Bar.tsx`:
- Around line 819-820: The interpolator is recreated every render because
animationInterpolateFn is set to props.animationInterpolateFn ??
defaultBarAnimateItems(layout); change this to memoize the fallback: compute
defaultBarAnimateItems(layout) inside a useMemo (or equivalent) keyed on layout
(and any layout-derived values) and then use props.animationInterpolateFn ??
memoizedInterpolator; update the assignment of animationInterpolateFn in the Bar
component to reference that memoized value so reference equality is stable for
AnimatedItems and prevents unnecessary animation restarts.

In `@www/src/components/GuideView/Animations/CustomAnimationExample.tsx`:
- Around line 29-31: The mapping that computes staggered animation values can
divide by zero when count is 0; in the function in CustomAnimationExample.tsx
that uses index/count to compute delay and progress, add a guard for count === 0
(or count <= 0) before computing delay — e.g., if count === 0 simply return the
original entry (or set a sensible default delay/progress) to avoid NaN, and
ensure you still return a valid opacity value; update the code that calculates
delay, progress, and the returned { ...entry, opacity } to use this guard
(references: index, count, delay, progress).

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/animation/AnimatedItems.tsx`:
- Around line 108-111: The default snapshot guard for updating previousItemsRef
must be strictly t > 0; update the AnimatedItems component so the fallback for
the prop shouldUpdatePreviousRef is (t) => t > 0 (not including totalLength),
and use that predicate when deciding to write previousItemsRef so no update
occurs at t === 0; also apply the same change to the other occurrence referenced
(the second check around lines 181-182) so both places use the same fallback
guard and prevent snapshotting the synthetic first frame.
- Around line 23-40: The hook useAnimationCallbacks lacks an explicit return
type; add a named return type (e.g., { isAnimating: boolean;
handleAnimationStart: () => void; handleAnimationEnd: () => void }) to the
function signature so the exported hook surface is explicit and stable, keeping
the existing state and callbacks (isAnimating, handleAnimationStart,
handleAnimationEnd) intact and updating the function declaration to include that
return type.

In `@src/animation/CSSTransitionAnimate.tsx`:
- Around line 87-97: The manual animation loop in onAnimationActive's
timingUpdate can produce NaN when duration === 0 and continues re-queuing after
completion; modify timingUpdate so it treats duration <= 0 as an immediate
completion (set t = 1), guard the computed t with Number.isFinite and clamp to
[0,1], call setStyle(interpolateCSSValue(from, to, t)) with that valid t, and
only call stopJSAnimation.current = tc.setTimeout(timingUpdate) when t < 1 so
the timeout is not re-queued after the animation finishes; update references to
timingUpdate, beginTime, duration, setStyle, interpolateCSSValue,
stopJSAnimation, and tc.setTimeout accordingly.

In `@src/animation/matchBy.ts`:
- Around line 148-159: The current buildPrevKeyMap (and the analogous code at
176-199) only keeps one item per match key so duplicate keys cause one prev to
match many nexts; change buildPrevKeyMap to store all items for a key (use
Map<string|number, T[]> and push each item instead of skipping duplicates), then
update the matching/consumption logic to pull (e.g. shift/pop) a single item
from the array when a key is matched and delete the map entry when the array
becomes empty so each prev is consumed at most once.

In `@src/animation/ProgressAnimationManager.ts`:
- Around line 173-177: The code in ProgressAnimationManager is using a forbidden
type assertion (head as ReactSmoothStyle); instead, narrow head with the
existing typeof checks and pass it directly to the listener. Replace the branch
to call this.listener?.(head) when typeof head === 'object' || typeof head ===
'string' (remove the "as ReactSmoothStyle" assertion) and if necessary update
the listener signature/type to accept string | object | ReactSmoothStyle so the
call is type-safe without casting.

In `@src/cartesian/Area.tsx`:
- Around line 168-199: The JSDoc `@see` {`@link` ...} entries in the Area.tsx prop
docs (notably for animationInterpolateFn and animationMatchBy) are missing their
closing "}" which breaks generated API docs; update those `@see` tags to use
properly closed {`@link` ...} syntax (e.g., {`@link` https://...}) and scan the
other new animation-related prop docs in the same file to fix any identical
malformed {`@link` ...} tags so all links render correctly.

In `@src/cartesian/AreaRevealShape.tsx`:
- Around line 42-43: The clip bounds currently use parseInt on strokeWidth (in
AreaRevealShape height and the similar calculation at Line 70), which truncates
fractional widths and can under-size the clip; replace
parseInt(`${strokeWidth}`, 10) with a non-truncating parse + roundup, e.g. use
Math.ceil(parseFloat(`${strokeWidth}`) || 1) (or Math.ceil(Number(strokeWidth)
|| 1)) so fractional stroke widths like 0.5 are preserved and the clip rect is
large enough; update both occurrences in the AreaRevealShape calculations where
height/clip size is computed.

In `@src/cartesian/LineDrawShape.tsx`:
- Around line 164-166: Remove the unsafe "as React.RefObject" cast on
curveProps.pathRef and narrow the ref structurally before accessing .current:
check if curveProps.pathRef is an object and has a 'current' property (e.g.,
typeof curveProps.pathRef === 'object' && curveProps.pathRef !== null &&
'current' in curveProps.pathRef) and only then read const pathRef =
curveProps.pathRef as React.RefObject<SVGPathElement | null>; const totalLength
= getTotalLength(pathRef.current ?? null); otherwise treat totalLength as 0 (or
handle callback refs separately) and then call
computeAnimatedStrokeDasharray(userStrokeDasharray, totalLength, visibleLength)
to compute strokeDasharray.

In `@src/cartesian/Scatter.tsx`:
- Around line 640-644: The Scatter component currently calls
useAnimationCallbacks() without passing the public callbacks, so its
onAnimationStart/onAnimationEnd props are never invoked; update the hook
invocation in Scatter to forward props.onAnimationStart and props.onAnimationEnd
(e.g., call useAnimationCallbacks with an options object containing
onAnimationStart: props.onAnimationStart and onAnimationEnd:
props.onAnimationEnd) so that the returned handleAnimationStart and
handleAnimationEnd will call the public callbacks.

In `@src/polar/Pie.tsx`:
- Around line 973-976: The AnimatedItems call in PieImpl is using the entire
props object as animationInput (animationInput={props}), which causes
unnecessary restart of animations on non-geometry updates; change animationInput
to use the geometry-only data such as sectors (animationInput={sectors}) or a
memoized value derived from sectors so animations only react to geometry
changes; update the AnimatedItems invocation in PieImpl to pass sectors or a
memoized geometry input instead of props.
- Around line 917-949: The animation computes paddingAngle using the original
array index which causes an extra leading gap when earlier items are removed;
update defaultPieAnimateItems to compute paddingAngle based on the
emitted-sector sequence instead: introduce a local emittedIndex (increment only
for items where item.status !== 'removed') and use emittedIndex > 0 to decide
whether to apply get(item.next, 'paddingAngle', 0), keeping curAngle seeded from
firstNonRemoved.next.startAngle and updating emittedIndex each time you push a
sector so padding is applied relative to emitted sectors rather than source
indices.

In `@src/polar/RadialBar.tsx`:
- Around line 254-257: The AnimatedItems call in RadialBar uses
animationInput={props}, which causes unrelated prop changes to restart
animations; change animationInput to a stable value such as the existing sectors
array or a memoized geometry-only subset (e.g. compute a useMemo that maps
sectors to {startAngle,endAngle,radius,...} and pass that) so animations depend
only on geometry; update the AnimatedItems prop (animationInput) accordingly and
ensure any memoization uses relevant keys (like sectors or data keys) to keep
the input stable.
- Around line 206-224: The defaultRadialBarAnimateItems interpolator currently
always tweens startAngle/endAngle, causing centric layouts (which encode value
changes via innerRadius/outerRadius) to jump or animate incorrectly; update
defaultRadialBarAnimateItems to branch on the PolarLayout.layout value: if
layout === 'radial' keep the existing startAngle/endAngle interpolation for
matched and added items, otherwise (centric layout) interpolate innerRadius and
outerRadius for matched items (use interpolate(item.prev.innerRadius,
item.next.innerRadius, t) and same for outerRadius) and for added items set next
with innerRadius interpolated from next.innerRadius to next.outerRadius as
appropriate (or interpolate innerRadius from 0 to next.innerRadius / outerRadius
as your design requires), and on t === 1 continue returning item.next unchanged;
ensure removed items remain filtered out as before and reference the
defaultRadialBarAnimateItems symbol to implement the branch.

---

Outside diff comments:
In `@src/polar/Radar.tsx`:
- Around line 499-527: The animation snapshot and AnimatedItems input are
currently keyed on the entire props object causing unrelated prop churn to
restart animations; change both the call to useAnimationStartSnapshot and the
animationInput passed to <AnimatedItems> to use a stable, memoized object
containing only { points, baseLinePoints } (e.g., compute a const animationKey =
useMemo(() => ({ points, baseLinePoints }), [points, baseLinePoints]) and pass
that into useAnimationStartSnapshot(animationKey, previousBaseLinePointsRef) and
animationInput={animationKey}) so animation state is driven only by geometry
changes.

---

Duplicate comments:
In `@src/cartesian/Scatter.tsx`:
- Around line 649-653: The animation input currently uses the whole props object
(animationInput={props}) which causes unnecessary animation restarts; change
AnimatedItems to use a stable trigger like animationInput={points} or a memoized
geometry-only subset (e.g., a memoized array of point positions) so animations
only restart when the actual point data changes; update the AnimatedItems usage
near ScatterLabelListProvider/AnimatedItems and ensure any memoization is done
where points are computed.