{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-ai-message-avatar",
  "title": "Aurora AI MessageAvatar",
  "author": "jmagar <https://github.com/jmagar>",
  "description": "Aurora AI MessageAvatar — Claude Design parity.",
  "dependencies": [
    "lucide-react@^0.487.0"
  ],
  "registryDependencies": [
    "@aurora/aurora-tokens",
    "@aurora/aurora-avatar"
  ],
  "files": [
    {
      "path": "registry/aurora/blocks/ai/elements/message-avatar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AuroraAvatar } from \"@/registry/aurora/ui/avatar\"\nimport { cn } from \"@/lib/utils\"\n\n// ─── Types ──────────────────────────────────────────────────────────────────\n\nexport type MessageAvatarTone = \"axon\" | \"rose\" | \"cyan\" | \"success\" | \"muted\"\nexport type MessageAvatarStatus = \"online\" | \"away\" | \"busy\" | \"offline\"\n\nexport interface MessageAvatarProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\"> {\n  /** Initials (or short label) rendered as the fallback. */\n  label: string\n  /** Optional image source — falls back to initials when missing/failed. */\n  src?: string\n  /** Accent family for the ring + initials. */\n  tone?: MessageAvatarTone\n  /** Presence dot. Omit to hide the dot entirely. */\n  status?: MessageAvatarStatus\n  /** Explicit pixel size (avatar is square/circular). */\n  size?: number\n}\n\n// ─── Tone → accent token ──────────────────────────────────────────────────────\n\nconst toneColor: Record<MessageAvatarTone, string> = {\n  axon: \"var(--axon-orange)\",\n  rose: \"var(--aurora-accent-pink)\",\n  cyan: \"var(--aurora-accent-primary)\",\n  success: \"var(--aurora-success)\",\n  muted: \"var(--aurora-text-muted)\",\n}\n\n// ─── Status → presence-dot color ──────────────────────────────────────────────\n\nconst statusColor: Record<MessageAvatarStatus, string> = {\n  online: \"var(--aurora-success)\",\n  away: \"var(--aurora-warn)\",\n  busy: \"var(--aurora-error)\",\n  offline: \"var(--aurora-neutral)\",\n}\n\n// ─── MessageAvatar ────────────────────────────────────────────────────────────\n// Circular initials/photo avatar with a tone-tinted ring and an optional glowing\n// presence dot. Visual spec ported 1:1 from the Claude Design source.\n\nconst MessageAvatar = (\n    { ref, className, label, src, tone = \"axon\", status, size = 34, style, ...props }: MessageAvatarProps & { ref?: React.Ref<React.ElementRef<typeof AuroraAvatar>> }\n  ) => {\n    const color = toneColor[tone]\n    // Dot sits at the bottom-right corner, overlapping the avatar ring.\n    // Size is 28-32% of avatar diameter; minimum 9px so it reads at small sizes.\n    const dotSize = Math.max(9, Math.round(size * 0.3))\n    // Positive offset pushes the dot inward so it never gets clipped by a parent.\n    // It lands just inside the avatar ring, consistent with CD reference.\n    const dotInset = Math.round(dotSize * 0.1)\n\n    return (\n      <span\n        className={cn(\"relative inline-flex shrink-0\", className)}\n        style={{ width: size, height: size, overflow: \"visible\" }}\n      >\n        <AuroraAvatar\n          ref={ref}\n          variant=\"default\"\n          size={size}\n          src={src}\n          alt={label}\n          fallback={label.slice(0, 2).toUpperCase()}\n          style={{\n            borderRadius: \"50%\",\n            border: `1.5px solid color-mix(in srgb, ${color} 35%, var(--aurora-border-default))`,\n            background: `color-mix(in srgb, ${color} 13%, var(--aurora-panel-medium))`,\n            boxShadow: `0 0 0 3px color-mix(in srgb, ${color} 8%, transparent), var(--aurora-highlight-medium)`,\n            color,\n            fontFamily: \"var(--aurora-font-display)\",\n            fontSize: Math.max(11, Math.round(size * 0.35)),\n            fontWeight: 800,\n            ...style,\n          }}\n          {...props}\n        />\n\n        {status ? (\n          <span\n            role=\"img\"\n            aria-label={`Status: ${status}`}\n            style={{\n              position: \"absolute\",\n              bottom: dotInset,\n              right: dotInset,\n              width: dotSize,\n              height: dotSize,\n              borderRadius: \"50%\",\n              backgroundColor: statusColor[status],\n              border: \"2px solid var(--aurora-page-bg)\",\n              boxShadow: `0 0 6px ${statusColor[status]}`,\n              // Ensure dot always renders above the avatar image\n              zIndex: 1,\n            }}\n          />\n        ) : null}\n      </span>\n    )\n  }\nMessageAvatar.displayName = \"MessageAvatar\"\n\nexport { MessageAvatar }\nexport default MessageAvatar\n",
      "type": "registry:component",
      "target": "@components/aurora/ai/message-avatar.tsx"
    }
  ],
  "meta": {
    "namespace": "@aurora",
    "style": "aurora",
    "family": "block",
    "requiresTokens": true,
    "sourcePath": "registry/aurora/blocks/ai/elements/message-avatar.tsx",
    "installTarget": "@components/aurora/ai/message-avatar.tsx"
  },
  "docs": "Aurora block that installs Aurora AI MessageAvatar.\n\nInstall `aurora-tokens` and `aurora-avatar` first; the shadcn CLI resolves these automatically through the @aurora registry namespace.\n\nDefault install target: `@components/aurora/ai/message-avatar.tsx`.\n\nRegistry dependencies: `aurora-tokens`, `aurora-avatar`.",
  "categories": [
    "aurora",
    "block",
    "ai"
  ],
  "type": "registry:block"
}