Toast

{
  "state": {
    "visible": { "type": "boolean", "initial": false }
  },
  "actions": [
    {
      "name": "show",
      "steps": [
        { "do": "set", "target": "visible", "value": { "expr": "lit", "value": true } },
        { "do": "delay", "ms": { "expr": "lit", "value": 3000 }, "then": [{ "do": "set", "target": "visible", "value": { "expr": "lit", "value": false } }] }
      ]
    }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "props": { "class": { "expr": "lit", "value": "relative" } },
    "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": "show" }
        },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Show Toast" } }]
      },
      {
        "kind": "if",
        "condition": { "expr": "state", "name": "visible" },
        "then": {
          "kind": "element",
          "tag": "div",
          "props": {
            "role": { "expr": "lit", "value": "alert" },
            "class": { "expr": "lit", "value": "absolute top-full left-0 mt-4 rounded-lg border bg-card p-4 shadow-lg" }
          },
          "children": [
            { "kind": "element", "tag": "div", "props": { "class": { "expr": "lit", "value": "font-medium" } }, "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Success!" } }] },
            { "kind": "element", "tag": "div", "props": { "class": { "expr": "lit", "value": "text-sm text-muted-foreground" } }, "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Changes saved." } }] }
          ]
        }
      }
    ]
  }
}