{
  "config": {
    "layout": {
      "id": "state-update-demo",
      "styles": "width: 100%; font-family: system-ui, sans-serif; border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden;",
      "components": [
        {
          "id": "header",
          "type": "div",
          "styles": "background-color: #1e293b; color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center;",
          "components": [
            {
              "id": "title",
              "type": "h2",
              "value": "Complex State Update Demo",
              "styles": "margin: 0; font-size: 1.25rem; font-weight: 600;"
            },
            {
              "id": "render-count",
              "type": "div",
              "styles": "font-size: 0.875rem; color: #94a3b8;",
              "source": {
                "key": "OBJECT",
                "props": {
                  "object": {
                    "key": "DATA",
                    "path": "$.renderInfo.count"
                  }
                }
              }
            }
          ]
        },
        {
          "id": "content",
          "type": "div",
          "styles": "padding: 1rem;",
          "components": [
            {
              "id": "user-info",
              "type": "div",
              "styles": "margin-bottom: 1rem; padding: 1rem; background-color: #f8fafc; border-radius: 0.5rem;",
              "components": [
                {
                  "id": "user-name",
                  "type": "div",
                  "styles": "font-weight: 600; margin-bottom: 0.5rem;",
                  "source": {
                    "key": "OBJECT",
                    "props": {
                      "object": {
                        "key": "DATA",
                        "path": "$.user.name"
                      }
                    }
                  }
                },
                {
                  "id": "user-email",
                  "type": "div",
                  "styles": "color: #64748b;",
                  "source": {
                    "key": "OBJECT",
                    "props": {
                      "object": {
                        "key": "DATA",
                        "path": "$.user.email"
                      }
                    }
                  }
                }
              ]
            },
            {
              "id": "verification-status",
              "type": "div",
              "styles": "background-color: #f8fafc; padding: 1rem; border-radius: 0.5rem;",
              "components": [
                {
                  "id": "status-title",
                  "type": "h3",
                  "value": "Verification Status",
                  "styles": "margin: 0 0 0.5rem 0; font-size: 1rem;"
                },
                {
                  "id": "status-list",
                  "type": "ul",
                  "styles": "margin: 0; padding-left: 1.5rem;",
                  "components": [
                    {
                      "id": "status-item-1",
                      "type": "li",
                      "styles": "margin-bottom: 0.5rem;",
                      "source": {
                        "key": "OBJECT",
                        "props": {
                          "object": {
                            "key": "DATA",
                            "path": "$.verification.status1"
                          }
                        }
                      }
                    },
                    {
                      "id": "status-item-2",
                      "type": "li",
                      "styles": "margin-bottom: 0.5rem;",
                      "source": {
                        "key": "OBJECT",
                        "props": {
                          "object": {
                            "key": "DATA",
                            "path": "$.verification.status2"
                          }
                        }
                      }
                    }
                  ]
                }
              ]
            },
            {
              "id": "performance-metrics",
              "type": "div",
              "styles": "margin-top: 1rem; padding: 1rem; background-color: #f8fafc; border-radius: 0.5rem;",
              "components": [
                {
                  "id": "metrics-title",
                  "type": "h3",
                  "value": "Performance Metrics",
                  "styles": "margin: 0 0 0.5rem 0; font-size: 1rem;"
                },
                {
                  "id": "metrics-grid",
                  "type": "div",
                  "styles": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;",
                  "components": [
                    {
                      "id": "metric-1",
                      "type": "div",
                      "styles": "padding: 0.5rem; background-color: white; border-radius: 0.25rem;",
                      "components": [
                        {
                          "id": "metric-1-label",
                          "type": "div",
                          "value": "Last Update:",
                          "styles": "font-size: 0.875rem; color: #64748b;"
                        },
                        {
                          "id": "metric-1-value",
                          "type": "div",
                          "source": {
                            "key": "OBJECT",
                            "props": {
                              "object": {
                                "key": "DATA",
                                "path": "$.performance.lastUpdate"
                              }
                            }
                          },
                          "styles": "font-weight: 500;"
                        }
                      ]
                    },
                    {
                      "id": "metric-2",
                      "type": "div",
                      "styles": "padding: 0.5rem; background-color: white; border-radius: 0.25rem;",
                      "components": [
                        {
                          "id": "metric-2-label",
                          "type": "div",
                          "value": "Update Count:",
                          "styles": "font-size: 0.875rem; color: #64748b;"
                        },
                        {
                          "id": "metric-2-value",
                          "type": "div",
                          "source": {
                            "key": "OBJECT",
                            "props": {
                              "object": {
                                "key": "DATA",
                                "path": "$.performance.updateCount"
                              }
                            }
                          },
                          "styles": "font-weight: 500;"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  }
}