Router

{
  "version": "1.0",
  "state": {
    "currentPage": {
      "type": "string",
      "initial": "home"
    }
  },
  "actions": [
    {
      "name": "navigate",
      "steps": [
        {
          "do": "set",
          "target": "currentPage",
          "value": {
            "expr": "var",
            "name": "page"
          }
        }
      ]
    }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "props": {
      "style": {
        "expr": "lit",
        "value": "font-family: system-ui, sans-serif; padding: 16px;"
      }
    },
    "children": [
      {
        "kind": "element",
        "tag": "h1",
        "props": {
          "style": {
            "expr": "lit",
            "value": "margin: 0 0 8px 0; font-size: 24px;"
          }
        },
        "children": [
          {
            "kind": "text",
            "value": {
              "expr": "lit",
              "value": "Router Example"
            }
          }
        ]
      },
      {
        "kind": "element",
        "tag": "p",
        "props": {
          "style": {
            "expr": "lit",
            "value": "color: #666; margin: 0 0 16px 0;"
          }
        },
        "children": [
          {
            "kind": "text",
            "value": {
              "expr": "lit",
              "value": "Client-side routing between pages."
            }
          }
        ]
      },
      {
        "kind": "element",
        "tag": "nav",
        "props": {
          "style": {
            "expr": "lit",
            "value": "display: flex; gap: 8px; margin-bottom: 16px;"
          }
        },
        "children": [
          {
            "kind": "element",
            "tag": "button",
            "props": {
              "style": {
                "expr": "lit",
                "value": "padding: 8px 16px; background: #0070f3; color: white; border: none; border-radius: 4px; cursor: pointer;"
              },
              "onClick": {
                "event": "click",
                "action": "navigate",
                "payload": {
                  "page": {
                    "expr": "lit",
                    "value": "home"
                  }
                }
              }
            },
            "children": [
              {
                "kind": "text",
                "value": {
                  "expr": "lit",
                  "value": "Home"
                }
              }
            ]
          },
          {
            "kind": "element",
            "tag": "button",
            "props": {
              "style": {
                "expr": "lit",
                "value": "padding: 8px 16px; background: #0070f3; color: white; border: none; border-radius: 4px; cursor: pointer;"
              },
              "onClick": {
                "event": "click",
                "action": "navigate",
                "payload": {
                  "page": {
                    "expr": "lit",
                    "value": "about"
                  }
                }
              }
            },
            "children": [
              {
                "kind": "text",
                "value": {
                  "expr": "lit",
                  "value": "About"
                }
              }
            ]
          },
          {
            "kind": "element",
            "tag": "button",
            "props": {
              "style": {
                "expr": "lit",
                "value": "padding: 8px 16px; background: #0070f3; color: white; border: none; border-radius: 4px; cursor: pointer;"
              },
              "onClick": {
                "event": "click",
                "action": "navigate",
                "payload": {
                  "page": {
                    "expr": "lit",
                    "value": "contact"
                  }
                }
              }
            },
            "children": [
              {
                "kind": "text",
                "value": {
                  "expr": "lit",
                  "value": "Contact"
                }
              }
            ]
          }
        ]
      },
      {
        "kind": "element",
        "tag": "div",
        "props": {
          "style": {
            "expr": "lit",
            "value": "padding: 16px; background: #f5f5f5; border-radius: 8px;"
          }
        },
        "children": [
          {
            "kind": "element",
            "tag": "p",
            "props": {
              "style": {
                "expr": "lit",
                "value": "font-size: 18px; color: #333;"
              }
            },
            "children": [
              {
                "kind": "text",
                "value": {
                  "expr": "lit",
                  "value": "Current page: "
                }
              },
              {
                "kind": "text",
                "value": {
                  "expr": "state",
                  "name": "currentPage"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}