@specverse/engines 4.1.5 → 4.1.6

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

@@ -0,0 +1,824 @@
+function renderProps(properties, exclude = []) {
+  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(" ");
+}
+const muiAdapter = {
+  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) => {
+        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) => 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) => `<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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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 || 6e3}}
+  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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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 || 3e3}}>
+    {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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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) => {
+        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>`;
+      }
+    }
+  }
+};
+export {
+  muiAdapter
+};