@coinbase/cds-mobile-visualization 3.4.0-beta.2 → 3.4.0-beta.20

package/esm/chart/line/__stories__/ReferenceLine.stories.js

@@ -1,16 +1,68 @@
+const _excluded = ["accentColor", "yellowColor"];
+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 { memo, useCallback, useMemo } from 'react';
+import { useDerivedValue, withTiming } from 'react-native-reanimated';
+import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { useTheme } from '@coinbase/cds-mobile';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useCartesianChartContext } from '../../ChartProvider';
+import { Scrubber } from '../../scrubber';
+import { getPointOnSerializableScale, useScrubberContext } from '../../utils';
+import { DefaultReferenceLineLabel } from '../DefaultReferenceLineLabel';
+import { DottedLine } from '../DottedLine';
 import { LineChart } from '../LineChart';
 import { ReferenceLine } from '../ReferenceLine';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LiquidationLabelMobile = /*#__PURE__*/memo(_ref => {
+  let {
+      accentColor,
+      yellowColor
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
+    background: accentColor,
+    borderRadius: 100,
+    color: "rgb(" + yellowColor + ")",
+    horizontalAlignment: "left",
+    inset: {
+      top: 4,
+      bottom: 4,
+      left: 8,
+      right: 8
+    }
+  }));
+});
 const ReferenceLineStories = () => {
   const theme = useTheme();
+  const liquidationLabelComponent = useCallback(props => /*#__PURE__*/_jsx(LiquidationLabelMobile, _extends({}, props, {
+    accentColor: theme.color.accentSubtleYellow,
+    yellowColor: theme.spectrum.yellow70
+  })), [theme.color.accentSubtleYellow, theme.spectrum.yellow70]);
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic",
+      title: "Simple Reference Line",
+      children: /*#__PURE__*/_jsx(LineChart, {
+        showArea: true,
+        height: 250,
+        series: [{
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+          color: theme.color.fgPositive
+        }],
+        children: /*#__PURE__*/_jsx(ReferenceLine, {
+          LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+            dashIntervals: [0, 16],
+            strokeWidth: 3
+          })),
+          dataY: 10,
+          stroke: theme.color.fg
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Labels",
       children: /*#__PURE__*/_jsxs(LineChart, {
         showArea: true,
-        curve: "monotone",
         height: 250,
         inset: 0,
         series: [{
@@ -20,26 +72,46 @@ const ReferenceLineStories = () => {
         children: [/*#__PURE__*/_jsx(ReferenceLine, {
           dataX: 4,
           label: "Vertical Reference Line",
-          labelProps: {
-            horizontalAlignment: 'left',
-            dx: 6,
-            inset: 0
-          }
+          labelHorizontalAlignment: "left"
         }), /*#__PURE__*/_jsx(ReferenceLine, {
           dataY: 70,
           label: "Horizontal Reference Line",
-          labelProps: {
-            verticalAlignment: 'bottom',
-            dy: -6,
-            horizontalAlignment: 'right',
-            inset: 0
-          }
+          labelHorizontalAlignment: "right",
+          labelVerticalAlignment: "bottom"
         })]
       })
     }), /*#__PURE__*/_jsx(Example, {
-      title: "With Custom Label",
+      title: "Label Customization",
+      children: /*#__PURE__*/_jsxs(LineChart, {
+        showArea: true,
+        height: 250,
+        series: [{
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+        }],
+        children: [/*#__PURE__*/_jsx(ReferenceLine, {
+          dataY: 75,
+          label: "Top Right",
+          labelDx: -8,
+          labelDy: -8,
+          labelFont: "label1",
+          labelHorizontalAlignment: "right",
+          labelPosition: "right",
+          labelVerticalAlignment: "bottom"
+        }), /*#__PURE__*/_jsx(ReferenceLine, {
+          dataX: 7,
+          label: "Bottom Left",
+          labelDx: 8,
+          labelDy: 8,
+          labelFont: "label1",
+          labelHorizontalAlignment: "left",
+          labelPosition: "top",
+          labelVerticalAlignment: "top"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Custom Label Component",
       children: /*#__PURE__*/_jsx(LineChart, {
-        curve: "monotone",
         height: 250,
         inset: {
           right: 32,
@@ -52,26 +124,103 @@ const ReferenceLineStories = () => {
           data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
         }],
         children: /*#__PURE__*/_jsx(ReferenceLine, {
+          LabelComponent: liquidationLabelComponent,
           dataY: 25,
           label: "Liquidation",
           labelPosition: "left",
-          labelProps: {
-            dx: 4,
-            borderRadius: 100,
-            inset: {
-              top: 4,
-              bottom: 4,
-              left: 8,
-              right: 8
-            },
-            horizontalAlignment: 'left',
-            color: "rgb(" + theme.spectrum.yellow70 + ")",
-            background: theme.color.accentSubtleYellow
-          },
           stroke: theme.color.bgWarning
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Start Price Reference Line",
+      children: /*#__PURE__*/_jsx(StartPriceReferenceLine, {})
     })]
   });
 };
+const FADE_ZONE = 128;
+const StartPriceLabel = /*#__PURE__*/memo(props => {
+  const theme = useTheme();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXSerializableScale,
+    drawingArea
+  } = useCartesianChartContext();
+  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const opacity = useDerivedValue(() => {
+    if (scrubberPosition.value === undefined) return withTiming(0, {
+      duration: 250
+    });
+    if (!xScale) return withTiming(1, {
+      duration: 250
+    });
+    const scrubX = getPointOnSerializableScale(scrubberPosition.value, xScale);
+    const rightEdge = drawingArea.x + drawingArea.width;
+    const target = rightEdge - scrubX >= FADE_ZONE ? 1 : 0;
+    return withTiming(target, {
+      duration: 250
+    });
+  }, [scrubberPosition, xScale, drawingArea]);
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
+    background: theme.color.bgSecondary,
+    borderRadius: 12.5,
+    color: theme.color.fg,
+    font: "label1",
+    inset: {
+      top: 4,
+      bottom: 4,
+      left: 8,
+      right: 8
+    },
+    opacity: opacity
+  }));
+});
+function StartPriceReferenceLine() {
+  const theme = useTheme();
+  const hourData = useMemo(() => sparklineInteractiveData.hour, []);
+  const startPrice = hourData[0].value;
+  const endPrice = hourData[hourData.length - 1].value;
+  const isPositive = endPrice >= startPrice;
+  const seriesColor = isPositive ? theme.color.fgPositive : theme.color.fgNegative;
+  return /*#__PURE__*/_jsxs(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    areaType: "dotted",
+    height: 300,
+    inset: 0,
+    series: [{
+      id: 'hourly-prices',
+      data: hourData.map(d => d.value),
+      color: seriesColor
+    }],
+    xAxis: {
+      range: _ref2 => {
+        let {
+          min,
+          max
+        } = _ref2;
+        return {
+          min,
+          max: max - 24
+        };
+      }
+    },
+    children: [/*#__PURE__*/_jsx(Scrubber, {}), /*#__PURE__*/_jsx(ReferenceLine, {
+      LabelComponent: StartPriceLabel,
+      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+        dashIntervals: [0, 16],
+        strokeWidth: 3
+      })),
+      dataY: startPrice,
+      label: startPrice.toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      }),
+      labelDx: -12,
+      labelHorizontalAlignment: "right",
+      stroke: theme.color.fgMuted
+    })]
+  });
+}
 export default ReferenceLineStories;

package/esm/chart/line/index.js

@@ -1,6 +1,6 @@
 // codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './DefaultReferenceLineLabel';
 export * from './DottedLine';
-export * from './GradientLine';
 export * from './Line';
 export * from './LineChart';
 export * from './ReferenceLine';

package/esm/chart/point/DefaultPointLabel.js

@@ -0,0 +1,39 @@
+const _excluded = ["x", "y", "position", "offset", "children"];
+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 { memo, useMemo } from 'react';
+import { ChartText } from '../text';
+import { getAlignmentFromPosition, getLabelCoordinates } from '../utils/point';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DefaultPointLabel is the default label component for point labels.
+ * It renders text at the specified position relative to the point.
+ */
+export const DefaultPointLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      x,
+      y,
+      position = 'center',
+      offset,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    horizontalAlignment,
+    verticalAlignment
+  } = useMemo(() => getAlignmentFromPosition(position), [position]);
+  const labelCoordinates = useMemo(() => {
+    if (offset === undefined) return {
+      x,
+      y
+    };
+    return getLabelCoordinates(x, y, position, offset);
+  }, [x, y, position, offset]);
+  return /*#__PURE__*/_jsx(ChartText, _extends({}, props, {
+    horizontalAlignment: horizontalAlignment,
+    verticalAlignment: verticalAlignment,
+    x: labelCoordinates.x,
+    y: labelCoordinates.y,
+    children: children
+  }));
+});

package/esm/chart/point/Point.js

@@ -0,0 +1,186 @@
+import { memo, useEffect, useMemo } from 'react';
+import { cancelAnimation, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+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, defaultAccessoryEnterTransition, defaultTransition, getTransition } from '../utils/transition';
+import { DefaultPointLabel } from './DefaultPointLabel';
+
+/**
+ * Props for point label components.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const Point = /*#__PURE__*/memo(_ref => {
+  let {
+    dataX,
+    dataY,
+    yAxisId,
+    fill: fillProp,
+    radius = 5,
+    opacity,
+    stroke: strokeProp,
+    strokeWidth = 2,
+    label,
+    LabelComponent = DefaultPointLabel,
+    labelPosition = 'center',
+    labelOffset,
+    labelFont,
+    transitions,
+    transition,
+    animate: animateProp
+  } = _ref;
+  const theme = useTheme();
+  const stroke = strokeProp != null ? strokeProp : theme.color.bg;
+  const fill = fillProp != null ? fillProp : theme.color.fgPrimary;
+  const {
+    getXScale,
+    getYScale,
+    animate: animationEnabled,
+    drawingArea
+  } = useCartesianChartContext();
+  const animate = animateProp != null ? animateProp : animationEnabled;
+  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(() => {
+    if (!xScale || !yScale) {
+      return undefined;
+    }
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [xScale, yScale, dataX, dataY]);
+  const previousPixelCoordinate = usePreviousValue(pixelCoordinate);
+  const previousFill = usePreviousValue(fill);
+
+  // Animated values for position
+  const animatedX = useSharedValue(0);
+  const animatedY = useSharedValue(0);
+  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(() => {
+    if (!pixelCoordinate) {
+      return;
+    }
+    if (shouldAnimate && previousPixelCoordinate) {
+      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, updateTransition]);
+
+  // Update color when fill changes
+  useEffect(() => {
+    if (shouldAnimate && previousFill && previousFill !== fill) {
+      colorProgress.value = 0;
+      colorProgress.value = buildTransition(1, updateTransition);
+    } else {
+      cancelAnimation(colorProgress);
+      colorProgress.value = 1;
+    }
+  }, [fill, shouldAnimate, previousFill, colorProgress, updateTransition]);
+
+  // Create animated point for circles
+  const animatedPoint = useDerivedValue(() => {
+    return {
+      x: animatedX.value,
+      y: animatedY.value
+    };
+  }, [animatedX, animatedY]);
+
+  // Interpolate between previous and current fill color
+  const animatedFillColor = useDerivedValue(() => {
+    if (!previousFill || previousFill === fill) {
+      return fill;
+    }
+    return interpolateColors(colorProgress.value, [0, 1], [previousFill, fill]);
+  }, [colorProgress, previousFill, fill]);
+  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 ? baseOpacity * enterOpacity.value : 0;
+  }, [isWithinDrawingArea, opacity, enterOpacity]);
+  const offset = useMemo(() => labelOffset != null ? labelOffset : radius * 2, [labelOffset, radius]);
+  if (!pixelCoordinate) {
+    return null;
+  }
+  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, {
+      children: [/*#__PURE__*/_jsxs(Group, {
+        opacity: staticOpacity,
+        children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
+          c: {
+            x: pixelCoordinate.x,
+            y: pixelCoordinate.y
+          },
+          color: stroke,
+          r: radius + strokeWidth / 2
+        }), /*#__PURE__*/_jsx(Circle, {
+          c: {
+            x: pixelCoordinate.x,
+            y: pixelCoordinate.y
+          },
+          color: fill,
+          r: radius - strokeWidth / 2
+        })]
+      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        dataX: dataX,
+        dataY: dataY,
+        fill: fill,
+        font: labelFont,
+        offset: offset,
+        position: labelPosition,
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y,
+        children: label
+      })]
+    });
+  }
+  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,
+      fill: fill,
+      font: labelFont,
+      offset: offset,
+      position: labelPosition,
+      x: pixelCoordinate.x,
+      y: pixelCoordinate.y,
+      children: label
+    })]
+  });
+});

package/esm/chart/point/index.js

@@ -0,0 +1,2 @@
+export * from './DefaultPointLabel';
+export * from './Point';

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -0,0 +1,180 @@
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo } from 'react';
+import { cancelAnimation, Easing, useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
+import { useTheme } from '@coinbase/cds-mobile';
+import { Circle, Group } from '@shopify/react-native-skia';
+import { useCartesianChartContext } from '../ChartProvider';
+import { unwrapAnimatedValue } from '../utils';
+import { projectPointWithSerializableScale } from '../utils/point';
+import { buildTransition, defaultTransition, getTransition } from '../utils/transition';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultRadius = 5;
+const defaultStrokeWidth = 2;
+const pulseOpacityStart = 0.5;
+const pulseOpacityEnd = 0;
+const pulseRadiusStartMultiplier = 2;
+const pulseRadiusEndMultiplier = 3;
+const defaultPulseTransition = {
+  type: 'timing',
+  duration: 1600,
+  easing: Easing.bezier(0.0, 0.0, 0.0, 1.0)
+};
+const defaultPulseRepeatDelay = 400;
+export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesId,
+    color: colorProp,
+    dataX,
+    dataY,
+    isIdle,
+    idlePulse,
+    animate = true,
+    transitions,
+    opacity: opacityProp = 1,
+    radius = defaultRadius,
+    stroke,
+    strokeWidth = defaultStrokeWidth
+  } = _ref;
+  const theme = useTheme();
+  const {
+    getSeries,
+    getXSerializableScale,
+    getYSerializableScale,
+    drawingArea
+  } = useCartesianChartContext();
+  const targetSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
+  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const yScale = useMemo(() => getYSerializableScale(targetSeries == null ? void 0 : targetSeries.yAxisId), [getYSerializableScale, targetSeries == null ? void 0 : targetSeries.yAxisId]);
+  const color = useMemo(() => {
+    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(() => 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;
+  }, [transitions == null ? void 0 : transitions.pulse]);
+  const pulseRepeatDelay = useMemo(() => {
+    var _transitions$pulseRep;
+    return (_transitions$pulseRep = transitions == null ? void 0 : transitions.pulseRepeatDelay) != null ? _transitions$pulseRep : defaultPulseRepeatDelay;
+  }, [transitions == null ? void 0 : transitions.pulseRepeatDelay]);
+  const pulseRadiusStart = radius * pulseRadiusStartMultiplier;
+  const pulseRadiusEnd = radius * pulseRadiusEndMultiplier;
+  const pulseOpacity = useSharedValue(0);
+  const pulseRadius = useSharedValue(pulseRadiusStart);
+
+  // Convert idlePulse prop to SharedValue so useAnimatedReaction can detect changes.
+  // In the new React Native architecture, regular JS props are captured by value in worklets
+  // and won't update when the prop changes.
+  const idlePulseShared = useSharedValue(idlePulse != null ? idlePulse : false);
+  useEffect(() => {
+    idlePulseShared.value = idlePulse != null ? idlePulse : false;
+  }, [idlePulse, idlePulseShared]);
+  const animatedX = useSharedValue(0);
+  const animatedY = useSharedValue(0);
+
+  // Calculate the target point position - project data to pixels
+  const targetPoint = useDerivedValue(() => {
+    if (!xScale || !yScale) return {
+      x: 0,
+      y: 0
+    };
+    return projectPointWithSerializableScale({
+      x: unwrapAnimatedValue(dataX),
+      y: unwrapAnimatedValue(dataY),
+      xScale,
+      yScale
+    });
+  }, [dataX, dataY, xScale, yScale]);
+  useAnimatedReaction(() => {
+    return {
+      point: targetPoint.value,
+      isIdle: unwrapAnimatedValue(isIdle)
+    };
+  }, (current, previous) => {
+    // When animation is disabled, on initial render, or when we are starting,
+    // continuing, or finishing scrubbing we should immediately transition
+    if (!animate || previous === null || !previous.isIdle || !current.isIdle) {
+      animatedX.value = current.point.x;
+      animatedY.value = current.point.y;
+      return;
+    }
+    animatedX.value = buildTransition(current.point.x, updateTransition);
+    animatedY.value = buildTransition(current.point.y, updateTransition);
+  }, [animate, updateTransition]);
+
+  // Create animated point using the animated values
+  const animatedPoint = useDerivedValue(() => {
+    return {
+      x: animatedX.value,
+      y: animatedY.value
+    };
+  }, [animatedX, animatedY]);
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      // Only trigger manual pulse when idlePulse is not enabled
+      if (!idlePulseShared.value) {
+        cancelAnimation(pulseOpacity);
+        cancelAnimation(pulseRadius);
+
+        // Manual pulse without delay
+        pulseOpacity.value = pulseOpacityStart;
+        pulseRadius.value = pulseRadiusStart;
+        pulseOpacity.value = buildTransition(pulseOpacityEnd, pulseTransition);
+        pulseRadius.value = buildTransition(pulseRadiusEnd, pulseTransition);
+      }
+    }
+  }), [idlePulseShared, pulseOpacity, pulseRadius, pulseTransition, pulseRadiusStart, pulseRadiusEnd]);
+
+  // Watch idlePulse changes and control continuous pulse
+  useAnimatedReaction(() => idlePulseShared.value, current => {
+    if (current) {
+      // Start continuous pulse when idlePulse is enabled
+      pulseOpacity.value = pulseOpacityStart;
+      pulseRadius.value = pulseRadiusStart;
+      pulseOpacity.value = withRepeat(withSequence(buildTransition(pulseOpacityEnd, pulseTransition), withDelay(pulseRepeatDelay, withTiming(pulseOpacityStart, {
+        duration: 0
+      }))), -1,
+      // infinite loop
+      false);
+      pulseRadius.value = withRepeat(withSequence(buildTransition(pulseRadiusEnd, pulseTransition), withDelay(pulseRepeatDelay, withTiming(pulseRadiusStart, {
+        duration: 0
+      }))), -1,
+      // infinite loop
+      false);
+    } else {
+      // Stop pulse when idlePulse is disabled
+      cancelAnimation(pulseOpacity);
+      cancelAnimation(pulseRadius);
+      pulseOpacity.value = pulseOpacityEnd;
+      pulseRadius.value = pulseRadiusStart;
+    }
+  }, [pulseTransition, pulseRepeatDelay, pulseRadiusStart, pulseRadiusEnd]);
+  const pulseVisibility = useDerivedValue(() => {
+    // Never pulse when scrubbing
+    if (!unwrapAnimatedValue(isIdle)) return 0;
+    return pulseOpacity.value;
+  }, [isIdle, pulseOpacity]);
+  const beaconOpacity = useDerivedValue(() => {
+    const point = targetPoint.value;
+    const isWithinDrawingArea = point.x >= drawingArea.x && point.x <= drawingArea.x + drawingArea.width && point.y >= drawingArea.y && point.y <= drawingArea.y + drawingArea.height;
+    const userOpacity = unwrapAnimatedValue(opacityProp);
+    return isWithinDrawingArea ? userOpacity : 0;
+  }, [targetPoint, drawingArea, opacityProp]);
+  return /*#__PURE__*/_jsxs(Group, {
+    opacity: beaconOpacity,
+    children: [/*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: color,
+      opacity: pulseVisibility,
+      r: pulseRadius
+    }), /*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: stroke != null ? stroke : theme.color.bg,
+      r: radius + strokeWidth / 2
+    }), /*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: color,
+      r: radius - strokeWidth / 2
+    })]
+  });
+}));