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
};
