@coinbase/cds-mcp-server 8.38.6 → 8.39.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.39.0 ((1/27/2026, 11:17 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.38.7 ((1/26/2026, 10:28 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.38.6 (1/23/2026 PST)
 
 #### 🐞 Fixes

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

@@ -201,6 +201,9 @@ You can have different area styles for each series.
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
 | `left` | `string \| number` | No | `-` | - |
+| `legend` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
+| `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
+| `legendPosition` | `top \| bottom \| left \| right` | No | `'bottom'` | Position of the legend relative to the chart. |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
 | `lineType` | `solid \| dotted` | No | `'solid'` | The type of line to render. |
 | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |

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

@@ -606,88 +606,70 @@ You can also set the `barMinSize` prop to control the minimum size for individua
 
 #### Multiple Y Axes
 
-You can render bars from separate y axes in one `BarPlot`, however they aren't able to be stack.
+You can render bars from separate y axes in one `BarPlot`, however they aren't able to be stacked.
 
 ```jsx
 function MultipleYAxes() {
   const theme = useTheme();
 
   return (
-    <VStack gap={2}>
-      <CartesianChart
-        height={150}
-        inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
-        series={[
-          {
-            id: 'revenue',
-            data: [455, 520, 380, 455, 285, 235],
-            yAxisId: 'revenue',
-            color: theme.color.accentBoldYellow,
-          },
-          {
-            id: 'profitMargin',
-            data: [23, 20, 16, 38, 12, 9],
-            yAxisId: 'profitMargin',
-            color: theme.color.fgPositive,
-          },
-        ]}
-        xAxis={{
-          data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
-          scaleType: 'band',
-        }}
-        yAxis={[
-          {
-            id: 'revenue',
-            domain: { min: 0 },
-          },
-          {
-            id: 'profitMargin',
-            domain: { min: 0, max: 100 },
-          },
-        ]}
-      >
-        <XAxis showLine showTickMarks />
-        <YAxis
-          showGrid
-          showLine
-          showTickMarks
-          axisId="revenue"
-          position="left"
-          requestedTickCount={5}
-          width={60}
-          tickLabelFormatter={(value) => `$${value}k`}
-        />
-        <YAxis
-          showLine
-          showTickMarks
-          axisId="profitMargin"
-          position="right"
-          requestedTickCount={5}
-          tickLabelFormatter={(value) => `${value}%`}
-        />
-        <BarPlot />
-      </CartesianChart>
-      <HStack justifyContent="center" gap={2}>
-        <Box alignItems="center" gap={0.5}>
-          <Box
-            borderRadius={1000}
-            width={10}
-            height={10}
-            style={{ background: theme.color.accentBoldYellow }}
-          />
-          <Text font="label2">Revenue ($)</Text>
-        </Box>
-        <Box alignItems="center" gap={0.5}>
-          <Box
-            borderRadius={1000}
-            width={10}
-            height={10}
-            style={{ background: theme.color.fgPositive }}
-          />
-          <Text font="label2">Profit Margin (%)</Text>
-        </Box>
-      </HStack>
-    </VStack>
+    <CartesianChart
+      legend
+      height={150}
+      inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+      legendPosition="bottom"
+      series={[
+        {
+          id: 'revenue',
+          label: 'Revenue ($)',
+          data: [455, 520, 380, 455, 285, 235],
+          yAxisId: 'revenue',
+          color: theme.color.accentBoldYellow,
+        },
+        {
+          id: 'profitMargin',
+          label: 'Profit Margin (%)',
+          data: [23, 20, 16, 38, 12, 9],
+          yAxisId: 'profitMargin',
+          color: theme.color.fgPositive,
+        },
+      ]}
+      xAxis={{
+        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+        scaleType: 'band',
+      }}
+      yAxis={[
+        {
+          id: 'revenue',
+          domain: { min: 0 },
+        },
+        {
+          id: 'profitMargin',
+          domain: { min: 0, max: 100 },
+        },
+      ]}
+    >
+      <XAxis showLine showTickMarks />
+      <YAxis
+        showGrid
+        showLine
+        showTickMarks
+        axisId="revenue"
+        position="left"
+        requestedTickCount={5}
+        width={60}
+        tickLabelFormatter={(value) => `$${value}k`}
+      />
+      <YAxis
+        showLine
+        showTickMarks
+        axisId="profitMargin"
+        position="right"
+        requestedTickCount={5}
+        tickLabelFormatter={(value) => `${value}%`}
+      />
+      <BarPlot />
+    </CartesianChart>
   );
 }
 ```
@@ -750,6 +732,9 @@ function MultipleYAxes() {
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
 | `left` | `string \| number` | No | `-` | - |
+| `legend` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
+| `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
+| `legendPosition` | `top \| bottom \| left \| right` | No | `'bottom'` | Position of the legend relative to the chart. |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
 | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
 | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
@@ -790,7 +775,7 @@ function MultipleYAxes() {
 | `right` | `string \| number` | No | `-` | - |
 | `roundBaseline` | `boolean` | No | `-` | Whether to round the baseline of a bar (where the value is 0). |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
-| `series` | `Series[]` | No | `-` | Configuration objects that define how to visualize the data. |
+| `series` | `BarSeries[]` | No | `-` | Configuration objects that define how to visualize the data. Each series can optionally define its own BarComponent. |
 | `showXAxis` | `boolean` | No | `-` | Whether to show the X axis. |
 | `showYAxis` | `boolean` | No | `-` | Whether to show the Y axis. |
 | `stackGap` | `number` | No | `-` | Gap between bars in the stack. |

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

@@ -381,6 +381,78 @@ function OverflowCarousel() {
 }
 ```
 
+### Looping
+
+Enable infinite looping with the `loop` prop. You must have at least two pages of content to enable looping.
+
+Looping works with both `snap` and `free` drag modes, and with both `page` and `item` snap modes.
+
+#### Looping with Snap
+
+When looping is enabled with snap drag mode, the carousel will snap to the nearest item or page (depending on `snapMode`) after releasing, allowing infinite scrolling in either direction.
+
+```jsx
+function LoopingSnapCarousel() {
+  const theme = useTheme();
+  const windowWidth = Dimensions.get('window').width;
+
+  const horizontalPadding = theme.space[2];
+  const carouselWidth = windowWidth - horizontalPadding * 2;
+  const horizontalGap = theme.space[1];
+
+  return (
+    <Carousel
+      loop
+      title="Infinite Scroll"
+      styles={{
+        root: { paddingHorizontal: horizontalPadding },
+        carousel: { gap: horizontalGap },
+      }}
+    >
+      {Object.values(assets).map((asset) => (
+        <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
+          <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+        </CarouselItem>
+      ))}
+    </Carousel>
+  );
+}
+```
+
+#### Looping with Free Drag
+
+When looping with free drag, the carousel scrolls continuously without snapping, creating a smooth endless scrolling experience.
+
+```jsx
+function LoopingFreeDragCarousel() {
+  const theme = useTheme();
+  const windowWidth = Dimensions.get('window').width;
+
+  const horizontalPadding = theme.space[2];
+  const carouselWidth = windowWidth - horizontalPadding * 2;
+  const horizontalGap = theme.space[1];
+
+  return (
+    <Carousel
+      loop
+      drag="free"
+      snapMode="item"
+      title="Free Scroll Loop"
+      styles={{
+        root: { paddingHorizontal: horizontalPadding },
+        carousel: { gap: horizontalGap },
+      }}
+    >
+      {Object.values(assets).map((asset) => (
+        <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
+          <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+        </CarouselItem>
+      ))}
+    </Carousel>
+  );
+}
+```
+
 ### Accessibility
 
 The carousel is accessible by default.
@@ -1034,6 +1106,7 @@ You can use the `onChangePage`, `onDragStart`, and `onDragEnd` callbacks to list
 | `key` | `Key \| null` | No | `-` | - |
 | `left` | `string \| number` | No | `-` | - |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
+| `loop` | `boolean` | No | `-` | Enables infinite looping. When true, the carousel will seamlessly loop from the last item back to the first. |
 | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
 | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
 | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |

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

@@ -646,7 +646,7 @@ function EarningsHistory() {
     [actualEPS, estimatedEPS],
   );
 
-  const LegendItem = memo(({ opacity = 1, label }: { opacity?: number, label: string }) => {
+  const LegendEntry = memo(({ opacity = 1, label }: { opacity?: number, label: string }) => {
     return (
       <Box alignItems="center" gap={0.5}>
         <LegendDot opacity={opacity} />
@@ -687,8 +687,8 @@ function EarningsHistory() {
         <CirclePlot seriesId="actualEPS" />
       </CartesianChart>
       <HStack justifyContent="flex-end" gap={2}>
-        <LegendItem opacity={0.5} label="Estimated EPS" />
-        <LegendItem label="Actual EPS" />
+        <LegendEntry opacity={0.5} label="Estimated EPS" />
+        <LegendEntry label="Actual EPS" />
       </HStack>
     </VStack>
   );
@@ -798,6 +798,9 @@ function TradingTrends() {
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
 | `left` | `string \| number` | No | `-` | - |
+| `legend` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
+| `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
+| `legendPosition` | `top \| bottom \| left \| right` | No | `'bottom'` | Position of the legend relative to the chart. |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
 | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
 | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |

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

@@ -221,6 +221,7 @@ function MultipleCheckboxes() {
 | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
 | `controlColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `bgPrimary bgPrimary` | Sets the checked/active color of the control. |
 | `disabled` | `boolean` | No | `-` | Disable user interaction. |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | Sets the elevation/drop shadow of the control. |
 | `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
 | `onChange` | `((value: T, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
 | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |

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

@@ -122,7 +122,7 @@ function CustomCheckboxCellExample() {
 | `disableDebounce` | `boolean` | No | `-` | React Native is historically trash at debouncing touch events. This can cause a lot of unwanted behavior such as double navigations where we push a screen onto the stack 2 times. Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and the accidental double-tap. |
 | `disabled` | `boolean` | No | `-` | Disable user interaction. Is the element currently disabled. |
 | `display` | `flex \| none` | No | `-` | - |
-| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | Sets the elevation/drop shadow of the control. Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
 | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
 | `flexBasis` | `string \| number` | No | `-` | - |
 | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |