Natural Language → DSL → Component Tree → TSX Export

"Create a modern SaaS dashboard with:
- Sidebar navigation with icons for Dashboard, Analytics, Users, Settings
- Header with search bar, notifications bell, and user avatar dropdown
- Main content area with:
  - 4 stats cards showing revenue, users, orders, conversion rate
  - Line chart for revenue over time
  - Recent activity feed
  - Data table with top products
- Dark theme with blue accent colors"

interface OKLCHColor {
  l: number;  // Lightness (0-1)
  c: number;  // Chroma (0-0.4)
  h: number;  // Hue (0-360)
}

// Exported from Builder
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

export default function ProductCard({ product }) {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>{product.name}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="text-muted-foreground">{product.description}</p>
        <div className="flex justify-between items-center">
          <span className="text-2xl font-bold">
            ${product.price.toFixed(2)}
          </span>
          <Button>Add to Cart</Button>
        </div>
      </CardContent>
    </Card>
  )
}