@linktr.ee/messaging-react 3.30.0 → 3.31.0-rc-1785892270

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CiqbKUJW.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CcitzVoW.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-BpDW7z5O.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-CN3errpB.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.30.0",
+  "version": "3.31.0-rc-1785892270",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1785892270",
     "@linktr.ee/messaging-taxonomy": "^0.5.0",
     "@phosphor-icons/react": "^2.1.10",
     "culori": "^4.0.2"

package/src/components/CustomLinkPreviewList/CustomLinkPreviewList.test.tsx

@@ -64,6 +64,21 @@ describe('CustomLinkPreviewList', () => {
     expect(screen.queryByRole('img')).toBeNull()
   })
 
+  it('is not a scroller of its own: the composer card scrolls as one piece (MES-1037)', () => {
+    // The inverted layout contract — see this component's doc comment. While
+    // this list scrolled and shrank on its own, a staged preview was cropped to
+    // keep the textarea above the keyboard instead of scrolling with it.
+    const { container } = stage({
+      status: LinkPreviewStatus.LOADED,
+      title: 'Example story',
+      image_url: 'https://cdn.example.com/story.jpg',
+    })
+
+    const list = container.querySelector('.messaging-link-preview-list')
+    expect(list).not.toHaveClass('overflow-y-auto')
+    expect(list).not.toHaveClass('min-h-0')
+  })
+
   it('is dismiss-only: the staged card never navigates', () => {
     // The deliberate behaviour change in MES-1349 — see this component's own
     // doc comment for why (MES-1358 §7 Q7, touch hazard). Asserted so the

package/src/components/CustomLinkPreviewList/index.tsx

@@ -52,14 +52,15 @@ export const CustomLinkPreviewList = () => {
   if (!showLinkPreviews) return null
 
   return (
-    // Layout contract: this list is the composer's *shrinkable* region. The
-    // mobile visitor surface sizes itself to the keyboard-shrunk
-    // visualViewport, so when vertical space runs out this container gives
-    // way (min-h-0) and scrolls, while the textarea + send row stays visible
-    // (shrink-0 in CustomMessageInput). Each card is wrapped in a shrink-0
-    // block so it keeps its intrinsic height and the container scrolls — a
-    // bare flex-column child would be shrunk on the column axis and its
-    // fixed-height hero would spill out of the collapsed card box.
+    // Layout contract: this list is NOT a scrollable or shrinkable region. It
+    // used to be the composer's one squeezable box, giving way (min-h-0) and
+    // scrolling on its own so the textarea row could stay pinned above the
+    // keyboard. That cropped the preview to make room for the input, which read
+    // as the preview being cut off; MES-1037 inverted it. The composer card
+    // (`.central-container`) is now the single capped scroll container and this
+    // list scrolls as one piece with the textarea inside it, so the preview
+    // always keeps its full height and only the visible slice of it changes.
+    // Do not reintroduce a nested scroller or a min-h-0 here.
     //
     // Horizontally the card does NOT shrink, deliberately. `CardShell` bakes
     // Figma's `w-[290px]` and there is exactly one width, in the toolkit
@@ -89,12 +90,12 @@ export const CustomLinkPreviewList = () => {
     // viewport. That is the whole trade: deform every narrow surface, or leave
     // one sub-floor device class awkward.
     //
-    // It is awkward, not broken. Setting only `overflow-y` promotes the other
-    // axis, so `overflow-x` computes to `auto` and the region scrolls sideways
-    // instead of spilling; at 320px the dismiss button's right edge lands ~6px
-    // past the fold, reachable by scrolling. That residue belongs to whoever
-    // owns the mobile layout contract, not to this component.
-    <div className="messaging-link-preview-list flex min-h-0 flex-col items-stretch w-full gap-2 overflow-y-auto overscroll-contain">
+    // It is awkward, not broken. The card above sets only `overflow-y`, which
+    // promotes the other axis, so its `overflow-x` computes to `auto` and it
+    // scrolls sideways instead of spilling; at 320px the dismiss button's right
+    // edge lands ~6px past the fold, reachable by scrolling. That residue
+    // belongs to whoever owns the mobile layout contract, not to this component.
+    <div className="messaging-link-preview-list flex flex-col items-stretch w-full gap-2">
       {stateLinkPreviews.map((linkPreview) => {
         // A LOADING preview has no `image_url` yet, so keying the layout off
         // the image alone rendered the skeleton as two bare text bars and then
@@ -104,18 +105,15 @@ export const CustomLinkPreviewList = () => {
         const isLoading = LinkPreviewsManager.previewIsLoading(linkPreview)
 
         return (
-          <div key={linkPreview.og_scrape_url} className="w-full shrink-0">
-            <LinkAttachment.Composer
-              title={linkPreview.title}
-              url={linkPreview.og_scrape_url}
-              thumbnailUrl={linkPreview.image_url}
-              layout={
-                isLoading || linkPreview.image_url ? 'featured' : 'classic'
-              }
-              status={isLoading ? 'loading' : 'ready'}
-              onDismiss={() => handleDismiss(linkPreview.og_scrape_url)}
-            />
-          </div>
+          <LinkAttachment.Composer
+            key={linkPreview.og_scrape_url}
+            title={linkPreview.title}
+            url={linkPreview.og_scrape_url}
+            thumbnailUrl={linkPreview.image_url}
+            layout={isLoading || linkPreview.image_url ? 'featured' : 'classic'}
+            status={isLoading ? 'loading' : 'ready'}
+            onDismiss={() => handleDismiss(linkPreview.og_scrape_url)}
+          />
         )
       })}
     </div>

package/src/components/CustomMessageInput/CustomMessageInput.stories.tsx

@@ -6,6 +6,7 @@ import { Channel, Chat, type SendButtonProps } from 'stream-chat-react'
 
 import { createMockStreamChatClient } from '../../testing/createMockStreamChatClient'
 import LockedAttachment from '../CustomMessage/LockedAttachment'
+import LinkAttachment from '../LinkAttachment'
 
 import { CustomMessageInput } from '.'
 
@@ -75,10 +76,16 @@ type WrapperProps = {
   sendButton?: React.ComponentType<SendButtonProps>
   attachmentPreviewList?: React.ComponentType
   renderFooter?: () => React.ReactNode
+  /**
+   * Stands in for a host that publishes `--messaging-surface-height` — the
+   * keyboard-shrunk viewport height the composer caps itself against. Set it to
+   * pin the cap to a known value instead of leaving it viewport-relative.
+   */
+  surfaceHeight?: number
 }
 
 const Wrapper: React.FC<WrapperProps> = (props) => {
-  const { frozen, renderActions, sendButton, attachmentPreviewList, renderFooter } = props
+  const { frozen, renderActions, sendButton, attachmentPreviewList, renderFooter, surfaceHeight } = props
 
   const [client] = React.useState(() => createMockStreamChatClient(mockUser))
 
@@ -97,7 +104,23 @@ const Wrapper: React.FC<WrapperProps> = (props) => {
         {...(sendButton ? { SendButton: sendButton } : {})}
         {...(attachmentPreviewList ? { AttachmentPreviewList: attachmentPreviewList } : {})}
       >
-        <div className="bg-white" style={{ minWidth: 360 }}>
+        <div
+          className="bg-white"
+          style={
+            {
+              minWidth: 360,
+              // Bottom-anchored inside a fixed-height surface, the way the host
+              // lays the composer out under a raised keyboard.
+              ...(surfaceHeight && {
+                height: surfaceHeight,
+                '--messaging-surface-height': `${surfaceHeight}px`,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-end',
+              }),
+            } as React.CSSProperties
+          }
+        >
           <CustomMessageInput renderActions={renderActions} renderFooter={renderFooter} />
         </div>
       </Channel>
@@ -226,6 +249,31 @@ WithAttachments.parameters = {
   },
 }
 
+export const WithStagedLinkPreviewUnderKeyboard: StoryFn<WrapperProps> = (args) => (
+  <Wrapper {...args} />
+)
+WithStagedLinkPreviewUnderKeyboard.args = {
+  // Roughly a 393x852 phone with the soft keyboard up, so the 250px staged card
+  // alone outgrows the composer's cap (half of this) and the card scrolls.
+  surfaceHeight: 516,
+  attachmentPreviewList: () => (
+    <LinkAttachment.Composer
+      title="How to run your first marathon"
+      url="https://example.com/marathon"
+      thumbnailUrl="https://picsum.photos/seed/marathon/580/300"
+      onDismiss={() => console.log('dismiss link preview')}
+    />
+  ),
+}
+WithStagedLinkPreviewUnderKeyboard.parameters = {
+  docs: {
+    description: {
+      story:
+        'MES-1037: with a link preview staged the composer used to grow tall enough for the soft keyboard to cover the textarea and send button. The white card is now capped at half `--messaging-surface-height` (the keyboard-shrunk height its host publishes) and scrolls as ONE region — the preview keeps its full height instead of being cropped to make room, and the send button sticks to the bottom of the scroll so a long message cannot carry it out of view.',
+    },
+  },
+}
+
 export const WithPaidAttachment: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithPaidAttachment.args = {
   attachmentPreviewList: () => (

package/src/components/CustomMessageInput/CustomMessageInput.test.tsx

@@ -37,12 +37,21 @@ vi.mock('stream-chat-react', () => ({
       <Input />
     </div>
   ),
+  // `maxRows` is surfaced as a data attribute rather than spread onto the
+  // <textarea> (which React would warn about) so a test can still assert it —
+  // stripping it silently would hide the clamp that MES-1037 removed.
   TextareaComposer: ({
-    maxRows: _maxRows,
+    maxRows,
     ...props
   }: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     maxRows?: number
-  }) => <textarea data-testid="textarea-composer" {...props} />,
+  }) => (
+    <textarea
+      data-testid="textarea-composer"
+      data-max-rows={String(maxRows)}
+      {...props}
+    />
+  ),
   AttachmentPreviewList: () => <div data-testid="attachment-preview-list" />,
   QuotedMessagePreview: () => <div data-testid="quoted-message-preview" />,
   useChannelStateContext: () => ({
@@ -318,6 +327,175 @@ describe('CustomMessageInput', () => {
     expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
   })
 
+  // MES-1037: a staged link preview made the composer tall enough for the soft
+  // keyboard to cover the textarea and the send button. The card now caps itself
+  // against the keyboard-shrunk surface and scrolls as one region.
+  //
+  // None of the *layout* can be verified here — jsdom has no layout engine, so
+  // no sticky, no overflow, and the polyfilled ResizeObserver measures
+  // getBoundingClientRect, which jsdom always reports as zero. These are
+  // regression guards on the classes and the observer's behaviour; the layout
+  // itself was verified in real Chrome over the DevTools protocol.
+  describe('keeps the composer clear of the soft keyboard (MES-1037)', () => {
+    let resizeCard: (() => void) | undefined
+
+    beforeEach(() => {
+      mockChannelData = {}
+      resizeCard = undefined
+      vi.stubGlobal(
+        'ResizeObserver',
+        class {
+          constructor(cb: ResizeObserverCallback) {
+            resizeCard = () => cb([], this as unknown as ResizeObserver)
+          }
+          observe() {}
+          unobserve() {}
+          disconnect() {}
+        }
+      )
+    })
+
+    afterEach(() => {
+      vi.unstubAllGlobals()
+    })
+
+    const renderCard = () => {
+      const { container } = renderWithProviders(<CustomMessageInput />)
+      return container.querySelector('.central-container') as HTMLElement
+    }
+
+    it('caps the card against the surface height and scrolls it as one region', () => {
+      const card = renderCard()
+
+      expect(card).toHaveClass(
+        'max-h-[calc(var(--messaging-surface-height,100dvh)*0.5)]',
+        'overflow-y-auto',
+        'overscroll-contain'
+      )
+      // Nothing inside may shrink, or the previews get cropped to make room for
+      // the textarea instead of scrolling with it.
+      expect(card).not.toHaveClass('min-h-0')
+      expect(card.querySelector('.messaging-composer-previews')).not.toHaveClass(
+        'min-h-0'
+      )
+      expect(card.querySelector('.messaging-composer-row')).not.toHaveClass(
+        'shrink-0'
+      )
+    })
+
+    it('lets the textarea grow to fit rather than scrolling its own overflow', () => {
+      const card = renderCard()
+
+      // TextareaComposer defaults an absent maxRows to 1, so this has to be set.
+      expect(screen.getByTestId('textarea-composer')).toHaveAttribute(
+        'data-max-rows',
+        'Infinity'
+      )
+      // Growing to fit is what keeps it from overflowing; overflow-hidden is
+      // what keeps it from becoming a second scrollbar on the occasions the
+      // autosize is momentarily out of date (a width change it never hears
+      // about, e.g. the card gaining its own scrollbar and rewrapping the text).
+      expect(screen.getByTestId('textarea-composer')).toHaveClass(
+        'overflow-hidden'
+      )
+      // And the card stays the one region that does scroll.
+      expect(card).toHaveClass('overflow-y-auto')
+    })
+
+    it('leaves plain-text pastes to the browser but lets file pastes reach Stream', () => {
+      renderCard()
+
+      // Stream's paste handler is dispatched from React's root, above this
+      // card, so a listener further up stands in for it: the event reaching
+      // there means Stream would have handled it (and preventDefault'd the
+      // browser's own insert, which is what leaves the composer unresized).
+      const reachedStream = vi.fn()
+      document.addEventListener('paste', reachedStream)
+
+      const paste = (items: Array<{ kind: string }>) => {
+        const event = new Event('paste', { bubbles: true, cancelable: true })
+        Object.defineProperty(event, 'clipboardData', { value: { items } })
+        screen.getByTestId('textarea-composer').dispatchEvent(event)
+      }
+
+      paste([{ kind: 'string' }])
+      expect(reachedStream).not.toHaveBeenCalled()
+
+      paste([{ kind: 'file' }])
+      expect(reachedStream).toHaveBeenCalledTimes(1)
+
+      document.removeEventListener('paste', reachedStream)
+    })
+
+    it('detects a pasted file via clipboardData.items even when .files is empty (Safari)', () => {
+      renderCard()
+
+      // Safari never populates clipboardData.files on paste, even for an
+      // image — only .items has it. Checking .files here would silently drop
+      // a pasted screenshot instead of handing it to Stream to upload.
+      const reachedStream = vi.fn()
+      document.addEventListener('paste', reachedStream)
+
+      const event = new Event('paste', { bubbles: true, cancelable: true })
+      Object.defineProperty(event, 'clipboardData', {
+        value: { files: [], items: [{ kind: 'file' }] },
+      })
+      screen.getByTestId('textarea-composer').dispatchEvent(event)
+
+      expect(reachedStream).toHaveBeenCalledTimes(1)
+
+      document.removeEventListener('paste', reachedStream)
+    })
+
+    it('scrolls the input back into view when the card shrinks under it', () => {
+      const card = renderCard()
+      // jsdom has no layout, so stand in for a card whose cap now cuts the
+      // input off below the fold.
+      Object.defineProperty(card, 'scrollHeight', {
+        configurable: true,
+        value: 380,
+      })
+      screen.getByTestId('textarea-composer').focus()
+
+      resizeCard?.()
+
+      expect(card.scrollTop).toBe(380)
+    })
+
+    it('leaves the scroll position alone when nothing in the composer is focused', () => {
+      const card = renderCard()
+      Object.defineProperty(card, 'scrollHeight', {
+        configurable: true,
+        value: 380,
+      })
+      // The composer autofocuses, so blur to reach the case this guards: a
+      // resize with no keyboard up must not yank a visitor reading a preview.
+      screen.getByTestId('textarea-composer').blur()
+
+      resizeCard?.()
+
+      expect(card.scrollTop).toBe(0)
+    })
+
+    it('sticks the send button to the bottom of the scroll, at its resting inset', () => {
+      renderCard()
+
+      // The offset must match the wrapper's own margin: sticky resolves against
+      // the border box, so at bottom-0 the button would lose that inset and sit
+      // flush with the card's edge for as long as it stayed stuck. pt-2 gives
+      // the same inset above: sticky offsets only the bottom edge, so once the
+      // card scrolls far enough for the button to ride up to the top of the
+      // row, a staged preview otherwise meets it flush. Asserted together so
+      // they cannot drift apart.
+      expect(screen.getByTestId('send-button').parentElement).toHaveClass(
+        'sticky',
+        'bottom-2',
+        'mb-2',
+        'pt-2'
+      )
+    })
+  })
+
   // MES-1303: the floating composer overlays the message list, so growing it
   // reserves space via padding-bottom but never moves the viewport. The resize
   // observer re-pins the thread to the latest message when the composer grows —

package/src/components/CustomMessageInput/index.tsx

@@ -79,15 +79,96 @@ const CustomMessageInputInner: React.FC = () => {
     AttachmentPreviewList = DefaultAttachmentPreviewList,
   } = useComponentContext('CustomMessageInput')
 
+  // Scroll the textarea back into view when the card shrinks under it. Browsers
+  // reveal a newly focused element by themselves, and the caret while typing, so
+  // neither needs help; the one thing nothing reveals is the box getting shorter
+  // underneath the input — which is exactly what the keyboard does here, a beat
+  // after the tap that raised it, once the host reports it and the cap below
+  // follows the shrunken surface (MES-1037).
+  const cardRef = React.useRef<HTMLDivElement>(null)
+  React.useEffect(() => {
+    const card = cardRef.current
+
+    if (!card || typeof ResizeObserver === 'undefined') {
+      return
+    }
+
+    const observer = new ResizeObserver(() => {
+      if (card.contains(document.activeElement)) {
+        card.scrollTop = card.scrollHeight
+      }
+    })
+    observer.observe(card)
+
+    return () => observer.disconnect()
+  }, [])
+
+  // Let the browser insert pasted text itself, so the composer grows to fit it
+  // immediately (MES-1037). Stream's paste handler calls preventDefault and
+  // feeds the text back through composer state asynchronously; TextareaComposer
+  // then assigns `textarea.value` in a layout effect, which fires no input event
+  // and so never triggers react-textarea-autosize's re-measure — leaving the
+  // composer one line tall, with the pasted text hidden, until the next
+  // keystroke happens to resize it. Letting the default action run puts pasted
+  // text on exactly the path typed text takes, which measures correctly.
+  //
+  // It has to be a native listener that stops propagation rather than an
+  // `onPaste` prop: TextareaComposer takes `onPaste` from the message-input
+  // context and applies it after spreading our props, so ours would be
+  // overridden, and a React handler on this card would run after the textarea's
+  // anyway. Stopping the event here keeps it from reaching React's root, where
+  // Stream's handler is dispatched from. Pastes carrying a file still go to
+  // Stream, which uploads it as an attachment.
+  React.useEffect(() => {
+    const card = cardRef.current
+
+    if (!card) {
+      return
+    }
+
+    const passToBrowser = (event: ClipboardEvent) => {
+      // `items`, not `files`: Safari never populates `clipboardData.files` on
+      // paste, even for an image, only `items` — which is why Stream's own
+      // handler reads files via `items` (`dataTransferItemsToFiles`) rather
+      // than `.files`. Checking `.files.length` here would treat a pasted
+      // screenshot as plain text on Safari and drop it silently instead of
+      // handing it to Stream to upload.
+      const hasFile = Array.from(event.clipboardData?.items ?? []).some(
+        (item) => item.kind === 'file'
+      )
+      if (!hasFile) {
+        event.stopPropagation()
+      }
+    }
+
+    card.addEventListener('paste', passToBrowser)
+
+    return () => card.removeEventListener('paste', passToBrowser)
+  }, [])
+
   return (
-    // min-h-0 lets the composer shrink under keyboard squeeze (the link
-    // preview list inside is the scrollable region); the textarea + send row
-    // is shrink-0 so it can never be pushed out of view. self-stretch matters
-    // because the parent `.message-input` row uses items-end, which suppresses
-    // the default cross-axis stretch — without it this container keeps its
-    // content height and the squeeze never reaches the preview list. Stream's
-    // <MessageInput> renders its Input directly (context providers only, no
-    // wrapper element), so this is a direct flex item of that row.
+    // This card is the composer's ONE scroll container: staged previews and the
+    // textarea row scroll together past a cap, instead of the previews being
+    // squeezed to keep the row in view (MES-1037). Nothing inside may shrink, or
+    // the previews get cropped rather than scrolled — hence no `min-h-0` here or
+    // on the previews wrapper, no `shrink-0` on the row, and no nested scroller
+    // in CustomLinkPreviewList. Every child keeps its intrinsic height and the
+    // overflow lands on this scrollport. `self-stretch` went with the squeeze it
+    // fed: the parent `.message-input` row is `items-end`, so the card now sizes
+    // to its content up to the cap. Stream's <MessageInput> renders its Input
+    // directly (context providers only, no wrapper element), so this is a direct
+    // flex item of that row.
+    //
+    // The cap is half the *keyboard-shrunk* surface height, because a cap that
+    // doesn't shrink with the keyboard lets the card spill past the visible
+    // viewport — which is the bug. No CSS unit tracks the visual viewport, so
+    // `--messaging-surface-height` is an optional host contract, like this
+    // package's own `--messaging-composer-height`: linktr.ee-profiles publishes
+    // it on the messaging surface (an ancestor of this composer at runtime) from
+    // its own `visualViewport` measurement, and it inherits in. Hosts that don't
+    // fall back to `100dvh` — bounded, but not keyboard-aware. Deliberately not
+    // measured here: the host owns viewport control and the package must not
+    // fight it for it.
     //
     // The container itself carries no padding of its own: it used to (p-2),
     // but that inset now lives on the textarea as padding instead, so the
@@ -102,18 +183,22 @@ const CustomMessageInputInner: React.FC = () => {
     // `[&>:not(...)]:p-2` variant restores the container's old inset for any
     // such foreign direct child, without re-adding it to our own wrappers.
     <div
-      className="central-container flex min-h-0 flex-col min-w-0 w-full self-stretch bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)] [&>:not(.messaging-composer-previews):not(.messaging-composer-row)]:p-2"
+      ref={cardRef}
+      className="central-container flex flex-col min-w-0 w-full max-h-[calc(var(--messaging-surface-height,100dvh)*0.5)] overflow-y-auto overscroll-contain bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)] [&>:not(.messaging-composer-previews):not(.messaging-composer-row)]:p-2"
       data-dd-privacy="mask"
     >
       {/* empty:hidden collapses this row (padding, gap, and all) when none of
           the previews below have anything to render, so an idle composer has
-          no leftover top inset before the textarea row. */}
-      <div className="messaging-composer-previews empty:hidden flex min-h-0 flex-col gap-2 px-2 pt-2">
+          no leftover top inset before the textarea row. No bottom inset: the
+          textarea's own py-3.5 already separates the last preview from the
+          text, and adding one here double-spaces them now that both sit in the
+          same scroll. */}
+      <div className="messaging-composer-previews empty:hidden flex flex-col gap-2 px-2 pt-2">
         <QuotedMessagePreview />
         <CustomLinkPreviewList />
         <AttachmentPreviewList />
       </div>
-      <div className="messaging-composer-row flex shrink-0 items-start">
+      <div className="messaging-composer-row flex items-start">
         <TextareaComposer
           aria-disabled={disabled || undefined}
           // TextareaComposer wraps the real <textarea> in its own div, so
@@ -125,7 +210,19 @@ const CustomMessageInputInner: React.FC = () => {
           containerClassName="min-w-0 flex-1 leading-[0]"
           // bg-transparent: the container has no padding to inset it behind
           // anymore, so an opaque textarea would paint over its rounded corners.
-          className="w-full resize-none bg-transparent py-3.5 pl-4 pr-4 outline-none leading-5 placeholder:text-black/30 text-sm"
+          //
+          // overflow-hidden makes "the card is the only scrollable region" a
+          // property of the CSS rather than of the autosize arithmetic always
+          // landing exactly right. A textarea's UA default is `overflow: auto`,
+          // and TextareaComposer sizes itself by copying the computed style into
+          // a detached measuring textarea on input, window resize and font load
+          // only — so any width change it does not hear about (most obviously
+          // this card gaining its own scrollbar, which narrows the textarea and
+          // rewraps the text onto another line) leaves it a line short and
+          // sprouts a second scrollbar inside the first. The caret stays visible
+          // either way: browsers still scroll an overflow-hidden textarea to
+          // reveal it, and the next keystroke re-fits the height.
+          className="w-full resize-none overflow-hidden bg-transparent py-3.5 pl-4 pr-4 outline-none leading-5 placeholder:text-black/30 text-sm"
           // While this might usually be considered an anti-pattern, in most
           // cases, when a message thread is rendered, we want the input to
           // gain focus automatically.
@@ -134,7 +231,12 @@ const CustomMessageInputInner: React.FC = () => {
           // Enter sends (Shift+Enter inserts a newline), so label the
           // on-screen keyboard's return key accordingly.
           enterKeyHint="send"
-          maxRows={4}
+          // Grow to fit every line rather than scrolling the overflow inside
+          // the textarea past a few of them: the card above is the one scroll
+          // container, so a message long enough to outgrow it scrolls there, as
+          // one piece with the previews. Explicit because TextareaComposer
+          // defaults an absent `maxRows` to 1, not to "no cap".
+          maxRows={Infinity}
           readOnly={disabled}
           tabIndex={disabled ? -1 : undefined}
         />
@@ -143,8 +245,33 @@ const CustomMessageInputInner: React.FC = () => {
             grows — lives on a wrapper instead of the button's own
             className: a host-supplied SendButton can (and, per our own
             stories, does) spread its own className over the one we pass in,
-            which would otherwise silently drop this spacing. */}
-        <div className="mt-auto mb-2 mr-2 shrink-0">
+            which would otherwise silently drop this spacing. The sticky is
+            here for the same reason.
+
+            sticky: mt-auto alone anchors the button to the bottom of a row the
+            textarea can grow taller than the card, carrying send out of the
+            scroll's view while you are still typing. Sticking it to the
+            scrollport keeps it reachable without a scroll, floating over the
+            textarea's own column, so nothing reflows and no text runs under it.
+            The offset matches mb-2 because sticky resolves against the border
+            box, not the margin box: at bottom-0 the button would drop that
+            inset and sit flush with the card's edge for as long as it stayed
+            stuck. A sticky element cannot leave its containing block, which is
+            the row — so scrolling all the way up to the previews takes the
+            button off-screen with the row it belongs to, and it is pinned at
+            every position where the row is in view, i.e. whenever you are
+            typing.
+
+            pt-2 gives the button the same inset above it that mb-2 gives below,
+            and keeps it there while the card scrolls: sticky offsets only the
+            bottom edge, so once the card scrolls far enough for the button to
+            ride up to the top of the row, a staged preview would otherwise meet
+            it flush. The padding travels with the button, so the gap holds at
+            every scroll position rather than only at rest. It needs no
+            background to sit on: sticky cannot leave its containing block, so
+            the button stays inside the row and a preview never passes behind
+            it. */}
+        <div className="sticky bottom-2 mt-auto mb-2 mr-2 shrink-0 pt-2">
           <SendButton
             sendMessage={handleSubmit}
             aria-label="Send"