[V0_FILE]typescriptreact:file="components/component-renderer.tsx" "use client" import React from "react" import type { ComponentData } from "@/lib/types" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Trash2 } from "lucide-react" interface ComponentRendererProps { component: ComponentData isSelected: boolean onDelete: () => void } export default function ComponentRenderer({ component, isSelected, onDelete }: ComponentRendererProps) { const renderComponent = () => { const { type, props } = component switch (type) { case "button": return ( ) case "input": return ( ) case "text": // Consolidated text component that handles all text types const Element = props.element || "p" return React.createElement( Element, { className: `${props.className || ""} font-${props.fontWeight || "normal"} text-${props.textAlign || "left"}`, style: { fontSize: props.fontSize || (Element === "p" ? "1rem" : undefined), }, }, props.text || (Element === "p" ? "Paragraph text" : `${Element.toUpperCase()} Heading`), ) case "image": return ( {props.alt

) case "div": return (

{props.text || "Div Container"}

) case "nested-column": return (

Nested Column

) default: return

Unknown component type: {type}

} } return (

{isSelected && (

)}

{renderComponent()}

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="app/page.tsx" import UIBuilder from "@/components/ui-builder" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/code-preview.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Copy, Check, Download } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" interface CodePreviewProps { code: string } export default function CodePreview({ code }: CodePreviewProps) { const [copied, setCopied] = useState(false) const copyToClipboard = async () => { try { await navigator.clipboard.writeText(code) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (err) { console.error("Failed to copy: ", err) } } return (

Generated Code

        {code}

) } [V0_FILE]typescriptreact:file="components/component-palette.tsx" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { TextCursorInputIcon as TextInput, TextIcon, ImageIcon, Square } from "lucide-react" import { Badge } from "@/components/ui/badge" interface ComponentPaletteProps { onAddComponent: (componentType: string) => void selectedColumnId: string | null } export default function ComponentPalette({ onAddComponent, selectedColumnId }: ComponentPaletteProps) { const components = [ { type: "button", icon: , label: "Button" }, { type: "input", icon: , label: "Input" }, { type: "text", icon: , label: "Text" }, { type: "image", icon: , label: "Image" }, { type: "div", icon: , label: "Div" }, // Remove the nested-column component ] return (

Components

{selectedColumnId ? (

Adding to column: {selectedColumnId}

) : (

Select a column first or components will be added to the first column

)}

{components.map((component) => (

onAddComponent(component.type)} draggable onDragStart={(e) => { e.dataTransfer.setData("componentType", component.type) }} >

{typeof component.icon === "string" ? {component.icon} : component.icon}

{component.label}

))}

) } [V0_FILE]typescriptreact:file="components/preview-panel.tsx" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import { Button } from "@/components/ui/button" import { ArrowLeft, RefreshCw, Smartphone, Tablet, Monitor, Code, Eye } from "lucide-react" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import type { GridLayout } from "@/lib/types" interface PreviewPanelProps { code: string layout: GridLayout onBack: () => void } export default function PreviewPanel({ code, layout, onBack }: PreviewPanelProps) { const iframeRef = useRef(null) const [loading, setLoading] = useState(true) const [viewportSize, setViewportSize] = useState<"mobile" | "tablet" | "desktop">("desktop") const [activeTab, setActiveTab] = useState<"visual" | "code">("visual") const generatePreviewHTML = () => { return `

` } const refreshPreview = () => { setLoading(true) if (iframeRef.current) { const iframe = iframeRef.current const html = generatePreviewHTML() iframe.srcdoc = html iframe.onload = () => { setLoading(false) } } } useEffect(() => { refreshPreview() }, [code]) const getViewportWidth = () => { switch (viewportSize) { case "mobile": return "375px" case "tablet": return "768px" case "desktop": default: return "100%" } } return (

setActiveTab(value as "visual" | "code")} className="mr-4"> Visual


                Code



          {activeTab === "visual" && (
            
              
              
              
            
          )}



      {activeTab === "visual" ? (
        
          
            {loading && (
              
                
                  
                  Loading preview...
                
              
            )}
            
          </div>
        </div>
      ) : (
        <div className="flex-1 overflow-auto">
          <pre className="bg-gray-50 p-4 rounded-md overflow-auto h-full text-sm">
            <code>{code}</code>
          </pre>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/types.ts" isQuickEdit="true"
export interface ComponentData {
  id: string
  type: string
  props: Record<string, any>
}

export interface ColumnData {
  id: string
  width: number // 1-12 for a 12-column grid
  components: ComponentData[]
  orientation: "horizontal" | "vertical"
  parentId?: string | null
  childColumns?: ColumnData[]
  flexLayout?: string // For flex container layout
  gap?: string // For gap between elements
}

export interface GridLayout {
  columns: ColumnData[]
  containerWidth: string
}

export interface DragItem {
  type: "COMPONENT" | "COLUMN"
  id: string
  columnId?: string
  index: number
}
[V0_FILE]typescriptreact:file="components/properties-panel.tsx"
"use client"

import { useState } from "react"
import type { ComponentData, ColumnData } from "@/lib/types"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"

interface PropertiesPanelProps {
  component: ComponentData | null
  columnId: string | null
  column: ColumnData | null
  onUpdateComponent: (componentId: string, columnId: string, updatedProps: any) => void
  onUpdateColumn: (columnId: string, updates: Partial<ColumnData>) => void
}

export default function PropertiesPanel({
  component,
  columnId,
  column,
  onUpdateComponent,
  onUpdateColumn,
}: PropertiesPanelProps) {
  const [activeTab, setActiveTab] = useState<string>("component")

  if (!columnId) {
    return (
      <div className="p-4 border-b border-gray-200">
        <h2 className="text-lg font-semibold mb-2">Properties</h2>
        <p className="text-gray-500 text-sm">Select a component or column to edit its properties</p>
      </div>
    )
  }

  const handlePropChange = (propName: string, value: any) => {
    if (component && columnId) {
      onUpdateComponent(component.id, columnId, { [propName]: value })
    }
  }

  const handleColumnChange = (propName: string, value: any) => {
    if (columnId) {
      onUpdateColumn(columnId, { [propName]: value })
    }
  }

  const renderColumnProperties = () => {
    if (!column) return null

    return (
      <div className="space-y-4">
        <div>
          <Label htmlFor="flex-direction">Flex Direction</Label>
          <Select
            value={column.orientation || "horizontal"}
            onValueChange={(value) => handleColumnChange("orientation", value)}
          >
            <SelectTrigger id="flex-direction">
              <SelectValue placeholder="Select direction" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="horizontal">Row</SelectItem>
              <SelectItem value="vertical">Column</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div>
          <Label htmlFor="flex-layout">Layout</Label>
          <Select
            value={column.flexLayout || "items-start justify-start"}
            onValueChange={(value) => handleColumnChange("flexLayout", value)}
          >
            <SelectTrigger id="flex-layout">
              <SelectValue placeholder="Select layout" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="items-start justify-start">Top Left</SelectItem>
              <SelectItem value="items-start justify-center">Top Center</SelectItem>
              <SelectItem value="items-start justify-end">Top Right</SelectItem>
              <SelectItem value="items-center justify-start">Center Left</SelectItem>
              <SelectItem value="items-center justify-center">Center</SelectItem>
              <SelectItem value="items-center justify-end">Center Right</SelectItem>
              <SelectItem value="items-end justify-start">Bottom Left</SelectItem>
              <SelectItem value="items-end justify-center">Bottom Center</SelectItem>
              <SelectItem value="items-end justify-end">Bottom Right</SelectItem>
              <SelectItem value="items-center justify-between">Space Between</SelectItem>
              <SelectItem value="items-center justify-around">Space Around</SelectItem>
              <SelectItem value="items-center justify-evenly">Space Evenly</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div>
          <Label htmlFor="gap">Gap (rem)</Label>
          <Input
            id="gap"
            type="number"
            min="0"
            step="0.25"
            value={column.gap || "0"}
            onChange={(e) => handleColumnChange("gap", e.target.value)}
            placeholder="0"
          />
          <p className="text-xs text-gray-500 mt-1">Enter gap size in rem (e.g., 0.5, 1, 1.5)</p>
        </div>
      </div>
    )
  }

  const renderCommonProperties = () => (
    <div className="space-y-4">
      <div>
        <Label htmlFor="className">CSS Class</Label>
        <Input
          id="className"
          value={component?.props.className || ""}
          onChange={(e) => handlePropChange("className", e.target.value)}
        />
      </div>
    </div>
  )

  const renderSpecificProperties = () => {
    if (!component) return null

    switch (component.type) {
      case "button":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="text">Button Text</Label>
              <Input
                id="text"
                value={component.props.text || "Button"}
                onChange={(e) => handlePropChange("text", e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="variant">Variant</Label>
              <Select
                value={component.props.variant || "default"}
                onValueChange={(value) => handlePropChange("variant", value)}
              >
                <SelectTrigger id="variant">
                  <SelectValue placeholder="Select variant" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="default">Default</SelectItem>
                  <SelectItem value="destructive">Destructive</SelectItem>
                  <SelectItem value="outline">Outline</SelectItem>
                  <SelectItem value="secondary">Secondary</SelectItem>
                  <SelectItem value="ghost">Ghost</SelectItem>
                  <SelectItem value="link">Link</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="size">Size</Label>
              <Select
                value={component.props.size || "default"}
                onValueChange={(value) => handlePropChange("size", value)}
              >
                <SelectTrigger id="size">
                  <SelectValue placeholder="Select size" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="default">Default</SelectItem>
                  <SelectItem value="sm">Small</SelectItem>
                  <SelectItem value="lg">Large</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        )
      case "input":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="placeholder">Placeholder</Label>
              <Input
                id="placeholder"
                value={component.props.placeholder || "Enter text..."}
                onChange={(e) => handlePropChange("placeholder", e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="type">Input Type</Label>
              <Select value={component.props.type || "text"} onValueChange={(value) => handlePropChange("type", value)}>
                <SelectTrigger id="type">
                  <SelectValue placeholder="Select type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="text">Text</SelectItem>
                  <SelectItem value="password">Password</SelectItem>
                  <SelectItem value="email">Email</SelectItem>
                  <SelectItem value="number">Number</SelectItem>
                  <SelectItem value="tel">Telephone</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        )
      case "text":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="element">Element Type</Label>
              <Select
                value={component.props.element || "p"}
                onValueChange={(value) => handlePropChange("element", value)}
              >
                <SelectTrigger id="element">
                  <SelectValue placeholder="Select element type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="p">Paragraph</SelectItem>
                  <SelectItem value="h1">Heading 1</SelectItem>
                  <SelectItem value="h2">Heading 2</SelectItem>
                  <SelectItem value="h3">Heading 3</SelectItem>
                  <SelectItem value="h4">Heading 4</SelectItem>
                  <SelectItem value="h5">Heading 5</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="text">Text Content</Label>
              <Input
                id="text"
                value={component.props.text || "Text content"}
                onChange={(e) => handlePropChange("text", e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="fontWeight">Font Weight</Label>
              <Select
                value={component.props.fontWeight || "normal"}
                onValueChange={(value) => handlePropChange("fontWeight", value)}
              >
                <SelectTrigger id="fontWeight">
                  <SelectValue placeholder="Select font weight" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="normal">Normal</SelectItem>
                  <SelectItem value="medium">Medium</SelectItem>
                  <SelectItem value="semibold">Semibold</SelectItem>
                  <SelectItem value="bold">Bold</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="textAlign">Text Alignment</Label>
              <Select
                value={component.props.textAlign || "left"}
                onValueChange={(value) => handlePropChange("textAlign", value)}
              >
                <SelectTrigger id="textAlign">
                  <SelectValue placeholder="Select text alignment" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="left">Left</SelectItem>
                  <SelectItem value="center">Center</SelectItem>
                  <SelectItem value="right">Right</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="fontSize">Font Size</Label>
              <Input
                id="fontSize"
                value={component.props.fontSize || ""}
                onChange={(e) => handlePropChange("fontSize", e.target.value)}
                placeholder="e.g., 1rem, 16px, 1.2em"
              />
            </div>
          </div>
        )
      case "image":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="src">Image Source</Label>
              <Input
                id="src"
                value={component.props.src || "/placeholder.svg?height=200&width=300"}
                onChange={(e) => handlePropChange("src", e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="alt">Alt Text</Label>
              <Input
                id="alt"
                value={component.props.alt || "Image"}
                onChange={(e) => handlePropChange("alt", e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="width">Width</Label>
              <Input
                id="width"
                value={component.props.width || "100%"}
                onChange={(e) => handlePropChange("width", e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="height">Height</Label>
              <Input
                id="height"
                value={component.props.height || "auto"}
                onChange={(e) => handlePropChange("height", e.target.value)}
              />
            </div>
          </div>
        )
      case "div":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="text">Content</Label>
              <Input
                id="text"
                value={component.props.text || "Div Container"}
                onChange={(e) => handlePropChange("text", e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="backgroundColor">Background Color</Label>
              <Input
                id="backgroundColor"
                type="color"
                value={component.props.backgroundColor || "#ffffff"}
                onChange={(e) => handlePropChange("backgroundColor", e.target.value)}
                className="h-10"
              />
            </div>
            <div>
              <Label htmlFor="padding">Padding</Label>
              <Input
                id="padding"
                value={component.props.padding || "1rem"}
                onChange={(e) => handlePropChange("padding", e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="borderRadius">Border Radius</Label>
              <Input
                id="borderRadius"
                value={component.props.borderRadius || "0.25rem"}
                onChange={(e) => handlePropChange("borderRadius", e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="border">Border</Label>
              <Input
                id="border"
                value={component.props.border || "none"}
                onChange={(e) => handlePropChange("border", e.target.value)}
              />
            </div>
          </div>
        )
      default:
        return <div>No specific properties available for this component type.</div>
    }
  }

  return (
    <div className="p-4 border-b border-gray-200 overflow-y-auto">
      <h2 className="text-lg font-semibold mb-4">Properties</h2>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="w-full mb-4">
          <TabsTrigger value="component" className="flex-1" disabled={!component}>
            Component
          </TabsTrigger>
          <TabsTrigger value="column" className="flex-1">
            Column
          </TabsTrigger>
        </TabsList>

        {component && (
          <TabsContent value="component" className="space-y-4">
            <div className="text-sm text-gray-500 mb-4">
              Component Type: <span className="font-medium">{component.type}</span>
            </div>

            <Tabs defaultValue="specific">
              <TabsList className="w-full mb-4">
                <TabsTrigger value="specific" className="flex-1">
                  Specific
                </TabsTrigger>
                <TabsTrigger value="common" className="flex-1">
                  Common
                </TabsTrigger>
              </TabsList>
              <TabsContent value="specific" className="space-y-4">
                {renderSpecificProperties()}
              </TabsContent>
              <TabsContent value="common" className="space-y-4">
                {renderCommonProperties()}
              </TabsContent>
            </Tabs>
          </TabsContent>
        )}

        <TabsContent value="column" className="space-y-4">
          <div className="text-sm text-gray-500 mb-4">
            Column ID: <span className="font-medium">{columnId}</span>
          </div>
          <Separator className="my-4" />
          {renderColumnProperties()}
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/category-manager.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Pencil, Trash2, Plus, Check, X } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { useToast } from "@/hooks/use-toast"

interface Category {
  id: string
  name: string
  isDefault?: boolean
}

interface CategoryManagerProps {
  onCategoriesChange: (categories: Category[]) => void
}

export default function CategoryManager({ onCategoriesChange }: CategoryManagerProps) {
  const [categories, setCategories] = useState<Category[]>([{ id: "general", name: "General", isDefault: true }])
  const [newCategoryName, setNewCategoryName] = useState("")
  const [editingCategory, setEditingCategory] = useState<Category | null>(null)
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [categoryToDelete, setCategoryToDelete] = useState<Category | null>(null)
  const { toast } = useToast()

  // Load categories from local storage
  useEffect(() => {
    try {
      const savedCategories = localStorage.getItem("ui-builder-categories")
      if (savedCategories) {
        const parsedCategories = JSON.parse(savedCategories)
        // Ensure General category exists and is marked as default
        const hasGeneral = parsedCategories.some((cat: any) => cat.id === "general")
        if (!hasGeneral) {
          parsedCategories.unshift({ id: "general", name: "General", isDefault: true })
        } else {
          // Make sure General is marked as default
          parsedCategories.forEach((cat: any) => {
            if (cat.id === "general") {
              cat.isDefault = true
            }
          })
        }
        setCategories(parsedCategories)
      }
    } catch (error) {
      console.error("Failed to load categories:", error)
    }
  }, [])

  // Save categories to local storage when they change
  useEffect(() => {
    try {
      localStorage.setItem("ui-builder-categories", JSON.stringify(categories))
      onCategoriesChange(categories)
    } catch (error) {
      console.error("Failed to save categories:", error)
    }
  }, [categories, onCategoriesChange])

  const handleAddCategory = () => {
    if (!newCategoryName.trim()) return

    const newCategory: Category = {
      id: `category-${Date.now()}`,
      name: newCategoryName.trim(),
    }

    setCategories([...categories, newCategory])
    setNewCategoryName("")

    toast({
      title: "Category added",
      description: `Category "${newCategoryName}" has been added.`,
    })
  }

  const handleEditCategory = (category: Category) => {
    setEditingCategory({ ...category })
  }

  const saveEditedCategory = () => {
    if (!editingCategory || !editingCategory.name.trim()) return

    setCategories(
      categories.map((cat) => (cat.id === editingCategory.id ? { ...cat, name: editingCategory.name.trim() } : cat)),
    )

    setEditingCategory(null)

    toast({
      title: "Category updated",
      description: `Category has been renamed to "${editingCategory.name}".`,
    })
  }

  const cancelEdit = () => {
    setEditingCategory(null)
  }

  const confirmDeleteCategory = (category: Category) => {
    if (category.isDefault) return
    setCategoryToDelete(category)
    setDeleteDialogOpen(true)
  }

  const handleDeleteCategory = () => {
    if (!categoryToDelete) return

    // Get templates from local storage
    try {
      const savedTemplates = localStorage.getItem("ui-builder-templates")
      if (savedTemplates) {
        const templates = JSON.parse(savedTemplates)

        // Migrate templates to General category
        const updatedTemplates = templates.map((template: any) => {
          if (template.category === categoryToDelete.id) {
            return { ...template, category: "general" }
          }
          return template
        })

        // Save updated templates
        localStorage.setItem("ui-builder-templates", JSON.stringify(updatedTemplates))
      }
    } catch (error) {
      console.error("Failed to migrate templates:", error)
    }

    // Remove the category
    setCategories(categories.filter((cat) => cat.id !== categoryToDelete.id))
    setCategoryToDelete(null)
    setDeleteDialogOpen(false)

    toast({
      title: "Category deleted",
      description: `Category "${categoryToDelete.name}" has been deleted and its templates moved to General.`,
    })
  }

  return (
    <div className="space-y-4">
      <h3 className="text-lg font-medium">Categories</h3>

      <div className="flex items-center space-x-2">
        <Input
          placeholder="New category name"
          value={newCategoryName}
          onChange={(e) => setNewCategoryName(e.target.value)}
          className="flex-1"
        />
        <Button onClick={handleAddCategory} disabled={!newCategoryName.trim()}>
          <Plus className="h-4 w-4 mr-1" />
          Add
        </Button>
      </div>

      <div className="space-y-2 mt-4">
        {categories.map((category) => (
          <div key={category.id} className="flex items-center justify-between p-2 border rounded-md">
            {editingCategory && editingCategory.id === category.id ? (
              <div className="flex items-center space-x-2 flex-1">
                <Input
                  value={editingCategory.name}
                  onChange={(e) => setEditingCategory({ ...editingCategory, name: e.target.value })}
                  autoFocus
                />
                <Button size="sm" variant="ghost" onClick={saveEditedCategory}>
                  <Check className="h-4 w-4" />
                </Button>
                <Button size="sm" variant="ghost" onClick={cancelEdit}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ) : (
              <>
                <span className="flex-1">
                  {category.name}
                  {category.isDefault && (
                    <span className="ml-2 text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Default</span>
                  )}
                </span>
                <div className="flex items-center space-x-1">
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => handleEditCategory(category)}
                    disabled={category.isDefault}
                  >
                    <Pencil className="h-4 w-4" />
                  </Button>
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => confirmDeleteCategory(category)}
                    disabled={category.isDefault}
                    className={category.isDefault ? "" : "text-red-500 hover:text-red-700"}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </>
            )}
          </div>
        ))}
      </div>

      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Category</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete the category "{categoryToDelete?.name}"? All templates in this category
              will be moved to the General category.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDeleteCategory}>
              Delete
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/templates-page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { ArrowLeft, Plus, Trash2, Layout, Settings } from "lucide-react"
import CategoryManager from "./category-manager"
import type { GridLayout } from "@/lib/types"

interface Template {
  id: string
  name: string
  category: string
  layout: GridLayout
  createdAt: string
}

interface Category {
  id: string
  name: string
  isDefault?: boolean
}

interface TemplatesPageProps {
  onBack: () => void
  onLoadTemplate: (layout: GridLayout) => void
  onCreateNew: () => void
}

export default function TemplatesPage({ onBack, onLoadTemplate, onCreateNew }: TemplatesPageProps) {
  const [templates, setTemplates] = useState<Template[]>([])
  const [categories, setCategories] = useState<Category[]>([{ id: "general", name: "General", isDefault: true }])
  const [searchTerm, setSearchTerm] = useState("")
  const [activeCategory, setActiveCategory] = useState("all")
  const [sortBy, setSortBy] = useState<"name" | "date">("date")
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc")
  const [activeTab, setActiveTab] = useState<"templates" | "categories">("templates")

  useEffect(() => {
    // Load templates from local storage
    const loadTemplates = () => {
      try {
        const savedTemplates = localStorage.getItem("ui-builder-templates")
        if (savedTemplates) {
          setTemplates(JSON.parse(savedTemplates))
        }
      } catch (error) {
        console.error("Failed to load templates:", error)
      }
    }

    // Load categories from local storage
    const loadCategories = () => {
      try {
        const savedCategories = localStorage.getItem("ui-builder-categories")
        if (savedCategories) {
          const parsedCategories = JSON.parse(savedCategories)
          // Ensure General category exists
          const hasGeneral = parsedCategories.some((cat: any) => cat.id === "general")
          if (!hasGeneral) {
            parsedCategories.unshift({ id: "general", name: "General", isDefault: true })
          }
          setCategories(parsedCategories)
        }
      } catch (error) {
        console.error("Failed to load categories:", error)
      }
    }

    loadTemplates()
    loadCategories()
  }, [])

  const handleDeleteTemplate = (id: string) => {
    if (confirm("Are you sure you want to delete this template?")) {
      const updatedTemplates = templates.filter((template) => template.id !== id)
      setTemplates(updatedTemplates)

      try {
        localStorage.setItem("ui-builder-templates", JSON.stringify(updatedTemplates))
      } catch (error) {
        console.error("Failed to save templates:", error)
      }
    }
  }

  const handleLoadTemplate = (template: Template) => {
    onLoadTemplate(template.layout)
  }

  const toggleSort = (column: "name" | "date") => {
    if (sortBy === column) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc")
    } else {
      setSortBy(column)
      setSortDirection("asc")
    }
  }

  const handleCategoriesChange = (updatedCategories: Category[]) => {
    setCategories(updatedCategories)

    // If the active category was deleted, switch to "all"
    if (activeCategory !== "all" && !updatedCategories.some((cat) => cat.id === activeCategory)) {
      setActiveCategory("all")
    }
  }

  // Get unique category IDs from templates
  const categoryIds = ["all", ...new Set(templates.map((template) => template.category))]

  // Map category IDs to names
  const categoryOptions = categoryIds.map((id) => {
    if (id === "all") return { id, name: "All" }
    const category = categories.find((cat) => cat.id === id)
    return { id, name: category ? category.name : id }
  })

  // Filter and sort templates
  const filteredTemplates = templates
    .filter((template) => {
      const matchesSearch = template.name.toLowerCase().includes(searchTerm.toLowerCase())
      const matchesCategory = activeCategory === "all" || template.category === activeCategory
      return matchesSearch && matchesCategory
    })
    .sort((a, b) => {
      if (sortBy === "name") {
        return sortDirection === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
      } else {
        return sortDirection === "asc"
          ? new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
          : new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
      }
    })

  // Get category name by ID
  const getCategoryName = (categoryId: string) => {
    const category = categories.find((cat) => cat.id === categoryId)
    return category ? category.name : categoryId
  }

  return (
    <div className="flex flex-col h-full">
      <header className="bg-white border-b border-gray-200 p-4 flex justify-between items-center">
        <div className="flex items-center">
          <Button variant="outline" size="sm" onClick={onBack} className="mr-4">
            <ArrowLeft className="h-4 w-4 mr-1" />
            Back to Builder
          </Button>
          <h1 className="text-2xl font-bold text-gray-800">Layout Templates</h1>
        </div>
        <div className="flex space-x-2">
          <Button onClick={onCreateNew} className="flex items-center">
            <Plus className="h-4 w-4 mr-1" />
            Create New Template
          </Button>
          <Button
            variant={activeTab === "categories" ? "default" : "outline"}
            size="sm"
            onClick={() => setActiveTab(activeTab === "categories" ? "templates" : "categories")}
            className="flex items-center"
          >
            <Settings className="h-4 w-4 mr-1" />
            {activeTab === "categories" ? "View Templates" : "Manage Categories"}
          </Button>
        </div>
      </header>

      <div className="p-4 flex-1 overflow-auto">
        <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as "templates" | "categories")}>
          <TabsContent value="templates">
            {templates.length === 0 ? (
              <div className="flex flex-col items-center justify-center h-full">
                <Layout className="h-16 w-16 text-gray-400 mb-4" />
                <h2 className="text-xl font-semibold mb-2">No Templates Yet</h2>
                <p className="text-gray-500 mb-4">Create your first template to get started</p>
                <Button onClick={onCreateNew}>
                  <Plus className="h-4 w-4 mr-1" />
                  Create New Template
                </Button>
              </div>
            ) : (
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <div className="w-1/3">
                    <Input
                      placeholder="Search templates..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>
                  <Tabs value={activeCategory} onValueChange={setActiveCategory}>
                    <TabsList>
                      {categoryOptions.map((category) => (
                        <TabsTrigger key={category.id} value={category.id} className="capitalize">
                          {category.name}
                        </TabsTrigger>
                      ))}
                    </TabsList>
                  </Tabs>
                </div>

                <Card>
                  <CardContent className="p-0">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead className="w-[300px] cursor-pointer" onClick={() => toggleSort("name")}>
                            Name {sortBy === "name" && (sortDirection === "asc" ? "↑" : "↓")}
                          </TableHead>
                          <TableHead>Category</TableHead>
                          <TableHead className="cursor-pointer" onClick={() => toggleSort("date")}>
                            Created {sortBy === "date" && (sortDirection === "asc" ? "↑" : "↓")}
                          </TableHead>
                          <TableHead className="text-right">Actions</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {filteredTemplates.map((template) => (
                          <TableRow key={template.id}>
                            <TableCell className="font-medium">{template.name}</TableCell>
                            <TableCell className="capitalize">{getCategoryName(template.category)}</TableCell>
                            <TableCell>{new Date(template.createdAt).toLocaleDateString()}</TableCell>
                            <TableCell className="text-right">
                              <div className="flex justify-end space-x-2">
                                <Button variant="outline" size="sm" onClick={() => handleLoadTemplate(template)}>
                                  Load
                                </Button>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleDeleteTemplate(template.id)}
                                  className="text-red-500 hover:text-red-700"
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              </div>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </CardContent>
                </Card>
              </div>
            )}
          </TabsContent>

          <TabsContent value="categories">
            <div className="max-w-2xl mx-auto">
              <CategoryManager onCategoriesChange={handleCategoriesChange} />
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/save-template-dialog.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { GridLayout } from "@/lib/types"

interface Category {
  id: string
  name: string
}

interface SaveTemplateDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSave: (name: string, category: string, layout: GridLayout) => void
  layout: GridLayout
}

export default function SaveTemplateDialog({ open, onOpenChange, onSave, layout }: SaveTemplateDialogProps) {
  const [name, setName] = useState("")
  const [category, setCategory] = useState("general")
  const [error, setError] = useState<string | null>(null)
  const [categories, setCategories] = useState<Category[]>([{ id: "general", name: "General" }])

  // Load categories when dialog opens
  useEffect(() => {
    if (open) {
      try {
        const savedCategories = localStorage.getItem("ui-builder-categories")
        if (savedCategories) {
          const parsedCategories = JSON.parse(savedCategories)
          setCategories(parsedCategories)

          // Set default category to general if it exists
          const generalCategory = parsedCategories.find((cat: Category) => cat.id === "general")
          if (generalCategory) {
            setCategory("general")
          } else if (parsedCategories.length > 0) {
            setCategory(parsedCategories[0].id)
          }
        }
      } catch (error) {
        console.error("Failed to load categories:", error)
      }
    }
  }, [open])

  const handleSave = () => {
    if (!name.trim()) {
      setError("Template name is required")
      return
    }

    onSave(name, category, layout)
    setName("")
    setCategory("general")
    setError(null)
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Save Layout Template</DialogTitle>
          <DialogDescription>Save your current layout as a template for future use.</DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input
              id="name"
              value={name}
              onChange={(e) => {
                setName(e.target.value)
                setError(null)
              }}
              placeholder="My Template"
              className="col-span-3"
            />
            {error && <p className="text-red-500 text-sm col-span-4 text-right">{error}</p>}
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="category" className="text-right">
              Category
            </Label>
            <Select value={category} onValueChange={setCategory}>
              <SelectTrigger id="category" className="col-span-3">
                <SelectValue placeholder="Select a category" />
              </SelectTrigger>
              <SelectContent>
                {categories.map((cat) => (
                  <SelectItem key={cat.id} value={cat.id}>
                    {cat.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button onClick={handleSave}>Save Template</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/ui-builder.tsx"
"use client"

import { useState, useCallback, useEffect } from "react"
import { DndProvider } from "react-dnd"
import { HTML5Backend } from "react-dnd-html5-backend"
import ComponentPalette from "./component-palette"
import LayoutEditor from "./layout-editor"
import PropertiesPanel from "./properties-panel"
import CodePreview from "./code-preview"
import PreviewPanel from "./preview-panel"
import TemplatesPage from "./templates-page"
import SaveTemplateDialog from "./save-template-dialog"
import type { ComponentData, ColumnData, GridLayout } from "@/lib/types"
import { generateReactCode } from "@/lib/code-generator"
import { Button } from "@/components/ui/button"
import { PanelRight, Eye, RotateCcw, LayoutTemplateIcon as Template, Layout } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

const STORAGE_KEY = "react-ui-builder-state"
const TEMPLATES_KEY = "ui-builder-templates"

const DEFAULT_LAYOUT: GridLayout = {
  columns: [
    {
      id: "column-1",
      width: 12,
      components: [],
      orientation: "horizontal",
      childColumns: [],
    },
  ],
  containerWidth: "auto",
}

export default function UIBuilder() {
  const [layout, setLayout] = useState<GridLayout>(DEFAULT_LAYOUT)
  const [selectedComponentId, setSelectedComponentId] = useState<string | null>(null)
  const [selectedColumnId, setSelectedColumnId] = useState<string | null>(null)
  const [showPropertiesPanel, setShowPropertiesPanel] = useState(true)
  const [showPreview, setShowPreview] = useState(false)
  const [showTemplates, setShowTemplates] = useState(false)
  const [saveTemplateDialogOpen, setSaveTemplateDialogOpen] = useState(false)
  const { toast } = useToast()

  // Load saved state on initial render
  useEffect(() => {
    try {
      const savedState = localStorage.getItem(STORAGE_KEY)
      if (savedState) {
        const parsedState = JSON.parse(savedState)

        // Validate the loaded state before setting it
        if (parsedState && parsedState.layout && Array.isArray(parsedState.layout.columns)) {
          // Ensure each column has the required properties
          const validatedColumns = validateColumns(parsedState.layout.columns)

          setLayout({
            columns: validatedColumns,
            containerWidth: parsedState.layout.containerWidth || DEFAULT_LAYOUT.containerWidth,
          })
        } else {
          console.warn("Invalid saved state format, using default layout")
          setLayout(DEFAULT_LAYOUT)
        }
      }
    } catch (error) {
      console.error("Failed to load saved state:", error)
      setLayout(DEFAULT_LAYOUT)
    }
  }, [])

  // Validate columns recursively to ensure they have all required properties
  const validateColumns = (columns: any[]): ColumnData[] => {
    return columns.map((column) => {
      // Ensure column has all required properties
      const validatedColumn: ColumnData = {
        id: column.id || `column-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
        width: typeof column.width === "number" ? column.width : 12,
        components: Array.isArray(column.components) ? column.components : [],
        orientation: column.orientation === "vertical" ? "vertical" : "horizontal",
        parentId: column.parentId || null,
        childColumns: Array.isArray(column.childColumns) ? validateColumns(column.childColumns) : [],
        flexLayout: column.flexLayout || "items-start justify-start",
        gap: column.gap || "0",
      }

      return validatedColumn
    })
  }

  // Save state when layout changes
  useEffect(() => {
    try {
      const stateToSave = {
        layout,
        timestamp: new Date().toISOString(),
      }
      localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave))
    } catch (error) {
      console.error("Failed to save state:", error)
    }
  }, [layout])

  const resetState = () => {
    if (confirm("Are you sure you want to reset the layout? This cannot be undone.")) {
      setLayout(DEFAULT_LAYOUT)
      setSelectedComponentId(null)
      setSelectedColumnId(null)
      localStorage.removeItem(STORAGE_KEY)
      toast({
        title: "Layout reset",
        description: "Your layout has been reset to default.",
      })
    }
  }

  const saveTemplate = (name: string, category: string, layout: GridLayout) => {
    try {
      // Get existing templates
      const savedTemplates = localStorage.getItem(TEMPLATES_KEY)
      const templates = savedTemplates ? JSON.parse(savedTemplates) : []

      // Add new template
      const newTemplate = {
        id: `template-${Date.now()}`,
        name,
        category,
        layout,
        createdAt: new Date().toISOString(),
      }

      templates.push(newTemplate)

      // Save updated templates
      localStorage.setItem(TEMPLATES_KEY, JSON.stringify(templates))

      toast({
        title: "Template saved",
        description: `Template "${name}" has been saved successfully.`,
      })
    } catch (error) {
      console.error("Failed to save template:", error)
      toast({
        title: "Save failed",
        description: "Failed to save your template. Please try again.",
        variant: "destructive",
      })
    }
  }

  const getSelectedComponent = (): {
    component: ComponentData | null
    columnId: string | null
  } => {
    if (!selectedComponentId) return { component: null, columnId: null }

    // Recursive function to find component in nested columns
    const findComponentInColumns = (
      columns: ColumnData[],
    ): { component: ComponentData | null; columnId: string | null } => {
      for (const column of columns) {
        if (!column) continue // Skip if column is undefined

        const component = column.components?.find((comp) => comp.id === selectedComponentId)
        if (component) {
          return { component, columnId: column.id }
        }

        if (column.childColumns && column.childColumns.length > 0) {
          const result = findComponentInColumns(column.childColumns)
          if (result.component) {
            return result
          }
        }
      }
      return { component: null, columnId: null }
    }

    return findComponentInColumns(layout.columns || [])
  }

  const getSelectedColumn = (): ColumnData | null => {
    if (!selectedColumnId) return null

    // Recursive function to find column by ID
    const findColumn = (columns: ColumnData[]): ColumnData | null => {
      for (const column of columns) {
        if (!column) continue

        if (column.id === selectedColumnId) {
          return column
        }

        if (column.childColumns && column.childColumns.length > 0) {
          const result = findColumn(column.childColumns)
          if (result) {
            return result
          }
        }
      }
      return null
    }

    return findColumn(layout.columns || [])
  }

  const handleAddComponent = (componentType: string, columnId: string, defaultProps: any = {}) => {
    const newComponent: ComponentData = {
      id: `component-${Date.now()}`,
      type: componentType,
      props: {
        ...defaultProps,
      },
    }

    setLayout((prevLayout) => {
      // Recursive function to update nested columns
      const updateColumns = (columns: ColumnData[]): ColumnData[] => {
        if (!columns) return []

        return columns.map((column) => {
          if (!column) return column

          if (column.id === columnId) {
            return {
              ...column,
              components: [...(column.components || []), newComponent],
            }
          }

          if (column.childColumns && column.childColumns.length > 0) {
            return {
              ...column,
              childColumns: updateColumns(column.childColumns),
            }
          }

          return column
        })
      }

      return {
        ...prevLayout,
        columns: updateColumns(prevLayout.columns || []),
      }
    })

    setSelectedComponentId(newComponent.id)
  }

  const handleUpdateComponent = (componentId: string, columnId: string, updatedProps: any) => {
    setLayout((prevLayout) => {
      // Recursive function to update nested columns
      const updateColumns = (columns: ColumnData[]): ColumnData[] => {
        if (!columns) return []

        return columns.map((column) => {
          if (!column) return column

          if (column.id === columnId) {
            const updatedComponents = (column.components || []).map((component) => {
              if (component.id === componentId) {
                return {
                  ...component,
                  props: {
                    ...component.props,
                    ...updatedProps,
                  },
                }
              }
              return component
            })

            return {
              ...column,
              components: updatedComponents,
            }
          }

          if (column.childColumns && column.childColumns.length > 0) {
            return {
              ...column,
              childColumns: updateColumns(column.childColumns),
            }
          }

          return column
        })
      }

      return {
        ...prevLayout,
        columns: updateColumns(prevLayout.columns || []),
      }
    })
  }

  const handleDeleteComponent = (componentId: string, columnId: string) => {
    setLayout((prevLayout) => {
      // Recursive function to update nested columns
      const updateColumns = (columns: ColumnData[]): ColumnData[] => {
        if (!columns) return []

        return columns.map((column) => {
          if (!column) return column

          if (column.id === columnId) {
            return {
              ...column,
              components: (column.components || []).filter((component) => component.id !== componentId),
            }
          }

          if (column.childColumns && column.childColumns.length > 0) {
            return {
              ...column,
              childColumns: updateColumns(column.childColumns),
            }
          }

          return column
        })
      }

      return {
        ...prevLayout,
        columns: updateColumns(prevLayout.columns || []),
      }
    })

    if (selectedComponentId === componentId) {
      setSelectedComponentId(null)
    }
  }

  const handleAddColumn = (orientation: "horizontal" | "vertical", parentColumnId?: string) => {
    const newColumn: ColumnData = {
      id: `column-${Date.now()}`,
      width: 12,
      components: [],
      orientation,
      childColumns: [],
      parentId: parentColumnId,
      flexLayout: "items-start justify-start",
      gap: "0",
    }

    setLayout((prevLayout) => {
      // If adding to the root level
      if (!parentColumnId) {
        // If adding horizontally, adjust widths to make equal columns
        let updatedColumns = [...(prevLayout.columns || [])]

        if (orientation === "horizontal") {
          const columnCount = updatedColumns.length + 1
          const equalWidth = Math.floor(12 / columnCount)

          updatedColumns = updatedColumns.map((column) => ({
            ...column,
            width: equalWidth,
          }))

          newColumn.width = equalWidth
        }

        return {
          ...prevLayout,
          columns: [...updatedColumns, newColumn],
        }
      }
      // If adding to a nested column
      else {
        // Recursive function to update nested columns
        const updateColumns = (columns: ColumnData[]): ColumnData[] => {
          if (!columns) return []

          return columns.map((column) => {
            if (!column) return column

            if (column.id === parentColumnId) {
              // Initialize childColumns if it doesn't exist
              const childColumns = column.childColumns || []

              // If adding horizontally, adjust widths
              let updatedChildColumns = [...childColumns]

              if (orientation === "horizontal" && updatedChildColumns.length > 0) {
                const columnCount = updatedChildColumns.length + 1
                const equalWidth = Math.floor(12 / columnCount)

                updatedChildColumns = updatedChildColumns.map((childColumn) => ({
                  ...childColumn,
                  width: equalWidth,
                }))

                newColumn.width = equalWidth
              }

              return {
                ...column,
                childColumns: [...updatedChildColumns, newColumn],
              }
            }

            if (column.childColumns && column.childColumns.length > 0) {
              return {
                ...column,
                childColumns: updateColumns(column.childColumns),
              }
            }

            return column
          })
        }

        return {
          ...prevLayout,
          columns: updateColumns(prevLayout.columns || []),
        }
      }
    })

    // Select the new column
    setSelectedColumnId(newColumn.id)
  }

  const handleDeleteColumn = (columnId: string) => {
    setLayout((prevLayout) => {
      // Don't delete if it's the last root column
      if ((prevLayout.columns || []).length <= 1 && prevLayout.columns?.[0]?.id === columnId) {
        return prevLayout
      }

      // Recursive function to update nested columns
      const updateColumns = (columns: ColumnData[]): ColumnData[] => {
        if (!columns) return []

        // Filter out the column to delete
        const filteredColumns = columns.filter((column) => column && column.id !== columnId)

        // If we removed a column at this level, redistribute widths
        if (filteredColumns.length < columns.length) {
          const horizontalColumns = filteredColumns.filter((col) => col && col.orientation === "horizontal")

          if (horizontalColumns.length > 0) {
            const equalWidth = Math.floor(12 / horizontalColumns.length)

            filteredColumns.forEach((column) => {
              if (column && column.orientation === "horizontal") {
                column.width = equalWidth
              }
            })
          }

          return filteredColumns
        }

        // Otherwise, check nested columns
        return columns.map((column) => {
          if (!column) return column

          if (column.childColumns && column.childColumns.length > 0) {
            const updatedChildColumns = updateColumns(column.childColumns)

            // If we removed a child column, redistribute widths
            if (updatedChildColumns.length < (column.childColumns || []).length) {
              const horizontalColumns = updatedChildColumns.filter((col) => col && col.orientation === "horizontal")

              if (horizontalColumns.length > 0) {
                const equalWidth = Math.floor(12 / horizontalColumns.length)

                updatedChildColumns.forEach((childColumn) => {
                  if (childColumn && childColumn.orientation === "horizontal") {
                    childColumn.width = equalWidth
                  }
                })
              }
            }

            return {
              ...column,
              childColumns: updatedChildColumns,
            }
          }

          return column
        })
      }

      return {
        ...prevLayout,
        columns: updateColumns(prevLayout.columns || []),
      }
    })

    // Clear selected component if it was in the deleted column
    const selectedComponent = getSelectedComponent()
    if (selectedComponent.columnId === columnId) {
      setSelectedComponentId(null)
    }

    // Clear selected column if it was deleted
    if (selectedColumnId === columnId) {
      setSelectedColumnId(null)
    }
  }

  const handleUpdateColumnWidth = (columnId: string, width: number) => {
    setLayout((prevLayout) => {
      // Recursive function to update nested columns
      const updateColumns = (columns: ColumnData[]): ColumnData[] => {
        if (!columns) return []

        return columns.map((column) => {
          if (!column) return column

          if (column.id === columnId) {
            return {
              ...column,
              width: Math.min(Math.max(1, width), 12), // Ensure width is between 1 and 12
            }
          }

          if (column.childColumns && column.childColumns.length > 0) {
            return {
              ...column,
              childColumns: updateColumns(column.childColumns),
            }
          }

          return column
        })
      }

      return {
        ...prevLayout,
        columns: updateColumns(prevLayout.columns || []),
      }
    })
  }

  const handleUpdateContainerWidth = (width: string) => {
    setLayout((prevLayout) => ({
      ...prevLayout,
      containerWidth: width,
    }))
  }

  const handleMoveComponent = useCallback(
    (dragIndex: number, hoverIndex: number, sourceColumnId: string, targetColumnId: string) => {
      setLayout((prevLayout) => {
        // Helper function to find a column by ID
        const findColumn = (columns: ColumnData[], id: string): ColumnData | null => {
          if (!columns) return null

          for (const column of columns) {
            if (!column) continue

            if (column.id === id) {
              return column
            }
            if (column.childColumns && column.childColumns.length > 0) {
              const found = findColumn(column.childColumns, id)
              if (found) return found
            }
          }
          return null
        }

        // Clone the layout to avoid mutating state directly
        const newLayout = { ...prevLayout, columns: JSON.parse(JSON.stringify(prevLayout.columns || [])) }

        // Find source and target columns
        const sourceColumn = findColumn(newLayout.columns, sourceColumnId)
        const targetColumn = findColumn(newLayout.columns, targetColumnId)

        if (!sourceColumn || !targetColumn) return prevLayout

        // If moving within the same column
        if (sourceColumnId === targetColumnId) {
          const component = sourceColumn.components[dragIndex]
          sourceColumn.components.splice(dragIndex, 1)
          sourceColumn.components.splice(hoverIndex, 0, component)
        }
        // If moving between different columns
        else {
          const component = sourceColumn.components[dragIndex]
          sourceColumn.components.splice(dragIndex, 1)
          targetColumn.components.splice(hoverIndex, 0, component)
        }

        return newLayout
      })
    },
    [],
  )

  const handleMoveColumn = useCallback((dragIndex: number, hoverIndex: number, parentId: string | null = null) => {
    setLayout((prevLayout) => {
      // Helper function to find parent column's childColumns array
      const findChildColumns = (columns: ColumnData[], parentId: string): ColumnData[] | null => {
        if (!columns) return null

        for (const column of columns) {
          if (!column) continue

          if (column.id === parentId) {
            return column.childColumns || []
          }
          if (column.childColumns && column.childColumns.length > 0) {
            const found = findChildColumns(column.childColumns, parentId)
            if (found) return found
          }
        }
        return null
      }

      // Clone the layout to avoid mutating state directly
      const newLayout = { ...prevLayout, columns: JSON.parse(JSON.stringify(prevLayout.columns || [])) }

      // Determine which array of columns we're working with
      let columnsArray: ColumnData[]
      if (parentId) {
        const childColumns = findChildColumns(newLayout.columns, parentId)
        if (!childColumns) return prevLayout
        columnsArray = childColumns
      } else {
        columnsArray = newLayout.columns || []
      }

      // Move the column
      const [movedColumn] = columnsArray.splice(dragIndex, 1)
      columnsArray.splice(hoverIndex, 0, movedColumn)

      // Recalculate widths for horizontal columns
      const horizontalColumns = columnsArray.filter((col) => col && col.orientation === "horizontal")
      if (horizontalColumns.length > 0) {
        const equalWidth = Math.floor(12 / horizontalColumns.length)
        horizontalColumns.forEach((col) => {
          if (col) col.width = equalWidth
        })
      }

      return newLayout
    })
  }, [])

  const handleLoadTemplate = (templateLayout: GridLayout) => {
    setLayout(templateLayout)
    setSelectedComponentId(null)
    setSelectedColumnId(null)
    setShowTemplates(false)
    toast({
      title: "Template loaded",
      description: "The template has been loaded successfully.",
    })
  }

  const handleUpdateColumn = (columnId: string, updates: Partial<ColumnData>) => {
    setLayout((prevLayout) => {
      // Recursive function to update nested columns
      const updateColumns = (columns: ColumnData[]): ColumnData[] => {
        if (!columns) return []

        return columns.map((column) => {
          if (!column) return column

          if (column.id === columnId) {
            return {
              ...column,
              ...updates,
            }
          }

          if (column.childColumns && column.childColumns.length > 0) {
            return {
              ...column,
              childColumns: updateColumns(column.childColumns),
            }
          }

          return column
        })
      }

      return {
        ...prevLayout,
        columns: updateColumns(prevLayout.columns || []),
      }
    })
  }

  const { component, columnId } = getSelectedComponent()
  const selectedColumn = getSelectedColumn()
  const generatedCode = generateReactCode(layout)

  if (showTemplates) {
    return (
      <TemplatesPage
        onBack={() => setShowTemplates(false)}
        onLoadTemplate={handleLoadTemplate}
        onCreateNew={() => {
          setLayout(DEFAULT_LAYOUT)
          setShowTemplates(false)
        }}
      />
    )
  }

  return (
    <DndProvider backend={HTML5Backend}>
      <div className="flex flex-col h-screen">
        <header className="bg-white border-b border-gray-200 p-4 flex justify-between items-center">
          <h1 className="text-2xl font-bold text-gray-800">React UI Builder</h1>
          <div className="flex space-x-2">
            <Button variant="outline" size="sm" onClick={resetState} className="flex items-center">
              <RotateCcw className="w-4 h-4 mr-1" />
              Reset
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setSaveTemplateDialogOpen(true)}
              className="flex items-center"
            >
              <Layout className="w-4 h-4 mr-1" />
              Save as Template
            </Button>
            <Button variant="outline" size="sm" onClick={() => setShowTemplates(true)} className="flex items-center">
              <Template className="w-4 h-4 mr-1" />
              Templates
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setShowPropertiesPanel(!showPropertiesPanel)}
              className="flex items-center"
            >
              <PanelRight className="w-4 h-4 mr-1" />
              {showPropertiesPanel ? "Hide Properties" : "Show Properties"}
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setShowPreview(!showPreview)}
              className="flex items-center"
            >
              <Eye className="w-4 h-4 mr-1" />
              {showPreview ? "Hide Preview" : "Show Preview"}
            </Button>
          </div>
        </header>

        <div className="flex flex-1 overflow-hidden">
          {!showPreview && (
            <ComponentPalette
              onAddComponent={(type) => {
                // Add to selected column if one is selected, otherwise add to first column
                const targetColumnId =
                  selectedColumnId || (layout.columns && layout.columns[0] ? layout.columns[0].id : null)
                if (targetColumnId) {
                  handleAddComponent(type, targetColumnId)
                }
              }}
              selectedColumnId={selectedColumnId}
            />
          )}

          <div className="flex-1 flex flex-col overflow-hidden">
            {showPreview ? (
              <PreviewPanel code={generatedCode} layout={layout} onBack={() => setShowPreview(false)} />
            ) : (
              <LayoutEditor
                layout={layout}
                selectedComponentId={selectedComponentId}
                selectedColumnId={selectedColumnId}
                onSelectComponent={setSelectedComponentId}
                onSelectColumn={setSelectedColumnId}
                onAddComponent={handleAddComponent}
                onDeleteComponent={handleDeleteComponent}
                onAddColumn={handleAddColumn}
                onDeleteColumn={handleDeleteColumn}
                onUpdateColumnWidth={handleUpdateColumnWidth}
                onUpdateContainerWidth={handleUpdateContainerWidth}
                onMoveComponent={handleMoveComponent}
                onMoveColumn={handleMoveColumn}
                onUpdateColumn={handleUpdateColumn}
              />
            )}
          </div>

          {showPropertiesPanel && !showPreview && (
            <div className="w-80 border-l border-gray-200 overflow-y-auto">
              <div className="flex flex-col h-full">
                <PropertiesPanel
                  component={component}
                  columnId={columnId}
                  column={selectedColumn}
                  onUpdateComponent={handleUpdateComponent}
                  onUpdateColumn={handleUpdateColumn}
                />
                <CodePreview code={generatedCode} />
              </div>
            </div>
          )}
        </div>

        <SaveTemplateDialog
          open={saveTemplateDialogOpen}
          onOpenChange={setSaveTemplateDialogOpen}
          onSave={saveTemplate}
          layout={layout}
        />
      </div>
    </DndProvider>
  )
}
[V0_FILE]typescriptreact:file="components/layout-editor.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import { useRef, useState } from "react"
import type { GridLayout, ColumnData } from "@/lib/types"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Trash2, MoveHorizontal, MoveVertical, Plus } from "lucide-react"
import ComponentRenderer from "./component-renderer"
import { useDrag, useDrop } from "react-dnd"

interface LayoutEditorProps {
  layout: GridLayout
  selectedComponentId: string | null
  selectedColumnId: string | null
  onSelectComponent: (id: string | null) => void
  onSelectColumn: (id: string | null) => void
  onAddComponent: (type: string, columnId: string, defaultProps?: any) => void
  onDeleteComponent: (componentId: string, columnId: string) => void
  onAddColumn: (orientation: "horizontal" | "vertical", parentColumnId?: string) => void
  onDeleteColumn: (columnId: string) => void
  onUpdateColumnWidth: (columnId: string, width: number) => void
  onUpdateContainerWidth: (width: string) => void
  onMoveComponent: (dragIndex: number, hoverIndex: number, sourceColumnId: string, targetColumnId: string) => void
  onMoveColumn: (dragIndex: number, hoverIndex: number, parentId?: string | null) => void
  onUpdateColumn: (columnId: string, updates: Partial<ColumnData>) => void
}

export default function LayoutEditor({
  layout,
  selectedComponentId,
  selectedColumnId,
  onSelectComponent,
  onSelectColumn,
  onAddComponent,
  onDeleteComponent,
  onAddColumn,
  onDeleteColumn,
  onUpdateColumnWidth,
  onUpdateContainerWidth,
  onMoveComponent,
  onMoveColumn,
  onUpdateColumn,
}: LayoutEditorProps) {
  const [localLayout, setLayout] = useState<GridLayout>(layout)

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
  }

  const handleDrop = (e: React.DragEvent, columnId: string) => {
    e.preventDefault()
    const componentType = e.dataTransfer.getData("componentType")
    if (componentType) {
      onAddComponent(componentType, columnId)
    }
  }

  const getColumnWidthClass = (width: number) => {
    const widthMap: Record<number, string> = {
      1: "w-1/12",
      2: "w-2/12",
      3: "w-3/12",
      4: "w-4/12",
      5: "w-5/12",
      6: "w-6/12",
      7: "w-7/12",
      8: "w-8/12",
      9: "w-9/12",
      10: "w-10/12",
      11: "w-11/12",
      12: "w-full",
    }
    return widthMap[width] || "w-full"
  }

  const handleUpdateColumn = (columnId: string, updates: Partial<ColumnData>) => {
    setLayout((prevLayout) => {
      // Recursive function to update nested columns
      const updateColumns = (columns: ColumnData[]): ColumnData[] => {
        if (!columns) return []

        return columns.map((column) => {
          if (!column) return column

          if (column.id === columnId) {
            return {
              ...column,
              ...updates,
            }
          }

          if (column.childColumns && column.childColumns.length > 0) {
            return {
              ...column,
              childColumns: updateColumns(column.childColumns),
            }
          }

          return column
        })
      }

      return {
        ...prevLayout,
        columns: updateColumns(prevLayout.columns || []),
      }
    })
  }

  // Define renderColumns function at the component level so it can be passed to child components
  const renderColumns = (columns: ColumnData[] = [], parentId: string | null = null) => {
    // Add a null check for columns
    if (!columns || columns.length === 0) {
      return <div className="flex flex-wrap"></div>
    }

    return (
      <div className="flex flex-wrap">
        {columns.map((column, index) => {
          // Skip rendering if column is undefined
          if (!column) return null

          return (
            <ColumnItem
              key={column.id}
              column={column}
              index={index}
              parentId={parentId}
              selectedComponentId={selectedComponentId}
              selectedColumnId={selectedColumnId}
              onSelectComponent={onSelectComponent}
              onSelectColumn={onSelectColumn}
              onAddComponent={onAddComponent}
              onDeleteComponent={onDeleteComponent}
              onAddColumn={onAddColumn}
              onDeleteColumn={onDeleteColumn}
              onUpdateColumnWidth={onUpdateColumnWidth}
              onMoveComponent={onMoveComponent}
              onMoveColumn={onMoveColumn}
              getColumnWidthClass={getColumnWidthClass}
              handleDragOver={handleDragOver}
              handleDrop={handleDrop}
              renderColumns={renderColumns} // Pass the renderColumns function as a prop
              onUpdateColumn={handleUpdateColumn}
            />
          )
        })}
      </div>
    )
  }

  return (
    <div className="flex-1 p-4 overflow-auto">
      <div className="mb-4 flex items-center space-x-4">
        <div className="flex items-center space-x-2">
          <span className="text-sm font-medium">Container Width:</span>
          <Input
            type="text"
            value={layout.containerWidth}
            onChange={(e) => onUpdateContainerWidth(e.target.value)}
            className="w-32"
          />
        </div>
        <Button variant="outline" size="sm" onClick={() => onAddColumn("horizontal")} className="flex items-center">
          <MoveHorizontal className="w-4 h-4 mr-1" />
          Add Horizontal Column
        </Button>
        <Button variant="outline" size="sm" onClick={() => onAddColumn("vertical")} className="flex items-center">
          <MoveVertical className="w-4 h-4 mr-1" />
          Add Vertical Column
        </Button>
      </div>

      <div className="border border-gray-300 rounded-md p-4 min-h-[500px]" style={{ width: layout.containerWidth }}>
        {renderColumns(layout.columns)}
      </div>
    </div>
  )
}

interface ColumnItemProps {
  column: ColumnData
  index: number
  parentId: string | null
  selectedComponentId: string | null
  selectedColumnId: string | null
  onSelectComponent: (id: string | null) => void
  onSelectColumn: (id: string | null) => void
  onAddComponent: (type: string, columnId: string, defaultProps?: any) => void
  onDeleteComponent: (componentId: string, columnId: string) => void
  onAddColumn: (orientation: "horizontal" | "vertical", parentColumnId?: string) => void
  onDeleteColumn: (columnId: string) => void
  onUpdateColumnWidth: (columnId: string, width: number) => void
  onMoveComponent: (dragIndex: number, hoverIndex: number, sourceColumnId: string, targetColumnId: string) => void
  onMoveColumn: (dragIndex: number, hoverIndex: number, parentId?: string | null) => void
  getColumnWidthClass: (width: number) => string
  handleDragOver: (e: React.DragEvent) => void
  handleDrop: (e: React.DragEvent, columnId: string) => void
  renderColumns: (columns: ColumnData[], parentId?: string | null) => React.ReactNode // Add this prop
  onUpdateColumn: (columnId: string, updates: Partial<ColumnData>) => void
}

function ColumnItem({
  column,
  index,
  parentId,
  selectedComponentId,
  selectedColumnId,
  onSelectComponent,
  onSelectColumn,
  onAddComponent,
  onDeleteComponent,
  onAddColumn,
  onDeleteColumn,
  onUpdateColumnWidth,
  onMoveComponent,
  onMoveColumn,
  getColumnWidthClass,
  handleDragOver,
  handleDrop,
  renderColumns, // Receive the renderColumns function as a prop
  onUpdateColumn,
}: ColumnItemProps) {
  const ref = useRef<HTMLDivElement>(null)

  // Ensure column has orientation property with a default value
  const orientation = column?.orientation || "horizontal"

  // Set up drag for column
  const [{ isDragging }, drag] = useDrag({
    type: "COLUMN",
    item: { type: "COLUMN", id: column.id, index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  })

  // Set up drop for column
  const [{ isOver }, drop] = useDrop({
    accept: "COLUMN",
    hover(item: any, monitor) {
      if (!ref.current) {
        return
      }

      // Only handle items of type COLUMN
      if (item.type !== "COLUMN") {
        return
      }

      const dragIndex = item.index
      const hoverIndex = index

      // Don't replace items with themselves
      if (dragIndex === hoverIndex) {
        return
      }

      // Time to actually perform the action
      onMoveColumn(dragIndex, hoverIndex, parentId)

      // Note: we're mutating the monitor item here!
      // Generally it's better to avoid mutations,
      // but it's good here for the sake of performance
      // to avoid expensive index searches.
      item.index = hoverIndex
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  })

  // Initialize drag and drop refs
  drag(drop(ref))

  const isSelected = selectedColumnId === column.id

  // Ensure column has components array
  const components = column?.components || []

  // Ensure column has childColumns array
  const childColumns = column?.childColumns || []

  return (
    <div
      ref={ref}
      className={`${orientation === "horizontal" ? getColumnWidthClass(column.width) : "w-full"} p-2`}
      style={{ opacity: isDragging ? 0.5 : 1 }}
    >
      <div
        className={`border border-dashed ${
          isSelected ? "border-blue-500 bg-blue-50" : "border-gray-300"
        } rounded-md p-4 min-h-[100px] relative`}
        onDragOver={handleDragOver}
        onDrop={(e) => handleDrop(e, column.id)}
        onClick={(e) => {
          e.stopPropagation()
          onSelectColumn(column.id)
        }}
      >
        <div className="absolute top-2 right-2 flex space-x-1">
          {orientation === "horizontal" && (
            <div className="flex items-center space-x-1 mr-2">
              <Input
                type="number"
                min="1"
                max="12"
                value={column.width}
                onChange={(e) => onUpdateColumnWidth(column.id, Number.parseInt(e.target.value))}
                className="w-16 h-6 text-xs"
                onClick={(e) => e.stopPropagation()}
              />
              <span className="text-xs text-gray-500">/ 12</span>
            </div>
          )}
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6"
            onClick={(e) => {
              e.stopPropagation()
              onAddColumn("horizontal", column.id)
            }}
            title="Add Nested Horizontal Column"
          >
            <Plus className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6"
            onClick={(e) => {
              e.stopPropagation()
              onDeleteColumn(column.id)
            }}
          >
            <Trash2 className="h-4 w-4" />
          </Button>
        </div>

        {isSelected && (
          <div className="absolute top-2 left-2">
            <span className="text-xs bg-blue-500 text-white px-2 py-1 rounded-md">Selected Column</span>
          </div>
        )}

        {components.length === 0 && childColumns.length === 0 ? (
          <div className="flex items-center justify-center h-full min-h-[80px] text-gray-400">
            {isSelected ? "Click a component to add here" : "Click to select this column"}
          </div>
        ) : (
          <div className="space-y-2 pt-6">
            {components.map((component, compIndex) => (
              <ComponentItem
                key={component.id}
                component={component}
                index={compIndex}
                columnId={column.id}
                isSelected={selectedComponentId === component.id}
                onSelect={() => onSelectComponent(component.id)}
                onDelete={() => onDeleteComponent(component.id, column.id)}
                onMoveComponent={onMoveComponent}
              />
            ))}
          </div>
        )}

        {childColumns.length > 0 && (
          <div className="mt-4 border-t border-gray-200 pt-4">
            {/* Use the renderColumns prop here */}
            {renderColumns(childColumns, column.id)}
          </div>
        )}
      </div>
    </div>
  )
}

interface ComponentItemProps {
  component: any
  index: number
  columnId: string
  isSelected: boolean
  onSelect: () => void
  onDelete: () => void
  onMoveComponent: (dragIndex: number, hoverIndex: number, sourceColumnId: string, targetColumnId: string) => void
}

function ComponentItem({
  component,
  index,
  columnId,
  isSelected,
  onSelect,
  onDelete,
  onMoveComponent,
}: ComponentItemProps) {
  const ref = useRef<HTMLDivElement>(null)

  // Set up drag for component
  const [{ isDragging }, drag] = useDrag({
    type: "COMPONENT",
    item: { type: "COMPONENT", id: component.id, index, columnId },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  })

  // Set up drop for component
  const [{ isOver }, drop] = useDrop({
    accept: "COMPONENT",
    hover(item: any, monitor) {
      if (!ref.current) {
        return
      }

      // Only handle items of type COMPONENT
      if (item.type !== "COMPONENT") {
        return
      }

      const dragIndex = item.index
      const hoverIndex = index
      const sourceColumnId = item.columnId
      const targetColumnId = columnId

      // Don't replace items with themselves
      if (dragIndex === hoverIndex && sourceColumnId === targetColumnId) {
        return
      }

      // Time to actually perform the action
      onMoveComponent(dragIndex, hoverIndex, sourceColumnId, targetColumnId)

      // Note: we're mutating the monitor item here!
      // Generally it's better to avoid mutations,
      // but it's good here for the sake of performance
      // to avoid expensive index searches.
      item.index = hoverIndex
      item.columnId = targetColumnId
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  })

  // Initialize drag and drop refs
  drag(drop(ref))

  return (
    <div
      ref={ref}
      className={`p-2 rounded-md ${isSelected ? "ring-2 ring-blue-500" : "hover:bg-gray-50"} ${
        isDragging ? "opacity-50" : "opacity-100"
      } ${isOver ? "bg-gray-100" : ""}`}
      onClick={(e) => {
        e.stopPropagation()
        onSelect()
      }}
      style={{ cursor: "move" }}
    >
      <ComponentRenderer component={component} isSelected={isSelected} onDelete={onDelete} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/code-generator.ts" isQuickEdit="true"
import type { GridLayout, ColumnData, ComponentData } from "./types"

export function generateReactCode(layout: GridLayout): string {
  const imports = generateImports(layout)
  const componentCode = generateComponentCode(layout)

  return `${imports}

export default function GeneratedUI() {
  return (
${componentCode}
  );
}`
}

function generateImports(layout: GridLayout): string {
  const importMap: Record<string, Set<string>> = {
    react: new Set(["useState", "useEffect"]),
    "@/components/ui": new Set(),
  }

  // Helper function to analyze components in columns
  const analyzeComponents = (columns: ColumnData[] = []) => {
    if (!columns) return

    columns.forEach((column) => {
      if (!column) return

      if (column.components) {
        column.components.forEach((component) => {
          if (!component) return

          switch (component.type) {
            case "button":
              importMap["@/components/ui"].add("Button")
              break
            case "input":
              importMap["@/components/ui"].add("Input")
              break
            // Add other component imports as needed
          }
        })
      }

      // Recursively analyze nested columns
      if (column.childColumns && column.childColumns.length > 0) {
        analyzeComponents(column.childColumns)
      }
    })
  }

  // Start analysis from root columns
  analyzeComponents(layout.columns)

  // Generate import statements
  let importStatements = ""

  for (const [module, components] of Object.entries(importMap)) {
    if (components.size > 0) {
      importStatements += `import { ${Array.from(components).join(", ")} } from "${module}";\n`
    }
  }

  return importStatements
}

function generateComponentCode(layout: GridLayout): string {
  let code = `    <div style={{ width: "${layout.containerWidth || "100%"}", margin: "0 auto" }}>\n`

  // Helper function to recursively generate column code
  const generateColumnsCode = (columns: ColumnData[] = [], indentLevel = 6) => {
    if (!columns || columns.length === 0) {
      return `${" ".repeat(indentLevel)}<div className="flex flex-wrap"></div>`
    }

    const indent = " ".repeat(indentLevel)
    let columnsCode = ""

    columns.forEach((column) => {
      if (!column) return

      const orientation = column.orientation || "horizontal"
      const columnWidthClass = getColumnWidthClass(column.width)
      const flexDirection = orientation === "horizontal" ? "flex-row" : "flex-col"

      // Add flex layout and gap classes if they exist
      const flexLayout = column.flexLayout || "items-start justify-start"
      const flexGap = column.gap || "0"

      // Extract items and justify values from flexLayout
      const itemsMatch = flexLayout.match(/items-([a-z-]+)/)
      const justifyMatch = flexLayout.match(/justify-([a-z-]+)/)
      const itemsValue = itemsMatch ? itemsMatch[1] : "start"
      const justifyValue = justifyMatch ? justifyMatch[1] : "start"

      const flexClasses = `flex ${flexDirection} items-${itemsValue} justify-${justifyValue} gap-${flexGap}`

      columnsCode += `${indent}<div className="${columnWidthClass} p-2">\n`
      columnsCode += `${indent}  <div className="${flexClasses} p-4">\n`

      // Add components in this column
      if (column.components && column.components.length > 0) {
        column.components.forEach((component) => {
          if (!component) return
          columnsCode += `${indent}    ${renderComponent(component)}\n`
        })
      }

      // Add nested columns if they exist
      if (column.childColumns && column.childColumns.length > 0) {
        columnsCode += `${indent}    ${generateColumnsCode(column.childColumns, indentLevel + 4)}\n`
      }

      columnsCode += `${indent}  </div>\n`
      columnsCode += `${indent}</div>\n`
    })

    return columnsCode.trim()
  }

  code += generateColumnsCode(layout.columns)
  code += `\n    </div>`

  return code
}

function getColumnWidthClass(width = 12): string {
  const widthMap: Record<number, string> = {
    1: "w-1/12",
    2: "w-2/12",
    3: "w-3/12",
    4: "w-4/12",
    5: "w-5/12",
    6: "w-6/12",
    7: "w-7/12",
    8: "w-8/12",
    9: "w-9/12",
    10: "w-10/12",
    11: "w-11/12",
    12: "w-full",
  }
  return widthMap[width] || "w-full"
}

function renderComponent(component: ComponentData): string {
  if (!component) return ""

  const { type, props = {} } = component

  switch (type) {
    case "button":
      return `<Button${renderProps(props)}>${props.text || "Button"}</Button>`
    case "input":
      return `<Input${renderProps(props)} />`
    case "text":
      const Element = props.element || "p"
      return `<${Element}${renderProps(props)}>${props.text || (Element === "p" ? "Paragraph text" : `${Element.toUpperCase()} Heading`)}</${Element}>`
    case "image":
      return `<img${renderProps(props)} />`
    case "div":
      return `<div${renderProps(props)}>${props.text || "Div Container"}</div>`
    case "nested-column":
      return `<div className="nested-column-container">Nested Column</div>`
    default:
      return `<div>Unknown component: ${type}</div>`
  }
}

function renderProps(props: Record<string, any> = {}): string {
  let propsString = ""

  // Handle className
  if (props.className) {
    propsString += ` className="${props.className}"`
  }

  // Handle component-specific props
  switch (true) {
    case "variant" in props:
      propsString += ` variant="${props.variant}"`
      break
    case "size" in props:
      propsString += ` size="${props.size}"`
      break
    case "placeholder" in props:
      propsString += ` placeholder="${props.placeholder}"`
      break
    case "type" in props && props.type !== "div":
      propsString += ` type="${props.type}"`
      break
  }

  // Handle image-specific props
  if ("src" in props) {
    propsString += ` src="${props.src}"`
  }
  if ("alt" in props) {
    propsString += ` alt="${props.alt}"`
  }

  // Handle style props
  const styleProps = ["width", "height", "backgroundColor", "padding", "borderRadius", "border", "fontSize"]
  const hasStyleProps = styleProps.some((prop) => prop in props)

  if (hasStyleProps) {
    propsString += ` style={{`
    let styleString = ""

    styleProps.forEach((prop) => {
      if (prop in props) {
        // Convert kebab-case to camelCase for React style props
        const camelCaseProp = prop.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
        styleString += `${camelCaseProp}: "${props[prop]}", `
      }
    })

    propsString += styleString.slice(0, -2) // Remove trailing comma and space
    propsString += `}}`
  }

  return propsString
}</article></body></html>

Generated Code

Step 1: Create a new React project

Step 2: Install required dependencies

Step 3: Create a new component file

Step 4: Import and use the component

Step 5: Run your application

Components