@coinbase/cds-mobile-visualization 3.4.0-beta.17 → 3.4.0-beta.19

package/esm/chart/point/Point.js

@@ -5,7 +5,7 @@ import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Circle, Group, interpolateColors } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { projectPoint } from '../utils';
-import { buildTransition, defaultTransition } from '../utils/transition';
+import { buildTransition, defaultAccessoryEnterTransition, defaultTransition, getTransition } from '../utils/transition';
 import { DefaultPointLabel } from './DefaultPointLabel';
 
 /**
@@ -27,7 +27,8 @@ export const Point = /*#__PURE__*/memo(_ref => {
     labelPosition = 'center',
     labelOffset,
     labelFont,
-    transition = defaultTransition,
+    transitions,
+    transition,
     animate: animateProp
   } = _ref;
   const theme = useTheme();
@@ -43,6 +44,8 @@ export const Point = /*#__PURE__*/memo(_ref => {
   const xScale = getXScale();
   const yScale = getYScale(yAxisId);
   const shouldAnimate = animate != null ? animate : false;
+  const updateTransition = useMemo(() => getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions == null ? void 0 : transitions.update, transition]);
+  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [animate, transitions == null ? void 0 : transitions.enter]);
 
   // Calculate pixel coordinates from data coordinates
   const pixelCoordinate = useMemo(() => {
@@ -62,9 +65,13 @@ export const Point = /*#__PURE__*/memo(_ref => {
   // Animated values for position
   const animatedX = useSharedValue(0);
   const animatedY = useSharedValue(0);
-
-  // Animated value for color interpolation (0 = old color, 1 = new color)
+  const enterOpacity = useSharedValue(shouldAnimate ? 0 : 1);
   const colorProgress = useSharedValue(1);
+  const isReady = !!xScale && !!yScale;
+  useEffect(() => {
+    if (!shouldAnimate || !isReady) return;
+    enterOpacity.value = buildTransition(1, enterTransition);
+  }, [shouldAnimate, isReady, enterTransition, enterOpacity]);
 
   // Update position when coordinates change
   useEffect(() => {
@@ -72,26 +79,26 @@ export const Point = /*#__PURE__*/memo(_ref => {
       return;
     }
     if (shouldAnimate && previousPixelCoordinate) {
-      animatedX.value = buildTransition(pixelCoordinate.x, transition);
-      animatedY.value = buildTransition(pixelCoordinate.y, transition);
+      animatedX.value = buildTransition(pixelCoordinate.x, updateTransition);
+      animatedY.value = buildTransition(pixelCoordinate.y, updateTransition);
     } else {
       cancelAnimation(animatedX);
       cancelAnimation(animatedY);
       animatedX.value = pixelCoordinate.x;
       animatedY.value = pixelCoordinate.y;
     }
-  }, [pixelCoordinate, shouldAnimate, previousPixelCoordinate, animatedX, animatedY, transition]);
+  }, [pixelCoordinate, shouldAnimate, previousPixelCoordinate, animatedX, animatedY, updateTransition]);
 
   // Update color when fill changes
   useEffect(() => {
     if (shouldAnimate && previousFill && previousFill !== fill) {
       colorProgress.value = 0;
-      colorProgress.value = buildTransition(1, transition);
+      colorProgress.value = buildTransition(1, updateTransition);
     } else {
       cancelAnimation(colorProgress);
       colorProgress.value = 1;
     }
-  }, [fill, shouldAnimate, previousFill, colorProgress, transition]);
+  }, [fill, shouldAnimate, previousFill, colorProgress, updateTransition]);
 
   // Create animated point for circles
   const animatedPoint = useDerivedValue(() => {
@@ -108,24 +115,19 @@ export const Point = /*#__PURE__*/memo(_ref => {
     }
     return interpolateColors(colorProgress.value, [0, 1], [previousFill, fill]);
   }, [colorProgress, previousFill, fill]);
-
-  // Check if point is within drawing area
-  const isWithinDrawingArea = useDerivedValue(() => {
-    return animatedX.value >= drawingArea.x && animatedX.value <= drawingArea.x + drawingArea.width && animatedY.value >= drawingArea.y && animatedY.value <= drawingArea.y + drawingArea.height;
-  }, [animatedX, animatedY, drawingArea]);
-
-  // Compute effective opacity based on drawing area bounds
+  const isWithinDrawingArea = useMemo(() => {
+    if (!pixelCoordinate) return false;
+    return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
+  }, [pixelCoordinate, drawingArea]);
   const effectiveOpacity = useDerivedValue(() => {
     const baseOpacity = opacity != null ? opacity : 1;
-    return isWithinDrawingArea.value ? baseOpacity : 0;
-  }, [isWithinDrawingArea, opacity]);
+    return isWithinDrawingArea ? baseOpacity * enterOpacity.value : 0;
+  }, [isWithinDrawingArea, opacity, enterOpacity]);
   const offset = useMemo(() => labelOffset != null ? labelOffset : radius * 2, [labelOffset, radius]);
   if (!pixelCoordinate) {
     return null;
   }
-
-  // If animation is disabled or on first render, use static rendering
-  if (!shouldAnimate || !previousPixelCoordinate) {
+  if (!shouldAnimate) {
     const isWithinBounds = pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
     const staticOpacity = isWithinBounds ? opacity != null ? opacity : 1 : 0;
     return /*#__PURE__*/_jsxs(_Fragment, {
@@ -159,20 +161,16 @@ export const Point = /*#__PURE__*/memo(_ref => {
       })]
     });
   }
-
-  // Animated rendering
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Group, {
-      opacity: effectiveOpacity,
-      children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
-        c: animatedPoint,
-        color: stroke,
-        r: radius + strokeWidth / 2
-      }), /*#__PURE__*/_jsx(Circle, {
-        c: animatedPoint,
-        color: animatedFillColor,
-        r: radius - strokeWidth / 2
-      })]
+  return /*#__PURE__*/_jsxs(Group, {
+    opacity: effectiveOpacity,
+    children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: stroke,
+      r: radius + strokeWidth / 2
+    }), /*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: animatedFillColor,
+      r: radius - strokeWidth / 2
     }), label && /*#__PURE__*/_jsx(LabelComponent, {
       dataX: dataX,
       dataY: dataY,

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -5,7 +5,7 @@ import { Circle, Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { unwrapAnimatedValue } from '../utils';
 import { projectPointWithSerializableScale } from '../utils/point';
-import { buildTransition, defaultTransition } from '../utils/transition';
+import { buildTransition, defaultTransition, getTransition } from '../utils/transition';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultRadius = 5;
 const defaultStrokeWidth = 2;
@@ -48,10 +48,7 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     var _ref2;
     return (_ref2 = colorProp != null ? colorProp : targetSeries == null ? void 0 : targetSeries.color) != null ? _ref2 : theme.color.fgPrimary;
   }, [colorProp, targetSeries == null ? void 0 : targetSeries.color, theme.color.fgPrimary]);
-  const updateTransition = useMemo(() => {
-    var _transitions$update;
-    return (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : defaultTransition;
-  }, [transitions == null ? void 0 : transitions.update]);
+  const updateTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.update, animate, defaultTransition), [transitions == null ? void 0 : transitions.update, animate]);
   const pulseTransition = useMemo(() => {
     var _transitions$pulse;
     return (_transitions$pulse = transitions == null ? void 0 : transitions.pulse) != null ? _transitions$pulse : defaultPulseTransition;

package/esm/chart/scrubber/Scrubber.js

@@ -1,10 +1,11 @@
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
-import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { useTheme } from '@coinbase/cds-mobile';
 import { Group, Rect } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { ReferenceLine } from '../line';
-import { accessoryFadeTransitionDelay, accessoryFadeTransitionDuration, getPointOnSerializableScale, useScrubberContext } from '../utils';
+import { defaultAccessoryEnterTransition, getPointOnSerializableScale, getTransition, useScrubberContext } from '../utils';
+import { buildTransition } from '../utils/transition';
 import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
 import { DefaultScrubberLabel } from './DefaultScrubberLabel';
 import { ScrubberBeaconGroup } from './ScrubberBeaconGroup';
@@ -35,6 +36,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     beaconLabelFont,
     idlePulse,
     beaconTransitions,
+    transitions = beaconTransitions,
     beaconStroke
   } = _ref;
   const theme = useTheme();
@@ -56,15 +58,6 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
   // Animation state for delayed scrubber rendering (matches web timing)
   const scrubberOpacity = useSharedValue(animate ? 0 : 1);
 
-  // Delay scrubber appearance until after path enter animation completes
-  useEffect(() => {
-    if (animate) {
-      scrubberOpacity.value = withDelay(accessoryFadeTransitionDelay, withTiming(1, {
-        duration: accessoryFadeTransitionDuration
-      }));
-    }
-  }, [animate, scrubberOpacity]);
-
   // Expose imperative handle with pulse method
   useImperativeHandle(ref, () => ({
     pulse: () => {
@@ -132,7 +125,14 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       color: s.color
     }))) != null ? _series$filter$filter : [];
   }, [series, filteredSeriesIds]);
-  if (!xScale) return;
+  const isReady = !!xScale;
+  const groupEnterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [transitions == null ? void 0 : transitions.enter, animate]);
+  useEffect(() => {
+    if (animate && isReady) {
+      scrubberOpacity.value = buildTransition(1, groupEnterTransition);
+    }
+  }, [animate, isReady, scrubberOpacity, groupEnterTransition]);
+  if (!isReady) return;
   return /*#__PURE__*/_jsxs(Group, {
     opacity: scrubberOpacity,
     children: [!hideOverlay && /*#__PURE__*/_jsx(Rect, {
@@ -158,14 +158,15 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       idlePulse: idlePulse,
       seriesIds: filteredSeriesIds,
       stroke: beaconStroke,
-      transitions: beaconTransitions
+      transitions: transitions
     }), !hideBeaconLabels && beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
       BeaconLabelComponent: BeaconLabelComponent,
       labelFont: beaconLabelFont,
       labelHorizontalOffset: beaconLabelHorizontalOffset,
       labelMinGap: beaconLabelMinGap,
       labelPreferredSide: beaconLabelPreferredSide,
-      labels: beaconLabels
+      labels: beaconLabels,
+      transitions: transitions
     })]
   });
 }));

package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -1,9 +1,10 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { memo, useCallback, useMemo, useState } from 'react';
-import { useDerivedValue } from 'react-native-reanimated';
+import { useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { useCartesianChartContext } from '../ChartProvider';
-import { applySerializableScale, useScrubberContext } from '../utils';
+import { applySerializableScale, unwrapAnimatedValue, useScrubberContext } from '../utils';
 import { calculateLabelYPositions, getLabelPosition } from '../utils/scrubber';
+import { buildTransition, defaultTransition, getTransition } from '../utils/transition';
 import { DefaultScrubberBeaconLabel } from './DefaultScrubberBeaconLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PositionedLabel = /*#__PURE__*/memo(_ref => {
@@ -11,6 +12,8 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     index,
     positions,
     position,
+    isIdle,
+    updateTransition,
     label,
     color,
     seriesId,
@@ -24,10 +27,21 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     var _positions$value$inde, _positions$value$inde2;
     return (_positions$value$inde = (_positions$value$inde2 = positions.value[index]) == null ? void 0 : _positions$value$inde2.x) != null ? _positions$value$inde : 0;
   }, [positions, index]);
-  const y = useDerivedValue(() => {
+  const targetY = useDerivedValue(() => {
     var _positions$value$inde3, _positions$value$inde4;
     return (_positions$value$inde3 = (_positions$value$inde4 = positions.value[index]) == null ? void 0 : _positions$value$inde4.y) != null ? _positions$value$inde3 : 0;
   }, [positions, index]);
+  const animatedY = useSharedValue(0);
+  useAnimatedReaction(() => ({
+    y: targetY.value,
+    idle: unwrapAnimatedValue(isIdle)
+  }), (current, previous) => {
+    if (previous === null || !previous.idle || !current.idle) {
+      animatedY.value = current.y;
+    } else {
+      animatedY.value = buildTransition(current.y, updateTransition);
+    }
+  }, [updateTransition]);
   const dx = useDerivedValue(() => {
     return position.value === 'right' ? labelHorizontalOffset : -labelHorizontalOffset;
   }, [position, labelHorizontalOffset]);
@@ -42,7 +56,7 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     opacity: opacity,
     seriesId: seriesId,
     x: x,
-    y: y
+    y: animatedY
   });
 });
 export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
@@ -52,7 +66,8 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     labelHorizontalOffset = 16,
     labelFont,
     labelPreferredSide = 'right',
-    BeaconLabelComponent = DefaultScrubberBeaconLabel
+    BeaconLabelComponent = DefaultScrubberBeaconLabel,
+    transitions
   } = _ref2;
   const {
     getSeries,
@@ -61,11 +76,16 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     getYSerializableScale,
     getXAxis,
     drawingArea,
-    dataLength
+    dataLength,
+    animate
   } = useCartesianChartContext();
   const {
     scrubberPosition
   } = useScrubberContext();
+  const isIdle = useDerivedValue(() => {
+    return scrubberPosition.value === undefined;
+  }, [scrubberPosition]);
+  const updateTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.update, animate, defaultTransition), [transitions == null ? void 0 : transitions.update, animate]);
   const [labelDimensions, setLabelDimensions] = useState({});
   const handleDimensionsChange = useCallback((id, dimensions) => {
     setLabelDimensions(prev => {
@@ -174,13 +194,15 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
       BeaconLabelComponent: BeaconLabelComponent,
       color: labelInfo.color,
       index: index,
+      isIdle: isIdle,
       label: labelInfo.label,
       labelFont: labelFont,
       labelHorizontalOffset: labelHorizontalOffset,
       onDimensionsChange: handleDimensionsChange,
       position: currentPosition,
       positions: allLabelPositions,
-      seriesId: info.seriesId
+      seriesId: info.seriesId,
+      updateTransition: updateTransition
     }, info.seriesId);
   });
 });

package/esm/chart/utils/bar.js

@@ -1,3 +1,46 @@
+const _excluded = ["staggerDelay"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { defaultTransition } from './transition';
+
+/**
+ * A bar-specific transition that extends Transition with stagger support.
+ * When `staggerDelay` is provided, bars will animate with increasing delays
+ * based on their horizontal position (leftmost starts first, rightmost last).
+ *
+ * @example
+ * // Bars stagger in from left to right over 250ms, each animating for 750ms
+ * { type: 'timing', duration: 750, staggerDelay: 250 }
+ */
+
+/**
+ * Strips `staggerDelay` from a transition and computes a positional delay.
+ *
+ * @param transition - The transition config (may include staggerDelay)
+ * @param normalizedX - The bar's normalized x position (0 = left edge, 1 = right edge)
+ * @returns A standard Transition with computed delay
+ */
+export const withStaggerDelayTransition = (transition, normalizedX) => {
+  var _baseTransition$delay;
+  const {
+      staggerDelay
+    } = transition,
+    baseTransition = _objectWithoutPropertiesLoose(transition, _excluded);
+  if (!staggerDelay) return transition;
+  return _extends({}, baseTransition, {
+    delay: ((_baseTransition$delay = baseTransition == null ? void 0 : baseTransition.delay) != null ? _baseTransition$delay : 0) + normalizedX * staggerDelay
+  });
+};
+
+/**
+ * Default bar enter transition. Uses the default spring with a stagger delay
+ * so bars spring into place from left to right.
+ * `{ type: 'spring', stiffness: 900, damping: 120, staggerDelay: 250 }`
+ */
+export const defaultBarEnterTransition = _extends({}, defaultTransition, {
+  staggerDelay: 250
+});
+
 /**
  * Calculates the size adjustment needed for bars when accounting for gaps between them.
  * This function helps determine how much to reduce each bar's width to accommodate

package/esm/chart/utils/path.js

@@ -1,6 +1,14 @@
 import { area as d3Area, curveBumpX, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveNatural, curveStep, curveStepAfter, curveStepBefore, line as d3Line } from 'd3-shape';
 import { projectPoint, projectPoints } from './point';
 import { isCategoricalScale } from './scale';
+/**
+ * Default enter transition for path-based components (Line, Area).
+ * `{ type: 'timing', duration: 500 }`
+ */
+export const defaultPathEnterTransition = {
+  type: 'timing',
+  duration: 500
+};
 /**
  * Get the d3 curve function for a path.
  * See https://d3js.org/d3-shape/curve

package/esm/chart/utils/transition.js

@@ -1,5 +1,7 @@
+const _excluded = ["delay"];
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { useEffect, useMemo, useRef } from 'react';
-import { useAnimatedReaction, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useAnimatedReaction, useSharedValue, withDelay, withSpring, withTiming } from 'react-native-reanimated';
 import { notifyChange, Skia } from '@shopify/react-native-skia';
 import { interpolatePath } from 'd3-interpolate-path';
 
@@ -18,7 +20,8 @@ import { interpolatePath } from 'd3-interpolate-path';
  */
 
 /**
- * Default transition configuration used across all chart components.
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120 }`
  */
 export const defaultTransition = {
   type: 'spring',
@@ -26,6 +29,15 @@ export const defaultTransition = {
   damping: 120
 };
 
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export const instantTransition = {
+  type: 'timing',
+  duration: 0
+};
+
 /**
  * Duration in milliseconds for accessory elements to fade in.
  */
@@ -37,41 +49,23 @@ export const accessoryFadeTransitionDuration = 150;
 export const accessoryFadeTransitionDelay = 350;
 
 /**
- * Custom hook that uses d3-interpolate-path for more robust path interpolation.
- * then use Skia's native interpolation in the worklet.
- *
- * @param progress - Shared value between 0 and 1
- * @param fromPath - Starting path as SVG string
- * @param toPath - Ending path as SVG string
- * @returns Interpolated SkPath as a shared value
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'timing', duration: 150, delay: 350 }`
  */
-export const useD3PathInterpolation = (progress, fromPath, toPath) => {
-  // Pre-compute intermediate paths on JS thread using d3-interpolate-path
-  const {
-    fromSkiaPath,
-    i0,
-    i1,
-    toSkiaPath
-  } = useMemo(() => {
-    var _Skia$Path$MakeFromSV, _Skia$Path$MakeFromSV2, _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4;
-    const pathInterpolator = interpolatePath(fromPath, toPath);
-    const d = 1e-3;
-    return {
-      fromSkiaPath: (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(fromPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make(),
-      i0: (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(pathInterpolator(d))) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make(),
-      i1: (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - d))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make(),
-      toSkiaPath: (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(toPath)) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make()
-    };
-  }, [fromPath, toPath]);
-  const result = useSharedValue(fromSkiaPath);
-  useAnimatedReaction(() => progress.value, t => {
-    'worklet';
+export const defaultAccessoryEnterTransition = {
+  type: 'timing',
+  duration: accessoryFadeTransitionDuration,
+  delay: accessoryFadeTransitionDelay
+};
 
-    var _i1$interpolate;
-    result.value = (_i1$interpolate = i1.interpolate(i0, t)) != null ? _i1$interpolate : toSkiaPath;
-    notifyChange(result);
-  }, [fromSkiaPath, i0, i1, toSkiaPath]);
-  return result;
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export const getTransition = (value, animate, defaultValue) => {
+  if (!animate || value === null) return instantTransition;
+  return value != null ? value : defaultValue;
 };
 
 // Interpolator and useInterpolator are brought over from non exported code in @shopify/react-native-skia
@@ -114,21 +108,32 @@ export const useInterpolator = (factory, value, interpolator, input, output, opt
 export const buildTransition = (targetValue, transition) => {
   'worklet';
 
-  switch (transition.type) {
+  const {
+      delay: delayMs
+    } = transition,
+    config = _objectWithoutPropertiesLoose(transition, _excluded);
+  let animation;
+  switch (config.type) {
     case 'timing':
       {
-        return withTiming(targetValue, transition);
+        animation = withTiming(targetValue, config);
+        break;
       }
     case 'spring':
       {
-        return withSpring(targetValue, transition);
+        animation = withSpring(targetValue, config);
+        break;
       }
     default:
       {
-        // Fallback to default transition config
-        return withSpring(targetValue, defaultTransition);
+        animation = withSpring(targetValue, defaultTransition);
+        break;
       }
   }
+  if (delayMs && delayMs > 0) {
+    return withDelay(delayMs, animation);
+  }
+  return animation;
 };
 
 /**
@@ -136,15 +141,16 @@ export const buildTransition = (targetValue, transition) => {
  *
  * @param currentPath - Current target path to animate to
  * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
- * @param transition - Transition configuration
+ * @param transitions - Transition configuration for enter and update animations
  * @returns Animated SkPath as a shared value
  *
  * @example
  * // Simple path transition
  * const path = usePathTransition({
  *   currentPath: d ?? '',
- *   animate: shouldAnimate,
- *   transition: { type: 'timing', duration: 3000 }
+ *   transitions: {
+ *     update: { type: 'timing', duration: 3000 },
+ *   },
  * });
  *
  * @example
@@ -152,34 +158,63 @@ export const buildTransition = (targetValue, transition) => {
  * const path = usePathTransition({
  *   currentPath: targetPath,
  *   initialPath: baselinePath,
- *   animate: true,
- *   transition: { type: 'timing', duration: 300 }
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 500 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120 },
+ *   },
  * });
  */
 export const usePathTransition = _ref => {
+  var _transitions$update, _Skia$Path$MakeFromSV;
   let {
     currentPath,
     initialPath,
+    transitions,
     transition = defaultTransition
   } = _ref;
-  // Track the previous path - updated in useEffect AFTER render,
-  // so during render it naturally holds the "from" path value
-  const previousPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const updateTransition = (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition;
+  const enterTransition = transitions == null ? void 0 : transitions.enter;
+  const targetPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const isFirstAnimation = useRef(!!initialPath);
+  const interpolatorRef = useRef(null);
   const progress = useSharedValue(0);
-
-  // During render: previousPathRef still has old value, currentPath is new
-  const fromPath = previousPathRef.current;
-  const toPath = currentPath;
+  const initialSkiaPath = (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(initialPath != null ? initialPath : currentPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make();
+  const normalizedStartShared = useSharedValue(initialSkiaPath);
+  const normalizedEndShared = useSharedValue(initialSkiaPath);
+  const fallbackPathShared = useSharedValue(initialSkiaPath);
+  const result = useSharedValue(initialSkiaPath);
   useEffect(() => {
-    const shouldAnimate = previousPathRef.current !== currentPath;
-    if (shouldAnimate) {
-      // Update ref for next path change (happens after this render)
-      previousPathRef.current = currentPath;
-
-      // Animate from old path to new path
+    if (targetPathRef.current !== currentPath) {
+      var _Skia$Path$MakeFromSV2, _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4;
+      let fromPath = targetPathRef.current;
+      if (interpolatorRef.current) {
+        const p = Math.min(Math.max(progress.value, 0), 1);
+        fromPath = interpolatorRef.current(p);
+      }
+      targetPathRef.current = currentPath;
+      const pathInterpolator = interpolatePath(fromPath, currentPath);
+      interpolatorRef.current = pathInterpolator;
+      normalizedStartShared.value = (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(pathInterpolator(0))) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make();
+      normalizedEndShared.value = (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(1))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make();
+      fallbackPathShared.value = (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make();
+      const activeTransition = isFirstAnimation.current && enterTransition !== undefined ? enterTransition : updateTransition;
+      isFirstAnimation.current = false;
       progress.value = 0;
-      progress.value = buildTransition(1, transition);
+      progress.value = buildTransition(1, activeTransition);
     }
-  }, [currentPath, transition, progress]);
-  return useD3PathInterpolation(progress, fromPath, toPath);
+  }, [currentPath, updateTransition, enterTransition, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared]);
+  useAnimatedReaction(() => ({
+    p: progress.value,
+    to: fallbackPathShared.value
+  }), _ref2 => {
+    'worklet';
+
+    var _normalizedEndShared$;
+    let {
+      p
+    } = _ref2;
+    result.value = (_normalizedEndShared$ = normalizedEndShared.value.interpolate(normalizedStartShared.value, p)) != null ? _normalizedEndShared$ : fallbackPathShared.value;
+    notifyChange(result);
+  }, []);
+  return result;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.17",
+  "version": "3.4.0-beta.19",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.41.0",
+    "@coinbase/cds-common": "^8.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.41.0",
+    "@coinbase/cds-mobile": "^8.48.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -57,9 +57,9 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.41.0",
+    "@coinbase/cds-common": "^8.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.41.0",
+    "@coinbase/cds-mobile": "^8.48.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",