From 11a340cea1504b377507d43b74c0a8f88a7e4e63 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sat, 17 Jan 2026 16:46:53 +0000
Subject: [PATCH] Generated by Spark: Integrate atomic components into
 remaining molecule-level components

---
 src/components/molecules/AppBranding.tsx      |  16 +--
 src/components/molecules/Breadcrumb.tsx       | 107 ++++++++++--------
 src/components/molecules/ComponentPalette.tsx |   6 +-
 src/components/molecules/DataCard.tsx         |  50 ++++----
 src/components/molecules/DataSourceCard.tsx   |  65 +++++------
 src/components/molecules/EditorActions.tsx    |  10 +-
 src/components/molecules/EmptyEditorState.tsx |  11 +-
 src/components/molecules/FileTabs.tsx         |   5 +-
 src/components/molecules/LabelWithBadge.tsx   |   8 +-
 src/components/molecules/NavigationItem.tsx   |  14 ++-
 src/components/molecules/PropertyEditor.tsx   |  51 +++++----
 src/components/molecules/SearchBar.tsx        |  16 +--
 src/components/molecules/TreeCard.tsx         |  68 ++++++-----
 src/components/molecules/TreeListHeader.tsx   |  33 +++---
 14 files changed, 235 insertions(+), 225 deletions(-)

diff --git a/src/components/molecules/AppBranding.tsx b/src/components/molecules/AppBranding.tsx
index f4b7420..cd59525 100644
--- a/src/components/molecules/AppBranding.tsx
+++ b/src/components/molecules/AppBranding.tsx
@@ -1,4 +1,4 @@
-import { AppLogo } from '@/components/atoms'
+import { AppLogo, Stack, Heading, Text } from '@/components/atoms'
 
 interface AppBrandingProps {
   title?: string
@@ -10,14 +10,14 @@ export function AppBranding({
   subtitle = 'Low-Code Next.js App Builder' 
 }: AppBrandingProps) {
   return (
-    <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
+    <Stack direction="horizontal" align="center" spacing="sm" className="flex-1 min-w-0">
       <AppLogo />
-      <div className="flex flex-col min-w-[100px]">
-        <h1 className="text-base sm:text-xl font-bold whitespace-nowrap">{title}</h1>
-        <p className="text-xs text-muted-foreground hidden sm:block whitespace-nowrap">
+      <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}
-        </p>
-      </div>
-    </div>
+        </Text>
+      </Stack>
+    </Stack>
   )
 }
diff --git a/src/components/molecules/Breadcrumb.tsx b/src/components/molecules/Breadcrumb.tsx
index 0e0469d..184383b 100644
--- a/src/components/molecules/Breadcrumb.tsx
+++ b/src/components/molecules/Breadcrumb.tsx
@@ -3,6 +3,7 @@ import { CaretRight, House } from '@phosphor-icons/react'
 import { cn } from '@/lib/utils'
 import { useNavigationHistory } from '@/hooks/use-navigation-history'
 import { getPageById } from '@/config/page-loader'
+import { Flex, IconWrapper } from '@/components/atoms'
 
 export function Breadcrumb() {
   const { history } = useNavigationHistory()
@@ -30,59 +31,65 @@ export function Breadcrumb() {
   const previousPages = history.slice(1, 4)
 
   return (
-    <nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm overflow-x-auto">
-      <Link
-        to="/"
-        className={cn(
-          "flex items-center gap-1 px-2 py-1 rounded-md transition-colors",
-          "hover:bg-accent hover:text-accent-foreground",
-          history[0]?.path === '/' ? "text-foreground font-medium" : "text-muted-foreground"
-        )}
-        aria-label="Home"
-      >
-        <House className="shrink-0" size={16} weight="duotone" />
-      </Link>
+    <nav aria-label="Breadcrumb" className="overflow-x-auto">
+      <Flex align="center" gap="xs" className="text-sm">
+        <Link
+          to="/"
+          className={cn(
+            "flex items-center gap-1 px-2 py-1 rounded-md transition-colors",
+            "hover:bg-accent hover:text-accent-foreground",
+            history[0]?.path === '/' ? "text-foreground font-medium" : "text-muted-foreground"
+          )}
+          aria-label="Home"
+        >
+          <IconWrapper 
+            icon={<House size={16} weight="duotone" />} 
+            size="sm"
+            variant={history[0]?.path === '/' ? 'default' : 'muted'}
+          />
+        </Link>
 
-      {previousPages.length > 0 && (
-        <>
-          <CaretRight size={14} className="text-muted-foreground shrink-0" />
-          <div className="flex items-center gap-1">
-            {previousPages.map((item, index) => (
-              <div key={item.path} className="flex items-center gap-1">
-                <Link
-                  to={item.path}
-                  className={cn(
-                    "px-2 py-1 rounded-md transition-colors text-muted-foreground",
-                    "hover:bg-accent hover:text-accent-foreground",
-                    "max-w-[120px] truncate"
+        {previousPages.length > 0 && (
+          <>
+            <CaretRight size={14} className="text-muted-foreground shrink-0" />
+            <Flex align="center" gap="xs">
+              {previousPages.map((item, index) => (
+                <Flex key={item.path} align="center" gap="xs">
+                  <Link
+                    to={item.path}
+                    className={cn(
+                      "px-2 py-1 rounded-md transition-colors text-muted-foreground",
+                      "hover:bg-accent hover:text-accent-foreground",
+                      "max-w-[120px] truncate"
+                    )}
+                    title={getPageTitle(item.path)}
+                  >
+                    {getPageTitle(item.path)}
+                  </Link>
+                  {index < previousPages.length - 1 && (
+                    <CaretRight size={14} className="text-muted-foreground shrink-0" />
                   )}
-                  title={getPageTitle(item.path)}
-                >
-                  {getPageTitle(item.path)}
-                </Link>
-                {index < previousPages.length - 1 && (
-                  <CaretRight size={14} className="text-muted-foreground shrink-0" />
-                )}
-              </div>
-            ))}
-          </div>
-        </>
-      )}
+                </Flex>
+              ))}
+            </Flex>
+          </>
+        )}
 
-      {currentPage.path !== '/' && (
-        <>
-          <CaretRight size={14} className="text-muted-foreground shrink-0" />
-          <span
-            className={cn(
-              "px-2 py-1 rounded-md font-medium text-foreground bg-accent/50",
-              "max-w-[150px] truncate"
-            )}
-            title={getPageTitle(currentPage.path)}
-          >
-            {getPageTitle(currentPage.path)}
-          </span>
-        </>
-      )}
+        {currentPage.path !== '/' && (
+          <>
+            <CaretRight size={14} className="text-muted-foreground shrink-0" />
+            <span
+              className={cn(
+                "px-2 py-1 rounded-md font-medium text-foreground bg-accent/50 text-sm",
+                "max-w-[150px] truncate"
+              )}
+              title={getPageTitle(currentPage.path)}
+            >
+              {getPageTitle(currentPage.path)}
+            </span>
+          </>
+        )}
+      </Flex>
     </nav>
   )
 }
diff --git a/src/components/molecules/ComponentPalette.tsx b/src/components/molecules/ComponentPalette.tsx
index 9dc148a..fb60e05 100644
--- a/src/components/molecules/ComponentPalette.tsx
+++ b/src/components/molecules/ComponentPalette.tsx
@@ -1,6 +1,6 @@
 import { ComponentDefinition, getCategoryComponents } from '@/lib/component-definitions'
 import { ComponentPaletteItem } from '@/components/atoms/ComponentPaletteItem'
-import { PanelHeader } from '@/components/atoms'
+import { PanelHeader, Stack } from '@/components/atoms'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Package } from '@phosphor-icons/react'
@@ -18,7 +18,7 @@ export function ComponentPalette({ onDragStart }: ComponentPaletteProps) {
   ]
 
   return (
-    <div className="h-full flex flex-col">
+    <Stack direction="vertical" className="h-full">
       <div className="p-4">
         <PanelHeader
           title="Components"
@@ -53,6 +53,6 @@ export function ComponentPalette({ onDragStart }: ComponentPaletteProps) {
           </TabsContent>
         ))}
       </Tabs>
-    </div>
+    </Stack>
   )
 }
diff --git a/src/components/molecules/DataCard.tsx b/src/components/molecules/DataCard.tsx
index 98fc7d1..b0db6ff 100644
--- a/src/components/molecules/DataCard.tsx
+++ b/src/components/molecules/DataCard.tsx
@@ -1,5 +1,4 @@
-import { Card, CardContent } from '@/components/ui/card'
-import { Skeleton } from '@/components/ui/skeleton'
+import { Card, Stack, Text, Heading, Skeleton, Flex, IconWrapper } from '@/components/atoms'
 
 interface DataCardProps {
   title?: string
@@ -27,46 +26,49 @@ export function DataCard({
   if (isLoading) {
     return (
       <Card className={className}>
-        <CardContent className="pt-6">
-          <Skeleton className="h-4 w-20 mb-2" />
-          <Skeleton className="h-8 w-16 mb-1" />
-          <Skeleton className="h-3 w-24" />
-        </CardContent>
+        <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}>
-      <CardContent className="pt-6">
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
+      <div className="pt-6 px-6 pb-6">
+        <Flex justify="between" align="start" gap="md">
+          <Stack spacing="xs" className="flex-1">
             {title && (
-              <div className="text-sm font-medium text-muted-foreground mb-1">
+              <Text variant="muted" className="font-medium">
                 {title}
-              </div>
+              </Text>
             )}
-            <div className="text-3xl font-bold">
+            <Heading level={1} className="text-3xl font-bold">
               {value}
-            </div>
+            </Heading>
             {description && (
-              <div className="text-xs text-muted-foreground mt-1">
+              <Text variant="caption">
                 {description}
-              </div>
+              </Text>
             )}
             {trend && (
-              <div className={`text-xs mt-2 ${trend.positive ? 'text-green-500' : 'text-red-500'}`}>
+              <Text 
+                variant="small" 
+                className={trend.positive ? 'text-green-500' : 'text-red-500'}
+              >
                 {trend.positive ? '↑' : '↓'} {trend.value} {trend.label}
-              </div>
+              </Text>
             )}
-          </div>
+          </Stack>
           {icon && (
-            <div className="text-muted-foreground">
-              {icon}
-            </div>
+            <IconWrapper icon={icon} size="lg" variant="muted" />
           )}
-        </div>
-      </CardContent>
+        </Flex>
+      </div>
     </Card>
   )
 }
diff --git a/src/components/molecules/DataSourceCard.tsx b/src/components/molecules/DataSourceCard.tsx
index 1a4b36b..2387604 100644
--- a/src/components/molecules/DataSourceCard.tsx
+++ b/src/components/molecules/DataSourceCard.tsx
@@ -1,11 +1,7 @@
-import { Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { Card, Badge, IconButton, Stack, Flex, Text } from '@/components/atoms'
 import { DataSourceBadge } from '@/components/atoms/DataSourceBadge'
 import { DataSource } from '@/types/json-ui'
 import { Pencil, Trash, ArrowsDownUp } from '@phosphor-icons/react'
-import { Badge } from '@/components/ui/badge'
 
 interface DataSourceCardProps {
   dataSource: DataSource
@@ -25,21 +21,21 @@ export function DataSourceCard({ dataSource, dependents = [], onEdit, onDelete }
   const renderTypeSpecificInfo = () => {
     if (dataSource.type === 'kv') {
       return (
-        <div className="text-xs text-muted-foreground font-mono bg-muted/30 px-2 py-1 rounded">
+        <Text variant="caption" className="font-mono bg-muted/30 px-2 py-1 rounded">
           Key: {dataSource.key || 'Not set'}
-        </div>
+        </Text>
       )
     }
     
     if (dataSource.type === 'computed') {
       const depCount = getDependencyCount()
       return (
-        <div className="flex items-center gap-2">
+        <Flex align="center" gap="sm">
           <Badge variant="outline" className="text-xs">
             <ArrowsDownUp className="w-3 h-3 mr-1" />
             {depCount} {depCount === 1 ? 'dependency' : 'dependencies'}
           </Badge>
-        </div>
+        </Flex>
       )
     }
     
@@ -48,48 +44,45 @@ export function DataSourceCard({ dataSource, dependents = [], onEdit, onDelete }
 
   return (
     <Card className="bg-card/50 backdrop-blur hover:bg-card/70 transition-colors">
-      <CardContent className="p-4">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-2">
+      <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} />
-              <span className="font-mono text-sm font-medium truncate">
+              <Text variant="small" className="font-mono font-medium truncate">
                 {dataSource.id}
-              </span>
-            </div>
+              </Text>
+            </Flex>
             
             {renderTypeSpecificInfo()}
             
             {dependents.length > 0 && (
-              <div className="mt-2 pt-2 border-t border-border/50">
-                <span className="text-xs text-muted-foreground">
+              <div className="pt-2 border-t border-border/50">
+                <Text variant="caption">
                   Used by {dependents.length} computed {dependents.length === 1 ? 'source' : 'sources'}
-                </span>
+                </Text>
               </div>
             )}
-          </div>
+          </Stack>
           
-          <div className="flex items-center gap-1">
-            <Button
-              size="sm"
+          <Flex align="center" gap="xs">
+            <IconButton
+              icon={<Pencil className="w-4 h-4" />}
               variant="ghost"
+              size="sm"
               onClick={() => onEdit(dataSource.id)}
-              className="h-8 w-8 p-0"
-            >
-              <Pencil className="w-4 h-4" />
-            </Button>
-            <Button
-              size="sm"
+            />
+            <IconButton
+              icon={<Trash className="w-4 h-4" />}
               variant="ghost"
+              size="sm"
               onClick={() => onDelete(dataSource.id)}
-              className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+              className="text-destructive hover:text-destructive"
               disabled={dependents.length > 0}
-            >
-              <Trash className="w-4 h-4" />
-            </Button>
-          </div>
-        </div>
-      </CardContent>
+            />
+          </Flex>
+        </Flex>
+      </div>
     </Card>
   )
 }
diff --git a/src/components/molecules/EditorActions.tsx b/src/components/molecules/EditorActions.tsx
index 2b01fc6..e004d03 100644
--- a/src/components/molecules/EditorActions.tsx
+++ b/src/components/molecules/EditorActions.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button'
+import { Button, Flex } from '@/components/atoms'
 import { Info, Sparkle } from '@phosphor-icons/react'
 
 interface EditorActionsProps {
@@ -8,14 +8,14 @@ interface EditorActionsProps {
 
 export function EditorActions({ onExplain, onImprove }: EditorActionsProps) {
   return (
-    <div className="flex gap-2">
+    <Flex gap="sm">
       <Button
         size="sm"
         variant="ghost"
         onClick={onExplain}
         className="h-7 text-xs"
+        leftIcon={<Info size={14} />}
       >
-        <Info size={14} className="mr-1" />
         Explain
       </Button>
       <Button
@@ -23,10 +23,10 @@ export function EditorActions({ onExplain, onImprove }: EditorActionsProps) {
         variant="ghost"
         onClick={onImprove}
         className="h-7 text-xs"
+        leftIcon={<Sparkle size={14} weight="duotone" />}
       >
-        <Sparkle size={14} className="mr-1" weight="duotone" />
         Improve
       </Button>
-    </div>
+    </Flex>
   )
 }
diff --git a/src/components/molecules/EmptyEditorState.tsx b/src/components/molecules/EmptyEditorState.tsx
index e7bca92..587a428 100644
--- a/src/components/molecules/EmptyEditorState.tsx
+++ b/src/components/molecules/EmptyEditorState.tsx
@@ -1,12 +1,13 @@
+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 text-muted-foreground">
-      <div className="text-center">
-        <FileCode size={48} className="mx-auto mb-4 opacity-50" />
-        <p>Select a file to edit</p>
-      </div>
+    <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/FileTabs.tsx b/src/components/molecules/FileTabs.tsx
index 6fadda6..7d2b83b 100644
--- a/src/components/molecules/FileTabs.tsx
+++ b/src/components/molecules/FileTabs.tsx
@@ -1,5 +1,6 @@
 import { ProjectFile } from '@/types/project'
 import { FileCode, X } from '@phosphor-icons/react'
+import { Flex } from '@/components/atoms'
 
 interface FileTabsProps {
   files: ProjectFile[]
@@ -10,7 +11,7 @@ interface FileTabsProps {
 
 export function FileTabs({ files, activeFileId, onFileSelect, onFileClose }: FileTabsProps) {
   return (
-    <div className="flex items-center gap-1">
+    <Flex align="center" gap="xs">
       {files.map((file) => (
         <button
           key={file.id}
@@ -34,6 +35,6 @@ export function FileTabs({ files, activeFileId, onFileSelect, onFileClose }: Fil
           </button>
         </button>
       ))}
-    </div>
+    </Flex>
   )
 }
diff --git a/src/components/molecules/LabelWithBadge.tsx b/src/components/molecules/LabelWithBadge.tsx
index b560028..799eea6 100644
--- a/src/components/molecules/LabelWithBadge.tsx
+++ b/src/components/molecules/LabelWithBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge } from '@/components/ui/badge'
+import { Badge, Flex, Text } from '@/components/atoms'
 
 interface LabelWithBadgeProps {
   label: string
@@ -12,13 +12,13 @@ export function LabelWithBadge({
   badgeVariant = 'secondary' 
 }: LabelWithBadgeProps) {
   return (
-    <div className="flex items-center gap-2">
-      <span className="text-sm font-medium">{label}</span>
+    <Flex align="center" gap="sm">
+      <Text variant="small" className="font-medium">{label}</Text>
       {badge !== undefined && (
         <Badge variant={badgeVariant} className="text-xs">
           {badge}
         </Badge>
       )}
-    </div>
+    </Flex>
   )
 }
diff --git a/src/components/molecules/NavigationItem.tsx b/src/components/molecules/NavigationItem.tsx
index 62b8e67..b5977ab 100644
--- a/src/components/molecules/NavigationItem.tsx
+++ b/src/components/molecules/NavigationItem.tsx
@@ -1,4 +1,4 @@
-import { Badge } from '@/components/ui/badge'
+import { Badge, Flex, Text, IconWrapper } from '@/components/atoms'
 
 interface NavigationItemProps {
   icon: React.ReactNode
@@ -24,12 +24,14 @@ export function NavigationItem({
           : 'hover:bg-muted text-foreground'
       }`}
     >
-      <span className={isActive ? 'text-primary-foreground' : 'text-muted-foreground'}>
-        {icon}
-      </span>
-      <span className="flex-1 text-left text-sm font-medium">
+      <IconWrapper
+        icon={icon}
+        size="md"
+        variant={isActive ? 'default' : 'muted'}
+      />
+      <Text className="flex-1 text-left font-medium" variant="small">
         {label}
-      </span>
+      </Text>
       {badge !== undefined && badge > 0 && (
         <Badge
           variant={isActive ? 'secondary' : 'destructive'}
diff --git a/src/components/molecules/PropertyEditor.tsx b/src/components/molecules/PropertyEditor.tsx
index 47ce3c5..2803500 100644
--- a/src/components/molecules/PropertyEditor.tsx
+++ b/src/components/molecules/PropertyEditor.tsx
@@ -1,11 +1,9 @@
 import { UIComponent } from '@/types/json-ui'
 import { PropertyEditorField } from '@/components/atoms/PropertyEditorField'
-import { PanelHeader } from '@/components/atoms'
+import { PanelHeader, Badge, IconButton, Stack, Text, EmptyStateIcon } from '@/components/atoms'
 import { ScrollArea } from '@/components/ui/scroll-area'
-import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
-import { Badge } from '@/components/ui/badge'
-import { Sliders, Trash, Code } from '@phosphor-icons/react'
+import { Sliders, Trash } from '@phosphor-icons/react'
 import { getComponentDef } from '@/lib/component-definitions'
 
 interface PropertyEditorProps {
@@ -17,10 +15,14 @@ interface PropertyEditorProps {
 export function PropertyEditor({ component, onUpdate, onDelete }: PropertyEditorProps) {
   if (!component) {
     return (
-      <div className="h-full flex flex-col items-center justify-center text-muted-foreground p-8 text-center">
-        <Sliders className="w-12 h-12 mb-4 opacity-50" />
-        <p className="text-sm">No component selected</p>
-        <p className="text-xs mt-1">Select a component to edit its properties</p>
+      <div className="h-full flex flex-col items-center justify-center p-8">
+        <Stack direction="vertical" align="center" spacing="md">
+          <EmptyStateIcon icon={<Sliders className="w-12 h-12" />} />
+          <Stack direction="vertical" align="center" spacing="xs">
+            <Text variant="small">No component selected</Text>
+            <Text variant="caption">Select a component to edit its properties</Text>
+          </Stack>
+        </Stack>
       </div>
     )
   }
@@ -106,33 +108,32 @@ export function PropertyEditor({ component, onUpdate, onDelete }: PropertyEditor
         <PanelHeader
           title="Properties"
           subtitle={
-            <div className="flex items-center gap-2 mt-1">
+            <Stack direction="horizontal" align="center" spacing="sm" className="mt-1">
               <Badge variant="outline" className="text-xs font-mono">
                 {def?.label || component.type}
               </Badge>
-              <span className="text-xs text-muted-foreground">#{component.id}</span>
-            </div>
+              <Text variant="caption">#{component.id}</Text>
+            </Stack>
           }
           icon={<Sliders size={20} weight="duotone" />}
           actions={
-            <Button
+            <IconButton
+              icon={<Trash className="w-4 h-4" />}
               variant="ghost"
               size="sm"
               onClick={onDelete}
               className="text-destructive hover:text-destructive hover:bg-destructive/10"
-            >
-              <Trash className="w-4 h-4" />
-            </Button>
+            />
           }
         />
       </div>
       
       <ScrollArea className="flex-1 p-4">
-        <div className="space-y-6">
-          <div className="space-y-4">
-            <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+        <Stack spacing="lg">
+          <Stack spacing="md">
+            <Text variant="caption" className="font-semibold uppercase tracking-wide">
               Component Properties
-            </h3>
+            </Text>
             {props.map((prop) => (
               <PropertyEditorField
                 key={prop.name}
@@ -144,14 +145,14 @@ export function PropertyEditor({ component, onUpdate, onDelete }: PropertyEditor
                 onChange={handlePropChange}
               />
             ))}
-          </div>
+          </Stack>
 
           <Separator />
 
-          <div className="space-y-4">
-            <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+          <Stack spacing="md">
+            <Text variant="caption" className="font-semibold uppercase tracking-wide">
               Common Properties
-            </h3>
+            </Text>
             {commonProps.map((prop) => (
               <PropertyEditorField
                 key={prop.name}
@@ -162,8 +163,8 @@ export function PropertyEditor({ component, onUpdate, onDelete }: PropertyEditor
                 onChange={handlePropChange}
               />
             ))}
-          </div>
-        </div>
+          </Stack>
+        </Stack>
       </ScrollArea>
     </div>
   )
diff --git a/src/components/molecules/SearchBar.tsx b/src/components/molecules/SearchBar.tsx
index 36e5da5..f104953 100644
--- a/src/components/molecules/SearchBar.tsx
+++ b/src/components/molecules/SearchBar.tsx
@@ -1,7 +1,5 @@
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
+import { Input, IconButton, Flex } from '@/components/atoms'
 import { MagnifyingGlass, X } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
 
 interface SearchBarProps {
   value: string
@@ -12,7 +10,7 @@ interface SearchBarProps {
 
 export function SearchBar({ value, onChange, placeholder = 'Search...', className }: SearchBarProps) {
   return (
-    <div className={cn('flex gap-2', className)}>
+    <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" 
@@ -26,15 +24,13 @@ export function SearchBar({ value, onChange, placeholder = 'Search...', classNam
         />
       </div>
       {value && (
-        <Button
+        <IconButton
+          icon={<X size={16} />}
           variant="ghost"
-          size="icon"
           onClick={() => onChange('')}
           title="Clear search"
-        >
-          <X size={16} />
-        </Button>
+        />
       )}
-    </div>
+    </Flex>
   )
 }
diff --git a/src/components/molecules/TreeCard.tsx b/src/components/molecules/TreeCard.tsx
index ad2fed6..e42a52c 100644
--- a/src/components/molecules/TreeCard.tsx
+++ b/src/components/molecules/TreeCard.tsx
@@ -1,7 +1,4 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { ActionIcon } from '@/components/atoms'
+import { Card, Badge, ActionIcon, IconButton, Stack, Flex, Text, Heading } from '@/components/atoms'
 import { ComponentTree } from '@/types/project'
 
 interface TreeCardProps {
@@ -25,45 +22,54 @@ export function TreeCard({
 }: TreeCardProps) {
   return (
     <Card
-      className={`cursor-pointer transition-all ${
+      className={`cursor-pointer transition-all p-4 ${
         isSelected ? 'ring-2 ring-primary bg-accent' : 'hover:bg-accent/50'
       }`}
       onClick={onSelect}
     >
-      <CardHeader className="p-4">
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex-1 min-w-0">
-            <CardTitle className="text-sm truncate">{tree.name}</CardTitle>
+      <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 && (
-              <CardDescription className="text-xs mt-1 line-clamp-2">
+              <Text variant="caption" className="line-clamp-2">
                 {tree.description}
-              </CardDescription>
+              </Text>
             )}
-            <div className="flex gap-2 mt-2">
+            <div>
               <Badge variant="outline" className="text-xs">
                 {tree.rootNodes.length} components
               </Badge>
             </div>
-          </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>
-        <div className="flex gap-1 mt-2" onClick={(e) => e.stopPropagation()}>
-          <Button size="sm" variant="ghost" onClick={onEdit} title="Edit tree">
-            <ActionIcon action="edit" size={14} />
-          </Button>
-          <Button size="sm" variant="ghost" onClick={onDuplicate} title="Duplicate tree">
-            <ActionIcon action="copy" size={14} />
-          </Button>
-          <Button
-            size="sm"
-            variant="ghost"
-            onClick={onDelete}
-            disabled={disableDelete}
-            title="Delete tree"
-          >
-            <ActionIcon action="delete" size={14} />
-          </Button>
-        </div>
-      </CardHeader>
+      </Stack>
     </Card>
   )
 }
diff --git a/src/components/molecules/TreeListHeader.tsx b/src/components/molecules/TreeListHeader.tsx
index d1428b9..d381b2c 100644
--- a/src/components/molecules/TreeListHeader.tsx
+++ b/src/components/molecules/TreeListHeader.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@/components/ui/button'
-import { TreeIcon, ActionIcon } from '@/components/atoms'
+import { Button, TreeIcon, ActionIcon, Flex, Heading, Stack, IconButton } from '@/components/atoms'
 
 interface TreeListHeaderProps {
   onCreateNew: () => void
@@ -15,25 +14,27 @@ export function TreeListHeader({
   hasSelectedTree = false,
 }: TreeListHeaderProps) {
   return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold flex items-center gap-2">
+    <Stack spacing="sm">
+      <Flex justify="between" align="center">
+        <Flex align="center" gap="sm">
           <TreeIcon size={20} />
-          Component Trees
-        </h2>
-        <Button size="sm" onClick={onCreateNew}>
-          <ActionIcon action="add" size={16} />
-        </Button>
-      </div>
+          <Heading level={2} className="text-lg font-semibold">Component Trees</Heading>
+        </Flex>
+        <IconButton 
+          icon={<ActionIcon action="add" size={16} />}
+          size="sm" 
+          onClick={onCreateNew}
+        />
+      </Flex>
       
-      <div className="flex gap-2">
+      <Flex gap="sm">
         <Button
           size="sm"
           variant="outline"
           onClick={onImportJson}
           className="flex-1 text-xs"
+          leftIcon={<ActionIcon action="upload" size={14} />}
         >
-          <ActionIcon action="upload" size={14} className="mr-1.5" />
           Import JSON
         </Button>
         <Button
@@ -42,11 +43,11 @@ export function TreeListHeader({
           onClick={onExportJson}
           disabled={!hasSelectedTree}
           className="flex-1 text-xs"
+          leftIcon={<ActionIcon action="download" size={14} />}
         >
-          <ActionIcon action="download" size={14} className="mr-1.5" />
           Export JSON
         </Button>
-      </div>
-    </div>
+      </Flex>
+    </Stack>
   )
 }