{
  "id": "todo-list-json",
  "name": "Todo List (Pure JSON)",
  "layout": {
    "type": "single"
  },
  "dataSources": [
    {
      "id": "todos",
      "type": "kv",
      "key": "app-todos-json",
      "defaultValue": [
        { "id": 1, "text": "Learn JSON-driven UI", "completed": true },
        { "id": 2, "text": "Build with pure JSON events", "completed": false },
        { "id": 3, "text": "No TypeScript functions needed!", "completed": false }
      ]
    },
    {
      "id": "newTodo",
      "type": "static",
      "defaultValue": ""
    }
  ],
  "components": [
    {
      "id": "root",
      "type": "div",
      "props": {
        "className": "h-full overflow-auto p-6 bg-gradient-to-br from-background via-background to-primary/5"
      },
      "children": [
        {
          "id": "header",
          "type": "div",
          "props": { "className": "mb-6" },
          "children": [
            {
              "id": "title",
              "type": "Heading",
              "props": {
                "className": "text-4xl font-bold mb-2 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent",
                "children": "Pure JSON Todo List"
              }
            },
            {
              "id": "subtitle",
              "type": "Text",
              "props": {
                "className": "text-muted-foreground",
                "children": "No TypeScript functions required! All events use JSON expressions."
              }
            }
          ]
        },
        {
          "id": "input-row",
          "type": "div",
          "props": { "className": "flex gap-2 mb-6 max-w-xl" },
          "children": [
            {
              "id": "todo-input",
              "type": "Input",
              "props": { "placeholder": "Add a new task..." },
              "bindings": {
                "value": { "source": "newTodo" }
              },
              "events": [
                {
                  "event": "change",
                  "actions": [
                    {
                      "id": "update-input",
                      "type": "set-value",
                      "target": "newTodo",
                      "expression": "event.target.value"
                    }
                  ]
                },
                {
                  "event": "keyPress",
                  "actions": [
                    {
                      "id": "add-on-enter",
                      "type": "create",
                      "target": "todos",
                      "valueTemplate": {
                        "id": "Date.now()",
                        "text": "data.newTodo",
                        "completed": false
                      }
                    },
                    {
                      "id": "clear-input-after-add",
                      "type": "set-value",
                      "target": "newTodo",
                      "value": ""
                    }
                  ]
                }
              ]
            },
            {
              "id": "add-button",
              "type": "Button",
              "props": { "children": "Add Task" },
              "events": [
                {
                  "event": "click",
                  "actions": [
                    {
                      "id": "add-todo",
                      "type": "create",
                      "target": "todos",
                      "valueTemplate": {
                        "id": "Date.now()",
                        "text": "data.newTodo",
                        "completed": false
                      }
                    },
                    {
                      "id": "clear-input",
                      "type": "set-value",
                      "target": "newTodo",
                      "value": ""
                    },
                    {
                      "id": "show-success",
                      "type": "show-toast",
                      "message": "Task added successfully!",
                      "variant": "success"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "id": "info-text",
          "type": "Text",
          "props": {
            "className": "text-sm text-muted-foreground mb-4",
            "children": "✨ This entire page uses pure JSON expressions - no TypeScript compute functions!"
          }
        }
      ]
    }
  ],
  "globalActions": []
}
