{
  "id": "avatar-root",
  "type": "div",
  "bindings": {
    "className": {
      "source": "size",
      "transform": "(() => { const sizeClasses = { xs: 'w-6 h-6 text-xs', sm: 'w-8 h-8 text-sm', md: 'w-10 h-10 text-base', lg: 'w-12 h-12 text-lg', xl: 'w-16 h-16 text-xl' }; return 'relative inline-flex items-center justify-center rounded-full bg-muted overflow-hidden ' + (sizeClasses[data] || sizeClasses.md); })()"
    }
  },
  "conditional": {
    "if": "src",
    "then": {
      "id": "avatar-image",
      "type": "img",
      "bindings": {
        "src": "src",
        "alt": "alt"
      },
      "props": {
        "className": "w-full h-full object-cover"
      }
    },
    "else": {
      "id": "avatar-fallback",
      "type": "span",
      "props": {
        "className": "font-medium text-muted-foreground"
      },
      "bindings": {
        "children": {
          "source": "fallback",
          "transform": "data || (props.alt?.slice(0, 2).toUpperCase()) || '?'"
        }
      }
    }
  }
}
