@astryxdesign/cli 0.1.0-canary.86d9762 → 0.1.0-canary.a95a267

package/docs/getting-started.doc.mjs

@@ -88,7 +88,7 @@ import {VStack} from '@astryxdesign/core/Layout';
 export default function Page() {
   return (
     <VStack gap={2}>
-      <Button label="Hello Astryx" onClick={() => alert('Hi!')} />
+      <Button label="Hello XDS" onClick={() => alert('Hi!')} />
     </VStack>
   );
 }`,
@@ -96,11 +96,11 @@ export default function Page() {
       ],
     },
     {
-      title: 'Customize with StyleX',
+      title: 'Customize with xstyle',
       content: [
         {
           type: 'prose',
-          text: 'Astryx components support various styling solutions, from plain CSS and `className` to Tailwind and CSS-in-JS. See the [styling docs](/docs/styling) for the full guide. Astryx also has a deep integration with [StyleX](https://stylexjs.com/), an atomic CSS-in-JS library: create styles with `stylex.create()` and pass them to components with the `xstyle` prop.',
+          text: 'Every component accepts an `xstyle` prop for StyleX style overrides created via `stylex.create()`.',
         },
         {
           type: 'code',
@@ -127,19 +127,19 @@ const overrides = stylex.create({
           type: 'table',
           headers: ['Example', 'Stack', 'Path'],
           rows: [
-            ['Next.js', 'Next.js + theme CSS', '[apps/example-nextjs](https://github.com/facebook/astryx/tree/main/apps/example-nextjs)'],
-            ['Next.js + StyleX', 'Next.js + StyleX for custom styles', '[apps/example-nextjs-stylex](https://github.com/facebook/astryx/tree/main/apps/example-nextjs-stylex)'],
-            ['Next.js + Tailwind', 'Next.js + Tailwind bridge', '[apps/example-nextjs-tailwind](https://github.com/facebook/astryx/tree/main/apps/example-nextjs-tailwind)'],
-            ['Next.js Source', 'Next.js importing from source', '[apps/example-nextjs-source](https://github.com/facebook/astryx/tree/main/apps/example-nextjs-source)'],
-            ['Vite', 'Vite', '[apps/example-vite](https://github.com/facebook/astryx/tree/main/apps/example-vite)'],
+            ['Next.js', 'Next.js + theme CSS', 'apps/example-nextjs'],
+            ['Next.js + StyleX', 'Next.js + StyleX for custom styles', 'apps/example-nextjs-stylex'],
+            ['Next.js + Tailwind', 'Next.js + Tailwind bridge', 'apps/example-nextjs-tailwind'],
+            ['Next.js Source', 'Next.js importing from source', 'apps/example-nextjs-source'],
+            ['Vite', 'Vite', 'apps/example-vite'],
           ],
         },
         {
           type: 'code',
           lang: 'bash',
           label: 'Clone and run an example',
-          code: `git clone https://github.com/facebook/astryx.git
-cd astryx/apps/example-nextjs
+          code: `git clone https://github.com/facebookexperimental/xds.git
+cd xds/apps/example-nextjs
 pnpm install
 pnpm dev`,
         },
@@ -157,7 +157,7 @@ pnpm dev`,
           lang: 'json',
           label: 'package.json',
           code: `"scripts": {
-  "astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
+  "xds": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
 }`,
         },
         {

package/docs/styling.doc.mjs

@@ -22,8 +22,9 @@ export const docs = {
           type: 'table',
           headers: ['Approach', 'Use for', 'Example'],
           rows: [
-            ['StyleX', 'Component-specific overrides, reusable styles, pseudo-classes, and typed tokens', 'const styles = stylex.create(...); <Button xstyle={styles.save} />'],
+            ['xstyle prop', 'Overriding a specific component', 'xstyle={styles.override}'],
             ['Tailwind utilities', 'Layout, wrappers, and utility styling', 'className="flex gap-3 p-4"'],
+            ['stylex.create', 'Reusable styles, pseudo-classes, typed tokens', 'stylex.create({ card: { ... } })'],
             ['className', 'Integrating with external CSS or Tailwind on components', 'className="my-card shadow-lg"'],
             ['Styling-library token aliases', 'Keeping Panda, Chakra, MUI, Emotion, styled-components, UnoCSS, CSS Modules, or Sass in sync with the system', "colors.surface = 'var(--color-background-surface)'"],
           ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.0-canary.86d9762",
+  "version": "0.1.0-canary.a95a267",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -54,9 +54,9 @@
     "jscodeshift": "^17.3.0"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.1.0-canary.86d9762",
-    "@astryxdesign/lab": "0.1.0-canary.86d9762",
-    "@astryxdesign/theme-neutral": "0.1.0-canary.86d9762"
+    "@astryxdesign/core": "0.1.0-canary.a95a267",
+    "@astryxdesign/lab": "0.1.0-canary.a95a267",
+    "@astryxdesign/theme-neutral": "0.1.0-canary.a95a267"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {
@@ -70,9 +70,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.0-canary.86d9762",
-    "@astryxdesign/lab": "0.1.0-canary.86d9762",
-    "@astryxdesign/theme-neutral": "0.1.0-canary.86d9762"
+    "@astryxdesign/core": "0.1.0-canary.a95a267",
+    "@astryxdesign/lab": "0.1.0-canary.a95a267",
+    "@astryxdesign/theme-neutral": "0.1.0-canary.a95a267"
   },
   "scripts": {
     "astryx": "node bin/astryx.mjs",

package/src/api/doctor.mjs

@@ -355,8 +355,8 @@ export function checkAgentDocs(ctx) {
     try {
       const content = fs.readFileSync(path.join(ctx.cwd, rel), 'utf-8');
       return (
-        (content.includes('<!-- ASTRYX:START -->') || content.includes('<!-- XDS:START -->')) &&
-        (content.includes('<!-- ASTRYX:END -->') || content.includes('<!-- XDS:END -->'))
+        content.includes('<!-- XDS:START -->') &&
+        content.includes('<!-- XDS:END -->')
       );
     } catch {
       return false;
@@ -368,7 +368,7 @@ export function checkAgentDocs(ctx) {
       id: 'agent-docs',
       label: 'AI agent docs',
       status: 'warn',
-      message: `Agent docs present (${present.join(', ')}) but no Astryx section markers found.`,
+      message: `Agent docs present (${present.join(', ')}) but no XDS section markers found.`,
       fix: 'Add the XDS section to your agent docs with `astryx init --features agents`.',
     };
   }

package/src/commands/agent-docs.mjs

@@ -31,11 +31,8 @@ const AGENTS_MD = 'AGENTS.md';
 const CLAUDE_MD = 'CLAUDE.md';
 const CLAUDE_DIR_MD = path.join('.claude', 'CLAUDE.md');
 
-const MARKER_START = '<!-- ASTRYX:START -->';
-const MARKER_END = '<!-- ASTRYX:END -->';
-// Legacy markers — read during migration so the script finds existing XDS blocks
-const LEGACY_MARKER_START = '<!-- XDS:START -->';
-const LEGACY_MARKER_END = '<!-- XDS:END -->';
+const XDS_MARKER_START = '<!-- XDS:START -->';
+const XDS_MARKER_END = '<!-- XDS:END -->';
 
 /**
  * Agent tool presets — maps tool names to their file search paths.
@@ -102,7 +99,7 @@ export function resolveAgentPaths(targetDir, agent) {
  */
 export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPrefix()} = {}) {
   const run = `${runPrefix} astryx`;
-  const lines = [MARKER_START];
+  const lines = [XDS_MARKER_START];
 
   // Component count from live discovery
   let componentCount = '90+';
@@ -180,7 +177,7 @@ export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPre
   lines.push(`${run} swizzle <Name>            eject source (--gap to report why)`);
   lines.push(`${run} upgrade --apply            codemods after version bump`);
   lines.push(`after @astryxdesign/core bump, always run ${run} upgrade --apply`);
-  lines.push(MARKER_END);
+  lines.push(XDS_MARKER_END);
 
   return lines.join('\n');
 }
@@ -221,21 +218,14 @@ export function injectXdsBlock(filePath, compressedIndex, {createIfMissing = fal
   if (fs.existsSync(filePath)) {
     content = fs.readFileSync(filePath, 'utf-8');
 
-    // Find existing section — try new markers first, fall back to legacy XDS markers
-    let startIdx = content.indexOf(MARKER_START);
-    let endIdx = content.indexOf(MARKER_END);
-    let markerEndLength = MARKER_END.length;
-    if (startIdx === -1) {
-      startIdx = content.indexOf(LEGACY_MARKER_START);
-      endIdx = content.indexOf(LEGACY_MARKER_END);
-      markerEndLength = LEGACY_MARKER_END.length;
-    }
+    const startIdx = content.indexOf(XDS_MARKER_START);
+    const endIdx = content.indexOf(XDS_MARKER_END);
 
     if (startIdx !== -1 && endIdx !== -1) {
       content =
         content.slice(0, startIdx) +
         compressedIndex +
-        content.slice(endIdx + markerEndLength);
+        content.slice(endIdx + XDS_MARKER_END.length);
     } else if (onlyReplace) {
       // File exists but has no Astryx markers — skip it
       return false;
@@ -287,20 +277,13 @@ export function removeXdsBlock(filePath, {deleteIfEmpty = false} = {}) {
   if (!fs.existsSync(filePath)) return false;
 
   let content = fs.readFileSync(filePath, 'utf-8');
-  // Find existing section — try new markers first, fall back to legacy
-  let startIdx = content.indexOf(MARKER_START);
-  let endIdx = content.indexOf(MARKER_END);
-  let markerEndLen = MARKER_END.length;
-  if (startIdx === -1) {
-    startIdx = content.indexOf(LEGACY_MARKER_START);
-    endIdx = content.indexOf(LEGACY_MARKER_END);
-    markerEndLen = LEGACY_MARKER_END.length;
-  }
+  const startIdx = content.indexOf(XDS_MARKER_START);
+  const endIdx = content.indexOf(XDS_MARKER_END);
 
   if (startIdx === -1 || endIdx === -1) return false;
 
   const before = content.slice(0, startIdx).trimEnd();
-  const after = content.slice(endIdx + markerEndLen).trimStart();
+  const after = content.slice(endIdx + XDS_MARKER_END.length).trimStart();
   content = before + (after ? '\n\n' + after : '') + '\n';
 
   if (deleteIfEmpty) {

package/src/commands/agent-docs.test.mjs

@@ -32,8 +32,8 @@ describe('generateCompressedIndex', () => {
   it('includes the version number', () => {
     const result = generateCompressedIndex('1.2.3');
     expect(result).toContain('Astryx v1.2.3');
-    expect(result).toContain('<!-- ASTRYX:START -->');
-    expect(result).toContain('<!-- ASTRYX:END -->');
+    expect(result).toContain('<!-- XDS:START -->');
+    expect(result).toContain('<!-- XDS:END -->');
   });
 
   it('includes theme nudge rule', () => {
@@ -82,19 +82,19 @@ describe('injectXdsBlock', () => {
     const filePath = path.join(tmpDir, 'test.md');
     fs.writeFileSync(filePath, '# Existing content\n');
 
-    const result = injectXdsBlock(filePath, '<!-- ASTRYX:START -->\nnew\n<!-- ASTRYX:END -->');
+    const result = injectXdsBlock(filePath, '<!-- XDS:START -->\nnew\n<!-- XDS:END -->');
 
     expect(result).toBe(true);
     const content = fs.readFileSync(filePath, 'utf-8');
     expect(content).toContain('# Existing content');
-    expect(content).toContain('<!-- ASTRYX:START -->');
+    expect(content).toContain('<!-- XDS:START -->');
   });
 
   it('replaces existing markers', () => {
     const filePath = path.join(tmpDir, 'test.md');
     fs.writeFileSync(filePath, 'before\n<!-- XDS:START -->\nold\n<!-- XDS:END -->\nafter\n');
 
-    injectXdsBlock(filePath, '<!-- ASTRYX:START -->\nnew\n<!-- ASTRYX:END -->');
+    injectXdsBlock(filePath, '<!-- XDS:START -->\nnew\n<!-- XDS:END -->');
 
     const content = fs.readFileSync(filePath, 'utf-8');
     expect(content).toContain('new');
@@ -106,7 +106,7 @@ describe('injectXdsBlock', () => {
   it('returns false and does not create file when createIfMissing is false', () => {
     const filePath = path.join(tmpDir, 'nonexistent.md');
 
-    const result = injectXdsBlock(filePath, '<!-- ASTRYX:START -->\ncontent\n<!-- ASTRYX:END -->');
+    const result = injectXdsBlock(filePath, '<!-- XDS:START -->\ncontent\n<!-- XDS:END -->');
 
     expect(result).toBe(false);
     expect(fs.existsSync(filePath)).toBe(false);
@@ -116,11 +116,11 @@ describe('injectXdsBlock', () => {
     const filePath = path.join(tmpDir, 'test.md');
     fs.writeFileSync(filePath, '# Existing content\n\nNo XDS markers here.\n');
 
-    const result = injectXdsBlock(filePath, '<!-- ASTRYX:START -->\nnew\n<!-- ASTRYX:END -->', {onlyReplace: true});
+    const result = injectXdsBlock(filePath, '<!-- XDS:START -->\nnew\n<!-- XDS:END -->', {onlyReplace: true});
 
     expect(result).toBe(false);
     const content = fs.readFileSync(filePath, 'utf-8');
-    expect(content).not.toContain('<!-- ASTRYX:START -->');
+    expect(content).not.toContain('<!-- XDS:START -->');
     expect(content).toBe('# Existing content\n\nNo XDS markers here.\n');
   });
 
@@ -128,7 +128,7 @@ describe('injectXdsBlock', () => {
     const filePath = path.join(tmpDir, 'test.md');
     fs.writeFileSync(filePath, 'before\n<!-- XDS:START -->\nold\n<!-- XDS:END -->\nafter\n');
 
-    const result = injectXdsBlock(filePath, '<!-- ASTRYX:START -->\nnew\n<!-- ASTRYX:END -->', {onlyReplace: true});
+    const result = injectXdsBlock(filePath, '<!-- XDS:START -->\nnew\n<!-- XDS:END -->', {onlyReplace: true});
 
     expect(result).toBe(true);
     const content = fs.readFileSync(filePath, 'utf-8');
@@ -139,7 +139,7 @@ describe('injectXdsBlock', () => {
   it('creates file when createIfMissing is true', () => {
     const filePath = path.join(tmpDir, 'new.md');
 
-    const result = injectXdsBlock(filePath, '<!-- ASTRYX:START -->\ncontent\n<!-- ASTRYX:END -->', {
+    const result = injectXdsBlock(filePath, '<!-- XDS:START -->\ncontent\n<!-- XDS:END -->', {
       createIfMissing: true,
       header: '# Header',
     });
@@ -147,7 +147,7 @@ describe('injectXdsBlock', () => {
     expect(result).toBe(true);
     const content = fs.readFileSync(filePath, 'utf-8');
     expect(content).toContain('# Header');
-    expect(content).toContain('<!-- ASTRYX:START -->');
+    expect(content).toContain('<!-- XDS:START -->');
   });
 });
 
@@ -157,9 +157,9 @@ describe('injectAgentsMd', () => {
 
     const content = fs.readFileSync(path.join(tmpDir, 'AGENTS.md'), 'utf-8');
     expect(content).toContain('# AGENTS.md');
-    expect(content).toContain('<!-- ASTRYX:START -->');
+    expect(content).toContain('<!-- XDS:START -->');
     expect(content).toContain('Astryx v1.0.0');
-    expect(content).toContain('<!-- ASTRYX:END -->');
+    expect(content).toContain('<!-- XDS:END -->');
   });
 
   it('updates existing AGENTS.md by replacing XDS markers', () => {
@@ -195,7 +195,7 @@ Existing agent docs.
 
     const content = fs.readFileSync(path.join(tmpDir, 'AGENTS.md'), 'utf-8');
     expect(content).toContain('Existing agent docs.');
-    expect(content).toContain('<!-- ASTRYX:START -->');
+    expect(content).toContain('<!-- XDS:START -->');
     expect(content).toContain('Astryx v1.0.0');
   });
 });
@@ -210,7 +210,7 @@ describe('injectClaudeMd', () => {
     const content = fs.readFileSync(path.join(tmpDir, 'CLAUDE.md'), 'utf-8');
     expect(content).toContain('# Claude Config');
     expect(content).toContain('Existing rules.');
-    expect(content).toContain('<!-- ASTRYX:START -->');
+    expect(content).toContain('<!-- XDS:START -->');
     expect(content).toContain('Astryx v1.0.0');
   });
 
@@ -322,7 +322,7 @@ describe('installAgentDocs', () => {
     expect(fs.existsSync(path.join(tmpDir, '.claude', 'CLAUDE.md'))).toBe(true);
     expect(fs.existsSync(path.join(tmpDir, 'AGENTS.md'))).toBe(false);
     const content = fs.readFileSync(path.join(tmpDir, '.claude', 'CLAUDE.md'), 'utf-8');
-    expect(content).toContain('<!-- ASTRYX:START -->');
+    expect(content).toContain('<!-- XDS:START -->');
   });
 
   it('injects into CLAUDE.md at root when it exists', () => {
@@ -334,7 +334,7 @@ describe('installAgentDocs', () => {
     expect(written).toEqual(['CLAUDE.md']);
     expect(fs.existsSync(path.join(tmpDir, 'AGENTS.md'))).toBe(false);
     const claudeContent = fs.readFileSync(path.join(tmpDir, 'CLAUDE.md'), 'utf-8');
-    expect(claudeContent).toContain('<!-- ASTRYX:START -->');
+    expect(claudeContent).toContain('<!-- XDS:START -->');
     expect(claudeContent).toContain('Project rules.');
   });
 
@@ -349,8 +349,8 @@ describe('installAgentDocs', () => {
     expect(written).toContain('CLAUDE.md');
     const agentsContent = fs.readFileSync(path.join(tmpDir, 'AGENTS.md'), 'utf-8');
     const claudeContent = fs.readFileSync(path.join(tmpDir, 'CLAUDE.md'), 'utf-8');
-    expect(agentsContent).toContain('<!-- ASTRYX:START -->');
-    expect(claudeContent).toContain('<!-- ASTRYX:START -->');
+    expect(agentsContent).toContain('<!-- XDS:START -->');
+    expect(claudeContent).toContain('<!-- XDS:START -->');
   });
 
   it('updates existing .claude/CLAUDE.md', () => {
@@ -363,7 +363,7 @@ describe('installAgentDocs', () => {
     expect(written).toEqual(['.claude/CLAUDE.md']);
     const content = fs.readFileSync(path.join(tmpDir, '.claude', 'CLAUDE.md'), 'utf-8');
     expect(content).toContain('Existing content.');
-    expect(content).toContain('<!-- ASTRYX:START -->');
+    expect(content).toContain('<!-- XDS:START -->');
   });
 
   it('respects --agent claude preset: finds existing CLAUDE.md', () => {
@@ -410,7 +410,7 @@ describe('installAgentDocs', () => {
 
     expect(written).toEqual([]);
     const content = fs.readFileSync(path.join(tmpDir, 'CLAUDE.md'), 'utf-8');
-    expect(content).not.toContain('<!-- ASTRYX:START -->');
+    expect(content).not.toContain('<!-- XDS:START -->');
     expect(content).toBe('# Claude\n\nProject rules only.\n');
   });
 

package/src/commands/init.mjs

@@ -248,7 +248,7 @@ export function registerInit(program) {
       humanLog('    2. Optionally add a theme:');
       humanLog("       import { neutralTheme } from '@astryxdesign/theme-neutral'");
       humanLog('       <Theme theme={neutralTheme}>...</Theme>');
-      humanLog(`    3. ${run} astryx --help for all commands`);
+      humanLog(`    3. ${run} xds --help for all commands`);
       humanLog('');
     });
 }

package/src/utils/package-manager.mjs

@@ -4,7 +4,7 @@
  * @file Detect the project's package manager from lockfiles.
  *
  * Returns the correct command prefix for running package binaries
- * (e.g. 'npx astryx', 'yarn astryx', 'pnpm exec astryx').
+ * (e.g. 'npx xds', 'yarn xds', 'pnpm exec xds').
  */
 
 import * as fs from 'node:fs';

package/templates/pages/documentation/page.tsx

@@ -3,23 +3,24 @@
 'use client';
 
 import * as stylex from '@stylexjs/stylex';
-import {Heading, Text} from '@astryxdesign/core/Text';
+import {
+  SideNav,
+  SideNavHeading,
+  SideNavItem,
+  SideNavSection,
+} from '@astryxdesign/core/SideNav';
+import {Text} from '@astryxdesign/core/Text';
 import {Button} from '@astryxdesign/core/Button';
 import {Card} from '@astryxdesign/core/Card';
-import {ClickableCard} from '@astryxdesign/core/ClickableCard';
 import {HStack, VStack, StackItem} from '@astryxdesign/core/Stack';
-import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
 import {Grid} from '@astryxdesign/core/Grid';
 import {radiusVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 const styles = stylex.create({
   previewCard: {
-    borderRadius: radiusVars['--radius-element'],
-  },
-  // Negative margin offsets each card's 8px padding so the grid content stays
-  // visually aligned while giving every card a padded hover/click target.
-  cardGrid: {
-    margin: -8,
+    borderRadius: radiusVars['--radius-container'],
+    cursor: 'pointer',
   },
 });
 
@@ -212,12 +213,30 @@ const COMPONENT_CATEGORIES = [
 export default function DocumentationOverviewPage() {
   return (
     <Layout
-      height="auto"
+      height="fill"
       contentWidth={1200}
+      start={
+        <LayoutPanel hasDivider padding={0}>
+          <SideNav header={<SideNavHeading heading="Product Name" />}>
+            <SideNavSection title="Navigation" isHeaderHidden>
+              <SideNavItem label="Home" isSelected />
+              <SideNavItem label="Getting started" />
+            </SideNavSection>
+
+            {COMPONENT_CATEGORIES.map(category => (
+              <SideNavSection key={category.label} title={category.label}>
+                {category.items.map(item => (
+                  <SideNavItem key={item.key} label={item.name} />
+                ))}
+              </SideNavSection>
+            ))}
+          </SideNav>
+        </LayoutPanel>
+      }
       content={
         <LayoutContent padding={8}>
           <VStack gap={10}>
-            <Card variant="gray" padding={10}>
+            <Card variant="cyan" padding={10}>
               <HStack gap={8} vAlign="center">
                 <StackItem size="fill">
                   <VStack gap={4}>
@@ -227,7 +246,11 @@ export default function DocumentationOverviewPage() {
                       beautiful, accessible products.
                     </Text>
                     <HStack>
-                      <Button label="Get started" variant="primary" size="lg" />
+                      <Button
+                        label="Get started"
+                        variant="primary"
+                        size="lg"
+                      />
                     </HStack>
                   </VStack>
                 </StackItem>
@@ -237,35 +260,25 @@ export default function DocumentationOverviewPage() {
 
             {COMPONENT_CATEGORIES.map(category => (
               <VStack key={category.label} gap={4}>
-                <Heading level={2}>{category.label}</Heading>
-                <Grid
-                  columns={{minWidth: 260}}
-                  gap={2}
-                  xstyle={styles.cardGrid}>
+                <Text type="display-2">{category.label}</Text>
+                <Grid columns={{minWidth: 260}} gap={8}>
                   {category.items.map(item => (
-                    <ClickableCard
-                      key={item.key}
-                      label={`Open ${item.name}`}
-                      onClick={() => {}}
-                      variant="transparent"
-                      padding={2}>
-                      <VStack gap={3}>
-                        <Card
-                          variant="muted"
-                          padding={0}
-                          minHeight={160}
-                          xstyle={styles.previewCard}
-                        />
-                        <VStack gap={0.5}>
-                          <Text type="body" weight="bold">
-                            {item.name}
-                          </Text>
-                          <Text type="body" color="secondary" maxLines={3}>
-                            {item.desc}
-                          </Text>
-                        </VStack>
+                    <VStack key={item.key} gap={3}>
+                      <Card
+                        variant="muted"
+                        padding={0}
+                        minHeight={160}
+                        xstyle={styles.previewCard}
+                      />
+                      <VStack gap={0.5}>
+                        <Text type="body" weight="bold">
+                          {item.name}
+                        </Text>
+                        <Text type="body" color="secondary">
+                          {item.desc}
+                        </Text>
                       </VStack>
-                    </ClickableCard>
+                    </VStack>
                   ))}
                 </Grid>
               </VStack>