interface BaseSchema {
  type: string;           // Component type (required)
  visible?: string;       // Visibility expression
  className?: string;     // CSS classes (Tailwind)
  style?: object;         // Inline styles
  ariaLabel?: string;     // Accessibility label
}

{ "type": "Button" }

{
  "type": "Card",
  "visible": "{{state.showCard}}"
}

{ "visible": "{{state.count}} > 0 && {{state.isActive}}" }

{
  "type": "Container",
  "className": "p-6 bg-white rounded-lg shadow"
}

{
  "type": "Button",
  "label": "Click Me",
  "events": {
    "on_click": [
      { "type": "update_state", "path": "count", "value": "{{state.count}} + 1" }
    ]
  }
}

{
  "type": "Text",
  "content": "Hello, {{state.userName}}!"
}

{
  "type": "Container",
  "className": "p-6",
  "children": [
    { "type": "Heading", "text": "Title", "level": 1 },
    { "type": "Text", "content": "Description text here." }
  ]
}

{
  "type": "Table",
  "dataSource": "state:items",
  "columns": [
    { "key": "name", "label": "Name" },
    { "key": "status", "label": "Status" }
  ]
}

{
  "type": "Button",
  "label": "Save",
  "variant": "default",
  "events": {
    "on_click": [
      { "type": "call_api", "api": "saveData" },
      { "type": "show_toast", "message": "Saved!" }
    ]
  }
}

{
  "type": "Conditional",
  "condition": "{{state.isLoading}}",
  "then": { "type": "Skeleton" },
  "else": { "type": "Card", "content": { "..." } }
}

{
  "type": "Card",
  "className": "bg-gradient-to-r from-blue-500 to-purple-500 text-white"
}

{
  "type": "Grid",
  "columns": { "sm": 1, "md": 2, "lg": 3 },
  "className": "gap-4 md:gap-6"
}

{
  "className": "bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
}