@specverse/engine-realize 3.5.3

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

@@ -0,0 +1,953 @@
+/**
+ * Material-UI (MUI) Adapter
+ *
+ * Maps all 49 atomic component types to Material-UI components.
+ *
+ * @see https://mui.com/material-ui/
+ * @see ../../shared/atomic-components-registry.ts
+ */
+
+import type { ComponentLibraryAdapter, RenderContext } from '../../shared/adapter-types.js';
+
+/**
+ * Helper to render props object
+ */
+function renderProps(properties: Record<string, any>, exclude: string[] = []): string {
+  return Object.entries(properties)
+    .filter(([key]) => !exclude.includes(key))
+    .map(([key, value]) => {
+      if (typeof value === 'boolean') return value ? key : '';
+      if (typeof value === 'string') return `${key}="${value}"`;
+      return `${key}={${JSON.stringify(value)}}`;
+    })
+    .filter(Boolean)
+    .join(' ');
+}
+
+/**
+ * Material-UI Component Library Adapter
+ */
+export const muiAdapter: ComponentLibraryAdapter = {
+  name: 'Material-UI',
+  version: '5.x',
+  description: 'Material-UI (MUI) component library adapter',
+
+  baseDependencies: [
+    { name: '@mui/material', version: '^5.15.0' },
+    { name: '@mui/icons-material', version: '^5.15.0' },
+    { name: '@emotion/react', version: '^11.11.0' },
+    { name: '@emotion/styled', version: '^11.11.0' },
+  ],
+
+  config: {
+    importPrefix: '@mui/material',
+    importStyle: 'named',
+  },
+
+  components: {
+    // ====================================================================
+    // DATA DISPLAY (9 types)
+    // ====================================================================
+
+    table: {
+      imports: [
+        "import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, TablePagination, TableSortLabel } from '@mui/material'",
+      ],
+      render: (ctx: RenderContext) => {
+        const { properties, model } = ctx;
+        const columns = properties.columns || ['id'];
+        const modelVar = model?.name?.toLowerCase() || 'item';
+        const sortable = properties.sortable !== false;
+        const pagination = properties.pagination !== false;
+
+        return `<TableContainer component={Paper}>
+  <Table ${properties.size ? `size="${properties.size}"` : ''}>
+    <TableHead>
+      <TableRow>
+        ${columns.map((col: string) =>
+          sortable
+            ? `<TableCell><TableSortLabel>{${JSON.stringify(col)}}</TableSortLabel></TableCell>`
+            : `<TableCell>{${JSON.stringify(col)}}</TableCell>`
+        ).join('\n        ')}
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {${modelVar}s?.map((${modelVar}) => (
+        <TableRow key={${modelVar}.id}>
+          ${columns.map((col: string) => `<TableCell>{${modelVar}.${col}}</TableCell>`).join('\n          ')}
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+  ${pagination ? `<TablePagination rowsPerPageOptions={[5, 10, 25]} component="div" count={total} rowsPerPage={rowsPerPage} page={page} onPageChange={handlePageChange} onRowsPerPageChange={handleRowsPerPageChange} />` : ''}
+</TableContainer>`;
+      },
+    },
+
+    list: {
+      imports: ["import { List, ListItem, ListItemText, ListItemIcon, ListItemButton, Divider } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, model } = ctx;
+        const modelVar = model?.name?.toLowerCase() || 'item';
+
+        return `<List ${properties.dense ? 'dense' : ''}>
+  {${modelVar}s?.map((${modelVar}) => (
+    <React.Fragment key={${modelVar}.id}>
+      <ListItem${properties.clickable ? 'Button' : ''}>
+        ${properties.showIcon ? `<ListItemIcon>{/* Icon */}</ListItemIcon>` : ''}
+        <ListItemText
+          primary={${modelVar}.${properties.primaryField || 'name'}}
+          ${properties.secondaryField ? `secondary={${modelVar}.${properties.secondaryField}}` : ''}
+        />
+      </ListItem>
+      ${properties.dividers ? '<Divider />' : ''}
+    </React.Fragment>
+  ))}
+</List>`;
+      },
+    },
+
+    grid: {
+      imports: ["import { Grid } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+        const spacing = properties.spacing || 2;
+
+        return `<Grid container spacing={${spacing}}>
+  {items?.map((item) => (
+    <Grid item xs={${properties.xs || 12}} sm={${properties.sm || 6}} md={${properties.md || 4}} lg={${properties.lg || 3}} key={item.id}>
+      ${children || '{/* Item content */}'}
+    </Grid>
+  ))}
+</Grid>`;
+      },
+    },
+
+    card: {
+      imports: ["import { Card, CardContent, CardMedia, CardActions, CardHeader, Typography } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<Card ${properties.variant ? `variant="${properties.variant}"` : ''}>
+  ${properties.image ? `<CardMedia component="img" height="${properties.imageHeight || 140}" image={${properties.image}} alt="${properties.title || 'Card'}" />` : ''}
+  ${properties.title ? `<CardHeader title="${properties.title}" ${properties.subtitle ? `subheader="${properties.subtitle}"` : ''} />` : ''}
+  <CardContent>
+    ${children || '<Typography variant="body2" color="text.secondary">{content}</Typography>'}
+  </CardContent>
+  ${properties.actions ? `<CardActions>{/* Actions */}</CardActions>` : ''}
+</Card>`;
+      },
+    },
+
+    chart: {
+      imports: [
+        "import { Box } from '@mui/material'",
+        "// Note: MUI doesn't include charts. Use @mui/x-charts or recharts",
+        "// 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';
+
+        return `<Box sx={{ width: '100%', height: ${properties.height || 400} }}>
+  {/* TODO: Integrate @mui/x-charts or recharts */}
+  {/* <ResponsiveContainer width="100%" height="100%">
+    <${chartType === 'line' ? 'LineChart' : chartType === 'bar' ? 'BarChart' : 'PieChart'} data={data}>
+      ${chartType !== 'pie' ? '<CartesianGrid strokeDasharray="3 3" /><XAxis dataKey="name" /><YAxis />' : ''}
+      <Tooltip />${properties.showLegend !== false ? '<Legend />' : ''}
+      <${chartType === 'line' ? 'Line' : chartType === 'bar' ? 'Bar' : 'Pie'} dataKey="value" fill="#8884d8" />
+    </${chartType === 'line' ? 'LineChart' : chartType === 'bar' ? 'BarChart' : 'PieChart'}>
+  </ResponsiveContainer> */}
+</Box>`;
+      },
+      dependencies: [
+        { name: '@mui/x-charts', version: '^6.0.0' },
+      ],
+    },
+
+    tree: {
+      imports: ["import { TreeView, TreeItem } from '@mui/lab'", "import { ExpandMore, ChevronRight } from '@mui/icons-material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<TreeView
+  defaultCollapseIcon={<ExpandMore />}
+  defaultExpandIcon={<ChevronRight />}
+  ${properties.defaultExpanded ? 'defaultExpanded={defaultExpanded}' : ''}
+>
+  {renderTree(data)}
+</TreeView>`;
+      },
+      dependencies: [
+        { name: '@mui/lab', version: '^5.0.0-alpha.170' },
+      ],
+    },
+
+    timeline: {
+      imports: ["import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot, TimelineOppositeContent } from '@mui/lab'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+        const position = properties.position || 'right';
+
+        return `<Timeline position="${position}">
+  {events?.map((event) => (
+    <TimelineItem key={event.id}>
+      ${properties.showDateMarkers ? `<TimelineOppositeContent color="text.secondary">{event.date}</TimelineOppositeContent>` : ''}
+      <TimelineSeparator>
+        <TimelineDot />
+        <TimelineConnector />
+      </TimelineSeparator>
+      <TimelineContent>{event.title}</TimelineContent>
+    </TimelineItem>
+  ))}
+</Timeline>`;
+      },
+      dependencies: [
+        { name: '@mui/lab', version: '^5.0.0-alpha.170' },
+      ],
+    },
+
+    avatar: {
+      imports: ["import { Avatar, AvatarGroup } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+        const size = properties.size === 'small' ? 'small' : properties.size === 'large' ? 'large' : 'medium';
+
+        return `<Avatar
+  src={${properties.src || 'undefined'}}
+  alt="${properties.alt || ''}"
+  ${properties.variant ? `variant="${properties.variant}"` : ''}
+  sx={{ width: ${properties.size === 'small' ? 32 : properties.size === 'large' ? 56 : 40}, height: ${properties.size === 'small' ? 32 : properties.size === 'large' ? 56 : 40} }}
+>
+  ${!properties.src ? '{initials}' : ''}
+</Avatar>`;
+      },
+    },
+
+    image: {
+      imports: ["import { Box, CardMedia } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<CardMedia
+  component="img"
+  image={${properties.src}}
+  alt="${properties.alt || 'Image'}"
+  ${properties.height ? `height={${properties.height}}` : ''}
+  sx={{ objectFit: '${properties.objectFit || 'cover'}', ${properties.rounded ? 'borderRadius: 1' : ''} }}
+/>`;
+      },
+    },
+
+    // ====================================================================
+    // FORMS & INPUTS (11 types)
+    // ====================================================================
+
+    form: {
+      imports: ["import { Box } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+  ${children || '{/* Form fields */}'}
+</Box>`;
+      },
+    },
+
+    input: {
+      imports: ["import { TextField } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+        const variant = properties.variant || 'outlined';
+
+        return `<TextField
+  label="${properties.label || ''}"
+  type="${properties.type || 'text'}"
+  placeholder="${properties.placeholder || ''}"
+  variant="${variant}"
+  fullWidth={${properties.fullWidth !== false}}
+  required={${properties.required === true}}
+  disabled={${properties.disabled === true}}
+  ${properties.helperText ? `helperText="${properties.helperText}"` : ''}
+  ${properties.error ? 'error' : ''}
+/>`;
+      },
+    },
+
+    textarea: {
+      imports: ["import { TextField } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<TextField
+  label="${properties.label || ''}"
+  placeholder="${properties.placeholder || ''}"
+  multiline
+  rows={${properties.rows || 4}}
+  variant="${properties.variant || 'outlined'}"
+  fullWidth={${properties.fullWidth !== false}}
+  required={${properties.required === true}}
+/>`;
+      },
+    },
+
+    select: {
+      imports: ["import { FormControl, InputLabel, Select, MenuItem } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<FormControl fullWidth variant="${properties.variant || 'outlined'}">
+  <InputLabel>${properties.label || 'Select'}</InputLabel>
+  <Select
+    value={value}
+    label="${properties.label || 'Select'}"
+    onChange={handleChange}
+    ${properties.multiple ? 'multiple' : ''}
+  >
+    {${properties.options || 'options'}?.map((option) => (
+      <MenuItem key={option.value} value={option.value}>
+        {option.label}
+      </MenuItem>
+    ))}
+  </Select>
+</FormControl>`;
+      },
+    },
+
+    checkbox: {
+      imports: ["import { FormControlLabel, Checkbox } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<FormControlLabel
+  control={<Checkbox ${properties.checked ? 'checked' : ''} ${properties.disabled ? 'disabled' : ''} />}
+  label="${properties.label || ''}"
+/>`;
+      },
+    },
+
+    radio: {
+      imports: ["import { FormControl, FormLabel, RadioGroup, FormControlLabel, Radio } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<FormControl>
+  <FormLabel>${properties.label || 'Options'}</FormLabel>
+  <RadioGroup row={${properties.orientation === 'horizontal'}}>
+    {${properties.options || 'options'}?.map((option) => (
+      <FormControlLabel key={option.value} value={option.value} control={<Radio />} label={option.label} />
+    ))}
+  </RadioGroup>
+</FormControl>`;
+      },
+    },
+
+    slider: {
+      imports: ["import { Slider, Box, Typography } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<Box sx={{ width: '100%' }}>
+  ${properties.label ? `<Typography gutterBottom>${properties.label}</Typography>` : ''}
+  <Slider
+    value={value}
+    onChange={handleChange}
+    min={${properties.min || 0}}
+    max={${properties.max || 100}}
+    step={${properties.step || 1}}
+    ${properties.marks ? 'marks' : ''}
+    valueLabelDisplay="${properties.showValue ? 'on' : 'auto'}"
+  />
+</Box>`;
+      },
+    },
+
+    switch: {
+      imports: ["import { FormControlLabel, Switch } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<FormControlLabel
+  control={<Switch ${properties.checked ? 'checked' : ''} ${properties.disabled ? 'disabled' : ''} />}
+  label="${properties.label || ''}"
+/>`;
+      },
+    },
+
+    autocomplete: {
+      imports: ["import { Autocomplete, TextField } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<Autocomplete
+  options={${properties.options || 'options'}}
+  ${properties.multiple ? 'multiple' : ''}
+  ${properties.freeSolo ? 'freeSolo' : ''}
+  renderInput={(params) => (
+    <TextField {...params} label="${properties.label || 'Search'}" placeholder="${properties.placeholder || ''}" />
+  )}
+/>`;
+      },
+    },
+
+    datepicker: {
+      imports: [
+        "import { DatePicker } from '@mui/x-date-pickers/DatePicker'",
+        "import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'",
+        "import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'",
+      ],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <DatePicker
+    label="${properties.label || 'Select Date'}"
+    value={value}
+    onChange={handleChange}
+  />
+</LocalizationProvider>`;
+      },
+      dependencies: [
+        { name: '@mui/x-date-pickers', version: '^6.0.0' },
+        { name: 'dayjs', version: '^1.11.0' },
+      ],
+    },
+
+    timepicker: {
+      imports: [
+        "import { TimePicker } from '@mui/x-date-pickers/TimePicker'",
+        "import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'",
+        "import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'",
+      ],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <TimePicker
+    label="${properties.label || 'Select Time'}"
+    value={value}
+    onChange={handleChange}
+  />
+</LocalizationProvider>`;
+      },
+      dependencies: [
+        { name: '@mui/x-date-pickers', version: '^6.0.0' },
+        { name: 'dayjs', version: '^1.11.0' },
+      ],
+    },
+
+    // ====================================================================
+    // ACTIONS (5 types)
+    // ====================================================================
+
+    button: {
+      imports: ["import { Button } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+        const variant = { primary: 'contained', secondary: 'outlined', danger: 'contained' }[properties.variant || 'primary'] || 'contained';
+        const color = properties.variant === 'danger' ? 'error' : 'primary';
+
+        return `<Button
+  variant="${variant}"
+  color="${color}"
+  size="${properties.size || 'medium'}"
+  ${properties.disabled ? 'disabled' : ''}
+  ${properties.fullWidth ? 'fullWidth' : ''}
+  startIcon={${properties.icon ? `<${properties.icon} />` : 'undefined'}}
+>
+  ${properties.label || 'Button'}
+</Button>`;
+      },
+    },
+
+    'button-group': {
+      imports: ["import { ButtonGroup, Button } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<ButtonGroup
+  variant="${properties.variant || 'outlined'}"
+  orientation="${properties.orientation || 'horizontal'}"
+  size="${properties.size || 'medium'}"
+>
+  ${children || '{/* Buttons */}'}
+</ButtonGroup>`;
+      },
+    },
+
+    link: {
+      imports: ["import { Link } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<Link
+  href="${properties.href || '#'}"
+  underline="${properties.underline || 'hover'}"
+  ${properties.color ? `color="${properties.color}"` : ''}
+  ${properties.external ? 'target="_blank" rel="noopener noreferrer"' : ''}
+>
+  ${properties.label || 'Link'}
+</Link>`;
+      },
+    },
+
+    icon: {
+      imports: ["import { Icon } from '@mui/material'", "// Import specific icons: import { Home, Settings } from '@mui/icons-material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+        const size = properties.size === 'small' ? 'small' : properties.size === 'large' ? 'large' : 'medium';
+
+        return `<${properties.name || 'Icon'} fontSize="${size}" ${properties.color ? `color="${properties.color}"` : ''} />`;
+      },
+    },
+
+    menu: {
+      imports: ["import { Menu, MenuItem, IconButton } from '@mui/material'", "import { MoreVert } from '@mui/icons-material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<>
+  <IconButton onClick={handleClick}>
+    <MoreVert />
+  </IconButton>
+  <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+    {${properties.items || 'menuItems'}?.map((item) => (
+      <MenuItem key={item.id} onClick={handleClose}>
+        {item.label}
+      </MenuItem>
+    ))}
+  </Menu>
+</>`;
+      },
+    },
+
+    // ====================================================================
+    // OVERLAYS & FEEDBACK (9 types)
+    // ====================================================================
+
+    modal: {
+      imports: ["import { Modal, Box, Typography } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<Modal
+  open={open}
+  onClose={handleClose}
+  aria-labelledby="modal-title"
+>
+  <Box sx={{
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: ${properties.width || 400},
+    bgcolor: 'background.paper',
+    boxShadow: 24,
+    p: 4
+  }}>
+    ${properties.title ? `<Typography id="modal-title" variant="h6" component="h2">${properties.title}</Typography>` : ''}
+    ${children || '{/* Content */}'}
+  </Box>
+</Modal>`;
+      },
+    },
+
+    dialog: {
+      imports: ["import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<Dialog open={open} onClose={handleClose} maxWidth="${properties.size || 'sm'}" fullWidth>
+  ${properties.title ? `<DialogTitle>${properties.title}</DialogTitle>` : ''}
+  <DialogContent>
+    ${children || '{/* Content */}'}
+  </DialogContent>
+  <DialogActions>
+    <Button onClick={handleClose}>Cancel</Button>
+    <Button onClick={handleConfirm} variant="contained">Confirm</Button>
+  </DialogActions>
+</Dialog>`;
+      },
+    },
+
+    drawer: {
+      imports: ["import { Drawer, Box } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+        const anchor = properties.position === 'left' ? 'left' : properties.position === 'right' ? 'right' : properties.position === 'top' ? 'top' : 'bottom';
+
+        return `<Drawer
+  anchor="${anchor}"
+  open={open}
+  onClose={handleClose}
+  ${properties.variant === 'persistent' ? 'variant="persistent"' : ''}
+>
+  <Box sx={{ width: ${properties.width || 250}, p: 2 }}>
+    ${children || '{/* Content */}'}
+  </Box>
+</Drawer>`;
+      },
+    },
+
+    popover: {
+      imports: ["import { Popover, Typography } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<Popover
+  open={open}
+  anchorEl={anchorEl}
+  onClose={handleClose}
+  anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+>
+  <Typography sx={{ p: 2 }}>
+    ${children || properties.content || 'Popover content'}
+  </Typography>
+</Popover>`;
+      },
+    },
+
+    tooltip: {
+      imports: ["import { Tooltip } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+        const placement = properties.placement || 'top';
+
+        return `<Tooltip title="${properties.content || ''}" placement="${placement}" ${properties.arrow ? 'arrow' : ''}>
+  ${children || '<span>{children}</span>'}
+</Tooltip>`;
+      },
+    },
+
+    alert: {
+      imports: ["import { Alert, AlertTitle } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+        const severity = properties.variant === 'error' ? 'error' : properties.variant === 'warning' ? 'warning' : properties.variant === 'success' ? 'success' : 'info';
+
+        return `<Alert severity="${severity}" ${properties.closable ? 'onClose={handleClose}' : ''}>
+  ${properties.title ? `<AlertTitle>${properties.title}</AlertTitle>` : ''}
+  ${properties.message || 'Alert message'}
+</Alert>`;
+      },
+    },
+
+    snackbar: {
+      imports: ["import { Snackbar, Alert } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+        const vertical = properties.position?.includes('top') ? 'top' : 'bottom';
+        const horizontal = properties.position?.includes('left') ? 'left' : properties.position?.includes('right') ? 'right' : 'center';
+
+        return `<Snackbar
+  open={open}
+  autoHideDuration={${properties.duration || 6000}}
+  onClose={handleClose}
+  anchorOrigin={{ vertical: '${vertical}', horizontal: '${horizontal}' }}
+>
+  <Alert onClose={handleClose} severity="${properties.variant || 'info'}" sx={{ width: '100%' }}>
+    ${properties.message || 'Notification'}
+  </Alert>
+</Snackbar>`;
+      },
+    },
+
+    badge: {
+      imports: ["import { Badge } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<Badge
+  badgeContent={${properties.count || 0}}
+  color="${properties.color || 'primary'}"
+  ${properties.variant === 'dot' ? 'variant="dot"' : ''}
+  ${properties.max ? `max={${properties.max}}` : ''}
+>
+  ${children || '{children}'}
+</Badge>`;
+      },
+    },
+
+    spinner: {
+      imports: ["import { CircularProgress, Box } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+        const size = properties.size === 'small' ? 20 : properties.size === 'large' ? 60 : 40;
+
+        return `<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+  <CircularProgress size={${size}} ${properties.color ? `color="${properties.color}"` : ''} />
+</Box>`;
+      },
+    },
+
+    // ====================================================================
+    // NAVIGATION (5 types)
+    // ====================================================================
+
+    tabs: {
+      imports: ["import { Tabs, Tab, Box } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+  <Tabs
+    value={value}
+    onChange={handleChange}
+    ${properties.variant === 'scrollable' ? 'variant="scrollable" scrollButtons="auto"' : ''}
+    ${properties.centered ? 'centered' : ''}
+  >
+    {${properties.tabs || 'tabs'}?.map((tab) => (
+      <Tab key={tab.value} label={tab.label} value={tab.value} />
+    ))}
+  </Tabs>
+</Box>`;
+      },
+    },
+
+    breadcrumb: {
+      imports: ["import { Breadcrumbs, Link, Typography } from '@mui/material'", "import { NavigateNext } from '@mui/icons-material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<Breadcrumbs separator={<NavigateNext fontSize="small" />}>
+  {${properties.items || 'breadcrumbs'}?.map((item, index) =>
+    index === breadcrumbs.length - 1 ? (
+      <Typography key={item.label} color="text.primary">{item.label}</Typography>
+    ) : (
+      <Link key={item.label} underline="hover" color="inherit" href={item.href}>{item.label}</Link>
+    )
+  )}
+</Breadcrumbs>`;
+      },
+    },
+
+    navbar: {
+      imports: ["import { AppBar, Toolbar, Typography, Button, IconButton } from '@mui/material'", "import { Menu as MenuIcon } from '@mui/icons-material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+        const position = properties.fixed ? 'fixed' : 'static';
+
+        return `<AppBar position="${position}" color="${properties.color || 'primary'}">
+  <Toolbar>
+    ${properties.showMenuButton ? '<IconButton edge="start" color="inherit" onClick={handleMenuClick}><MenuIcon /></IconButton>' : ''}
+    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+      ${properties.brand || 'App'}
+    </Typography>
+    ${children || '{/* Navigation items */}'}
+  </Toolbar>
+</AppBar>`;
+      },
+    },
+
+    sidebar: {
+      imports: ["import { Drawer, List, ListItem, ListItemIcon, ListItemText, ListItemButton } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+        const variant = properties.variant === 'permanent' ? 'permanent' : properties.variant === 'persistent' ? 'persistent' : 'temporary';
+
+        return `<Drawer
+  variant="${variant}"
+  anchor="${properties.position || 'left'}"
+  open={open}
+  ${variant === 'temporary' ? 'onClose={handleClose}' : ''}
+  sx={{ width: ${properties.width || 240}, flexShrink: 0, '& .MuiDrawer-paper': { width: ${properties.width || 240}, boxSizing: 'border-box' } }}
+>
+  <List>
+    {${properties.items || 'menuItems'}?.map((item) => (
+      <ListItemButton key={item.id}>
+        {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
+        <ListItemText primary={item.label} />
+      </ListItemButton>
+    ))}
+  </List>
+</Drawer>`;
+      },
+    },
+
+    pagination: {
+      imports: ["import { Pagination, Stack } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<Stack spacing={2} alignItems="center">
+  <Pagination
+    count={${properties.total || 10}}
+    page={page}
+    onChange={handleChange}
+    color="${properties.color || 'primary'}"
+    size="${properties.size || 'medium'}"
+    ${properties.showFirstLast ? 'showFirstButton showLastButton' : ''}
+  />
+</Stack>`;
+      },
+    },
+
+    // ====================================================================
+    // LAYOUT (6 types)
+    // ====================================================================
+
+    accordion: {
+      imports: ["import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material'", "import { ExpandMore } from '@mui/icons-material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `{${properties.items || 'accordionItems'}?.map((item) => (
+  <Accordion key={item.id} ${properties.multiple ? '' : 'disableGutters'}>
+    <AccordionSummary expandIcon={<ExpandMore />}>
+      <Typography>{item.title}</Typography>
+    </AccordionSummary>
+    <AccordionDetails>
+      <Typography>{item.content}</Typography>
+    </AccordionDetails>
+  </Accordion>
+))}`;
+      },
+    },
+
+    carousel: {
+      imports: ["import { Box } from '@mui/material'", "// Note: MUI doesn't include carousel. Use react-material-ui-carousel or swiper"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<Box sx={{ maxWidth: '100%', flexGrow: 1 }}>
+  {/* TODO: Integrate react-material-ui-carousel or swiper */}
+  {/* <Carousel autoPlay={${properties.autoplay !== false}} interval={${properties.interval || 3000}}>
+    {items?.map((item) => (
+      <Box key={item.id}>{item.content}</Box>
+    ))}
+  </Carousel> */}
+</Box>`;
+      },
+      dependencies: [
+        { name: 'react-material-ui-carousel', version: '^3.4.0' },
+      ],
+    },
+
+    container: {
+      imports: ["import { Container } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<Container maxWidth="${properties.maxWidth || 'lg'}" ${properties.fixed ? 'fixed' : ''}>
+  ${children || '{/* Content */}'}
+</Container>`;
+      },
+    },
+
+    divider: {
+      imports: ["import { Divider } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<Divider ${properties.orientation === 'vertical' ? 'orientation="vertical"' : ''} ${properties.variant ? `variant="${properties.variant}"` : ''} />`;
+      },
+    },
+
+    header: {
+      imports: ["import { Box, Typography } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<Box component="header" sx={{ py: 2, borderBottom: 1, borderColor: 'divider' }}>
+  ${properties.title ? `<Typography variant="h4" component="h1">${properties.title}</Typography>` : ''}
+  ${properties.subtitle ? `<Typography variant="subtitle1" color="text.secondary">${properties.subtitle}</Typography>` : ''}
+  ${children || ''}
+</Box>`;
+      },
+    },
+
+    footer: {
+      imports: ["import { Box, Container, Typography } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<Box component="footer" sx={{ py: 3, px: 2, mt: 'auto', backgroundColor: 'background.paper', borderTop: 1, borderColor: 'divider' }}>
+  <Container maxWidth="lg">
+    ${properties.copyright ? `<Typography variant="body2" color="text.secondary" align="center">${properties.copyright}</Typography>` : ''}
+    ${children || ''}
+  </Container>
+</Box>`;
+      },
+    },
+
+    // ====================================================================
+    // PROGRESS (2 types)
+    // ====================================================================
+
+    'progress-bar': {
+      imports: ["import { LinearProgress, Box, Typography } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<Box sx={{ width: '100%' }}>
+  ${properties.label ? `<Typography variant="body2" color="text.secondary">${properties.label}</Typography>` : ''}
+  <LinearProgress
+    variant="${properties.indeterminate ? 'indeterminate' : 'determinate'}"
+    value={${properties.value || 0}}
+    color="${properties.color || 'primary'}"
+  />
+  ${properties.showValue ? `<Typography variant="body2" color="text.secondary">{value}%</Typography>` : ''}
+</Box>`;
+      },
+    },
+
+    'progress-circle': {
+      imports: ["import { CircularProgress, Box, Typography } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<Box sx={{ position: 'relative', display: 'inline-flex' }}>
+  <CircularProgress
+    variant="${properties.indeterminate ? 'indeterminate' : 'determinate'}"
+    value={${properties.value || 0}}
+    size={${properties.size || 40}}
+    color="${properties.color || 'primary'}"
+  />
+  ${properties.showValue ? `
+  <Box sx={{ top: 0, left: 0, bottom: 0, right: 0, position: 'absolute', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+    <Typography variant="caption" component="div" color="text.secondary">{value}%</Typography>
+  </Box>` : ''}
+</Box>`;
+      },
+    },
+
+    // ====================================================================
+    // SPECIALIZED (2 types)
+    // ====================================================================
+
+    searchBar: {
+      imports: ["import { TextField, InputAdornment } from '@mui/material'", "import { Search } from '@mui/icons-material'"],
+      render: (ctx: RenderContext) => {
+        const { properties } = ctx;
+
+        return `<TextField
+  placeholder="${properties.placeholder || 'Search...'}"
+  variant="${properties.variant || 'outlined'}"
+  fullWidth={${properties.fullWidth !== false}}
+  InputProps={{
+    startAdornment: (
+      <InputAdornment position="start">
+        <Search />
+      </InputAdornment>
+    ),
+  }}
+/>`;
+      },
+    },
+
+    filterPanel: {
+      imports: ["import { Paper, Box, Typography, Divider } from '@mui/material'"],
+      render: (ctx: RenderContext) => {
+        const { properties, children } = ctx;
+
+        return `<Paper sx={{ p: 2, mb: 2 }}>
+  <Typography variant="h6" gutterBottom>Filters</Typography>
+  <Divider sx={{ mb: 2 }} />
+  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+    ${children || '{/* Filter controls */}'}
+  </Box>
+</Paper>`;
+      },
+    },
+  },
+};