Popover

{
  "state": {
    "isOpen": { "type": "boolean", "initial": false }
  },
  "actions": [
    { "name": "toggle", "steps": [{ "do": "update", "target": "isOpen", "operation": "toggle" }] }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "props": { "class": { "expr": "lit", "value": "relative inline-block" } },
    "children": [
      {
        "kind": "element",
        "tag": "button",
        "props": {
          "class": { "expr": "lit", "value": "rounded-md bg-secondary px-3 py-1.5 text-sm" },
          "onClick": { "action": "toggle" }
        },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Open Popover" } }]
      },
      {
        "kind": "if",
        "condition": { "expr": "state", "name": "isOpen" },
        "then": {
          "kind": "element",
          "tag": "div",
          "props": { "class": { "expr": "lit", "value": "absolute top-full left-1/2 -translate-x-1/2 mt-2 rounded-lg border bg-card p-4 shadow-lg w-64 z-10" } },
          "children": [
            { "kind": "element", "tag": "div", "props": { "class": { "expr": "lit", "value": "font-medium text-sm" } }, "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Popover Title" } }] },
            { "kind": "element", "tag": "p", "props": { "class": { "expr": "lit", "value": "text-sm text-muted-foreground mt-1" } }, "children": [{ "kind": "text", "value": { "expr": "lit", "value": "This is the popover content." } }] }
          ]
        }
      }
    ]
  }
}