stuff

2026-04-26 22:54:54 +00:00 · 2026-01-19 08:58:51 +00:00
parent 5a88b9493b
commit ddee18d1dc
494 changed files with 62410 additions and 9569 deletions
--- a/src/components/DataBindingDesigner.tsx
+++ b/src/components/DataBindingDesigner.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { DataSourceManager } from '@/components/organisms/DataSourceManager'
-import { ComponentBindingDialog } from '@/components/molecules/ComponentBindingDialog'
+import { ComponentBindingDialog } from '@/lib/json-ui/json-components'
 import { DataSource, UIComponent } from '@/types/json-ui'
 import { DataBindingHeader } from '@/components/data-binding-designer/DataBindingHeader'
 import { ComponentBindingsCard } from '@/components/data-binding-designer/ComponentBindingsCard'
--- a/src/components/FeatureIdeaCloud/constants.ts
+++ b/src/components/FeatureIdeaCloud/constants.ts
@@ -15,3 +15,14 @@ export const PRIORITY_COLORS = {
  medium: 'border-amber-400/60 bg-amber-50/80 dark:bg-amber-950/40',
  high: 'border-red-400/60 bg-red-50/80 dark:bg-red-950/40',
 }
+
+export const GROUP_COLORS = {
+  default: 'border-purple-400/60 bg-purple-50/80 dark:bg-purple-950/40',
+  feature: 'border-green-400/60 bg-green-50/80 dark:bg-green-950/40',
+  bug: 'border-red-400/60 bg-red-50/80 dark:bg-red-950/40',
+  improvement: 'border-blue-400/60 bg-blue-50/80 dark:bg-blue-950/40',
+}
+
+export const CATEGORIES = ['feature', 'bug', 'improvement', 'other'] as const
+export const PRIORITIES = ['low', 'medium', 'high'] as const
+export const STATUSES = ['idea', 'planned', 'in-progress', 'completed'] as const
--- a/src/components/atoms/Accordion.tsx
+++ b/src/components/atoms/Accordion.tsx
@@ -1,68 +0,0 @@
-import { useState } from 'react'
-import { CaretDown } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface AccordionItem {
-  id: string
-  title: string
-  content: React.ReactNode
-  disabled?: boolean
-}
-
-interface AccordionProps {
-  items: AccordionItem[]
-  type?: 'single' | 'multiple'
-  defaultOpen?: string[]
-  className?: string
-}
-
-export function Accordion({ items, type = 'single', defaultOpen = [], className }: AccordionProps) {
-  const [openItems, setOpenItems] = useState<string[]>(defaultOpen)
-
-  const toggleItem = (id: string) => {
-    if (type === 'single') {
-      setOpenItems(openItems.includes(id) ? [] : [id])
-    } else {
-      setOpenItems(
-        openItems.includes(id)
-          ? openItems.filter((item) => item !== id)
-          : [...openItems, id]
-      )
-    }
-  }
-
-  return (
-    <div className={cn('space-y-2', className)}>
-      {items.map((item) => {
-        const isOpen = openItems.includes(item.id)
-
-        return (
-          <div key={item.id} className="border border-border rounded-lg overflow-hidden">
-            <button
-              onClick={() => !item.disabled && toggleItem(item.id)}
-              disabled={item.disabled}
-              className={cn(
-                'w-full flex items-center justify-between p-4 bg-card text-card-foreground font-medium transition-colors',
-                'hover:bg-accent hover:text-accent-foreground',
-                item.disabled && 'opacity-50 cursor-not-allowed'
-              )}
-            >
-              <span>{item.title}</span>
-              <CaretDown
-                className={cn(
-                  'w-5 h-5 transition-transform',
-                  isOpen && 'rotate-180'
-                )}
-              />
-            </button>
-            {isOpen && (
-              <div className="p-4 bg-card border-t border-border animate-in slide-in-from-top-2">
-                {item.content}
-              </div>
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
--- a/src/components/atoms/ActionButton.tsx
+++ b/src/components/atoms/ActionButton.tsx
@@ -1,51 +0,0 @@
-import { ReactNode } from 'react'
-import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/components/ui/tooltip'
-
-export interface ActionButtonProps {
-  icon?: ReactNode
-  label: string
-  onClick: () => void
-  variant?: 'default' | 'outline' | 'ghost' | 'destructive'
-  size?: 'default' | 'sm' | 'lg' | 'icon'
-  tooltip?: string
-  disabled?: boolean
-  className?: string
-}
-
-export function ActionButton({
-  icon,
-  label,
-  onClick,
-  variant = 'default',
-  size = 'default',
-  tooltip,
-  disabled,
-  className,
-}: ActionButtonProps) {
-  const button = (
-    <Button
-      variant={variant}
-      size={size}
-      onClick={onClick}
-      disabled={disabled}
-      className={className}
-    >
-      {icon && <span className="mr-2">{icon}</span>}
-      {label}
-    </Button>
-  )
-
-  if (tooltip) {
-    return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>{button}</TooltipTrigger>
-          <TooltipContent>{tooltip}</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    )
-  }
-
-  return button
-}
--- a/src/components/atoms/ActionCard.tsx
+++ b/src/components/atoms/ActionCard.tsx
@@ -1,42 +0,0 @@
-import { cn } from '@/lib/utils'
-import { Card, CardContent } from '@/components/ui/card'
-import { CaretRight } from '@phosphor-icons/react'
-
-interface ActionCardProps {
-  icon?: React.ReactNode
-  title: string
-  description?: string
-  onClick?: () => void
-  className?: string
-  disabled?: boolean
-}
-
-export function ActionCard({ icon, title, description, onClick, className, disabled }: ActionCardProps) {
-  return (
-    <Card 
-      className={cn(
-        'cursor-pointer transition-all hover:shadow-md hover:border-primary/50',
-        disabled && 'opacity-50 cursor-not-allowed',
-        className
-      )}
-      onClick={disabled ? undefined : onClick}
-    >
-      <CardContent className="p-4">
-        <div className="flex items-start gap-3">
-          {icon && (
-            <div className="flex-shrink-0 p-2 rounded-lg bg-primary/10 text-primary">
-              {icon}
-            </div>
-          )}
-          <div className="flex-1 min-w-0">
-            <div className="font-semibold text-sm mb-1">{title}</div>
-            {description && (
-              <div className="text-xs text-muted-foreground line-clamp-2">{description}</div>
-            )}
-          </div>
-          <CaretRight size={16} className="flex-shrink-0 text-muted-foreground" />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
--- a/src/components/atoms/ActionIcon.tsx
+++ b/src/components/atoms/ActionIcon.tsx
@@ -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} />
-}
--- a/src/components/atoms/Alert.tsx
+++ b/src/components/atoms/Alert.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/AppLogo.tsx
+++ b/src/components/atoms/AppLogo.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Avatar.tsx
+++ b/src/components/atoms/Avatar.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/AvatarGroup.tsx
+++ b/src/components/atoms/AvatarGroup.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Badge.tsx
+++ b/src/components/atoms/Badge.tsx
@@ -1,39 +0,0 @@
-import { Badge as ShadcnBadge } from '@/components/ui/badge'
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-interface BadgeProps {
-  children: ReactNode
-  variant?: 'default' | 'secondary' | 'destructive' | 'outline'
-  size?: 'sm' | 'md' | 'lg'
-  icon?: ReactNode
-  className?: string
-}
-
-const sizeClasses = {
-  sm: 'text-xs px-2 py-0.5',
-  md: 'text-sm px-2.5 py-0.5',
-  lg: 'text-base px-3 py-1',
-}
-
-export function Badge({
-  children,
-  variant = 'default',
-  size = 'md',
-  icon,
-  className,
-}: BadgeProps) {
-  return (
-    <ShadcnBadge
-      variant={variant}
-      className={cn(
-        'inline-flex items-center gap-1.5',
-        sizeClasses[size],
-        className
-      )}
-    >
-      {icon && <span className="flex-shrink-0">{icon}</span>}
-      {children}
-    </ShadcnBadge>
-  )
-}
--- a/src/components/atoms/BindingIndicator.tsx
+++ b/src/components/atoms/BindingIndicator.tsx
@@ -1,28 +0,0 @@
-import { Link } from '@phosphor-icons/react'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-
-interface BindingIndicatorProps {
-  sourceId: string
-  path?: string
-  className?: string
-}
-
-export function BindingIndicator({ sourceId, path, className = '' }: BindingIndicatorProps) {
-  const bindingText = path ? `${sourceId}.${path}` : sourceId
-  
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs bg-accent/10 text-accent border border-accent/30 ${className}`}>
-            <Link weight="bold" className="w-3 h-3" />
-            <span className="font-mono">{bindingText}</span>
-          </div>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p className="text-xs">Bound to: {bindingText}</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  )
-}
--- a/src/components/atoms/Breadcrumb.tsx
+++ b/src/components/atoms/Breadcrumb.tsx
@@ -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
--- a/src/components/atoms/Button.tsx
+++ b/src/components/atoms/Button.tsx
@@ -1,43 +0,0 @@
-import { Button as ShadcnButton, ButtonProps as ShadcnButtonProps } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-export interface ButtonProps extends ShadcnButtonProps {
-  children: ReactNode
-  leftIcon?: ReactNode
-  rightIcon?: ReactNode
-  loading?: boolean
-  fullWidth?: boolean
-}
-
-export function Button({
-  children,
-  leftIcon,
-  rightIcon,
-  loading,
-  fullWidth,
-  disabled,
-  className,
-  ...props
-}: ButtonProps) {
-  return (
-    <ShadcnButton
-      disabled={disabled || loading}
-      className={cn(fullWidth && 'w-full', className)}
-      {...props}
-    >
-      {loading ? (
-        <div className="flex items-center gap-2">
-          <div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-          <span>{children}</span>
-        </div>
-      ) : (
-        <div className="flex items-center gap-2">
-          {leftIcon && <span className="flex-shrink-0">{leftIcon}</span>}
-          <span>{children}</span>
-          {rightIcon && <span className="flex-shrink-0">{rightIcon}</span>}
-        </div>
-      )}
-    </ShadcnButton>
-  )
-}
--- a/src/components/atoms/ButtonGroup.tsx
+++ b/src/components/atoms/ButtonGroup.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Calendar.tsx
+++ b/src/components/atoms/Calendar.tsx
@@ -1,28 +0,0 @@
-import { Calendar as ShadcnCalendar } from '@/components/ui/calendar'
-import { cn } from '@/lib/utils'
-
-interface CalendarProps {
-  selected?: Date
-  onSelect?: (date: Date | undefined) => void
-  mode?: 'single' | 'multiple' | 'range'
-  disabled?: Date | ((date: Date) => boolean)
-  className?: string
-}
-
-export function Calendar({
-  selected,
-  onSelect,
-  mode = 'single',
-  disabled,
-  className,
-}: CalendarProps) {
-  return (
-    <ShadcnCalendar
-      mode={mode as any}
-      selected={selected}
-      onSelect={onSelect as any}
-      disabled={disabled}
-      className={cn('rounded-md border', className)}
-    />
-  )
-}
--- a/src/components/atoms/Card.tsx
+++ b/src/components/atoms/Card.tsx
@@ -1,49 +0,0 @@
-import { cn } from '@/lib/utils'
-
-interface CardProps {
-  children: React.ReactNode
-  variant?: 'default' | 'bordered' | 'elevated' | 'flat'
-  padding?: 'none' | 'sm' | 'md' | 'lg'
-  hover?: boolean
-  className?: string
-  onClick?: () => void
-}
-
-export function Card({ 
-  children, 
-  variant = 'default', 
-  padding = 'md', 
-  hover = false,
-  className,
-  onClick 
-}: CardProps) {
-  const variantStyles = {
-    default: 'bg-card border border-border',
-    bordered: 'bg-background border-2 border-border',
-    elevated: 'bg-card shadow-lg border border-border',
-    flat: 'bg-muted',
-  }
-
-  const paddingStyles = {
-    none: 'p-0',
-    sm: 'p-3',
-    md: 'p-6',
-    lg: 'p-8',
-  }
-
-  return (
-    <div
-      onClick={onClick}
-      className={cn(
-        'rounded-lg transition-all',
-        variantStyles[variant],
-        paddingStyles[padding],
-        hover && 'hover:shadow-md hover:scale-[1.01] cursor-pointer',
-        onClick && 'cursor-pointer',
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
--- a/src/components/atoms/Checkbox.tsx
+++ b/src/components/atoms/Checkbox.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Chip.tsx
+++ b/src/components/atoms/Chip.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/CircularProgress.tsx
+++ b/src/components/atoms/CircularProgress.tsx
@@ -1,67 +0,0 @@
-import { Progress } from '@/components/ui/progress'
-import { cn } from '@/lib/utils'
-
-interface CircularProgressProps {
-  value: number
-  max?: number
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  showLabel?: boolean
-  strokeWidth?: number
-  className?: string
-}
-
-const sizeClasses = {
-  sm: { dimension: 48, stroke: 4, fontSize: 'text-xs' },
-  md: { dimension: 64, stroke: 5, fontSize: 'text-sm' },
-  lg: { dimension: 96, stroke: 6, fontSize: 'text-base' },
-  xl: { dimension: 128, stroke: 8, fontSize: 'text-lg' },
-}
-
-export function CircularProgress({
-  value,
-  max = 100,
-  size = 'md',
-  showLabel = true,
-  strokeWidth,
-  className,
-}: CircularProgressProps) {
-  const { dimension, stroke, fontSize } = sizeClasses[size]
-  const actualStroke = strokeWidth || stroke
-  const percentage = Math.min((value / max) * 100, 100)
-  const radius = (dimension - actualStroke) / 2
-  const circumference = radius * 2 * Math.PI
-  const offset = circumference - (percentage / 100) * circumference
-
-  return (
-    <div className={cn('relative inline-flex items-center justify-center', className)}>
-      <svg width={dimension} height={dimension} className="transform -rotate-90">
-        <circle
-          cx={dimension / 2}
-          cy={dimension / 2}
-          r={radius}
-          stroke="currentColor"
-          strokeWidth={actualStroke}
-          fill="none"
-          className="text-muted opacity-20"
-        />
-        <circle
-          cx={dimension / 2}
-          cy={dimension / 2}
-          r={radius}
-          stroke="currentColor"
-          strokeWidth={actualStroke}
-          fill="none"
-          strokeDasharray={circumference}
-          strokeDashoffset={offset}
-          strokeLinecap="round"
-          className="text-primary transition-all duration-300"
-        />
-      </svg>
-      {showLabel && (
-        <span className={cn('absolute font-semibold', fontSize)}>
-          {Math.round(percentage)}%
-        </span>
-      )}
-    </div>
-  )
-}
--- a/src/components/atoms/Code.tsx
+++ b/src/components/atoms/Code.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/ColorSwatch.tsx
+++ b/src/components/atoms/ColorSwatch.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/CommandPalette.tsx
+++ b/src/components/atoms/CommandPalette.tsx
@@ -1,62 +0,0 @@
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command'
-import { ReactNode } from 'react'
-
-interface CommandOption {
-  value: string
-  label: string
-  icon?: ReactNode
-  onSelect?: () => void
-}
-
-interface CommandPaletteProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  placeholder?: string
-  emptyMessage?: string
-  groups: {
-    heading?: string
-    items: CommandOption[]
-  }[]
-}
-
-export function CommandPalette({
-  open,
-  onOpenChange,
-  placeholder = 'Type a command or search...',
-  emptyMessage = 'No results found.',
-  groups,
-}: CommandPaletteProps) {
-  return (
-    <CommandDialog open={open} onOpenChange={onOpenChange}>
-      <CommandInput placeholder={placeholder} />
-      <CommandList>
-        <CommandEmpty>{emptyMessage}</CommandEmpty>
-        {groups.map((group, groupIndex) => (
-          <CommandGroup key={groupIndex} heading={group.heading}>
-            {group.items.map((item) => (
-              <CommandItem
-                key={item.value}
-                value={item.value}
-                onSelect={() => {
-                  item.onSelect?.()
-                  onOpenChange(false)
-                }}
-              >
-                {item.icon && <span className="mr-2">{item.icon}</span>}
-                <span>{item.label}</span>
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        ))}
-      </CommandList>
-    </CommandDialog>
-  )
-}
--- a/src/components/atoms/CompletionCard.tsx
+++ b/src/components/atoms/CompletionCard.tsx
@@ -1,38 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { Progress } from '@/components/ui/progress'
-import { CheckCircle } from '@phosphor-icons/react'
-
-interface CompletionCardProps {
-  completionScore: number
-  completionMessage: string
-  isReadyToExport: boolean
-}
-
-export function CompletionCard({ 
-  completionScore, 
-  completionMessage, 
-  isReadyToExport 
-}: CompletionCardProps) {
-  return (
-    <Card className="bg-gradient-to-br from-primary/10 to-accent/10 border-primary/20">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <CheckCircle size={24} weight="duotone" className="text-primary" />
-          Project Completeness
-        </CardTitle>
-        <CardDescription>Overall progress of your application</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex items-center justify-between">
-          <span className="text-4xl font-bold">{completionScore}%</span>
-          <Badge variant={isReadyToExport ? 'default' : 'secondary'} className="text-sm">
-            {isReadyToExport ? 'Ready to Export' : 'In Progress'}
-          </Badge>
-        </div>
-        <Progress value={completionScore} className="h-3" />
-        <p className="text-sm text-muted-foreground">{completionMessage}</p>
-      </CardContent>
-    </Card>
-  )
-}
--- a/src/components/atoms/ComponentPaletteItem.tsx
+++ b/src/components/atoms/ComponentPaletteItem.tsx
@@ -1,31 +0,0 @@
-import { ComponentDefinition } from '@/lib/component-definition-types'
-import { Card } from '@/components/ui/card'
-import * as Icons from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface ComponentPaletteItemProps {
-  component: ComponentDefinition
-  onDragStart: (component: ComponentDefinition, e: React.DragEvent) => void
-  className?: string
-}
-
-export function ComponentPaletteItem({ component, onDragStart, className }: ComponentPaletteItemProps) {
-  const IconComponent = (Icons as any)[component.icon] || Icons.Cube
-  
-  return (
-    <Card
-      draggable
-      onDragStart={(e) => onDragStart(component, e)}
-      className={cn(
-        'p-3 cursor-move hover:bg-accent/50 hover:border-accent transition-all',
-        'flex flex-col items-center gap-2 text-center',
-        'hover:scale-105 active:scale-95',
-        className
-      )}
-    >
-      <IconComponent className="w-6 h-6 text-primary" weight="duotone" />
-      <span className="text-xs font-medium text-foreground">{component.label}</span>
-      <span className="text-[10px] text-muted-foreground">{component.type}</span>
-    </Card>
-  )
-}
--- a/src/components/atoms/ComponentTreeNode.tsx
+++ b/src/components/atoms/ComponentTreeNode.tsx
@@ -1,101 +0,0 @@
-import { UIComponent } from '@/types/json-ui'
-import { getComponentDef } from '@/lib/component-definition-utils'
-import { cn } from '@/lib/utils'
-import * as Icons from '@phosphor-icons/react'
-
-interface ComponentTreeNodeProps {
-  component: UIComponent
-  isSelected: boolean
-  isHovered: boolean
-  isDraggedOver: boolean
-  dropPosition: 'before' | 'after' | 'inside' | null
-  onSelect: () => void
-  onHover: () => void
-  onHoverEnd: () => void
-  onDragStart: (e: React.DragEvent) => void
-  onDragOver: (e: React.DragEvent) => void
-  onDragLeave: (e: React.DragEvent) => void
-  onDrop: (e: React.DragEvent) => void
-  depth?: number
-  hasChildren?: boolean
-  isExpanded?: boolean
-  onToggleExpand?: () => void
-}
-
-export function ComponentTreeNode({
-  component,
-  isSelected,
-  isHovered,
-  isDraggedOver,
-  dropPosition,
-  onSelect,
-  onHover,
-  onHoverEnd,
-  onDragStart,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  depth = 0,
-  hasChildren = false,
-  isExpanded = false,
-  onToggleExpand,
-}: ComponentTreeNodeProps) {
-  const def = getComponentDef(component.type)
-  const IconComponent = def ? (Icons as any)[def.icon] || Icons.Cube : Icons.Cube
-  
-  return (
-    <div className="relative">
-      {isDraggedOver && dropPosition === 'before' && (
-        <div className="absolute -top-0.5 left-0 right-0 h-0.5 bg-accent" />
-      )}
-      
-      <div
-        draggable
-        onDragStart={onDragStart}
-        onDragOver={onDragOver}
-        onDragLeave={onDragLeave}
-        onDrop={onDrop}
-        onClick={(e) => {
-          e.stopPropagation()
-          onSelect()
-        }}
-        onMouseEnter={onHover}
-        onMouseLeave={onHoverEnd}
-        style={{ paddingLeft: `${depth * 16}px` }}
-        className={cn(
-          'flex items-center gap-2 px-3 py-2 text-sm cursor-pointer',
-          'hover:bg-muted/50 transition-colors',
-          'border-l-2 border-transparent',
-          isSelected && 'bg-accent/20 border-l-accent',
-          isHovered && !isSelected && 'bg-muted/30',
-          isDraggedOver && dropPosition === 'inside' && 'bg-primary/10'
-        )}
-      >
-        {hasChildren ? (
-          <button
-            onClick={(e) => {
-              e.stopPropagation()
-              onToggleExpand?.()
-            }}
-            className="hover:text-accent"
-          >
-            {isExpanded ? (
-              <Icons.CaretDown className="w-3 h-3 text-muted-foreground" />
-            ) : (
-              <Icons.CaretRight className="w-3 h-3 text-muted-foreground" />
-            )}
-          </button>
-        ) : (
-          <div className="w-3" />
-        )}
-        <IconComponent className="w-4 h-4 text-primary" weight="duotone" />
-        <span className="flex-1 text-foreground truncate">{def?.label || component.type}</span>
-        <span className="text-xs text-muted-foreground font-mono">{component.id}</span>
-      </div>
-      
-      {isDraggedOver && dropPosition === 'after' && (
-        <div className="absolute -bottom-0.5 left-0 right-0 h-0.5 bg-accent" />
-      )}
-    </div>
-  )
-}
--- a/src/components/atoms/ConfirmButton.tsx
+++ b/src/components/atoms/ConfirmButton.tsx
@@ -1,34 +0,0 @@
-import { Button, ButtonProps } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-
-interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
-  onConfirm: () => void | Promise<void>
-  confirmText?: string
-  isLoading?: boolean
-}
-
-export function ConfirmButton({
-  onConfirm,
-  confirmText = 'Are you sure?',
-  isLoading,
-  children,
-  className,
-  ...props
-}: ConfirmButtonProps) {
-  const handleClick = async () => {
-    if (window.confirm(confirmText)) {
-      await onConfirm()
-    }
-  }
-
-  return (
-    <Button
-      onClick={handleClick}
-      disabled={isLoading}
-      className={cn(className)}
-      {...props}
-    >
-      {isLoading ? 'Loading...' : children}
-    </Button>
-  )
-}
--- a/src/components/atoms/Container.tsx
+++ b/src/components/atoms/Container.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/ContextMenu.tsx
+++ b/src/components/atoms/ContextMenu.tsx
@@ -1,73 +0,0 @@
-import {
-  ContextMenu as ShadcnContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-  ContextMenuSeparator,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-} from '@/components/ui/context-menu'
-import { ReactNode } from 'react'
-
-export interface ContextMenuItemType {
-  label: string
-  icon?: ReactNode
-  shortcut?: string
-  onSelect?: () => void
-  disabled?: boolean
-  separator?: boolean
-  submenu?: ContextMenuItemType[]
-}
-
-interface ContextMenuProps {
-  trigger: ReactNode
-  items: ContextMenuItemType[]
-}
-
-export function ContextMenu({ trigger, items }: ContextMenuProps) {
-  const renderItems = (menuItems: ContextMenuItemType[]) => {
-    return menuItems.map((item, index) => {
-      if (item.separator) {
-        return <ContextMenuSeparator key={`separator-${index}`} />
-      }
-
-      if (item.submenu && item.submenu.length > 0) {
-        return (
-          <ContextMenuSub key={index}>
-            <ContextMenuSubTrigger>
-              {item.icon && <span className="mr-2">{item.icon}</span>}
-              {item.label}
-            </ContextMenuSubTrigger>
-            <ContextMenuSubContent>
-              {renderItems(item.submenu)}
-            </ContextMenuSubContent>
-          </ContextMenuSub>
-        )
-      }
-
-      return (
-        <ContextMenuItem
-          key={index}
-          onSelect={item.onSelect}
-          disabled={item.disabled}
-        >
-          {item.icon && <span className="mr-2">{item.icon}</span>}
-          <span className="flex-1">{item.label}</span>
-          {item.shortcut && (
-            <span className="ml-auto text-xs text-muted-foreground">
-              {item.shortcut}
-            </span>
-          )}
-        </ContextMenuItem>
-      )
-    })
-  }
-
-  return (
-    <ShadcnContextMenu>
-      <ContextMenuTrigger asChild>{trigger}</ContextMenuTrigger>
-      <ContextMenuContent>{renderItems(items)}</ContextMenuContent>
-    </ShadcnContextMenu>
-  )
-}
--- a/src/components/atoms/CopyButton.tsx
+++ b/src/components/atoms/CopyButton.tsx
@@ -1,56 +0,0 @@
-import { Copy, Check } from '@phosphor-icons/react'
-import { useState } from 'react'
-import { cn } from '@/lib/utils'
-
-interface CopyButtonProps {
-  text: string
-  size?: 'sm' | 'md' | 'lg'
-  className?: string
-}
-
-export function CopyButton({ text, size = 'md', className }: CopyButtonProps) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(text)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch (error) {
-      console.error('Failed to copy:', error)
-    }
-  }
-
-  const sizeStyles = {
-    sm: 'p-1',
-    md: 'p-2',
-    lg: 'p-3',
-  }
-
-  const iconSize = {
-    sm: 12,
-    md: 16,
-    lg: 20,
-  }
-
-  return (
-    <button
-      onClick={handleCopy}
-      className={cn(
-        'rounded-md transition-colors',
-        copied 
-          ? 'bg-accent text-accent-foreground' 
-          : 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-        sizeStyles[size],
-        className
-      )}
-      aria-label={copied ? 'Copied' : 'Copy to clipboard'}
-    >
-      {copied ? (
-        <Check size={iconSize[size]} weight="bold" />
-      ) : (
-        <Copy size={iconSize[size]} />
-      )}
-    </button>
-  )
-}
--- a/src/components/atoms/CountBadge.tsx
+++ b/src/components/atoms/CountBadge.tsx
@@ -1,21 +0,0 @@
-import { Badge } from '@/components/ui/badge'
-import { cn } from '@/lib/utils'
-
-interface CountBadgeProps {
-  count: number
-  max?: number
-  variant?: 'default' | 'secondary' | 'destructive' | 'outline'
-  className?: string
-}
-
-export function CountBadge({ count, max, variant = 'default', className }: CountBadgeProps) {
-  const displayValue = max && count > max ? `${max}+` : count.toString()
-
-  if (count === 0) return null
-
-  return (
-    <Badge variant={variant} className={cn('ml-2 px-2 py-0.5 text-xs', className)}>
-      {displayValue}
-    </Badge>
-  )
-}
--- a/src/components/atoms/DataList.tsx
+++ b/src/components/atoms/DataList.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/DataSourceBadge.tsx
+++ b/src/components/atoms/DataSourceBadge.tsx
@@ -1,33 +0,0 @@
-import { Badge } from '@/components/ui/badge'
-import { DataSourceType } from '@/types/json-ui'
-import { Database, File } from '@phosphor-icons/react'
-
-interface DataSourceBadgeProps {
-  type: DataSourceType
-  className?: string
-}
-
-const dataSourceConfig = {
-  kv: {
-    icon: Database,
-    label: 'KV Storage',
-    className: 'bg-accent/20 text-accent border-accent/30'
-  },
-  static: {
-    icon: File,
-    label: 'Static',
-    className: 'bg-muted text-muted-foreground border-border'
-  }
-}
-
-export function DataSourceBadge({ type, className = '' }: DataSourceBadgeProps) {
-  const config = dataSourceConfig[type]
-  const Icon = config.icon
-  
-  return (
-    <Badge className={`flex items-center gap-1 ${config.className} ${className}`} variant="outline">
-      <Icon className="w-3 h-3" weight="bold" />
-      <span>{config.label}</span>
-    </Badge>
-  )
-}
--- a/src/components/atoms/DataTable.tsx
+++ b/src/components/atoms/DataTable.tsx
@@ -1,77 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-export interface Column<T> {
-  key: string
-  header: string | ReactNode
-  cell?: (item: T) => ReactNode
-  sortable?: boolean
-  width?: string
-}
-
-interface DataTableProps<T> {
-  data: T[]
-  columns: Column<T>[]
-  onRowClick?: (item: T) => void
-  emptyMessage?: string
-  className?: string
-}
-
-export function DataTable<T extends Record<string, any>>({
-  data,
-  columns,
-  onRowClick,
-  emptyMessage = 'No data available',
-  className,
-}: DataTableProps<T>) {
-  return (
-    <div className={cn('rounded-md border', className)}>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            {columns.map((column) => (
-              <TableHead
-                key={column.key}
-                style={{ width: column.width }}
-                className={cn(column.sortable && 'cursor-pointer select-none')}
-              >
-                {column.header}
-              </TableHead>
-            ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {data.length === 0 ? (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="text-center py-8 text-muted-foreground">
-                {emptyMessage}
-              </TableCell>
-            </TableRow>
-          ) : (
-            data.map((item, rowIndex) => (
-              <TableRow
-                key={rowIndex}
-                onClick={() => onRowClick?.(item)}
-                className={cn(onRowClick && 'cursor-pointer')}
-              >
-                {columns.map((column) => (
-                  <TableCell key={column.key}>
-                    {column.cell ? column.cell(item) : item[column.key]}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          )}
-        </TableBody>
-      </Table>
-    </div>
-  )
-}
--- a/src/components/atoms/DatePicker.tsx
+++ b/src/components/atoms/DatePicker.tsx
@@ -1,48 +0,0 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
-import { CalendarBlank } from '@phosphor-icons/react'
-import { format } from 'date-fns'
-import { cn } from '@/lib/utils'
-
-interface DatePickerProps {
-  value?: Date
-  onChange: (date: Date | undefined) => void
-  placeholder?: string
-  disabled?: boolean
-  className?: string
-}
-
-export function DatePicker({
-  value,
-  onChange,
-  placeholder = 'Pick a date',
-  disabled,
-  className,
-}: DatePickerProps) {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          disabled={disabled}
-          className={cn(
-            'w-full justify-start text-left font-normal',
-            !value && 'text-muted-foreground',
-            className
-          )}
-        >
-          <CalendarBlank className="mr-2" size={16} />
-          {value ? format(value, 'PPP') : <span>{placeholder}</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <Calendar
-          mode="single"
-          selected={value}
-          onSelect={onChange}
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
--- a/src/components/atoms/DetailRow.tsx
+++ b/src/components/atoms/DetailRow.tsx
@@ -1,20 +0,0 @@
-import { Card, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-
-interface DetailRowProps {
-  icon: React.ReactNode
-  label: string
-  value: number
-}
-
-export function DetailRow({ icon, label, value }: DetailRowProps) {
-  return (
-    <div className="flex items-center justify-between py-2 border-b border-border last:border-0">
-      <div className="flex items-center gap-2">
-        <span className="text-muted-foreground">{icon}</span>
-        <span className="text-sm font-medium">{label}</span>
-      </div>
-      <Badge variant="secondary">{value}</Badge>
-    </div>
-  )
-}
--- a/src/components/atoms/Divider.tsx
+++ b/src/components/atoms/Divider.tsx
@@ -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
-      )}
-    />
-  )
-}
--- a/src/components/atoms/Dot.tsx
+++ b/src/components/atoms/Dot.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Drawer.tsx
+++ b/src/components/atoms/Drawer.tsx
@@ -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>
-    </>
-  )
-}
--- a/src/components/atoms/EmptyMessage.tsx
+++ b/src/components/atoms/EmptyMessage.tsx
@@ -1,39 +0,0 @@
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-
-interface EmptyMessageProps {
-  icon?: React.ReactNode
-  title: string
-  description?: string
-  action?: {
-    label: string
-    onClick: () => void
-  }
-  className?: string
-}
-
-export function EmptyMessage({ icon, title, description, action, className }: EmptyMessageProps) {
-  return (
-    <div className={cn(
-      'flex flex-col items-center justify-center text-center p-8 rounded-lg border border-dashed bg-muted/20',
-      className
-    )}>
-      {icon && (
-        <div className="mb-4 text-muted-foreground/50">
-          {icon}
-        </div>
-      )}
-      <h3 className="text-lg font-semibold mb-2">{title}</h3>
-      {description && (
-        <p className="text-sm text-muted-foreground mb-4 max-w-sm">
-          {description}
-        </p>
-      )}
-      {action && (
-        <Button onClick={action.onClick} size="sm">
-          {action.label}
-        </Button>
-      )}
-    </div>
-  )
-}
--- a/src/components/atoms/EmptyState.tsx
+++ b/src/components/atoms/EmptyState.tsx
@@ -1,51 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-
-export interface EmptyStateProps {
-  icon?: ReactNode
-  title: string
-  description?: string
-  action?: {
-    label: string
-    onClick: () => void
-  }
-  children?: ReactNode
-  className?: string
-}
-
-export function EmptyState({
-  icon,
-  title,
-  description,
-  action,
-  children,
-  className,
-}: EmptyStateProps) {
-  return (
-    <div className={cn(
-      'flex flex-col items-center justify-center gap-4 py-12 px-6 text-center',
-      className
-    )}>
-      {icon && (
-        <div className="text-muted-foreground text-4xl opacity-50">
-          {icon}
-        </div>
-      )}
-      <div className="space-y-2">
-        <h3 className="text-lg font-semibold">{title}</h3>
-        {description && (
-          <p className="text-sm text-muted-foreground max-w-md">
-            {description}
-          </p>
-        )}
-      </div>
-      {action && (
-        <Button onClick={action.onClick} className="mt-2">
-          {action.label}
-        </Button>
-      )}
-      {children}
-    </div>
-  )
-}
--- a/src/components/atoms/EmptyStateIcon.tsx
+++ b/src/components/atoms/EmptyStateIcon.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/ErrorBadge.tsx
+++ b/src/components/atoms/ErrorBadge.tsx
@@ -1,25 +0,0 @@
-import { Badge } from '@/components/ui/badge'
-
-interface ErrorBadgeProps {
-  count: number
-  variant?: 'default' | 'destructive'
-  size?: 'sm' | 'md'
-}
-
-export function ErrorBadge({ count, variant = 'destructive', size = 'md' }: ErrorBadgeProps) {
-  if (count === 0) return null
-
-  const sizeClasses = {
-    sm: 'h-5 w-5 text-[10px]',
-    md: 'h-6 w-6 text-xs',
-  }
-
-  return (
-    <Badge
-      variant={variant}
-      className={`${sizeClasses[size]} p-0 flex items-center justify-center absolute -top-1 -right-1`}
-    >
-      {count}
-    </Badge>
-  )
-}
--- a/src/components/atoms/FileIcon.tsx
+++ b/src/components/atoms/FileIcon.tsx
@@ -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} />
-}
--- a/src/components/atoms/FileUpload.tsx
+++ b/src/components/atoms/FileUpload.tsx
@@ -1,131 +0,0 @@
-import { useState } from 'react'
-import { UploadSimple, X } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface FileUploadProps {
-  accept?: string
-  multiple?: boolean
-  maxSize?: number
-  onFilesSelected: (files: File[]) => void
-  disabled?: boolean
-  className?: string
-}
-
-export function FileUpload({ 
-  accept, 
-  multiple = false, 
-  maxSize, 
-  onFilesSelected, 
-  disabled = false,
-  className 
-}: FileUploadProps) {
-  const [isDragging, setIsDragging] = useState(false)
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([])
-
-  const handleFiles = (files: FileList | null) => {
-    if (!files) return
-
-    const fileArray = Array.from(files)
-    const validFiles = fileArray.filter(file => {
-      if (maxSize && file.size > maxSize) {
-        return false
-      }
-      return true
-    })
-
-    setSelectedFiles(validFiles)
-    onFilesSelected(validFiles)
-  }
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault()
-    setIsDragging(false)
-    if (!disabled) {
-      handleFiles(e.dataTransfer.files)
-    }
-  }
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault()
-    if (!disabled) {
-      setIsDragging(true)
-    }
-  }
-
-  const handleDragLeave = () => {
-    setIsDragging(false)
-  }
-
-  const removeFile = (index: number) => {
-    const newFiles = selectedFiles.filter((_, i) => i !== index)
-    setSelectedFiles(newFiles)
-    onFilesSelected(newFiles)
-  }
-
-  return (
-    <div className={cn('w-full', className)}>
-      <label
-        onDrop={handleDrop}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        className={cn(
-          'flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer transition-colors',
-          isDragging && 'border-primary bg-primary/5',
-          !isDragging && 'border-border bg-muted/30 hover:bg-muted/50',
-          disabled && 'opacity-50 cursor-not-allowed'
-        )}
-      >
-        <div className="flex flex-col items-center justify-center gap-2">
-          <UploadSimple className="w-8 h-8 text-muted-foreground" />
-          <p className="text-sm text-muted-foreground">
-            <span className="font-medium">Click to upload</span> or drag and drop
-          </p>
-          {accept && (
-            <p className="text-xs text-muted-foreground">
-              {accept.split(',').join(', ')}
-            </p>
-          )}
-          {maxSize && (
-            <p className="text-xs text-muted-foreground">
-              Max size: {(maxSize / 1024 / 1024).toFixed(1)}MB
-            </p>
-          )}
-        </div>
-        <input
-          type="file"
-          accept={accept}
-          multiple={multiple}
-          onChange={(e) => handleFiles(e.target.files)}
-          disabled={disabled}
-          className="hidden"
-        />
-      </label>
-
-      {selectedFiles.length > 0 && (
-        <div className="mt-4 space-y-2">
-          {selectedFiles.map((file, index) => (
-            <div
-              key={index}
-              className="flex items-center justify-between p-3 bg-muted rounded-lg"
-            >
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium truncate">{file.name}</p>
-                <p className="text-xs text-muted-foreground">
-                  {(file.size / 1024).toFixed(1)} KB
-                </p>
-              </div>
-              <button
-                type="button"
-                onClick={() => removeFile(index)}
-                className="ml-2 p-1 hover:bg-background rounded transition-colors"
-                aria-label="Remove file"
-              >
-                <X className="w-4 h-4" />
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
--- a/src/components/atoms/FilterInput.tsx
+++ b/src/components/atoms/FilterInput.tsx
@@ -1,49 +0,0 @@
-import { Input } from '@/components/ui/input'
-import { MagnifyingGlass, X } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-import { useState } from 'react'
-
-interface FilterInputProps {
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
-  className?: string
-}
-
-export function FilterInput({
-  value,
-  onChange,
-  placeholder = 'Filter...',
-  className,
-}: FilterInputProps) {
-  const [isFocused, setIsFocused] = useState(false)
-
-  return (
-    <div className={cn('relative', className)}>
-      <MagnifyingGlass
-        className={cn(
-          'absolute left-3 top-1/2 -translate-y-1/2 transition-colors',
-          isFocused ? 'text-primary' : 'text-muted-foreground'
-        )}
-        size={16}
-      />
-      <Input
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
-        className="pl-9 pr-9"
-      />
-      {value && (
-        <button
-          onClick={() => onChange('')}
-          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
-          type="button"
-        >
-          <X size={16} />
-        </button>
-      )}
-    </div>
-  )
-}
--- a/src/components/atoms/Flex.tsx
+++ b/src/components/atoms/Flex.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Form.tsx
+++ b/src/components/atoms/Form.tsx
@@ -1,30 +0,0 @@
-import {
-  Form as ShadcnForm,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
-import { UseFormReturn } from 'react-hook-form'
-import { ReactNode } from 'react'
-
-interface FormProps {
-  form: UseFormReturn<any>
-  onSubmit: (values: any) => void | Promise<void>
-  children: ReactNode
-  className?: string
-}
-
-export function Form({ form, onSubmit, children, className }: FormProps) {
-  return (
-    <ShadcnForm {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className={className}>
-        {children}
-      </form>
-    </ShadcnForm>
-  )
-}
-
-export { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage }
--- a/src/components/atoms/GlowCard.tsx
+++ b/src/components/atoms/GlowCard.tsx
@@ -1,62 +0,0 @@
-import { Card } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-interface GlowCardProps {
-  children: ReactNode
-  glowColor?: 'primary' | 'accent' | 'success' | 'warning' | 'error'
-  intensity?: 'low' | 'medium' | 'high'
-  className?: string
-  onClick?: () => void
-}
-
-export function GlowCard({
-  children,
-  glowColor = 'primary',
-  intensity = 'medium',
-  className,
-  onClick,
-}: GlowCardProps) {
-  const glowClasses = {
-    primary: {
-      low: 'shadow-primary/10',
-      medium: 'shadow-primary/20 hover:shadow-primary/30',
-      high: 'shadow-primary/30 hover:shadow-primary/50',
-    },
-    accent: {
-      low: 'shadow-accent/10',
-      medium: 'shadow-accent/20 hover:shadow-accent/30',
-      high: 'shadow-accent/30 hover:shadow-accent/50',
-    },
-    success: {
-      low: 'shadow-green-500/10',
-      medium: 'shadow-green-500/20 hover:shadow-green-500/30',
-      high: 'shadow-green-500/30 hover:shadow-green-500/50',
-    },
-    warning: {
-      low: 'shadow-yellow-500/10',
-      medium: 'shadow-yellow-500/20 hover:shadow-yellow-500/30',
-      high: 'shadow-yellow-500/30 hover:shadow-yellow-500/50',
-    },
-    error: {
-      low: 'shadow-red-500/10',
-      medium: 'shadow-red-500/20 hover:shadow-red-500/30',
-      high: 'shadow-red-500/30 hover:shadow-red-500/50',
-    },
-  }
-
-  return (
-    <Card
-      onClick={onClick}
-      className={cn(
-        'transition-all duration-300',
-        'shadow-lg',
-        glowClasses[glowColor][intensity],
-        onClick && 'cursor-pointer hover:scale-[1.02]',
-        className
-      )}
-    >
-      {children}
-    </Card>
-  )
-}
--- a/src/components/atoms/Grid.tsx
+++ b/src/components/atoms/Grid.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Heading.tsx
+++ b/src/components/atoms/Heading.tsx
@@ -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
-  )
-}
--- a/src/components/atoms/HelperText.tsx
+++ b/src/components/atoms/HelperText.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/HoverCard.tsx
+++ b/src/components/atoms/HoverCard.tsx
@@ -1,32 +0,0 @@
-import {
-  HoverCard as ShadcnHoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '@/components/ui/hover-card'
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface HoverCardProps {
-  trigger: ReactNode
-  children: ReactNode
-  side?: 'top' | 'right' | 'bottom' | 'left'
-  align?: 'start' | 'center' | 'end'
-  className?: string
-}
-
-export function HoverCard({
-  trigger,
-  children,
-  side = 'bottom',
-  align = 'center',
-  className,
-}: HoverCardProps) {
-  return (
-    <ShadcnHoverCard>
-      <HoverCardTrigger asChild>{trigger}</HoverCardTrigger>
-      <HoverCardContent side={side} align={align} className={cn(className)}>
-        {children}
-      </HoverCardContent>
-    </ShadcnHoverCard>
-  )
-}
--- a/src/components/atoms/IconButton.tsx
+++ b/src/components/atoms/IconButton.tsx
@@ -1,32 +0,0 @@
-import { Button } from '@/components/ui/button'
-import { forwardRef } from 'react'
-
-interface IconButtonProps {
-  icon: React.ReactNode
-  onClick?: () => void
-  disabled?: boolean
-  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'
-  size?: 'default' | 'sm' | 'lg' | 'icon'
-  title?: string
-  className?: string
-}
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, onClick, disabled, variant = 'ghost', size = 'icon', title, className }, ref) => {
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        onClick={onClick}
-        disabled={disabled}
-        title={title}
-        className={className}
-      >
-        {icon}
-      </Button>
-    )
-  }
-)
-
-IconButton.displayName = 'IconButton'
--- a/src/components/atoms/IconText.tsx
+++ b/src/components/atoms/IconText.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/IconWrapper.tsx
+++ b/src/components/atoms/IconWrapper.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Image.tsx
+++ b/src/components/atoms/Image.tsx
@@ -1,67 +0,0 @@
-import { useState } from 'react'
-import { cn } from '@/lib/utils'
-
-interface ImageProps {
-  src: string
-  alt: string
-  width?: number | string
-  height?: number | string
-  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
-  fallback?: string
-  className?: string
-  onLoad?: () => void
-  onError?: () => void
-}
-
-export function Image({ 
-  src, 
-  alt, 
-  width, 
-  height, 
-  fit = 'cover',
-  fallback,
-  className,
-  onLoad,
-  onError 
-}: ImageProps) {
-  const [error, setError] = useState(false)
-  const [loading, setLoading] = useState(true)
-
-  const handleLoad = () => {
-    setLoading(false)
-    onLoad?.()
-  }
-
-  const handleError = () => {
-    setError(true)
-    setLoading(false)
-    onError?.()
-  }
-
-  const imgSrc = error && fallback ? fallback : src
-
-  return (
-    <div
-      className={cn('relative overflow-hidden', className)}
-      style={{
-        width: typeof width === 'number' ? `${width}px` : width,
-        height: typeof height === 'number' ? `${height}px` : height,
-      }}
-    >
-      {loading && (
-        <div className="absolute inset-0 bg-muted animate-pulse" />
-      )}
-      <img
-        src={imgSrc}
-        alt={alt}
-        onLoad={handleLoad}
-        onError={handleError}
-        className={cn(
-          'w-full h-full transition-opacity',
-          loading ? 'opacity-0' : 'opacity-100',
-          `object-${fit}`
-        )}
-      />
-    </div>
-  )
-}
--- a/src/components/atoms/InfoBox.tsx
+++ b/src/components/atoms/InfoBox.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/InfoPanel.tsx
+++ b/src/components/atoms/InfoPanel.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Input.tsx
+++ b/src/components/atoms/Input.tsx
@@ -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'
--- a/src/components/atoms/Kbd.tsx
+++ b/src/components/atoms/Kbd.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/KeyValue.tsx
+++ b/src/components/atoms/KeyValue.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Label.tsx
+++ b/src/components/atoms/Label.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Link.tsx
+++ b/src/components/atoms/Link.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/List.tsx
+++ b/src/components/atoms/List.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/ListItem.tsx
+++ b/src/components/atoms/ListItem.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/LiveIndicator.tsx
+++ b/src/components/atoms/LiveIndicator.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/LoadingSpinner.tsx
+++ b/src/components/atoms/LoadingSpinner.tsx
@@ -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"
-    />
-  )
-}
--- a/src/components/atoms/LoadingState.tsx
+++ b/src/components/atoms/LoadingState.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Menu.tsx
+++ b/src/components/atoms/Menu.tsx
@@ -1,101 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import { CaretRight, Check } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface MenuItem {
-  id: string
-  label: string
-  icon?: React.ReactNode
-  disabled?: boolean
-  selected?: boolean
-  divider?: boolean
-  danger?: boolean
-  shortcut?: string
-  onClick?: () => void
-}
-
-interface MenuProps {
-  trigger: React.ReactNode
-  items: MenuItem[]
-  className?: string
-}
-
-export function Menu({ trigger, items, className }: MenuProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const menuRef = useRef<HTMLDivElement>(null)
-  const triggerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        menuRef.current &&
-        !menuRef.current.contains(event.target as Node) &&
-        triggerRef.current &&
-        !triggerRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false)
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
-
-  const handleItemClick = (item: MenuItem) => {
-    if (!item.disabled && item.onClick) {
-      item.onClick()
-      setIsOpen(false)
-    }
-  }
-
-  return (
-    <div className="relative inline-block">
-      <div ref={triggerRef} onClick={() => setIsOpen(!isOpen)}>
-        {trigger}
-      </div>
-      {isOpen && (
-        <div
-          ref={menuRef}
-          className={cn(
-            'absolute z-50 mt-2 w-56 bg-popover text-popover-foreground border border-border rounded-lg shadow-lg overflow-hidden',
-            'animate-in fade-in-0 zoom-in-95',
-            className
-          )}
-        >
-          <div className="py-1">
-            {items.map((item, index) => {
-              if (item.divider) {
-                return <div key={index} className="my-1 h-px bg-border" />
-              }
-
-              return (
-                <button
-                  key={item.id}
-                  onClick={() => handleItemClick(item)}
-                  disabled={item.disabled}
-                  className={cn(
-                    'w-full flex items-center justify-between px-3 py-2 text-sm transition-colors',
-                    'hover:bg-accent hover:text-accent-foreground',
-                    item.disabled && 'opacity-50 cursor-not-allowed',
-                    item.danger && 'text-destructive hover:bg-destructive hover:text-destructive-foreground'
-                  )}
-                >
-                  <div className="flex items-center gap-2">
-                    {item.icon && <span className="w-4 h-4">{item.icon}</span>}
-                    <span>{item.label}</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    {item.shortcut && (
-                      <span className="text-xs text-muted-foreground">{item.shortcut}</span>
-                    )}
-                    {item.selected && <Check className="w-4 h-4" />}
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
--- a/src/components/atoms/MetricCard.tsx
+++ b/src/components/atoms/MetricCard.tsx
@@ -1,40 +0,0 @@
-import { Card, CardContent } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-interface MetricCardProps {
-  label: string
-  value: string | number
-  icon?: ReactNode
-  trend?: {
-    value: number
-    direction: 'up' | 'down'
-  }
-  className?: string
-}
-
-export function MetricCard({ label, value, icon, trend, className }: MetricCardProps) {
-  return (
-    <Card className={cn('bg-card/50 backdrop-blur', className)}>
-      <CardContent className="pt-6">
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex-1">
-            <div className="text-sm text-muted-foreground mb-1">{label}</div>
-            <div className="text-3xl font-bold">{value}</div>
-            {trend && (
-              <div
-                className={cn(
-                  'text-sm mt-2',
-                  trend.direction === 'up' ? 'text-green-500' : 'text-red-500'
-                )}
-              >
-                {trend.direction === 'up' ? '↑' : '↓'} {Math.abs(trend.value)}%
-              </div>
-            )}
-          </div>
-          {icon && <div className="text-muted-foreground">{icon}</div>}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
--- a/src/components/atoms/MetricDisplay.tsx
+++ b/src/components/atoms/MetricDisplay.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Modal.tsx
+++ b/src/components/atoms/Modal.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Notification.tsx
+++ b/src/components/atoms/Notification.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/NumberInput.tsx
+++ b/src/components/atoms/NumberInput.tsx
@@ -1,89 +0,0 @@
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Minus, Plus } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface NumberInputProps {
-  value: number
-  onChange: (value: number) => void
-  min?: number
-  max?: number
-  step?: number
-  label?: string
-  disabled?: boolean
-  className?: string
-}
-
-export function NumberInput({
-  value,
-  onChange,
-  min,
-  max,
-  step = 1,
-  label,
-  disabled,
-  className,
-}: NumberInputProps) {
-  const handleIncrement = () => {
-    const newValue = value + step
-    if (max === undefined || newValue <= max) {
-      onChange(newValue)
-    }
-  }
-
-  const handleDecrement = () => {
-    const newValue = value - step
-    if (min === undefined || newValue >= min) {
-      onChange(newValue)
-    }
-  }
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = parseFloat(e.target.value)
-    if (!isNaN(newValue)) {
-      if ((min === undefined || newValue >= min) && (max === undefined || newValue <= max)) {
-        onChange(newValue)
-      }
-    }
-  }
-
-  return (
-    <div className={cn('flex flex-col gap-2', className)}>
-      {label && (
-        <label className="text-sm font-medium text-foreground">{label}</label>
-      )}
-      <div className="flex items-center gap-2">
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          onClick={handleDecrement}
-          disabled={disabled || (min !== undefined && value <= min)}
-          className="h-9 w-9 shrink-0"
-        >
-          <Minus />
-        </Button>
-        <Input
-          type="number"
-          value={value}
-          onChange={handleInputChange}
-          min={min}
-          max={max}
-          step={step}
-          disabled={disabled}
-          className="text-center"
-        />
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          onClick={handleIncrement}
-          disabled={disabled || (max !== undefined && value >= max)}
-          className="h-9 w-9 shrink-0"
-        >
-          <Plus />
-        </Button>
-      </div>
-    </div>
-  )
-}
--- a/src/components/atoms/PageHeader.tsx
+++ b/src/components/atoms/PageHeader.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/PanelHeader.tsx
+++ b/src/components/atoms/PanelHeader.tsx
@@ -1,57 +0,0 @@
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-import { Separator } from '@/components/ui/separator'
-
-interface PanelHeaderProps {
-  title: string
-  subtitle?: string | ReactNode
-  icon?: ReactNode
-  actions?: ReactNode
-  className?: string
-  showSeparator?: boolean
-}
-
-export function PanelHeader({
-  title,
-  subtitle,
-  icon,
-  actions,
-  className,
-  showSeparator = true,
-}: PanelHeaderProps) {
-  return (
-    <div className={cn('space-y-3', className)}>
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex items-start gap-3 flex-1 min-w-0">
-          {icon && (
-            <div className="text-primary mt-0.5 shrink-0">
-              {icon}
-            </div>
-          )}
-          <div className="flex-1 min-w-0">
-            <h2 className="text-lg font-semibold text-foreground truncate">
-              {title}
-            </h2>
-            {subtitle && (
-              typeof subtitle === 'string' ? (
-                <p className="text-sm text-muted-foreground mt-1">
-                  {subtitle}
-                </p>
-              ) : (
-                <div className="mt-1">
-                  {subtitle}
-                </div>
-              )
-            )}
-          </div>
-        </div>
-        {actions && (
-          <div className="flex items-center gap-2 shrink-0">
-            {actions}
-          </div>
-        )}
-      </div>
-      {showSeparator && <Separator />}
-    </div>
-  )
-}
--- a/src/components/atoms/PasswordInput.tsx
+++ b/src/components/atoms/PasswordInput.tsx
@@ -1,51 +0,0 @@
-import { Eye, EyeSlash } from '@phosphor-icons/react'
-import { useState } from 'react'
-import { Input } from './Input'
-
-interface PasswordInputProps {
-  value: string
-  onChange: (value: string) => void
-  label?: string
-  error?: boolean
-  helperText?: string
-  placeholder?: string
-  disabled?: boolean
-  className?: string
-}
-
-export function PasswordInput({
-  value,
-  onChange,
-  label,
-  error,
-  helperText,
-  placeholder = 'Enter password',
-  disabled,
-  className,
-}: PasswordInputProps) {
-  const [showPassword, setShowPassword] = useState(false)
-
-  return (
-    <Input
-      type={showPassword ? 'text' : 'password'}
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      label={label}
-      error={error}
-      helperText={helperText}
-      placeholder={placeholder}
-      disabled={disabled}
-      className={className}
-      rightIcon={
-        <button
-          type="button"
-          onClick={() => setShowPassword(!showPassword)}
-          className="text-muted-foreground hover:text-foreground transition-colors"
-          aria-label={showPassword ? 'Hide password' : 'Show password'}
-        >
-          {showPassword ? <EyeSlash size={18} /> : <Eye size={18} />}
-        </button>
-      }
-    />
-  )
-}
--- a/src/components/atoms/Popover.tsx
+++ b/src/components/atoms/Popover.tsx
@@ -1,59 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import { cn } from '@/lib/utils'
-
-interface PopoverProps {
-  trigger: React.ReactNode
-  content: React.ReactNode
-  placement?: 'top' | 'bottom' | 'left' | 'right'
-  className?: string
-}
-
-export function Popover({ trigger, content, placement = 'bottom', className }: PopoverProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const popoverRef = useRef<HTMLDivElement>(null)
-  const triggerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        popoverRef.current &&
-        !popoverRef.current.contains(event.target as Node) &&
-        triggerRef.current &&
-        !triggerRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false)
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
-
-  const placementStyles = {
-    top: 'bottom-full mb-2 left-1/2 -translate-x-1/2',
-    bottom: 'top-full mt-2 left-1/2 -translate-x-1/2',
-    left: 'right-full mr-2 top-1/2 -translate-y-1/2',
-    right: 'left-full ml-2 top-1/2 -translate-y-1/2',
-  }
-
-  return (
-    <div className="relative inline-block">
-      <div ref={triggerRef} onClick={() => setIsOpen(!isOpen)}>
-        {trigger}
-      </div>
-      {isOpen && (
-        <div
-          ref={popoverRef}
-          className={cn(
-            'absolute z-50 w-64 p-4 bg-popover text-popover-foreground border border-border rounded-lg shadow-lg',
-            'animate-in fade-in-0 zoom-in-95',
-            placementStyles[placement],
-            className
-          )}
-        >
-          {content}
-        </div>
-      )}
-    </div>
-  )
-}
--- a/src/components/atoms/ProgressBar.tsx
+++ b/src/components/atoms/ProgressBar.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/PropertyEditorField.tsx
+++ b/src/components/atoms/PropertyEditorField.tsx
@@ -1,87 +0,0 @@
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Switch } from '@/components/ui/switch'
-import { Textarea } from '@/components/ui/textarea'
-
-interface PropertyEditorFieldProps {
-  label: string
-  name: string
-  value: any
-  type?: 'text' | 'number' | 'boolean' | 'select' | 'textarea'
-  options?: Array<{ label: string; value: string }>
-  onChange: (name: string, value: any) => void
-}
-
-export function PropertyEditorField({
-  label,
-  name,
-  value,
-  type = 'text',
-  options,
-  onChange,
-}: PropertyEditorFieldProps) {
-  const renderField = () => {
-    switch (type) {
-      case 'boolean':
-        return (
-          <Switch
-            checked={value || false}
-            onCheckedChange={(checked) => onChange(name, checked)}
-          />
-        )
-      
-      case 'select':
-        return (
-          <Select value={value || ''} onValueChange={(val) => onChange(name, val)}>
-            <SelectTrigger>
-              <SelectValue placeholder="Select..." />
-            </SelectTrigger>
-            <SelectContent>
-              {options?.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        )
-      
-      case 'number':
-        return (
-          <Input
-            type="number"
-            value={value || 0}
-            onChange={(e) => onChange(name, Number(e.target.value))}
-          />
-        )
-      
-      case 'textarea':
-        return (
-          <Textarea
-            value={value || ''}
-            onChange={(e) => onChange(name, e.target.value)}
-            rows={3}
-          />
-        )
-      
-      default:
-        return (
-          <Input
-            type="text"
-            value={value || ''}
-            onChange={(e) => onChange(name, e.target.value)}
-          />
-        )
-    }
-  }
-
-  return (
-    <div className="space-y-2">
-      <Label htmlFor={name} className="text-sm font-medium">
-        {label}
-      </Label>
-      {renderField()}
-    </div>
-  )
-}
--- a/src/components/atoms/Pulse.tsx
+++ b/src/components/atoms/Pulse.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/QuickActionButton.tsx
+++ b/src/components/atoms/QuickActionButton.tsx
@@ -1,61 +0,0 @@
-import { Card } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
-import { ReactNode } from 'react'
-
-interface QuickActionButtonProps {
-  icon: ReactNode
-  label: string
-  description?: string
-  onClick: () => void
-  variant?: 'default' | 'primary' | 'accent' | 'muted'
-  disabled?: boolean
-  className?: string
-}
-
-export function QuickActionButton({
-  icon,
-  label,
-  description,
-  onClick,
-  variant = 'default',
-  disabled,
-  className,
-}: QuickActionButtonProps) {
-  const variantClasses = {
-    default: 'hover:bg-muted/50 hover:border-border',
-    primary: 'hover:bg-primary/10 hover:border-primary/50',
-    accent: 'hover:bg-accent/10 hover:border-accent/50',
-    muted: 'bg-muted hover:bg-muted/70',
-  }
-
-  const iconColorClasses = {
-    default: 'text-foreground',
-    primary: 'text-primary',
-    accent: 'text-accent',
-    muted: 'text-muted-foreground',
-  }
-
-  return (
-    <Card
-      onClick={disabled ? undefined : onClick}
-      className={cn(
-        'p-6 cursor-pointer transition-all duration-200',
-        'flex flex-col items-center justify-center gap-3 text-center',
-        'hover:scale-105 active:scale-95',
-        variantClasses[variant],
-        disabled && 'opacity-50 cursor-not-allowed hover:scale-100',
-        className
-      )}
-    >
-      <div className={cn('text-4xl', iconColorClasses[variant])}>
-        {icon}
-      </div>
-      <div className="space-y-1">
-        <h3 className="font-semibold text-foreground">{label}</h3>
-        {description && (
-          <p className="text-sm text-muted-foreground">{description}</p>
-        )}
-      </div>
-    </Card>
-  )
-}
--- a/src/components/atoms/Radio.tsx
+++ b/src/components/atoms/Radio.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/RangeSlider.tsx
+++ b/src/components/atoms/RangeSlider.tsx
@@ -1,47 +0,0 @@
-import { Slider } from '@/components/ui/slider'
-import { cn } from '@/lib/utils'
-
-interface RangeSliderProps {
-  value: [number, number]
-  onChange: (value: [number, number]) => void
-  min?: number
-  max?: number
-  step?: number
-  label?: string
-  showValue?: boolean
-  className?: string
-}
-
-export function RangeSlider({
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  label,
-  showValue = true,
-  className,
-}: RangeSliderProps) {
-  return (
-    <div className={cn('space-y-2', className)}>
-      {(label || showValue) && (
-        <div className="flex items-center justify-between">
-          {label && <span className="text-sm font-medium">{label}</span>}
-          {showValue && (
-            <span className="text-sm text-muted-foreground">
-              {value[0]} - {value[1]}
-            </span>
-          )}
-        </div>
-      )}
-      <Slider
-        value={value}
-        onValueChange={onChange as any}
-        min={min}
-        max={max}
-        step={step}
-        minStepsBetweenThumbs={1}
-      />
-    </div>
-  )
-}
--- a/src/components/atoms/Rating.tsx
+++ b/src/components/atoms/Rating.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/ResponsiveGrid.tsx
+++ b/src/components/atoms/ResponsiveGrid.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/ScrollArea.tsx
+++ b/src/components/atoms/ScrollArea.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/SearchInput.tsx
+++ b/src/components/atoms/SearchInput.tsx
@@ -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>
-        )
-      }
-    />
-  )
-}
--- a/src/components/atoms/Section.tsx
+++ b/src/components/atoms/Section.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/SeedDataStatus.tsx
+++ b/src/components/atoms/SeedDataStatus.tsx
@@ -1,60 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { Database, Check, X } from '@phosphor-icons/react'
-import seedDataConfig from '@/config/seed-data.json'
-
-export function SeedDataStatus() {
-  const dataKeys = Object.keys(seedDataConfig)
-  
-  const getDataCount = (key: string): number => {
-    const data = seedDataConfig[key as keyof typeof seedDataConfig]
-    return Array.isArray(data) ? data.length : 0
-  }
-
-  const getLabelForKey = (key: string): string => {
-    const labels: Record<string, string> = {
-      'project-files': 'Files',
-      'project-models': 'Models',
-      'project-components': 'Components',
-      'project-workflows': 'Workflows',
-      'project-lambdas': 'Lambdas',
-      'project-playwright-tests': 'Playwright Tests',
-      'project-storybook-stories': 'Storybook Stories',
-      'project-unit-tests': 'Unit Tests',
-      'project-component-trees': 'Component Trees',
-    }
-    return labels[key] || key
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-lg">
-          <Database size={20} weight="duotone" />
-          Seed Data Available
-        </CardTitle>
-        <CardDescription>
-          Pre-configured data ready to load from database
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-          {dataKeys.map((key) => {
-            const count = getDataCount(key)
-            return (
-              <div
-                key={key}
-                className="flex items-center justify-between p-3 rounded-lg border border-border bg-muted/50"
-              >
-                <span className="text-sm font-medium">{getLabelForKey(key)}</span>
-                <Badge variant="secondary" className="ml-2">
-                  {count}
-                </Badge>
-              </div>
-            )
-          })}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
--- a/src/components/atoms/Select.tsx
+++ b/src/components/atoms/Select.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Separator.tsx
+++ b/src/components/atoms/Separator.tsx
@@ -1,22 +0,0 @@
-import { Separator as ShadcnSeparator } from '@/components/ui/separator'
-import { cn } from '@/lib/utils'
-
-interface SeparatorProps {
-  orientation?: 'horizontal' | 'vertical'
-  decorative?: boolean
-  className?: string
-}
-
-export function Separator({
-  orientation = 'horizontal',
-  decorative = true,
-  className,
-}: SeparatorProps) {
-  return (
-    <ShadcnSeparator
-      orientation={orientation}
-      decorative={decorative}
-      className={className}
-    />
-  )
-}
--- a/src/components/atoms/Skeleton.tsx
+++ b/src/components/atoms/Skeleton.tsx
@@ -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,
-      }}
-    />
-  )
-}
--- a/src/components/atoms/Slider.tsx
+++ b/src/components/atoms/Slider.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/Spacer.tsx
+++ b/src/components/atoms/Spacer.tsx
@@ -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"
-    />
-  )
-}
--- a/src/components/atoms/Sparkle.tsx
+++ b/src/components/atoms/Sparkle.tsx
@@ -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
-      )}
-    />
-  )
-}
--- a/src/components/atoms/Spinner.tsx
+++ b/src/components/atoms/Spinner.tsx
@@ -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)}
-    />
-  )
-}
--- a/src/components/atoms/Stack.tsx
+++ b/src/components/atoms/Stack.tsx
@@ -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>
-  )
-}
--- a/src/components/atoms/StatCard.tsx
+++ b/src/components/atoms/StatCard.tsx
@@ -1,55 +0,0 @@
-import { ReactNode } from 'react'
-import { Card, CardContent } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
-
-export interface StatCardProps {
-  icon?: ReactNode
-  title: string
-  value: string | number
-  description?: string
-  color?: string
-  trend?: {
-    value: number
-    direction: 'up' | 'down'
-  }
-  className?: string
-}
-
-export function StatCard({
-  icon,
-  title,
-  value,
-  description,
-  color = 'text-primary',
-  trend,
-  className,
-}: StatCardProps) {
-  return (
-    <Card className={cn('transition-all hover:shadow-lg', className)}>
-      <CardContent className="p-6">
-        <div className="flex items-start justify-between gap-4">
-          <div className="flex-1">
-            <p className="text-sm font-medium text-muted-foreground">{title}</p>
-            <p className="text-3xl font-bold mt-2">{value}</p>
-            {description && (
-              <p className="text-sm text-muted-foreground mt-1">{description}</p>
-            )}
-            {trend && (
-              <div className={cn(
-                'text-sm font-medium mt-2',
-                trend.direction === 'up' ? 'text-green-600' : 'text-red-600'
-              )}>
-                {trend.direction === 'up' ? '↑' : '↓'} {Math.abs(trend.value)}%
-              </div>
-            )}
-          </div>
-          {icon && (
-            <div className={cn('text-2xl', color)}>
-              {icon}
-            </div>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
--- a/Show More
+++ b/Show More