@ds-mo/ui 13.3.0 → 13.4.0

package/dist/mcp-data/registry/code-block.json

@@ -144,7 +144,7 @@
     },
     {
       "path": "src/wc/components/CodeBlock/CodeBlock.tsx",
-      "content": "import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ds-code-block',\n  styleUrl: 'CodeBlock.css',\n  scoped: true,\n})\nexport class CodeBlock {\n  @Prop() code: string = '';\n  @Prop() language: string = '';\n  @Prop() filename: string = '';\n\n  @State() private copied: boolean = false;\n  private copiedTimer?: ReturnType<typeof setTimeout>;\n\n  disconnectedCallback() {\n    if (this.copiedTimer) clearTimeout(this.copiedTimer);\n  }\n\n  private copy = async () => {\n    if (!navigator.clipboard || !this.code) return;\n    await navigator.clipboard.writeText(this.code);\n    this.copied = true;\n    if (this.copiedTimer) clearTimeout(this.copiedTimer);\n    this.copiedTimer = setTimeout(() => {\n      this.copied = false;\n    }, 2000);\n  };\n\n  render() {\n    const label = this.filename || this.language || 'Code';\n    return (\n      <Host>\n        <figure class=\"code-block\">\n          <figcaption class=\"code-block__header\">\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"on-strong\">\n              {label}\n            </ds-text>\n            <ds-tooltip label={this.copied ? 'Copied' : 'Copy code'} side=\"bottom\" size=\"sm\">\n              <ds-button-unfilled\n                variant=\"icon\"\n                icon={this.copied ? 'Check' : 'Copy'}\n                size=\"xs\"\n                aria-label={this.copied ? 'Copied' : 'Copy code'}\n                hasBorder={false}\n                onDsClick={this.copy}\n              />\n            </ds-tooltip>\n          </figcaption>\n          <pre>\n            <code>{this.code}</code>\n          </pre>\n        </figure>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ClipboardFeedbackController } from '../../utils/clipboard';\n\n@Component({\n  tag: 'ds-code-block',\n  styleUrl: 'CodeBlock.css',\n  scoped: true,\n})\nexport class CodeBlock {\n  @Prop() code: string = '';\n  @Prop() language: string = '';\n  @Prop() filename: string = '';\n\n  @State() private copied: boolean = false;\n  private readonly copyFeedback = new ClipboardFeedbackController(copied => {\n    this.copied = copied;\n  });\n\n  connectedCallback() {\n    this.copyFeedback.connect();\n  }\n\n  @Watch('code')\n  handleCodeChange() {\n    this.copyFeedback.reset();\n  }\n\n  disconnectedCallback() {\n    this.copyFeedback.disconnect();\n  }\n\n  private copy = async () => {\n    await this.copyFeedback.copy(this.code);\n  };\n\n  render() {\n    const label = this.filename || this.language || 'Code';\n    return (\n      <Host>\n        <figure class=\"code-block\">\n          <figcaption class=\"code-block__header\">\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"on-strong\">\n              {label}\n            </ds-text>\n            <ds-tooltip label={this.copied ? 'Copied' : 'Copy code'} side=\"bottom\" size=\"sm\">\n              <ds-button-unfilled\n                variant=\"icon\"\n                icon={this.copied ? 'Check' : 'Copy'}\n                size=\"xs\"\n                aria-label={this.copied ? 'Copied' : 'Copy code'}\n                hasBorder={false}\n                onDsClick={this.copy}\n              />\n            </ds-tooltip>\n          </figcaption>\n          <pre>\n            <code>{this.code}</code>\n          </pre>\n        </figure>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/message-actions.json

@@ -0,0 +1,186 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "message-actions",
+  "title": "MessageActions",
+  "description": "Reusable message-level Copy and controlled response-feedback actions with consistent compact presentation and browser clipboard feedback.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/message-actions",
+    "source": "src/wc/components/MessageActions/MessageActions.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "specialized",
+      "status": "experimental",
+      "summary": "Reusable message-level Copy and controlled response-feedback actions with consistent compact presentation and browser clipboard feedback.",
+      "useWhen": [
+        "A message metadata row needs Copy alone or Copy with mutually exclusive positive and negative response feedback."
+      ],
+      "avoidWhen": [
+        "The action executes, retries, regenerates, approves, edits, or otherwise changes message content."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-message",
+        "component:ds-agent-response",
+        "component:ds-button-unfilled"
+      ],
+      "patterns": [
+        "pattern:conversation",
+        "pattern:agent-chat"
+      ],
+      "accessibility": [
+        "Every icon action has a matching tooltip and accessible name.",
+        "Feedback uses genuine pressed toggle semantics and Copy announces its temporary Copied state through the control name."
+      ],
+      "states": [
+        "The component owns clipboard execution and temporary copied feedback while the application supplies the exact copyable text.",
+        "Feedback is controlled: the component emits the requested positive, negative, or cleared value while the application owns persistence and consequences.",
+        "Copy, positive feedback, and negative feedback retain one stable order."
+      ],
+      "responsiveBehavior": [
+        "The compact action group follows the visibility and metadata placement policy of its owning Message."
+      ],
+      "references": [
+        {
+          "label": "Message metadata composition",
+          "path": "src/wc/components/Message/Message.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "copyText": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "copy-text",
+          "required": false,
+          "mutable": false
+        },
+        "feedback": {
+          "type": "MessageFeedback | undefined",
+          "resolvedType": "\"negative\" | \"positive\" | undefined",
+          "attribute": "feedback",
+          "required": false,
+          "mutable": false
+        },
+        "feedbackEnabled": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "feedback-enabled",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [
+        {
+          "name": "dsCopyResult",
+          "detail": "MessageCopyResultEventDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsFeedbackChange",
+          "detail": "MessageFeedback | undefined",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "copyText": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "copy-text",
+        "required": false,
+        "mutable": false
+      },
+      "feedback": {
+        "type": "MessageFeedback | undefined",
+        "resolvedType": "\"negative\" | \"positive\" | undefined",
+        "attribute": "feedback",
+        "required": false,
+        "mutable": false
+      },
+      "feedbackEnabled": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "feedback-enabled",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [
+      {
+        "name": "dsCopyResult",
+        "detail": "MessageCopyResultEventDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsFeedbackChange",
+        "detail": "MessageFeedback | undefined",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-message-actions",
+      "react": "DsMessageActions",
+      "angular": "DsMessageActions"
+    },
+    "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-actions.js';",
+        "example": "<ds-message-actions></ds-message-actions>"
+      },
+      "react": {
+        "import": "import { DsMessageActions } from '@ds-mo/ui/react';",
+        "example": "<DsMessageActions />"
+      },
+      "angular": {
+        "import": "import { DsMessageActions } from '@ds-mo/ui/angular/ds-message-actions';",
+        "example": "<ds-message-actions></ds-message-actions>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/icons ^6.4.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-unfilled",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/MessageActions/MessageActions.css",
+      "content": ":host {\n  display: inline-flex;\n  box-sizing: border-box;\n}\n\n.message-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/MessageActions/MessageActions.tsx",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ClipboardFeedbackController } from '../../utils/clipboard';\nimport type { MessageCopyResultEventDetail, MessageFeedback } from '../conversation-types';\n\n@Component({\n  tag: 'ds-message-actions',\n  styleUrl: 'MessageActions.css',\n  scoped: true,\n})\nexport class MessageActions {\n  @Prop() copyText: string | undefined;\n  @Prop() feedbackEnabled: boolean = false;\n  @Prop() feedback: MessageFeedback | undefined;\n\n  @State() private copied: boolean = false;\n\n  @Event() dsCopyResult!: EventEmitter<MessageCopyResultEventDetail>;\n  @Event() dsFeedbackChange!: EventEmitter<MessageFeedback | undefined>;\n\n  private readonly copyFeedback = new ClipboardFeedbackController(copied => {\n    this.copied = copied;\n  });\n\n  connectedCallback() {\n    this.copyFeedback.connect();\n  }\n\n  @Watch('copyText')\n  handleCopyTextChange() {\n    this.copyFeedback.reset();\n  }\n\n  disconnectedCallback() {\n    this.copyFeedback.disconnect();\n  }\n\n  private copy = async () => {\n    const success = await this.copyFeedback.copy(this.copyText ?? '');\n    if (success === undefined) return;\n\n    this.dsCopyResult.emit({ status: success ? 'success' : 'error' });\n  };\n\n  private changeFeedback(feedback: MessageFeedback, selected: boolean) {\n    this.dsFeedbackChange.emit(selected ? feedback : undefined);\n  }\n\n  render() {\n    const copyLabel = this.copied ? 'Copied' : 'Copy message';\n\n    return (\n      <Host>\n        <div class=\"message-actions\" role=\"group\" aria-label=\"Message actions\">\n          {this.copyText ? (\n            <ds-tooltip label={copyLabel} side=\"top\" size=\"sm\">\n              <ds-button-unfilled\n                variant=\"icon\"\n                icon={this.copied ? 'Check' : 'Copy'}\n                size=\"xs\"\n                aria-label={copyLabel}\n                hasBorder={false}\n                onDsClick={this.copy}\n              />\n            </ds-tooltip>\n          ) : null}\n          {this.feedbackEnabled ? (\n            <ds-tooltip label=\"Good response\" side=\"top\" size=\"sm\">\n              <ds-button-unfilled\n                variant=\"icon\"\n                icon={this.feedback === 'positive' ? 'ThumbsUpFilled' : 'ThumbsUp'}\n                size=\"xs\"\n                aria-label=\"Good response\"\n                hasBorder={false}\n                pressed={this.feedback === 'positive'}\n                onDsChange={(event: CustomEvent<boolean>) =>\n                  this.changeFeedback('positive', event.detail)\n                }\n              />\n            </ds-tooltip>\n          ) : null}\n          {this.feedbackEnabled ? (\n            <ds-tooltip label=\"Bad response\" side=\"top\" size=\"sm\">\n              <ds-button-unfilled\n                variant=\"icon\"\n                icon={this.feedback === 'negative' ? 'ThumbsDownFilled' : 'ThumbsDown'}\n                size=\"xs\"\n                aria-label=\"Bad response\"\n                hasBorder={false}\n                pressed={this.feedback === 'negative'}\n                onDsChange={(event: CustomEvent<boolean>) =>\n                  this.changeFeedback('negative', event.detail)\n                }\n              />\n            </ds-tooltip>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/message.json

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "message",
   "title": "Message",
-  "description": "Channel-neutral message row owning direction, grouping, author, time, delivery metadata, and header, footer, or action accessory regions.",
+  "description": "Channel-neutral message row owning direction, grouping, author, time, delivery metadata, and persistent or metadata action regions.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,7 +13,7 @@
     "intent": {
       "audience": "general",
       "status": "experimental",
-      "summary": "Channel-neutral message row owning direction, grouping, author, time, delivery metadata, and header, footer, or action accessory regions.",
+      "summary": "Channel-neutral message row owning direction, grouping, author, time, delivery metadata, and persistent or metadata action regions.",
       "useWhen": [
         "A transcript contains messages that need consistent incoming, outgoing, or system layout."
       ],
@@ -22,6 +22,7 @@
       ],
       "commonlyComposedWith": [
         "component:ds-message-bubble",
+        "component:ds-message-actions",
         "component:ds-message-scroller"
       ],
       "patterns": [
@@ -29,14 +30,16 @@
       ],
       "accessibility": [
         "Author and time metadata remain textual when they are necessary to interpret the transcript.",
-        "Delivery failure uses negative Failed to send text in the footer while the message bubble keeps its normal outgoing treatment; when time is also visible, a tertiary middle dot separates the failure label and timestamp."
+        "Delivery failure uses negative Failed to send text in the footer while the message bubble keeps its normal outgoing treatment; when time is also visible, a tertiary middle dot separates the failure label and timestamp.",
+        "Hover-only metadata rows remain keyboard reachable, reveal on focus, and stay visible for touch and coarse-pointer input."
       ],
       "states": [
         "Pass an ISO timestamp. Message keeps the full value in dateTime and formats the visible value as a localized time; applications must not render a raw ISO string as visible transcript metadata.",
         "A visible incoming author uses body-small emphasis with primary foreground; timestamp and delivery metadata remain caption text.",
         "Visible author, bubble content, and timestamp or delivery footer use consistent 4px vertical gaps.",
         "Grouping joins adjacent bubble corners, shows the incoming author only at the start, and shows delivery/time metadata only at the end. Outgoing author remains in the accessible message label without repeating a visible You label.",
-        "Set showAuthor false only when the product makes participant and assistant roles visually self-evident; continue passing author so the accessible message label remains specific."
+        "Set showAuthor false only when the product makes participant and assistant roles visually self-evident; continue passing author so the accessible message label remains specific.",
+        "Metadata actions precede incoming timestamps and follow outgoing timestamps. In hover mode the complete reserved footer—delivery, timestamp, and actions—fades as one unit without changing geometry; the persistent actions slot retains separate message-level controls."
       ],
       "responsiveBehavior": [
         "Outgoing and incoming rows adapt to available width while preserving their directional alignment."
@@ -89,6 +92,15 @@
           "required": false,
           "mutable": false
         },
+        "metadataVisibility": {
+          "type": "MessageMetadataVisibility",
+          "resolvedType": "\"always\" | \"hover\"",
+          "attribute": "metadata-visibility",
+          "default": "'always'",
+          "required": false,
+          "mutable": false,
+          "description": "Controls whether the complete metadata footer is persistent or revealed through hover/focus."
+        },
         "scrollAnchor": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -168,6 +180,15 @@
         "required": false,
         "mutable": false
       },
+      "metadataVisibility": {
+        "type": "MessageMetadataVisibility",
+        "resolvedType": "\"always\" | \"hover\"",
+        "attribute": "metadata-visibility",
+        "default": "'always'",
+        "required": false,
+        "mutable": false,
+        "description": "Controls whether the complete metadata footer is persistent or revealed through hover/focus."
+      },
       "scrollAnchor": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -245,12 +266,12 @@
   "files": [
     {
       "path": "src/wc/components/Message/Message.css",
-      "content": ":host {\n  display: block;\n  box-sizing: border-box;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--dimension-size-800);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(.message-host--group-middle),\n:host(.message-host--group-last) {\n  margin-block-start: calc(var(--dimension-space-050) - var(--dimension-space-300));\n}\n\n.message {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.message--outgoing {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.message__header:empty,\n.message__footer:empty,\n.message__actions:empty {\n  display: none;\n}\n\n.message__actions:not(:empty) {\n  margin-inline-start: var(--dimension-space-075);\n}\n\n.message__body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\n.message--incoming .message__body {\n  width: 100%;\n}\n\n.message--outgoing .message__body {\n  align-items: flex-end;\n}\n\n.message--outgoing .message__header {\n  display: none;\n}\n\n.message--system .message__body {\n  align-items: center;\n}\n\n.message__header,\n.message__footer,\n.message__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n.message__content {\n  width: 100%;\n  min-width: 0;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.message--outgoing .message__content {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.message__footer time {\n  display: inline-flex;\n}\n\n.message--group-middle .message__header,\n.message--group-last .message__header {\n  display: none;\n}\n\n.message--group-first .message__footer,\n.message--group-middle .message__footer {\n  display: none;\n}\n",
+      "content": ":host {\n  display: block;\n  box-sizing: border-box;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--dimension-size-800);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(.message-host--group-middle),\n:host(.message-host--group-last) {\n  margin-block-start: calc(var(--dimension-space-050) - var(--dimension-space-300));\n}\n\n.message {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.message--outgoing {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.message__header:empty,\n.message__footer:empty,\n.message__metadata-actions:empty,\n.message__actions:empty {\n  display: none;\n}\n\n.message__actions:not(:empty) {\n  margin-inline-start: var(--dimension-space-075);\n}\n\n.message__body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\n.message--incoming .message__body {\n  width: 100%;\n}\n\n.message--outgoing .message__body {\n  align-items: flex-end;\n}\n\n.message--outgoing .message__header {\n  display: none;\n}\n\n.message--system .message__body {\n  align-items: center;\n}\n\n.message__header,\n.message__footer,\n.message__metadata-actions,\n.message__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .message--metadata-hover .message__footer {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--effect-motion-short-2);\n  }\n\n  .message--metadata-hover:hover .message__footer,\n  .message--metadata-hover:focus-within .message__footer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .message--metadata-hover .message__footer {\n    transition: none;\n  }\n}\n\n.message__content {\n  width: 100%;\n  min-width: 0;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.message--outgoing .message__content {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.message__footer time {\n  display: inline-flex;\n}\n\n.message--group-middle .message__header,\n.message--group-last .message__header {\n  display: none;\n}\n\n.message--group-first .message__footer,\n.message--group-middle .message__footer {\n  display: none;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Message/Message.tsx",
-      "content": "import { Component, h, Host, Prop } from '@stencil/core';\nimport type {\n  MessageDeliveryState,\n  MessageDirection,\n  MessageGroupPosition,\n} from '../conversation-types';\n\nconst DELIVERY_LABELS: Record<MessageDeliveryState, string> = {\n  sending: 'Sending',\n  sent: 'Sent',\n  delivered: 'Delivered',\n  read: 'Read',\n  failed: 'Failed to send',\n};\n\n@Component({\n  tag: 'ds-message',\n  styleUrl: 'Message.css',\n  scoped: true,\n})\nexport class Message {\n  @Prop({ reflect: true }) messageId: string = '';\n  @Prop({ reflect: true }) direction: MessageDirection = 'incoming';\n  @Prop() groupPosition: MessageGroupPosition = 'single';\n  @Prop() author: string = '';\n  /** Keep author semantics while allowing products with self-evident roles to hide the visible label. */\n  @Prop() showAuthor: boolean = true;\n  /** ISO timestamp. */\n  @Prop() timestamp: string = '';\n  @Prop() deliveryState: MessageDeliveryState | undefined;\n  @Prop() streaming: boolean = false;\n  @Prop({ reflect: true }) scrollAnchor: boolean = false;\n\n  private formattedTimestamp(): string {\n    if (!this.timestamp) return '';\n    const parsed = Date.parse(this.timestamp);\n    if (Number.isNaN(parsed)) return this.timestamp;\n    return new Intl.DateTimeFormat(undefined, {\n      hour: 'numeric',\n      minute: '2-digit',\n    }).format(new Date(parsed));\n  }\n\n  render() {\n    const delivery = this.deliveryState ? DELIVERY_LABELS[this.deliveryState] : '';\n    const formattedTimestamp = this.formattedTimestamp();\n    return (\n      <Host\n        class={`message-host--group-${this.groupPosition}`}\n        data-message-id={this.messageId || undefined}\n        data-scroll-anchor={this.scrollAnchor ? 'true' : undefined}\n        aria-busy={this.streaming ? 'true' : undefined}\n      >\n        <article\n          class={{\n            message: true,\n            [`message--${this.direction}`]: true,\n            [`message--group-${this.groupPosition}`]: true,\n          }}\n          aria-label={this.author ? `Message from ${this.author}` : 'Message'}\n        >\n          <div class=\"message__body\">\n            <div class=\"message__header\">\n              <slot name=\"header\" />\n              {this.author && this.showAuthor ? (\n                <ds-text as=\"span\" variant=\"text-body-small\" emphasis color=\"primary\">\n                  {this.author}\n                </ds-text>\n              ) : null}\n            </div>\n            <div class=\"message__content\">\n              <slot />\n            </div>\n            <div class=\"message__footer\">\n              <slot name=\"footer\" />\n              {delivery ? (\n                <ds-text\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color={this.deliveryState === 'failed' ? 'negative' : 'secondary'}\n                >\n                  {delivery}\n                </ds-text>\n              ) : null}\n              {this.deliveryState === 'failed' && formattedTimestamp ? (\n                <ds-text as=\"span\" variant=\"text-caption\" color=\"tertiary\" aria-hidden=\"true\">\n                  ·\n                </ds-text>\n              ) : null}\n              {formattedTimestamp ? (\n                <time dateTime={this.timestamp}>\n                  <ds-text as=\"span\" variant=\"text-caption\" color=\"secondary\">\n                    {formattedTimestamp}\n                  </ds-text>\n                </time>\n              ) : null}\n            </div>\n          </div>\n          <div class=\"message__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\nimport type {\n  MessageDeliveryState,\n  MessageDirection,\n  MessageGroupPosition,\n  MessageMetadataVisibility,\n} from '../conversation-types';\n\nconst DELIVERY_LABELS: Record<MessageDeliveryState, string> = {\n  sending: 'Sending',\n  sent: 'Sent',\n  delivered: 'Delivered',\n  read: 'Read',\n  failed: 'Failed to send',\n};\n\n@Component({\n  tag: 'ds-message',\n  styleUrl: 'Message.css',\n  scoped: true,\n})\nexport class Message {\n  @Prop({ reflect: true }) messageId: string = '';\n  @Prop({ reflect: true }) direction: MessageDirection = 'incoming';\n  @Prop() groupPosition: MessageGroupPosition = 'single';\n  @Prop() author: string = '';\n  /** Keep author semantics while allowing products with self-evident roles to hide the visible label. */\n  @Prop() showAuthor: boolean = true;\n  /** ISO timestamp. */\n  @Prop() timestamp: string = '';\n  @Prop() deliveryState: MessageDeliveryState | undefined;\n  @Prop() streaming: boolean = false;\n  /** Controls whether the complete metadata footer is persistent or revealed through hover/focus. */\n  @Prop() metadataVisibility: MessageMetadataVisibility = 'always';\n  @Prop({ reflect: true }) scrollAnchor: boolean = false;\n\n  private formattedTimestamp(): string {\n    if (!this.timestamp) return '';\n    const parsed = Date.parse(this.timestamp);\n    if (Number.isNaN(parsed)) return this.timestamp;\n    return new Intl.DateTimeFormat(undefined, {\n      hour: 'numeric',\n      minute: '2-digit',\n    }).format(new Date(parsed));\n  }\n\n  private renderMetadataActions() {\n    return (\n      <div class=\"message__metadata-actions\">\n        <slot name=\"metadata-actions\" />\n      </div>\n    );\n  }\n\n  render() {\n    const delivery = this.deliveryState ? DELIVERY_LABELS[this.deliveryState] : '';\n    const formattedTimestamp = this.formattedTimestamp();\n    return (\n      <Host\n        class={`message-host--group-${this.groupPosition}`}\n        data-message-id={this.messageId || undefined}\n        data-scroll-anchor={this.scrollAnchor ? 'true' : undefined}\n        aria-busy={this.streaming ? 'true' : undefined}\n      >\n        <article\n          class={{\n            message: true,\n            [`message--${this.direction}`]: true,\n            [`message--group-${this.groupPosition}`]: true,\n            [`message--metadata-${this.metadataVisibility}`]: true,\n          }}\n          aria-label={this.author ? `Message from ${this.author}` : 'Message'}\n        >\n          <div class=\"message__body\">\n            <div class=\"message__header\">\n              <slot name=\"header\" />\n              {this.author && this.showAuthor ? (\n                <ds-text as=\"span\" variant=\"text-body-small\" emphasis color=\"primary\">\n                  {this.author}\n                </ds-text>\n              ) : null}\n            </div>\n            <div class=\"message__content\">\n              <slot />\n            </div>\n            <div class=\"message__footer\">\n              {this.direction === 'incoming' ? this.renderMetadataActions() : null}\n              <slot name=\"footer\" />\n              {delivery ? (\n                <ds-text\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color={this.deliveryState === 'failed' ? 'negative' : 'secondary'}\n                >\n                  {delivery}\n                </ds-text>\n              ) : null}\n              {this.deliveryState === 'failed' && formattedTimestamp ? (\n                <ds-text as=\"span\" variant=\"text-caption\" color=\"tertiary\" aria-hidden=\"true\">\n                  ·\n                </ds-text>\n              ) : null}\n              {formattedTimestamp ? (\n                <time dateTime={this.timestamp}>\n                  <ds-text as=\"span\" variant=\"text-caption\" color=\"secondary\">\n                    {formattedTimestamp}\n                  </ds-text>\n                </time>\n              ) : null}\n              {this.direction !== 'incoming' ? this.renderMetadataActions() : null}\n            </div>\n          </div>\n          <div class=\"message__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/registry.json

@@ -122,6 +122,7 @@
           ],
           "commonlyComposedWith": [
             "component:ds-message",
+            "component:ds-message-actions",
             "component:ds-markdown",
             "component:ds-agent-activity",
             "component:ds-agent-tool-call",
@@ -132,12 +133,14 @@
           ],
           "accessibility": [
             "Part order matches authored reading order and remains inside generic message semantics.",
-            "Streaming state supplements rather than replaces meaningful textual status."
+            "Streaming state supplements rather than replaces meaningful textual status.",
+            "Forwarded metadata actions retain Message ordering, keyboard reveal, and touch visibility."
           ],
           "states": [
             "The owner replaces immutable part arrays as scripted or live output changes.",
             "AgentResponse renders directly in Message without borrowing a plain MessageBubble surface.",
-            "Markdown parts use the optional safe renderer; prose CSS owns only semantic-tree styling and never response ordering or streaming state."
+            "Markdown parts use the optional safe renderer; prose CSS owns only semantic-tree styling and never response ordering or streaming state.",
+            "The application may compose MessageActions for completed-response Copy and controlled feedback while retaining persistent retry or recovery controls in the separate actions slot."
           ],
           "responsiveBehavior": [
             "Rich content uses the available transcript width while respecting readable measure and local overflow constraints."
@@ -162,6 +165,10 @@
             "type": "string",
             "required": false
           },
+          "metadataVisibility": {
+            "type": "MessageMetadataVisibility",
+            "required": false
+          },
           "parts": {
             "type": "AgentResponsePart[]",
             "required": false
@@ -451,7 +458,7 @@
         "intentStatus": "complete",
         "intent": {
           "audience": "general",
-          "status": "experimental",
+          "status": "stable",
           "summary": "Compact icon avatar for visually identifying a person, group, channel, or conversation type.",
           "useWhen": [
             "A list or message composition needs a consistent circular identity marker represented by an icon at md, sm, or xs control density."
@@ -4376,7 +4383,7 @@
     {
       "name": "message",
       "title": "Message",
-      "description": "Channel-neutral message row owning direction, grouping, author, time, delivery metadata, and header, footer, or action accessory regions.",
+      "description": "Channel-neutral message row owning direction, grouping, author, time, delivery metadata, and persistent or metadata action regions.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -4387,7 +4394,7 @@
         "intent": {
           "audience": "general",
           "status": "experimental",
-          "summary": "Channel-neutral message row owning direction, grouping, author, time, delivery metadata, and header, footer, or action accessory regions.",
+          "summary": "Channel-neutral message row owning direction, grouping, author, time, delivery metadata, and persistent or metadata action regions.",
           "useWhen": [
             "A transcript contains messages that need consistent incoming, outgoing, or system layout."
           ],
@@ -4396,6 +4403,7 @@
           ],
           "commonlyComposedWith": [
             "component:ds-message-bubble",
+            "component:ds-message-actions",
             "component:ds-message-scroller"
           ],
           "patterns": [
@@ -4403,14 +4411,16 @@
           ],
           "accessibility": [
             "Author and time metadata remain textual when they are necessary to interpret the transcript.",
-            "Delivery failure uses negative Failed to send text in the footer while the message bubble keeps its normal outgoing treatment; when time is also visible, a tertiary middle dot separates the failure label and timestamp."
+            "Delivery failure uses negative Failed to send text in the footer while the message bubble keeps its normal outgoing treatment; when time is also visible, a tertiary middle dot separates the failure label and timestamp.",
+            "Hover-only metadata rows remain keyboard reachable, reveal on focus, and stay visible for touch and coarse-pointer input."
           ],
           "states": [
             "Pass an ISO timestamp. Message keeps the full value in dateTime and formats the visible value as a localized time; applications must not render a raw ISO string as visible transcript metadata.",
             "A visible incoming author uses body-small emphasis with primary foreground; timestamp and delivery metadata remain caption text.",
             "Visible author, bubble content, and timestamp or delivery footer use consistent 4px vertical gaps.",
             "Grouping joins adjacent bubble corners, shows the incoming author only at the start, and shows delivery/time metadata only at the end. Outgoing author remains in the accessible message label without repeating a visible You label.",
-            "Set showAuthor false only when the product makes participant and assistant roles visually self-evident; continue passing author so the accessible message label remains specific."
+            "Set showAuthor false only when the product makes participant and assistant roles visually self-evident; continue passing author so the accessible message label remains specific.",
+            "Metadata actions precede incoming timestamps and follow outgoing timestamps. In hover mode the complete reserved footer—delivery, timestamp, and actions—fades as one unit without changing geometry; the persistent actions slot retains separate message-level controls."
           ],
           "responsiveBehavior": [
             "Outgoing and incoming rows adapt to available width while preserving their directional alignment."
@@ -4443,6 +4453,10 @@
             "type": "string",
             "required": false
           },
+          "metadataVisibility": {
+            "type": "MessageMetadataVisibility",
+            "required": false
+          },
           "scrollAnchor": {
             "type": "boolean",
             "required": false
@@ -4476,6 +4490,95 @@
         "text"
       ]
     },
+    {
+      "name": "message-actions",
+      "title": "MessageActions",
+      "description": "Reusable message-level Copy and controlled response-feedback actions with consistent compact presentation and browser clipboard feedback.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/message-actions",
+        "source": "src/wc/components/MessageActions/MessageActions.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "specialized",
+          "status": "experimental",
+          "summary": "Reusable message-level Copy and controlled response-feedback actions with consistent compact presentation and browser clipboard feedback.",
+          "useWhen": [
+            "A message metadata row needs Copy alone or Copy with mutually exclusive positive and negative response feedback."
+          ],
+          "avoidWhen": [
+            "The action executes, retries, regenerates, approves, edits, or otherwise changes message content."
+          ],
+          "commonlyComposedWith": [
+            "component:ds-message",
+            "component:ds-agent-response",
+            "component:ds-button-unfilled"
+          ],
+          "patterns": [
+            "pattern:conversation",
+            "pattern:agent-chat"
+          ],
+          "accessibility": [
+            "Every icon action has a matching tooltip and accessible name.",
+            "Feedback uses genuine pressed toggle semantics and Copy announces its temporary Copied state through the control name."
+          ],
+          "states": [
+            "The component owns clipboard execution and temporary copied feedback while the application supplies the exact copyable text.",
+            "Feedback is controlled: the component emits the requested positive, negative, or cleared value while the application owns persistence and consequences.",
+            "Copy, positive feedback, and negative feedback retain one stable order."
+          ],
+          "responsiveBehavior": [
+            "The compact action group follows the visibility and metadata placement policy of its owning Message."
+          ],
+          "references": [
+            {
+              "label": "Message metadata composition",
+              "path": "src/wc/components/Message/Message.stories.ts"
+            }
+          ]
+        },
+        "props": {
+          "copyText": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "feedback": {
+            "type": "MessageFeedback | undefined",
+            "required": false
+          },
+          "feedbackEnabled": {
+            "type": "boolean",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsCopyResult",
+            "detail": "MessageCopyResultEventDetail"
+          },
+          {
+            "name": "dsFeedbackChange",
+            "detail": "MessageFeedback | undefined"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-message-actions",
+          "react": "DsMessageActions",
+          "angular": "DsMessageActions"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "button-unfilled",
+        "tooltip"
+      ]
+    },
     {
       "name": "message-bubble",
       "title": "MessageBubble",

package/dist/react/components.d.ts

@@ -36,6 +36,7 @@ export { DsInput } from "./ds-input.js";
 export { DsLoader } from "./ds-loader.js";
 export { DsMarkdown } from "./ds-markdown.js";
 export { DsMenu } from "./ds-menu.js";
+export { DsMessageActions } from "./ds-message-actions.js";
 export { DsMessageBubble } from "./ds-message-bubble.js";
 export { DsMessageComposer } from "./ds-message-composer.js";
 export { DsMessageScroller } from "./ds-message-scroller.js";

package/dist/react/components.js

@@ -37,6 +37,7 @@ export { DsInput } from "./ds-input.js";
 export { DsLoader } from "./ds-loader.js";
 export { DsMarkdown } from "./ds-markdown.js";
 export { DsMenu } from "./ds-menu.js";
+export { DsMessageActions } from "./ds-message-actions.js";
 export { DsMessageBubble } from "./ds-message-bubble.js";
 export { DsMessageComposer } from "./ds-message-composer.js";
 export { DsMessageScroller } from "./ds-message-scroller.js";

package/dist/react/ds-agent-activity.d.ts

@@ -2,7 +2,7 @@
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsAgentActivity as DsAgentActivityElement } from "@ds-mo/ui/dist/components/ds-agent-activity.js";
 export type DsAgentActivityEvents = NonNullable<unknown>;

package/dist/react/ds-agent-activity.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsAgentActivity as DsAgentActivityElement, defineCustomElement as defineDsAgentActivity } from "@ds-mo/ui/dist/components/ds-agent-activity.js";
 export const DsAgentActivity = /*@__PURE__*/ createComponent({

package/dist/react/ds-agent-response.d.ts

@@ -2,7 +2,7 @@
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsAgentResponse as DsAgentResponseElement } from "@ds-mo/ui/dist/components/ds-agent-response.js";
 export type DsAgentResponseEvents = NonNullable<unknown>;

package/dist/react/ds-agent-response.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsAgentResponse as DsAgentResponseElement, defineCustomElement as defineDsAgentResponse } from "@ds-mo/ui/dist/components/ds-agent-response.js";
 export const DsAgentResponse = /*@__PURE__*/ createComponent({

package/dist/react/ds-agent-source-list.d.ts

@@ -2,7 +2,7 @@
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsAgentSourceList as DsAgentSourceListElement } from "@ds-mo/ui/dist/components/ds-agent-source-list.js";
 export type DsAgentSourceListEvents = NonNullable<unknown>;

package/dist/react/ds-agent-source-list.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsAgentSourceList as DsAgentSourceListElement, defineCustomElement as defineDsAgentSourceList } from "@ds-mo/ui/dist/components/ds-agent-source-list.js";
 export const DsAgentSourceList = /*@__PURE__*/ createComponent({

package/dist/react/ds-agent-tool-call.d.ts

@@ -2,7 +2,7 @@
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsAgentToolCall as DsAgentToolCallElement } from "@ds-mo/ui/dist/components/ds-agent-tool-call.js";
 export type DsAgentToolCallEvents = NonNullable<unknown>;

package/dist/react/ds-agent-tool-call.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsAgentToolCall as DsAgentToolCallElement, defineCustomElement as defineDsAgentToolCall } from "@ds-mo/ui/dist/components/ds-agent-tool-call.js";
 export const DsAgentToolCall = /*@__PURE__*/ createComponent({

package/dist/react/ds-attachment-list.d.ts

@@ -2,7 +2,7 @@
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsAttachmentList as DsAttachmentListElement } from "@ds-mo/ui/dist/components/ds-attachment-list.js";
 export type DsAttachmentListEvents = NonNullable<unknown>;

package/dist/react/ds-attachment-list.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsAttachmentList as DsAttachmentListElement, defineCustomElement as defineDsAttachmentList } from "@ds-mo/ui/dist/components/ds-attachment-list.js";
 export const DsAttachmentList = /*@__PURE__*/ createComponent({