@coinbase/cds-mcp-server 8.38.7 → 8.39.0

package/CHANGELOG.md

@@ -8,6 +8,10 @@ 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.

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/web/components/Carousel.txt

@@ -635,6 +635,96 @@ 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 live
+function LoopingSnapCarousel() {
+  function SquareAssetCard({ imageUrl, name }) {
+    return (
+      <ContainedAssetCard
+        description={
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
+            ↗6.37%
+          </Text>
+        }
+        header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        subtitle={name}
+        title="$0.87"
+      />
+    );
+  }
+  return (
+    <Box marginX={-3}>
+      <Carousel
+        loop
+        title="Infinite Scroll"
+        styles={{
+          root: { paddingInline: 'var(--space-3)' },
+          carousel: { gap: 'var(--space-1)' },
+        }}
+      >
+        {Object.values(assets).map((asset) => (
+          <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
+            <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+          </CarouselItem>
+        ))}
+      </Carousel>
+    </Box>
+  );
+}
+```
+
+#### Looping with Free Drag
+
+When looping with free drag, the carousel scrolls continuously without snapping, creating a smooth endless scrolling experience.
+
+```jsx live
+function LoopingFreeDragCarousel() {
+  function SquareAssetCard({ imageUrl, name }) {
+    return (
+      <ContainedAssetCard
+        description={
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
+            ↗6.37%
+          </Text>
+        }
+        header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        subtitle={name}
+        title="$0.87"
+      />
+    );
+  }
+  return (
+    <Box marginX={-3}>
+      <Carousel
+        loop
+        drag="free"
+        snapMode="item"
+        title="Free Scroll Loop"
+        styles={{
+          root: { paddingInline: 'var(--space-3)' },
+          carousel: { gap: 'var(--space-1)' },
+        }}
+      >
+        {Object.values(assets).map((asset) => (
+          <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
+            <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+          </CarouselItem>
+        ))}
+      </Carousel>
+    </Box>
+  );
+}
+```
+
 ### Accessibility
 
 The carousel is accessible by default.
@@ -1533,6 +1623,7 @@ You can use the `onChangePage`, `onDragStart`, and `onDragEnd` callbacks to list
 | `key` | `Key \| null` | No | `-` | - |
 | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
 | `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
+| `loop` | `boolean` | No | `-` | Enables infinite looping. When true, the carousel will seamlessly loop from the last item back to the first. |
 | `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |

package/package.json

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