{
  "id": "json-ui-dashboard",
  "title": "JSON-Driven Dashboard",
  "description": "A complete UI page rendered from JSON declarations",
  "layout": {
    "type": "flex",
    "direction": "column",
    "gap": "6",
    "className": "h-full overflow-auto p-6"
  },
  "components": [
    {
      "id": "page-header",
      "type": "div",
      "props": {
        "className": "mb-6"
      },
      "children": [
        {
          "id": "page-title",
          "type": "div",
          "props": {
            "className": "text-3xl font-bold mb-2"
          },
          "children": [
            {
              "id": "title-text",
              "type": "div",
              "props": {
                "children": "JSON-Driven UI System"
              }
            }
          ]
        },
        {
          "id": "page-description",
          "type": "div",
          "props": {
            "className": "text-muted-foreground",
            "children": "This entire page is rendered from JSON schemas with data bindings"
          }
        }
      ]
    },
    {
      "id": "stat-cards-grid",
      "type": "div",
      "props": {
        "className": "grid gap-4 md:grid-cols-2 lg:grid-cols-3"
      },
      "children": [
        {
          "id": "stat-card-1",
          "type": "Card",
          "children": [
            {
              "id": "stat-card-1-header",
              "type": "CardHeader",
              "children": [
                {
                  "id": "stat-card-1-title",
                  "type": "CardTitle",
                  "props": {
                    "className": "flex items-center gap-2"
                  },
                  "children": [
                    {
                      "id": "stat-1-text",
                      "type": "div",
                      "props": {
                        "children": "{{files.length}} Files"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "id": "stat-card-1-content",
              "type": "CardContent",
              "children": [
                {
                  "id": "stat-1-value",
                  "type": "div",
                  "props": {
                    "className": "text-2xl font-bold",
                    "children": "{{files.length}}"
                  }
                }
              ]
            }
          ]
        },
        {
          "id": "stat-card-2",
          "type": "Card",
          "children": [
            {
              "id": "stat-card-2-header",
              "type": "CardHeader",
              "children": [
                {
                  "id": "stat-card-2-title",
                  "type": "CardTitle",
                  "props": {
                    "children": "{{models.length}} Models"
                  }
                }
              ]
            },
            {
              "id": "stat-card-2-content",
              "type": "CardContent",
              "children": [
                {
                  "id": "stat-2-value",
                  "type": "div",
                  "props": {
                    "className": "text-2xl font-bold",
                    "children": "{{models.length}}"
                  }
                }
              ]
            }
          ]
        },
        {
          "id": "stat-card-3",
          "type": "Card",
          "children": [
            {
              "id": "stat-card-3-header",
              "type": "CardHeader",
              "children": [
                {
                  "id": "stat-card-3-title",
                  "type": "CardTitle",
                  "props": {
                    "children": "{{components.length}} Components"
                  }
                }
              ]
            },
            {
              "id": "stat-card-3-content",
              "type": "CardContent",
              "children": [
                {
                  "id": "stat-3-value",
                  "type": "div",
                  "props": {
                    "className": "text-2xl font-bold",
                    "children": "{{components.length}}"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "files-section",
      "type": "Card",
      "props": {
        "className": "mt-6"
      },
      "children": [
        {
          "id": "files-header",
          "type": "CardHeader",
          "children": [
            {
              "id": "files-title",
              "type": "CardTitle",
              "props": {
                "children": "Recent Files"
              }
            },
            {
              "id": "files-description",
              "type": "CardDescription",
              "props": {
                "children": "Files loaded from your project"
              }
            }
          ]
        },
        {
          "id": "files-content",
          "type": "CardContent",
          "children": [
            {
              "id": "files-list",
              "type": "div",
              "props": {
                "className": "space-y-2"
              },
              "repeat": {
                "items": "files.slice(0, 5)",
                "itemVar": "file"
              },
              "children": [
                {
                  "id": "file-item",
                  "type": "div",
                  "props": {
                    "className": "flex items-center justify-between p-2 border border-border rounded-md hover:bg-accent/50 transition-colors"
                  },
                  "children": [
                    {
                      "id": "file-name",
                      "type": "div",
                      "props": {
                        "className": "font-mono text-sm",
                        "children": "{{file.name}}"
                      }
                    },
                    {
                      "id": "file-badge",
                      "type": "Badge",
                      "props": {
                        "variant": "outline",
                        "children": "{{file.type}}"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
