@specverse/engines 4.1.30 → 4.2.1

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

@@ -1,806 +0,0 @@
-/**
- * shadcn/ui Adapter
- *
- * Maps all 49 SpecVerse atomic component types to shadcn/ui components.
- * shadcn/ui: https://ui.shadcn.com/
- *
- * Architecture:
- * - Uses @/components/ui/* import pattern
- * - Tailwind CSS for styling
- * - Radix UI primitives underneath
- */
-
-import type { ComponentLibraryAdapter, RenderContext } from '../../shared/adapter-types.js';
-import { renderProps } from '../../shared/adapter-types.js';
-
-export const shadcnAdapter: ComponentLibraryAdapter = {
-  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: RenderContext) => {
-        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: string) => `<TableHead>${col}</TableHead>`).join('\n      ')}
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    {${pluralVar}?.map((${modelVar}) => (
-      <TableRow key={${modelVar}.id}>
-        ${columns.map((col: string) => `<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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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">↑ 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: RenderContext) => {
-        const { properties } = ctx;
-        const chartType = properties.chartType || 'line';
-
-        const chartMap: Record<string, string> = {
-          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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: string) => `<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: RenderContext) => {
-        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: RenderContext) => {
-        const { properties } = ctx;
-        const options = properties.options || [];
-
-        return `<div className="grid gap-2">
-  ${properties.label ? `<Label>${properties.label}</Label>` : ''}
-  <RadioGroup>
-    ${options.map((opt: string) => `<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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        const { properties } = ctx;
-        const variants: Record<string, string> = {
-          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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        const { properties } = ctx;
-        const sizeMap: Record<string, string> = { 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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        const { properties } = ctx;
-        return `toast({
-  title: "${properties.message || 'Notification'}",
-  duration: ${properties.duration || 3000},
-})`;
-      },
-    },
-
-    badge: {
-      imports: ["import { Badge } from '@/components/ui/badge'"],
-      render: (ctx: RenderContext) => {
-        const { properties } = ctx;
-        return `<Badge variant="${properties.variant || 'default'}">${properties.content || ''}</Badge>`;
-      },
-    },
-
-    spinner: {
-      imports: [],
-      render: (ctx: RenderContext) => {
-        const { properties } = ctx;
-        const sizeMap: Record<string, string> = { 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: RenderContext) => {
-        const { properties, children } = ctx;
-        const sections = properties.sections || ['tab1', 'tab2'];
-
-        return `<Tabs defaultValue="${sections[0]}">
-  <TabsList>
-    ${sections.map((section: string) => `<TabsTrigger value="${section}">${section}</TabsTrigger>`).join('\n    ')}
-  </TabsList>
-  ${sections.map((section: string) => `<TabsContent value="${section}">
-    {/* ${section} content */}
-  </TabsContent>`).join('\n  ')}
-</Tabs>`;
-      },
-    },
-
-    breadcrumb: {
-      imports: [],
-      render: (ctx: RenderContext) => {
-        return `<nav className="flex" aria-label="Breadcrumb">
-  <ol className="inline-flex items-center space-x-1">
-    {/* Breadcrumb items */}
-  </ol>
-</nav>`;
-      },
-    },
-
-    navbar: {
-      imports: [],
-      render: (ctx: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        const { children } = ctx;
-        return `<Accordion type="single" collapsible>
-  ${children || '/* Accordion items */'}
-</Accordion>`;
-      },
-    },
-
-    carousel: {
-      imports: [],
-      render: (ctx: RenderContext) => {
-        const { children } = ctx;
-        return `<div className="relative">
-  {/* Carousel implementation */}
-  ${children || ''}
-</div>`;
-      },
-    },
-
-    container: {
-      imports: [],
-      render: (ctx: RenderContext) => {
-        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: RenderContext) => {
-        const { properties } = ctx;
-        return `<Separator orientation="${properties.orientation || 'horizontal'}" />`;
-      },
-    },
-
-    header: {
-      imports: [],
-      render: (ctx: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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: RenderContext) => {
-        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>`;
-      },
-    },
-  },
-};
-
-export default shadcnAdapter;