@coinbase/cds-mcp-server 8.21.0 → 8.21.1

package/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.21.1 ((11/13/2025, 12:21 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.21.0 ((11/12/2025, 11:45 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -50,15 +50,24 @@ function DefaultModal() {
   const onClickConsole = () => void console.log;
 
   const SelectComponent = () => {
-    const [value, setValue] = useState();
-    const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
+    const [value, setValue] = useState('1');
+    const options = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' },
+      { value: '4', label: 'Option 4' },
+      { value: '5', label: 'Option 5' },
+      { value: '6', label: 'Option 6' },
+    ];
 
     return (
-      <Select value={value} placeholder="Choose something..." onChange={setValue}>
-        {options.map((option) => (
-          <SelectOption value={option} key={option} title={option} description="Description" />
-        ))}
-      </Select>
+      <Select
+        label="Select an option"
+        value={value}
+        onChange={setValue}
+        options={options}
+        placeholder="Choose something..."
+      />
     );
   };
 
@@ -115,6 +124,10 @@ function DefaultModal() {
 }
 ```
 
+### Advanced layouts
+
+For more complex layouts, including three-column structures with custom headers and footers, see the [FullscreenModalLayout](/components/overlay/FullscreenModalLayout#three-column-layout-with-fullscreenmodalheader-and-pagefooter) component examples. `FullscreenModalLayout` provides more flexibility for building custom modal layouts while `FullscreenModal` offers a simpler API for common two-column use cases.
+
 ## Props
 
 | Prop | Type | Required | Default | Description |

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

@@ -10,20 +10,6 @@ import { FullscreenModalLayout } from '@coinbase/cds-web/overlays/modal/Fullscre
 
 ## Examples
 
-import {
-  Box,
-  Text,
-  PortalProvider,
-  Button,
-  FullscreenModalLayout,
-  VStack,
-  HStack,
-  LogoMark,
-  IconButton,
-} from '@coinbase/cds-web';
-import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
-import React, { useCallback, useRef, useState } from 'react';
-
 ### Basic usage
 
 This component is primarily used internally by the `Modal` component to provide the animated layout for fullscreen modals. It wraps your modal content and manages the overlay, animations, and focus trapping.
@@ -65,102 +51,314 @@ function Example() {
       <Button onClick={toggleOn} ref={triggerRef}>
         Open Fullscreen Modal
       </Button>
-      {visible && (
-        <FullscreenModalLayout
-          visible={visible}
-          onRequestClose={toggleOff}
-          accessibilityLabel="Example Fullscreen Modal"
-        >
-          <VStack background="bg" height="100%" width="100%">
-            {headerContent}
-            {mainContent}
-          </VStack>
-        </FullscreenModalLayout>
-      )}
+
+      <FullscreenModalLayout
+        visible={visible}
+        onRequestClose={toggleOff}
+        accessibilityLabel="Example Fullscreen Modal"
+      >
+        <VStack background="bg" height="100%" width="100%">
+          {headerContent}
+          {mainContent}
+        </VStack>
+      </FullscreenModalLayout>
     </PortalProvider>
   );
 }
 ```
 
-### Example composing content
+### Three-column layout with FullscreenModalHeader and PageFooter
 
-This example showcases how `FullscreenModalLayout` can be used to structure content across multiple distinct areas. It demonstrates the arrangement of a custom header, a top panel, a central area with left, center, and right panels, and a bottom panel.
+This example demonstrates a three-column layout structure with a FullscreenModalHeader at the top and PageFooter at the bottom, matching the tertiary + secondary + primary column pattern. The layout includes vertical dividers between columns and demonstrates how to structure complex modal content.
 
 ```tsx live
-function AllPanelsExample() {
+function ThreeColumnExample() {
   const [visible, setVisible] = useState(false);
   const triggerRef = useRef(null);
 
   const toggleOn = useCallback(() => setVisible(true), []);
   const toggleOff = useCallback(() => setVisible(false), []);
 
-  const headerContent = (
-    <HStack borderedBottom alignItems="center" paddingX={4} paddingY={2}>
-      <Box paddingEnd={3} width={80}>
-        <LogoMark size={32} />
-      </Box>
-      <Box flexGrow={1}>
-        <Text as="h1" display="block" font="title1">
-          Modal - All Panels
-        </Text>
-      </Box>
-      <Box>
-        <IconButton transparent aria-label="Close modal" name="close" onClick={toggleOff} />
-      </Box>
-    </HStack>
-  );
+  const listCellProps = {
+    spacingVariant: 'compact' as const,
+    outerSpacing: { paddingX: 0, paddingY: 0 },
+    innerSpacing: { paddingX: 0, paddingY: 0 },
+  };
 
-  const mainModalContent = (
-    <VStack flexGrow={1} overflow="hidden">
-      <VStack background="bgAlternate" padding={2}>
-        <Text as="p" color="fg" display="block" font="body">
-          Top Panel (e.g., Breadcrumbs, Progress)
-        </Text>
-      </VStack>
-      <HStack flexGrow={1} overflow="hidden">
-        <VStack background="bgAlternate" height="100%" overflow="auto" padding={4} width={360}>
-          <Text as="p" display="block" font="body">
-            Left Panel
-          </Text>
-        </VStack>
-        <VStack flexGrow={1} overflow="auto" padding={4}>
-          <Text as="p" display="block" font="body">
-            Center Panel
-            <br />
-            {loremIpsum}
-          </Text>
-        </VStack>
-        <VStack background="bgAlternate" height="100%" overflow="auto" padding={4} width={360}>
-          <Text as="p" display="block" font="body">
-            Right Panel
-          </Text>
-        </VStack>
-      </HStack>
-      <HStack borderedTop background="bgAlternate" padding={2}>
-        <Text as="p" display="block" font="body">
-          Bottom Panel (e.g., Footer, Actions)
-        </Text>
-      </HStack>
-    </VStack>
-  );
+  const smallButtonProps = {
+    size: 'small' as const,
+    compact: true,
+  };
 
   return (
     <PortalProvider>
-      <Button ref={triggerRef} onClick={toggleOn}>
-        Open Modal (All Panels)
+      <Button onClick={toggleOn} ref={triggerRef}>
+        Open Three-Column Modal
       </Button>
-      {visible && (
-        <FullscreenModalLayout
-          onRequestClose={toggleOff}
-          visible={visible}
-          accessibilityLabel="All Panels Fullscreen Modal"
-        >
-          <VStack background="bg" height="100%" width="100%">
-            {headerContent}
-            {mainModalContent}
-          </VStack>
-        </FullscreenModalLayout>
-      )}
+
+      <FullscreenModalLayout
+        visible={visible}
+        onRequestClose={toggleOff}
+        accessibilityLabel="Three-Column Fullscreen Modal"
+      >
+        <VStack background="bg" height="100%" width="100%">
+          <PageHeader
+            start={<LogoMark size={32} />}
+            title="Account Settings"
+            borderedBottom
+            flexShrink={0}
+            end={
+              <HStack alignItems="center" gap={2}>
+                <Link font="headline" color="fgPrimary">
+                  Help
+                </Link>
+                <HStack gap={1}>
+                  <IconButton
+                    transparent
+                    accessibilityLabel="Share"
+                    name="externalLink"
+                    testID="header-external-link-button"
+                  />
+                  <IconButton
+                    transparent
+                    accessibilityLabel="Close"
+                    name="close"
+                    onClick={toggleOff}
+                    testID="header-close-button"
+                  />
+                </HStack>
+              </HStack>
+            }
+          />
+          <HStack flexGrow={1} overflow="hidden" alignItems="stretch">
+            <Sidebar height="100%" variant="default" borderedEnd={false}>
+              <SidebarItem icon="account" title="Profile" onClick={() => {}} />
+              <SidebarItem icon="lock" title="Security" active onClick={() => {}} />
+              <SidebarItem icon="bell" title="Notifications" onClick={() => {}} />
+              <SidebarItem icon="eye" title="Privacy" onClick={() => {}} />
+            </Sidebar>
+            <Divider direction="vertical" />
+            <VStack flexGrow={1} height="100%" overflow="auto" padding={4} gap={3}>
+              <VStack gap={2}>
+                <Text as="h2" font="title2">
+                  Security Settings
+                </Text>
+                <Text as="p" font="body" color="fgSecondary">
+                  Manage your account security preferences and authentication methods.
+                </Text>
+              </VStack>
+              <VStack gap={2}>
+                <Text as="h3" font="title3">
+                  Email and Password
+                </Text>
+                <ListCell
+                  {...listCellProps}
+                  title="Email address"
+                  description="user@example.com"
+                  action={
+                    <Button variant="tertiary" {...smallButtonProps} disabled>
+                      Change
+                    </Button>
+                  }
+                />
+                <ListCell
+                  {...listCellProps}
+                  title="Password"
+                  description="Last changed 3 months ago"
+                  media={<Icon name="lock" />}
+                  action={
+                    <Button variant="tertiary" {...smallButtonProps}>
+                      Change
+                    </Button>
+                  }
+                />
+              </VStack>
+              <VStack gap={2}>
+                <Text as="h3" font="title3">
+                  Two-Factor Authentication
+                </Text>
+                <ListCell
+                  {...listCellProps}
+                  title="SMS Authentication"
+                  description="Receive codes via text message"
+                  end={
+                    <Button variant="secondary" {...smallButtonProps}>
+                      Enable
+                    </Button>
+                  }
+                />
+                <ListCell
+                  {...listCellProps}
+                  title="Authenticator App"
+                  description="Use an app like Google Authenticator"
+                  end={
+                    <Button variant="secondary" {...smallButtonProps}>
+                      Enable
+                    </Button>
+                  }
+                />
+              </VStack>
+              <VStack gap={2}>
+                <Text as="h3" font="title3">
+                  Active Sessions
+                </Text>
+                <ListCell
+                  {...listCellProps}
+                  title="Chrome on Mac"
+                  description="San Francisco, CA • Last active 2 hours ago"
+                  end={
+                    <Button variant="tertiary" {...smallButtonProps}>
+                      Revoke
+                    </Button>
+                  }
+                />
+                <ListCell
+                  {...listCellProps}
+                  title="Safari on iPhone"
+                  description="San Francisco, CA • Last active 1 day ago"
+                  end={
+                    <Button variant="tertiary" {...smallButtonProps}>
+                      Revoke
+                    </Button>
+                  }
+                />
+                <ListCell
+                  {...listCellProps}
+                  title="Firefox on Windows"
+                  description="New York, NY • Last active 5 days ago"
+                  end={
+                    <Button variant="tertiary" {...smallButtonProps}>
+                      Revoke
+                    </Button>
+                  }
+                />
+              </VStack>
+              <VStack gap={2}>
+                <Text as="h3" font="title3">
+                  Security Alerts
+                </Text>
+                <ListCell
+                  {...listCellProps}
+                  title="Email notifications"
+                  description="Get notified when there's suspicious activity"
+                  end={
+                    <Button variant="secondary" {...smallButtonProps}>
+                      Configure
+                    </Button>
+                  }
+                />
+                <ListCell
+                  {...listCellProps}
+                  title="SMS alerts"
+                  description="Receive text messages for critical security events"
+                  end={
+                    <Button variant="secondary" {...smallButtonProps}>
+                      Configure
+                    </Button>
+                  }
+                />
+              </VStack>
+              <VStack gap={2}>
+                <Text as="h3" font="title3">
+                  Backup Codes
+                </Text>
+                <Text as="p" font="body" color="fgSecondary">
+                  Save these codes in a safe place. You can use them to access your account if you
+                  lose access to your two-factor authentication device.
+                </Text>
+                <Button variant="secondary" block>
+                  Generate New Backup Codes
+                </Button>
+              </VStack>
+              <VStack gap={2}>
+                <Text as="h3" font="title3">
+                  API Keys
+                </Text>
+                <Text as="p" font="body" color="fgSecondary">
+                  Manage API keys for programmatic access to your account. Keep them secure and
+                  never share them publicly.
+                </Text>
+                <Button variant="secondary" block>
+                  Manage API Keys
+                </Button>
+              </VStack>
+              <VStack gap={2}>
+                <Text as="h3" font="title3">
+                  Account Recovery
+                </Text>
+                <Text as="p" font="body" color="fgSecondary">
+                  Set up recovery options to help you regain access to your account if you're locked
+                  out.
+                </Text>
+                <ListCell
+                  {...listCellProps}
+                  title="Recovery email"
+                  description="user@example.com"
+                  end={
+                    <Button variant="tertiary" {...smallButtonProps}>
+                      Change
+                    </Button>
+                  }
+                />
+                <ListCell
+                  {...listCellProps}
+                  title="Recovery phone"
+                  description="+1 (555) 123-4567"
+                  end={
+                    <Button variant="tertiary" {...smallButtonProps}>
+                      Change
+                    </Button>
+                  }
+                />
+              </VStack>
+            </VStack>
+            <Divider direction="vertical" />
+            <VStack height="100%" overflow="auto" padding={4} gap={3} width={320}>
+              <VStack gap={1}>
+                <Text as="h3" font="title3">
+                  Security Tips
+                </Text>
+                <Text as="ul" font="body">
+                  <li>Use a unique password that you don't use elsewhere</li>
+                  <li>Enable two-factor authentication for added security</li>
+                  <li>Regularly review your active sessions and devices</li>
+                </Text>
+              </VStack>
+              <VStack gap={2}>
+                <VStack gap={1}>
+                  <Text as="h3" font="title3">
+                    Need Help?
+                  </Text>
+                  <Text as="p" font="body">
+                    If you're having trouble accessing your account, visit our{' '}
+                    <Link font="body" color="fgPrimary">
+                      support center
+                    </Link>{' '}
+                    or contact support.
+                  </Text>
+                </VStack>
+                <Button variant="secondary" block endIcon="chatBotAgent" compact>
+                  Chat with Support
+                </Button>
+              </VStack>
+            </VStack>
+          </HStack>
+          <PageFooter
+            borderedTop
+            flexShrink={0}
+            action={
+              <ButtonGroup direction="horizontal">
+                <Button variant="secondary" onClick={toggleOff}>
+                  Cancel
+                </Button>
+                <Button variant="primary" onClick={toggleOff}>
+                  Save
+                </Button>
+              </ButtonGroup>
+            }
+          />
+        </VStack>
+      </FullscreenModalLayout>
     </PortalProvider>
   );
 }

package/package.json

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