@coinbase/cds-mcp-server 8.62.1 → 8.66.1

package/CHANGELOG.md

@@ -8,6 +8,46 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.66.1 ((4/27/2026, 12:59 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.66.0 ((4/16/2026, 01:57 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.65.0 ((4/16/2026, 10:06 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.64.5 ((4/16/2026, 06:50 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.64.4 ((4/10/2026, 01:20 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.64.3 ((4/8/2026, 05:54 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.64.2 ((4/8/2026, 11:26 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.64.1 ((4/7/2026, 12:46 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.64.0 ((4/2/2026, 07:51 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.63.0 ((4/1/2026, 03:43 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.62.1 ((4/1/2026, 12:25 PM PST))
 
 This is an artificial version bump with no new change.

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

@@ -1,5 +1,7 @@
 # Accordion
 
+**📖 Live documentation:** https://cds.coinbase.com/components/layout/Accordion/?platform=mobile
+
 A collapsible component for displaying auxiliary content.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # AccordionItem
 
+**📖 Live documentation:** https://cds.coinbase.com/components/layout/AccordionItem/?platform=mobile
+
 An individual collapsible item within an Accordion.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Alert
 
+**📖 Live documentation:** https://cds.coinbase.com/components/overlay/Alert/?platform=mobile
+
 A dialog that communicates critical information and blocks user interaction.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # AreaChart
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/AreaChart/?platform=mobile
+
 A chart component that displays data as filled areas beneath lines. Ideal for showing cumulative values, stacked data, or emphasizing volume over time.
 
 ## Import
@@ -10,7 +12,7 @@ import { AreaChart } from '@coinbase/cds-mobile-visualization'
 
 ## Examples
 
-AreaChart is a cartesian chart variant that allows for easy visualization of stacked data.
+AreaChart is a wrapper for [CartesianChart](/components/charts/CartesianChart) that has some unique features over [LineChart](/components/charts/LineChart), such as the ability to stack areas on top of each other and a default value-axis minimum that follows the baseline (`0` when baseline is not set). Charts are built using `@shopify/react-native-skia`.
 
 ### Basic Example
 
@@ -79,7 +81,7 @@ function StackingExample() {
             3520, 3900,
           ],
           color: theme.color.fgPositive,
-          LineComponent: DottedLine,
+          LineComponent: (props) => <DottedLine {...props} dashIntervals={[6, 6]} />,
         },
       ]}
       AreaComponent={(props) => <DottedArea {...props} peakOpacity={0.4} baselineOpacity={0.4} />}
@@ -91,7 +93,7 @@ function StackingExample() {
 
 ### Negative Values
 
-When an area chart contains negative values, the baseline automatically adjusts to zero instead of the bottom of the chart. The area fills from the data line to the zero baseline, properly showing both positive and negative regions.
+AreaChart uses the value-axis baseline as the default minimum when `domain.min` is not set (baseline defaults to `0`). If your data crosses below that baseline, the domain expands to include those values so both positive and negative regions render correctly.
 
 ```jsx
 <AreaChart
@@ -143,264 +145,104 @@ You can have different area styles for each series.
 />
 ```
 
-### Animations
-
-You can configure chart transitions using the `transitions` prop.
-
-```jsx
-<AreaChart
-  {...props}
-  transitions={{
-    enter: { type: 'spring', stiffness: 700, damping: 80 },
-    update: { type: 'spring', stiffness: 700, damping: 20 },
-  }}
-/>
-```
-
-Also, you can toggle animations by setting `animate` to `true` or `false`.
-
-```jsx
-<AreaChart {...props} animate={false} />
-```
-
-### Gradients
+### Composed Examples
 
-You can use the `gradient` prop on `series` to enable gradients.
+#### Custom Baseline
 
-Each stop requires an `offset`, which is based on the data within the x/y scale and `color`, with an optional `opacity` (defaults to 1).
+You can combine a custom baseline with a scrubber label that shows both price and date.
 
-Values in between stops will be interpolated smoothly.
-
-```jsx
-function ContinuousGradient() {
+```tsx
+function CustomBaseline() {
   const theme = useTheme();
-  const spectrumColors = [
-    'blue',
-    'green',
-    'orange',
-    'yellow',
-    'gray',
-    'indigo',
-    'pink',
-    'purple',
-    'red',
-    'teal',
-    'chartreuse',
-  ];
-  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
-
-  const [currentSpectrumColor, setCurrentSpectrumColor] = useState('pink');
-
-  return (
-    <VStack gap={2}>
-      <HStack flexWrap="wrap" gap={1} justifyContent="flex-end">
-        {spectrumColors.map((color) => (
-          <Pressable
-            key={color}
-            accessibilityLabel={`Select ${color}`}
-            height={16}
-            onPress={() => setCurrentSpectrumColor(color)}
-            style={{
-              backgroundColor: `rgb(${theme.spectrum[`${color}20`]})`,
-              borderColor: `rgb(${theme.spectrum[`${color}50`]})`,
-              borderWidth: 2,
-              borderRadius: 1000,
-            }}
-            width={16}
-          />
-        ))}
-      </HStack>
-      <AreaChart
-        enableScrubbing
-        height={250}
-        series={[
-          {
-            id: 'prices',
-            data: data,
-            gradient: {
-              stops: ({ min, max }) => [
-                { offset: min, color: `rgb(${theme.spectrum[`${currentSpectrumColor}80`]})` },
-                { offset: max, color: `rgb(${theme.spectrum[`${currentSpectrumColor}20`]})` },
-              ],
-            },
-          },
-        ]}
-        showYAxis
-        yAxis={{
-          showGrid: true,
-        }}
-      >
-        <Scrubber />
-      </AreaChart>
-    </VStack>
+  const candles = [...btcCandles].reverse().slice(0, 180);
+  const prices = candles.map((candle) => parseFloat(candle.close));
+  const dates = candles.map((candle) => new Date(parseInt(candle.start, 10) * 1000));
+
+  const startingPrice = prices[0];
+
+  const formatPrice = useCallback((price: number) => {
+    return `$${price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}`;
+  }, []);
+
+  const formatPriceInThousands = useCallback((price: number) => {
+    return `$${(price / 1000).toLocaleString('en-US', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    })}k`;
+  }, []);
+
+  const formatDate = useCallback((date: Date) => {
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  }, []);
+
+  const formatLabel = useCallback(
+    (dataIndex: number) => `${formatPrice(prices[dataIndex])} ${formatDate(dates[dataIndex])}`,
+    [dates, formatDate, formatPrice, prices],
   );
-}
-```
-
-#### Discrete
 
-You can set multiple stops at the same offset to create a discrete gradient.
+  const PriceLabel = memo((props: ReferenceLineLabelComponentProps) => (
+    <DefaultReferenceLineLabel
+      {...props}
+      background={theme.color.bgSecondary}
+      borderRadius={12.5}
+      color={theme.color.fg}
+      dx={12}
+      font="label1"
+      horizontalAlignment="left"
+      inset={{ top: 4, bottom: 4, left: 8, right: 8 }}
+    />
+  ));
 
-```jsx
-function DiscreteGradient() {
-  const theme = useTheme();
-  const spectrumColors = [
-    'blue',
-    'green',
-    'orange',
-    'yellow',
-    'gray',
-    'indigo',
-    'pink',
-    'purple',
-    'red',
-    'teal',
-    'chartreuse',
-  ];
-  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
-
-  const [currentSpectrumColor, setCurrentSpectrumColor] = useState('pink');
+  const chartAccessibilityLabel = `Bitcoin area chart with custom baseline. Current price: ${formatPrice(
+    prices[prices.length - 1],
+  )}. Swipe to navigate.`;
 
-  return (
-    <VStack gap={2}>
-      <HStack flexWrap="wrap" gap={1} justifyContent="flex-end">
-        {spectrumColors.map((color) => (
-          <Pressable
-            key={color}
-            accessibilityLabel={`Select ${color}`}
-            height={16}
-            onPress={() => setCurrentSpectrumColor(color)}
-            style={{
-              backgroundColor: `rgb(${theme.spectrum[`${color}20`]})`,
-              borderColor: `rgb(${theme.spectrum[`${color}50`]})`,
-              borderWidth: 2,
-              borderRadius: 1000,
-            }}
-            width={16}
-          />
-        ))}
-      </HStack>
-      <AreaChart
-        enableScrubbing
-        height={250}
-        series={[
-          {
-            id: 'prices',
-            data: data,
-            gradient: {
-              stops: ({ min, max }) => [
-                { offset: min, color: `rgb(${theme.spectrum[`${currentSpectrumColor}80`]})` },
-                {
-                  offset: min + (max - min) / 3,
-                  color: `rgb(${theme.spectrum[`${currentSpectrumColor}80`]})`,
-                },
-                {
-                  offset: min + (max - min) / 3,
-                  color: `rgb(${theme.spectrum[`${currentSpectrumColor}50`]})`,
-                },
-                {
-                  offset: min + ((max - min) / 3) * 2,
-                  color: `rgb(${theme.spectrum[`${currentSpectrumColor}50`]})`,
-                },
-                {
-                  offset: min + ((max - min) / 3) * 2,
-                  color: `rgb(${theme.spectrum[`${currentSpectrumColor}20`]})`,
-                },
-                { offset: max, color: `rgb(${theme.spectrum[`${currentSpectrumColor}20`]})` },
-              ],
-            },
-          },
-        ]}
-        showLines
-        strokeWidth={4}
-        showYAxis
-        yAxis={{
-          showGrid: true,
-        }}
-        fillOpacity={0.5}
-      >
-        <Scrubber />
-      </AreaChart>
-    </VStack>
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) => `${formatPrice(prices[index])} ${formatDate(dates[index])}`,
+    [dates, formatDate, formatPrice, prices],
   );
-}
-```
-
-#### Axes
-
-By default, gradients will be applied to the y-axis. You can apply a gradient to the x-axis by setting `axis` to `x` in the gradient definition.
-
-```jsx
-function XAxisGradient() {
-  const theme = useTheme();
-  const spectrumColors = [
-    'blue',
-    'green',
-    'orange',
-    'yellow',
-    'gray',
-    'indigo',
-    'pink',
-    'purple',
-    'red',
-    'teal',
-    'chartreuse',
-  ];
-  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
-
-  const [currentSpectrumColor, setCurrentSpectrumColor] = useState('pink');
 
   return (
-    <VStack gap={2}>
-      <HStack flexWrap="wrap" gap={1} justifyContent="flex-end">
-        {spectrumColors.map((color) => (
-          <Pressable
-            key={color}
-            accessibilityLabel={`Select ${color}`}
-            height={16}
-            onPress={() => setCurrentSpectrumColor(color)}
-            style={{
-              backgroundColor: `rgb(${theme.spectrum[`${color}20`]})`,
-              borderColor: `rgb(${theme.spectrum[`${color}50`]})`,
-              borderWidth: 2,
-              borderRadius: 1000,
-            }}
-            width={16}
-          />
-        ))}
-      </HStack>
-      <AreaChart
-        enableScrubbing
-        height={250}
-        series={[
-          {
-            id: 'prices',
-            data: data,
-            gradient: {
-              axis: 'x',
-              stops: ({ min, max }) => [
-                {
-                  offset: min,
-                  color: `rgb(${theme.spectrum[`${currentSpectrumColor}80`]})`,
-                  opacity: 0,
-                },
-                {
-                  offset: max,
-                  color: `rgb(${theme.spectrum[`${currentSpectrumColor}20`]})`,
-                  opacity: 1,
-                },
-              ],
-            },
+    <AreaChart
+      enableScrubbing
+      showLines
+      showYAxis
+      accessibilityLabel={chartAccessibilityLabel}
+      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
+      fillOpacity={0.5}
+      height={300}
+      series={[
+        {
+          id: 'prices',
+          data: prices,
+          gradient: {
+            stops: [
+              { offset: startingPrice, color: theme.color.fgNegative },
+              { offset: startingPrice, color: theme.color.fgPositive },
+            ],
           },
-        ]}
-        showYAxis
-        yAxis={{
-          showGrid: true,
-        }}
-      >
-        <Scrubber />
-      </AreaChart>
-    </VStack>
+        },
+      ]}
+      yAxis={{
+        baseline: startingPrice,
+        showGrid: true,
+        tickLabelFormatter: formatPriceInThousands,
+        domain: { min: 70000, max: 120000 },
+        ticks: [80000, 100000, 120000],
+      }}
+    >
+      <Scrubber label={formatLabel} labelElevated />
+      <ReferenceLine
+        LabelComponent={PriceLabel}
+        LineComponent={(props) => <DottedLine {...props} dashIntervals={[0, 16]} strokeWidth={3} />}
+        dataY={startingPrice}
+        stroke={theme.color.fg}
+        label={formatPrice(startingPrice)}
+      />
+    </AreaChart>
   );
 }
 ```
@@ -525,7 +367,7 @@ function XAxisGradient() {
 | `top` | `string \| number` | No | `-` | - |
 | `transform` | `string \| (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleX: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
 | `transition` | `{ type: timing; } & TimingConfig & { delay?: number \| undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: number \| undefined; damping?: number \| undefined; duration?: undefined; dampingRatio?: undefined; clamp?: undefined; } & { delay?: number \| undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: undefined; damping?: undefined; duration?: number \| undefined; dampingRatio?: number \| undefined; clamp?: { min?: number \| undefined; max?: number \| undefined; } \| undefined; } & { delay?: number \| undefined; }` | No | `-` | Transition for updates. |
-| `transitions` | `{ enter?: Transition \| null; update?: Transition \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'timing', duration: 500 }, update: { type: 'spring', stiffness: 900, damping: 120 } }}` | Transition configuration for enter and update animations. |
+| `transitions` | `{ enter?: Transition \| null; enterOpacity?: Transition \| null \| undefined; update?: Transition \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'timing', duration: 500 }, enterOpacity: undefined, update: { type: 'spring', stiffness: 900, damping: 120 } }}` | Transition configuration for enter and update animations. |
 | `type` | `solid \| dotted \| gradient` | No | `'solid'` | The type of area to render. |
 | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
 | `width` | `string \| number` | No | `-` | - |

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

@@ -1,5 +1,7 @@
 # Avatar
 
+**📖 Live documentation:** https://cds.coinbase.com/components/media/Avatar/?platform=mobile
+
 Avatar is a visual representation of a user, company, or entity.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # AvatarButton
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/AvatarButton/?platform=mobile
+
 A pressable Avatar.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Banner
 
+**📖 Live documentation:** https://cds.coinbase.com/components/feedback/Banner/?platform=mobile
+
 Displays important messages and actions to users.
 
 ## Import
@@ -149,7 +151,7 @@ Avoid setting `borderRadius` for `styleVariant="global"` so the vertical status
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `startIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | Name of icon to be shown in the banner |
+| `startIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretCollapse \| caretDown \| caretExpand \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | Name of icon to be shown in the banner |
 | `variant` | `warning \| promotional \| informational \| error` | Yes | `-` | Sets the variant of the banner - which is responsible for foreground and background color assignment |
 | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |

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

@@ -1,5 +1,7 @@
 # BarChart
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/BarChart/?platform=mobile
+
 A bar chart component for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.
 
 ## Import
@@ -10,6 +12,8 @@ import { BarChart } from '@coinbase/cds-mobile-visualization'
 
 ## Examples
 
+BarChart is a wrapper for [CartesianChart](/components/charts/CartesianChart) for comparing discrete categories, with a default value-axis minimum that follows the baseline (`0` when baseline is not set). Charts are built using `@shopify/react-native-skia`.
+
 ### Basics
 
 Bar charts are a useful component for comparing discrete categories of data.
@@ -1356,7 +1360,7 @@ function BuyVsSellExample() {
 | `top` | `string \| number` | No | `-` | - |
 | `transform` | `string \| (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleX: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
 | `transition` | `{ type: timing; } & TimingConfig & { delay?: number \| undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: number \| undefined; damping?: number \| undefined; duration?: undefined; dampingRatio?: undefined; clamp?: undefined; } & { delay?: number \| undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: undefined; damping?: undefined; duration?: number \| undefined; dampingRatio?: number \| undefined; clamp?: { min?: number \| undefined; max?: number \| undefined; } \| undefined; } & { delay?: number \| undefined; }` | No | `-` | Transition for updates. |
-| `transitions` | `{ enter?: BarTransition \| null; update?: BarTransition \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'spring', stiffness: 900, damping: 120, staggerDelay: 250 }, update: { type: 'spring', stiffness: 900, damping: 120 } }}` | Transition configuration for enter and update animations. |
+| `transitions` | `{ enter?: BarTransition \| null; enterOpacity?: BarTransition \| null \| undefined; update?: BarTransition \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'spring', stiffness: 900, damping: 120, staggerDelay: 250 }, enterOpacity: { type: 'timing', duration: 200 }, update: { type: 'spring', stiffness: 900, damping: 120 } }}` | Transition configuration for enter and update animations. |
 | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
 | `width` | `string \| number` | No | `-` | - |
 | `xAxis` | `(Partial<CartesianAxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |

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

@@ -1,5 +1,7 @@
 # Box
 
+**📖 Live documentation:** https://cds.coinbase.com/components/layout/Box/?platform=mobile
+
 A generic container, like a supercharged View.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # BrowserBar
 
+**📖 Live documentation:** https://cds.coinbase.com/components/navigation/BrowserBar/
+
 A navigation bar designed for browser-like interfaces, featuring slots for start, end, and central content. It provides a structured layout for controls and information within a browser context.
 
 ## Import