@ds-mo/ui 9.1.0 → 9.2.1

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

@@ -0,0 +1,265 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "message-composer",
+  "title": "MessageComposer",
+  "description": "Two-line auto-growing conversation textarea with submit, stop, error, and extensible leading-tool or trailing-action regions.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/message-composer",
+    "source": "src/wc/components/MessageComposer/MessageComposer.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Two-line auto-growing conversation textarea with submit, stop, error, and extensible leading-tool or trailing-action regions.",
+      "useWhen": [
+        "A conversation accepts multi-line text and needs Enter-to-submit with a streaming stop action."
+      ],
+      "avoidWhen": [
+        "The text is a conventional form field submitted with unrelated fields."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-message-scroller",
+        "component:ds-button-filled",
+        "component:ds-button-unfilled"
+      ],
+      "patterns": [
+        "pattern:conversation"
+      ],
+      "accessibility": [
+        "Always provide a localized textarea label and submit or stop action names.",
+        "Shift plus Enter inserts a newline while Enter submits non-empty content.",
+        "Streaming and error states remain perceivable without relying on icon shape alone."
+      ],
+      "states": [
+        "The owner controls draft value and transport state; the composer emits intent without performing transport.",
+        "Use the tools slot for leading actions such as add and the actions slot for trailing actions such as dictation; the built-in submit or stop action remains last.",
+        "The submit action defaults to brand for both agent and person-to-person conversations; change submitIntent only when the action consequence has a different semantic intent."
+      ],
+      "responsiveBehavior": [
+        "The textarea begins at two body-medium lines, grows one line at a time through six lines, and then scrolls internally."
+      ],
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/MessageComposer/MessageComposer.stories.ts"
+        },
+        {
+          "label": "Scroller overlay composition",
+          "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "default": "'Message'",
+          "required": false,
+          "mutable": false
+        },
+        "placeholder": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "placeholder",
+          "default": "'Write a message'",
+          "required": false,
+          "mutable": false
+        },
+        "status": {
+          "type": "MessageComposerStatus",
+          "resolvedType": "\"error\" | \"ready\" | \"streaming\" | \"submitted\"",
+          "attribute": "status",
+          "default": "'ready'",
+          "required": false,
+          "mutable": false
+        },
+        "submitIntent": {
+          "type": "ButtonFilledIntent",
+          "resolvedType": "\"ai\" | \"brand\" | \"caution\" | \"guide\" | \"negative\" | \"neutral\" | \"positive\" | \"walkthrough\" | \"warning\"",
+          "attribute": "submit-intent",
+          "default": "'brand'",
+          "required": false,
+          "mutable": false
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": true
+        }
+      },
+      "events": [
+        {
+          "name": "dsInput",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsStop",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsSubmit",
+          "detail": "{ text: string }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "signature": "setFocus() => Promise<void>"
+        }
+      ],
+      "slots": []
+    },
+    "props": {
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "default": "'Message'",
+        "required": false,
+        "mutable": false
+      },
+      "placeholder": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "placeholder",
+        "default": "'Write a message'",
+        "required": false,
+        "mutable": false
+      },
+      "status": {
+        "type": "MessageComposerStatus",
+        "resolvedType": "\"error\" | \"ready\" | \"streaming\" | \"submitted\"",
+        "attribute": "status",
+        "default": "'ready'",
+        "required": false,
+        "mutable": false
+      },
+      "submitIntent": {
+        "type": "ButtonFilledIntent",
+        "resolvedType": "\"ai\" | \"brand\" | \"caution\" | \"guide\" | \"negative\" | \"neutral\" | \"positive\" | \"walkthrough\" | \"warning\"",
+        "attribute": "submit-intent",
+        "default": "'brand'",
+        "required": false,
+        "mutable": false
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": true
+      }
+    },
+    "events": [
+      {
+        "name": "dsInput",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsStop",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsSubmit",
+        "detail": "{ text: string }",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [
+      {
+        "name": "setFocus",
+        "signature": "setFocus() => Promise<void>"
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-message-composer",
+      "react": "DsMessageComposer",
+      "angular": "DsMessageComposer"
+    },
+    "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-composer.js';",
+        "example": "<ds-message-composer></ds-message-composer>"
+      },
+      "react": {
+        "import": "import { DsMessageComposer } from '@ds-mo/ui/react';",
+        "example": "<DsMessageComposer />"
+      },
+      "angular": {
+        "import": "import { DsMessageComposer } from '@ds-mo/ui/angular/ds-message-composer';",
+        "example": "<ds-message-composer></ds-message-composer>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-filled"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/MessageComposer/MessageComposer.css",
+      "content": ":host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.message-composer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  margin: 0;\n}\n\n.message-composer__attachments:empty,\n.message-composer__tools:empty {\n  display: none;\n}\n\n.message-composer__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-md);\n  overflow: hidden;\n}\n\n.message-composer--error .message-composer__field {\n  box-shadow: var(--effect-elevation-elevated-md),\n    inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative);\n}\n\ntextarea {\n  width: 100%;\n  min-height: calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));\n  max-height: calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));\n  padding: var(--dimension-space-075);\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background: transparent;\n  color: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\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  -webkit-user-select: text;\n  user-select: text;\n}\n\ntextarea::placeholder {\n  color: var(--color-foreground-secondary);\n}\n\ntextarea:focus::placeholder {\n  color: var(--color-foreground-quaternary);\n}\n\n.message-composer__tools {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-height: var(--dimension-size-400);\n}\n\n.message-composer__controls {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  min-width: 0;\n}\n\n.message-composer__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/MessageComposer/MessageComposer.tsx",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport type { ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\nimport type { MessageComposerStatus } from '../conversation-types';\n\n@Component({\n  tag: 'ds-message-composer',\n  styleUrl: 'MessageComposer.css',\n  scoped: true,\n})\nexport class MessageComposer {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder: string = 'Write a message';\n  @Prop() label: string = 'Message';\n  @Prop() status: MessageComposerStatus = 'ready';\n  @Prop() isInactive: boolean = false;\n  @Prop() submitIntent: ButtonFilledIntent = 'brand';\n\n  @Event() dsInput!: EventEmitter<string>;\n  @Event() dsSubmit!: EventEmitter<{ text: string }>;\n  @Event() dsStop!: EventEmitter<void>;\n\n  private textarea?: HTMLTextAreaElement;\n\n  componentDidLoad() {\n    this.resize();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    requestAnimationFrame(() => this.resize());\n  }\n\n  @Method()\n  async setFocus() {\n    this.textarea?.focus();\n  }\n\n  private get streaming(): boolean {\n    return this.status === 'submitted' || this.status === 'streaming';\n  }\n\n  private resize() {\n    if (!this.textarea) return;\n    this.textarea.style.height = 'auto';\n    this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n  }\n\n  private handleInput = (event: Event) => {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    this.resize();\n    this.dsInput.emit(this.value);\n  };\n\n  private submit() {\n    const text = this.value.trim();\n    if (!text || this.isInactive || this.streaming) return;\n    this.dsSubmit.emit({ text });\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Enter' || event.shiftKey || event.isComposing) return;\n    event.preventDefault();\n    this.submit();\n  };\n\n  private handleAction = () => {\n    if (this.streaming) this.dsStop.emit();\n    else this.submit();\n  };\n\n  render() {\n    const error = this.status === 'error';\n    return (\n      <Host>\n        <form\n          class={{ 'message-composer': true, 'message-composer--error': error }}\n          aria-busy={this.streaming ? 'true' : undefined}\n          onSubmit={(event: Event) => {\n            event.preventDefault();\n            this.submit();\n          }}\n        >\n          <div class=\"message-composer__attachments\">\n            <slot name=\"attachments\" />\n          </div>\n          <div class=\"message-composer__field\">\n            <textarea\n              ref={element => {\n                this.textarea = element;\n              }}\n              value={this.value}\n              placeholder={this.placeholder}\n              aria-label={this.label}\n              aria-invalid={error ? 'true' : undefined}\n              disabled={this.isInactive}\n              rows={2}\n              onInput={this.handleInput}\n              onKeyDown={this.handleKeyDown}\n            />\n            <div class=\"message-composer__controls\">\n              <div class=\"message-composer__tools\">\n                <slot name=\"tools\" />\n              </div>\n              <div class=\"message-composer__actions\">\n                <slot name=\"actions\" />\n                <ds-button-filled\n                  class=\"message-composer__action\"\n                  variant=\"icon\"\n                  icon={this.streaming ? 'Pause' : 'PaperplaneSend'}\n                  intent={this.streaming ? 'neutral' : this.submitIntent}\n                  size=\"md\"\n                  rounded\n                  aria-label={this.streaming ? 'Stop response' : 'Send message'}\n                  isInactive={this.isInactive || (!this.streaming && !this.value.trim())}\n                  onDsClick={this.handleAction}\n                />\n              </div>\n            </div>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,217 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "message-scroller",
+  "title": "MessageScroller",
+  "description": "Focusable transcript scroller that follows the live edge only while the reader remains there.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/message-scroller",
+    "source": "src/wc/components/MessageScroller/MessageScroller.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Focusable transcript scroller that follows the live edge only while the reader remains there.",
+      "useWhen": [
+        "Messages can append or stream and transcript position must remain respectful of reader intent."
+      ],
+      "avoidWhen": [
+        "Content is static prose without message navigation or live updates."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-message",
+        "component:ds-message-composer"
+      ],
+      "patterns": [
+        "pattern:conversation"
+      ],
+      "accessibility": [
+        "Give each transcript a concise localized label.",
+        "New content is exposed through log semantics without stealing focus.",
+        "The scroll-to-latest control remains keyboard accessible when follow behavior is released."
+      ],
+      "states": [
+        "Selection and transcript interaction release automatic following.",
+        "Opening saved history, message jumps, and prepended history preserve deliberate position.",
+        "The scroll-to-latest action is absent at the live edge, appears only after the reader moves away, and disappears again after returning to the newest message.",
+        "Place a composer container in the overlay slot so messages scroll behind it; the scroller measures its live height, reserves matching transcript clearance, and keeps scroll-to-latest above it."
+      ],
+      "responsiveBehavior": [
+        "Transcript width is readable while the scroll region fills available height."
+      ],
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "autoFollow": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "auto-follow",
+          "default": "true",
+          "required": false,
+          "mutable": false
+        },
+        "busy": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "busy",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "defaultPosition": {
+          "type": "MessageScrollerPosition",
+          "resolvedType": "\"end\" | \"last-anchor\" | \"start\"",
+          "attribute": "default-position",
+          "default": "'last-anchor'",
+          "required": false,
+          "mutable": false
+        },
+        "messagesLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "messages-label",
+          "default": "'Messages'",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [
+        {
+          "name": "dsReachStart",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [
+        {
+          "name": "scrollToEnd",
+          "signature": "scrollToEnd() => Promise<void>"
+        },
+        {
+          "name": "scrollToMessage",
+          "signature": "scrollToMessage(id: string) => Promise<boolean>"
+        },
+        {
+          "name": "scrollToStart",
+          "signature": "scrollToStart() => Promise<void>"
+        }
+      ],
+      "slots": []
+    },
+    "props": {
+      "autoFollow": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "auto-follow",
+        "default": "true",
+        "required": false,
+        "mutable": false
+      },
+      "busy": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "busy",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "defaultPosition": {
+        "type": "MessageScrollerPosition",
+        "resolvedType": "\"end\" | \"last-anchor\" | \"start\"",
+        "attribute": "default-position",
+        "default": "'last-anchor'",
+        "required": false,
+        "mutable": false
+      },
+      "messagesLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "messages-label",
+        "default": "'Messages'",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [
+      {
+        "name": "dsReachStart",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [
+      {
+        "name": "scrollToEnd",
+        "signature": "scrollToEnd() => Promise<void>"
+      },
+      {
+        "name": "scrollToMessage",
+        "signature": "scrollToMessage(id: string) => Promise<boolean>"
+      },
+      {
+        "name": "scrollToStart",
+        "signature": "scrollToStart() => Promise<void>"
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-message-scroller",
+      "react": "DsMessageScroller",
+      "angular": "DsMessageScroller"
+    },
+    "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-scroller.js';",
+        "example": "<ds-message-scroller></ds-message-scroller>"
+      },
+      "react": {
+        "import": "import { DsMessageScroller } from '@ds-mo/ui/react';",
+        "example": "<DsMessageScroller />"
+      },
+      "angular": {
+        "import": "import { DsMessageScroller } from '@ds-mo/ui/angular/ds-message-scroller';",
+        "example": "<ds-message-scroller></ds-message-scroller>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-unfilled"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/MessageScroller/MessageScroller.css",
+      "content": ":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.message-scroller {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n\n.message-scroller__viewport {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  box-sizing: border-box;\n}\n\n.message-scroller__viewport:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n}\n\n.message-scroller__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-300);\n  width: 100%;\n  max-width: var(--dimension-panel-width-2xl);\n  min-height: 100%;\n  margin-inline: auto;\n  padding-block-start: var(--dimension-space-200);\n  padding-inline: var(--dimension-space-200);\n  padding-block-end: calc(\n    var(--dimension-space-200) + var(--ds-message-scroller-overlay-block-size, 0px)\n  );\n  box-sizing: border-box;\n}\n\n.message-scroller__overlay {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--dimension-z-index-floating);\n}\n\n.message-scroller__control {\n  position: absolute;\n  bottom: calc(\n    var(--ds-message-scroller-overlay-content-block-size, 0px) + var(--dimension-space-200)\n  );\n  left: 50%;\n  z-index: var(--dimension-z-index-floating);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-transparent);\n  box-shadow: var(--effect-elevation-elevated-md);\n  transform: translateX(-50%);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/MessageScroller/MessageScroller.tsx",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { MessageScrollerPosition } from '../conversation-types';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n  tag: 'ds-message-scroller',\n  styleUrl: 'MessageScroller.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class MessageScroller {\n  @Element() el!: HTMLElement;\n\n  @Prop() busy: boolean = false;\n  @Prop() autoFollow: boolean = true;\n  @Prop() defaultPosition: MessageScrollerPosition = 'last-anchor';\n  @Prop() messagesLabel: string = 'Messages';\n\n  @Event() dsReachStart!: EventEmitter<void>;\n\n  @State() private showScrollToLatest = false;\n\n  private viewport?: HTMLElement;\n  private content?: HTMLElement;\n  private overlay?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private overlayResizeObserver?: ResizeObserver;\n  private mutationObserver?: MutationObserver;\n  private following = true;\n  private atStart = false;\n  private programmatic = false;\n  private previousScrollHeight = 0;\n  private overlayBlockSize = 0;\n  private overlayContentBlockSize = 0;\n\n  componentDidLoad() {\n    this.connectObservers();\n    requestAnimationFrame(() => this.applyDefaultPosition());\n    document.addEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.overlayResizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    document.removeEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  @Method()\n  async scrollToMessage(id: string): Promise<boolean> {\n    const message = Array.from(\n      this.el.querySelectorAll<HTMLElement & { messageId?: string }>('ds-message')\n    ).find(item => item.messageId === id || item.getAttribute('message-id') === id);\n    if (!message) return false;\n    this.following = false;\n    this.showScrollToLatest = true;\n    message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n    return true;\n  }\n\n  @Method()\n  async scrollToStart() {\n    this.scrollTo(0);\n    this.following = false;\n    this.showScrollToLatest = Boolean(\n      this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n    );\n  }\n\n  @Method()\n  async scrollToEnd() {\n    this.following = true;\n    this.showScrollToLatest = false;\n    this.scrollTo(this.viewport?.scrollHeight ?? 0);\n  }\n\n  private motionBehavior(): ScrollBehavior {\n    return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n  }\n\n  private scrollTo(top: number) {\n    if (!this.viewport) return;\n    this.programmatic = true;\n    this.viewport.scrollTo({ top, behavior: this.motionBehavior() });\n    requestAnimationFrame(() => {\n      this.programmatic = false;\n    });\n  }\n\n  private connectObservers() {\n    if (!this.viewport || !this.content) return;\n    this.previousScrollHeight = this.viewport.scrollHeight;\n    this.resizeObserver = new ResizeObserver(() => this.handleContentGrowth());\n    this.resizeObserver.observe(this.content);\n    this.resizeObserver.observe(this.viewport);\n    if (this.overlay) {\n      this.overlayResizeObserver = new ResizeObserver(entries => {\n        const blockSize = Math.ceil(entries[0]?.contentRect.height ?? 0);\n        this.overlayBlockSize = blockSize;\n        this.el.style.setProperty('--ds-message-scroller-overlay-block-size', `${blockSize}px`);\n        this.syncOverlayContentBlockSize();\n        this.handleContentGrowth();\n      });\n      this.overlayResizeObserver.observe(this.overlay);\n    }\n    this.mutationObserver = new MutationObserver(() => this.handleContentGrowth());\n    this.mutationObserver.observe(this.content, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n\n  private handleContentGrowth() {\n    if (!this.viewport) return;\n    const nextHeight = this.viewport.scrollHeight;\n    const delta = nextHeight - this.previousScrollHeight;\n    if (delta > 0 && this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD && !this.following) {\n      this.viewport.scrollTop += delta;\n    } else if (this.autoFollow && this.following) {\n      this.viewport.scrollTop = nextHeight;\n    }\n    this.previousScrollHeight = nextHeight;\n    this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n    this.syncContentFade();\n  }\n\n  private syncContentFade() {\n    if (!this.viewport || !this.content) return;\n    const fadeEnd = Math.max(this.viewport.scrollTop + this.viewport.clientHeight, 0);\n    const fadeStart = Math.max(fadeEnd - this.overlayContentBlockSize, 0);\n    this.content.style.setProperty('--ds-scroll-edge-fade-window-start', `${fadeStart}px`);\n    this.content.style.setProperty('--ds-scroll-edge-fade-window-end', `${fadeEnd}px`);\n  }\n\n  private syncOverlayContentBlockSize() {\n    if (!this.overlay) return;\n    const assigned = this.el.querySelector<HTMLElement>('[slot=\"overlay\"]');\n    if (!(assigned instanceof HTMLElement)) {\n      this.overlayContentBlockSize = this.overlayBlockSize;\n    } else {\n      const visibleContent =\n        assigned.firstElementChild instanceof HTMLElement ? assigned.firstElementChild : assigned;\n      const topInset = Math.max(\n        Math.ceil(visibleContent.getBoundingClientRect().top - this.overlay.getBoundingClientRect().top),\n        0\n      );\n      this.overlayContentBlockSize = Math.max(this.overlayBlockSize - topInset, 0);\n    }\n    this.el.style.setProperty(\n      '--ds-message-scroller-overlay-content-block-size',\n      `${this.overlayContentBlockSize}px`\n    );\n  }\n\n  private applyDefaultPosition() {\n    if (!this.viewport) return;\n    if (this.defaultPosition === 'start') {\n      this.viewport.scrollTop = 0;\n      this.following = false;\n      this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n      this.syncContentFade();\n      return;\n    }\n    if (this.defaultPosition === 'last-anchor') {\n      const anchors = this.el.querySelectorAll<HTMLElement>('ds-message[scroll-anchor]');\n      const last = anchors.item(anchors.length - 1);\n      if (last) {\n        last.scrollIntoView({ block: 'start' });\n        this.following = this.isAtLiveEdge();\n        this.showScrollToLatest = !this.following;\n        this.syncContentFade();\n        return;\n      }\n    }\n    this.viewport.scrollTop = this.viewport.scrollHeight;\n    this.following = true;\n    this.showScrollToLatest = false;\n    this.syncContentFade();\n  }\n\n  private isAtLiveEdge(): boolean {\n    if (!this.viewport) return true;\n    return (\n      this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop <=\n      LIVE_EDGE_THRESHOLD\n    );\n  }\n\n  private handleScroll = () => {\n    if (!this.viewport) return;\n    this.syncContentFade();\n    if (this.programmatic) return;\n    this.following = this.isAtLiveEdge();\n    this.showScrollToLatest = !this.following;\n    const nextAtStart = this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD;\n    if (nextAtStart && !this.atStart) this.dsReachStart.emit();\n    this.atStart = nextAtStart;\n  };\n\n  private releaseFollow = () => {\n    this.following = false;\n    this.showScrollToLatest = !this.isAtLiveEdge();\n  };\n\n  private handleSelectionChange = () => {\n    const selection = document.getSelection();\n    if (\n      selection &&\n      !selection.isCollapsed &&\n      selection.anchorNode &&\n      this.el.contains(selection.anchorNode)\n    ) {\n      this.following = false;\n      this.showScrollToLatest = !this.isAtLiveEdge();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"message-scroller\">\n          <div\n            class=\"message-scroller__viewport\"\n            ref={element => {\n              this.viewport = element;\n            }}\n            role=\"region\"\n            aria-label={this.messagesLabel}\n            tabIndex={0}\n            onScroll={this.handleScroll}\n            onPointerDown={this.releaseFollow}\n            onKeyDown={(event: KeyboardEvent) => {\n              if (['ArrowUp', 'PageUp', 'Home'].includes(event.key)) this.releaseFollow();\n            }}\n          >\n            <div\n              class=\"message-scroller__content scroll-edge-fade--block-window\"\n              ref={element => {\n                this.content = element;\n              }}\n              role=\"log\"\n              aria-live=\"polite\"\n              aria-relevant=\"additions\"\n              aria-busy={this.busy ? 'true' : undefined}\n            >\n              <slot />\n            </div>\n          </div>\n          <div\n            class=\"message-scroller__overlay\"\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <slot name=\"overlay\" />\n          </div>\n          {this.showScrollToLatest ? (\n            <div class=\"message-scroller__control\">\n              <ds-button-unfilled\n                variant=\"icon\"\n                icon=\"ChevronDown\"\n                size=\"md\"\n                rounded\n                hasBorder={false}\n                aria-label=\"Scroll to latest message\"\n                onDsClick={() => void this.scrollToEnd()}\n              />\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}