{
  "id": "live-indicator-container",
  "type": "div",
  "bindings": {
    "className": {
      "source": ["size", "className"],
      "transform": "const size = data[0] || 'md'; const customClass = data[1] || ''; const sizeClasses = { sm: 'text-xs gap-1.5', md: 'text-sm gap-2', lg: 'text-base gap-2.5' }; return `inline-flex items-center font-medium ${sizeClasses[size]} ${customClass}`.trim()"
    }
  },
  "children": [
    {
      "id": "live-indicator-pulse",
      "type": "span",
      "bindings": {
        "className": {
          "source": null,
          "transform": "'relative flex'"
        }
      },
      "children": [
        {
          "id": "live-indicator-ping",
          "type": "span",
          "bindings": {
            "className": {
              "source": "size",
              "transform": "const size = data || 'md'; const dotSizeClasses = { sm: 'w-2 h-2', md: 'w-2.5 h-2.5', lg: 'w-3 h-3' }; return `absolute inline-flex rounded-full bg-red-500 opacity-75 animate-ping ${dotSizeClasses[size]}`.trim()"
            }
          }
        },
        {
          "id": "live-indicator-dot",
          "type": "span",
          "bindings": {
            "className": {
              "source": "size",
              "transform": "const size = data || 'md'; const dotSizeClasses = { sm: 'w-2 h-2', md: 'w-2.5 h-2.5', lg: 'w-3 h-3' }; return `relative inline-flex rounded-full bg-red-500 ${dotSizeClasses[size]}`.trim()"
            }
          }
        }
      ]
    },
    {
      "id": "live-indicator-label",
      "type": "span",
      "bindings": {
        "className": {
          "source": null,
          "transform": "'text-red-500 font-bold tracking-wider'"
        },
        "children": {
          "source": "label",
          "transform": "data"
        },
        "_if": {
          "source": "showLabel",
          "transform": "data !== false"
        }
      }
    }
  ]
}
