sonance-brand-mcp 1.3.1 → 1.3.3

package/dist/assets/brand-system.ts

@@ -0,0 +1,1265 @@
+// ============================================
+// SONANCE BRAND SYSTEM
+// Core theme configuration and utilities for the Sonance brand family
+// ============================================
+
+// ---- Types ----
+
+export interface ThemeConfig {
+  // Colors
+  baseColor: string;
+  accentColor: string;
+
+  // Radius
+  radius: 'none' | 'sm' | 'md' | 'lg';
+
+  // Typography
+  headingWeight: 400 | 500 | 600 | 700;
+  bodyWeight: 300 | 400 | 500;
+  typographyScale: 'compact' | 'default' | 'large';
+
+  // Spacing
+  spacing: 'compact' | 'default' | 'relaxed';
+}
+
+export type BrandId = 'sonance' | 'iport' | 'blaze';
+
+export interface BrandPreset {
+  id: BrandId;
+  name: string;
+  description: string;
+  config: ThemeConfig;
+}
+
+export interface BrandLogos {
+  light: string;  // Logo for light mode (dark logo on light bg)
+  dark: string;   // Logo for dark mode (light logo on dark bg)
+  alt: string;    // Alt text
+}
+
+export interface ColorPreset {
+  name: string;
+  value: string;
+}
+
+export interface ComponentSnippet {
+  id: string;
+  name: string;
+  category: string;
+  description: string;
+  code: string;
+  /** The component file name (without extension) in src/components/ui */
+  fileName?: string;
+}
+
+// ---- Default Configuration ----
+
+export const defaultThemeConfig: ThemeConfig = {
+  baseColor: '#333F48', // Sonance Charcoal
+  accentColor: '#00A3E1', // Sonance Blue
+  radius: 'sm',
+  headingWeight: 600,
+  bodyWeight: 400,
+  typographyScale: 'default',
+  spacing: 'default',
+};
+
+// ---- Brand Presets ----
+
+export const brandPresets: BrandPreset[] = [
+  {
+    id: 'sonance',
+    name: 'Sonance',
+    description: 'Clean, premium audio brand',
+    config: {
+      baseColor: '#333F48', // Sonance Charcoal
+      accentColor: '#00A3E1', // Sonance Blue
+      radius: 'sm',
+      headingWeight: 600,
+      bodyWeight: 400,
+      typographyScale: 'default',
+      spacing: 'default',
+    },
+  },
+  {
+    id: 'iport',
+    name: 'IPORT',
+    description: 'Bold, modern tech brand',
+    config: {
+      baseColor: '#FC4C02', // IPORT Orange
+      accentColor: '#0F161D', // IPORT Dark
+      radius: 'sm',
+      headingWeight: 700,
+      bodyWeight: 400,
+      typographyScale: 'default',
+      spacing: 'default',
+    },
+  },
+  {
+    id: 'blaze',
+    name: 'Blaze Audio',
+    description: 'Professional audio solutions',
+    config: {
+      baseColor: '#00A3E1', // Blaze Blue
+      accentColor: '#28282B', // Blaze Dark Gray
+      radius: 'sm',
+      headingWeight: 600,
+      bodyWeight: 400,
+      typographyScale: 'default',
+      spacing: 'compact',
+    },
+  },
+];
+
+// ---- Brand Logo Assets ----
+
+export const brandLogos: Record<BrandId, BrandLogos> = {
+  sonance: {
+    light: '/logos/sonance-james-iport/Sonance_James_IPORT_Lockup_Dark.png',
+    dark: '/logos/sonance-james-iport/Sonance_James_IPORT_Lockup_Light.png',
+    alt: 'Sonance',
+  },
+  iport: {
+    light: '/logos/iport/IPORT_Sonance_LockUp_2C_Dark_RGB.png',
+    dark: '/logos/iport/IPORT_Sonance_LockUp_2C_Light_RGB.png',
+    alt: 'IPORT',
+  },
+  blaze: {
+    light: '/logos/blaze/BlazeBySonance_Logo_Lockup_3C_Dark_RGB_05162025.png',
+    dark: '/logos/blaze/BlazeBySonance_Logo_Lockup_2C_Light_RGB_05162025.png',
+    alt: 'Blaze Audio',
+  },
+};
+
+// Logo dimension overrides
+export const logoSizes: Record<string, { width?: number; height?: number; scale?: number }> = {
+  
+
+
+
+
+
+
+
+
+
+
+
+
+
+};
+
+// ---- Color Presets ----
+
+export const colorPresets: ColorPreset[] = [
+  { name: 'Sonance Charcoal', value: '#333F48' },
+  { name: 'Sonance Blue', value: '#00A3E1' },
+  { name: 'IPORT Dark', value: '#0F161D' },
+  { name: 'IPORT Orange', value: '#FC4C02' },
+  { name: 'Blaze Dark', value: '#28282B' },
+  { name: 'Blaze Red', value: '#C02B0A' },
+  { name: 'Foundation Green', value: '#00B2A9' },
+  { name: 'Slate', value: '#64748b' },
+  { name: 'Zinc', value: '#71717a' },
+  { name: 'Stone', value: '#78716c' },
+];
+
+// ---- Scale Values ----
+
+export const radiusValues: Record<ThemeConfig['radius'], string> = {
+  none: '0px',
+  sm: '2px',
+  md: '4px',
+  lg: '8px',
+};
+
+export const typographyScales: Record<ThemeConfig['typographyScale'], number> = {
+  compact: 0.9,
+  default: 1,
+  large: 1.1,
+};
+
+export const spacingScales: Record<ThemeConfig['spacing'], number> = {
+  compact: 0.875,
+  default: 1,
+  relaxed: 1.125,
+};
+
+// ---- Color Utilities ----
+
+/**
+ * Darken a hex color by a percentage
+ */
+export function darken(hex: string, percent: number): string {
+  const num = parseInt(hex.replace('#', ''), 16);
+  const amt = Math.round(2.55 * percent);
+  const R = Math.max(0, (num >> 16) - amt);
+  const G = Math.max(0, ((num >> 8) & 0x00ff) - amt);
+  const B = Math.max(0, (num & 0x0000ff) - amt);
+  return `#${(0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1)}`;
+}
+
+/**
+ * Lighten a hex color by a percentage
+ */
+export function lighten(hex: string, percent: number): string {
+  const num = parseInt(hex.replace('#', ''), 16);
+  const amt = Math.round(2.55 * percent);
+  const R = Math.min(255, (num >> 16) + amt);
+  const G = Math.min(255, ((num >> 8) & 0x00ff) + amt);
+  const B = Math.min(255, (num & 0x0000ff) + amt);
+  return `#${(0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1)}`;
+}
+
+/**
+ * Check if a color is light (for contrast calculations)
+ */
+export function isLightColor(hex: string): boolean {
+  const c = hex.replace('#', '');
+  const r = parseInt(c.substring(0, 2), 16);
+  const g = parseInt(c.substring(2, 4), 16);
+  const b = parseInt(c.substring(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5;
+}
+
+// ---- CSS Generation ----
+
+/**
+ * Generate CSS variables object from theme config
+ */
+export function generateThemeVariables(config: ThemeConfig): Record<string, string> {
+  const radiusValue = radiusValues[config.radius];
+  const typographyScale = typographyScales[config.typographyScale];
+  const spacingScale = spacingScales[config.spacing];
+  const foregroundColor = isLightColor(config.baseColor) ? '#000000' : '#FFFFFF';
+
+  return {
+    // Primary colors
+    '--primary': config.baseColor,
+    '--primary-hover': darken(config.baseColor, 8),
+    '--primary-active': darken(config.baseColor, 15),
+    '--primary-foreground': foregroundColor,
+    '--color-primary': config.baseColor,
+    '--color-primary-hover': darken(config.baseColor, 8),
+    '--color-primary-foreground': foregroundColor,
+
+    // Theme-specific variables
+    '--theme-primary': config.baseColor,
+    '--theme-primary-hover': darken(config.baseColor, 8),
+    '--theme-primary-active': darken(config.baseColor, 15),
+    '--theme-primary-foreground': foregroundColor,
+
+    '--theme-accent': config.accentColor,
+    '--theme-accent-hover': darken(config.accentColor, 8),
+
+    // Radius
+    '--theme-radius': radiusValue,
+    '--radius-sm': radiusValue,
+
+    // Typography
+    '--theme-heading-weight': String(config.headingWeight),
+    '--theme-body-weight': String(config.bodyWeight),
+    '--theme-text-xs': `${0.75 * typographyScale}rem`,
+    '--theme-text-sm': `${0.875 * typographyScale}rem`,
+    '--theme-text-base': `${1 * typographyScale}rem`,
+    '--theme-text-lg': `${1.125 * typographyScale}rem`,
+
+    // Spacing
+    '--theme-space-1': `${0.25 * spacingScale}rem`,
+    '--theme-space-2': `${0.5 * spacingScale}rem`,
+    '--theme-space-3': `${0.75 * spacingScale}rem`,
+    '--theme-space-4': `${1 * spacingScale}rem`,
+    '--theme-space-6': `${1.5 * spacingScale}rem`,
+  };
+}
+
+/**
+ * Generate CSS variables string from theme config (for export)
+ */
+export function generateThemeCSS(config: ThemeConfig): string {
+  const variables = generateThemeVariables(config);
+  return Object.entries(variables)
+    .map(([key, value]) => `  ${key}: ${value};`)
+    .join('\n');
+}
+
+/**
+ * Apply theme configuration to the document root
+ */
+export function applyThemeToDOM(config: ThemeConfig): void {
+  if (typeof document === 'undefined') return;
+  
+  const variables = generateThemeVariables(config);
+  const root = document.documentElement;
+  
+  Object.entries(variables).forEach(([key, value]) => {
+    root.style.setProperty(key, value);
+  });
+}
+
+/**
+ * Reset theme to default by removing inline styles
+ */
+export function resetThemeFromDOM(): void {
+  if (typeof document === 'undefined') return;
+  
+  const variables = generateThemeVariables(defaultThemeConfig);
+  const root = document.documentElement;
+  
+  Object.keys(variables).forEach((key) => {
+    root.style.removeProperty(key);
+  });
+}
+
+// ---- Random Theme Generation ----
+
+/**
+ * Generate a random theme configuration
+ */
+export function generateRandomTheme(): ThemeConfig {
+  const randomColor = colorPresets[Math.floor(Math.random() * colorPresets.length)];
+  const accentColors = colorPresets.filter(c => c.value !== randomColor.value);
+  const randomAccent = accentColors[Math.floor(Math.random() * accentColors.length)];
+
+  const radiusOptions: ThemeConfig['radius'][] = ['none', 'sm', 'md', 'lg'];
+  const headingWeights: ThemeConfig['headingWeight'][] = [400, 500, 600, 700];
+  const bodyWeights: ThemeConfig['bodyWeight'][] = [300, 400, 500];
+  const typographyScaleOptions: ThemeConfig['typographyScale'][] = ['compact', 'default', 'large'];
+  const spacingOptions: ThemeConfig['spacing'][] = ['compact', 'default', 'relaxed'];
+
+  return {
+    baseColor: randomColor.value,
+    accentColor: randomAccent.value,
+    radius: radiusOptions[Math.floor(Math.random() * radiusOptions.length)],
+    headingWeight: headingWeights[Math.floor(Math.random() * headingWeights.length)],
+    bodyWeight: bodyWeights[Math.floor(Math.random() * bodyWeights.length)],
+    typographyScale: typographyScaleOptions[Math.floor(Math.random() * typographyScaleOptions.length)],
+    spacing: spacingOptions[Math.floor(Math.random() * spacingOptions.length)],
+  };
+}
+
+// ---- Component Snippets ----
+
+export const componentSnippets: ComponentSnippet[] = [
+  // ============================================
+  // BUTTONS
+  // ============================================
+  {
+    id: 'button-primary',
+    name: 'Primary Button',
+    category: 'Buttons',
+    description: 'Standard primary action button',
+    fileName: 'button',
+    code: `<button data-sonance-name="button-primary" className="bg-primary text-primary-foreground px-6 py-3 text-sm font-medium uppercase tracking-wide rounded-sm hover:opacity-90 transition-opacity">
+  Button Text
+</button>`,
+  },
+  {
+    id: 'button-secondary',
+    name: 'Secondary Button',
+    category: 'Buttons',
+    description: 'Secondary/outline button style',
+    fileName: 'button',
+    code: `<button data-sonance-name="button-secondary" className="border border-border bg-transparent text-foreground px-6 py-3 text-sm font-medium uppercase tracking-wide rounded-sm hover:bg-secondary-hover transition-colors">
+  Button Text
+</button>`,
+  },
+  {
+    id: 'button-ghost',
+    name: 'Ghost Button',
+    category: 'Buttons',
+    description: 'Minimal ghost/text button',
+    fileName: 'button',
+    code: `<button data-sonance-name="button-ghost" className="text-foreground px-4 py-2 text-sm font-medium hover:bg-background-secondary rounded-sm transition-colors">
+  Ghost
+</button>`,
+  },
+  {
+    id: 'button-destructive',
+    name: 'Destructive Button',
+    category: 'Buttons',
+    description: 'Danger/delete action button',
+    fileName: 'button',
+    code: `<button data-sonance-name="button-destructive" className="bg-destructive text-destructive-foreground px-6 py-3 text-sm font-medium uppercase tracking-wide rounded-sm hover:opacity-90 transition-opacity">
+  Delete
+</button>`,
+  },
+
+  // ============================================
+  // FORMS
+  // ============================================
+  {
+    id: 'input',
+    name: 'Input Field',
+    category: 'Forms',
+    description: 'Standard text input with label',
+    fileName: 'input',
+    code: `<div data-sonance-name="input" className="space-y-2">
+  <label className="text-sm font-medium text-foreground">Label</label>
+  <input
+    type="text"
+    placeholder="Placeholder text"
+    className="w-full px-4 py-2 border border-input-border rounded-sm bg-input text-foreground placeholder:text-input-placeholder focus:outline-none focus:ring-1 focus:ring-input-focus"
+  />
+</div>`,
+  },
+  {
+    id: 'textarea',
+    name: 'Textarea',
+    category: 'Forms',
+    description: 'Multi-line text input',
+    fileName: 'textarea',
+    code: `<div data-sonance-name="textarea" className="space-y-2">
+  <label className="text-sm font-medium text-foreground">Message</label>
+  <textarea
+    placeholder="Enter your message..."
+    rows={4}
+    className="w-full px-4 py-2 border border-input-border rounded-sm bg-input text-foreground placeholder:text-input-placeholder focus:outline-none focus:ring-1 focus:ring-input-focus resize-none"
+  />
+</div>`,
+  },
+  {
+    id: 'checkbox',
+    name: 'Checkbox',
+    category: 'Forms',
+    description: 'Checkbox with label',
+    fileName: 'checkbox',
+    code: `<label data-sonance-name="checkbox" className="flex items-center gap-3 cursor-pointer">
+  <input
+    type="checkbox"
+    className="h-4 w-4 rounded border-border text-primary focus:ring-primary"
+  />
+  <span className="text-sm text-foreground">Accept terms and conditions</span>
+</label>`,
+  },
+  {
+    id: 'radio-group',
+    name: 'Radio Group',
+    category: 'Forms',
+    description: 'Radio button group',
+    fileName: 'radio-group',
+    code: `<div data-sonance-name="radio-group" className="space-y-3">
+  <label className="flex items-center gap-3 cursor-pointer">
+    <input type="radio" name="option" className="h-4 w-4 border-border text-primary focus:ring-primary" />
+    <span className="text-sm text-foreground">Option One</span>
+  </label>
+  <label className="flex items-center gap-3 cursor-pointer">
+    <input type="radio" name="option" className="h-4 w-4 border-border text-primary focus:ring-primary" />
+    <span className="text-sm text-foreground">Option Two</span>
+  </label>
+</div>`,
+  },
+  {
+    id: 'select',
+    name: 'Select',
+    category: 'Forms',
+    description: 'Dropdown select input',
+    fileName: 'select',
+    code: `<div data-sonance-name="select" className="space-y-2">
+  <label className="text-sm font-medium text-foreground">Choose option</label>
+  <select className="w-full px-4 py-2 border border-input-border rounded-sm bg-input text-foreground focus:outline-none focus:ring-1 focus:ring-input-focus">
+    <option>Select an option</option>
+    <option>Option 1</option>
+    <option>Option 2</option>
+  </select>
+</div>`,
+  },
+  {
+    id: 'switch',
+    name: 'Switch',
+    category: 'Forms',
+    description: 'Toggle switch control',
+    fileName: 'switch',
+    code: `<label data-sonance-name="switch" className="flex items-center gap-3 cursor-pointer">
+  <button
+    role="switch"
+    aria-checked="true"
+    className="relative h-6 w-11 rounded-full bg-primary transition-colors"
+  >
+    <span className="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition-transform translate-x-5" />
+  </button>
+  <span className="text-sm text-foreground">Enable notifications</span>
+</label>`,
+  },
+  {
+    id: 'slider',
+    name: 'Slider',
+    category: 'Forms',
+    description: 'Range slider input',
+    fileName: 'slider',
+    code: `<div data-sonance-name="slider" className="space-y-2">
+  <label className="text-sm font-medium text-foreground">Volume</label>
+  <input
+    type="range"
+    min="0"
+    max="100"
+    defaultValue="50"
+    className="w-full h-2 rounded-full bg-background-secondary accent-primary"
+  />
+</div>`,
+  },
+  {
+    id: 'calendar',
+    name: 'Calendar',
+    category: 'Forms',
+    description: 'Date selection calendar',
+    fileName: 'calendar',
+    code: `<div data-sonance-name="calendar" className="p-3 border border-border rounded-sm inline-block bg-card">
+  <div className="flex justify-between items-center mb-4">
+    <button className="p-1 hover:bg-background-secondary rounded-sm">←</button>
+    <span className="text-sm font-medium">January 2024</span>
+    <button className="p-1 hover:bg-background-secondary rounded-sm">→</button>
+  </div>
+  <div className="grid grid-cols-7 gap-1 text-center text-xs mb-2">
+    <div className="text-foreground-muted">Su</div>
+    <div className="text-foreground-muted">Mo</div>
+    <div className="text-foreground-muted">Tu</div>
+    <div className="text-foreground-muted">We</div>
+    <div className="text-foreground-muted">Th</div>
+    <div className="text-foreground-muted">Fr</div>
+    <div className="text-foreground-muted">Sa</div>
+  </div>
+  <div className="grid grid-cols-7 gap-1 text-center text-sm">
+    <button className="p-2 rounded-sm hover:bg-background-secondary text-foreground-muted">29</button>
+    <button className="p-2 rounded-sm hover:bg-background-secondary text-foreground-muted">30</button>
+    <button className="p-2 rounded-sm hover:bg-background-secondary text-foreground-muted">31</button>
+    <button className="p-2 rounded-sm hover:bg-background-secondary">1</button>
+    <button className="p-2 rounded-sm hover:bg-background-secondary">2</button>
+    <button className="p-2 rounded-sm bg-primary text-primary-foreground">3</button>
+    <button className="p-2 rounded-sm hover:bg-background-secondary">4</button>
+  </div>
+</div>`,
+  },
+  {
+    id: 'date-picker',
+    name: 'Date Picker',
+    category: 'Forms',
+    description: 'Input with calendar popover',
+    fileName: 'date-picker',
+    code: `<div data-sonance-name="date-picker" className="relative inline-block">
+  <button className="w-[240px] flex items-center justify-between px-3 py-2 text-sm border border-input-border rounded-sm bg-input text-foreground hover:bg-background-secondary">
+    <span>Pick a date</span>
+    <span className="opacity-50">📅</span>
+  </button>
+</div>`,
+  },
+  {
+    id: 'input-otp',
+    name: 'Input OTP',
+    category: 'Forms',
+    description: 'One-time password input',
+    fileName: 'input-otp',
+    code: `<div data-sonance-name="input-otp" className="flex gap-2">
+  {[1, 2, 3, 4, 5, 6].map((i) => (
+    <div key={i} className="relative w-10 h-12">
+      <input
+        type="text"
+        className="w-full h-full text-center border border-input-border rounded-sm bg-input text-foreground focus:outline-none focus:ring-1 focus:ring-input-focus"
+        maxLength={1}
+      />
+    </div>
+  ))}
+</div>`,
+  },
+  {
+    id: 'number-input',
+    name: 'Number Input',
+    category: 'Forms',
+    description: 'Numeric input with controls',
+    fileName: 'number-input',
+    code: `<div data-sonance-name="number-input" className="flex items-center border border-input-border rounded-sm w-32">
+  <button className="px-3 py-2 text-foreground hover:bg-background-secondary border-r border-input-border">-</button>
+  <input
+    type="number"
+    className="w-full text-center bg-input text-foreground focus:outline-none py-2"
+    defaultValue="1"
+  />
+  <button className="px-3 py-2 text-foreground hover:bg-background-secondary border-l border-input-border">+</button>
+</div>`,
+  },
+  {
+    id: 'toggle',
+    name: 'Toggle',
+    category: 'Forms',
+    description: 'Toggle button state',
+    fileName: 'toggle',
+    code: `<button data-sonance-name="toggle" className="p-2 rounded-sm hover:bg-background-secondary data-[state=on]:bg-background-secondary data-[state=on]:text-foreground">
+  <span className="sr-only">Toggle bold</span>
+  <span className="font-bold">B</span>
+</button>`,
+  },
+  {
+    id: 'toggle-group',
+    name: 'Toggle Group',
+    category: 'Forms',
+    description: 'Group of toggle buttons',
+    fileName: 'toggle-group',
+    code: `<div data-sonance-name="toggle-group" className="inline-flex rounded-sm border border-border p-1 gap-1">
+  <button className="px-3 py-1.5 text-xs font-medium rounded-sm hover:bg-background-secondary">Left</button>
+  <button className="px-3 py-1.5 text-xs font-medium rounded-sm bg-background-secondary text-foreground shadow-sm">Center</button>
+  <button className="px-3 py-1.5 text-xs font-medium rounded-sm hover:bg-background-secondary">Right</button>
+</div>`,
+  },
+
+  // ============================================
+  // LAYOUT
+  // ============================================
+  {
+    id: 'card',
+    name: 'Card',
+    category: 'Layout',
+    description: 'Basic content card container',
+    fileName: 'card',
+    code: `<div data-sonance-name="card" className="bg-card border border-card-border rounded-sm p-6">
+  <h3 className="text-lg font-medium text-foreground">Card Title</h3>
+  <p className="text-foreground-secondary mt-2">Card content goes here.</p>
+</div>`,
+  },
+  {
+    id: 'accordion',
+    name: 'Accordion',
+    category: 'Layout',
+    description: 'Expandable content section',
+    fileName: 'accordion',
+    code: `<div data-sonance-name="accordion" className="border border-border rounded-sm divide-y divide-border">
+  <details className="group">
+    <summary className="flex items-center justify-between px-4 py-3 cursor-pointer text-foreground font-medium">
+      Section Title
+      <span className="transition-transform group-open:rotate-180">▼</span>
+    </summary>
+    <div className="px-4 py-3 text-foreground-secondary text-sm">
+      Accordion content goes here.
+    </div>
+  </details>
+</div>`,
+  },
+  {
+    id: 'tabs',
+    name: 'Tabs',
+    category: 'Layout',
+    description: 'Tab navigation component',
+    fileName: 'tabs',
+    code: `<div data-sonance-name="tabs" className="border-b border-border">
+  <nav className="flex gap-4">
+    <button className="px-4 py-2 text-sm font-medium border-b-2 border-primary text-primary">
+      Tab 1
+    </button>
+    <button className="px-4 py-2 text-sm font-medium text-foreground-muted hover:text-foreground">
+      Tab 2
+    </button>
+    <button className="px-4 py-2 text-sm font-medium text-foreground-muted hover:text-foreground">
+      Tab 3
+    </button>
+  </nav>
+</div>`,
+  },
+  {
+    id: 'separator',
+    name: 'Separator',
+    category: 'Layout',
+    description: 'Horizontal divider line',
+    fileName: 'separator',
+    code: `<div data-sonance-name="separator" className="h-px bg-border my-4" />`,
+  },
+  {
+    id: 'aspect-ratio',
+    name: 'Aspect Ratio',
+    category: 'Layout',
+    description: 'Fixed aspect ratio container',
+    fileName: 'aspect-ratio',
+    code: `<div data-sonance-name="aspect-ratio" className="relative aspect-video bg-background-secondary rounded-sm overflow-hidden">
+  <img src="/placeholder.jpg" alt="Media" className="object-cover w-full h-full" />
+</div>`,
+  },
+  {
+    id: 'scroll-area',
+    name: 'Scroll Area',
+    category: 'Layout',
+    description: 'Custom scrollable area',
+    fileName: 'scroll-area',
+    code: `<div data-sonance-name="scroll-area" className="h-[200px] w-[350px] rounded-md border border-border p-4 overflow-y-auto">
+  <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+  {Array.from({ length: 50 }).map((_, i) => (
+    <div key={i} className="text-sm border-b border-border py-2 last:border-0">
+      Tag {i + 1}
+    </div>
+  ))}
+</div>`,
+  },
+  {
+    id: 'resizable',
+    name: 'Resizable',
+    category: 'Layout',
+    description: 'Resizable panel group',
+    fileName: 'resizable',
+    code: `<div data-sonance-name="resizable" className="flex h-[200px] w-full max-w-md items-center justify-center rounded-md border border-border">
+  <div className="w-[50%] p-6">
+    <span className="font-semibold">One</span>
+  </div>
+  <div className="w-px h-full bg-border cursor-col-resize flex items-center justify-center">
+    <div className="h-4 w-1 bg-foreground-muted rounded-full" />
+  </div>
+  <div className="w-[50%] p-6">
+    <span className="font-semibold">Two</span>
+  </div>
+</div>`,
+  },
+  {
+    id: 'collapsible',
+    name: 'Collapsible',
+    category: 'Layout',
+    description: 'Interactive component which expands/collapses a panel',
+    fileName: 'collapsible',
+    code: `<div data-sonance-name="collapsible" className="w-[350px] space-y-2">
+  <div className="flex items-center justify-between space-x-4 px-4">
+    <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
+    <button className="p-2 hover:bg-background-secondary rounded-sm">▼</button>
+  </div>
+  <div className="rounded-md border border-border px-4 py-3 font-mono text-sm">
+    @radix-ui/primitives
+  </div>
+  <div className="rounded-md border border-border px-4 py-3 font-mono text-sm">
+    @radix-ui/colors
+  </div>
+</div>`,
+  },
+
+  // ============================================
+  // OVERLAYS
+  // ============================================
+  {
+    id: 'popover',
+    name: 'Popover',
+    category: 'Overlays',
+    description: 'Floating content panel',
+    fileName: 'popover',
+    code: `<div data-sonance-name="popover" className="relative inline-block">
+  <button className="text-sm font-medium text-foreground border-b border-dashed border-border">Open Popover</button>
+  <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none z-50">
+    <div className="space-y-2">
+      <h4 className="font-medium leading-none">Dimensions</h4>
+      <p className="text-sm text-foreground-muted">Set the dimensions for the layer.</p>
+    </div>
+  </div>
+</div>`,
+  },
+  {
+    id: 'hover-card',
+    name: 'Hover Card',
+    category: 'Overlays',
+    description: 'Preview card on hover',
+    fileName: 'hover-card',
+    code: `<div data-sonance-name="hover-card" className="relative inline-block group">
+  <button className="text-sm font-medium underline decoration-dotted">@nextjs</button>
+  <div className="absolute top-full left-0 mt-2 w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md opacity-0 group-hover:opacity-100 transition-opacity z-50">
+    <div className="flex justify-between space-x-4">
+      <div className="space-y-1">
+        <h4 className="text-sm font-semibold">@nextjs</h4>
+        <p className="text-sm">The React Framework – created and maintained by @vercel.</p>
+        <div className="flex items-center pt-2">
+          <span className="text-xs text-foreground-muted">Joined December 2021</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>`,
+  },
+  {
+    id: 'context-menu',
+    name: 'Context Menu',
+    category: 'Overlays',
+    description: 'Right-click menu',
+    fileName: 'context-menu',
+    code: `<div data-sonance-name="context-menu" className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-border text-sm">
+  Right click here
+  
+  {/* Hidden menu structure */}
+  <div className="hidden absolute w-64 rounded-md border border-border bg-popover p-1 shadow-md">
+    <div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+      Back
+      <span className="ml-auto text-xs tracking-widest text-foreground-muted">⌘[</span>
+    </div>
+    <div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+      Forward
+      <span className="ml-auto text-xs tracking-widest text-foreground-muted">⌘]</span>
+    </div>
+    <div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+      Reload
+      <span className="ml-auto text-xs tracking-widest text-foreground-muted">⌘R</span>
+    </div>
+  </div>
+</div>`,
+  },
+  {
+    id: 'alert-dialog',
+    name: 'Alert Dialog',
+    category: 'Overlays',
+    description: 'Modal that interrupts user',
+    fileName: 'alert-dialog',
+    code: `<div data-sonance-name="alert-dialog" className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center">
+  <div className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg">
+    <div className="flex flex-col space-y-2 text-center sm:text-left">
+      <h2 className="text-lg font-semibold text-foreground">Are you absolutely sure?</h2>
+      <p className="text-sm text-foreground-muted">
+        This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+      </p>
+    </div>
+    <div className="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+      <button className="px-4 py-2 border border-border rounded-sm hover:bg-accent">Cancel</button>
+      <button className="px-4 py-2 bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-sm">Continue</button>
+    </div>
+  </div>
+</div>`,
+  },
+
+  // ============================================
+  // NAVIGATION
+  // ============================================
+  {
+    id: 'breadcrumb',
+    name: 'Breadcrumb',
+    category: 'Navigation',
+    description: 'Navigation breadcrumb trail',
+    fileName: 'breadcrumbs',
+    code: `<nav data-sonance-name="breadcrumb" className="flex items-center gap-2 text-sm">
+  <a href="#" className="text-foreground-muted hover:text-foreground">Home</a>
+  <span className="text-foreground-muted">/</span>
+  <a href="#" className="text-foreground-muted hover:text-foreground">Products</a>
+  <span className="text-foreground-muted">/</span>
+  <span className="text-foreground font-medium">Current Page</span>
+</nav>`,
+  },
+  {
+    id: 'pagination',
+    name: 'Pagination',
+    category: 'Navigation',
+    description: 'Page navigation controls',
+    fileName: 'pagination',
+    code: `<nav data-sonance-name="pagination" className="flex items-center gap-1">
+  <button className="px-3 py-1.5 text-sm border border-border rounded-sm hover:bg-background-secondary">Prev</button>
+  <button className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-sm">1</button>
+  <button className="px-3 py-1.5 text-sm border border-border rounded-sm hover:bg-background-secondary">2</button>
+  <button className="px-3 py-1.5 text-sm border border-border rounded-sm hover:bg-background-secondary">3</button>
+  <button className="px-3 py-1.5 text-sm border border-border rounded-sm hover:bg-background-secondary">Next</button>
+</nav>`,
+  },
+  {
+    id: 'dropdown-menu',
+    name: 'Dropdown Menu',
+    category: 'Navigation',
+    description: 'Dropdown menu structure',
+    fileName: 'dropdown-menu',
+    code: `<div data-sonance-name="dropdown-menu" className="relative inline-block">
+  <button className="px-4 py-2 text-sm border border-border rounded-sm hover:bg-background-secondary">
+    Options ▼
+  </button>
+  <div className="absolute top-full left-0 mt-1 w-48 bg-card border border-card-border rounded-sm shadow-lg py-1 z-10">
+    <a href="#" className="block px-4 py-2 text-sm text-foreground hover:bg-background-secondary">Edit</a>
+    <a href="#" className="block px-4 py-2 text-sm text-foreground hover:bg-background-secondary">Duplicate</a>
+    <a href="#" className="block px-4 py-2 text-sm text-destructive hover:bg-background-secondary">Delete</a>
+  </div>
+</div>`,
+  },
+  {
+    id: 'navigation-menu',
+    name: 'Navigation Menu',
+    category: 'Navigation',
+    description: 'Main navigation bar structure',
+    fileName: 'navigation-menu',
+    code: `<nav data-sonance-name="navigation-menu" className="flex items-center space-x-6 text-sm font-medium">
+  <a href="#" className="text-foreground transition-colors hover:text-foreground/80">Documentation</a>
+  <a href="#" className="text-foreground/60 transition-colors hover:text-foreground">Components</a>
+  <a href="#" className="text-foreground/60 transition-colors hover:text-foreground">Themes</a>
+  <a href="#" className="text-foreground/60 transition-colors hover:text-foreground">Examples</a>
+</nav>`,
+  },
+  {
+    id: 'menubar',
+    name: 'Menubar',
+    category: 'Navigation',
+    description: 'Desktop application menu bar',
+    fileName: 'menubar',
+    code: `<div data-sonance-name="menubar" className="flex h-10 items-center space-x-1 border rounded-md border-border bg-background p-1">
+  <button className="px-3 py-1 text-sm font-medium hover:bg-background-secondary rounded-sm">File</button>
+  <button className="px-3 py-1 text-sm font-medium hover:bg-background-secondary rounded-sm">Edit</button>
+  <button className="px-3 py-1 text-sm font-medium hover:bg-background-secondary rounded-sm">View</button>
+  <button className="px-3 py-1 text-sm font-medium hover:bg-background-secondary rounded-sm">Profile</button>
+</div>`,
+  },
+  {
+    id: 'sidebar',
+    name: 'Sidebar',
+    category: 'Navigation',
+    description: 'Vertical sidebar navigation',
+    fileName: 'sidebar',
+    code: `<div data-sonance-name="sidebar" className="w-64 h-full border-r border-border bg-card p-4">
+  <div className="mb-8">
+    <h2 className="px-2 text-lg font-semibold tracking-tight">Discover</h2>
+    <div className="space-y-1 mt-2">
+      <button className="w-full justify-start text-left px-2 py-1.5 text-sm font-medium bg-background-secondary rounded-sm text-foreground">Listen Now</button>
+      <button className="w-full justify-start text-left px-2 py-1.5 text-sm font-medium hover:bg-background-secondary rounded-sm text-foreground-muted hover:text-foreground">Browse</button>
+      <button className="w-full justify-start text-left px-2 py-1.5 text-sm font-medium hover:bg-background-secondary rounded-sm text-foreground-muted hover:text-foreground">Radio</button>
+    </div>
+  </div>
+</div>`,
+  },
+  {
+    id: 'sheet',
+    name: 'Sheet/Drawer',
+    category: 'Navigation',
+    description: 'Slide-out panel',
+    fileName: 'sheet',
+    code: `<div data-sonance-name="sheet" className="fixed inset-y-0 right-0 z-50 w-3/4 gap-4 border-l border-border bg-background p-6 shadow-lg sm:max-w-sm">
+  <div className="flex flex-col space-y-2 text-center sm:text-left">
+    <h2 className="text-lg font-semibold text-foreground">Edit profile</h2>
+    <p className="text-sm text-foreground-muted">Make changes to your profile here. Click save when you're done.</p>
+  </div>
+  <div className="grid gap-4 py-4">
+    <div className="grid grid-cols-4 items-center gap-4">
+      <label className="text-right text-sm font-medium">Name</label>
+      <input className="col-span-3 px-3 py-2 border border-input-border rounded-sm bg-input" value="Pedro Duarte" />
+    </div>
+  </div>
+  <div className="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+    <button className="bg-primary text-primary-foreground px-4 py-2 rounded-sm text-sm font-medium">Save changes</button>
+  </div>
+</div>`,
+  },
+
+  // ============================================
+  // DATA DISPLAY
+  // ============================================
+  {
+    id: 'avatar',
+    name: 'Avatar',
+    category: 'Data Display',
+    description: 'User avatar with fallback',
+    fileName: 'avatar',
+    code: `<div data-sonance-name="avatar" className="flex items-center gap-3">
+  <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-medium">
+    JD
+  </div>
+  <div>
+    <p className="text-sm font-medium text-foreground">John Doe</p>
+    <p className="text-xs text-foreground-muted">john@example.com</p>
+  </div>
+</div>`,
+  },
+  {
+    id: 'badge',
+    name: 'Badge',
+    category: 'Data Display',
+    description: 'Small status or label badge',
+    fileName: 'badge',
+    code: `<span data-sonance-name="badge" className="inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full bg-primary text-primary-foreground">
+  Badge
+</span>`,
+  },
+  {
+    id: 'badge-outline',
+    name: 'Badge (Outline)',
+    category: 'Data Display',
+    description: 'Outline style badge',
+    fileName: 'badge',
+    code: `<span data-sonance-name="badge-outline" className="inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full border border-border text-foreground">
+  Outline
+</span>`,
+  },
+  {
+    id: 'table',
+    name: 'Table',
+    category: 'Data Display',
+    description: 'Data table structure',
+    fileName: 'table',
+    code: `<table data-sonance-name="table" className="w-full text-sm">
+  <thead>
+    <tr className="border-b border-border">
+      <th className="text-left py-3 px-4 font-medium text-foreground">Name</th>
+      <th className="text-left py-3 px-4 font-medium text-foreground">Status</th>
+      <th className="text-right py-3 px-4 font-medium text-foreground">Amount</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr className="border-b border-border hover:bg-background-secondary">
+      <td className="py-3 px-4 text-foreground">Item One</td>
+      <td className="py-3 px-4 text-foreground-secondary">Active</td>
+      <td className="py-3 px-4 text-foreground text-right">$100.00</td>
+    </tr>
+  </tbody>
+</table>`,
+  },
+
+  {
+    id: 'carousel',
+    name: 'Carousel',
+    category: 'Data Display',
+    description: 'Image/content slider',
+    fileName: 'carousel',
+    code: `<div data-sonance-name="carousel" className="relative w-full max-w-xs mx-auto">
+  <div className="overflow-hidden rounded-md border border-border">
+    <div className="flex">
+      <div className="min-w-full h-48 bg-background-secondary flex items-center justify-center">Slide 1</div>
+    </div>
+  </div>
+  <button className="absolute left-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-background/80 hover:bg-background border border-border flex items-center justify-center">←</button>
+  <button className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-background/80 hover:bg-background border border-border flex items-center justify-center">→</button>
+</div>`,
+  },
+  {
+    id: 'chart',
+    name: 'Chart (Bar)',
+    category: 'Data Display',
+    description: 'Basic bar chart visualization',
+    fileName: 'chart',
+    code: `<div data-sonance-name="chart" className="h-[200px] w-full border border-border rounded-md p-4 flex items-end justify-between gap-2">
+  <div className="w-8 bg-primary/20 hover:bg-primary/30 rounded-t-sm h-[40%]" />
+  <div className="w-8 bg-primary/20 hover:bg-primary/30 rounded-t-sm h-[70%]" />
+  <div className="w-8 bg-primary rounded-t-sm h-[100%]" />
+  <div className="w-8 bg-primary/20 hover:bg-primary/30 rounded-t-sm h-[50%]" />
+  <div className="w-8 bg-primary/20 hover:bg-primary/30 rounded-t-sm h-[30%]" />
+</div>`,
+  },
+  {
+    id: 'code',
+    name: 'Code Block',
+    category: 'Data Display',
+    description: 'Inline or block code',
+    fileName: 'code',
+    code: `<pre data-sonance-name="code" className="rounded-lg border border-border bg-background-secondary p-4 overflow-x-auto">
+  <code className="text-sm font-mono text-foreground">
+    {JSON.stringify({ hello: 'world' }, null, 2)}
+  </code>
+</pre>`,
+  },
+  {
+    id: 'kbd',
+    name: 'Keyboard Input',
+    category: 'Data Display',
+    description: 'Keyboard shortcut indicator',
+    fileName: 'kbd',
+    code: `<kbd data-sonance-name="kbd" className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-background-secondary px-1.5 font-mono text-[10px] font-medium text-foreground-muted opacity-100">
+  <span className="text-xs">⌘</span>K
+</kbd>`,
+  },
+  {
+    id: 'command',
+    name: 'Command Menu',
+    category: 'Data Display',
+    description: 'Command palette interface',
+    fileName: 'command',
+    code: `<div data-sonance-name="command" className="rounded-lg border border-border bg-popover text-popover-foreground shadow-md w-[400px]">
+  <div className="flex items-center border-b border-border px-3">
+    <span className="mr-2 opacity-50">🔍</span>
+    <input className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-foreground-muted disabled:cursor-not-allowed disabled:opacity-50" placeholder="Type a command or search..." />
+  </div>
+  <div className="max-h-[300px] overflow-y-auto overflow-x-hidden p-1">
+    <div className="px-2 py-1.5 text-xs font-medium text-foreground-muted">Suggestions</div>
+    <div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground">Calendar</div>
+    <div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground">Search Emoji</div>
+    <div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground">Calculator</div>
+  </div>
+</div>`,
+  },
+
+  {
+    id: 'user',
+    name: 'User',
+    category: 'Data Display',
+    description: 'User profile with avatar',
+    fileName: 'user',
+    code: `<div data-sonance-name="user" className="flex items-center gap-2">
+  <div className="relative h-10 w-10 overflow-hidden rounded-full bg-background-secondary">
+  <div className="flex h-full w-full items-center justify-center bg-primary text-primary-foreground text-sm font-medium">U</div>
+  </div>
+  <div className="flex flex-col">
+    <p className="text-sm font-medium text-foreground">Username</p>
+    <p className="text-xs text-foreground-muted">user@example.com</p>
+  </div>
+</div>`,
+  },
+  {
+    id: 'image',
+    name: 'Image',
+    category: 'Data Display',
+    description: 'Responsive image',
+    fileName: 'image',
+    code: `<img
+  data-sonance-name="image"
+  src="/placeholder.jpg"
+  alt="Description"
+  className="h-auto w-full max-w-sm rounded-md border border-border shadow-sm"
+  loading="lazy"
+  />`,
+  },
+  
+  // ============================================
+  // FEEDBACK
+  // ============================================
+  {
+    id: 'alert',
+    name: 'Alert',
+    category: 'Feedback',
+    description: 'Information alert box',
+    fileName: 'alert',
+    code: `<div data-sonance-name="alert" className="bg-info-light border border-info/20 rounded-sm p-4">
+  <p className="text-sm text-info font-medium">Information</p>
+  <p className="text-sm text-foreground-secondary mt-1">This is an informational message.</p>
+</div>`,
+  },
+  {
+    id: 'alert-destructive',
+    name: 'Alert (Destructive)',
+    category: 'Feedback',
+    description: 'Error/danger alert box',
+    fileName: 'alert',
+    code: `<div data-sonance-name="alert-destructive" className="bg-destructive/10 border border-destructive/20 rounded-sm p-4">
+  <p className="text-sm text-destructive font-medium">Error</p>
+  <p className="text-sm text-foreground-secondary mt-1">Something went wrong. Please try again.</p>
+</div>`,
+  },
+  {
+    id: 'progress',
+    name: 'Progress Bar',
+    category: 'Feedback',
+    description: 'Progress indicator',
+    fileName: 'progress',
+    code: `<div data-sonance-name="progress" className="space-y-2">
+  <div className="flex justify-between text-sm">
+    <span className="text-foreground">Progress</span>
+    <span className="text-foreground-muted">60%</span>
+  </div>
+  <div className="h-2 bg-background-secondary rounded-full overflow-hidden">
+    <div className="h-full bg-primary rounded-full" style={{ width: '60%' }} />
+  </div>
+</div>`,
+  },
+  {
+    id: 'skeleton',
+    name: 'Skeleton',
+    category: 'Feedback',
+    description: 'Loading placeholder',
+    fileName: 'skeleton',
+    code: `<div data-sonance-name="skeleton" className="space-y-3 animate-pulse">
+  <div className="h-4 bg-background-secondary rounded w-3/4" />
+  <div className="h-4 bg-background-secondary rounded w-1/2" />
+  <div className="h-4 bg-background-secondary rounded w-5/6" />
+</div>`,
+  },
+  {
+    id: 'spinner',
+    name: 'Spinner',
+    category: 'Feedback',
+    description: 'Loading spinner',
+    fileName: 'spinner',
+    code: `<div data-sonance-name="spinner" className="flex items-center justify-center">
+  <div className="h-6 w-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+</div>`,
+  },
+  {
+    id: 'tooltip',
+    name: 'Tooltip',
+    category: 'Feedback',
+    description: 'Tooltip hint structure',
+    fileName: 'tooltip',
+    code: `<div data-sonance-name="tooltip" className="relative inline-block group">
+  <button className="text-foreground underline">Hover me</button>
+  <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-foreground text-background text-xs rounded-sm opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
+    Tooltip text
+  </div>
+</div>`,
+  },
+  {
+    id: 'dialog',
+    name: 'Dialog/Modal',
+    category: 'Feedback',
+    description: 'Modal dialog structure',
+    fileName: 'dialog',
+    code: `<div data-sonance-name="dialog" className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+  <div className="bg-card border border-card-border rounded-sm p-6 w-full max-w-md shadow-xl">
+    <h2 className="text-lg font-medium text-foreground">Dialog Title</h2>
+    <p className="text-sm text-foreground-secondary mt-2">Dialog content goes here.</p>
+    <div className="flex justify-end gap-2 mt-6">
+      <button className="px-4 py-2 text-sm border border-border rounded-sm">Cancel</button>
+      <button className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-sm">Confirm</button>
+    </div>
+  </div>
+</div>`,
+  },
+  {
+    id: 'toast',
+    name: 'Toast',
+    category: 'Feedback',
+    description: 'Toast notification',
+    fileName: 'toast',
+    code: `<div data-sonance-name="toast" className="fixed bottom-4 right-4 bg-card border border-card-border rounded-sm p-4 shadow-lg max-w-sm">
+  <div className="flex items-start gap-3">
+    <div className="flex-1">
+      <p className="text-sm font-medium text-foreground">Success!</p>
+      <p className="text-sm text-foreground-secondary mt-1">Your changes have been saved.</p>
+    </div>
+    <button className="text-foreground-muted hover:text-foreground">×</button>
+  </div>
+</div>`,
+  },
+
+  // ============================================
+  // TYPOGRAPHY (No component files - these are base elements)
+  // ============================================
+  {
+    id: 'section-header',
+    name: 'Section Header',
+    category: 'Typography',
+    description: 'Standard section header with category label',
+    code: `<div data-sonance-name="section-header" className="mb-8">
+  <p className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
+    Category
+  </p>
+  <h2 className="text-4xl font-light text-foreground tracking-tight">
+    Headline
+  </h2>
+</div>`,
+  },
+  {
+    id: 'heading-display',
+    name: 'Display Heading',
+    category: 'Typography',
+    description: 'Large display heading',
+    code: `<h1 data-sonance-name="heading-display" className="text-5xl font-light text-foreground tracking-tight leading-tight">
+  Display Heading
+</h1>`,
+  },
+  {
+    id: 'body-text',
+    name: 'Body Text',
+    category: 'Typography',
+    description: 'Standard paragraph text',
+    code: `<p data-sonance-name="body-text" className="text-base text-foreground leading-relaxed max-w-prose">
+  This is body text. It uses the default font weight and is optimized for readability with proper line height and max width constraints.
+</p>`,
+  },
+  {
+    id: 'link',
+    name: 'Link',
+    category: 'Typography',
+    description: 'Inline text link',
+    code: `<a data-sonance-name="link" href="#" className="text-primary hover:text-primary-hover underline underline-offset-2 transition-colors">
+  Link text
+</a>`,
+  },
+];
+
+// ---- Preview Components (for component browser) ----
+
+export const previewComponents = [
+  { id: 'button', name: 'Button', category: 'Forms' },
+  { id: 'input', name: 'Input', category: 'Forms' },
+  { id: 'checkbox', name: 'Checkbox', category: 'Forms' },
+  { id: 'switch', name: 'Switch', category: 'Forms' },
+  { id: 'select', name: 'Select', category: 'Forms' },
+  { id: 'card', name: 'Card', category: 'Data Display' },
+  { id: 'badge', name: 'Badge', category: 'Feedback' },
+  { id: 'alert', name: 'Alert', category: 'Feedback' },
+  { id: 'avatar', name: 'Avatar', category: 'Data Display' },
+  { id: 'tabs', name: 'Tabs', category: 'Navigation' },
+];