{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "message-bubble",
  "title": "MessageBubble",
  "description": "Visible plain-message surface with a body-medium default, separated from message-row direction and metadata.",
  "type": "registry:ui",
  "meta": {
    "library": "@ds-mo/ui",
    "distribution": "npm",
    "storybook": "https://zainadeel.github.io/compomo/?path=/story/message-bubble",
    "source": "src/wc/components/MessageBubble/MessageBubble.tsx",
    "intentStatus": "complete",
    "intent": {
      "audience": "general",
      "status": "experimental",
      "summary": "Visible plain-message surface with a body-medium default, separated from message-row direction and metadata.",
      "useWhen": [
        "Plain user-sent or received person-to-person message copy needs a visible surface within a Message row.",
        "Plain conversation copy should use the shared body-medium regular typography recipe without application styling."
      ],
      "avoidWhen": [
        "The surface is a general card, callout, or form container.",
        "The content is a rich agent response; compose AgentResponse directly in Message.",
        "The state only indicates that another participant is typing; use TypingIndicator."
      ],
      "commonlyComposedWith": [
        "component:ds-message"
      ],
      "patterns": [
        "pattern:conversation"
      ],
      "accessibility": [
        "Surface styling does not add semantics; failed delivery belongs in Message metadata below the unchanged bubble rather than in an error bubble treatment."
      ],
      "states": [
        "The user variant represents user-sent copy in agent and person-to-person channels and uses secondary foreground.",
        "The received variant represents ordinary incoming person-to-person copy.",
        "Typing and rich agent output are not MessageBubble variants."
      ],
      "responsiveBehavior": [
        "The bubble wraps plain message copy within the transcript width."
      ],
      "references": [
        {
          "label": "Storybook examples",
          "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
        }
      ]
    },
    "api": {
      "props": {
        "variant": {
          "type": "MessageBubbleVariant",
          "resolvedType": "\"received\" | \"user\"",
          "attribute": "variant",
          "default": "'received'",
          "required": false,
          "mutable": false
        }
      },
      "events": [],
      "methods": [],
      "slots": []
    },
    "props": {
      "variant": {
        "type": "MessageBubbleVariant",
        "resolvedType": "\"received\" | \"user\"",
        "attribute": "variant",
        "default": "'received'",
        "required": false,
        "mutable": false
      }
    },
    "events": [],
    "methods": [],
    "slots": [],
    "exports": {
      "customElement": "ds-message-bubble",
      "react": "DsMessageBubble",
      "vue": "DsMessageBubble",
      "angular": "DsMessageBubble"
    },
    "consumption": {
      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
      "customElements": {
        "import": "import '@ds-mo/ui/dist/components/ds-message-bubble.js';",
        "example": "<ds-message-bubble></ds-message-bubble>"
      },
      "react": {
        "import": "import { DsMessageBubble } from '@ds-mo/ui/react';",
        "example": "<DsMessageBubble />"
      },
      "vue": {
        "import": "import { DsMessageBubble } from '@ds-mo/ui/vue';",
        "example": "<DsMessageBubble />"
      },
      "angular": {
        "import": "import { DsMessageBubble } from '@ds-mo/ui/angular/ds-message-bubble';",
        "example": "<ds-message-bubble></ds-message-bubble>"
      },
      "peerDependencies": {
        "required": [
          "@ds-mo/tokens ^6.5.0",
          "@ds-mo/icons ^7.0.0"
        ],
        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
      }
    }
  },
  "dependencies": [
    "@ds-mo/ui",
    "@ds-mo/tokens"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/wc/components/MessageBubble/MessageBubble.css",
      "content": ":host {\n  display: inline-flex;\n  max-width: 80%;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.message-bubble {\n  min-width: 0;\n  padding-block: var(--dimension-space-100);\n  padding-inline: calc(var(--dimension-space-100) + var(--dimension-space-025));\n  border-radius: var(--dimension-radius-050);\n  background: transparent;\n  color: var(--color-foreground-primary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n\n:host(.message-bubble--user) .message-bubble {\n  background: var(--color-translucent-translucent);\n  color: var(--color-foreground-secondary);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.message-bubble--received) .message-bubble {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "src/wc/components/MessageBubble/MessageBubble.tsx",
      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type MessageBubbleVariant = 'user' | 'received';\n\n@Component({\n  tag: 'ds-message-bubble',\n  styleUrl: 'MessageBubble.css',\n  scoped: true,\n})\nexport class MessageBubble {\n  @Prop() variant: MessageBubbleVariant = 'received';\n\n  render() {\n    return (\n      <Host class={`message-bubble--${this.variant}`}>\n        <div class=\"message-bubble\"><slot /></div>\n      </Host>\n    );\n  }\n}\n",
      "type": "registry:ui"
    }
  ]
}