Dialog

{
  "state": {
    "isOpen": { "type": "boolean", "initial": false }
  },
  "actions": [
    { "name": "open", "steps": [{ "do": "set", "target": "isOpen", "value": { "expr": "lit", "value": true } }] },
    { "name": "close", "steps": [{ "do": "set", "target": "isOpen", "value": { "expr": "lit", "value": false } }] }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "children": [
      {
        "kind": "element",
        "tag": "button",
        "props": {
          "class": { "expr": "lit", "value": "rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground" },
          "onClick": { "action": "open" }
        },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Open Dialog" } }]
      },
      {
        "kind": "if",
        "condition": { "expr": "state", "name": "isOpen" },
        "then": {
          "kind": "element",
          "tag": "div",
          "props": {
            "class": { "expr": "lit", "value": "fixed inset-0 z-50 flex items-center justify-center" }
          },
          "children": [
            {
              "kind": "element",
              "tag": "div",
              "props": {
                "class": { "expr": "lit", "value": "fixed inset-0 bg-black/50" },
                "onClick": { "action": "close" }
              }
            },
            {
              "kind": "element",
              "tag": "div",
              "props": {
                "role": { "expr": "lit", "value": "dialog" },
                "aria-modal": { "expr": "lit", "value": true },
                "class": { "expr": "lit", "value": "relative z-10 rounded-lg bg-background p-6 shadow-lg w-full max-w-md" }
              },
              "children": [
                {
                  "kind": "element",
                  "tag": "h2",
                  "props": { "class": { "expr": "lit", "value": "text-lg font-semibold" } },
                  "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Confirm Action" } }]
                },
                {
                  "kind": "element",
                  "tag": "p",
                  "props": { "class": { "expr": "lit", "value": "mt-2 text-sm text-muted-foreground" } },
                  "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Are you sure you want to proceed?" } }]
                },
                {
                  "kind": "element",
                  "tag": "div",
                  "props": { "class": { "expr": "lit", "value": "mt-4 flex justify-end gap-2" } },
                  "children": [
                    {
                      "kind": "element",
                      "tag": "button",
                      "props": {
                        "class": { "expr": "lit", "value": "rounded-md border px-4 py-2 text-sm" },
                        "onClick": { "action": "close" }
                      },
                      "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Cancel" } }]
                    },
                    {
                      "kind": "element",
                      "tag": "button",
                      "props": {
                        "class": { "expr": "lit", "value": "rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground" },
                        "onClick": { "action": "close" }
                      },
                      "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Confirm" } }]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    ]
  }
}