@coinbase/cds-mcp-server 8.27.1 → 8.27.3

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.27.3 ((12/5/2025, 01:46 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.27.2 ((12/4/2025, 04:23 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.27.1 ((12/4/2025, 06:51 AM PST))
 
 This is an artificial version bump with no new change.

package/mcp-docs/mobile/components/LineChart.txt

@@ -1600,7 +1600,7 @@ function MonotoneAssetPrice() {
   );
 
   const CustomScrubberBeacon = memo(
-    ({ dataX, dataY, seriesId, isIdle, animate = true }: ScrubberBeaconProps) => {
+    forwardRef(({ dataX, dataY, seriesId, isIdle, animate = true }: ScrubberBeaconProps, ref) => {
       const { getSeries, getXSerializableScale, getYSerializableScale } =
         useCartesianChartContext();
 
@@ -1614,6 +1614,9 @@ function MonotoneAssetPrice() {
       const animatedX = useSharedValue(0);
       const animatedY = useSharedValue(0);
 
+      // Provide a no-op pulse implementation for simple beacons
+      useImperativeHandle(ref, () => ({ pulse: () => {} }), []);
+
       // Calculate the target point position - project data to pixels
       const targetPoint = useDerivedValue(() => {
         if (!xScale || !yScale) return { x: 0, y: 0 };
@@ -1655,7 +1658,7 @@ function MonotoneAssetPrice() {
           <Circle c={animatedPoint} color={theme.color.fg} r={5} strokeWidth={3} style="stroke" />
         </>
       );
-    },
+    }),
   );
 
   return (

package/mcp-docs/mobile/components/Scrubber.txt

@@ -146,67 +146,72 @@ You can use `BeaconComponent` to customize the visual appearance of scrubber bea
 ```jsx
 function OutlineBeacon() {
   // Simple outline beacon with no pulse animation
-  const OutlineBeaconComponent = memo(({ dataX, dataY, seriesId, isIdle, animate = true }: ScrubberBeaconProps) => {
-    const theme = useTheme();
-    const { getSeries, getXSerializableScale, getYSerializableScale } = useCartesianChartContext();
+  const OutlineBeaconComponent = memo(
+    forwardRef(({ dataX, dataY, seriesId, isIdle, animate = true }: ScrubberBeaconProps, ref) => {
+      const theme = useTheme();
+      const { getSeries, getXSerializableScale, getYSerializableScale } = useCartesianChartContext();
+
+      const targetSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
+      const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+      const yScale = useMemo(
+        () => getYSerializableScale(targetSeries?.yAxisId),
+        [getYSerializableScale, targetSeries?.yAxisId],
+      );
 
-    const targetSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
-    const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
-    const yScale = useMemo(
-      () => getYSerializableScale(targetSeries?.yAxisId),
-      [getYSerializableScale, targetSeries?.yAxisId],
-    );
+      const color = useMemo(
+        () => targetSeries?.color ?? theme.color.fgPrimary,
+        [targetSeries?.color, theme.color.fgPrimary],
+      );
 
-    const color = useMemo(
-      () => targetSeries?.color ?? theme.color.fgPrimary,
-      [targetSeries?.color, theme.color.fgPrimary],
-    );
+      const animatedX = useSharedValue(0);
+      const animatedY = useSharedValue(0);
 
-    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;
-        }
+      // Provide a no-op pulse implementation for simple beacons
+      useImperativeHandle(ref, () => ({ pulse: () => {} }), []);
 
-        animatedX.value = buildTransition(current.point.x, defaultTransition);
-        animatedY.value = buildTransition(current.point.y, defaultTransition);
-      },
-      [animate],
-    );
+      // 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]);
 
-    // Create animated point using the animated values
-    const animatedPoint = useDerivedValue(() => {
-      return { x: animatedX.value, y: animatedY.value };
-    }, [animatedX, animatedY]);
+      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, defaultTransition);
+          animatedY.value = buildTransition(current.point.y, defaultTransition);
+        },
+        [animate],
+      );
 
-    return (
-      <>
-        <Circle c={animatedPoint} color={color} r={6} />
-        <Circle c={animatedPoint} color={theme.color.bg} r={3} />
-      </>
-    );
-  });
+      // Create animated point using the animated values
+      const animatedPoint = useDerivedValue(() => {
+        return { x: animatedX.value, y: animatedY.value };
+      }, [animatedX, animatedY]);
+
+      return (
+        <>
+          <Circle c={animatedPoint} color={color} r={6} />
+          <Circle c={animatedPoint} color={theme.color.bg} r={3} />
+        </>
+      );
+    }),
+  );
 
   const dataCount = 14;
   const minDataValue = 0;
@@ -641,15 +646,17 @@ You can use `BeaconComponent` and `BeaconLabelComponent` with the `opacity` prop
 
 ```jsx
 function HiddenScrubberWhenIdle() {
-  const MyScrubberBeacon = memo((props: ScrubberBeaconProps) => {
-    const { scrubberPosition } = useScrubberContext();
-    const beaconOpacity = useDerivedValue(
-      () => (scrubberPosition.value !== undefined ? 1 : 0),
-      [scrubberPosition],
-    );
+  const MyScrubberBeacon = memo(
+    forwardRef((props: ScrubberBeaconProps, ref) => {
+      const { scrubberPosition } = useScrubberContext();
+      const beaconOpacity = useDerivedValue(
+        () => (scrubberPosition.value !== undefined ? 1 : 0),
+        [scrubberPosition],
+      );
 
-    return <DefaultScrubberBeacon {...props} opacity={beaconOpacity} />;
-  });
+      return <DefaultScrubberBeacon ref={ref} {...props} opacity={beaconOpacity} />;
+    }),
+  );
 
   const MyScrubberBeaconLabel = memo((props: ScrubberBeaconLabelProps) => {
     const { scrubberPosition } = useScrubberContext();

package/mcp-docs/web/components/LineChart.txt

@@ -1527,45 +1527,50 @@ function MonotoneAssetPrice() {
     [scrubberPriceFormatter, prices, formatDate],
   );
 
-  const CustomScrubberBeacon = memo(({ dataX, dataY, seriesId, isIdle }: ScrubberBeaconProps) => {
-    const { getSeries, getXScale, getYScale } = useCartesianChartContext();
-    const targetSeries = getSeries(seriesId);
-    const xScale = getXScale();
-    const yScale = getYScale(targetSeries?.yAxisId);
+  const CustomScrubberBeacon = memo(
+    forwardRef(({ dataX, dataY, seriesId, isIdle }: ScrubberBeaconProps, ref) => {
+      const { getSeries, getXScale, getYScale } = useCartesianChartContext();
+      const targetSeries = getSeries(seriesId);
+      const xScale = getXScale();
+      const yScale = getYScale(targetSeries?.yAxisId);
+
+      const pixelCoordinate = useMemo(() => {
+        if (!xScale || !yScale) return;
+        return projectPoint({ x: dataX, y: dataY, xScale, yScale });
+      }, [dataX, dataY, xScale, yScale]);
 
-    const pixelCoordinate = useMemo(() => {
-      if (!xScale || !yScale) return;
-      return projectPoint({ x: dataX, y: dataY, xScale, yScale });
-    }, [dataX, dataY, xScale, yScale]);
+      // Provide a no-op pulse implementation for simple beacons
+      useImperativeHandle(ref, () => ({ pulse: () => {} }), []);
 
-    if (!pixelCoordinate) return;
+      if (!pixelCoordinate) return;
+
+      if (isIdle) {
+        return (
+          <m.circle
+            animate={{ cx: pixelCoordinate.x, cy: pixelCoordinate.y }}
+            cx={pixelCoordinate.x}
+            cy={pixelCoordinate.y}
+            fill="var(--color-bg)"
+            r={5}
+            stroke="var(--color-fg)"
+            strokeWidth={3}
+            transition={defaultTransition}
+          />
+        );
+      }
 
-    if (isIdle) {
       return (
-        <m.circle
-          animate={{ cx: pixelCoordinate.x, cy: pixelCoordinate.y }}
+        <circle
           cx={pixelCoordinate.x}
           cy={pixelCoordinate.y}
           fill="var(--color-bg)"
           r={5}
           stroke="var(--color-fg)"
           strokeWidth={3}
-          transition={defaultTransition}
         />
       );
-    }
-
-    return (
-      <circle
-        cx={pixelCoordinate.x}
-        cy={pixelCoordinate.y}
-        fill="var(--color-bg)"
-        r={5}
-        stroke="var(--color-fg)"
-        strokeWidth={3}
-      />
-    );
-  });
+    }),
+  );
 
   return (
     <LineChart

package/mcp-docs/web/components/Point.txt

@@ -63,14 +63,7 @@ function MyChart() {
     >
       <YAxis showGrid position="left" tickLabelFormatter={(value) => `$${value}`} />
       {prices.map((price, index) => (
-        <Point
-          seriesId="prices"
-          key={index}
-          dataX={index}
-          dataY={price}
-          label={`$${price}`}
-          labelPosition="right"
-        />
+        <Point key={index} dataX={index} dataY={price} label={`$${price}`} labelPosition="right" />
       ))}
     </CartesianChart>
   );

package/mcp-docs/web/components/Scrubber.txt

@@ -166,49 +166,54 @@ You can use `BeaconComponent` to customize the visual appearance of scrubber bea
 ```jsx live
 function OutlineBeacon() {
   // Simple outline beacon with no pulse animation
-  const OutlineBeaconComponent = memo(({ dataX, dataY, seriesId, color, isIdle }: ScrubberBeaconProps) => {
-    const { getSeries, getXScale, getYScale } = useCartesianChartContext();
-    const targetSeries = getSeries(seriesId);
-    const xScale = getXScale();
-    const yScale = getYScale(targetSeries?.yAxisId);
-
-    const pixelCoordinate = useMemo(() => {
-      if (!xScale || !yScale) return;
-      return projectPoint({ x: dataX, y: dataY, xScale, yScale });
-    }, [dataX, dataY, xScale, yScale]);
-
-    if (!pixelCoordinate) return;
+  const OutlineBeaconComponent = memo(
+    forwardRef(({ dataX, dataY, seriesId, color, isIdle }: ScrubberBeaconProps, ref) => {
+      const { getSeries, getXScale, getYScale } = useCartesianChartContext();
+      const targetSeries = getSeries(seriesId);
+      const xScale = getXScale();
+      const yScale = getYScale(targetSeries?.yAxisId);
+
+      const pixelCoordinate = useMemo(() => {
+        if (!xScale || !yScale) return;
+        return projectPoint({ x: dataX, y: dataY, xScale, yScale });
+      }, [dataX, dataY, xScale, yScale]);
+
+      // Provide a no-op pulse implementation for simple beacons
+      useImperativeHandle(ref, () => ({ pulse: () => {} }), []);
+
+      if (!pixelCoordinate) return;
+
+      if (isIdle) {
+        return (
+          <>
+            <m.circle
+              animate={{ cx: pixelCoordinate.x, cy: pixelCoordinate.y }}
+              cx={pixelCoordinate.x}
+              cy={pixelCoordinate.y}
+              transition={defaultTransition}
+              r={6}
+              fill={color}
+            />
+            <m.circle
+              animate={{ cx: pixelCoordinate.x, cy: pixelCoordinate.y }}
+              cx={pixelCoordinate.x}
+              cy={pixelCoordinate.y}
+              transition={defaultTransition}
+              r={3}
+              fill="var(--color-bg)"
+            />
+          </>
+        );
+      }
 
-    if (isIdle) {
       return (
         <>
-          <m.circle
-            animate={{ cx: pixelCoordinate.x, cy: pixelCoordinate.y }}
-            cx={pixelCoordinate.x}
-            cy={pixelCoordinate.y}
-            transition={defaultTransition}
-            r={6}
-            fill={color}
-          />
-          <m.circle
-            animate={{ cx: pixelCoordinate.x, cy: pixelCoordinate.y }}
-            cx={pixelCoordinate.x}
-            cy={pixelCoordinate.y}
-            transition={defaultTransition}
-            r={3}
-            fill="var(--color-bg)"
-          />
+          <circle cx={pixelCoordinate.x} cy={pixelCoordinate.y} r={6} fill={color} />
+          <circle cx={pixelCoordinate.x} cy={pixelCoordinate.y} r={3} fill="var(--color-bg)" />
         </>
       );
-    }
-
-    return (
-      <>
-        <circle cx={pixelCoordinate.x} cy={pixelCoordinate.y} r={6} fill={color} />
-        <circle cx={pixelCoordinate.x} cy={pixelCoordinate.y} r={3} fill="var(--color-bg)" />
-      </>
-    );
-  });
+    }),
+  );
 
   const dataCount = 14;
   const minDataValue = 0;
@@ -541,12 +546,14 @@ You can use `BeaconComponent` and `BeaconLabelComponent` with the `opacity` prop
 
 ```jsx live
 function HiddenScrubberWhenIdle() {
-  const MyScrubberBeacon = memo((props: ScrubberBeaconProps) => {
-    const { scrubberPosition } = useScrubberContext();
-    const isScrubbing = scrubberPosition !== undefined;
+  const MyScrubberBeacon = memo(
+    forwardRef((props: ScrubberBeaconProps, ref) => {
+      const { scrubberPosition } = useScrubberContext();
+      const isScrubbing = scrubberPosition !== undefined;
 
-    return <DefaultScrubberBeacon {...props} opacity={isScrubbing ? 1 : 0} />;
-  });
+      return <DefaultScrubberBeacon ref={ref} {...props} opacity={isScrubbing ? 1 : 0} />;
+    }),
+  );
 
   const MyScrubberBeaconLabel = memo((props: ScrubberBeaconLabelProps) => {
     const { scrubberPosition } = useScrubberContext();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.27.1",
+  "version": "8.27.3",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",