@coinbase/cds-mcp-server 8.47.1 → 8.47.3

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

@@ -14,10 +14,6 @@ import { ReferenceLine } from '@coinbase/cds-mobile-visualization'
 
 ReferenceLine can be used to add important details to a chart, such as a reference price or date. You can create horizontal lines using `dataY` or vertical lines using `dataX`.
 
-#### Simple Reference Line
-
-A minimal reference line without labels, useful for marking key thresholds:
-
 ```jsx
 function SimpleReferenceLineExample() {
   const theme = useTheme();
@@ -200,75 +196,165 @@ function BoundsExample() {
 }
 ```
 
-#### Custom Component
+#### Custom Components
 
 You can adjust the style of the label using a custom `LabelComponent`.
 
 ```jsx
-function LabelStyleExample() {
-  const theme = useTheme();
-
-  const LiquidationLabel = useMemo(
-    () =>
-      memo((props) => (
-        <DefaultReferenceLineLabel
-          {...props}
-          background={theme.color.accentSubtleYellow}
-          borderRadius={4}
-          color={`rgb(${theme.color.accentSubtleYellow})`}
-          dx={12}
-          font="label1"
-          horizontalAlignment="left"
-          inset={{ top: 4, bottom: 4, left: 8, right: 8 }}
+function CustomLabelExample() {
+  const StartPriceLabel = memo((props) => {
+    const theme = useTheme();
+    return (
+      <DefaultReferenceLineLabel
+        {...props}
+        background={theme.color.bgSecondary}
+        borderRadius={12.5}
+        color={theme.color.fg}
+        font="label1"
+        inset={{ top: 4, bottom: 4, left: 8, right: 8 }}
+      />
+    );
+  });
+
+  function Example() {
+    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;
+
+    const formattedStartPrice = useMemo(
+      () =>
+        startPrice.toLocaleString('en-US', {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        }),
+      [startPrice],
+    );
+
+    return (
+      <LineChart
+        enableScrubbing
+        showArea
+        areaType="dotted"
+        height={300}
+        series={[
+          {
+            id: 'hourly-prices',
+            data: hourData.map((d) => d.value),
+            color: seriesColor,
+          },
+        ]}
+        xAxis={{
+          range: ({ min, max }) => ({ min, max: max - 24 }),
+        }}
+      >
+        <Scrubber />
+        <ReferenceLine
+          LabelComponent={StartPriceLabel}
+          LineComponent={(props) => (
+            <DottedLine {...props} dashIntervals={[0, 16]} strokeWidth={3} />
+          )}
+          dataY={startPrice}
+          label={formattedStartPrice}
+          labelDx={-12}
+          labelHorizontalAlignment="right"
+          stroke={theme.color.fgMuted}
         />
-      )),
-    [theme.color.accentSubtleYellow],
-  );
+      </LineChart>
+    );
+  }
 
-  const PriceLabel = useMemo(
-    () =>
-      memo((props) => (
-        <DefaultReferenceLineLabel
-          {...props}
-          background={theme.color.bg}
-          borderRadius={4}
-          color={`rgb(${theme.color.yellow70})`}
-          dx={-12}
-          font="label1"
-          horizontalAlignment="right"
-          inset={{ top: 2, bottom: 2, left: 4, right: 4 }}
-        />
-      )),
-    [theme.color.bg, theme.color.yellow70],
-  );
+  return <Example />;
+}
+```
 
-  return (
-    <LineChart
-      height={150}
-      inset={{ right: 4 }}
-      series={[
-        {
-          id: 'prices',
-          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
-        },
-      ]}
-    >
-      <ReferenceLine
-        LabelComponent={LiquidationLabel}
-        dataY={25}
-        label="Liquidation"
-        labelPosition="left"
-        stroke={theme.color.bgWarning}
-      />
-      <ReferenceLine
-        LabelComponent={PriceLabel}
-        dataY={25}
-        label="$25"
-        labelPosition="right"
-        stroke="transparent"
+You can also optionally hide the label based on user scrubbing.
+
+```jsx
+function StartPriceReferenceLine() {
+  const StartPriceLabel = memo((props) => {
+    const theme = useTheme();
+    const { scrubberPosition } = useScrubberContext();
+    const { getXSerializableScale, drawingArea } = useCartesianChartContext();
+    const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+
+    const fadeZone = 128;
+
+    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 >= fadeZone ? 1 : 0;
+      return withTiming(target, { duration: 250 });
+    }, [scrubberPosition, xScale, drawingArea]);
+
+    return (
+      <DefaultReferenceLineLabel
+        {...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}
       />
-    </LineChart>
-  );
+    );
+  });
+
+  function Example() {
+    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;
+
+    const formattedStartPrice = useMemo(
+      () =>
+        startPrice.toLocaleString('en-US', {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        }),
+      [startPrice],
+    );
+
+    return (
+      <LineChart
+        enableScrubbing
+        showArea
+        areaType="dotted"
+        height={300}
+        series={[
+          {
+            id: 'hourly-prices',
+            data: hourData.map((d) => d.value),
+            color: seriesColor,
+          },
+        ]}
+        xAxis={{
+          range: ({ min, max }) => ({ min, max: max - 24 }),
+        }}
+      >
+        <Scrubber />
+        <ReferenceLine
+          LabelComponent={StartPriceLabel}
+          LineComponent={(props) => (
+            <DottedLine {...props} dashIntervals={[0, 16]} strokeWidth={3} />
+          )}
+          dataY={startPrice}
+          label={formattedStartPrice}
+          labelDx={-12}
+          labelHorizontalAlignment="right"
+          stroke={theme.color.fgMuted}
+        />
+      </LineChart>
+    );
+  }
+
+  return <Example />;
 }
 ```
 

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

@@ -60,7 +60,7 @@ All series will be scrubbed by default. You can set `seriesIds` to show only spe
 Setting `label` on a series will display a label to the side of the scrubber beacon, and
 setting `label` on Scrubber displays a label above the scrubber line.
 
-```jsx
+```tsx
 <LineChart
   enableScrubbing
   height={150}
@@ -179,7 +179,7 @@ function CustomStrokeColor() {
 
 For more advanced customizations, you can pass a custom component to `BeaconComponent`.
 
-```jsx
+```tsx
 function OutlineBeacon() {
   const theme = useTheme();
 
@@ -282,7 +282,7 @@ function OutlineBeacon() {
 
 You can use `BeaconLabelComponent` to customize the labels for each scrubber beacon.
 
-```jsx
+```tsx
 function CustomBeaconLabel() {
   const theme = useTheme();
   // This custom component label shows the percentage value of the data at the scrubber position.
@@ -365,7 +365,7 @@ function CustomBeaconLabel() {
 
 You can use `hideBeaconLabels` to hide beacon labels, while still being able to provide a label for a series.
 
-```jsx
+```tsx
 <LineChart
   enableScrubbing
   legend
@@ -387,17 +387,13 @@ You can use `hideBeaconLabels` to hide beacon labels, while still being able to
   showArea
   inset={{ top: 60 }}
 >
-  <Scrubber
-    hideBeaconLabels
-    label={(dataIndex: number) => `Day ${dataIndex + 1}`}
-    labelElevated
-  />
+  <Scrubber hideBeaconLabels label={(dataIndex: number) => `Day ${dataIndex + 1}`} labelElevated />
 </LineChart>
 ```
 
 Using `labelElevated` will elevate the Scrubber's reference line label with a shadow.
 
-```jsx
+```tsx
 <LineChart
   enableScrubbing
   height={200}
@@ -416,7 +412,7 @@ Using `labelElevated` will elevate the Scrubber's reference line label with a sh
 
 You can use `LabelComponent` to customize this label even further.
 
-```jsx
+```tsx
 function CustomLabelComponent() {
   const CustomLabelComponent = memo((props: ScrubberLabelProps) => {
     const theme = useTheme();
@@ -462,7 +458,7 @@ function CustomLabelComponent() {
 
 You can create custom multi-line centered labels using Skia's `ParagraphBuilder` with `TextAlign.Center`. Set `paragraphAlignment={TextAlign.Center}` on your custom label component to ensure proper positioning.
 
-```jsx
+```tsx
 function TwoLineCenteredLabel() {
   const theme = useTheme();
   const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
@@ -547,7 +543,7 @@ function TwoLineCenteredLabel() {
 
 You can use `labelFont` to customize the font of the scrubber line label and `beaconLabelFont` to customize the font of the beacon labels.
 
-```jsx
+```tsx
 function CustomLabelFonts() {
   const theme = useTheme();
 
@@ -658,7 +654,7 @@ You can use `LineComponent` to customize Scrubber's line. In this case, as a use
 
 You can use `BeaconComponent` and `BeaconLabelComponent` with the `opacity` prop to hide scrubber beacons and labels when idle.
 
-```jsx
+```tsx
 function HiddenScrubberWhenIdle() {
   const MyScrubberBeacon = memo(
     forwardRef((props: ScrubberBeaconProps, ref) => {
@@ -720,7 +716,7 @@ By default, Scrubber will show an overlay to de-emphasize future data. You can h
 
 You can use `BeaconLabelComponent` to display a label with the percentage value of the data at the scrubber position.
 
-```jsx
+```tsx
 function PercentageBeaconLabels() {
   const theme = useTheme();
 
@@ -777,10 +773,7 @@ function PercentageBeaconLabels() {
         if (seriesData !== undefined) {
           const dataAtPosition = seriesData[dataIndex.value];
 
-          const builder = Skia.ParagraphBuilder.Make(
-            { textAlign: TextAlign.Left },
-            fontProvider,
-          );
+          const builder = Skia.ParagraphBuilder.Make({ textAlign: TextAlign.Left }, fontProvider);
 
           builder.pushStyle(boldStyle);
           builder.addText(`${dataAtPosition}%`);

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

@@ -16,7 +16,7 @@ The mobile version of `Select` is quite different from web; where on mobile, `Se
 
 On mobile, all `SelectOption`s must be wrapped in a `Menu`. Think of it as a controlled `Select` on web, where you pass it the `value` and `onChange` handler.
 
-```jsx
+```tsx
 const SelectMobile = () => {
   const [isTrayVisible, { toggleOff: handleClose, toggleOn: handleOpenTray }] = useToggler(false);
   const [value, setValue] = useState();

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

@@ -1445,7 +1445,7 @@ Select
 
 #### Example
 
-```jsx
+```tsx
 function CustomComponentExamples() {
   const exampleOptions = [
     { value: null, label: 'Remove selection' },

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

@@ -20,7 +20,7 @@ import { SelectOption } from '@coinbase/cds-mobile/controls/SelectOption'
 
 #### Default Composition
 
-```jsx
+```tsx
 const SelectMobile = () => {
   const [isTrayVisible, { toggleOff: handleClose, toggleOn: handleOpenTray }] = useToggler(false);
   const [value, setValue] = useState();

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

@@ -242,7 +242,7 @@ You can fully customize the background and handle by providing your own componen
   alt="Slide button with custom green/red background and handle"
 />
 
-```jsx
+```tsx
 function Example() {
   const [checked, setChecked] = useState(false);