design system token v0.6

lib/catalog.ts

@@ -177,6 +177,15 @@ export const COMPONENT_CATALOG: ComponentSpec[] = [
     props: 'variant?: "default" | "outline"; size?: "default" | "sm" | "lg"; pressed?: boolean',
     example: '<Toggle aria-label="Bold"><BoldIcon /></Toggle>',
   },
+  {
+    name: 'Code',
+    file: 'components/ui/code.tsx',
+    category: 'primitives',
+    exports: ['Code', 'codeVariants'],
+    description: 'Inline or block code snippet. Always use this instead of hand-rolling <code>/<pre> styling. Uses bg-muted + border-border so the outline stays visible in both light and dark modes. Block variant auto-wraps in <pre> for whitespace preservation and break-all for long commands.',
+    props: 'variant?: "inline" | "block"; language?: string (optional, for future syntax highlighting)',
+    example: '<p>Install with <Code>pnpm install</Code>.</p>\n\n<Code variant="block" language="bash">{`pnpm install\npnpm dev`}</Code>',
+  },
   // ── Layout ──────────────────────────────────────────────────────────────
   {
     name: 'Card',