@specverse/engines 4.1.28 → 4.2.0

package/dist/libs/instance-factories/views/templates/react/adapters/shadcn-adapter.js

@@ -1,719 +0,0 @@
-const shadcnAdapter = {
-  name: "shadcn/ui",
-  version: "latest",
-  description: "shadcn/ui component library adapter",
-  baseDependencies: [
-    { name: "react", version: "^18.2.0" },
-    { name: "react-dom", version: "^18.2.0" },
-    { name: "tailwindcss", version: "^3.4.0" },
-    { name: "@radix-ui/react-icons", version: "^1.3.0" },
-    { name: "class-variance-authority", version: "^0.7.0" },
-    { name: "clsx", version: "^2.0.0" },
-    { name: "tailwind-merge", version: "^2.0.0" }
-  ],
-  config: {
-    importPrefix: "@/components/ui",
-    importStyle: "named"
-  },
-  components: {
-    // =====================================================================
-    // DATA DISPLAY (9 types)
-    // =====================================================================
-    table: {
-      imports: [
-        "import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table'"
-      ],
-      render: (ctx) => {
-        const { properties, model, name } = ctx;
-        const columns = properties.columns || ["id"];
-        const modelVar = model?.name?.toLowerCase() || "item";
-        const pluralVar = `${modelVar}s`;
-        return `<Table>
-  <TableHeader>
-    <TableRow>
-      ${columns.map((col) => `<TableHead>${col}</TableHead>`).join("\n      ")}
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    {${pluralVar}?.map((${modelVar}) => (
-      <TableRow key={${modelVar}.id}>
-        ${columns.map((col) => `<TableCell>{${modelVar}.${col}}</TableCell>`).join("\n        ")}
-      </TableRow>
-    ))}
-  </TableBody>
-</Table>`;
-      },
-      dependencies: [{ name: "@/components/ui/table", version: "latest" }]
-    },
-    list: {
-      imports: ["import { ScrollArea } from '@/components/ui/scroll-area'"],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        const className = properties.dense ? "space-y-1" : "space-y-4";
-        return `<ScrollArea className="${className}">
-  ${children || "/* List items */"}
-</ScrollArea>`;
-      }
-    },
-    grid: {
-      imports: [],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        const columns = properties.columns || 3;
-        const gap = properties.gap === "small" ? "2" : properties.gap === "large" ? "8" : "4";
-        return `<div className="grid grid-cols-${columns} gap-${gap}">
-  ${children || "/* Grid items */"}
-</div>`;
-      }
-    },
-    card: {
-      imports: [
-        "import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'"
-      ],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        const { title, subtitle, variant } = properties;
-        if (variant === "metric") {
-          return `<Card>
-  <CardHeader>
-    <CardTitle className="text-sm font-medium">${title || properties.metric || "Metric"}</CardTitle>
-  </CardHeader>
-  <CardContent>
-    <div className="text-2xl font-bold">{/* Value */}</div>
-    ${properties.showTrend ? '<p className="text-xs text-muted-foreground">\u2191 12% from last month</p>' : ""}
-  </CardContent>
-</Card>`;
-        }
-        return `<Card>
-  ${title ? `<CardHeader>
-    <CardTitle>${title}</CardTitle>
-    ${subtitle ? `<CardDescription>${subtitle}</CardDescription>` : ""}
-  </CardHeader>` : ""}
-  <CardContent>
-    ${children || "/* Card content */"}
-  </CardContent>
-</Card>`;
-      }
-    },
-    chart: {
-      imports: [
-        "import { LineChart, Line, BarChart, Bar, PieChart, Pie, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'"
-      ],
-      render: (ctx) => {
-        const { properties } = ctx;
-        const chartType = properties.chartType || "line";
-        const chartMap = {
-          line: '<LineChart data={data}><CartesianGrid strokeDasharray="3 3" /><XAxis dataKey="name" /><YAxis /><Tooltip /><Legend /><Line type="monotone" dataKey="value" stroke="#8884d8" /></LineChart>',
-          bar: '<BarChart data={data}><CartesianGrid strokeDasharray="3 3" /><XAxis dataKey="name" /><YAxis /><Tooltip /><Legend /><Bar dataKey="value" fill="#8884d8" /></BarChart>',
-          pie: '<PieChart><Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" label /></PieChart>',
-          trend: '<LineChart data={data}><Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} dot={false} /></LineChart>'
-        };
-        const chart = chartMap[chartType] || chartMap.line;
-        return `<ResponsiveContainer width="100%" height={${properties.height || 300}}>
-  ${chart}
-</ResponsiveContainer>`;
-      },
-      dependencies: [{ name: "recharts", version: "^2.10.0" }]
-    },
-    tree: {
-      imports: [],
-      render: () => `<div className="tree-view">
-  {/* TODO: Implement tree component */}
-</div>`
-    },
-    timeline: {
-      imports: [],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        const orientation = properties.orientation || "vertical";
-        return `<div className="relative ${orientation === "horizontal" ? "flex space-x-8" : "space-y-8"}">
-  ${children || "/* Timeline items */"}
-</div>`;
-      }
-    },
-    avatar: {
-      imports: ["import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        const size = properties.size === "large" ? "h-16 w-16" : properties.size === "small" ? "h-8 w-8" : "h-12 w-12";
-        return `<Avatar className="${size}">
-  <AvatarImage src={${properties.src || "user.avatar"}} alt="${properties.alt || "Avatar"}" />
-  <AvatarFallback>${properties.initials || "U"}</AvatarFallback>
-</Avatar>`;
-      }
-    },
-    image: {
-      imports: [],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<img
-  src={${properties.src || "imageSrc"}}
-  alt="${properties.alt || ""}"
-  className="${properties.objectFit === "cover" ? "object-cover" : "object-contain"} ${properties.lazy ? 'loading="lazy"' : ""}"
-/>`;
-      }
-    },
-    // =====================================================================
-    // FORMS & INPUTS (11 types)
-    // =====================================================================
-    form: {
-      imports: ["import { Form } from '@/components/ui/form'"],
-      render: (ctx) => {
-        const { children } = ctx;
-        return `<Form {...form}>
-  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-    ${children || "/* Form fields */"}
-  </form>
-</Form>`;
-      }
-    },
-    input: {
-      imports: ["import { Input } from '@/components/ui/input'", "import { Label } from '@/components/ui/label'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<div className="grid w-full items-center gap-1.5">
-  ${properties.label ? `<Label htmlFor="${properties.name || "input"}">${properties.label}${properties.required ? " *" : ""}</Label>` : ""}
-  <Input
-    type="${properties.type || "text"}"
-    id="${properties.name || "input"}"
-    placeholder="${properties.placeholder || ""}"
-    ${properties.required ? "required" : ""}
-    ${properties.disabled ? "disabled" : ""}
-  />
-  ${properties.helperText ? `<p className="text-sm text-muted-foreground">${properties.helperText}</p>` : ""}
-</div>`;
-      }
-    },
-    textarea: {
-      imports: ["import { Textarea } from '@/components/ui/textarea'", "import { Label } from '@/components/ui/label'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<div className="grid w-full gap-1.5">
-  ${properties.label ? `<Label htmlFor="${properties.name || "textarea"}">${properties.label}</Label>` : ""}
-  <Textarea
-    id="${properties.name || "textarea"}"
-    placeholder="${properties.placeholder || ""}"
-    rows={${properties.rows || 4}}
-    ${properties.required ? "required" : ""}
-  />
-</div>`;
-      }
-    },
-    select: {
-      imports: [
-        "import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'",
-        "import { Label } from '@/components/ui/label'"
-      ],
-      render: (ctx) => {
-        const { properties } = ctx;
-        const options = properties.options || [];
-        return `<div className="grid w-full gap-1.5">
-  ${properties.label ? `<Label>${properties.label}${properties.required ? " *" : ""}</Label>` : ""}
-  <Select>
-    <SelectTrigger>
-      <SelectValue placeholder="${properties.placeholder || "Select option"}" />
-    </SelectTrigger>
-    <SelectContent>
-      ${options.map((opt) => `<SelectItem value="${opt}">${opt}</SelectItem>`).join("\n      ")}
-    </SelectContent>
-  </Select>
-</div>`;
-      }
-    },
-    checkbox: {
-      imports: ["import { Checkbox } from '@/components/ui/checkbox'", "import { Label } from '@/components/ui/label'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<div className="flex items-center space-x-2">
-  <Checkbox id="${properties.name || "checkbox"}" ${properties.checked ? "checked" : ""} ${properties.disabled ? "disabled" : ""} />
-  ${properties.label ? `<Label htmlFor="${properties.name || "checkbox"}">${properties.label}</Label>` : ""}
-</div>`;
-      }
-    },
-    radio: {
-      imports: ["import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'", "import { Label } from '@/components/ui/label'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        const options = properties.options || [];
-        return `<div className="grid gap-2">
-  ${properties.label ? `<Label>${properties.label}</Label>` : ""}
-  <RadioGroup>
-    ${options.map((opt) => `<div className="flex items-center space-x-2">
-      <RadioGroupItem value="${opt}" id="${opt}" />
-      <Label htmlFor="${opt}">${opt}</Label>
-    </div>`).join("\n    ")}
-  </RadioGroup>
-</div>`;
-      }
-    },
-    slider: {
-      imports: ["import { Slider } from '@/components/ui/slider'", "import { Label } from '@/components/ui/label'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<div className="grid gap-2">
-  ${properties.label ? `<Label>${properties.label}</Label>` : ""}
-  <Slider
-    min={${properties.min || 0}}
-    max={${properties.max || 100}}
-    step={${properties.step || 1}}
-    defaultValue={[${properties.value || 50}]}
-  />
-  ${properties.showValue ? '<span className="text-sm text-muted-foreground">{value}</span>' : ""}
-</div>`;
-      }
-    },
-    switch: {
-      imports: ["import { Switch } from '@/components/ui/switch'", "import { Label } from '@/components/ui/label'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<div className="flex items-center space-x-2">
-  <Switch id="${properties.name || "switch"}" ${properties.checked ? "checked" : ""} ${properties.disabled ? "disabled" : ""} />
-  ${properties.label ? `<Label htmlFor="${properties.name || "switch"}">${properties.label}</Label>` : ""}
-</div>`;
-      }
-    },
-    autocomplete: {
-      imports: [
-        "import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '@/components/ui/command'",
-        "import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'",
-        "import { Button } from '@/components/ui/button'"
-      ],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<Popover>
-  <PopoverTrigger asChild>
-    <Button variant="outline" role="combobox">
-      {selected || "${properties.placeholder || "Select..."}"}
-    </Button>
-  </PopoverTrigger>
-  <PopoverContent className="w-[200px] p-0">
-    <Command>
-      <CommandInput placeholder="${properties.label || "Search..."}" />
-      <CommandEmpty>No results found.</CommandEmpty>
-      <CommandGroup>
-        {/* Options */}
-      </CommandGroup>
-    </Command>
-  </PopoverContent>
-</Popover>`;
-      }
-    },
-    datepicker: {
-      imports: [
-        "import { Calendar } from '@/components/ui/calendar'",
-        "import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'",
-        "import { Button } from '@/components/ui/button'",
-        "import { format } from 'date-fns'"
-      ],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<Popover>
-  <PopoverTrigger asChild>
-    <Button variant="outline">
-      {date ? format(date, "${properties.format || "PPP"}") : <span>Pick a date</span>}
-    </Button>
-  </PopoverTrigger>
-  <PopoverContent className="w-auto p-0">
-    <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
-  </PopoverContent>
-</Popover>`;
-      },
-      dependencies: [{ name: "date-fns", version: "^3.0.0" }]
-    },
-    timepicker: {
-      imports: ["import { Input } from '@/components/ui/input'", "import { Label } from '@/components/ui/label'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<div className="grid w-full gap-1.5">
-  ${properties.label ? `<Label>${properties.label}</Label>` : ""}
-  <Input type="time" ${properties.required ? "required" : ""} />
-</div>`;
-      }
-    },
-    // =====================================================================
-    // ACTIONS (5 types)
-    // =====================================================================
-    button: {
-      imports: ["import { Button } from '@/components/ui/button'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        const variants = {
-          primary: "default",
-          secondary: "secondary",
-          danger: "destructive",
-          ghost: "ghost",
-          link: "link"
-        };
-        const variant = variants[properties.variant || "primary"] || "default";
-        return `<Button
-  variant="${variant}"
-  size="${properties.size || "default"}"
-  ${properties.disabled ? "disabled" : ""}
-  ${properties.type ? `type="${properties.type}"` : ""}
->
-  ${properties.icon ? `<${properties.icon} className="mr-2 h-4 w-4" />` : ""}
-  ${properties.label || "Button"}
-</Button>`;
-      }
-    },
-    "button-group": {
-      imports: [],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        const orientation = properties.orientation || "horizontal";
-        return `<div className="flex ${orientation === "vertical" ? "flex-col" : "flex-row"} gap-2">
-  ${children || "/* Buttons */"}
-</div>`;
-      }
-    },
-    link: {
-      imports: ["import Link from 'next/link'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<Link
-  href="${properties.href || "#"}"
-  className="${properties.underline === false ? "no-underline" : "underline"}"
-  ${properties.external ? 'target="_blank" rel="noopener noreferrer"' : ""}
->
-  ${properties.label || "Link"}
-</Link>`;
-      }
-    },
-    icon: {
-      imports: [],
-      render: (ctx) => {
-        const { properties } = ctx;
-        const sizeMap = { small: "h-4 w-4", medium: "h-6 w-6", large: "h-8 w-8" };
-        const size = sizeMap[properties.size || "medium"] || "h-6 w-6";
-        return `<${properties.name || "Icon"} className="${size} ${properties.color ? `text-${properties.color}` : ""}" />`;
-      }
-    },
-    menu: {
-      imports: [
-        "import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'"
-      ],
-      render: (ctx) => {
-        const { children } = ctx;
-        return `<DropdownMenu>
-  <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
-  <DropdownMenuContent>
-    ${children || "/* Menu items */"}
-  </DropdownMenuContent>
-</DropdownMenu>`;
-      }
-    },
-    // =====================================================================
-    // OVERLAYS & FEEDBACK (9 types)
-    // =====================================================================
-    modal: {
-      imports: [
-        "import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'"
-      ],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        return `<Dialog open={isOpen} onOpenChange={setIsOpen}>
-  <DialogContent className="${properties.size === "small" ? "sm:max-w-[425px]" : properties.size === "large" ? "sm:max-w-[725px]" : "sm:max-w-[525px]"}">
-    ${properties.title ? `<DialogHeader>
-      <DialogTitle>${properties.title}</DialogTitle>
-    </DialogHeader>` : ""}
-    <div className="py-4">
-      ${children || "/* Modal content */"}
-    </div>
-    ${properties.footer ? "<DialogFooter>{/* Footer actions */}</DialogFooter>" : ""}
-  </DialogContent>
-</Dialog>`;
-      }
-    },
-    dialog: {
-      imports: ["import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<AlertDialog>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>${properties.title || "Alert"}</AlertDialogTitle>
-      <AlertDialogDescription>${properties.message || ""}</AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction>Continue</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>`;
-      }
-    },
-    drawer: {
-      imports: ["import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'"],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        return `<Sheet>
-  <SheetContent side="${properties.position || "right"}">
-    <SheetHeader>
-      <SheetTitle>${properties.title || ""}</SheetTitle>
-    </SheetHeader>
-    <div className="py-4">
-      ${children || "/* Drawer content */"}
-    </div>
-  </SheetContent>
-</Sheet>`;
-      }
-    },
-    popover: {
-      imports: ["import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'"],
-      render: (ctx) => {
-        const { children } = ctx;
-        return `<Popover>
-  <PopoverTrigger>Trigger</PopoverTrigger>
-  <PopoverContent>
-    ${children || "Popover content"}
-  </PopoverContent>
-</Popover>`;
-      }
-    },
-    tooltip: {
-      imports: ["import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger>Hover</TooltipTrigger>
-    <TooltipContent>
-      <p>${properties.content || "Tooltip content"}</p>
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>`;
-      }
-    },
-    alert: {
-      imports: ["import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<Alert variant="${properties.variant || "default"}">
-  ${properties.title ? `<AlertTitle>${properties.title}</AlertTitle>` : ""}
-  <AlertDescription>${properties.message || ""}</AlertDescription>
-</Alert>`;
-      }
-    },
-    snackbar: {
-      imports: ["import { useToast } from '@/components/ui/use-toast'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `toast({
-  title: "${properties.message || "Notification"}",
-  duration: ${properties.duration || 3e3},
-})`;
-      }
-    },
-    badge: {
-      imports: ["import { Badge } from '@/components/ui/badge'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<Badge variant="${properties.variant || "default"}">${properties.content || ""}</Badge>`;
-      }
-    },
-    spinner: {
-      imports: [],
-      render: (ctx) => {
-        const { properties } = ctx;
-        const sizeMap = { small: "h-4 w-4", medium: "h-8 w-8", large: "h-12 w-12" };
-        const size = sizeMap[properties.size || "medium"] || "h-8 w-8";
-        return `<div className="flex items-center justify-center">
-  <div className="${size} animate-spin rounded-full border-b-2 border-gray-900"></div>
-</div>`;
-      }
-    },
-    // =====================================================================
-    // NAVIGATION (5 types)
-    // =====================================================================
-    tabs: {
-      imports: ["import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'"],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        const sections = properties.sections || ["tab1", "tab2"];
-        return `<Tabs defaultValue="${sections[0]}">
-  <TabsList>
-    ${sections.map((section) => `<TabsTrigger value="${section}">${section}</TabsTrigger>`).join("\n    ")}
-  </TabsList>
-  ${sections.map((section) => `<TabsContent value="${section}">
-    {/* ${section} content */}
-  </TabsContent>`).join("\n  ")}
-</Tabs>`;
-      }
-    },
-    breadcrumb: {
-      imports: [],
-      render: (ctx) => {
-        return `<nav className="flex" aria-label="Breadcrumb">
-  <ol className="inline-flex items-center space-x-1">
-    {/* Breadcrumb items */}
-  </ol>
-</nav>`;
-      }
-    },
-    navbar: {
-      imports: [],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        return `<nav className="${properties.sticky ? "sticky top-0" : ""} bg-background border-b">
-  <div className="container flex h-16 items-center justify-between">
-    ${children || "/* Navigation items */"}
-  </div>
-</nav>`;
-      }
-    },
-    sidebar: {
-      imports: [],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        return `<aside className="w-${properties.width || 64} border-r ${properties.position === "right" ? "order-last" : ""}">
-  <div className="h-full px-3 py-4">
-    ${children || "/* Sidebar items */"}
-  </div>
-</aside>`;
-      }
-    },
-    pagination: {
-      imports: [
-        "import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@/components/ui/pagination'"
-      ],
-      render: (ctx) => {
-        return `<Pagination>
-  <PaginationContent>
-    <PaginationItem>
-      <PaginationPrevious href="#" />
-    </PaginationItem>
-    {/* Page numbers */}
-    <PaginationItem>
-      <PaginationNext href="#" />
-    </PaginationItem>
-  </PaginationContent>
-</Pagination>`;
-      }
-    },
-    // =====================================================================
-    // LAYOUT (6 types)
-    // =====================================================================
-    accordion: {
-      imports: ["import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'"],
-      render: (ctx) => {
-        const { children } = ctx;
-        return `<Accordion type="single" collapsible>
-  ${children || "/* Accordion items */"}
-</Accordion>`;
-      }
-    },
-    carousel: {
-      imports: [],
-      render: (ctx) => {
-        const { children } = ctx;
-        return `<div className="relative">
-  {/* Carousel implementation */}
-  ${children || ""}
-</div>`;
-      }
-    },
-    container: {
-      imports: [],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        const layout = properties.layout || "vertical";
-        const className = layout === "horizontal" ? "flex flex-row" : layout === "grid" ? "grid" : "flex flex-col";
-        return `<div className="${className} ${properties.gap ? `gap-${properties.gap}` : ""} ${properties.scrollable ? "overflow-auto" : ""}">
-  ${children || "/* Container content */"}
-</div>`;
-      }
-    },
-    divider: {
-      imports: ["import { Separator } from '@/components/ui/separator'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<Separator orientation="${properties.orientation || "horizontal"}" />`;
-      }
-    },
-    header: {
-      imports: [],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        return `<header>
-  ${properties.title ? `<h1 className="text-3xl font-bold">${properties.title}</h1>` : ""}
-  ${properties.subtitle ? `<p className="text-muted-foreground">${properties.subtitle}</p>` : ""}
-  ${children || ""}
-</header>`;
-      }
-    },
-    footer: {
-      imports: [],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        return `<footer className="${properties.sticky ? "sticky bottom-0" : ""} border-t bg-background">
-  <div className="container py-6">
-    ${children || "/* Footer content */"}
-    ${properties.copyright ? `<p className="text-sm text-muted-foreground">${properties.copyright}</p>` : ""}
-  </div>
-</footer>`;
-      }
-    },
-    // =====================================================================
-    // PROGRESS (2 types)
-    // =====================================================================
-    "progress-bar": {
-      imports: ["import { Progress } from '@/components/ui/progress'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<div className="space-y-2">
-  ${properties.label ? `<div className="flex justify-between text-sm"><span>Progress</span><span>{${properties.value || 0}}%</span></div>` : ""}
-  <Progress value={${properties.value || 0}} max={${properties.max || 100}} />
-</div>`;
-      }
-    },
-    "progress-circle": {
-      imports: [],
-      render: (ctx) => {
-        const { properties } = ctx;
-        const size = properties.size === "large" ? "h-32 w-32" : properties.size === "small" ? "h-16 w-16" : "h-24 w-24";
-        return `<div className="${size} relative">
-  <svg className="rotate-[-90deg]" viewBox="0 0 100 100">
-    <circle cx="50" cy="50" r="40" stroke="currentColor" strokeWidth="${properties.thickness || 4}" fill="none" className="text-muted" />
-    <circle cx="50" cy="50" r="40" stroke="currentColor" strokeWidth="${properties.thickness || 4}" fill="none" strokeDasharray="251.2" strokeDashoffset={251.2 - (251.2 * ${properties.value || 0}) / 100} className="text-primary transition-all" />
-  </svg>
-  ${properties.label ? '<div className="absolute inset-0 flex items-center justify-center text-lg font-bold">{value}%</div>' : ""}
-</div>`;
-      }
-    },
-    // =====================================================================
-    // SPECIALIZED (2 types)
-    // =====================================================================
-    searchBar: {
-      imports: ["import { Input } from '@/components/ui/input'", "import { Search } from 'lucide-react'"],
-      render: (ctx) => {
-        const { properties } = ctx;
-        return `<div className="relative">
-  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-  <Input
-    type="search"
-    placeholder="${properties.placeholder || "Search..."}"
-    className="pl-8"
-    ${properties.autofocus ? "autoFocus" : ""}
-  />
-</div>`;
-      }
-    },
-    filterPanel: {
-      imports: ["import { Card } from '@/components/ui/card'"],
-      render: (ctx) => {
-        const { properties, children } = ctx;
-        return `<Card className="${properties.position === "sidebar" ? "w-64" : "w-full"} ${properties.collapsible ? "collapsible" : ""}">
-  <div className="p-4 space-y-4">
-    <h3 className="font-semibold">Filters</h3>
-    ${children || "/* Filter controls */"}
-  </div>
-</Card>`;
-      }
-    }
-  }
-};
-var stdin_default = shadcnAdapter;
-export {
-  stdin_default as default,
-  shadcnAdapter
-};