From aa51074380f61406a50ff9e5a358a9bd607d5400 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sun, 18 Jan 2026 19:45:25 +0000
Subject: [PATCH] Remove 123 simple TypeScript components now defined in JSON

Deleted files:
- 71 simple atoms (ActionIcon, Alert, AppLogo, Avatar, Badge, Chip, etc.)
- 21 simple molecules (ActionBar, AppBranding, DataCard, etc.)
- 8 simple organisms (EmptyCanvasState, PageHeader, SchemaEditorCanvas, etc.)
- 23 simple UI components (accordion, alert, button, card, etc.)

Changes:
- Created cleanup-simple-components.ts script to automate deletion
- Created update-index-exports.ts script to update index files
- Updated index.ts in atoms/, molecules/, organisms/ to remove deleted exports
- Installed npm dependencies

Remaining TypeScript components (kept for complexity):
- 46 atoms wrapping UI or with hooks
- 20 molecules with complex logic
- 6 organisms with state management
- 11 UI components with advanced features

Total: 317 components now have JSON definitions, 123 TypeScript files deleted (39% reduction)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .claude/settings.local.json                   |   3 +-
 package-lock.json                             |  59 ---
 scripts/cleanup-simple-components.ts          | 115 +++++
 scripts/update-index-exports.ts               |  76 ++++
 src/components/atoms/ActionIcon.tsx           |  22 -
 src/components/atoms/Alert.tsx                |  51 ---
 src/components/atoms/AppLogo.tsx              |   9 -
 src/components/atoms/Avatar.tsx               |  37 --
 src/components/atoms/AvatarGroup.tsx          |  60 ---
 src/components/atoms/Breadcrumb.tsx           |  53 ---
 src/components/atoms/ButtonGroup.tsx          |  33 --
 src/components/atoms/Checkbox.tsx             |  60 ---
 src/components/atoms/Chip.tsx                 |  54 ---
 src/components/atoms/Code.tsx                 |  34 --
 src/components/atoms/ColorSwatch.tsx          |  46 --
 src/components/atoms/Container.tsx            |  24 -
 src/components/atoms/DataList.tsx             |  55 ---
 src/components/atoms/Divider.tsx              |  25 --
 src/components/atoms/Dot.tsx                  |  53 ---
 src/components/atoms/Drawer.tsx               |  80 ----
 src/components/atoms/EmptyStateIcon.tsx       |  17 -
 src/components/atoms/FileIcon.tsx             |  19 -
 src/components/atoms/Flex.tsx                 |  83 ----
 src/components/atoms/Grid.tsx                 |  34 --
 src/components/atoms/Heading.tsx              |  24 -
 src/components/atoms/HelperText.tsx           |  22 -
 src/components/atoms/IconText.tsx             |  36 --
 src/components/atoms/IconWrapper.tsx          |  32 --
 src/components/atoms/InfoBox.tsx              |  41 --
 src/components/atoms/InfoPanel.tsx            |  44 --
 src/components/atoms/Input.tsx                |  58 ---
 src/components/atoms/Kbd.tsx                  |  21 -
 src/components/atoms/KeyValue.tsx             |  34 --
 src/components/atoms/Label.tsx                |  24 -
 src/components/atoms/Link.tsx                 |  40 --
 src/components/atoms/List.tsx                 |  35 --
 src/components/atoms/ListItem.tsx             |  32 --
 src/components/atoms/LiveIndicator.tsx        |  49 --
 src/components/atoms/LoadingSpinner.tsx       |  20 -
 src/components/atoms/LoadingState.tsx         |  31 --
 src/components/atoms/MetricDisplay.tsx        |  52 ---
 src/components/atoms/Modal.tsx                |  64 ---
 src/components/atoms/Notification.tsx         |  67 ---
 src/components/atoms/PageHeader.tsx           |  24 -
 src/components/atoms/ProgressBar.tsx          |  62 ---
 src/components/atoms/Pulse.tsx                |  56 ---
 src/components/atoms/Radio.tsx                |  69 ---
 src/components/atoms/Rating.tsx               |  71 ---
 src/components/atoms/ResponsiveGrid.tsx       |  57 ---
 src/components/atoms/ScrollArea.tsx           |  35 --
 src/components/atoms/SearchInput.tsx          |  46 --
 src/components/atoms/Section.tsx              |  24 -
 src/components/atoms/Select.tsx               |  69 ---
 src/components/atoms/Skeleton.tsx             |  36 --
 src/components/atoms/Slider.tsx               |  65 ---
 src/components/atoms/Spacer.tsx               |  31 --
 src/components/atoms/Sparkle.tsx              |  35 --
 src/components/atoms/Spinner.tsx              |  17 -
 src/components/atoms/Stack.tsx                |  63 ---
 src/components/atoms/StatusIcon.tsx           |  25 --
 src/components/atoms/StepIndicator.tsx        |  67 ---
 src/components/atoms/Stepper.tsx              |  67 ---
 src/components/atoms/TabIcon.tsx              |  16 -
 src/components/atoms/Table.tsx                |  84 ----
 src/components/atoms/Tabs.tsx                 |  67 ---
 src/components/atoms/Tag.tsx                  |  59 ---
 src/components/atoms/Text.tsx                 |  22 -
 src/components/atoms/TextArea.tsx             |  42 --
 src/components/atoms/TextGradient.tsx         |  38 --
 src/components/atoms/TextHighlight.tsx        |  27 --
 src/components/atoms/Timeline.tsx             |  83 ----
 src/components/atoms/Timestamp.tsx            |  31 --
 src/components/atoms/Toggle.tsx               |  65 ---
 src/components/atoms/TreeIcon.tsx             |  11 -
 src/components/atoms/index.ts                 |  70 ---
 src/components/molecules/ActionBar.tsx        |  44 --
 src/components/molecules/AppBranding.tsx      |  23 -
 src/components/molecules/DataCard.tsx         |  74 ----
 src/components/molecules/DataSourceCard.tsx   |  69 ---
 src/components/molecules/EditorActions.tsx    |  32 --
 src/components/molecules/EditorToolbar.tsx    |  46 --
 src/components/molecules/EmptyEditorState.tsx |  13 -
 src/components/molecules/EmptyState.tsx       |  29 --
 src/components/molecules/FileTabs.tsx         |  40 --
 src/components/molecules/LabelWithBadge.tsx   |  24 -
 .../molecules/LazyInlineMonacoEditor.tsx      |  56 ---
 src/components/molecules/LazyMonacoEditor.tsx |  54 ---
 src/components/molecules/LoadingFallback.tsx  |  16 -
 src/components/molecules/LoadingState.tsx     |  15 -
 .../molecules/MonacoEditorPanel.tsx           |  11 -
 src/components/molecules/NavigationItem.tsx   |  45 --
 .../molecules/PageHeaderContent.tsx           |  23 -
 src/components/molecules/SearchBar.tsx        |  36 --
 src/components/molecules/StatCard.tsx         |  32 --
 src/components/molecules/TreeCard.tsx         |  75 ----
 src/components/molecules/TreeListHeader.tsx   |  53 ---
 src/components/molecules/index.ts             |  19 -
 src/components/organisms/EmptyCanvasState.tsx |  38 --
 src/components/organisms/PageHeader.tsx       |  27 --
 .../organisms/SchemaEditorCanvas.tsx          |  48 --
 .../organisms/SchemaEditorPropertiesPanel.tsx |  71 ---
 .../organisms/SchemaEditorSidebar.tsx         |  14 -
 .../organisms/SchemaEditorStatusBar.tsx       |  50 ---
 .../organisms/SchemaEditorToolbar.tsx         |  90 ----
 src/components/organisms/ToolbarActions.tsx   |  86 ----
 src/components/organisms/index.ts             |   8 -
 src/components/ui/accordion.tsx               |  64 ---
 src/components/ui/alert.tsx                   |  66 ---
 src/components/ui/aspect-ratio.tsx            |  10 -
 src/components/ui/avatar.tsx                  |  53 ---
 src/components/ui/badge.tsx                   |  46 --
 src/components/ui/button.tsx                  |  64 ---
 src/components/ui/card.tsx                    |  92 ----
 src/components/ui/checkbox.tsx                |  32 --
 src/components/ui/collapsible.tsx             |  32 --
 src/components/ui/hover-card.tsx              |  42 --
 src/components/ui/input.tsx                   |  21 -
 src/components/ui/label.tsx                   |  24 -
 src/components/ui/popover.tsx                 |  48 --
 src/components/ui/progress.tsx                |  29 --
 src/components/ui/radio-group.tsx             |  45 --
 src/components/ui/resizable.tsx               |  54 ---
 src/components/ui/scroll-area.tsx             |  58 ---
 src/components/ui/separator.tsx               |  28 --
 src/components/ui/skeleton.tsx                |  14 -
 src/components/ui/switch.tsx                  |  31 --
 src/components/ui/tabs.tsx                    |  66 ---
 src/components/ui/textarea.tsx                |  18 -
 src/components/ui/toggle.tsx                  |  45 --
 src/components/ui/tooltip.tsx                 |  59 ---
 src/types/json-ui-component-types.ts          | 417 ++++++++++--------
 131 files changed, 433 insertions(+), 5648 deletions(-)
 create mode 100644 scripts/cleanup-simple-components.ts
 create mode 100644 scripts/update-index-exports.ts
 delete mode 100644 src/components/atoms/ActionIcon.tsx
 delete mode 100644 src/components/atoms/Alert.tsx
 delete mode 100644 src/components/atoms/AppLogo.tsx
 delete mode 100644 src/components/atoms/Avatar.tsx
 delete mode 100644 src/components/atoms/AvatarGroup.tsx
 delete mode 100644 src/components/atoms/Breadcrumb.tsx
 delete mode 100644 src/components/atoms/ButtonGroup.tsx
 delete mode 100644 src/components/atoms/Checkbox.tsx
 delete mode 100644 src/components/atoms/Chip.tsx
 delete mode 100644 src/components/atoms/Code.tsx
 delete mode 100644 src/components/atoms/ColorSwatch.tsx
 delete mode 100644 src/components/atoms/Container.tsx
 delete mode 100644 src/components/atoms/DataList.tsx
 delete mode 100644 src/components/atoms/Divider.tsx
 delete mode 100644 src/components/atoms/Dot.tsx
 delete mode 100644 src/components/atoms/Drawer.tsx
 delete mode 100644 src/components/atoms/EmptyStateIcon.tsx
 delete mode 100644 src/components/atoms/FileIcon.tsx
 delete mode 100644 src/components/atoms/Flex.tsx
 delete mode 100644 src/components/atoms/Grid.tsx
 delete mode 100644 src/components/atoms/Heading.tsx
 delete mode 100644 src/components/atoms/HelperText.tsx
 delete mode 100644 src/components/atoms/IconText.tsx
 delete mode 100644 src/components/atoms/IconWrapper.tsx
 delete mode 100644 src/components/atoms/InfoBox.tsx
 delete mode 100644 src/components/atoms/InfoPanel.tsx
 delete mode 100644 src/components/atoms/Input.tsx
 delete mode 100644 src/components/atoms/Kbd.tsx
 delete mode 100644 src/components/atoms/KeyValue.tsx
 delete mode 100644 src/components/atoms/Label.tsx
 delete mode 100644 src/components/atoms/Link.tsx
 delete mode 100644 src/components/atoms/List.tsx
 delete mode 100644 src/components/atoms/ListItem.tsx
 delete mode 100644 src/components/atoms/LiveIndicator.tsx
 delete mode 100644 src/components/atoms/LoadingSpinner.tsx
 delete mode 100644 src/components/atoms/LoadingState.tsx
 delete mode 100644 src/components/atoms/MetricDisplay.tsx
 delete mode 100644 src/components/atoms/Modal.tsx
 delete mode 100644 src/components/atoms/Notification.tsx
 delete mode 100644 src/components/atoms/PageHeader.tsx
 delete mode 100644 src/components/atoms/ProgressBar.tsx
 delete mode 100644 src/components/atoms/Pulse.tsx
 delete mode 100644 src/components/atoms/Radio.tsx
 delete mode 100644 src/components/atoms/Rating.tsx
 delete mode 100644 src/components/atoms/ResponsiveGrid.tsx
 delete mode 100644 src/components/atoms/ScrollArea.tsx
 delete mode 100644 src/components/atoms/SearchInput.tsx
 delete mode 100644 src/components/atoms/Section.tsx
 delete mode 100644 src/components/atoms/Select.tsx
 delete mode 100644 src/components/atoms/Skeleton.tsx
 delete mode 100644 src/components/atoms/Slider.tsx
 delete mode 100644 src/components/atoms/Spacer.tsx
 delete mode 100644 src/components/atoms/Sparkle.tsx
 delete mode 100644 src/components/atoms/Spinner.tsx
 delete mode 100644 src/components/atoms/Stack.tsx
 delete mode 100644 src/components/atoms/StatusIcon.tsx
 delete mode 100644 src/components/atoms/StepIndicator.tsx
 delete mode 100644 src/components/atoms/Stepper.tsx
 delete mode 100644 src/components/atoms/TabIcon.tsx
 delete mode 100644 src/components/atoms/Table.tsx
 delete mode 100644 src/components/atoms/Tabs.tsx
 delete mode 100644 src/components/atoms/Tag.tsx
 delete mode 100644 src/components/atoms/Text.tsx
 delete mode 100644 src/components/atoms/TextArea.tsx
 delete mode 100644 src/components/atoms/TextGradient.tsx
 delete mode 100644 src/components/atoms/TextHighlight.tsx
 delete mode 100644 src/components/atoms/Timeline.tsx
 delete mode 100644 src/components/atoms/Timestamp.tsx
 delete mode 100644 src/components/atoms/Toggle.tsx
 delete mode 100644 src/components/atoms/TreeIcon.tsx
 delete mode 100644 src/components/molecules/ActionBar.tsx
 delete mode 100644 src/components/molecules/AppBranding.tsx
 delete mode 100644 src/components/molecules/DataCard.tsx
 delete mode 100644 src/components/molecules/DataSourceCard.tsx
 delete mode 100644 src/components/molecules/EditorActions.tsx
 delete mode 100644 src/components/molecules/EditorToolbar.tsx
 delete mode 100644 src/components/molecules/EmptyEditorState.tsx
 delete mode 100644 src/components/molecules/EmptyState.tsx
 delete mode 100644 src/components/molecules/FileTabs.tsx
 delete mode 100644 src/components/molecules/LabelWithBadge.tsx
 delete mode 100644 src/components/molecules/LazyInlineMonacoEditor.tsx
 delete mode 100644 src/components/molecules/LazyMonacoEditor.tsx
 delete mode 100644 src/components/molecules/LoadingFallback.tsx
 delete mode 100644 src/components/molecules/LoadingState.tsx
 delete mode 100644 src/components/molecules/MonacoEditorPanel.tsx
 delete mode 100644 src/components/molecules/NavigationItem.tsx
 delete mode 100644 src/components/molecules/PageHeaderContent.tsx
 delete mode 100644 src/components/molecules/SearchBar.tsx
 delete mode 100644 src/components/molecules/StatCard.tsx
 delete mode 100644 src/components/molecules/TreeCard.tsx
 delete mode 100644 src/components/molecules/TreeListHeader.tsx
 delete mode 100644 src/components/organisms/EmptyCanvasState.tsx
 delete mode 100644 src/components/organisms/PageHeader.tsx
 delete mode 100644 src/components/organisms/SchemaEditorCanvas.tsx
 delete mode 100644 src/components/organisms/SchemaEditorPropertiesPanel.tsx
 delete mode 100644 src/components/organisms/SchemaEditorSidebar.tsx
 delete mode 100644 src/components/organisms/SchemaEditorStatusBar.tsx
 delete mode 100644 src/components/organisms/SchemaEditorToolbar.tsx
 delete mode 100644 src/components/organisms/ToolbarActions.tsx
 delete mode 100644 src/components/ui/accordion.tsx
 delete mode 100644 src/components/ui/alert.tsx
 delete mode 100644 src/components/ui/aspect-ratio.tsx
 delete mode 100644 src/components/ui/avatar.tsx
 delete mode 100644 src/components/ui/badge.tsx
 delete mode 100644 src/components/ui/button.tsx
 delete mode 100644 src/components/ui/card.tsx
 delete mode 100644 src/components/ui/checkbox.tsx
 delete mode 100644 src/components/ui/collapsible.tsx
 delete mode 100644 src/components/ui/hover-card.tsx
 delete mode 100644 src/components/ui/input.tsx
 delete mode 100644 src/components/ui/label.tsx
 delete mode 100644 src/components/ui/popover.tsx
 delete mode 100644 src/components/ui/progress.tsx
 delete mode 100644 src/components/ui/radio-group.tsx
 delete mode 100644 src/components/ui/resizable.tsx
 delete mode 100644 src/components/ui/scroll-area.tsx
 delete mode 100644 src/components/ui/separator.tsx
 delete mode 100644 src/components/ui/skeleton.tsx
 delete mode 100644 src/components/ui/switch.tsx
 delete mode 100644 src/components/ui/tabs.tsx
 delete mode 100644 src/components/ui/textarea.tsx
 delete mode 100644 src/components/ui/toggle.tsx
 delete mode 100644 src/components/ui/tooltip.tsx

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 7f194d0..7b046f4 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -3,7 +3,8 @@
     "allow": [
       "Bash(ls:*)",
       "Bash(find:*)",
-      "Bash(grep:*)"
+      "Bash(grep:*)",
+      "Bash(wc:*)"
     ]
   }
 }
diff --git a/package-lock.json b/package-lock.json
index fb82796..e8c596c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -822,16 +822,6 @@
                 "node": ">=6.0.0"
             }
         },
-        "node_modules/@jridgewell/source-map": {
-            "version": "0.3.11",
-            "license": "MIT",
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "@jridgewell/gen-mapping": "^0.3.5",
-                "@jridgewell/trace-mapping": "^0.3.25"
-            }
-        },
         "node_modules/@jridgewell/sourcemap-codec": {
             "version": "1.5.5",
             "license": "MIT"
@@ -4766,12 +4756,6 @@
                 "concat-map": "0.0.1"
             }
         },
-        "node_modules/buffer-from": {
-            "version": "1.1.2",
-            "license": "MIT",
-            "optional": true,
-            "peer": true
-        },
         "node_modules/callsites": {
             "version": "3.1.0",
             "dev": true,
@@ -6987,15 +6971,6 @@
                 "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
             }
         },
-        "node_modules/source-map": {
-            "version": "0.6.1",
-            "license": "BSD-3-Clause",
-            "optional": true,
-            "peer": true,
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/source-map-js": {
             "version": "1.2.1",
             "license": "BSD-3-Clause",
@@ -7003,16 +6978,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/source-map-support": {
-            "version": "0.5.21",
-            "license": "MIT",
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "buffer-from": "^1.0.0",
-                "source-map": "^0.6.0"
-            }
-        },
         "node_modules/state-local": {
             "version": "1.0.7",
             "license": "MIT"
@@ -7073,30 +7038,6 @@
                 "url": "https://opencollective.com/webpack"
             }
         },
-        "node_modules/terser": {
-            "version": "5.46.0",
-            "license": "BSD-2-Clause",
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "@jridgewell/source-map": "^0.3.3",
-                "acorn": "^8.15.0",
-                "commander": "^2.20.0",
-                "source-map-support": "~0.5.20"
-            },
-            "bin": {
-                "terser": "bin/terser"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/terser/node_modules/commander": {
-            "version": "2.20.3",
-            "license": "MIT",
-            "optional": true,
-            "peer": true
-        },
         "node_modules/three": {
             "version": "0.175.0",
             "license": "MIT"
diff --git a/scripts/cleanup-simple-components.ts b/scripts/cleanup-simple-components.ts
new file mode 100644
index 0000000..89a44bc
--- /dev/null
+++ b/scripts/cleanup-simple-components.ts
@@ -0,0 +1,115 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+/**
+ * List of simple presentational components that can be safely deleted
+ * These were identified by the conversion script as having no hooks or complex logic
+ */
+const SIMPLE_COMPONENTS = {
+  atoms: [
+    'ActionIcon', 'Alert', 'AppLogo', 'Avatar', 'Breadcrumb', 'ButtonGroup',
+    'Chip', 'Code', 'ColorSwatch', 'Container', 'DataList', 'Divider', 'Dot',
+    'EmptyStateIcon', 'FileIcon', 'Flex', 'Grid', 'Heading', 'HelperText',
+    'IconText', 'IconWrapper', 'InfoBox', 'InfoPanel', 'Input', 'Kbd',
+    'KeyValue', 'Label', 'Link', 'List', 'ListItem', 'LiveIndicator',
+    'LoadingSpinner', 'LoadingState', 'MetricDisplay', 'PageHeader', 'Pulse',
+    'ResponsiveGrid', 'ScrollArea', 'SearchInput', 'Section', 'Skeleton',
+    'Spacer', 'Sparkle', 'Spinner', 'StatusIcon', 'TabIcon', 'Tag', 'Text',
+    'TextArea', 'TextGradient', 'TextHighlight', 'Timestamp', 'TreeIcon',
+    // Additional simple ones
+    'AvatarGroup', 'Checkbox', 'Drawer', 'Modal', 'Notification', 'ProgressBar',
+    'Radio', 'Rating', 'Select', 'Slider', 'Stack', 'StepIndicator', 'Stepper',
+    'Table', 'Tabs', 'Timeline', 'Toggle',
+  ],
+  molecules: [
+    'ActionBar', 'AppBranding', 'DataCard', 'DataSourceCard', 'EditorActions',
+    'EditorToolbar', 'EmptyEditorState', 'EmptyState', 'FileTabs', 'LabelWithBadge',
+    'LazyInlineMonacoEditor', 'LazyMonacoEditor', 'LoadingFallback', 'LoadingState',
+    'MonacoEditorPanel', 'NavigationItem', 'PageHeaderContent', 'SearchBar',
+    'StatCard', 'TreeCard', 'TreeListHeader',
+  ],
+  organisms: [
+    'EmptyCanvasState', 'PageHeader', 'SchemaEditorCanvas', 'SchemaEditorPropertiesPanel',
+    'SchemaEditorSidebar', 'SchemaEditorStatusBar', 'SchemaEditorToolbar', 'ToolbarActions',
+  ],
+  ui: [
+    'aspect-ratio', 'avatar', 'badge', 'checkbox', 'collapsible', 'hover-card',
+    'input', 'label', 'popover', 'progress', 'radio-group', 'resizable',
+    'scroll-area', 'separator', 'skeleton', 'switch', 'textarea', 'toggle',
+    // Additional ones
+    'accordion', 'alert', 'button', 'card', 'tabs', 'tooltip',
+  ],
+}
+
+interface DeletionResult {
+  deleted: string[]
+  kept: string[]
+  failed: string[]
+}
+
+/**
+ * Delete simple TypeScript components
+ */
+async function deleteSimpleComponents(): Promise<void> {
+  console.log('🧹 Cleaning up simple TypeScript components...\n')
+
+  const results: DeletionResult = {
+    deleted: [],
+    kept: [],
+    failed: [],
+  }
+
+  // Process each category
+  for (const [category, components] of Object.entries(SIMPLE_COMPONENTS)) {
+    console.log(`📂 Processing ${category}...`)
+
+    const baseDir = path.join(rootDir, `src/components/${category}`)
+
+    for (const component of components) {
+      const fileName = component.endsWith('.tsx') ? component : `${component}.tsx`
+      const filePath = path.join(baseDir, fileName)
+
+      try {
+        await fs.access(filePath)
+        await fs.unlink(filePath)
+        results.deleted.push(`${category}/${fileName}`)
+        console.log(`   ✅ Deleted: ${fileName}`)
+      } catch (error: unknown) {
+        // File doesn't exist or couldn't be deleted
+        if (error instanceof Error && 'code' in error && error.code === 'ENOENT') {
+          results.kept.push(`${category}/${fileName}`)
+          console.log(`   ⏭️  Skipped: ${fileName} (not found)`)
+        } else {
+          results.failed.push(`${category}/${fileName}`)
+          console.log(`   ❌ Failed: ${fileName}`)
+        }
+      }
+    }
+
+    console.log()
+  }
+
+  // Summary
+  console.log('📊 Summary:')
+  console.log(`   Deleted: ${results.deleted.length} files`)
+  console.log(`   Skipped: ${results.kept.length} files`)
+  console.log(`   Failed:  ${results.failed.length} files`)
+
+  if (results.failed.length > 0) {
+    console.log('\n❌ Failed deletions:')
+    results.failed.forEach(f => console.log(`   - ${f}`))
+  }
+
+  console.log('\n✨ Cleanup complete!')
+  console.log('\n📝 Next steps:')
+  console.log('   1. Update index.ts files to remove deleted exports')
+  console.log('   2. Search for direct imports of deleted components')
+  console.log('   3. Run build to check for errors')
+  console.log('   4. Run tests to verify functionality')
+}
+
+deleteSimpleComponents().catch(console.error)
diff --git a/scripts/update-index-exports.ts b/scripts/update-index-exports.ts
new file mode 100644
index 0000000..2a8de7b
--- /dev/null
+++ b/scripts/update-index-exports.ts
@@ -0,0 +1,76 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+/**
+ * Update index.ts files to remove exports for deleted components
+ */
+async function updateIndexFiles(): Promise<void> {
+  console.log('📝 Updating index.ts files...\n')
+
+  const directories = [
+    'src/components/atoms',
+    'src/components/molecules',
+    'src/components/organisms',
+    'src/components/ui',
+  ]
+
+  for (const dir of directories) {
+    const indexPath = path.join(rootDir, dir, 'index.ts')
+    const dirPath = path.join(rootDir, dir)
+
+    console.log(`📂 Processing ${dir}/index.ts...`)
+
+    try {
+      // Read current index.ts
+      const indexContent = await fs.readFile(indexPath, 'utf-8')
+      const lines = indexContent.split('\n')
+
+      // Get list of existing .tsx files
+      const files = await fs.readdir(dirPath)
+      const existingComponents = new Set(
+        files
+          .filter(f => f.endsWith('.tsx') && f !== 'index.tsx')
+          .map(f => f.replace('.tsx', ''))
+      )
+
+      // Filter out exports for deleted components
+      const updatedLines = lines.filter(line => {
+        // Skip empty lines and comments
+        if (!line.trim() || line.trim().startsWith('//')) {
+          return true
+        }
+
+        // Check if it's an export line
+        const exportMatch = line.match(/export\s+(?:\{([^}]+)\}|.+)\s+from\s+['"]\.\/([^'"]+)['"]/)
+        if (!exportMatch) {
+          return true // Keep non-export lines
+        }
+
+        const componentName = exportMatch[2]
+        const exists = existingComponents.has(componentName)
+
+        if (!exists) {
+          console.log(`   ❌ Removing export: ${componentName}`)
+          return false
+        }
+
+        return true
+      })
+
+      // Write updated index.ts
+      await fs.writeFile(indexPath, updatedLines.join('\n'))
+
+      console.log(`   ✅ Updated ${dir}/index.ts\n`)
+    } catch (error) {
+      console.error(`   ❌ Error processing ${dir}/index.ts:`, error)
+    }
+  }
+
+  console.log('✨ Index files updated!')
+}
+
+updateIndexFiles().catch(console.error)
diff --git a/src/components/atoms/ActionIcon.tsx b/src/components/atoms/ActionIcon.tsx
deleted file mode 100644
index ea64248..0000000
--- a/src/components/atoms/ActionIcon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Plus, Pencil, Trash, Copy, Download, Upload } from '@phosphor-icons/react'
-
-interface ActionIconProps {
-  action: 'add' | 'edit' | 'delete' | 'copy' | 'download' | 'upload'
-  size?: number
-  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
-  className?: string
-}
-
-export function ActionIcon({ action, size = 16, weight = 'regular', className = '' }: ActionIconProps) {
-  const iconMap = {
-    add: Plus,
-    edit: Pencil,
-    delete: Trash,
-    copy: Copy,
-    download: Download,
-    upload: Upload,
-  }
-
-  const IconComponent = iconMap[action]
-  return <IconComponent size={size} weight={weight} className={className} />
-}
diff --git a/src/components/atoms/Alert.tsx b/src/components/atoms/Alert.tsx
deleted file mode 100644
index f456881..0000000
--- a/src/components/atoms/Alert.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { ReactNode } from 'react'
-import { Info, Warning, CheckCircle, XCircle } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface AlertProps {
-  variant?: 'info' | 'warning' | 'success' | 'error'
-  title?: string
-  children: ReactNode
-  className?: string
-}
-
-const variantConfig = {
-  info: {
-    icon: Info,
-    classes: 'bg-blue-50 border-blue-200 text-blue-900',
-  },
-  warning: {
-    icon: Warning,
-    classes: 'bg-yellow-50 border-yellow-200 text-yellow-900',
-  },
-  success: {
-    icon: CheckCircle,
-    classes: 'bg-green-50 border-green-200 text-green-900',
-  },
-  error: {
-    icon: XCircle,
-    classes: 'bg-red-50 border-red-200 text-red-900',
-  },
-}
-
-export function Alert({ variant = 'info', title, children, className }: AlertProps) {
-  const config = variantConfig[variant]
-  const Icon = config.icon
-
-  return (
-    <div
-      className={cn(
-        'flex gap-3 p-4 rounded-lg border',
-        config.classes,
-        className
-      )}
-      role="alert"
-    >
-      <Icon size={20} weight="bold" className="flex-shrink-0 mt-0.5" />
-      <div className="flex-1">
-        {title && <div className="font-semibold mb-1">{title}</div>}
-        <div className="text-sm">{children}</div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/atoms/AppLogo.tsx b/src/components/atoms/AppLogo.tsx
deleted file mode 100644
index 7977dc4..0000000
--- a/src/components/atoms/AppLogo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Code } from '@phosphor-icons/react'
-
-export function AppLogo() {
-  return (
-    <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-gradient-to-br from-primary to-accent flex items-center justify-center shrink-0">
-      <Code size={20} weight="duotone" className="text-white sm:w-6 sm:h-6" />
-    </div>
-  )
-}
diff --git a/src/components/atoms/Avatar.tsx b/src/components/atoms/Avatar.tsx
deleted file mode 100644
index fd5083a..0000000
--- a/src/components/atoms/Avatar.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface AvatarProps {
-  src?: string
-  alt?: string
-  fallback?: string
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  className?: string
-}
-
-const sizeClasses = {
-  xs: 'w-6 h-6 text-xs',
-  sm: 'w-8 h-8 text-sm',
-  md: 'w-10 h-10 text-base',
-  lg: 'w-12 h-12 text-lg',
-  xl: 'w-16 h-16 text-xl',
-}
-
-export function Avatar({ src, alt, fallback, size = 'md', className }: AvatarProps) {
-  const initials = fallback || alt?.slice(0, 2).toUpperCase() || '?'
-
-  return (
-    <div
-      className={cn(
-        'relative inline-flex items-center justify-center rounded-full bg-muted overflow-hidden',
-        sizeClasses[size],
-        className
-      )}
-    >
-      {src ? (
-        <img src={src} alt={alt} className="w-full h-full object-cover" />
-      ) : (
-        <span className="font-medium text-muted-foreground">{initials}</span>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/atoms/AvatarGroup.tsx b/src/components/atoms/AvatarGroup.tsx
deleted file mode 100644
index da7b7ed..0000000
--- a/src/components/atoms/AvatarGroup.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface AvatarGroupProps {
-  avatars: {
-    src?: string
-    alt: string
-    fallback: string
-  }[]
-  max?: number
-  size?: 'xs' | 'sm' | 'md' | 'lg'
-  className?: string
-}
-
-const sizeClasses = {
-  xs: 'h-6 w-6 text-xs',
-  sm: 'h-8 w-8 text-xs',
-  md: 'h-10 w-10 text-sm',
-  lg: 'h-12 w-12 text-base',
-}
-
-export function AvatarGroup({
-  avatars,
-  max = 5,
-  size = 'md',
-  className,
-}: AvatarGroupProps) {
-  const displayAvatars = avatars.slice(0, max)
-  const remainingCount = Math.max(avatars.length - max, 0)
-
-  return (
-    <div className={cn('flex -space-x-2', className)}>
-      {displayAvatars.map((avatar, index) => (
-        <div
-          key={index}
-          className={cn(
-            'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted overflow-hidden',
-            sizeClasses[size]
-          )}
-          title={avatar.alt}
-        >
-          {avatar.src ? (
-            <img src={avatar.src} alt={avatar.alt} className="h-full w-full object-cover" />
-          ) : (
-            <span className="font-medium text-foreground">{avatar.fallback}</span>
-          )}
-        </div>
-      ))}
-      {remainingCount > 0 && (
-        <div
-          className={cn(
-            'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted',
-            sizeClasses[size]
-          )}
-        >
-          <span className="font-medium text-foreground">+{remainingCount}</span>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Breadcrumb.tsx b/src/components/atoms/Breadcrumb.tsx
deleted file mode 100644
index 5134007..0000000
--- a/src/components/atoms/Breadcrumb.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { CaretRight } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface BreadcrumbItem {
-  label: string
-  href?: string
-  onClick?: () => void
-}
-
-interface BreadcrumbNavProps {
-  items?: BreadcrumbItem[]
-  className?: string
-}
-
-export function BreadcrumbNav({ items = [], className }: BreadcrumbNavProps) {
-  return (
-    <nav aria-label="Breadcrumb" className={cn('flex items-center gap-2', className)}>
-      {items.map((item, index) => {
-        const isLast = index === items.length - 1
-        const linkClassName = cn(
-          'text-sm transition-colors',
-          isLast ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'
-        )
-
-        return (
-          <div key={index} className="flex items-center gap-2">
-            {item.href ? (
-              <a href={item.href} onClick={item.onClick} className={linkClassName}>
-                {item.label}
-              </a>
-            ) : item.onClick ? (
-              <button onClick={item.onClick} className={linkClassName}>
-                {item.label}
-              </button>
-            ) : (
-              <span
-                className={cn(
-                  'text-sm',
-                  isLast ? 'text-foreground font-medium' : 'text-muted-foreground'
-                )}
-              >
-                {item.label}
-              </span>
-            )}
-            {!isLast && <CaretRight className="w-4 h-4 text-muted-foreground" />}
-          </div>
-        )
-      })}
-    </nav>
-  )
-}
-
-export const Breadcrumb = BreadcrumbNav
diff --git a/src/components/atoms/ButtonGroup.tsx b/src/components/atoms/ButtonGroup.tsx
deleted file mode 100644
index 1141b89..0000000
--- a/src/components/atoms/ButtonGroup.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-interface ButtonGroupProps {
-  children: ReactNode
-  orientation?: 'horizontal' | 'vertical'
-  className?: string
-}
-
-export function ButtonGroup({
-  children,
-  orientation = 'horizontal',
-  className,
-}: ButtonGroupProps) {
-  return (
-    <div
-      className={cn(
-        'inline-flex',
-        orientation === 'horizontal' ? 'flex-row' : 'flex-col',
-        '[&>button]:rounded-none',
-        '[&>button:first-child]:rounded-l-md',
-        '[&>button:last-child]:rounded-r-md',
-        orientation === 'vertical' && '[&>button:first-child]:rounded-t-md [&>button:first-child]:rounded-l-none',
-        orientation === 'vertical' && '[&>button:last-child]:rounded-b-md [&>button:last-child]:rounded-r-none',
-        '[&>button:not(:last-child)]:border-r-0',
-        orientation === 'vertical' && '[&>button:not(:last-child)]:border-b-0 [&>button:not(:last-child)]:border-r',
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Checkbox.tsx b/src/components/atoms/Checkbox.tsx
deleted file mode 100644
index e5cf5dd..0000000
--- a/src/components/atoms/Checkbox.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Check, Minus } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface CheckboxProps {
-  checked: boolean
-  onChange: (checked: boolean) => void
-  label?: string
-  indeterminate?: boolean
-  disabled?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  className?: string
-}
-
-export function Checkbox({ 
-  checked, 
-  onChange, 
-  label, 
-  indeterminate = false,
-  disabled = false, 
-  size = 'md',
-  className 
-}: CheckboxProps) {
-  const sizeStyles = {
-    sm: 'w-4 h-4',
-    md: 'w-5 h-5',
-    lg: 'w-6 h-6',
-  }
-
-  const iconSize = {
-    sm: 12,
-    md: 16,
-    lg: 20,
-  }
-
-  return (
-    <label className={cn('flex items-center gap-2 cursor-pointer', disabled && 'opacity-50 cursor-not-allowed', className)}>
-      <button
-        type="button"
-        role="checkbox"
-        aria-checked={indeterminate ? 'mixed' : checked}
-        disabled={disabled}
-        onClick={() => !disabled && onChange(!checked)}
-        className={cn(
-          'flex items-center justify-center rounded border-2 transition-colors',
-          sizeStyles[size],
-          checked || indeterminate
-            ? 'bg-primary border-primary text-primary-foreground'
-            : 'bg-background border-input hover:border-ring'
-        )}
-      >
-        {indeterminate ? (
-          <Minus size={iconSize[size]} weight="bold" />
-        ) : checked ? (
-          <Check size={iconSize[size]} weight="bold" />
-        ) : null}
-      </button>
-      {label && <span className="text-sm font-medium select-none">{label}</span>}
-    </label>
-  )
-}
diff --git a/src/components/atoms/Chip.tsx b/src/components/atoms/Chip.tsx
deleted file mode 100644
index fb36da5..0000000
--- a/src/components/atoms/Chip.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ReactNode } from 'react'
-import { X } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface ChipProps {
-  children: ReactNode
-  variant?: 'default' | 'primary' | 'accent' | 'muted'
-  size?: 'sm' | 'md'
-  onRemove?: () => void
-  className?: string
-}
-
-const variantClasses = {
-  default: 'bg-secondary text-secondary-foreground',
-  primary: 'bg-primary text-primary-foreground',
-  accent: 'bg-accent text-accent-foreground',
-  muted: 'bg-muted text-muted-foreground',
-}
-
-const sizeClasses = {
-  sm: 'px-2 py-0.5 text-xs',
-  md: 'px-3 py-1 text-sm',
-}
-
-export function Chip({ 
-  children, 
-  variant = 'default', 
-  size = 'md',
-  onRemove,
-  className 
-}: ChipProps) {
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center gap-1 rounded-full font-medium',
-        variantClasses[variant],
-        sizeClasses[size],
-        className
-      )}
-    >
-      {children}
-      {onRemove && (
-        <button
-          type="button"
-          onClick={onRemove}
-          className="inline-flex items-center justify-center hover:bg-black/10 rounded-full transition-colors"
-          aria-label="Remove"
-        >
-          <X size={size === 'sm' ? 12 : 14} weight="bold" />
-        </button>
-      )}
-    </span>
-  )
-}
diff --git a/src/components/atoms/Code.tsx b/src/components/atoms/Code.tsx
deleted file mode 100644
index 0416b4c..0000000
--- a/src/components/atoms/Code.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface CodeProps {
-  children: ReactNode
-  inline?: boolean
-  className?: string
-}
-
-export function Code({ children, inline = true, className }: CodeProps) {
-  if (inline) {
-    return (
-      <code
-        className={cn(
-          'px-1.5 py-0.5 rounded bg-muted text-foreground font-mono text-sm',
-          className
-        )}
-      >
-        {children}
-      </code>
-    )
-  }
-
-  return (
-    <pre
-      className={cn(
-        'p-4 rounded-lg bg-muted text-foreground font-mono text-sm overflow-x-auto',
-        className
-      )}
-    >
-      <code>{children}</code>
-    </pre>
-  )
-}
diff --git a/src/components/atoms/ColorSwatch.tsx b/src/components/atoms/ColorSwatch.tsx
deleted file mode 100644
index 28e38cb..0000000
--- a/src/components/atoms/ColorSwatch.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Check } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface ColorSwatchProps {
-  color: string
-  selected?: boolean
-  onClick?: () => void
-  size?: 'sm' | 'md' | 'lg'
-  label?: string
-  className?: string
-}
-
-export function ColorSwatch({ 
-  color, 
-  selected = false, 
-  onClick, 
-  size = 'md', 
-  label,
-  className 
-}: ColorSwatchProps) {
-  const sizeStyles = {
-    sm: 'w-6 h-6',
-    md: 'w-8 h-8',
-    lg: 'w-10 h-10',
-  }
-
-  return (
-    <div className={cn('flex flex-col items-center gap-1', className)}>
-      <button
-        type="button"
-        onClick={onClick}
-        className={cn(
-          'rounded border-2 transition-all flex items-center justify-center',
-          sizeStyles[size],
-          selected ? 'border-primary ring-2 ring-ring ring-offset-2' : 'border-border hover:border-ring',
-          onClick && 'cursor-pointer'
-        )}
-        style={{ backgroundColor: color }}
-        aria-label={label || `Color ${color}`}
-      >
-        {selected && <Check className="text-white drop-shadow-lg" weight="bold" />}
-      </button>
-      {label && <span className="text-xs text-muted-foreground">{label}</span>}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Container.tsx b/src/components/atoms/Container.tsx
deleted file mode 100644
index e913ad5..0000000
--- a/src/components/atoms/Container.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface ContainerProps {
-  children: ReactNode
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
-  className?: string
-}
-
-const sizeClasses = {
-  sm: 'max-w-screen-sm',
-  md: 'max-w-screen-md',
-  lg: 'max-w-screen-lg',
-  xl: 'max-w-screen-xl',
-  full: 'max-w-full',
-}
-
-export function Container({ children, size = 'xl', className }: ContainerProps) {
-  return (
-    <div className={cn('mx-auto px-4 sm:px-6 lg:px-8', sizeClasses[size], className)}>
-      {children}
-    </div>
-  )
-}
diff --git a/src/components/atoms/DataList.tsx b/src/components/atoms/DataList.tsx
deleted file mode 100644
index 109cb41..0000000
--- a/src/components/atoms/DataList.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-export interface DataListProps {
-  items: any[]
-  renderItem?: (item: any, index: number) => ReactNode
-  emptyMessage?: string
-  className?: string
-  itemClassName?: string
-  itemKey?: string
-}
-
-export function DataList({
-  items,
-  renderItem,
-  emptyMessage = 'No items',
-  className,
-  itemClassName,
-  itemKey,
-}: DataListProps) {
-  if (items.length === 0) {
-    return (
-      <div className="text-center py-8 text-muted-foreground">
-        {emptyMessage}
-      </div>
-    )
-  }
-
-  const renderFallbackItem = (item: any) => {
-    if (itemKey && item && typeof item === 'object') {
-      const value = item[itemKey]
-      if (value !== undefined && value !== null) {
-        return typeof value === 'string' || typeof value === 'number'
-          ? value
-          : JSON.stringify(value)
-      }
-    }
-
-    if (typeof item === 'string' || typeof item === 'number') {
-      return item
-    }
-
-    return JSON.stringify(item)
-  }
-
-  return (
-    <div className={cn('space-y-2', className)}>
-      {items.map((item, index) => (
-        <div key={index} className={cn('transition-colors', itemClassName)}>
-          {renderItem ? renderItem(item, index) : renderFallbackItem(item)}
-        </div>
-      ))}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Divider.tsx b/src/components/atoms/Divider.tsx
deleted file mode 100644
index 9f87515..0000000
--- a/src/components/atoms/Divider.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface DividerProps {
-  orientation?: 'horizontal' | 'vertical'
-  className?: string
-  decorative?: boolean
-}
-
-export function Divider({ 
-  orientation = 'horizontal', 
-  className,
-  decorative = true 
-}: DividerProps) {
-  return (
-    <div
-      role={decorative ? 'presentation' : 'separator'}
-      aria-orientation={orientation}
-      className={cn(
-        'bg-border',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'w-[1px] h-full',
-        className
-      )}
-    />
-  )
-}
diff --git a/src/components/atoms/Dot.tsx b/src/components/atoms/Dot.tsx
deleted file mode 100644
index c64addf..0000000
--- a/src/components/atoms/Dot.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface DotProps {
-  variant?: 'default' | 'primary' | 'accent' | 'success' | 'warning' | 'error'
-  size?: 'xs' | 'sm' | 'md' | 'lg'
-  pulse?: boolean
-  className?: string
-}
-
-const variantClasses = {
-  default: 'bg-muted-foreground',
-  primary: 'bg-primary',
-  accent: 'bg-accent',
-  success: 'bg-green-500',
-  warning: 'bg-yellow-500',
-  error: 'bg-destructive',
-}
-
-const sizeClasses = {
-  xs: 'w-1.5 h-1.5',
-  sm: 'w-2 h-2',
-  md: 'w-3 h-3',
-  lg: 'w-4 h-4',
-}
-
-export function Dot({ 
-  variant = 'default', 
-  size = 'sm', 
-  pulse = false,
-  className 
-}: DotProps) {
-  return (
-    <span className="relative inline-flex">
-      <span
-        className={cn(
-          'inline-block rounded-full',
-          variantClasses[variant],
-          sizeClasses[size],
-          className
-        )}
-      />
-      {pulse && (
-        <span
-          className={cn(
-            'absolute inline-flex rounded-full opacity-75 animate-ping',
-            variantClasses[variant],
-            sizeClasses[size]
-          )}
-        />
-      )}
-    </span>
-  )
-}
diff --git a/src/components/atoms/Drawer.tsx b/src/components/atoms/Drawer.tsx
deleted file mode 100644
index d4138ad..0000000
--- a/src/components/atoms/Drawer.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { X } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface DrawerProps {
-  isOpen: boolean
-  onClose: () => void
-  title?: string
-  children: React.ReactNode
-  position?: 'left' | 'right' | 'top' | 'bottom'
-  size?: 'sm' | 'md' | 'lg'
-  showCloseButton?: boolean
-  className?: string
-}
-
-export function Drawer({
-  isOpen,
-  onClose,
-  title,
-  children,
-  position = 'right',
-  size = 'md',
-  showCloseButton = true,
-  className,
-}: DrawerProps) {
-  if (!isOpen) return null
-
-  const positionStyles = {
-    left: 'left-0 top-0 h-full',
-    right: 'right-0 top-0 h-full',
-    top: 'top-0 left-0 w-full',
-    bottom: 'bottom-0 left-0 w-full',
-  }
-
-  const sizeStyles = {
-    sm: position === 'left' || position === 'right' ? 'w-64' : 'h-64',
-    md: position === 'left' || position === 'right' ? 'w-96' : 'h-96',
-    lg: position === 'left' || position === 'right' ? 'w-[600px]' : 'h-[600px]',
-  }
-
-  const slideAnimation = {
-    left: 'animate-in slide-in-from-left',
-    right: 'animate-in slide-in-from-right',
-    top: 'animate-in slide-in-from-top',
-    bottom: 'animate-in slide-in-from-bottom',
-  }
-
-  return (
-    <>
-      <div
-        className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm animate-in fade-in-0"
-        onClick={onClose}
-      />
-      <div
-        className={cn(
-          'fixed z-50 bg-card border border-border shadow-lg',
-          positionStyles[position],
-          sizeStyles[size],
-          slideAnimation[position],
-          className
-        )}
-      >
-        {(title || showCloseButton) && (
-          <div className="flex items-center justify-between p-6 border-b border-border">
-            {title && <h2 className="text-lg font-semibold">{title}</h2>}
-            {showCloseButton && (
-              <button
-                onClick={onClose}
-                className="ml-auto p-1 rounded-md hover:bg-accent transition-colors"
-                aria-label="Close drawer"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            )}
-          </div>
-        )}
-        <div className="p-6 overflow-auto h-full">{children}</div>
-      </div>
-    </>
-  )
-}
diff --git a/src/components/atoms/EmptyStateIcon.tsx b/src/components/atoms/EmptyStateIcon.tsx
deleted file mode 100644
index 9c2153b..0000000
--- a/src/components/atoms/EmptyStateIcon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-interface EmptyStateIconProps {
-  icon: React.ReactNode
-  variant?: 'default' | 'muted'
-}
-
-export function EmptyStateIcon({ icon, variant = 'muted' }: EmptyStateIconProps) {
-  const variantClasses = {
-    default: 'from-primary/20 to-accent/20 text-primary',
-    muted: 'from-muted to-muted/50 text-muted-foreground',
-  }
-
-  return (
-    <div className={`w-16 h-16 rounded-full bg-gradient-to-br ${variantClasses[variant]} flex items-center justify-center`}>
-      {icon}
-    </div>
-  )
-}
diff --git a/src/components/atoms/FileIcon.tsx b/src/components/atoms/FileIcon.tsx
deleted file mode 100644
index 385b75f..0000000
--- a/src/components/atoms/FileIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { FileCode, FileJs, FilePlus } from '@phosphor-icons/react'
-
-interface FileIconProps {
-  type?: 'code' | 'json' | 'plus'
-  size?: number
-  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
-  className?: string
-}
-
-export function FileIcon({ type = 'code', size = 20, weight = 'regular', className = '' }: FileIconProps) {
-  const iconMap = {
-    code: FileCode,
-    json: FileJs,
-    plus: FilePlus,
-  }
-
-  const IconComponent = iconMap[type]
-  return <IconComponent size={size} weight={weight} className={className} />
-}
diff --git a/src/components/atoms/Flex.tsx b/src/components/atoms/Flex.tsx
deleted file mode 100644
index 7ac4d32..0000000
--- a/src/components/atoms/Flex.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-interface FlexProps {
-  children: ReactNode
-  direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse'
-  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
-  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse'
-  grow?: boolean
-  shrink?: boolean
-  className?: string
-}
-
-const directionClasses = {
-  row: 'flex-row',
-  col: 'flex-col',
-  'row-reverse': 'flex-row-reverse',
-  'col-reverse': 'flex-col-reverse',
-}
-
-const alignClasses = {
-  start: 'items-start',
-  center: 'items-center',
-  end: 'items-end',
-  stretch: 'items-stretch',
-  baseline: 'items-baseline',
-}
-
-const justifyClasses = {
-  start: 'justify-start',
-  center: 'justify-center',
-  end: 'justify-end',
-  between: 'justify-between',
-  around: 'justify-around',
-  evenly: 'justify-evenly',
-}
-
-const gapClasses = {
-  none: 'gap-0',
-  xs: 'gap-1',
-  sm: 'gap-2',
-  md: 'gap-4',
-  lg: 'gap-6',
-  xl: 'gap-8',
-}
-
-const wrapClasses = {
-  wrap: 'flex-wrap',
-  nowrap: 'flex-nowrap',
-  'wrap-reverse': 'flex-wrap-reverse',
-}
-
-export function Flex({
-  children,
-  direction = 'row',
-  align = 'stretch',
-  justify = 'start',
-  gap = 'md',
-  wrap = 'nowrap',
-  grow = false,
-  shrink = false,
-  className,
-}: FlexProps) {
-  return (
-    <div
-      className={cn(
-        'flex',
-        directionClasses[direction],
-        alignClasses[align],
-        justifyClasses[justify],
-        gapClasses[gap],
-        wrapClasses[wrap],
-        grow && 'flex-grow',
-        shrink && 'flex-shrink',
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Grid.tsx b/src/components/atoms/Grid.tsx
deleted file mode 100644
index e2326d9..0000000
--- a/src/components/atoms/Grid.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ReactNode } from 'react'
-
-interface GridProps {
-  children: ReactNode
-  cols?: 1 | 2 | 3 | 4 | 6 | 12
-  gap?: 1 | 2 | 3 | 4 | 6 | 8
-  className?: string
-}
-
-const colsClasses = {
-  1: 'grid-cols-1',
-  2: 'grid-cols-1 md:grid-cols-2',
-  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
-  6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
-  12: 'grid-cols-3 md:grid-cols-6 lg:grid-cols-12',
-}
-
-const gapClasses = {
-  1: 'gap-1',
-  2: 'gap-2',
-  3: 'gap-3',
-  4: 'gap-4',
-  6: 'gap-6',
-  8: 'gap-8',
-}
-
-export function Grid({ children, cols = 1, gap = 4, className = '' }: GridProps) {
-  return (
-    <div className={`grid ${colsClasses[cols]} ${gapClasses[gap]} ${className}`}>
-      {children}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Heading.tsx b/src/components/atoms/Heading.tsx
deleted file mode 100644
index 8f098dd..0000000
--- a/src/components/atoms/Heading.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ReactNode, createElement } from 'react'
-
-interface HeadingProps {
-  children: ReactNode
-  level?: 1 | 2 | 3 | 4 | 5 | 6
-  className?: string
-}
-
-const levelClasses = {
-  1: 'text-4xl font-bold tracking-tight',
-  2: 'text-3xl font-semibold tracking-tight',
-  3: 'text-2xl font-semibold tracking-tight',
-  4: 'text-xl font-semibold',
-  5: 'text-lg font-medium',
-  6: 'text-base font-medium',
-}
-
-export function Heading({ children, level = 1, className = '' }: HeadingProps) {
-  return createElement(
-    `h${level}`,
-    { className: `${levelClasses[level]} ${className}` },
-    children
-  )
-}
diff --git a/src/components/atoms/HelperText.tsx b/src/components/atoms/HelperText.tsx
deleted file mode 100644
index ce0cd33..0000000
--- a/src/components/atoms/HelperText.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface HelperTextProps {
-  children: ReactNode
-  variant?: 'default' | 'error' | 'success'
-  className?: string
-}
-
-const variantClasses = {
-  default: 'text-muted-foreground',
-  error: 'text-destructive',
-  success: 'text-green-600',
-}
-
-export function HelperText({ children, variant = 'default', className }: HelperTextProps) {
-  return (
-    <p className={cn('text-xs mt-1', variantClasses[variant], className)}>
-      {children}
-    </p>
-  )
-}
diff --git a/src/components/atoms/IconText.tsx b/src/components/atoms/IconText.tsx
deleted file mode 100644
index 6582089..0000000
--- a/src/components/atoms/IconText.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface IconTextProps {
-  icon: React.ReactNode
-  children: React.ReactNode
-  gap?: 'sm' | 'md' | 'lg'
-  align?: 'start' | 'center' | 'end'
-  className?: string
-}
-
-export function IconText({ 
-  icon, 
-  children, 
-  gap = 'md', 
-  align = 'center',
-  className 
-}: IconTextProps) {
-  const gapStyles = {
-    sm: 'gap-1',
-    md: 'gap-2',
-    lg: 'gap-3',
-  }
-
-  const alignStyles = {
-    start: 'items-start',
-    center: 'items-center',
-    end: 'items-end',
-  }
-
-  return (
-    <div className={cn('flex', gapStyles[gap], alignStyles[align], className)}>
-      <span className="flex-shrink-0">{icon}</span>
-      <span className="flex-1">{children}</span>
-    </div>
-  )
-}
diff --git a/src/components/atoms/IconWrapper.tsx b/src/components/atoms/IconWrapper.tsx
deleted file mode 100644
index 27bcf09..0000000
--- a/src/components/atoms/IconWrapper.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-interface IconWrapperProps {
-  icon: React.ReactNode
-  size?: 'sm' | 'md' | 'lg'
-  variant?: 'default' | 'muted' | 'primary' | 'destructive'
-  className?: string
-}
-
-export function IconWrapper({ 
-  icon, 
-  size = 'md', 
-  variant = 'default',
-  className = '' 
-}: IconWrapperProps) {
-  const sizeClasses = {
-    sm: 'w-4 h-4',
-    md: 'w-5 h-5',
-    lg: 'w-6 h-6',
-  }
-
-  const variantClasses = {
-    default: 'text-foreground',
-    muted: 'text-muted-foreground',
-    primary: 'text-primary',
-    destructive: 'text-destructive',
-  }
-
-  return (
-    <span className={`inline-flex items-center justify-center ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}>
-      {icon}
-    </span>
-  )
-}
diff --git a/src/components/atoms/InfoBox.tsx b/src/components/atoms/InfoBox.tsx
deleted file mode 100644
index c49e752..0000000
--- a/src/components/atoms/InfoBox.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { cn } from '@/lib/utils'
-import { Info, Warning, CheckCircle, XCircle } from '@phosphor-icons/react'
-
-interface InfoBoxProps {
-  type?: 'info' | 'warning' | 'success' | 'error'
-  title?: string
-  children: React.ReactNode
-  className?: string
-}
-
-const iconMap = {
-  info: Info,
-  warning: Warning,
-  success: CheckCircle,
-  error: XCircle,
-}
-
-const variantClasses = {
-  info: 'bg-blue-500/10 border-blue-500/20 text-blue-700 dark:text-blue-300',
-  warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-700 dark:text-yellow-300',
-  success: 'bg-green-500/10 border-green-500/20 text-green-700 dark:text-green-300',
-  error: 'bg-destructive/10 border-destructive/20 text-destructive',
-}
-
-export function InfoBox({ type = 'info', title, children, className }: InfoBoxProps) {
-  const Icon = iconMap[type]
-
-  return (
-    <div className={cn(
-      'flex gap-3 p-4 rounded-lg border',
-      variantClasses[type],
-      className
-    )}>
-      <Icon size={20} weight="fill" className="flex-shrink-0 mt-0.5" />
-      <div className="flex-1 min-w-0">
-        {title && <div className="font-semibold mb-1">{title}</div>}
-        <div className="text-sm opacity-90">{children}</div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/atoms/InfoPanel.tsx b/src/components/atoms/InfoPanel.tsx
deleted file mode 100644
index df64750..0000000
--- a/src/components/atoms/InfoPanel.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-interface InfoPanelProps {
-  children: ReactNode
-  variant?: 'info' | 'warning' | 'success' | 'error' | 'default'
-  title?: string
-  icon?: ReactNode
-  className?: string
-}
-
-const variantClasses = {
-  default: 'bg-card border-border',
-  info: 'bg-blue-500/10 border-blue-500/20 text-blue-700 dark:text-blue-300',
-  warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-700 dark:text-yellow-300',
-  success: 'bg-green-500/10 border-green-500/20 text-green-700 dark:text-green-300',
-  error: 'bg-red-500/10 border-red-500/20 text-red-700 dark:text-red-300',
-}
-
-export function InfoPanel({
-  children,
-  variant = 'default',
-  title,
-  icon,
-  className,
-}: InfoPanelProps) {
-  return (
-    <div
-      className={cn(
-        'rounded-lg border p-4',
-        variantClasses[variant],
-        className
-      )}
-    >
-      {(title || icon) && (
-        <div className="flex items-center gap-2 mb-2">
-          {icon && <div className="flex-shrink-0">{icon}</div>}
-          {title && <div className="font-semibold">{title}</div>}
-        </div>
-      )}
-      <div className="text-sm">{children}</div>
-    </div>
-  )
-}
diff --git a/src/components/atoms/Input.tsx b/src/components/atoms/Input.tsx
deleted file mode 100644
index 7b0f3e8..0000000
--- a/src/components/atoms/Input.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { forwardRef } from 'react'
-import { cn } from '@/lib/utils'
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  error?: boolean
-  helperText?: string
-  label?: string
-  leftIcon?: React.ReactNode
-  rightIcon?: React.ReactNode
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ error, helperText, label, leftIcon, rightIcon, className, ...props }, ref) => {
-    return (
-      <div className="w-full">
-        {label && (
-          <label className="block text-sm font-medium mb-1.5 text-foreground">
-            {label}
-          </label>
-        )}
-        <div className="relative">
-          {leftIcon && (
-            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-              {leftIcon}
-            </div>
-          )}
-          <input
-            ref={ref}
-            className={cn(
-              'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm',
-              'placeholder:text-muted-foreground',
-              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-              'disabled:cursor-not-allowed disabled:opacity-50',
-              'transition-colors',
-              error ? 'border-destructive focus-visible:ring-destructive' : 'border-input',
-              leftIcon && 'pl-10',
-              rightIcon && 'pr-10',
-              className
-            )}
-            {...props}
-          />
-          {rightIcon && (
-            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-              {rightIcon}
-            </div>
-          )}
-        </div>
-        {helperText && (
-          <p className={cn('text-xs mt-1.5', error ? 'text-destructive' : 'text-muted-foreground')}>
-            {helperText}
-          </p>
-        )}
-      </div>
-    )
-  }
-)
-
-Input.displayName = 'Input'
diff --git a/src/components/atoms/Kbd.tsx b/src/components/atoms/Kbd.tsx
deleted file mode 100644
index 42e1e90..0000000
--- a/src/components/atoms/Kbd.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface KbdProps {
-  children: ReactNode
-  className?: string
-}
-
-export function Kbd({ children, className }: KbdProps) {
-  return (
-    <kbd
-      className={cn(
-        'inline-flex items-center justify-center px-2 py-1 text-xs font-mono font-semibold',
-        'bg-muted text-foreground border border-border rounded shadow-sm',
-        className
-      )}
-    >
-      {children}
-    </kbd>
-  )
-}
diff --git a/src/components/atoms/KeyValue.tsx b/src/components/atoms/KeyValue.tsx
deleted file mode 100644
index d00d644..0000000
--- a/src/components/atoms/KeyValue.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface KeyValueProps {
-  label: string
-  value: React.ReactNode
-  orientation?: 'horizontal' | 'vertical'
-  className?: string
-  labelClassName?: string
-  valueClassName?: string
-}
-
-export function KeyValue({ 
-  label, 
-  value, 
-  orientation = 'horizontal', 
-  className,
-  labelClassName,
-  valueClassName 
-}: KeyValueProps) {
-  return (
-    <div className={cn(
-      'flex gap-2',
-      orientation === 'vertical' ? 'flex-col' : 'flex-row items-center justify-between',
-      className
-    )}>
-      <span className={cn('text-sm text-muted-foreground', labelClassName)}>
-        {label}
-      </span>
-      <span className={cn('text-sm font-medium', valueClassName)}>
-        {value}
-      </span>
-    </div>
-  )
-}
diff --git a/src/components/atoms/Label.tsx b/src/components/atoms/Label.tsx
deleted file mode 100644
index 97e897c..0000000
--- a/src/components/atoms/Label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface LabelProps {
-  children: ReactNode
-  htmlFor?: string
-  required?: boolean
-  className?: string
-}
-
-export function Label({ children, htmlFor, required, className }: LabelProps) {
-  return (
-    <label
-      htmlFor={htmlFor}
-      className={cn(
-        'text-sm font-medium text-foreground leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-        className
-      )}
-    >
-      {children}
-      {required && <span className="text-destructive ml-1">*</span>}
-    </label>
-  )
-}
diff --git a/src/components/atoms/Link.tsx b/src/components/atoms/Link.tsx
deleted file mode 100644
index 34a2089..0000000
--- a/src/components/atoms/Link.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface LinkProps {
-  href: string
-  children: ReactNode
-  variant?: 'default' | 'muted' | 'accent' | 'destructive'
-  external?: boolean
-  className?: string
-  onClick?: (e: React.MouseEvent) => void
-}
-
-const variantClasses = {
-  default: 'text-foreground hover:text-primary underline-offset-4 hover:underline',
-  muted: 'text-muted-foreground hover:text-foreground underline-offset-4 hover:underline',
-  accent: 'text-accent hover:text-accent/80 underline-offset-4 hover:underline',
-  destructive: 'text-destructive hover:text-destructive/80 underline-offset-4 hover:underline',
-}
-
-export function Link({ 
-  href, 
-  children, 
-  variant = 'default', 
-  external = false,
-  className,
-  onClick 
-}: LinkProps) {
-  const externalProps = external ? { target: '_blank', rel: 'noopener noreferrer' } : {}
-  
-  return (
-    <a
-      href={href}
-      className={cn('transition-colors duration-150', variantClasses[variant], className)}
-      onClick={onClick}
-      {...externalProps}
-    >
-      {children}
-    </a>
-  )
-}
diff --git a/src/components/atoms/List.tsx b/src/components/atoms/List.tsx
deleted file mode 100644
index 325a980..0000000
--- a/src/components/atoms/List.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ReactNode } from 'react'
-
-interface ListProps<T> {
-  items: T[]
-  renderItem: (item: T, index: number) => ReactNode
-  emptyMessage?: string
-  className?: string
-  itemClassName?: string
-}
-
-export function List<T>({ 
-  items, 
-  renderItem, 
-  emptyMessage = 'No items to display',
-  className = '',
-  itemClassName = ''
-}: ListProps<T>) {
-  if (items.length === 0) {
-    return (
-      <div className="text-center text-muted-foreground py-8">
-        {emptyMessage}
-      </div>
-    )
-  }
-
-  return (
-    <div className={className}>
-      {items.map((item, index) => (
-        <div key={index} className={itemClassName}>
-          {renderItem(item, index)}
-        </div>
-      ))}
-    </div>
-  )
-}
diff --git a/src/components/atoms/ListItem.tsx b/src/components/atoms/ListItem.tsx
deleted file mode 100644
index 6042eef..0000000
--- a/src/components/atoms/ListItem.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface ListItemProps {
-  icon?: React.ReactNode
-  children: React.ReactNode
-  onClick?: () => void
-  active?: boolean
-  className?: string
-  endContent?: React.ReactNode
-}
-
-export function ListItem({ icon, children, onClick, active, className, endContent }: ListItemProps) {
-  const isInteractive = !!onClick
-
-  return (
-    <div
-      className={cn(
-        'flex items-center gap-3 px-3 py-2 rounded-md transition-colors',
-        isInteractive && 'cursor-pointer hover:bg-accent',
-        active && 'bg-accent',
-        className
-      )}
-      onClick={onClick}
-      role={isInteractive ? 'button' : undefined}
-      tabIndex={isInteractive ? 0 : undefined}
-    >
-      {icon && <div className="flex-shrink-0 text-muted-foreground">{icon}</div>}
-      <div className="flex-1 min-w-0 text-sm">{children}</div>
-      {endContent && <div className="flex-shrink-0">{endContent}</div>}
-    </div>
-  )
-}
diff --git a/src/components/atoms/LiveIndicator.tsx b/src/components/atoms/LiveIndicator.tsx
deleted file mode 100644
index a6ec0a6..0000000
--- a/src/components/atoms/LiveIndicator.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface LiveIndicatorProps {
-  label?: string
-  showLabel?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  className?: string
-}
-
-export function LiveIndicator({
-  label = 'LIVE',
-  showLabel = true,
-  size = 'md',
-  className,
-}: LiveIndicatorProps) {
-  const sizeClasses = {
-    sm: 'text-xs gap-1.5',
-    md: 'text-sm gap-2',
-    lg: 'text-base gap-2.5',
-  }
-
-  const dotSizeClasses = {
-    sm: 'w-2 h-2',
-    md: 'w-2.5 h-2.5',
-    lg: 'w-3 h-3',
-  }
-
-  return (
-    <div className={cn('inline-flex items-center font-medium', sizeClasses[size], className)}>
-      <span className="relative flex">
-        <span
-          className={cn(
-            'absolute inline-flex rounded-full bg-red-500 opacity-75 animate-ping',
-            dotSizeClasses[size]
-          )}
-        />
-        <span
-          className={cn(
-            'relative inline-flex rounded-full bg-red-500',
-            dotSizeClasses[size]
-          )}
-        />
-      </span>
-      {showLabel && (
-        <span className="text-red-500 font-bold tracking-wider">{label}</span>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/atoms/LoadingSpinner.tsx b/src/components/atoms/LoadingSpinner.tsx
deleted file mode 100644
index 7420ca7..0000000
--- a/src/components/atoms/LoadingSpinner.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-interface LoadingSpinnerProps {
-  size?: 'sm' | 'md' | 'lg'
-  className?: string
-}
-
-export function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
-  const sizeClasses = {
-    sm: 'w-4 h-4 border-2',
-    md: 'w-6 h-6 border-2',
-    lg: 'w-8 h-8 border-3',
-  }
-
-  return (
-    <div
-      className={`inline-block ${sizeClasses[size]} border-primary border-t-transparent rounded-full animate-spin ${className}`}
-      role="status"
-      aria-label="Loading"
-    />
-  )
-}
diff --git a/src/components/atoms/LoadingState.tsx b/src/components/atoms/LoadingState.tsx
deleted file mode 100644
index 87ab907..0000000
--- a/src/components/atoms/LoadingState.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { cn } from '@/lib/utils'
-
-export interface LoadingStateProps {
-  message?: string
-  size?: 'sm' | 'md' | 'lg'
-  className?: string
-}
-
-export function LoadingState({ 
-  message = 'Loading...', 
-  size = 'md',
-  className 
-}: LoadingStateProps) {
-  const sizeClasses = {
-    sm: 'w-4 h-4 border-2',
-    md: 'w-8 h-8 border-3',
-    lg: 'w-12 h-12 border-4',
-  }
-
-  return (
-    <div className={cn('flex flex-col items-center justify-center gap-3 py-8', className)}>
-      <div className={cn(
-        'border-primary border-t-transparent rounded-full animate-spin',
-        sizeClasses[size]
-      )} />
-      {message && (
-        <p className="text-sm text-muted-foreground">{message}</p>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/atoms/MetricDisplay.tsx b/src/components/atoms/MetricDisplay.tsx
deleted file mode 100644
index 29549c9..0000000
--- a/src/components/atoms/MetricDisplay.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { cn } from '@/lib/utils'
-import { TrendUp, TrendDown } from '@phosphor-icons/react'
-
-interface MetricDisplayProps {
-  label: string
-  value: string | number
-  trend?: {
-    value: number
-    direction: 'up' | 'down'
-  }
-  icon?: React.ReactNode
-  className?: string
-  variant?: 'default' | 'primary' | 'accent'
-}
-
-export function MetricDisplay({ 
-  label, 
-  value, 
-  trend, 
-  icon, 
-  className,
-  variant = 'default' 
-}: MetricDisplayProps) {
-  const variantClasses = {
-    default: 'text-foreground',
-    primary: 'text-primary',
-    accent: 'text-accent',
-  }
-
-  return (
-    <div className={cn('flex flex-col gap-1', className)}>
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        {icon && <span className="text-muted-foreground">{icon}</span>}
-        {label}
-      </div>
-      <div className="flex items-baseline gap-2">
-        <span className={cn('text-2xl font-bold', variantClasses[variant])}>
-          {value}
-        </span>
-        {trend && (
-          <span className={cn(
-            'flex items-center gap-0.5 text-xs font-medium',
-            trend.direction === 'up' ? 'text-green-600 dark:text-green-400' : 'text-destructive'
-          )}>
-            {trend.direction === 'up' ? <TrendUp size={14} /> : <TrendDown size={14} />}
-            {Math.abs(trend.value)}%
-          </span>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/atoms/Modal.tsx b/src/components/atoms/Modal.tsx
deleted file mode 100644
index 2f2b737..0000000
--- a/src/components/atoms/Modal.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { X } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface ModalProps {
-  isOpen: boolean
-  onClose: () => void
-  title?: string
-  children: React.ReactNode
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
-  showCloseButton?: boolean
-  className?: string
-}
-
-export function Modal({
-  isOpen,
-  onClose,
-  title,
-  children,
-  size = 'md',
-  showCloseButton = true,
-  className,
-}: ModalProps) {
-  if (!isOpen) return null
-
-  const sizeStyles = {
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    full: 'max-w-full m-4',
-  }
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm animate-in fade-in-0"
-      onClick={onClose}
-    >
-      <div
-        className={cn(
-          'relative w-full bg-card border border-border rounded-lg shadow-lg animate-in zoom-in-95',
-          sizeStyles[size],
-          className
-        )}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {(title || showCloseButton) && (
-          <div className="flex items-center justify-between p-6 border-b border-border">
-            {title && <h2 className="text-lg font-semibold">{title}</h2>}
-            {showCloseButton && (
-              <button
-                onClick={onClose}
-                className="ml-auto p-1 rounded-md hover:bg-accent transition-colors"
-                aria-label="Close modal"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            )}
-          </div>
-        )}
-        <div className="p-6">{children}</div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/atoms/Notification.tsx b/src/components/atoms/Notification.tsx
deleted file mode 100644
index 452ae42..0000000
--- a/src/components/atoms/Notification.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Info, CheckCircle, Warning, XCircle } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface NotificationProps {
-  type: 'info' | 'success' | 'warning' | 'error'
-  title: string
-  message?: string
-  onClose?: () => void
-  className?: string
-}
-
-export function Notification({ type, title, message, onClose, className }: NotificationProps) {
-  const config = {
-    info: {
-      icon: Info,
-      color: 'text-blue-500',
-      bg: 'bg-blue-500/10',
-      border: 'border-blue-500/20',
-    },
-    success: {
-      icon: CheckCircle,
-      color: 'text-accent',
-      bg: 'bg-accent/10',
-      border: 'border-accent/20',
-    },
-    warning: {
-      icon: Warning,
-      color: 'text-yellow-500',
-      bg: 'bg-yellow-500/10',
-      border: 'border-yellow-500/20',
-    },
-    error: {
-      icon: XCircle,
-      color: 'text-destructive',
-      bg: 'bg-destructive/10',
-      border: 'border-destructive/20',
-    },
-  }
-
-  const { icon: Icon, color, bg, border } = config[type]
-
-  return (
-    <div
-      className={cn(
-        'flex gap-3 p-4 rounded-lg border',
-        bg,
-        border,
-        className
-      )}
-    >
-      <Icon className={cn('w-5 h-5 flex-shrink-0', color)} weight="fill" />
-      <div className="flex-1 min-w-0">
-        <h4 className="font-medium text-sm">{title}</h4>
-        {message && <p className="text-sm text-muted-foreground mt-1">{message}</p>}
-      </div>
-      {onClose && (
-        <button
-          onClick={onClose}
-          className="flex-shrink-0 text-muted-foreground hover:text-foreground transition-colors"
-          aria-label="Close notification"
-        >
-          <XCircle className="w-4 h-4" />
-        </button>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/atoms/PageHeader.tsx b/src/components/atoms/PageHeader.tsx
deleted file mode 100644
index cc53c6f..0000000
--- a/src/components/atoms/PageHeader.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface BasicPageHeaderProps {
-  title: string
-  description?: string
-  actions?: React.ReactNode
-  className?: string
-}
-
-export function BasicPageHeader({ title, description, actions, className }: BasicPageHeaderProps) {
-  return (
-    <div className={cn('flex items-start justify-between mb-6', className)}>
-      <div className="space-y-1">
-        <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
-        {description && (
-          <p className="text-muted-foreground">{description}</p>
-        )}
-      </div>
-      {actions && (
-        <div className="flex gap-2">{actions}</div>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/atoms/ProgressBar.tsx b/src/components/atoms/ProgressBar.tsx
deleted file mode 100644
index 680a4ec..0000000
--- a/src/components/atoms/ProgressBar.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface ProgressBarProps {
-  value: number
-  max?: number
-  size?: 'sm' | 'md' | 'lg'
-  variant?: 'default' | 'accent' | 'destructive'
-  showLabel?: boolean
-  className?: string
-}
-
-const sizeClasses = {
-  sm: 'h-1',
-  md: 'h-2',
-  lg: 'h-3',
-}
-
-const variantClasses = {
-  default: 'bg-primary',
-  accent: 'bg-accent',
-  destructive: 'bg-destructive',
-}
-
-export function ProgressBar({ 
-  value, 
-  max = 100, 
-  size = 'md',
-  variant = 'default',
-  showLabel = false,
-  className 
-}: ProgressBarProps) {
-  const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
-
-  return (
-    <div className="w-full">
-      <div
-        className={cn(
-          'relative w-full bg-secondary rounded-full overflow-hidden',
-          sizeClasses[size],
-          className
-        )}
-        role="progressbar"
-        aria-valuenow={value}
-        aria-valuemin={0}
-        aria-valuemax={max}
-      >
-        <div
-          className={cn(
-            'h-full transition-all duration-300 ease-out',
-            variantClasses[variant]
-          )}
-          style={{ width: `${percentage}%` }}
-        />
-      </div>
-      {showLabel && (
-        <span className="text-xs text-muted-foreground mt-1 block">
-          {Math.round(percentage)}%
-        </span>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Pulse.tsx b/src/components/atoms/Pulse.tsx
deleted file mode 100644
index 22b9eb3..0000000
--- a/src/components/atoms/Pulse.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface PulseProps {
-  variant?: 'primary' | 'accent' | 'success' | 'warning' | 'error'
-  size?: 'sm' | 'md' | 'lg'
-  speed?: 'slow' | 'normal' | 'fast'
-  className?: string
-}
-
-export function Pulse({
-  variant = 'primary',
-  size = 'md',
-  speed = 'normal',
-  className,
-}: PulseProps) {
-  const sizeClasses = {
-    sm: 'w-2 h-2',
-    md: 'w-3 h-3',
-    lg: 'w-4 h-4',
-  }
-
-  const variantClasses = {
-    primary: 'bg-primary',
-    accent: 'bg-accent',
-    success: 'bg-green-500',
-    warning: 'bg-yellow-500',
-    error: 'bg-red-500',
-  }
-
-  const speedClasses = {
-    slow: 'animate-pulse [animation-duration:3s]',
-    normal: 'animate-pulse',
-    fast: 'animate-pulse [animation-duration:0.5s]',
-  }
-
-  return (
-    <div className={cn('relative inline-flex', className)}>
-      <span
-        className={cn(
-          'inline-flex rounded-full opacity-75',
-          sizeClasses[size],
-          variantClasses[variant],
-          speedClasses[speed]
-        )}
-      />
-      <span
-        className={cn(
-          'absolute inline-flex rounded-full opacity-75',
-          sizeClasses[size],
-          variantClasses[variant],
-          speedClasses[speed]
-        )}
-      />
-    </div>
-  )
-}
diff --git a/src/components/atoms/Radio.tsx b/src/components/atoms/Radio.tsx
deleted file mode 100644
index 7fec135..0000000
--- a/src/components/atoms/Radio.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface RadioOption {
-  value: string
-  label: string
-  disabled?: boolean
-}
-
-interface RadioGroupProps {
-  options: RadioOption[]
-  value: string
-  onChange: (value: string) => void
-  name: string
-  orientation?: 'horizontal' | 'vertical'
-  className?: string
-}
-
-export function RadioGroup({ 
-  options, 
-  value, 
-  onChange, 
-  name, 
-  orientation = 'vertical',
-  className 
-}: RadioGroupProps) {
-  return (
-    <div
-      role="radiogroup"
-      className={cn(
-        'flex gap-3',
-        orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap',
-        className
-      )}
-    >
-      {options.map((option) => (
-        <label
-          key={option.value}
-          className={cn(
-            'flex items-center gap-2 cursor-pointer',
-            option.disabled && 'opacity-50 cursor-not-allowed'
-          )}
-        >
-          <input
-            type="radio"
-            name={name}
-            value={option.value}
-            checked={value === option.value}
-            onChange={(e) => !option.disabled && onChange(e.target.value)}
-            disabled={option.disabled}
-            className="sr-only"
-          />
-          <span
-            className={cn(
-              'w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors',
-              value === option.value
-                ? 'border-primary bg-primary'
-                : 'border-input bg-background'
-            )}
-          >
-            {value === option.value && (
-              <span className="w-2 h-2 rounded-full bg-primary-foreground" />
-            )}
-          </span>
-          <span className="text-sm font-medium">{option.label}</span>
-        </label>
-      ))}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Rating.tsx b/src/components/atoms/Rating.tsx
deleted file mode 100644
index 4427246..0000000
--- a/src/components/atoms/Rating.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Star } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface RatingProps {
-  value: number
-  onChange?: (value: number) => void
-  max?: number
-  size?: 'sm' | 'md' | 'lg'
-  readonly?: boolean
-  showValue?: boolean
-  className?: string
-}
-
-export function Rating({ 
-  value, 
-  onChange, 
-  max = 5, 
-  size = 'md', 
-  readonly = false,
-  showValue = false,
-  className 
-}: RatingProps) {
-  const sizeStyles = {
-    sm: 16,
-    md: 20,
-    lg: 24,
-  }
-
-  const iconSize = sizeStyles[size]
-
-  return (
-    <div className={cn('flex items-center gap-2', className)}>
-      <div className="flex items-center gap-0.5">
-        {Array.from({ length: max }, (_, index) => {
-          const starValue = index + 1
-          const isFilled = starValue <= value
-          const isHalfFilled = starValue - 0.5 === value
-
-          return (
-            <button
-              key={index}
-              type="button"
-              onClick={() => !readonly && onChange?.(starValue)}
-              disabled={readonly}
-              className={cn(
-                'transition-colors',
-                !readonly && 'cursor-pointer hover:scale-110',
-                readonly && 'cursor-default'
-              )}
-              aria-label={`Rate ${starValue} out of ${max}`}
-            >
-              <Star
-                size={iconSize}
-                weight={isFilled ? 'fill' : 'regular'}
-                className={cn(
-                  'transition-colors',
-                  isFilled ? 'text-accent fill-accent' : 'text-muted'
-                )}
-              />
-            </button>
-          )
-        })}
-      </div>
-      {showValue && (
-        <span className="text-sm font-medium text-muted-foreground">
-          {value.toFixed(1)} / {max}
-        </span>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/atoms/ResponsiveGrid.tsx b/src/components/atoms/ResponsiveGrid.tsx
deleted file mode 100644
index e4e4073..0000000
--- a/src/components/atoms/ResponsiveGrid.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-interface GridProps {
-  children: ReactNode
-  columns?: 1 | 2 | 3 | 4 | 5 | 6
-  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  responsive?: boolean
-  className?: string
-}
-
-const columnClasses = {
-  1: 'grid-cols-1',
-  2: 'grid-cols-2',
-  3: 'grid-cols-3',
-  4: 'grid-cols-4',
-  5: 'grid-cols-5',
-  6: 'grid-cols-6',
-}
-
-const gapClasses = {
-  none: 'gap-0',
-  xs: 'gap-1',
-  sm: 'gap-2',
-  md: 'gap-4',
-  lg: 'gap-6',
-  xl: 'gap-8',
-}
-
-const responsiveClasses = {
-  2: 'grid-cols-1 sm:grid-cols-2',
-  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-  5: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
-  6: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6',
-}
-
-export function ResponsiveGrid({
-  children,
-  columns = 3,
-  gap = 'md',
-  responsive = true,
-  className,
-}: GridProps) {
-  return (
-    <div
-      className={cn(
-        'grid',
-        responsive && columns > 1 ? responsiveClasses[columns] : columnClasses[columns],
-        gapClasses[gap],
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/src/components/atoms/ScrollArea.tsx b/src/components/atoms/ScrollArea.tsx
deleted file mode 100644
index 01b7a2e..0000000
--- a/src/components/atoms/ScrollArea.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
-
-interface ScrollAreaProps {
-  children: ReactNode
-  className?: string
-  maxHeight?: string | number
-}
-
-export function ScrollArea({ children, className, maxHeight }: ScrollAreaProps) {
-  return (
-    <ScrollAreaPrimitive.Root 
-      className={cn('relative overflow-hidden', className)}
-      style={{ maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }}
-    >
-      <ScrollAreaPrimitive.Viewport className="h-full w-full rounded">
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollAreaPrimitive.Scrollbar
-        className="flex touch-none select-none transition-colors p-0.5 bg-transparent hover:bg-muted"
-        orientation="vertical"
-      >
-        <ScrollAreaPrimitive.Thumb className="flex-1 bg-border rounded-full relative" />
-      </ScrollAreaPrimitive.Scrollbar>
-      <ScrollAreaPrimitive.Scrollbar
-        className="flex touch-none select-none transition-colors p-0.5 bg-transparent hover:bg-muted"
-        orientation="horizontal"
-      >
-        <ScrollAreaPrimitive.Thumb className="flex-1 bg-border rounded-full relative" />
-      </ScrollAreaPrimitive.Scrollbar>
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
-}
diff --git a/src/components/atoms/SearchInput.tsx b/src/components/atoms/SearchInput.tsx
deleted file mode 100644
index 5258b32..0000000
--- a/src/components/atoms/SearchInput.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { MagnifyingGlass, X } from '@phosphor-icons/react'
-import { Input } from './Input'
-
-interface BasicSearchInputProps {
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
-  onClear?: () => void
-  className?: string
-}
-
-export function BasicSearchInput({
-  value,
-  onChange,
-  placeholder = 'Search...',
-  onClear,
-  className,
-}: BasicSearchInputProps) {
-  const handleClear = () => {
-    onChange('')
-    onClear?.()
-  }
-
-  return (
-    <Input
-      type="text"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={placeholder}
-      className={className}
-      leftIcon={<MagnifyingGlass size={18} />}
-      rightIcon={
-        value && (
-          <button
-            type="button"
-            onClick={handleClear}
-            className="text-muted-foreground hover:text-foreground transition-colors"
-            aria-label="Clear search"
-          >
-            <X size={18} />
-          </button>
-        )
-      }
-    />
-  )
-}
diff --git a/src/components/atoms/Section.tsx b/src/components/atoms/Section.tsx
deleted file mode 100644
index 4fede6d..0000000
--- a/src/components/atoms/Section.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface SectionProps {
-  children: ReactNode
-  spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
-  className?: string
-}
-
-const spacingClasses = {
-  none: '',
-  sm: 'py-4',
-  md: 'py-8',
-  lg: 'py-12',
-  xl: 'py-16',
-}
-
-export function Section({ children, spacing = 'md', className }: SectionProps) {
-  return (
-    <section className={cn(spacingClasses[spacing], className)}>
-      {children}
-    </section>
-  )
-}
diff --git a/src/components/atoms/Select.tsx b/src/components/atoms/Select.tsx
deleted file mode 100644
index 3d797db..0000000
--- a/src/components/atoms/Select.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface SelectOption {
-  value: string
-  label: string
-  disabled?: boolean
-}
-
-interface SelectProps {
-  value: string
-  onChange: (value: string) => void
-  options: SelectOption[]
-  label?: string
-  placeholder?: string
-  error?: boolean
-  helperText?: string
-  disabled?: boolean
-  className?: string
-}
-
-export function Select({
-  value,
-  onChange,
-  options,
-  label,
-  placeholder = 'Select an option',
-  error,
-  helperText,
-  disabled,
-  className,
-}: SelectProps) {
-  return (
-    <div className={cn('w-full', className)}>
-      {label && (
-        <label className="block text-sm font-medium mb-1.5 text-foreground">
-          {label}
-        </label>
-      )}
-      <select
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        disabled={disabled}
-        className={cn(
-          'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          'transition-colors',
-          error ? 'border-destructive focus-visible:ring-destructive' : 'border-input'
-        )}
-      >
-        {placeholder && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {options.map((option) => (
-          <option key={option.value} value={option.value} disabled={option.disabled}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-      {helperText && (
-        <p className={cn('text-xs mt-1.5', error ? 'text-destructive' : 'text-muted-foreground')}>
-          {helperText}
-        </p>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Skeleton.tsx b/src/components/atoms/Skeleton.tsx
deleted file mode 100644
index 02ec9ec..0000000
--- a/src/components/atoms/Skeleton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface SkeletonProps {
-  variant?: 'text' | 'rectangular' | 'circular' | 'rounded'
-  width?: string | number
-  height?: string | number
-  className?: string
-}
-
-const variantClasses = {
-  text: 'rounded h-4',
-  rectangular: 'rounded-none',
-  circular: 'rounded-full',
-  rounded: 'rounded-lg',
-}
-
-export function Skeleton({ 
-  variant = 'rectangular', 
-  width,
-  height,
-  className 
-}: SkeletonProps) {
-  return (
-    <div
-      className={cn(
-        'bg-muted animate-pulse',
-        variantClasses[variant],
-        className
-      )}
-      style={{
-        width: typeof width === 'number' ? `${width}px` : width,
-        height: typeof height === 'number' ? `${height}px` : height,
-      }}
-    />
-  )
-}
diff --git a/src/components/atoms/Slider.tsx b/src/components/atoms/Slider.tsx
deleted file mode 100644
index fae44b4..0000000
--- a/src/components/atoms/Slider.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface SliderProps {
-  value: number
-  onChange: (value: number) => void
-  min?: number
-  max?: number
-  step?: number
-  label?: string
-  showValue?: boolean
-  disabled?: boolean
-  className?: string
-}
-
-export function Slider({ 
-  value, 
-  onChange, 
-  min = 0, 
-  max = 100, 
-  step = 1, 
-  label, 
-  showValue = false,
-  disabled = false,
-  className 
-}: SliderProps) {
-  const percentage = ((value - min) / (max - min)) * 100
-
-  return (
-    <div className={cn('w-full', className)}>
-      {(label || showValue) && (
-        <div className="flex items-center justify-between mb-2">
-          {label && <span className="text-sm font-medium">{label}</span>}
-          {showValue && <span className="text-sm text-muted-foreground">{value}</span>}
-        </div>
-      )}
-      <div className="relative">
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          onChange={(e) => onChange(Number(e.target.value))}
-          disabled={disabled}
-          className={cn(
-            'w-full h-2 bg-secondary rounded-lg appearance-none cursor-pointer',
-            'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-            disabled && 'opacity-50 cursor-not-allowed',
-            '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5',
-            '[&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full',
-            '[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-transform',
-            '[&::-webkit-slider-thumb]:hover:scale-110',
-            '[&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:bg-primary',
-            '[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-full',
-            '[&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:transition-transform',
-            '[&::-moz-range-thumb]:hover:scale-110'
-          )}
-          style={{
-            background: `linear-gradient(to right, hsl(var(--primary)) 0%, hsl(var(--primary)) ${percentage}%, hsl(var(--secondary)) ${percentage}%, hsl(var(--secondary)) 100%)`
-          }}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/atoms/Spacer.tsx b/src/components/atoms/Spacer.tsx
deleted file mode 100644
index 6e96b5f..0000000
--- a/src/components/atoms/Spacer.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface SpacerProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  axis?: 'horizontal' | 'vertical' | 'both'
-  className?: string
-}
-
-const sizeClasses = {
-  xs: 1,
-  sm: 2,
-  md: 4,
-  lg: 8,
-  xl: 16,
-  '2xl': 24,
-}
-
-export function Spacer({ size = 'md', axis = 'vertical', className }: SpacerProps) {
-  const spacing = sizeClasses[size]
-
-  return (
-    <div
-      className={cn(className)}
-      style={{
-        width: axis === 'horizontal' || axis === 'both' ? `${spacing * 4}px` : undefined,
-        height: axis === 'vertical' || axis === 'both' ? `${spacing * 4}px` : undefined,
-      }}
-      aria-hidden="true"
-    />
-  )
-}
diff --git a/src/components/atoms/Sparkle.tsx b/src/components/atoms/Sparkle.tsx
deleted file mode 100644
index d394135..0000000
--- a/src/components/atoms/Sparkle.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { cn } from '@/lib/utils'
-import { Sparkle as SparkleIcon } from '@phosphor-icons/react'
-
-interface SparkleProps {
-  variant?: 'default' | 'primary' | 'accent' | 'gold'
-  size?: number
-  animate?: boolean
-  className?: string
-}
-
-export function Sparkle({
-  variant = 'default',
-  size = 16,
-  animate = true,
-  className,
-}: SparkleProps) {
-  const variantClasses = {
-    default: 'text-foreground',
-    primary: 'text-primary',
-    accent: 'text-accent',
-    gold: 'text-yellow-500',
-  }
-
-  return (
-    <SparkleIcon
-      size={size}
-      weight="fill"
-      className={cn(
-        variantClasses[variant],
-        animate && 'animate-pulse',
-        className
-      )}
-    />
-  )
-}
diff --git a/src/components/atoms/Spinner.tsx b/src/components/atoms/Spinner.tsx
deleted file mode 100644
index 279ff40..0000000
--- a/src/components/atoms/Spinner.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CircleNotch } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface SpinnerProps {
-  size?: number
-  className?: string
-}
-
-export function Spinner({ size = 24, className }: SpinnerProps) {
-  return (
-    <CircleNotch 
-      size={size} 
-      weight="bold"
-      className={cn('animate-spin text-primary', className)}
-    />
-  )
-}
diff --git a/src/components/atoms/Stack.tsx b/src/components/atoms/Stack.tsx
deleted file mode 100644
index 548bd82..0000000
--- a/src/components/atoms/Stack.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface StackProps {
-  children: ReactNode
-  direction?: 'horizontal' | 'vertical'
-  spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  align?: 'start' | 'center' | 'end' | 'stretch'
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
-  wrap?: boolean
-  className?: string
-}
-
-const spacingClasses = {
-  none: 'gap-0',
-  xs: 'gap-1',
-  sm: 'gap-2',
-  md: 'gap-4',
-  lg: 'gap-6',
-  xl: 'gap-8',
-}
-
-const alignClasses = {
-  start: 'items-start',
-  center: 'items-center',
-  end: 'items-end',
-  stretch: 'items-stretch',
-}
-
-const justifyClasses = {
-  start: 'justify-start',
-  center: 'justify-center',
-  end: 'justify-end',
-  between: 'justify-between',
-  around: 'justify-around',
-  evenly: 'justify-evenly',
-}
-
-export function Stack({ 
-  children, 
-  direction = 'vertical',
-  spacing = 'md',
-  align = 'stretch',
-  justify = 'start',
-  wrap = false,
-  className 
-}: StackProps) {
-  return (
-    <div
-      className={cn(
-        'flex',
-        direction === 'horizontal' ? 'flex-row' : 'flex-col',
-        spacingClasses[spacing],
-        alignClasses[align],
-        justifyClasses[justify],
-        wrap && 'flex-wrap',
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/src/components/atoms/StatusIcon.tsx b/src/components/atoms/StatusIcon.tsx
deleted file mode 100644
index 7b828e7..0000000
--- a/src/components/atoms/StatusIcon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { CheckCircle, CloudCheck } from '@phosphor-icons/react'
-
-interface StatusIconProps {
-  type: 'saved' | 'synced'
-  size?: number
-  animate?: boolean
-}
-
-export function StatusIcon({ type, size = 14, animate = false }: StatusIconProps) {
-  const baseClassName = type === 'saved' ? 'text-accent' : ''
-  const animateClassName = animate ? 'animate-in zoom-in duration-200' : ''
-  const className = [baseClassName, animateClassName].filter(Boolean).join(' ')
-
-  if (type === 'saved') {
-    return (
-      <CheckCircle
-        size={size}
-        weight="fill"
-        className={className}
-      />
-    )
-  }
-
-  return <CloudCheck size={size} weight="duotone" />
-}
diff --git a/src/components/atoms/StepIndicator.tsx b/src/components/atoms/StepIndicator.tsx
deleted file mode 100644
index 7080b0a..0000000
--- a/src/components/atoms/StepIndicator.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { cn } from '@/lib/utils'
-import { Check } from '@phosphor-icons/react'
-
-interface StepIndicatorProps {
-  steps: Array<{
-    id: string
-    label: string
-  }>
-  currentStep: string
-  completedSteps?: string[]
-  onStepClick?: (stepId: string) => void
-  className?: string
-}
-
-export function StepIndicator({ 
-  steps, 
-  currentStep, 
-  completedSteps = [], 
-  onStepClick,
-  className 
-}: StepIndicatorProps) {
-  return (
-    <div className={cn('flex items-center gap-2', className)}>
-      {steps.map((step, index) => {
-        const isCompleted = completedSteps.includes(step.id)
-        const isCurrent = step.id === currentStep
-        const isClickable = !!onStepClick
-
-        return (
-          <div key={step.id} className="flex items-center gap-2">
-            <div
-              className={cn(
-                'flex items-center gap-2',
-                isClickable && 'cursor-pointer'
-              )}
-              onClick={() => isClickable && onStepClick(step.id)}
-            >
-              <div
-                className={cn(
-                  'flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium transition-colors',
-                  isCompleted && 'bg-accent text-accent-foreground',
-                  isCurrent && !isCompleted && 'bg-primary text-primary-foreground',
-                  !isCurrent && !isCompleted && 'bg-muted text-muted-foreground'
-                )}
-              >
-                {isCompleted ? <Check size={16} weight="bold" /> : index + 1}
-              </div>
-              <span className={cn(
-                'text-sm font-medium',
-                isCurrent && 'text-foreground',
-                !isCurrent && 'text-muted-foreground'
-              )}>
-                {step.label}
-              </span>
-            </div>
-            {index < steps.length - 1 && (
-              <div className={cn(
-                'w-8 h-0.5',
-                completedSteps.includes(steps[index + 1].id) ? 'bg-accent' : 'bg-border'
-              )} />
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Stepper.tsx b/src/components/atoms/Stepper.tsx
deleted file mode 100644
index 393a008..0000000
--- a/src/components/atoms/Stepper.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Check } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface Step {
-  label: string
-  description?: string
-}
-
-interface StepperProps {
-  steps: Step[]
-  currentStep: number
-  className?: string
-}
-
-export function Stepper({ steps, currentStep, className }: StepperProps) {
-  return (
-    <div className={cn('w-full', className)}>
-      <div className="flex items-center justify-between">
-        {steps.map((step, index) => {
-          const isCompleted = index < currentStep
-          const isCurrent = index === currentStep
-          const isLast = index === steps.length - 1
-
-          return (
-            <div key={index} className="flex items-center flex-1">
-              <div className="flex flex-col items-center gap-2">
-                <div
-                  className={cn(
-                    'w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-colors',
-                    isCompleted && 'bg-primary text-primary-foreground',
-                    isCurrent && 'bg-primary text-primary-foreground ring-4 ring-primary/20',
-                    !isCompleted && !isCurrent && 'bg-muted text-muted-foreground'
-                  )}
-                >
-                  {isCompleted ? <Check weight="bold" /> : index + 1}
-                </div>
-                <div className="text-center">
-                  <div
-                    className={cn(
-                      'text-sm font-medium',
-                      (isCompleted || isCurrent) ? 'text-foreground' : 'text-muted-foreground'
-                    )}
-                  >
-                    {step.label}
-                  </div>
-                  {step.description && (
-                    <div className="text-xs text-muted-foreground mt-0.5">
-                      {step.description}
-                    </div>
-                  )}
-                </div>
-              </div>
-              {!isLast && (
-                <div
-                  className={cn(
-                    'flex-1 h-0.5 mx-4 transition-colors',
-                    isCompleted ? 'bg-primary' : 'bg-muted'
-                  )}
-                />
-              )}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/atoms/TabIcon.tsx b/src/components/atoms/TabIcon.tsx
deleted file mode 100644
index 53e5f82..0000000
--- a/src/components/atoms/TabIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-interface TabIconProps {
-  icon: React.ReactNode
-  variant?: 'default' | 'gradient'
-}
-
-export function TabIcon({ icon, variant = 'default' }: TabIconProps) {
-  if (variant === 'gradient') {
-    return (
-      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center text-primary shrink-0">
-        {icon}
-      </div>
-    )
-  }
-
-  return <>{icon}</>
-}
diff --git a/src/components/atoms/Table.tsx b/src/components/atoms/Table.tsx
deleted file mode 100644
index aafc6f2..0000000
--- a/src/components/atoms/Table.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface TableColumn<T> {
-  key: keyof T | string
-  header: string
-  render?: (item: T) => React.ReactNode
-  width?: string
-}
-
-interface TableProps<T> {
-  data: T[]
-  columns: TableColumn<T>[]
-  onRowClick?: (item: T) => void
-  striped?: boolean
-  hoverable?: boolean
-  compact?: boolean
-  className?: string
-}
-
-export function Table<T extends Record<string, any>>({
-  data,
-  columns,
-  onRowClick,
-  striped = false,
-  hoverable = true,
-  compact = false,
-  className,
-}: TableProps<T>) {
-  return (
-    <div className={cn('w-full overflow-auto', className)}>
-      <table className="w-full border-collapse">
-        <thead>
-          <tr className="border-b border-border bg-muted/50">
-            {columns.map((column, index) => (
-              <th
-                key={index}
-                className={cn(
-                  'text-left font-medium text-sm text-muted-foreground',
-                  compact ? 'px-3 py-2' : 'px-4 py-3',
-                  column.width && `w-[${column.width}]`
-                )}
-              >
-                {column.header}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((item, rowIndex) => (
-            <tr
-              key={rowIndex}
-              onClick={() => onRowClick?.(item)}
-              className={cn(
-                'border-b border-border transition-colors',
-                striped && rowIndex % 2 === 1 && 'bg-muted/30',
-                hoverable && 'hover:bg-muted/50',
-                onRowClick && 'cursor-pointer'
-              )}
-            >
-              {columns.map((column, colIndex) => (
-                <td
-                  key={colIndex}
-                  className={cn(
-                    'text-sm',
-                    compact ? 'px-3 py-2' : 'px-4 py-3'
-                  )}
-                >
-                  {column.render
-                    ? column.render(item)
-                    : item[column.key as keyof T]}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      {data.length === 0 && (
-        <div className="text-center py-8 text-muted-foreground">
-          No data available
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Tabs.tsx b/src/components/atoms/Tabs.tsx
deleted file mode 100644
index d1e772d..0000000
--- a/src/components/atoms/Tabs.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface Tab {
-  id: string
-  label: string
-  icon?: React.ReactNode
-  disabled?: boolean
-}
-
-interface TabsProps {
-  tabs: Tab[]
-  activeTab: string
-  onChange: (tabId: string) => void
-  variant?: 'default' | 'pills' | 'underline'
-  className?: string
-}
-
-export function Tabs({ tabs, activeTab, onChange, variant = 'default', className }: TabsProps) {
-  const variantStyles = {
-    default: {
-      container: 'border-b border-border',
-      tab: 'border-b-2 border-transparent data-[active=true]:border-primary',
-      active: 'text-foreground',
-      inactive: 'text-muted-foreground hover:text-foreground',
-    },
-    pills: {
-      container: 'bg-muted p-1 rounded-lg',
-      tab: 'rounded-md data-[active=true]:bg-background data-[active=true]:shadow-sm',
-      active: 'text-foreground',
-      inactive: 'text-muted-foreground hover:text-foreground',
-    },
-    underline: {
-      container: 'border-b border-border',
-      tab: 'border-b-2 border-transparent data-[active=true]:border-accent',
-      active: 'text-accent',
-      inactive: 'text-muted-foreground hover:text-foreground',
-    },
-  }
-
-  const styles = variantStyles[variant]
-
-  return (
-    <div className={cn('flex gap-1', styles.container, className)}>
-      {tabs.map((tab) => {
-        const isActive = tab.id === activeTab
-
-        return (
-          <button
-            key={tab.id}
-            onClick={() => !tab.disabled && onChange(tab.id)}
-            disabled={tab.disabled}
-            data-active={isActive}
-            className={cn(
-              'flex items-center gap-2 px-4 py-2 font-medium text-sm transition-colors',
-              isActive ? styles.active : styles.inactive,
-              styles.tab,
-              tab.disabled && 'opacity-50 cursor-not-allowed'
-            )}
-          >
-            {tab.icon}
-            {tab.label}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Tag.tsx b/src/components/atoms/Tag.tsx
deleted file mode 100644
index 586e3e3..0000000
--- a/src/components/atoms/Tag.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { X } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface TagProps {
-  children: React.ReactNode
-  variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'destructive'
-  size?: 'sm' | 'md' | 'lg'
-  removable?: boolean
-  onRemove?: () => void
-  className?: string
-}
-
-export function Tag({ 
-  children, 
-  variant = 'default', 
-  size = 'md', 
-  removable = false, 
-  onRemove,
-  className 
-}: TagProps) {
-  const variantStyles = {
-    default: 'bg-muted text-muted-foreground',
-    primary: 'bg-primary/10 text-primary',
-    secondary: 'bg-secondary text-secondary-foreground',
-    accent: 'bg-accent/10 text-accent',
-    destructive: 'bg-destructive/10 text-destructive',
-  }
-
-  const sizeStyles = {
-    sm: 'text-xs px-2 py-0.5 gap-1',
-    md: 'text-sm px-3 py-1 gap-1.5',
-    lg: 'text-base px-4 py-1.5 gap-2',
-  }
-
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full font-medium transition-colors',
-        variantStyles[variant],
-        sizeStyles[size],
-        className
-      )}
-    >
-      {children}
-      {removable && onRemove && (
-        <button
-          onClick={(e) => {
-            e.stopPropagation()
-            onRemove()
-          }}
-          className="hover:opacity-70 transition-opacity"
-          aria-label="Remove tag"
-        >
-          <X className="w-3 h-3" />
-        </button>
-      )}
-    </span>
-  )
-}
diff --git a/src/components/atoms/Text.tsx b/src/components/atoms/Text.tsx
deleted file mode 100644
index cd5a58b..0000000
--- a/src/components/atoms/Text.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ReactNode } from 'react'
-
-interface TextProps {
-  children: ReactNode
-  variant?: 'body' | 'caption' | 'muted' | 'small'
-  className?: string
-}
-
-const variantClasses = {
-  body: 'text-sm text-foreground',
-  caption: 'text-xs text-muted-foreground',
-  muted: 'text-sm text-muted-foreground',
-  small: 'text-xs text-foreground',
-}
-
-export function Text({ children, variant = 'body', className = '' }: TextProps) {
-  return (
-    <p className={`${variantClasses[variant]} ${className}`}>
-      {children}
-    </p>
-  )
-}
diff --git a/src/components/atoms/TextArea.tsx b/src/components/atoms/TextArea.tsx
deleted file mode 100644
index f711b3b..0000000
--- a/src/components/atoms/TextArea.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { forwardRef } from 'react'
-import { cn } from '@/lib/utils'
-
-interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  error?: boolean
-  helperText?: string
-  label?: string
-}
-
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ error, helperText, label, className, ...props }, ref) => {
-    return (
-      <div className="w-full">
-        {label && (
-          <label className="block text-sm font-medium mb-1.5 text-foreground">
-            {label}
-          </label>
-        )}
-        <textarea
-          ref={ref}
-          className={cn(
-            'flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm',
-            'placeholder:text-muted-foreground',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            'resize-vertical transition-colors',
-            error ? 'border-destructive focus-visible:ring-destructive' : 'border-input',
-            className
-          )}
-          {...props}
-        />
-        {helperText && (
-          <p className={cn('text-xs mt-1.5', error ? 'text-destructive' : 'text-muted-foreground')}>
-            {helperText}
-          </p>
-        )}
-      </div>
-    )
-  }
-)
-
-TextArea.displayName = 'TextArea'
diff --git a/src/components/atoms/TextGradient.tsx b/src/components/atoms/TextGradient.tsx
deleted file mode 100644
index da820a3..0000000
--- a/src/components/atoms/TextGradient.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-interface TextGradientProps {
-  children: ReactNode
-  from?: string
-  to?: string
-  via?: string
-  direction?: 'to-r' | 'to-l' | 'to-b' | 'to-t' | 'to-br' | 'to-bl' | 'to-tr' | 'to-tl'
-  className?: string
-  animate?: boolean
-}
-
-export function TextGradient({
-  children,
-  from = 'from-primary',
-  to = 'to-accent',
-  via,
-  direction = 'to-r',
-  className,
-  animate = false,
-}: TextGradientProps) {
-  const gradientClasses = cn(
-    'bg-gradient-to-r',
-    from,
-    via,
-    to,
-    direction !== 'to-r' && `bg-gradient-${direction}`,
-    'bg-clip-text text-transparent',
-    animate && 'animate-gradient-x'
-  )
-
-  return (
-    <span className={cn(gradientClasses, className)}>
-      {children}
-    </span>
-  )
-}
diff --git a/src/components/atoms/TextHighlight.tsx b/src/components/atoms/TextHighlight.tsx
deleted file mode 100644
index c70a873..0000000
--- a/src/components/atoms/TextHighlight.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface TextHighlightProps {
-  children: React.ReactNode
-  variant?: 'primary' | 'accent' | 'success' | 'warning' | 'error'
-  className?: string
-}
-
-export function TextHighlight({ children, variant = 'primary', className }: TextHighlightProps) {
-  const variantClasses = {
-    primary: 'bg-primary/10 text-primary border-primary/20',
-    accent: 'bg-accent/10 text-accent-foreground border-accent/20',
-    success: 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20',
-    warning: 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 border-yellow-500/20',
-    error: 'bg-destructive/10 text-destructive border-destructive/20',
-  }
-
-  return (
-    <span className={cn(
-      'inline-flex items-center px-2 py-0.5 rounded border font-medium text-sm',
-      variantClasses[variant],
-      className
-    )}>
-      {children}
-    </span>
-  )
-}
diff --git a/src/components/atoms/Timeline.tsx b/src/components/atoms/Timeline.tsx
deleted file mode 100644
index 1d626b7..0000000
--- a/src/components/atoms/Timeline.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface TimelineItem {
-  title: string
-  description?: string
-  timestamp?: string
-  icon?: React.ReactNode
-  status?: 'completed' | 'current' | 'pending'
-}
-
-interface TimelineProps {
-  items: TimelineItem[]
-  className?: string
-}
-
-export function Timeline({ items, className }: TimelineProps) {
-  return (
-    <div className={cn('space-y-4', className)}>
-      {items.map((item, index) => {
-        const isLast = index === items.length - 1
-        const status = item.status || 'pending'
-
-        return (
-          <div key={index} className="flex gap-4">
-            <div className="flex flex-col items-center">
-              <div
-                className={cn(
-                  'w-8 h-8 rounded-full flex items-center justify-center border-2 transition-colors',
-                  status === 'completed' && 'bg-primary border-primary text-primary-foreground',
-                  status === 'current' && 'bg-accent border-accent text-accent-foreground',
-                  status === 'pending' && 'bg-background border-muted text-muted-foreground'
-                )}
-              >
-                {item.icon || (
-                  <div
-                    className={cn(
-                      'w-2 h-2 rounded-full',
-                      status === 'completed' && 'bg-primary-foreground',
-                      status === 'current' && 'bg-accent-foreground',
-                      status === 'pending' && 'bg-muted'
-                    )}
-                  />
-                )}
-              </div>
-              {!isLast && (
-                <div
-                  className={cn(
-                    'w-0.5 flex-1 min-h-[40px] transition-colors',
-                    status === 'completed' ? 'bg-primary' : 'bg-muted'
-                  )}
-                />
-              )}
-            </div>
-            <div className="flex-1 pb-8">
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <h4
-                    className={cn(
-                      'font-medium',
-                      status === 'pending' && 'text-muted-foreground'
-                    )}
-                  >
-                    {item.title}
-                  </h4>
-                  {item.description && (
-                    <p className="text-sm text-muted-foreground mt-1">
-                      {item.description}
-                    </p>
-                  )}
-                </div>
-                {item.timestamp && (
-                  <span className="text-xs text-muted-foreground whitespace-nowrap">
-                    {item.timestamp}
-                  </span>
-                )}
-              </div>
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
diff --git a/src/components/atoms/Timestamp.tsx b/src/components/atoms/Timestamp.tsx
deleted file mode 100644
index 6d57fa6..0000000
--- a/src/components/atoms/Timestamp.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { format, formatDistanceToNow } from 'date-fns'
-import { cn } from '@/lib/utils'
-
-interface TimestampProps {
-  date: Date | number | string
-  relative?: boolean
-  formatString?: string
-  className?: string
-}
-
-export function Timestamp({ 
-  date, 
-  relative = false, 
-  formatString = 'MMM d, yyyy h:mm a',
-  className 
-}: TimestampProps) {
-  const dateObj = typeof date === 'string' || typeof date === 'number' ? new Date(date) : date
-
-  const displayText = relative 
-    ? formatDistanceToNow(dateObj, { addSuffix: true })
-    : format(dateObj, formatString)
-
-  return (
-    <time 
-      dateTime={dateObj.toISOString()} 
-      className={cn('text-sm text-muted-foreground', className)}
-    >
-      {displayText}
-    </time>
-  )
-}
diff --git a/src/components/atoms/Toggle.tsx b/src/components/atoms/Toggle.tsx
deleted file mode 100644
index 93c9a6f..0000000
--- a/src/components/atoms/Toggle.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface ToggleProps {
-  checked: boolean
-  onChange: (checked: boolean) => void
-  label?: string
-  disabled?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  className?: string
-}
-
-export function Toggle({ 
-  checked, 
-  onChange, 
-  label, 
-  disabled = false, 
-  size = 'md',
-  className 
-}: ToggleProps) {
-  const sizeStyles = {
-    sm: {
-      container: 'w-8 h-4',
-      thumb: 'w-3 h-3',
-      translate: 'translate-x-4',
-    },
-    md: {
-      container: 'w-11 h-6',
-      thumb: 'w-5 h-5',
-      translate: 'translate-x-5',
-    },
-    lg: {
-      container: 'w-14 h-7',
-      thumb: 'w-6 h-6',
-      translate: 'translate-x-7',
-    },
-  }
-
-  const { container, thumb, translate } = sizeStyles[size]
-
-  return (
-    <label className={cn('flex items-center gap-2 cursor-pointer', disabled && 'opacity-50 cursor-not-allowed', className)}>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={checked}
-        disabled={disabled}
-        onClick={() => !disabled && onChange(!checked)}
-        className={cn(
-          'relative inline-flex items-center rounded-full transition-colors',
-          container,
-          checked ? 'bg-primary' : 'bg-input'
-        )}
-      >
-        <span
-          className={cn(
-            'inline-block rounded-full bg-background transition-transform',
-            thumb,
-            checked ? translate : 'translate-x-0.5'
-          )}
-        />
-      </button>
-      {label && <span className="text-sm font-medium">{label}</span>}
-    </label>
-  )
-}
diff --git a/src/components/atoms/TreeIcon.tsx b/src/components/atoms/TreeIcon.tsx
deleted file mode 100644
index ffc9799..0000000
--- a/src/components/atoms/TreeIcon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Tree } from '@phosphor-icons/react'
-
-interface TreeIconProps {
-  size?: number
-  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
-  className?: string
-}
-
-export function TreeIcon({ size = 20, weight = 'duotone', className = '' }: TreeIconProps) {
-  return <Tree size={size} weight={weight} className={className} />
-}
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index fb449ff..a5176ae 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -1,26 +1,11 @@
-export { AppLogo } from './AppLogo'
-export { TabIcon } from './TabIcon'
-export { StatusIcon } from './StatusIcon'
 export { ErrorBadge } from './ErrorBadge'
-export { IconWrapper } from './IconWrapper'
-export { LoadingSpinner } from './LoadingSpinner'
-export { EmptyStateIcon } from './EmptyStateIcon'
-export { TreeIcon } from './TreeIcon'
-export { FileIcon } from './FileIcon'
-export { ActionIcon } from './ActionIcon'
 export { SeedDataStatus } from './SeedDataStatus'
 export { ActionButton } from './ActionButton'
 export { IconButton } from './IconButton'
-export { DataList } from './DataList'
 export { StatusBadge } from './StatusBadge'
-export { Text } from './Text'
-export { Heading } from './Heading'
-export { List } from './List'
-export { Grid } from './Grid'
 export { DataSourceBadge } from './DataSourceBadge'
 export { BindingIndicator } from './BindingIndicator'
 export { StatCard } from './StatCard'
-export { LoadingState } from './LoadingState'
 export { EmptyState } from './EmptyState'
 export { DetailRow } from './DetailRow'
 export { CompletionCard } from './CompletionCard'
@@ -28,58 +13,18 @@ export { TipsCard } from './TipsCard'
 export { CountBadge } from './CountBadge'
 export { ConfirmButton } from './ConfirmButton'
 export { FilterInput } from './FilterInput'
-export { BasicPageHeader } from './PageHeader'
 export { MetricCard } from './MetricCard'
 
-export { Link } from './Link'
-export { Divider } from './Divider'
-export { Avatar } from './Avatar'
-export { Chip } from './Chip'
-export { Code } from './Code'
-export { Kbd } from './Kbd'
-export { ProgressBar } from './ProgressBar'
-export { Skeleton } from './Skeleton'
 export { Tooltip } from './Tooltip'
-export { Alert } from './Alert'
-export { Spinner } from './Spinner'
-export { Dot } from './Dot'
 export { Image } from './Image'
-export { Label } from './Label'
-export { HelperText } from './HelperText'
-export { Container } from './Container'
-export { Section } from './Section'
-export { Stack } from './Stack'
-export { Spacer } from './Spacer'
-export { Timestamp } from './Timestamp'
-export { ScrollArea } from './ScrollArea'
 
-export { Tag } from './Tag'
-export { Breadcrumb, BreadcrumbNav } from './Breadcrumb'
-export { IconText } from './IconText'
-export { TextArea } from './TextArea'
-export { Input } from './Input'
-export { Toggle } from './Toggle'
-export { RadioGroup } from './Radio'
-export { Checkbox } from './Checkbox'
-export { Slider } from './Slider'
-export { ColorSwatch } from './ColorSwatch'
-export { Stepper } from './Stepper'
-export { Rating } from './Rating'
-export { Timeline } from './Timeline'
 export { FileUpload } from './FileUpload'
 export { Popover } from './Popover'
-export { Tabs } from './Tabs'
 export { Menu } from './Menu'
 export { Accordion } from './Accordion'
 export { Card } from './Card'
-export { Notification } from './Notification'
 export { CopyButton } from './CopyButton'
 export { PasswordInput } from './PasswordInput'
-export { BasicSearchInput } from './SearchInput'
-export { Select } from './Select'
-export { Modal } from './Modal'
-export { Drawer } from './Drawer'
-export { Table } from './Table'
 
 export { Button } from './Button'
 export { Badge } from './Badge'
@@ -87,7 +32,6 @@ export { Switch } from './Switch'
 export { Separator } from './Separator'
 export { HoverCard } from './HoverCard'
 export { Calendar } from './Calendar'
-export { ButtonGroup } from './ButtonGroup'
 export { CommandPalette } from './CommandPalette'
 export { ContextMenu } from './ContextMenu'
 export type { ContextMenuItemType } from './ContextMenu'
@@ -96,25 +40,11 @@ export type { Column } from './DataTable'
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './Form'
 export { DatePicker } from './DatePicker'
 export { RangeSlider } from './RangeSlider'
-export { InfoPanel } from './InfoPanel'
-export { ResponsiveGrid } from './ResponsiveGrid'
-export { Flex } from './Flex'
 export { CircularProgress } from './CircularProgress'
-export { AvatarGroup } from './AvatarGroup'
 export { NumberInput } from './NumberInput'
-export { TextGradient } from './TextGradient'
-export { Pulse } from './Pulse'
 export { QuickActionButton } from './QuickActionButton'
 export { PanelHeader } from './PanelHeader'
-export { LiveIndicator } from './LiveIndicator'
-export { Sparkle } from './Sparkle'
 export { GlowCard } from './GlowCard'
 
-export { TextHighlight } from './TextHighlight'
 export { ActionCard } from './ActionCard'
-export { InfoBox } from './InfoBox'
-export { ListItem } from './ListItem'
-export { MetricDisplay } from './MetricDisplay'
-export { KeyValue } from './KeyValue'
 export { EmptyMessage } from './EmptyMessage'
-export { StepIndicator } from './StepIndicator'
diff --git a/src/components/molecules/ActionBar.tsx b/src/components/molecules/ActionBar.tsx
deleted file mode 100644
index 7b7ed6c..0000000
--- a/src/components/molecules/ActionBar.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { ReactNode } from 'react'
-import { Button, Flex, Heading } from '@/components/atoms'
-
-interface ActionBarProps {
-  title?: string
-  actions?: {
-    label: string
-    icon?: ReactNode
-    onClick: () => void
-    variant?: 'default' | 'outline' | 'ghost' | 'destructive'
-    disabled?: boolean
-  }[]
-  children?: ReactNode
-  className?: string
-}
-
-export function ActionBar({ title, actions = [], children, className = '' }: ActionBarProps) {
-  return (
-    <Flex justify="between" align="center" gap="md" className={className}>
-      {title && (
-        <Heading level={2} className="text-xl font-semibold">
-          {title}
-        </Heading>
-      )}
-      {children}
-      {actions.length > 0 && (
-        <Flex gap="sm">
-          {actions.map((action, index) => (
-            <Button
-              key={index}
-              variant={action.variant || 'default'}
-              onClick={action.onClick}
-              disabled={action.disabled}
-              size="sm"
-              leftIcon={action.icon}
-            >
-              {action.label}
-            </Button>
-          ))}
-        </Flex>
-      )}
-    </Flex>
-  )
-}
diff --git a/src/components/molecules/AppBranding.tsx b/src/components/molecules/AppBranding.tsx
deleted file mode 100644
index cd59525..0000000
--- a/src/components/molecules/AppBranding.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { AppLogo, Stack, Heading, Text } from '@/components/atoms'
-
-interface AppBrandingProps {
-  title?: string
-  subtitle?: string
-}
-
-export function AppBranding({ 
-  title = 'CodeForge', 
-  subtitle = 'Low-Code Next.js App Builder' 
-}: AppBrandingProps) {
-  return (
-    <Stack direction="horizontal" align="center" spacing="sm" className="flex-1 min-w-0">
-      <AppLogo />
-      <Stack direction="vertical" spacing="none" className="min-w-[100px]">
-        <Heading level={1} className="text-base sm:text-xl font-bold whitespace-nowrap">{title}</Heading>
-        <Text variant="caption" className="hidden sm:block whitespace-nowrap">
-          {subtitle}
-        </Text>
-      </Stack>
-    </Stack>
-  )
-}
diff --git a/src/components/molecules/DataCard.tsx b/src/components/molecules/DataCard.tsx
deleted file mode 100644
index b0db6ff..0000000
--- a/src/components/molecules/DataCard.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Card, Stack, Text, Heading, Skeleton, Flex, IconWrapper } from '@/components/atoms'
-
-interface DataCardProps {
-  title?: string
-  value: string | number
-  description?: string
-  icon?: React.ReactNode
-  trend?: {
-    value: number
-    label: string
-    positive?: boolean
-  }
-  isLoading?: boolean
-  className?: string
-}
-
-export function DataCard({ 
-  title, 
-  value, 
-  description, 
-  icon, 
-  trend,
-  isLoading = false,
-  className = '' 
-}: DataCardProps) {
-  if (isLoading) {
-    return (
-      <Card className={className}>
-        <div className="pt-6 px-6 pb-6">
-          <Stack spacing="sm">
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="h-8 w-16" />
-            <Skeleton className="h-3 w-24" />
-          </Stack>
-        </div>
-      </Card>
-    )
-  }
-
-  return (
-    <Card className={className}>
-      <div className="pt-6 px-6 pb-6">
-        <Flex justify="between" align="start" gap="md">
-          <Stack spacing="xs" className="flex-1">
-            {title && (
-              <Text variant="muted" className="font-medium">
-                {title}
-              </Text>
-            )}
-            <Heading level={1} className="text-3xl font-bold">
-              {value}
-            </Heading>
-            {description && (
-              <Text variant="caption">
-                {description}
-              </Text>
-            )}
-            {trend && (
-              <Text 
-                variant="small" 
-                className={trend.positive ? 'text-green-500' : 'text-red-500'}
-              >
-                {trend.positive ? '↑' : '↓'} {trend.value} {trend.label}
-              </Text>
-            )}
-          </Stack>
-          {icon && (
-            <IconWrapper icon={icon} size="lg" variant="muted" />
-          )}
-        </Flex>
-      </div>
-    </Card>
-  )
-}
diff --git a/src/components/molecules/DataSourceCard.tsx b/src/components/molecules/DataSourceCard.tsx
deleted file mode 100644
index 8e0d03a..0000000
--- a/src/components/molecules/DataSourceCard.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Card, IconButton, Stack, Flex, Text } from '@/components/atoms'
-import { DataSourceBadge } from '@/components/atoms/DataSourceBadge'
-import { DataSource } from '@/types/json-ui'
-import { Pencil, Trash } from '@phosphor-icons/react'
-
-interface DataSourceCardProps {
-  dataSource: DataSource
-  dependents?: DataSource[]
-  onEdit: (id: string) => void
-  onDelete: (id: string) => void
-}
-
-export function DataSourceCard({ dataSource, dependents = [], onEdit, onDelete }: DataSourceCardProps) {
-  const renderTypeSpecificInfo = () => {
-    if (dataSource.type === 'kv') {
-      return (
-        <Text variant="caption" className="font-mono bg-muted/30 px-2 py-1 rounded">
-          Key: {dataSource.key || 'Not set'}
-        </Text>
-      )
-    }
-    
-    return null
-  }
-
-  return (
-    <Card className="bg-card/50 backdrop-blur hover:bg-card/70 transition-colors">
-      <div className="p-4">
-        <Flex justify="between" align="start" gap="md">
-          <Stack spacing="sm" className="flex-1 min-w-0">
-            <Flex align="center" gap="sm">
-              <DataSourceBadge type={dataSource.type} />
-              <Text variant="small" className="font-mono font-medium truncate">
-                {dataSource.id}
-              </Text>
-            </Flex>
-            
-            {renderTypeSpecificInfo()}
-            
-            {dependents.length > 0 && (
-              <div className="pt-2 border-t border-border/50">
-                <Text variant="caption">
-                  Used by {dependents.length} dependent {dependents.length === 1 ? 'source' : 'sources'}
-                </Text>
-              </div>
-            )}
-          </Stack>
-          
-          <Flex align="center" gap="xs">
-            <IconButton
-              icon={<Pencil className="w-4 h-4" />}
-              variant="ghost"
-              size="sm"
-              onClick={() => onEdit(dataSource.id)}
-            />
-            <IconButton
-              icon={<Trash className="w-4 h-4" />}
-              variant="ghost"
-              size="sm"
-              onClick={() => onDelete(dataSource.id)}
-              className="text-destructive hover:text-destructive"
-              disabled={dependents.length > 0}
-            />
-          </Flex>
-        </Flex>
-      </div>
-    </Card>
-  )
-}
diff --git a/src/components/molecules/EditorActions.tsx b/src/components/molecules/EditorActions.tsx
deleted file mode 100644
index e004d03..0000000
--- a/src/components/molecules/EditorActions.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Button, Flex } from '@/components/atoms'
-import { Info, Sparkle } from '@phosphor-icons/react'
-
-interface EditorActionsProps {
-  onExplain: () => void
-  onImprove: () => void
-}
-
-export function EditorActions({ onExplain, onImprove }: EditorActionsProps) {
-  return (
-    <Flex gap="sm">
-      <Button
-        size="sm"
-        variant="ghost"
-        onClick={onExplain}
-        className="h-7 text-xs"
-        leftIcon={<Info size={14} />}
-      >
-        Explain
-      </Button>
-      <Button
-        size="sm"
-        variant="ghost"
-        onClick={onImprove}
-        className="h-7 text-xs"
-        leftIcon={<Sparkle size={14} weight="duotone" />}
-      >
-        Improve
-      </Button>
-    </Flex>
-  )
-}
diff --git a/src/components/molecules/EditorToolbar.tsx b/src/components/molecules/EditorToolbar.tsx
deleted file mode 100644
index 92939b1..0000000
--- a/src/components/molecules/EditorToolbar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ProjectFile } from '@/types/project'
-import { FileTabs } from './FileTabs'
-import { EditorActions } from './EditorActions'
-import { Flex } from '@/components/atoms'
-
-interface EditorToolbarProps {
-  openFiles: ProjectFile[]
-  activeFileId: string | null
-  activeFile: ProjectFile | undefined
-  onFileSelect: (fileId: string) => void
-  onFileClose: (fileId: string) => void
-  onExplain: () => void
-  onImprove: () => void
-}
-
-export function EditorToolbar({
-  openFiles,
-  activeFileId,
-  activeFile,
-  onFileSelect,
-  onFileClose,
-  onExplain,
-  onImprove,
-}: EditorToolbarProps) {
-  return (
-    <Flex 
-      align="center" 
-      justify="between" 
-      gap="xs" 
-      className="bg-secondary/50 border-b border-border px-2 py-1"
-    >
-      <FileTabs
-        files={openFiles}
-        activeFileId={activeFileId}
-        onFileSelect={onFileSelect}
-        onFileClose={onFileClose}
-      />
-      {activeFile && (
-        <EditorActions
-          onExplain={onExplain}
-          onImprove={onImprove}
-        />
-      )}
-    </Flex>
-  )
-}
diff --git a/src/components/molecules/EmptyEditorState.tsx b/src/components/molecules/EmptyEditorState.tsx
deleted file mode 100644
index 587a428..0000000
--- a/src/components/molecules/EmptyEditorState.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { EmptyStateIcon, Stack, Text } from '@/components/atoms'
-import { FileCode } from '@phosphor-icons/react'
-
-export function EmptyEditorState() {
-  return (
-    <div className="flex-1 flex items-center justify-center">
-      <Stack direction="vertical" align="center" spacing="md">
-        <EmptyStateIcon icon={<FileCode size={48} />} />
-        <Text variant="muted">Select a file to edit</Text>
-      </Stack>
-    </div>
-  )
-}
diff --git a/src/components/molecules/EmptyState.tsx b/src/components/molecules/EmptyState.tsx
deleted file mode 100644
index b4feafa..0000000
--- a/src/components/molecules/EmptyState.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { EmptyStateIcon, Stack, Heading, Text } from '@/components/atoms'
-
-interface EmptyStateProps {
-  icon: React.ReactNode
-  title: string
-  description?: string
-  action?: React.ReactNode
-}
-
-export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
-  return (
-    <Stack 
-      direction="vertical" 
-      align="center" 
-      justify="center" 
-      spacing="md" 
-      className="py-12 px-4 text-center"
-    >
-      <EmptyStateIcon icon={icon} />
-      <Stack direction="vertical" spacing="sm">
-        <Heading level={3} className="text-lg">{title}</Heading>
-        {description && (
-          <Text variant="muted" className="max-w-md">{description}</Text>
-        )}
-      </Stack>
-      {action && <div className="mt-2">{action}</div>}
-    </Stack>
-  )
-}
diff --git a/src/components/molecules/FileTabs.tsx b/src/components/molecules/FileTabs.tsx
deleted file mode 100644
index 7d2b83b..0000000
--- a/src/components/molecules/FileTabs.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ProjectFile } from '@/types/project'
-import { FileCode, X } from '@phosphor-icons/react'
-import { Flex } from '@/components/atoms'
-
-interface FileTabsProps {
-  files: ProjectFile[]
-  activeFileId: string | null
-  onFileSelect: (fileId: string) => void
-  onFileClose: (fileId: string) => void
-}
-
-export function FileTabs({ files, activeFileId, onFileSelect, onFileClose }: FileTabsProps) {
-  return (
-    <Flex align="center" gap="xs">
-      {files.map((file) => (
-        <button
-          key={file.id}
-          onClick={() => onFileSelect(file.id)}
-          className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm transition-colors ${
-            file.id === activeFileId
-              ? 'bg-card text-foreground'
-              : 'text-muted-foreground hover:text-foreground hover:bg-card/50'
-          }`}
-        >
-          <FileCode size={16} />
-          <span>{file.name}</span>
-          <button
-            onClick={(e) => {
-              e.stopPropagation()
-              onFileClose(file.id)
-            }}
-            className="hover:text-destructive"
-          >
-            <X size={14} />
-          </button>
-        </button>
-      ))}
-    </Flex>
-  )
-}
diff --git a/src/components/molecules/LabelWithBadge.tsx b/src/components/molecules/LabelWithBadge.tsx
deleted file mode 100644
index 799eea6..0000000
--- a/src/components/molecules/LabelWithBadge.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Badge, Flex, Text } from '@/components/atoms'
-
-interface LabelWithBadgeProps {
-  label: string
-  badge?: number | string
-  badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
-}
-
-export function LabelWithBadge({ 
-  label, 
-  badge, 
-  badgeVariant = 'secondary' 
-}: LabelWithBadgeProps) {
-  return (
-    <Flex align="center" gap="sm">
-      <Text variant="small" className="font-medium">{label}</Text>
-      {badge !== undefined && (
-        <Badge variant={badgeVariant} className="text-xs">
-          {badge}
-        </Badge>
-      )}
-    </Flex>
-  )
-}
diff --git a/src/components/molecules/LazyInlineMonacoEditor.tsx b/src/components/molecules/LazyInlineMonacoEditor.tsx
deleted file mode 100644
index d2556c5..0000000
--- a/src/components/molecules/LazyInlineMonacoEditor.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Suspense, lazy } from 'react'
-
-const MonacoEditor = lazy(() => 
-  import('@monaco-editor/react').then(module => ({
-    default: module.default
-  }))
-)
-
-interface LazyInlineMonacoEditorProps {
-  height?: string
-  defaultLanguage?: string
-  language?: string
-  value?: string
-  onChange?: (value: string | undefined) => void
-  theme?: string
-  options?: any
-}
-
-function InlineMonacoEditorFallback() {
-  return (
-    <div className="flex items-center justify-center bg-muted/50 rounded-md" style={{ height: '300px' }}>
-      <div className="flex flex-col items-center gap-2">
-        <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-        <p className="text-xs text-muted-foreground">Loading editor...</p>
-      </div>
-    </div>
-  )
-}
-
-export function LazyInlineMonacoEditor({ 
-  height = '300px',
-  defaultLanguage,
-  language,
-  value,
-  onChange,
-  theme = 'vs-dark',
-  options = {}
-}: LazyInlineMonacoEditorProps) {
-  return (
-    <Suspense fallback={<InlineMonacoEditorFallback />}>
-      <MonacoEditor
-        height={height}
-        defaultLanguage={defaultLanguage}
-        language={language}
-        value={value}
-        onChange={onChange}
-        theme={theme}
-        options={{
-          minimap: { enabled: false },
-          fontSize: 12,
-          ...options
-        }}
-      />
-    </Suspense>
-  )
-}
diff --git a/src/components/molecules/LazyMonacoEditor.tsx b/src/components/molecules/LazyMonacoEditor.tsx
deleted file mode 100644
index dc55f2c..0000000
--- a/src/components/molecules/LazyMonacoEditor.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Suspense, lazy } from 'react'
-import { ProjectFile } from '@/types/project'
-
-const MonacoEditor = lazy(() => 
-  import('@monaco-editor/react').then(module => ({
-    default: module.default
-  }))
-)
-
-interface LazyMonacoEditorProps {
-  file: ProjectFile
-  onChange: (content: string) => void
-}
-
-function MonacoEditorFallback() {
-  return (
-    <div className="h-full w-full flex items-center justify-center bg-card">
-      <div className="flex flex-col items-center gap-3">
-        <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-        <p className="text-sm text-muted-foreground">Loading editor...</p>
-      </div>
-    </div>
-  )
-}
-
-export function LazyMonacoEditor({ file, onChange }: LazyMonacoEditorProps) {
-  return (
-    <Suspense fallback={<MonacoEditorFallback />}>
-      <MonacoEditor
-        height="100%"
-        language={file.language}
-        value={file.content}
-        onChange={(value) => onChange(value || '')}
-        theme="vs-dark"
-        options={{
-          minimap: { enabled: false },
-          fontSize: 14,
-          fontFamily: 'JetBrains Mono, monospace',
-          fontLigatures: true,
-          lineNumbers: 'on',
-          scrollBeyondLastLine: false,
-          automaticLayout: true,
-        }}
-      />
-    </Suspense>
-  )
-}
-
-export function preloadMonacoEditor() {
-  console.log('[MONACO] 🎯 Preloading Monaco Editor')
-  import('@monaco-editor/react')
-    .then(() => console.log('[MONACO] ✅ Monaco Editor preloaded'))
-    .catch(err => console.warn('[MONACO] ⚠️ Monaco Editor preload failed:', err))
-}
diff --git a/src/components/molecules/LoadingFallback.tsx b/src/components/molecules/LoadingFallback.tsx
deleted file mode 100644
index a0e3cdb..0000000
--- a/src/components/molecules/LoadingFallback.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { LoadingSpinner } from '@/components/atoms'
-
-interface LoadingFallbackProps {
-  message?: string
-}
-
-export function LoadingFallback({ message = 'Loading...' }: LoadingFallbackProps) {
-  return (
-    <div className="flex items-center justify-center h-full w-full">
-      <div className="flex flex-col items-center gap-3">
-        <LoadingSpinner />
-        <p className="text-sm text-muted-foreground">{message}</p>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/molecules/LoadingState.tsx b/src/components/molecules/LoadingState.tsx
deleted file mode 100644
index f2f3fb2..0000000
--- a/src/components/molecules/LoadingState.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { LoadingSpinner } from '@/components/atoms'
-
-interface LoadingStateProps {
-  message?: string
-  size?: 'sm' | 'md' | 'lg'
-}
-
-export function LoadingState({ message = 'Loading...', size = 'md' }: LoadingStateProps) {
-  return (
-    <div className="flex flex-col items-center justify-center gap-3 py-12">
-      <LoadingSpinner size={size} />
-      <p className="text-sm text-muted-foreground">{message}</p>
-    </div>
-  )
-}
diff --git a/src/components/molecules/MonacoEditorPanel.tsx b/src/components/molecules/MonacoEditorPanel.tsx
deleted file mode 100644
index 05e1d07..0000000
--- a/src/components/molecules/MonacoEditorPanel.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ProjectFile } from '@/types/project'
-import { LazyMonacoEditor } from './LazyMonacoEditor'
-
-interface MonacoEditorPanelProps {
-  file: ProjectFile
-  onChange: (content: string) => void
-}
-
-export function MonacoEditorPanel({ file, onChange }: MonacoEditorPanelProps) {
-  return <LazyMonacoEditor file={file} onChange={onChange} />
-}
diff --git a/src/components/molecules/NavigationItem.tsx b/src/components/molecules/NavigationItem.tsx
deleted file mode 100644
index b5977ab..0000000
--- a/src/components/molecules/NavigationItem.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Badge, Flex, Text, IconWrapper } from '@/components/atoms'
-
-interface NavigationItemProps {
-  icon: React.ReactNode
-  label: string
-  isActive: boolean
-  badge?: number
-  onClick: () => void
-}
-
-export function NavigationItem({
-  icon,
-  label,
-  isActive,
-  badge,
-  onClick,
-}: NavigationItemProps) {
-  return (
-    <button
-      onClick={onClick}
-      className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
-        isActive
-          ? 'bg-primary text-primary-foreground'
-          : 'hover:bg-muted text-foreground'
-      }`}
-    >
-      <IconWrapper
-        icon={icon}
-        size="md"
-        variant={isActive ? 'default' : 'muted'}
-      />
-      <Text className="flex-1 text-left font-medium" variant="small">
-        {label}
-      </Text>
-      {badge !== undefined && badge > 0 && (
-        <Badge
-          variant={isActive ? 'secondary' : 'destructive'}
-          className="ml-auto"
-        >
-          {badge}
-        </Badge>
-      )}
-    </button>
-  )
-}
diff --git a/src/components/molecules/PageHeaderContent.tsx b/src/components/molecules/PageHeaderContent.tsx
deleted file mode 100644
index e1502e7..0000000
--- a/src/components/molecules/PageHeaderContent.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { TabIcon } from '@/components/atoms'
-
-interface PageHeaderContentProps {
-  title: string
-  icon: React.ReactNode
-  description?: string
-}
-
-export function PageHeaderContent({ title, icon, description }: PageHeaderContentProps) {
-  return (
-    <div className="flex items-center gap-3">
-      <TabIcon icon={icon} variant="gradient" />
-      <div className="min-w-0">
-        <h2 className="text-lg sm:text-xl font-bold truncate">{title}</h2>
-        {description && (
-          <p className="text-xs sm:text-sm text-muted-foreground hidden sm:block">
-            {description}
-          </p>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/molecules/SearchBar.tsx b/src/components/molecules/SearchBar.tsx
deleted file mode 100644
index f104953..0000000
--- a/src/components/molecules/SearchBar.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Input, IconButton, Flex } from '@/components/atoms'
-import { MagnifyingGlass, X } from '@phosphor-icons/react'
-
-interface SearchBarProps {
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
-  className?: string
-}
-
-export function SearchBar({ value, onChange, placeholder = 'Search...', className }: SearchBarProps) {
-  return (
-    <Flex gap="sm" className={className}>
-      <div className="relative flex-1">
-        <MagnifyingGlass 
-          className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" 
-          size={16}
-        />
-        <Input
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder}
-          className="pl-9"
-        />
-      </div>
-      {value && (
-        <IconButton
-          icon={<X size={16} />}
-          variant="ghost"
-          onClick={() => onChange('')}
-          title="Clear search"
-        />
-      )}
-    </Flex>
-  )
-}
diff --git a/src/components/molecules/StatCard.tsx b/src/components/molecules/StatCard.tsx
deleted file mode 100644
index 478746d..0000000
--- a/src/components/molecules/StatCard.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Card, IconWrapper, Stack, Text } from '@/components/atoms'
-
-interface StatCardProps {
-  icon: React.ReactNode
-  label: string
-  value: string | number
-  variant?: 'default' | 'primary' | 'destructive'
-}
-
-export function StatCard({ icon, label, value, variant = 'default' }: StatCardProps) {
-  const variantClasses = {
-    default: 'border-border',
-    primary: 'border-primary/50 bg-primary/5',
-    destructive: 'border-destructive/50 bg-destructive/5',
-  }
-
-  return (
-    <Card className={`p-4 ${variantClasses[variant]}`}>
-      <Stack direction="horizontal" align="center" spacing="md">
-        <IconWrapper 
-          icon={icon} 
-          size="lg" 
-          variant={variant === 'default' ? 'muted' : variant}
-        />
-        <Stack direction="vertical" spacing="xs" className="flex-1">
-          <Text variant="caption">{label}</Text>
-          <Text className="text-2xl font-bold">{value}</Text>
-        </Stack>
-      </Stack>
-    </Card>
-  )
-}
diff --git a/src/components/molecules/TreeCard.tsx b/src/components/molecules/TreeCard.tsx
deleted file mode 100644
index e42a52c..0000000
--- a/src/components/molecules/TreeCard.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Card, Badge, ActionIcon, IconButton, Stack, Flex, Text, Heading } from '@/components/atoms'
-import { ComponentTree } from '@/types/project'
-
-interface TreeCardProps {
-  tree: ComponentTree
-  isSelected: boolean
-  onSelect: () => void
-  onEdit: () => void
-  onDuplicate: () => void
-  onDelete: () => void
-  disableDelete?: boolean
-}
-
-export function TreeCard({
-  tree,
-  isSelected,
-  onSelect,
-  onEdit,
-  onDuplicate,
-  onDelete,
-  disableDelete = false,
-}: TreeCardProps) {
-  return (
-    <Card
-      className={`cursor-pointer transition-all p-4 ${
-        isSelected ? 'ring-2 ring-primary bg-accent' : 'hover:bg-accent/50'
-      }`}
-      onClick={onSelect}
-    >
-      <Stack spacing="sm">
-        <Flex justify="between" align="start" gap="sm">
-          <Stack spacing="xs" className="flex-1 min-w-0">
-            <Heading level={4} className="text-sm truncate">{tree.name}</Heading>
-            {tree.description && (
-              <Text variant="caption" className="line-clamp-2">
-                {tree.description}
-              </Text>
-            )}
-            <div>
-              <Badge variant="outline" className="text-xs">
-                {tree.rootNodes.length} components
-              </Badge>
-            </div>
-          </Stack>
-        </Flex>
-        <div onClick={(e) => e.stopPropagation()}>
-          <Flex gap="xs" className="mt-1">
-            <IconButton
-              icon={<ActionIcon action="edit" size={14} />}
-              variant="ghost"
-              size="sm"
-              onClick={onEdit}
-              title="Edit tree"
-            />
-            <IconButton
-              icon={<ActionIcon action="copy" size={14} />}
-              variant="ghost"
-              size="sm"
-              onClick={onDuplicate}
-              title="Duplicate tree"
-            />
-            <IconButton
-              icon={<ActionIcon action="delete" size={14} />}
-              variant="ghost"
-              size="sm"
-              onClick={onDelete}
-              disabled={disableDelete}
-              title="Delete tree"
-            />
-          </Flex>
-        </div>
-      </Stack>
-    </Card>
-  )
-}
diff --git a/src/components/molecules/TreeListHeader.tsx b/src/components/molecules/TreeListHeader.tsx
deleted file mode 100644
index d381b2c..0000000
--- a/src/components/molecules/TreeListHeader.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Button, TreeIcon, ActionIcon, Flex, Heading, Stack, IconButton } from '@/components/atoms'
-
-interface TreeListHeaderProps {
-  onCreateNew: () => void
-  onImportJson: () => void
-  onExportJson: () => void
-  hasSelectedTree?: boolean
-}
-
-export function TreeListHeader({
-  onCreateNew,
-  onImportJson,
-  onExportJson,
-  hasSelectedTree = false,
-}: TreeListHeaderProps) {
-  return (
-    <Stack spacing="sm">
-      <Flex justify="between" align="center">
-        <Flex align="center" gap="sm">
-          <TreeIcon size={20} />
-          <Heading level={2} className="text-lg font-semibold">Component Trees</Heading>
-        </Flex>
-        <IconButton 
-          icon={<ActionIcon action="add" size={16} />}
-          size="sm" 
-          onClick={onCreateNew}
-        />
-      </Flex>
-      
-      <Flex gap="sm">
-        <Button
-          size="sm"
-          variant="outline"
-          onClick={onImportJson}
-          className="flex-1 text-xs"
-          leftIcon={<ActionIcon action="upload" size={14} />}
-        >
-          Import JSON
-        </Button>
-        <Button
-          size="sm"
-          variant="outline"
-          onClick={onExportJson}
-          disabled={!hasSelectedTree}
-          className="flex-1 text-xs"
-          leftIcon={<ActionIcon action="download" size={14} />}
-        >
-          Export JSON
-        </Button>
-      </Flex>
-    </Stack>
-  )
-}
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 4506686..a23d2d5 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -1,39 +1,20 @@
-export { AppBranding } from './AppBranding'
 export { Breadcrumb } from './Breadcrumb'
 export { CanvasRenderer } from './CanvasRenderer'
 export { CodeExplanationDialog } from './CodeExplanationDialog'
 export { ComponentPalette } from './ComponentPalette'
 export { ComponentTree } from './ComponentTree'
-export { EditorActions } from './EditorActions'
-export { EditorToolbar } from './EditorToolbar'
-export { EmptyEditorState } from './EmptyEditorState'
-export { FileTabs } from './FileTabs'
 export { GitHubBuildStatus } from './GitHubBuildStatus'
-export { LabelWithBadge } from './LabelWithBadge'
-export { LazyInlineMonacoEditor } from './LazyInlineMonacoEditor'
-export { LazyMonacoEditor, preloadMonacoEditor } from './LazyMonacoEditor'
 export { LazyLineChart } from './LazyLineChart'
 export { LazyBarChart } from './LazyBarChart'
 export { LazyD3BarChart } from './LazyD3BarChart'
 export { StorageSettings } from './StorageSettings'
-export { LoadingFallback } from './LoadingFallback'
-export { MonacoEditorPanel } from './MonacoEditorPanel'
 export { NavigationGroupHeader } from './NavigationGroupHeader'
-export { NavigationItem } from './NavigationItem'
-export { PageHeaderContent } from './PageHeaderContent'
 export { PropertyEditor } from './PropertyEditor'
 export { SaveIndicator } from './SaveIndicator'
 export { SeedDataManager } from './SeedDataManager'
-export { SearchBar } from './SearchBar'
-export { StatCard } from './StatCard'
 export { ToolbarButton } from './ToolbarButton'
-export { TreeCard } from './TreeCard'
 export { TreeFormDialog } from './TreeFormDialog'
-export { TreeListHeader } from './TreeListHeader'
-export { DataCard } from './DataCard'
 export { SearchInput } from './SearchInput'
-export { ActionBar } from './ActionBar'
-export { DataSourceCard } from './DataSourceCard'
 export { BindingEditor } from './BindingEditor'
 export { DataSourceEditorDialog } from './DataSourceEditorDialog'
 export { ComponentBindingDialog } from './ComponentBindingDialog'
diff --git a/src/components/organisms/EmptyCanvasState.tsx b/src/components/organisms/EmptyCanvasState.tsx
deleted file mode 100644
index c80e4b0..0000000
--- a/src/components/organisms/EmptyCanvasState.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Plus, Folder } from '@phosphor-icons/react'
-import { EmptyState, ActionButton, Stack } from '@/components/atoms'
-
-interface EmptyCanvasStateProps {
-  onAddFirstComponent?: () => void
-  onImportSchema?: () => void
-}
-
-export function EmptyCanvasState({ onAddFirstComponent, onImportSchema }: EmptyCanvasStateProps) {
-  return (
-    <div className="h-full flex flex-col items-center justify-center p-8 bg-muted/20">
-      <EmptyState
-        icon={<Folder size={64} weight="duotone" />}
-        title="Empty Canvas"
-        description="Start building your UI by dragging components from the left panel, or import an existing schema."
-      >
-        <Stack direction="horizontal" spacing="md" className="mt-4">
-          {onImportSchema && (
-            <ActionButton
-              icon={<Folder size={16} />}
-              label="Import Schema"
-              onClick={onImportSchema}
-              variant="outline"
-            />
-          )}
-          {onAddFirstComponent && (
-            <ActionButton
-              icon={<Plus size={16} />}
-              label="Add Component"
-              onClick={onAddFirstComponent}
-              variant="default"
-            />
-          )}
-        </Stack>
-      </EmptyState>
-    </div>
-  )
-}
diff --git a/src/components/organisms/PageHeader.tsx b/src/components/organisms/PageHeader.tsx
deleted file mode 100644
index c927738..0000000
--- a/src/components/organisms/PageHeader.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { PageHeaderContent } from '@/components/molecules'
-import { Stack, Container } from '@/components/atoms'
-import { tabInfo } from '@/lib/navigation-config'
-
-interface PageHeaderProps {
-  activeTab: string
-}
-
-export function PageHeader({ activeTab }: PageHeaderProps) {
-  const info = tabInfo[activeTab]
-
-  if (!info) return null
-
-  return (
-    <Stack 
-      direction="vertical" 
-      spacing="none" 
-      className="border-b border-border bg-card px-4 sm:px-6 py-3 sm:py-4"
-    >
-      <PageHeaderContent
-        title={info.title}
-        icon={info.icon}
-        description={info.description}
-      />
-    </Stack>
-  )
-}
diff --git a/src/components/organisms/SchemaEditorCanvas.tsx b/src/components/organisms/SchemaEditorCanvas.tsx
deleted file mode 100644
index 4f5f855..0000000
--- a/src/components/organisms/SchemaEditorCanvas.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { CanvasRenderer } from '@/components/molecules/CanvasRenderer'
-import { UIComponent } from '@/types/json-ui'
-
-interface SchemaEditorCanvasProps {
-  components: UIComponent[]
-  selectedId: string | null
-  hoveredId: string | null
-  draggedOverId: string | null
-  dropPosition: 'before' | 'after' | 'inside' | null
-  onSelect: (id: string | null) => void
-  onHover: (id: string | null) => void
-  onHoverEnd: () => void
-  onDragOver: (id: string, e: React.DragEvent) => void
-  onDragLeave: (e: React.DragEvent) => void
-  onDrop: (targetId: string, e: React.DragEvent) => void
-}
-
-export function SchemaEditorCanvas({
-  components,
-  selectedId,
-  hoveredId,
-  draggedOverId,
-  dropPosition,
-  onSelect,
-  onHover,
-  onHoverEnd,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-}: SchemaEditorCanvasProps) {
-  return (
-    <div className="flex-1 flex flex-col">
-      <CanvasRenderer
-        components={components}
-        selectedId={selectedId}
-        hoveredId={hoveredId}
-        draggedOverId={draggedOverId}
-        dropPosition={dropPosition}
-        onSelect={onSelect}
-        onHover={onHover}
-        onHoverEnd={onHoverEnd}
-        onDragOver={onDragOver}
-        onDragLeave={onDragLeave}
-        onDrop={onDrop}
-      />
-    </div>
-  )
-}
diff --git a/src/components/organisms/SchemaEditorPropertiesPanel.tsx b/src/components/organisms/SchemaEditorPropertiesPanel.tsx
deleted file mode 100644
index 76dde73..0000000
--- a/src/components/organisms/SchemaEditorPropertiesPanel.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { ComponentTree } from '@/components/molecules/ComponentTree'
-import { PropertyEditor } from '@/components/molecules/PropertyEditor'
-import { Separator, Stack } from '@/components/atoms'
-import { UIComponent } from '@/types/json-ui'
-
-interface SchemaEditorPropertiesPanelProps {
-  components: UIComponent[]
-  selectedId: string | null
-  hoveredId: string | null
-  draggedOverId: string | null
-  dropPosition: 'before' | 'after' | 'inside' | null
-  selectedComponent: UIComponent | null
-  onSelect: (id: string | null) => void
-  onHover: (id: string | null) => void
-  onHoverEnd: () => void
-  onDragStart: (id: string, e: React.DragEvent) => void
-  onDragOver: (id: string, e: React.DragEvent) => void
-  onDragLeave: (e: React.DragEvent) => void
-  onDrop: (targetId: string, e: React.DragEvent) => void
-  onUpdate: (updates: Partial<UIComponent>) => void
-  onDelete: () => void
-}
-
-export function SchemaEditorPropertiesPanel({
-  components,
-  selectedId,
-  hoveredId,
-  draggedOverId,
-  dropPosition,
-  selectedComponent,
-  onSelect,
-  onHover,
-  onHoverEnd,
-  onDragStart,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  onUpdate,
-  onDelete,
-}: SchemaEditorPropertiesPanelProps) {
-  return (
-    <Stack direction="vertical" spacing="none" className="w-80 border-l border-border bg-card">
-      <div className="flex-1 overflow-hidden">
-        <ComponentTree
-          components={components}
-          selectedId={selectedId}
-          hoveredId={hoveredId}
-          draggedOverId={draggedOverId}
-          dropPosition={dropPosition}
-          onSelect={onSelect}
-          onHover={onHover}
-          onHoverEnd={onHoverEnd}
-          onDragStart={onDragStart}
-          onDragOver={onDragOver}
-          onDragLeave={onDragLeave}
-          onDrop={onDrop}
-        />
-      </div>
-      
-      <Separator />
-      
-      <div className="flex-1 overflow-hidden">
-        <PropertyEditor
-          component={selectedComponent}
-          onUpdate={onUpdate}
-          onDelete={onDelete}
-        />
-      </div>
-    </Stack>
-  )
-}
diff --git a/src/components/organisms/SchemaEditorSidebar.tsx b/src/components/organisms/SchemaEditorSidebar.tsx
deleted file mode 100644
index dfba600..0000000
--- a/src/components/organisms/SchemaEditorSidebar.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ComponentPalette } from '@/components/molecules/ComponentPalette'
-import { ComponentDefinition } from '@/lib/component-definition-types'
-
-interface SchemaEditorSidebarProps {
-  onDragStart: (component: ComponentDefinition, e: React.DragEvent) => void
-}
-
-export function SchemaEditorSidebar({ onDragStart }: SchemaEditorSidebarProps) {
-  return (
-    <div className="w-64 border-r border-border bg-card">
-      <ComponentPalette onDragStart={onDragStart} />
-    </div>
-  )
-}
diff --git a/src/components/organisms/SchemaEditorStatusBar.tsx b/src/components/organisms/SchemaEditorStatusBar.tsx
deleted file mode 100644
index 989b7d8..0000000
--- a/src/components/organisms/SchemaEditorStatusBar.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { cn } from '@/lib/utils'
-import { Badge, Chip, Text, Flex } from '@/components/atoms'
-
-interface SchemaEditorStatusBarProps {
-  componentCount: number
-  selectedComponentType?: string
-  hasUnsavedChanges?: boolean
-  className?: string
-}
-
-export function SchemaEditorStatusBar({ 
-  componentCount, 
-  selectedComponentType,
-  hasUnsavedChanges = false,
-  className 
-}: SchemaEditorStatusBarProps) {
-  return (
-    <div className={cn(
-      "border-t border-border px-4 py-2 bg-card flex items-center justify-between",
-      className
-    )}>
-      <Flex align="center" gap="lg">
-        <Text variant="caption">
-          <span className="font-medium text-foreground">{componentCount}</span> component{componentCount !== 1 ? 's' : ''}
-        </Text>
-        
-        {selectedComponentType && (
-          <Flex align="center" gap="sm">
-            <Text variant="caption">Selected:</Text>
-            <Chip 
-              variant="default" 
-              size="sm"
-              className="font-mono"
-            >
-              {selectedComponentType}
-            </Chip>
-          </Flex>
-        )}
-      </Flex>
-      
-      <Flex align="center" gap="sm">
-        {hasUnsavedChanges && (
-          <Badge variant="outline" size="sm">
-            Unsaved changes
-          </Badge>
-        )}
-      </Flex>
-    </div>
-  )
-}
diff --git a/src/components/organisms/SchemaEditorToolbar.tsx b/src/components/organisms/SchemaEditorToolbar.tsx
deleted file mode 100644
index 0dcb236..0000000
--- a/src/components/organisms/SchemaEditorToolbar.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { 
-  Download, 
-  Upload, 
-  Play, 
-  Trash,
-  Copy,
-} from '@phosphor-icons/react'
-import { 
-  Heading, 
-  TextGradient, 
-  Text, 
-  Separator, 
-  Stack, 
-  ActionButton,
-  Flex 
-} from '@/components/atoms'
-
-interface SchemaEditorToolbarProps {
-  onImport: () => void
-  onExport: () => void
-  onCopy: () => void
-  onPreview: () => void
-  onClear: () => void
-}
-
-export function SchemaEditorToolbar({
-  onImport,
-  onExport,
-  onCopy,
-  onPreview,
-  onClear,
-}: SchemaEditorToolbarProps) {
-  return (
-    <div className="border-b border-border px-6 py-3 bg-card">
-      <Flex justify="between" align="center">
-        <Stack direction="vertical" spacing="xs">
-          <TextGradient 
-            from="primary" 
-            to="accent"
-            className="text-2xl font-bold"
-          >
-            Schema Editor
-          </TextGradient>
-          <Text variant="muted">
-            Build JSON UI schemas with drag-and-drop
-          </Text>
-        </Stack>
-        
-        <Flex align="center" gap="sm">
-          <ActionButton
-            icon={<Upload size={16} />}
-            label="Import"
-            onClick={onImport}
-            variant="outline"
-            size="sm"
-          />
-          <ActionButton
-            icon={<Copy size={16} />}
-            label="Copy JSON"
-            onClick={onCopy}
-            variant="outline"
-            size="sm"
-          />
-          <ActionButton
-            icon={<Download size={16} />}
-            label="Export"
-            onClick={onExport}
-            variant="outline"
-            size="sm"
-          />
-          <Separator orientation="vertical" className="h-6" />
-          <ActionButton
-            icon={<Play size={16} />}
-            label="Preview"
-            onClick={onPreview}
-            variant="outline"
-            size="sm"
-          />
-          <ActionButton
-            icon={<Trash size={16} />}
-            label="Clear"
-            onClick={onClear}
-            variant="destructive"
-            size="sm"
-          />
-        </Flex>
-      </Flex>
-    </div>
-  )
-}
diff --git a/src/components/organisms/ToolbarActions.tsx b/src/components/organisms/ToolbarActions.tsx
deleted file mode 100644
index 513a29c..0000000
--- a/src/components/organisms/ToolbarActions.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { ToolbarButton } from '@/components/molecules'
-import { ErrorBadge, Flex, Tooltip, Badge } from '@/components/atoms'
-import {
-  MagnifyingGlass,
-  Keyboard,
-  Sparkle,
-  Download,
-  Wrench,
-  Eye,
-} from '@phosphor-icons/react'
-
-interface ToolbarActionsProps {
-  onSearch: () => void
-  onShowShortcuts: () => void
-  onGenerateAI: () => void
-  onExport: () => void
-  onPreview?: () => void
-  onShowErrors?: () => void
-  errorCount?: number
-  showErrorButton?: boolean
-}
-
-export function ToolbarActions({
-  onSearch,
-  onShowShortcuts,
-  onGenerateAI,
-  onExport,
-  onPreview,
-  onShowErrors,
-  errorCount = 0,
-  showErrorButton = false,
-}: ToolbarActionsProps) {
-  return (
-    <Flex gap="xs" shrink className="shrink-0">
-      <ToolbarButton
-        icon={<MagnifyingGlass size={18} />}
-        label="Search (Ctrl+K)"
-        onClick={onSearch}
-        data-search-trigger
-      />
-
-      {showErrorButton && errorCount > 0 && onShowErrors && (
-        <div className="relative">
-          <ToolbarButton
-            icon={<Wrench size={18} />}
-            label={`${errorCount} ${errorCount === 1 ? 'Error' : 'Errors'}`}
-            onClick={onShowErrors}
-            variant="outline"
-            className="border-destructive text-destructive hover:bg-destructive hover:text-destructive-foreground"
-          />
-          <ErrorBadge count={errorCount} size="sm" />
-        </div>
-      )}
-
-      {onPreview && (
-        <ToolbarButton
-          icon={<Eye size={18} />}
-          label="Preview (Ctrl+P)"
-          onClick={onPreview}
-          variant="outline"
-        />
-      )}
-
-      <ToolbarButton
-        icon={<Keyboard size={18} />}
-        label="Keyboard Shortcuts (Ctrl+/)"
-        onClick={onShowShortcuts}
-        variant="ghost"
-        className="hidden sm:flex"
-      />
-
-      <ToolbarButton
-        icon={<Sparkle size={18} weight="duotone" />}
-        label="AI Generate (Ctrl+Shift+G)"
-        onClick={onGenerateAI}
-      />
-
-      <ToolbarButton
-        icon={<Download size={18} />}
-        label="Export Project (Ctrl+E)"
-        onClick={onExport}
-        variant="default"
-      />
-    </Flex>
-  )
-}
diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
index 3f2192c..1ee7666 100644
--- a/src/components/organisms/index.ts
+++ b/src/components/organisms/index.ts
@@ -1,15 +1,7 @@
 export { NavigationMenu } from './NavigationMenu'
-export { PageHeader } from './PageHeader'
-export { ToolbarActions } from './ToolbarActions'
 export { AppHeader } from './AppHeader'
 export { DataSourceManager } from './DataSourceManager'
 export { TreeListPanel } from './TreeListPanel'
-export { SchemaEditorToolbar } from './SchemaEditorToolbar'
-export { SchemaEditorSidebar } from './SchemaEditorSidebar'
-export { SchemaEditorCanvas } from './SchemaEditorCanvas'
-export { SchemaEditorPropertiesPanel } from './SchemaEditorPropertiesPanel'
 export { SchemaEditorLayout } from './SchemaEditorLayout'
-export { EmptyCanvasState } from './EmptyCanvasState'
-export { SchemaEditorStatusBar } from './SchemaEditorStatusBar'
 export { SchemaCodeViewer } from './SchemaCodeViewer'
 export { JSONUIShowcase } from '../JSONUIShowcase'
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
deleted file mode 100644
index 1fa55cd..0000000
--- a/src/components/ui/accordion.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ComponentProps } from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
-
-import { cn } from "@/lib/utils"
-
-function Accordion({
-  ...props
-}: ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
deleted file mode 100644
index 2ffd3c4..0000000
--- a/src/components/ui/alert.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { ComponentProps } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertTitle({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription }
diff --git a/src/components/ui/aspect-ratio.tsx b/src/components/ui/aspect-ratio.tsx
deleted file mode 100644
index 31dabb3..0000000
--- a/src/components/ui/aspect-ratio.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ComponentProps } from "react"
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-function AspectRatio({
-  ...props
-}: ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
-
-export { AspectRatio }
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
deleted file mode 100644
index da51302..0000000
--- a/src/components/ui/avatar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-function Avatar({
-  className,
-  ...props
-}: ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
deleted file mode 100644
index 35161b7..0000000
--- a/src/components/ui/badge.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ComponentProps } from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
deleted file mode 100644
index 0c8054c..0000000
--- a/src/components/ui/button.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ComponentProps } from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export type ButtonProps = ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }
-
-export { Button, buttonVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
deleted file mode 100644
index a48fc33..0000000
--- a/src/components/ui/card.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { ComponentProps } from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
deleted file mode 100644
index a6716ba..0000000
--- a/src/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import CheckIcon from "lucide-react/dist/esm/icons/check"
-
-import { cn } from "@/lib/utils"
-
-function Checkbox({
-  className,
-  ...props
-}: ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export { Checkbox }
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
deleted file mode 100644
index b724388..0000000
--- a/src/components/ui/collapsible.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-import { ComponentProps } from "react"
-
-function Collapsible({
-  ...props
-}: ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-  ...props
-}: ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-function CollapsibleContent({
-  ...props
-}: ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
deleted file mode 100644
index 16a857a..0000000
--- a/src/components/ui/hover-card.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ComponentProps } from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-
-import { cn } from "@/lib/utils"
-
-function HoverCard({
-  ...props
-}: ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
-}
-
-function HoverCardTrigger({
-  ...props
-}: ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
-}
-
-function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  )
-}
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
deleted file mode 100644
index 18186bc..0000000
--- a/src/components/ui/input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentProps } from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
deleted file mode 100644
index 05aceeb..0000000
--- a/src/components/ui/label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
deleted file mode 100644
index e67eb5a..0000000
--- a/src/components/ui/popover.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-function Popover({
-  ...props
-}: ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({
-  ...props
-}: ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverAnchor({
-  ...props
-}: ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
deleted file mode 100644
index 737bb1b..0000000
--- a/src/components/ui/progress.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ComponentProps } from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-
-import { cn } from "@/lib/utils"
-
-function Progress({
-  className,
-  value,
-  ...props
-}: ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
-}
-
-export { Progress }
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
deleted file mode 100644
index 5d0e8f9..0000000
--- a/src/components/ui/radio-group.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import CircleIcon from "lucide-react/dist/esm/icons/circle"
-
-import { cn } from "@/lib/utils"
-
-function RadioGroup({
-  className,
-  ...props
-}: ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return (
-    <RadioGroupPrimitive.Root
-      data-slot="radio-group"
-      className={cn("grid gap-3", className)}
-      {...props}
-    />
-  )
-}
-
-function RadioGroupItem({
-  className,
-  ...props
-}: ComponentProps<typeof RadioGroupPrimitive.Item>) {
-  return (
-    <RadioGroupPrimitive.Item
-      data-slot="radio-group-item"
-      className={cn(
-        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="relative flex items-center justify-center"
-      >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-}
-
-export { RadioGroup, RadioGroupItem }
diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
deleted file mode 100644
index 98cd995..0000000
--- a/src/components/ui/resizable.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ComponentProps } from "react"
-import GripVerticalIcon from "lucide-react/dist/esm/icons/grip-vertical"
-import * as ResizablePrimitive from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-function ResizablePanelGroup({
-  className,
-  ...props
-}: ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
-  return (
-    <ResizablePrimitive.PanelGroup
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ResizablePanel({
-  ...props
-}: ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
-}
-
-function ResizableHandle({
-  withHandle,
-  className,
-  ...props
-}: ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
-}) {
-  return (
-    <ResizablePrimitive.PanelResizeHandle
-      data-slot="resizable-handle"
-      className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizablePrimitive.PanelResizeHandle>
-  )
-}
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
deleted file mode 100644
index afdf5f9..0000000
--- a/src/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-
-import { cn } from "@/lib/utils"
-
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
-}
-
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
-        className
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
-}
-
-export { ScrollArea, ScrollBar }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
deleted file mode 100644
index fc77038..0000000
--- a/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator-root"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
deleted file mode 100644
index e75a269..0000000
--- a/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { cn } from "@/lib/utils"
-import { ComponentProps } from "react"
-
-function Skeleton({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
deleted file mode 100644
index 3367d08..0000000
--- a/src/components/ui/switch.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
-
-import { cn } from "@/lib/utils"
-
-function Switch({
-  className,
-  ...props
-}: ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
-}
-
-export { Switch }
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
deleted file mode 100644
index d1a5b7a..0000000
--- a/src/components/ui/tabs.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-
-import { cn } from "@/lib/utils"
-
-function Tabs({
-  className,
-  ...props
-}: ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-function TabsList({
-  className,
-  ...props
-}: ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsContent({
-  className,
-  ...props
-}: ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
-      {...props}
-    />
-  )
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
deleted file mode 100644
index 978062d..0000000
--- a/src/components/ui/textarea.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentProps } from "react"
-
-import { cn } from "@/lib/utils"
-
-function Textarea({ className, ...props }: ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Textarea }
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
deleted file mode 100644
index 6ae8454..0000000
--- a/src/components/ui/toggle.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ComponentProps } from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Toggle, toggleVariants }
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
deleted file mode 100644
index a2c9517..0000000
--- a/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ComponentProps } from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils"
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
-}
-
-function Tooltip({
-  ...props
-}: ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
-}
-
-function TooltipTrigger({
-  ...props
-}: ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/types/json-ui-component-types.ts b/src/types/json-ui-component-types.ts
index 5e5eb14..59b1be6 100644
--- a/src/types/json-ui-component-types.ts
+++ b/src/types/json-ui-component-types.ts
@@ -2,248 +2,311 @@
 // Do not edit this file directly.
 
 export const jsonUIComponentTypes = [
-  "div",
-  "section",
-  "article",
-  "header",
-  "footer",
-  "main",
-  "ActionCard",
-  "AlertDialog",
-  "Card",
-  "CodeExplanationDialog",
-  "CompletionCard",
-  "ComponentBindingDialog",
-  "ComponentBindingDialogWrapper",
-  "Container",
-  "DataSourceCard",
-  "DataSourceEditorDialog",
-  "DataSourceEditorDialogWrapper",
-  "Dialog",
-  "Drawer",
-  "Flex",
-  "GlowCard",
-  "Grid",
-  "HoverCard",
-  "Modal",
-  "ResponsiveGrid",
-  "Section",
-  "Stack",
-  "TipsCard",
-  "TreeCard",
-  "TreeFormDialog",
+  "accordion",
+  "Accordion",
+  "ActionBar",
   "ActionButton",
-  "Button",
-  "ButtonGroup",
-  "Checkbox",
-  "ConfirmButton",
-  "CopyButton",
-  "DatePicker",
-  "FileUpload",
-  "FilterInput",
-  "Form",
-  "IconButton",
-  "Input",
-  "InputOtp",
-  "NumberInput",
-  "PasswordInput",
-  "QuickActionButton",
-  "Radio",
-  "RadioGroup",
-  "RangeSlider",
-  "Select",
-  "Slider",
-  "Switch",
-  "TextArea",
-  "Toggle",
-  "ToggleGroup",
-  "ToolbarButton",
+  "ActionCard",
   "ActionIcon",
-  "Avatar",
-  "AvatarGroup",
-  "Badge",
-  "CircularProgress",
-  "Code",
-  "Divider",
-  "FileIcon",
-  "Heading",
-  "HelperText",
-  "IconText",
-  "IconWrapper",
-  "Image",
-  "Label",
-  "Progress",
-  "ProgressBar",
-  "SchemaCodeViewer",
-  "Separator",
-  "Skeleton",
-  "Spinner",
-  "Tag",
-  "Text",
-  "Textarea",
-  "TextGradient",
-  "TextHighlight",
-  "TreeIcon",
+  "alert",
+  "Alert",
+  "AlertCircle",
+  "AlertDialog",
+  "AppBranding",
+  "AppHeader",
+  "AppLogo",
   "ArrowLeft",
   "ArrowRight",
+  "article",
+  "aspect-ratio",
+  "AspectRatio",
+  "avatar",
+  "Avatar",
+  "AvatarGroup",
+  "badge",
+  "Badge",
+  "Badge as ShadcnBadge",
+  "Bell",
+  "BindingEditor",
+  "BindingIndicator",
+  "breadcrumb",
+  "Breadcrumb",
+  "button",
+  "Button",
+  "Button as ShadcnButton, ButtonProps as ShadcnButtonProps",
+  "Button, ButtonProps",
+  "Button, buttonVariants",
+  "ButtonGroup",
+  "buttonVariants",
+  "Calendar",
+  "Calendar as ShadcnCalendar",
+  "CanvasRenderer",
+  "card",
+  "Card",
+  "Card, CardContent",
+  "Card, CardContent, CardDescription, CardHeader, CardTitle",
+  "Card, CardContent, CardHeader",
+  "Card, CardContent, CardHeader, CardTitle",
+  "CardContent",
+  "CardFooter",
+  "CardHeader",
+  "Carousel",
+  "Chart",
   "Check",
-  "X",
-  "Plus",
-  "Minus",
-  "Search",
-  "Filter",
-  "Download",
-  "Upload",
-  "Edit",
-  "Trash",
-  "Eye",
-  "EyeOff",
-  "ChevronUp",
+  "checkbox",
+  "Checkbox",
   "ChevronDown",
   "ChevronLeft",
   "ChevronRight",
-  "Settings",
-  "User",
-  "Bell",
-  "Mail",
-  "Calendar",
+  "ChevronUp",
+  "Chip",
+  "CircularProgress",
   "Clock",
-  "Star",
-  "Heart",
-  "Share",
-  "Link",
-  "Copy",
-  "Save",
-  "RefreshCw",
-  "AlertCircle",
-  "Info",
-  "HelpCircle",
-  "Home",
-  "Menu",
-  "MoreVertical",
-  "MoreHorizontal",
-  "Breadcrumb",
+  "Code",
+  "CodeExplanationDialog",
+  "collapsible",
+  "Collapsible",
+  "CollapsibleTrigger",
+  "ColorSwatch",
+  "Command",
+  "Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,",
+  "CommandPalette",
+  "CompletionCard",
+  "ComponentBindingDialog",
+  "ComponentBindingDialogWrapper",
+  "ComponentPalette",
+  "ComponentPaletteItem",
+  "ComponentTree",
+  "ComponentTreeNode",
+  "ComponentTreeWrapper",
+  "ConfirmButton",
+  "Container",
   "ContextMenu",
-  "DropdownMenu",
-  "FileTabs",
-  "Menubar",
-  "NavigationGroupHeader",
-  "NavigationItem",
-  "NavigationMenu",
-  "TabIcon",
-  "Tabs",
-  "Alert",
+  "ContextMenu as ShadcnContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n  ContextMenuSeparator,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,",
+  "Copy",
+  "CopyButton",
   "CountBadge",
+  "DataCard",
+  "DataList",
   "DataSourceBadge",
+  "DataSourceCard",
+  "DataSourceEditorDialog",
+  "DataSourceEditorDialogWrapper",
+  "DataSourceManager",
+  "DataTable",
+  "DatePicker",
+  "DetailRow",
+  "dialog",
+  "Dialog",
+  "Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,",
+  "Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle",
+  "div",
+  "Divider",
+  "Dot",
+  "Download",
+  "drawer",
+  "Drawer",
+  "DropdownMenu",
+  "Edit",
+  "EditorActions",
+  "EditorToolbar",
   "EmptyCanvasState",
   "EmptyEditorState",
   "EmptyMessage",
   "EmptyState",
   "EmptyStateIcon",
   "ErrorBadge",
+  "Eye",
+  "EyeOff",
+  "FileIcon",
+  "FileTabs",
+  "FileUpload",
+  "Filter",
+  "FilterInput",
+  "Flex",
+  "footer",
+  "Form",
+  "Form as ShadcnForm,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,",
   "GitHubBuildStatus",
   "GitHubBuildStatusWrapper",
+  "GlowCard",
+  "Grid",
+  "header",
+  "Heading",
+  "Heart",
+  "HelpCircle",
+  "HelperText",
+  "Home",
+  "hover-card",
+  "HoverCard",
+  "HoverCard as ShadcnHoverCard,\n  HoverCardContent,\n  HoverCardTrigger,",
+  "Icon",
+  "IconButton",
+  "IconText",
+  "IconWrapper",
+  "Image",
+  "Info",
   "InfoBox",
-  "LabelWithBadge",
-  "LoadingFallback",
-  "LoadingSpinner",
-  "LoadingState",
-  "Notification",
-  "SchemaEditorStatusBar",
-  "SeedDataStatus",
-  "StatusBadge",
-  "StatusIcon",
-  "Chart",
-  "DataList",
-  "DataSourceManager",
-  "DataTable",
+  "InfoPanel",
+  "input",
+  "Input",
+  "input-otp",
+  "InputOtp",
+  "JSONUIShowcase",
+  "Kbd",
   "KeyValue",
+  "label",
+  "Label",
+  "LabelWithBadge",
   "LazyBarChart",
   "LazyBarChartWrapper",
   "LazyD3BarChart",
   "LazyD3BarChartWrapper",
+  "LazyInlineMonacoEditor",
   "LazyLineChart",
   "LazyLineChartWrapper",
+  "LazyMonacoEditor",
+  "Link",
   "List",
   "ListItem",
+  "LiveIndicator",
+  "LoadingFallback",
+  "LoadingSpinner",
+  "LoadingState",
+  "Mail",
+  "main",
+  "Menu",
+  "Menubar",
   "MetricCard",
   "MetricDisplay",
-  "SeedDataManager",
-  "SeedDataManagerWrapper",
-  "StatCard",
-  "Table",
-  "TableHeader",
-  "TableBody",
-  "TableRow",
-  "TableCell",
-  "TableHead",
-  "Timeline",
-  "TreeListHeader",
-  "TreeListPanel",
-  "Accordion",
-  "ActionBar",
-  "AppBranding",
-  "AppHeader",
-  "AppLogo",
-  "AspectRatio",
-  "BindingEditor",
-  "BindingIndicator",
-  "CanvasRenderer",
-  "Carousel",
-  "Chip",
-  "Collapsible",
-  "ColorSwatch",
-  "Command",
-  "CommandPalette",
-  "ComponentPalette",
-  "ComponentPaletteItem",
-  "ComponentTree",
-  "ComponentTreeWrapper",
-  "ComponentTreeNode",
-  "DataCard",
-  "DetailRow",
-  "Dot",
-  "EditorActions",
-  "EditorToolbar",
-  "InfoPanel",
-  "JSONUIShowcase",
-  "Kbd",
-  "LazyInlineMonacoEditor",
-  "LazyMonacoEditor",
-  "LiveIndicator",
+  "Minus",
+  "Modal",
   "MonacoEditorPanel",
+  "MoreHorizontal",
+  "MoreVertical",
+  "NavigationGroupHeader",
+  "NavigationItem",
+  "NavigationMenu",
+  "Notification",
+  "NumberInput",
   "PageHeader",
   "PageHeaderContent",
   "Pagination",
   "PanelHeader",
+  "PasswordInput",
+  "Plus",
+  "popover",
   "Popover",
+  "Popover, PopoverContent, PopoverTrigger",
+  "progress",
+  "Progress",
+  "ProgressBar",
   "PropertyEditor",
   "PropertyEditorField",
   "Pulse",
+  "QuickActionButton",
+  "Radio",
+  "radio-group",
+  "RadioGroup",
+  "RangeSlider",
   "Rating",
+  "RefreshCw",
+  "resizable",
   "Resizable",
+  "ResponsiveGrid",
+  "Save",
   "SaveIndicator",
   "SaveIndicatorWrapper",
+  "SchemaCodeViewer",
   "SchemaEditorCanvas",
   "SchemaEditorLayout",
   "SchemaEditorPropertiesPanel",
   "SchemaEditorSidebar",
+  "SchemaEditorStatusBar",
   "SchemaEditorToolbar",
+  "scroll-area",
   "ScrollArea",
+  "Search",
   "SearchBar",
   "SearchInput",
+  "section",
+  "Section",
+  "SeedDataManager",
+  "SeedDataManagerWrapper",
+  "SeedDataStatus",
+  "Select",
+  "separator",
+  "Separator",
+  "Separator as ShadcnSeparator",
+  "Settings",
+  "Share",
+  "sheet",
   "Sheet",
   "Sidebar",
+  "SidebarTrigger",
+  "skeleton",
+  "Skeleton",
+  "slider",
+  "Slider",
+  "sonner",
   "Sonner",
   "Spacer",
   "Sparkle",
+  "Spinner",
+  "Stack",
+  "Star",
+  "StatCard",
+  "StatusBadge",
+  "StatusIcon",
   "StepIndicator",
   "Stepper",
   "StorageSettings",
   "StorageSettingsWrapper",
+  "switch",
+  "Switch",
+  "Switch as ShadcnSwitch",
+  "TabIcon",
+  "table",
+  "Table",
+  "Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,",
+  "TableBody",
+  "TableCell",
+  "TableHead",
+  "TableHeader",
+  "TableRow",
+  "tabs",
+  "Tabs",
+  "Tabs, TabsContent, TabsList, TabsTrigger",
+  "Tag",
+  "Text",
+  "textarea",
+  "Textarea",
+  "TextArea",
+  "TextGradient",
+  "TextHighlight",
+  "Timeline",
   "Timestamp",
+  "TipsCard",
+  "toggle",
+  "Toggle",
+  "ToggleGroup",
+  "toggleVariants",
   "ToolbarActions",
+  "ToolbarButton",
+  "tooltip",
   "Tooltip",
+  "Tooltip as TooltipPrimitive,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,",
+  "Tooltip, TooltipContent, TooltipProvider, TooltipTrigger",
+  "TooltipContent, TooltipTrigger",
+  "Trash",
+  "TreeCard",
+  "TreeFormDialog",
+  "TreeIcon",
+  "TreeListHeader",
+  "TreeListPanel",
+  "Upload",
+  "User",
+  "X",
 ] as const
 
 export type JSONUIComponentType = typeof jsonUIComponentTypes[number]