@specverse/engines 4.1.5 → 4.1.7

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

@@ -0,0 +1,742 @@
+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 antdAdapter = {
+  name: "Ant Design",
+  version: "5.x",
+  description: "Ant Design (antd) component library adapter",
+  baseDependencies: [
+    { name: "antd", version: "^5.15.0" },
+    { name: "@ant-design/icons", version: "^5.2.0" }
+  ],
+  config: {
+    importPrefix: "antd",
+    importStyle: "named"
+  },
+  components: {
+    // ====================================================================
+    // DATA DISPLAY (9 types)
+    // ====================================================================
+    table: {
+      imports: ["import { Table } from 'antd'"],
+      render: (ctx) => {
+        const { properties, model } = ctx;
+        const columns = properties.columns || ["id"];
+        const modelVar = model?.name?.toLowerCase() || "item";
+        return `<Table
+  dataSource={${modelVar}s}
+  columns={[
+    ${columns.map((col) => `{ title: '${col}', dataIndex: '${col}', key: '${col}'${properties.sortable !== false ? ", sorter: true" : ""} }`).join(",\n    ")}
+  ]}
+  ${properties.pagination !== false ? `pagination={{ pageSize: ${properties.pageSize || 10} }}` : "pagination={false}"}
+  ${properties.size ? `size="${properties.size}"` : ""}
+  ${properties.bordered ? "bordered" : ""}
+  rowKey="id"
+/>`;
+      }
+    },
+    list: {
+      imports: ["import { List } from 'antd'"],
+      render: (ctx) => {
+        const { properties, model } = ctx;
+        const modelVar = model?.name?.toLowerCase() || "item";
+        return `<List
+  dataSource={${modelVar}s}
+  ${properties.bordered ? "bordered" : ""}
+  ${properties.size ? `size="${properties.size}"` : ""}
+  ${properties.grid ? `grid={${JSON.stringify(properties.grid)}}` : ""}
+  renderItem={(${modelVar}) => (
+    <List.Item>
+      <List.Item.Meta
+        ${properties.showAvatar ? `avatar={<Avatar src={${modelVar}.avatar} />}` : ""}
+        title={${modelVar}.${properties.primaryField || "name"}}
+        ${properties.secondaryField ? `description={${modelVar}.${properties.secondaryField}}` : ""}
+      />
+    </List.Item>
+  )}
+/>`;
+      }
+    },
+    grid: {
+      imports: ["import { Row, Col } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        const gutter = properties.gutter || 16;
+        return `<Row gutter={${gutter}}>
+  {items?.map((item) => (
+    <Col xs={${properties.xs || 24}} sm={${properties.sm || 12}} md={${properties.md || 8}} lg={${properties.lg || 6}} key={item.id}>
+      ${children || "{/* Item content */}"}
+    </Col>
+  ))}
+</Row>`;
+      }
+    },
+    card: {
+      imports: ["import { Card } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Card
+  ${properties.title ? `title="${properties.title}"` : ""}
+  ${properties.bordered !== false ? "bordered" : "bordered={false}"}
+  ${properties.hoverable ? "hoverable" : ""}
+  ${properties.size ? `size="${properties.size}"` : ""}
+  ${properties.image ? `cover={<img alt="${properties.title || "Card"}" src="${properties.image}" />}` : ""}
+  ${properties.actions ? `actions={[${properties.actions.map((a) => `<${a} />`).join(", ")}]}` : ""}
+>
+  ${children || "{content}"}
+</Card>`;
+      }
+    },
+    chart: {
+      imports: [
+        "// Note: Ant Design doesn't include charts. Use @ant-design/charts or recharts",
+        "// import { Line, Bar, Pie } from '@ant-design/charts'"
+      ],
+      render: (ctx) => {
+        const { properties } = ctx;
+        const chartType = properties.chartType || "line";
+        const ChartComponent = chartType === "line" ? "Line" : chartType === "bar" ? "Bar" : "Pie";
+        return `{/* TODO: Integrate @ant-design/charts */}
+{/* <${ChartComponent}
+  data={data}
+  ${chartType !== "pie" ? 'xField="name" yField="value"' : 'angleField="value" colorField="name"'}
+  ${properties.responsive !== false ? "responsive" : ""}
+  ${properties.showLegend !== false ? "" : "legend={false}"}
+/> */}`;
+      },
+      dependencies: [
+        { name: "@ant-design/charts", version: "^2.0.0" }
+      ]
+    },
+    tree: {
+      imports: ["import { Tree } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Tree
+  treeData={treeData}
+  ${properties.checkable ? "checkable" : ""}
+  ${properties.defaultExpanded ? "defaultExpandAll" : ""}
+  ${properties.selectable !== false ? "" : "selectable={false}"}
+  ${properties.showLine ? "showLine" : ""}
+/>`;
+      }
+    },
+    timeline: {
+      imports: ["import { Timeline } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        const mode = properties.position === "alternate" ? "alternate" : properties.position === "right" ? "right" : "left";
+        return `<Timeline mode="${mode}">
+  {events?.map((event) => (
+    <Timeline.Item key={event.id} ${properties.showDateMarkers ? `label={event.date}` : ""}>
+      {event.title}
+    </Timeline.Item>
+  ))}
+</Timeline>`;
+      }
+    },
+    avatar: {
+      imports: ["import { Avatar } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        const size = properties.size === "small" ? "small" : properties.size === "large" ? "large" : "default";
+        return `<Avatar
+  ${properties.src ? `src="${properties.src}"` : ""}
+  ${properties.icon ? `icon={<${properties.icon} />}` : ""}
+  size={${typeof properties.size === "number" ? properties.size : `"${size}"`}}
+  ${properties.shape ? `shape="${properties.shape}"` : ""}
+>
+  ${!properties.src && !properties.icon ? "{initials}" : ""}
+</Avatar>`;
+      }
+    },
+    image: {
+      imports: ["import { Image } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Image
+  src="${properties.src}"
+  alt="${properties.alt || "Image"}"
+  ${properties.width ? `width={${properties.width}}` : ""}
+  ${properties.height ? `height={${properties.height}}` : ""}
+  ${properties.preview !== false ? "" : "preview={false}"}
+  ${properties.placeholder ? "placeholder" : ""}
+/>`;
+      }
+    },
+    // ====================================================================
+    // FORMS & INPUTS (11 types)
+    // ====================================================================
+    form: {
+      imports: ["import { Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Form
+  layout="${properties.layout || "vertical"}"
+  onFinish={handleSubmit}
+  ${properties.initialValues ? "initialValues={initialValues}" : ""}
+>
+  ${children || "{/* Form items */}"}
+</Form>`;
+      }
+    },
+    input: {
+      imports: ["import { Input, Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Form.Item
+  label="${properties.label || ""}"
+  name="${properties.name || "field"}"
+  ${properties.required ? 'rules={[{ required: true, message: "Please input!" }]}' : ""}
+>
+  <Input
+    type="${properties.type || "text"}"
+    placeholder="${properties.placeholder || ""}"
+    ${properties.disabled ? "disabled" : ""}
+    ${properties.prefix ? `prefix={<${properties.prefix} />}` : ""}
+    ${properties.suffix ? `suffix={<${properties.suffix} />}` : ""}
+  />
+</Form.Item>`;
+      }
+    },
+    textarea: {
+      imports: ["import { Input, Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Form.Item
+  label="${properties.label || ""}"
+  name="${properties.name || "field"}"
+  ${properties.required ? "rules={[{ required: true }]}" : ""}
+>
+  <Input.TextArea
+    placeholder="${properties.placeholder || ""}"
+    rows={${properties.rows || 4}}
+    ${properties.maxLength ? `maxLength={${properties.maxLength}}` : ""}
+    ${properties.showCount ? "showCount" : ""}
+  />
+</Form.Item>`;
+      }
+    },
+    select: {
+      imports: ["import { Select, Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Form.Item
+  label="${properties.label || "Select"}"
+  name="${properties.name || "field"}"
+  ${properties.required ? "rules={[{ required: true }]}" : ""}
+>
+  <Select
+    placeholder="${properties.placeholder || "Select..."}"
+    ${properties.mode ? `mode="${properties.mode}"` : ""}
+    ${properties.allowClear ? "allowClear" : ""}
+    ${properties.showSearch ? "showSearch" : ""}
+    options={${properties.options || "options"}}
+  />
+</Form.Item>`;
+      }
+    },
+    checkbox: {
+      imports: ["import { Checkbox, Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Form.Item name="${properties.name || "field"}" valuePropName="checked">
+  <Checkbox ${properties.disabled ? "disabled" : ""}>
+    ${properties.label || ""}
+  </Checkbox>
+</Form.Item>`;
+      }
+    },
+    radio: {
+      imports: ["import { Radio, Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Form.Item label="${properties.label || "Options"}" name="${properties.name || "field"}">
+  <Radio.Group ${properties.buttonStyle ? `buttonStyle="${properties.buttonStyle}"` : ""}>
+    {${properties.options || "options"}?.map((option) => (
+      <Radio${properties.buttonStyle ? ".Button" : ""} key={option.value} value={option.value}>
+        {option.label}
+      </Radio${properties.buttonStyle ? ".Button" : ""}>
+    ))}
+  </Radio.Group>
+</Form.Item>`;
+      }
+    },
+    slider: {
+      imports: ["import { Slider, Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Form.Item label="${properties.label || ""}" name="${properties.name || "field"}">
+  <Slider
+    min={${properties.min || 0}}
+    max={${properties.max || 100}}
+    step={${properties.step || 1}}
+    ${properties.marks ? "marks={marks}" : ""}
+    ${properties.range ? "range" : ""}
+    ${properties.vertical ? "vertical" : ""}
+  />
+</Form.Item>`;
+      }
+    },
+    switch: {
+      imports: ["import { Switch, Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Form.Item label="${properties.label || ""}" name="${properties.name || "field"}" valuePropName="checked">
+  <Switch
+    ${properties.disabled ? "disabled" : ""}
+    ${properties.checkedChildren ? `checkedChildren="${properties.checkedChildren}"` : ""}
+    ${properties.unCheckedChildren ? `unCheckedChildren="${properties.unCheckedChildren}"` : ""}
+  />
+</Form.Item>`;
+      }
+    },
+    autocomplete: {
+      imports: ["import { AutoComplete, Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Form.Item label="${properties.label || ""}" name="${properties.name || "field"}">
+  <AutoComplete
+    options={${properties.options || "options"}}
+    placeholder="${properties.placeholder || "Type to search..."}"
+    filterOption={(inputValue, option) =>
+      option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+    }
+    ${properties.allowClear ? "allowClear" : ""}
+  />
+</Form.Item>`;
+      }
+    },
+    datepicker: {
+      imports: ["import { DatePicker, Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Form.Item label="${properties.label || "Select Date"}" name="${properties.name || "field"}">
+  <DatePicker
+    ${properties.format ? `format="${properties.format}"` : ""}
+    ${properties.showTime ? "showTime" : ""}
+    ${properties.picker ? `picker="${properties.picker}"` : ""}
+    style={{ width: '100%' }}
+  />
+</Form.Item>`;
+      }
+    },
+    timepicker: {
+      imports: ["import { TimePicker, Form } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Form.Item label="${properties.label || "Select Time"}" name="${properties.name || "field"}">
+  <TimePicker
+    ${properties.format ? `format="${properties.format}"` : ""}
+    ${properties.use12Hours ? "use12Hours" : ""}
+    style={{ width: '100%' }}
+  />
+</Form.Item>`;
+      }
+    },
+    // ====================================================================
+    // ACTIONS (5 types)
+    // ====================================================================
+    button: {
+      imports: ["import { Button } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        const type = { primary: "primary", secondary: "default", danger: "primary" }[properties.variant || "primary"] || "default";
+        const danger = properties.variant === "danger";
+        return `<Button
+  type="${type}"
+  ${danger ? "danger" : ""}
+  size="${properties.size || "middle"}"
+  ${properties.disabled ? "disabled" : ""}
+  ${properties.loading ? "loading" : ""}
+  ${properties.block ? "block" : ""}
+  ${properties.icon ? `icon={<${properties.icon} />}` : ""}
+  ${properties.shape ? `shape="${properties.shape}"` : ""}
+  onClick={handleClick}
+>
+  ${properties.label || "Button"}
+</Button>`;
+      }
+    },
+    "button-group": {
+      imports: ["import { Button, Space } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Space.Compact ${properties.size ? `size="${properties.size}"` : ""}>
+  ${children || "{/* Buttons */}"}
+</Space.Compact>`;
+      }
+    },
+    link: {
+      imports: ["import { Typography } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Typography.Link
+  href="${properties.href || "#"}"
+  ${properties.disabled ? "disabled" : ""}
+  ${properties.underline === false ? "underline={false}" : ""}
+  ${properties.external ? 'target="_blank"' : ""}
+>
+  ${properties.label || "Link"}
+</Typography.Link>`;
+      }
+    },
+    icon: {
+      imports: ["// Import specific icons: import { HomeOutlined, SettingOutlined } from '@ant-design/icons'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<${properties.name || "Icon"}Outlined style={{ fontSize: '${properties.size === "small" ? "12px" : properties.size === "large" ? "24px" : "16px"}' }} />`;
+      }
+    },
+    menu: {
+      imports: ["import { Menu, Dropdown, Button } from 'antd'", "import { MoreOutlined } from '@ant-design/icons'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Dropdown
+  menu={{
+    items: ${properties.items || "menuItems"},
+    onClick: handleMenuClick
+  }}
+  trigger={['click']}
+>
+  <Button icon={<MoreOutlined />} />
+</Dropdown>`;
+      }
+    },
+    // ====================================================================
+    // OVERLAYS & FEEDBACK (9 types)
+    // ====================================================================
+    modal: {
+      imports: ["import { Modal } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Modal
+  title="${properties.title || "Modal"}"
+  open={open}
+  onOk={handleOk}
+  onCancel={handleCancel}
+  ${properties.width ? `width={${properties.width}}` : ""}
+  ${properties.centered ? "centered" : ""}
+  ${properties.footer === false ? "footer={null}" : ""}
+>
+  ${children || "{/* Content */}"}
+</Modal>`;
+      }
+    },
+    dialog: {
+      imports: ["import { Modal } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Modal
+  title="${properties.title || "Dialog"}"
+  open={open}
+  onOk={handleOk}
+  onCancel={handleCancel}
+  ${properties.closable !== false ? "" : "closable={false}"}
+  ${properties.maskClosable !== false ? "" : "maskClosable={false}"}
+>
+  ${children || "{/* Content */}"}
+</Modal>`;
+      }
+    },
+    drawer: {
+      imports: ["import { Drawer } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        const placement = properties.position === "left" ? "left" : properties.position === "right" ? "right" : properties.position === "top" ? "top" : "bottom";
+        return `<Drawer
+  title="${properties.title || "Drawer"}"
+  placement="${placement}"
+  open={open}
+  onClose={handleClose}
+  ${properties.width ? `width={${properties.width}}` : ""}
+  ${properties.height ? `height={${properties.height}}` : ""}
+>
+  ${children || "{/* Content */}"}
+</Drawer>`;
+      }
+    },
+    popover: {
+      imports: ["import { Popover, Button } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Popover
+  content={${properties.content ? `"${properties.content}"` : "content"}}
+  title="${properties.title || ""}"
+  trigger="${properties.trigger || "click"}"
+  placement="${properties.placement || "top"}"
+>
+  ${children || "<Button>Trigger</Button>"}
+</Popover>`;
+      }
+    },
+    tooltip: {
+      imports: ["import { Tooltip } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Tooltip
+  title="${properties.content || ""}"
+  placement="${properties.placement || "top"}"
+  ${properties.color ? `color="${properties.color}"` : ""}
+>
+  ${children || "<span>{children}</span>"}
+</Tooltip>`;
+      }
+    },
+    alert: {
+      imports: ["import { Alert } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        const type = properties.variant === "error" ? "error" : properties.variant === "warning" ? "warning" : properties.variant === "success" ? "success" : "info";
+        return `<Alert
+  message="${properties.title || ""}"
+  description="${properties.message || ""}"
+  type="${type}"
+  ${properties.closable ? "closable" : ""}
+  ${properties.showIcon !== false ? "showIcon" : ""}
+  ${properties.banner ? "banner" : ""}
+/>`;
+      }
+    },
+    snackbar: {
+      imports: ["import { message } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `{/* Use Ant Design message API */}
+{/* message.${properties.variant || "info"}('${properties.message || "Notification"}', ${properties.duration || 3}) */}`;
+      }
+    },
+    badge: {
+      imports: ["import { Badge } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Badge
+  count={${properties.count || 0}}
+  ${properties.dot ? "dot" : ""}
+  ${properties.status ? `status="${properties.status}"` : ""}
+  ${properties.color ? `color="${properties.color}"` : ""}
+  ${properties.overflowCount ? `overflowCount={${properties.overflowCount}}` : ""}
+>
+  ${children || "{children}"}
+</Badge>`;
+      }
+    },
+    spinner: {
+      imports: ["import { Spin } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        const size = properties.size === "small" ? "small" : properties.size === "large" ? "large" : "default";
+        return `<Spin size="${size}" ${properties.tip ? `tip="${properties.tip}"` : ""} />`;
+      }
+    },
+    // ====================================================================
+    // NAVIGATION (5 types)
+    // ====================================================================
+    tabs: {
+      imports: ["import { Tabs } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Tabs
+  activeKey={activeKey}
+  onChange={handleChange}
+  ${properties.type ? `type="${properties.type}"` : ""}
+  ${properties.tabPosition ? `tabPosition="${properties.tabPosition}"` : ""}
+  items={${properties.items || "tabItems"}}
+/>`;
+      }
+    },
+    breadcrumb: {
+      imports: ["import { Breadcrumb } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Breadcrumb
+  items={${properties.items || "breadcrumbItems"}}
+  ${properties.separator ? `separator="${properties.separator}"` : ""}
+/>`;
+      }
+    },
+    navbar: {
+      imports: ["import { Layout, Menu } from 'antd'", "const { Header } = Layout"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Header ${properties.className ? `className="${properties.className}"` : ""}>
+  <div style={{ float: 'left', color: '#fff', fontSize: '18px', fontWeight: 'bold' }}>
+    ${properties.brand || "App"}
+  </div>
+  ${children || '<Menu theme="dark" mode="horizontal" items={menuItems} />'}
+</Header>`;
+      }
+    },
+    sidebar: {
+      imports: ["import { Layout, Menu } from 'antd'", "const { Sider } = Layout"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Sider
+  ${properties.collapsible ? "collapsible" : ""}
+  ${properties.collapsed !== void 0 ? `collapsed={${properties.collapsed}}` : ""}
+  width={${properties.width || 200}}
+  ${properties.theme ? `theme="${properties.theme}"` : ""}
+>
+  <Menu
+    mode="inline"
+    ${properties.theme ? `theme="${properties.theme}"` : ""}
+    items={${properties.items || "menuItems"}}
+  />
+</Sider>`;
+      }
+    },
+    pagination: {
+      imports: ["import { Pagination } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Pagination
+  current={current}
+  total={${properties.total || 100}}
+  pageSize={${properties.pageSize || 10}}
+  onChange={handleChange}
+  ${properties.showSizeChanger ? "showSizeChanger" : ""}
+  ${properties.showQuickJumper ? "showQuickJumper" : ""}
+  ${properties.showTotal ? `showTotal={(total) => \`Total \${total} items\`}` : ""}
+  ${properties.size ? `size="${properties.size}"` : ""}
+/>`;
+      }
+    },
+    // ====================================================================
+    // LAYOUT (6 types)
+    // ====================================================================
+    accordion: {
+      imports: ["import { Collapse } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Collapse
+  ${properties.accordion ? "accordion" : ""}
+  ${properties.bordered !== false ? "" : "bordered={false}"}
+  ${properties.expandIconPosition ? `expandIconPosition="${properties.expandIconPosition}"` : ""}
+  items={${properties.items || "collapseItems"}}
+/>`;
+      }
+    },
+    carousel: {
+      imports: ["import { Carousel } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Carousel
+  ${properties.autoplay ? "autoplay" : ""}
+  ${properties.autoplaySpeed ? `autoplaySpeed={${properties.autoplaySpeed}}` : ""}
+  ${properties.dots !== false ? "" : "dots={false}"}
+  ${properties.effect ? `effect="${properties.effect}"` : ""}
+>
+  {items?.map((item) => (
+    <div key={item.id}>{item.content}</div>
+  ))}
+</Carousel>`;
+      }
+    },
+    container: {
+      imports: ["import { Layout } from 'antd'", "const { Content } = Layout"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Content style={{ padding: '${properties.padding || "24px"}', ${properties.maxWidth ? `maxWidth: '${properties.maxWidth}'` : ""} }}>
+  ${children || "{/* Content */}"}
+</Content>`;
+      }
+    },
+    divider: {
+      imports: ["import { Divider } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Divider
+  ${properties.type === "vertical" ? 'type="vertical"' : ""}
+  ${properties.dashed ? "dashed" : ""}
+  ${properties.orientation ? `orientation="${properties.orientation}"` : ""}
+>
+  ${properties.text || ""}
+</Divider>`;
+      }
+    },
+    header: {
+      imports: ["import { Layout, Typography } from 'antd'", "const { Header } = Layout", "const { Title } = Typography"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Header style={{ padding: '16px 24px', background: '#fff', borderBottom: '1px solid #f0f0f0' }}>
+  ${properties.title ? `<Title level={4}>${properties.title}</Title>` : ""}
+  ${properties.subtitle ? `<Typography.Text type="secondary">${properties.subtitle}</Typography.Text>` : ""}
+  ${children || ""}
+</Header>`;
+      }
+    },
+    footer: {
+      imports: ["import { Layout, Typography } from 'antd'", "const { Footer } = Layout"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Footer style={{ textAlign: 'center', padding: '24px 50px' }}>
+  ${properties.copyright ? `<Typography.Text>${properties.copyright}</Typography.Text>` : ""}
+  ${children || ""}
+</Footer>`;
+      }
+    },
+    // ====================================================================
+    // PROGRESS (2 types)
+    // ====================================================================
+    "progress-bar": {
+      imports: ["import { Progress } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Progress
+  percent={${properties.value || 0}}
+  ${properties.status ? `status="${properties.status}"` : ""}
+  ${properties.showInfo !== false ? "" : "showInfo={false}"}
+  ${properties.strokeColor ? `strokeColor="${properties.strokeColor}"` : ""}
+  ${properties.size ? `size="${properties.size}"` : ""}
+/>`;
+      }
+    },
+    "progress-circle": {
+      imports: ["import { Progress } from 'antd'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Progress
+  type="circle"
+  percent={${properties.value || 0}}
+  ${properties.status ? `status="${properties.status}"` : ""}
+  ${properties.width ? `width={${properties.width}}` : ""}
+  ${properties.strokeColor ? `strokeColor="${properties.strokeColor}"` : ""}
+/>`;
+      }
+    },
+    // ====================================================================
+    // SPECIALIZED (2 types)
+    // ====================================================================
+    searchBar: {
+      imports: ["import { Input } from 'antd'", "import { SearchOutlined } from '@ant-design/icons'"],
+      render: (ctx) => {
+        const { properties } = ctx;
+        return `<Input.Search
+  placeholder="${properties.placeholder || "Search..."}"
+  ${properties.enterButton !== false ? "enterButton" : ""}
+  ${properties.loading ? "loading" : ""}
+  ${properties.size ? `size="${properties.size}"` : ""}
+  onSearch={handleSearch}
+/>`;
+      }
+    },
+    filterPanel: {
+      imports: ["import { Card, Space } from 'antd'"],
+      render: (ctx) => {
+        const { properties, children } = ctx;
+        return `<Card title="Filters" ${properties.bordered !== false ? "" : "bordered={false}"}>
+  <Space direction="vertical" style={{ width: '100%' }}>
+    ${children || "{/* Filter controls */}"}
+  </Space>
+</Card>`;
+      }
+    }
+  }
+};
+export {
+  antdAdapter
+};