@astryxdesign/cli 0.1.0-canary.a95a267 → 0.1.0-canary.cfbdec3

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 XDS" onClick={() => alert('Hi!')} />
+      <Button label="Hello Astryx" onClick={() => alert('Hi!')} />
     </VStack>
   );
 }`,
@@ -96,11 +96,11 @@ export default function Page() {
       ],
     },
     {
-      title: 'Customize with xstyle',
+      title: 'Customize with StyleX',
       content: [
         {
           type: 'prose',
-          text: 'Every component accepts an `xstyle` prop for StyleX style overrides created via `stylex.create()`.',
+          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.',
         },
         {
           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'],
-            ['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'],
+            ['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)'],
           ],
         },
         {
           type: 'code',
           lang: 'bash',
           label: 'Clone and run an example',
-          code: `git clone https://github.com/facebookexperimental/xds.git
-cd xds/apps/example-nextjs
+          code: `git clone https://github.com/facebook/astryx.git
+cd astryx/apps/example-nextjs
 pnpm install
 pnpm dev`,
         },
@@ -157,7 +157,7 @@ pnpm dev`,
           lang: 'json',
           label: 'package.json',
           code: `"scripts": {
-  "xds": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
+  "astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
 }`,
         },
         {

package/docs/styling.doc.mjs

@@ -22,9 +22,8 @@ export const docs = {
           type: 'table',
           headers: ['Approach', 'Use for', 'Example'],
           rows: [
-            ['xstyle prop', 'Overriding a specific component', 'xstyle={styles.override}'],
+            ['StyleX', 'Component-specific overrides, reusable styles, pseudo-classes, and typed tokens', 'const styles = stylex.create(...); <Button xstyle={styles.save} />'],
             ['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.a95a267",
+  "version": "0.1.0-canary.cfbdec3",
   "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.a95a267",
-    "@astryxdesign/lab": "0.1.0-canary.a95a267",
-    "@astryxdesign/theme-neutral": "0.1.0-canary.a95a267"
+    "@astryxdesign/core": "0.1.0-canary.cfbdec3",
+    "@astryxdesign/lab": "0.1.0-canary.cfbdec3",
+    "@astryxdesign/theme-neutral": "0.1.0-canary.cfbdec3"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {
@@ -70,9 +70,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.0-canary.a95a267",
-    "@astryxdesign/lab": "0.1.0-canary.a95a267",
-    "@astryxdesign/theme-neutral": "0.1.0-canary.a95a267"
+    "@astryxdesign/core": "0.1.0-canary.cfbdec3",
+    "@astryxdesign/lab": "0.1.0-canary.cfbdec3",
+    "@astryxdesign/theme-neutral": "0.1.0-canary.cfbdec3"
   },
   "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('<!-- XDS:START -->') &&
-        content.includes('<!-- XDS:END -->')
+        (content.includes('<!-- ASTRYX:START -->') || content.includes('<!-- XDS:START -->')) &&
+        (content.includes('<!-- ASTRYX:END -->') || 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 XDS section markers found.`,
+      message: `Agent docs present (${present.join(', ')}) but no Astryx section markers found.`,
       fix: 'Add the XDS section to your agent docs with `astryx init --features agents`.',
     };
   }

package/src/commands/agent-docs.mjs

@@ -31,8 +31,11 @@ const AGENTS_MD = 'AGENTS.md';
 const CLAUDE_MD = 'CLAUDE.md';
 const CLAUDE_DIR_MD = path.join('.claude', 'CLAUDE.md');
 
-const XDS_MARKER_START = '<!-- XDS:START -->';
-const XDS_MARKER_END = '<!-- XDS:END -->';
+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 -->';
 
 /**
  * Agent tool presets — maps tool names to their file search paths.
@@ -99,7 +102,7 @@ export function resolveAgentPaths(targetDir, agent) {
  */
 export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPrefix()} = {}) {
   const run = `${runPrefix} astryx`;
-  const lines = [XDS_MARKER_START];
+  const lines = [MARKER_START];
 
   // Component count from live discovery
   let componentCount = '90+';
@@ -177,7 +180,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(XDS_MARKER_END);
+  lines.push(MARKER_END);
 
   return lines.join('\n');
 }
@@ -218,14 +221,21 @@ export function injectXdsBlock(filePath, compressedIndex, {createIfMissing = fal
   if (fs.existsSync(filePath)) {
     content = fs.readFileSync(filePath, 'utf-8');
 
-    const startIdx = content.indexOf(XDS_MARKER_START);
-    const endIdx = content.indexOf(XDS_MARKER_END);
+    // 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;
+    }
 
     if (startIdx !== -1 && endIdx !== -1) {
       content =
         content.slice(0, startIdx) +
         compressedIndex +
-        content.slice(endIdx + XDS_MARKER_END.length);
+        content.slice(endIdx + markerEndLength);
     } else if (onlyReplace) {
       // File exists but has no Astryx markers — skip it
       return false;
@@ -277,13 +287,20 @@ export function removeXdsBlock(filePath, {deleteIfEmpty = false} = {}) {
   if (!fs.existsSync(filePath)) return false;
 
   let content = fs.readFileSync(filePath, 'utf-8');
-  const startIdx = content.indexOf(XDS_MARKER_START);
-  const endIdx = content.indexOf(XDS_MARKER_END);
+  // 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;
+  }
 
   if (startIdx === -1 || endIdx === -1) return false;
 
   const before = content.slice(0, startIdx).trimEnd();
-  const after = content.slice(endIdx + XDS_MARKER_END.length).trimStart();
+  const after = content.slice(endIdx + markerEndLen).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('<!-- XDS:START -->');
-    expect(result).toContain('<!-- XDS:END -->');
+    expect(result).toContain('<!-- ASTRYX:START -->');
+    expect(result).toContain('<!-- ASTRYX: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, '<!-- XDS:START -->\nnew\n<!-- XDS:END -->');
+    const result = injectXdsBlock(filePath, '<!-- ASTRYX:START -->\nnew\n<!-- ASTRYX:END -->');
 
     expect(result).toBe(true);
     const content = fs.readFileSync(filePath, 'utf-8');
     expect(content).toContain('# Existing content');
-    expect(content).toContain('<!-- XDS:START -->');
+    expect(content).toContain('<!-- ASTRYX: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, '<!-- XDS:START -->\nnew\n<!-- XDS:END -->');
+    injectXdsBlock(filePath, '<!-- ASTRYX:START -->\nnew\n<!-- ASTRYX: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, '<!-- XDS:START -->\ncontent\n<!-- XDS:END -->');
+    const result = injectXdsBlock(filePath, '<!-- ASTRYX:START -->\ncontent\n<!-- ASTRYX: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, '<!-- XDS:START -->\nnew\n<!-- XDS:END -->', {onlyReplace: true});
+    const result = injectXdsBlock(filePath, '<!-- ASTRYX:START -->\nnew\n<!-- ASTRYX:END -->', {onlyReplace: true});
 
     expect(result).toBe(false);
     const content = fs.readFileSync(filePath, 'utf-8');
-    expect(content).not.toContain('<!-- XDS:START -->');
+    expect(content).not.toContain('<!-- ASTRYX: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, '<!-- XDS:START -->\nnew\n<!-- XDS:END -->', {onlyReplace: true});
+    const result = injectXdsBlock(filePath, '<!-- ASTRYX:START -->\nnew\n<!-- ASTRYX: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, '<!-- XDS:START -->\ncontent\n<!-- XDS:END -->', {
+    const result = injectXdsBlock(filePath, '<!-- ASTRYX:START -->\ncontent\n<!-- ASTRYX: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('<!-- XDS:START -->');
+    expect(content).toContain('<!-- ASTRYX: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('<!-- XDS:START -->');
+    expect(content).toContain('<!-- ASTRYX:START -->');
     expect(content).toContain('Astryx v1.0.0');
-    expect(content).toContain('<!-- XDS:END -->');
+    expect(content).toContain('<!-- ASTRYX: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('<!-- XDS:START -->');
+    expect(content).toContain('<!-- ASTRYX: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('<!-- XDS:START -->');
+    expect(content).toContain('<!-- ASTRYX: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('<!-- XDS:START -->');
+    expect(content).toContain('<!-- ASTRYX: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('<!-- XDS:START -->');
+    expect(claudeContent).toContain('<!-- ASTRYX: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('<!-- XDS:START -->');
-    expect(claudeContent).toContain('<!-- XDS:START -->');
+    expect(agentsContent).toContain('<!-- ASTRYX:START -->');
+    expect(claudeContent).toContain('<!-- ASTRYX: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('<!-- XDS:START -->');
+    expect(content).toContain('<!-- ASTRYX: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('<!-- XDS:START -->');
+    expect(content).not.toContain('<!-- ASTRYX: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} xds --help for all commands`);
+      humanLog(`    3. ${run} astryx --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 xds', 'yarn xds', 'pnpm exec xds').
+ * (e.g. 'npx astryx', 'yarn astryx', 'pnpm exec astryx').
  */
 
 import * as fs from 'node:fs';

package/templates/pages/documentation/page.tsx

@@ -3,24 +3,23 @@
 'use client';
 
 import * as stylex from '@stylexjs/stylex';
-import {
-  SideNav,
-  SideNavHeading,
-  SideNavItem,
-  SideNavSection,
-} from '@astryxdesign/core/SideNav';
-import {Text} from '@astryxdesign/core/Text';
+import {Heading, 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, LayoutPanel} from '@astryxdesign/core/Layout';
+import {Layout, LayoutContent} 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-container'],
-    cursor: 'pointer',
+    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,
   },
 });
 
@@ -213,30 +212,12 @@ const COMPONENT_CATEGORIES = [
 export default function DocumentationOverviewPage() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       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="cyan" padding={10}>
+            <Card variant="gray" padding={10}>
               <HStack gap={8} vAlign="center">
                 <StackItem size="fill">
                   <VStack gap={4}>
@@ -246,11 +227,7 @@ 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>
@@ -260,25 +237,35 @@ export default function DocumentationOverviewPage() {
 
             {COMPONENT_CATEGORIES.map(category => (
               <VStack key={category.label} gap={4}>
-                <Text type="display-2">{category.label}</Text>
-                <Grid columns={{minWidth: 260}} gap={8}>
+                <Heading level={2}>{category.label}</Heading>
+                <Grid
+                  columns={{minWidth: 260}}
+                  gap={2}
+                  xstyle={styles.cardGrid}>
                   {category.items.map(item => (
-                    <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>
+                    <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>
-                    </VStack>
+                    </ClickableCard>
                   ))}
                 </Grid>
               </VStack>