@linktr.ee/messaging-react 4.4.3-rc-1788164552 → 4.4.3-rc-1788166409

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.3-rc-1788164552",
+  "version": "4.4.3-rc-1788166409",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.6.0-rc-1788164552",
-    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1788164552",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1788166409",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1788166409",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/AttachmentCard/MediaPlayer.test.tsx

@@ -67,26 +67,30 @@ describe('MediaPlayer', () => {
   })
 
   it('keeps an audio poster after canPlay but hides a video poster', () => {
-    const audio = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="audio/mpeg" poster={POSTER} />
-    )
-    const audioElement = audio.container.querySelector(
-      'audio'
-    ) as HTMLAudioElement
-    expect(audio.container.querySelectorAll('img')).toHaveLength(1)
-    fireEvent.canPlay(audioElement)
-    expect(audio.container.querySelectorAll('img')).toHaveLength(1)
-    audio.unmount()
-
-    const video = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" poster={POSTER} />
-    )
-    const videoElement = video.container.querySelector(
-      'video'
-    ) as HTMLVideoElement
-    expect(video.container.querySelectorAll('img')).toHaveLength(1)
-    fireEvent.canPlay(videoElement)
-    expect(video.container.querySelectorAll('img')).toHaveLength(0)
+    {
+      const view = renderWithProviders(
+        <MediaPlayer source={SOURCE} mimeType="audio/mpeg" poster={POSTER} />
+      )
+      const audioElement = view.container.querySelector(
+        'audio'
+      ) as HTMLAudioElement
+      expect(view.container.querySelectorAll('img')).toHaveLength(1)
+      fireEvent.canPlay(audioElement)
+      expect(view.container.querySelectorAll('img')).toHaveLength(1)
+      view.unmount()
+    }
+
+    {
+      const view = renderWithProviders(
+        <MediaPlayer source={SOURCE} mimeType="video/mp4" poster={POSTER} />
+      )
+      const videoElement = view.container.querySelector(
+        'video'
+      ) as HTMLVideoElement
+      expect(view.container.querySelectorAll('img')).toHaveLength(1)
+      fireEvent.canPlay(videoElement)
+      expect(view.container.querySelectorAll('img')).toHaveLength(0)
+    }
   })
 
   it('uses a type icon as the initial placeholder when no poster is provided', async () => {
@@ -156,13 +160,9 @@ describe('MediaPlayer', () => {
     const root = container.firstElementChild as HTMLElement
 
     fireEvent.click(root)
-    await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Pause' })).toBeInTheDocument()
-    )
+    await screen.findByRole('button', { name: 'Pause' })
     fireEvent.click(root)
-    await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Play' })).toBeInTheDocument()
-    )
+    await screen.findByRole('button', { name: 'Play' })
     expect(play).toHaveBeenCalledTimes(1)
 
     const onContainerClick = vi.fn()
@@ -223,9 +223,7 @@ describe('MediaPlayer', () => {
     const button = screen.getByRole('button', { name: 'Play' })
 
     fireEvent.click(button)
-    await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Pause' })).toBeInTheDocument()
-    )
+    await screen.findByRole('button', { name: 'Pause' })
     expect(container.firstElementChild).toBeInTheDocument()
   })
 
@@ -310,7 +308,7 @@ describe('MediaPlayer', () => {
   })
 
   it('renders the progress-only track without controls when requested', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <MediaPlayer
         source={SOURCE}
         mimeType="video/mp4"
@@ -323,7 +321,7 @@ describe('MediaPlayer', () => {
       screen.getByRole('slider', { name: 'Playback position' })
     ).toBeInTheDocument()
     expect(screen.queryByRole('button', { name: 'Play' })).toBeNull()
-    expect(container.querySelectorAll('[role="slider"]')).toHaveLength(1)
+    expect(screen.getAllByRole('slider')).toHaveLength(1)
   })
 
   it('uses natural video dimensions after metadata and aspect-video before then', () => {

package/src/components/AttachmentCard/Thumbnail.test.tsx

@@ -147,55 +147,63 @@ describe('AttachmentThumbnail', () => {
   })
 
   it('renders a document icon placeholder without a thumbnail', () => {
-    const dark = renderWithProviders(
-      <AttachmentThumbnail
-        mimeType="application/pdf"
-        variant="dark"
-        title="PDF"
-      />
-    )
-    const darkIcon = dark.container.querySelector('svg') as SVGElement
-    expect(darkIcon).toHaveClass('size-12', 'text-white/20')
-    expect(dark.container.firstElementChild).toHaveClass('bg-white/10')
-    dark.unmount()
+    {
+      const view = renderWithProviders(
+        <AttachmentThumbnail
+          mimeType="application/pdf"
+          variant="dark"
+          title="PDF"
+        />
+      )
+      const darkIcon = view.container.querySelector('svg') as SVGElement
+      expect(darkIcon).toHaveClass('size-12', 'text-white/20')
+      expect(view.container.firstElementChild).toHaveClass('bg-white/10')
+      view.unmount()
+    }
 
-    const light = renderWithProviders(
-      <AttachmentThumbnail mimeType="application/pdf" variant="light" />
-    )
-    const lightIcon = light.container.querySelector('svg') as SVGElement
-    expect(lightIcon).toHaveClass('size-12', 'text-black/20')
-    expect(light.container.firstElementChild).toHaveClass('bg-black/5')
+    {
+      const view = renderWithProviders(
+        <AttachmentThumbnail mimeType="application/pdf" variant="light" />
+      )
+      const lightIcon = view.container.querySelector('svg') as SVGElement
+      expect(lightIcon).toHaveClass('size-12', 'text-black/20')
+      expect(view.container.firstElementChild).toHaveClass('bg-black/5')
+    }
   })
 
   it('renders the poster-only branch with variant-specific shell and alt fallback', () => {
-    const dark = renderWithProviders(
-      <AttachmentThumbnail
-        mimeType="image/jpeg"
-        thumbnailUrl={LINKTREE_THUMBNAIL}
-        title="Poster"
-        variant="dark"
-      />
-    )
-    const darkImage = screen.getByRole('img', { name: 'Poster' })
-    expect(darkImage).toHaveAttribute('src', OPTIMIZED_THUMBNAIL)
-    expect(dark.container.firstElementChild).toHaveClass(
-      'aspect-video',
-      'bg-white/10'
-    )
-    dark.unmount()
+    {
+      const view = renderWithProviders(
+        <AttachmentThumbnail
+          mimeType="image/jpeg"
+          thumbnailUrl={LINKTREE_THUMBNAIL}
+          title="Poster"
+          variant="dark"
+        />
+      )
+      const darkImage = screen.getByRole('img', { name: 'Poster' })
+      expect(darkImage).toHaveAttribute('src', OPTIMIZED_THUMBNAIL)
+      expect(view.container.firstElementChild).toHaveClass(
+        'aspect-video',
+        'bg-white/10'
+      )
+      view.unmount()
+    }
 
-    const light = renderWithProviders(
-      <AttachmentThumbnail
-        mimeType="image/jpeg"
-        thumbnailUrl="https://external.example/poster.jpg"
-        variant="light"
-      />
-    )
-    expect(screen.getByRole('img')).toHaveAttribute('alt', '')
-    expect(light.container.firstElementChild).toHaveClass(
-      'aspect-video',
-      'bg-black/5'
-    )
+    {
+      const view = renderWithProviders(
+        <AttachmentThumbnail
+          mimeType="image/jpeg"
+          thumbnailUrl="https://external.example/poster.jpg"
+          variant="light"
+        />
+      )
+      expect(screen.getByRole('img')).toHaveAttribute('alt', '')
+      expect(view.container.firstElementChild).toHaveClass(
+        'aspect-video',
+        'bg-black/5'
+      )
+    }
   })
 
   it('renders the empty branch with a light placeholder', () => {

package/src/components/AttachmentCard/index.test.tsx

@@ -9,29 +9,33 @@ const thumbnail = <div data-testid="thumbnail">thumbnail</div>
 
 describe('AttachmentCard', () => {
   it('applies the dark and light root surfaces and type icon colors', () => {
-    const dark = renderWithProviders(
-      <AttachmentCard
-        variant="dark"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        title="Dark file"
-      />
-    )
-    expect(screen.getByText('Dark file')).toBeInTheDocument()
-    expect(dark.container.firstElementChild).toHaveClass('bg-[#1e2330]')
-    expect(dark.container.querySelector('svg')).toHaveClass('text-white/55')
-    dark.unmount()
+    {
+      const view = renderWithProviders(
+        <AttachmentCard
+          variant="dark"
+          thumbnail={thumbnail}
+          mimeType="application/pdf"
+          title="Dark file"
+        />
+      )
+      expect(screen.getByText('Dark file')).toBeInTheDocument()
+      expect(view.container.firstElementChild).toHaveClass('bg-[#1e2330]')
+      expect(view.container.querySelector('svg')).toHaveClass('text-white/55')
+      view.unmount()
+    }
 
-    const light = renderWithProviders(
-      <AttachmentCard
-        variant="light"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        title="Light file"
-      />
-    )
-    expect(light.container.firstElementChild).toHaveClass('bg-white')
-    expect(light.container.querySelector('svg')).toHaveClass('text-black/55')
+    {
+      const view = renderWithProviders(
+        <AttachmentCard
+          variant="light"
+          thumbnail={thumbnail}
+          mimeType="application/pdf"
+          title="Light file"
+        />
+      )
+      expect(view.container.firstElementChild).toHaveClass('bg-white')
+      expect(view.container.querySelector('svg')).toHaveClass('text-black/55')
+    }
   })
 
   it('uses the dark placeholder title and dims it when title is absent', () => {
@@ -132,7 +136,7 @@ describe('AttachmentCard', () => {
     )
     expect(container.querySelectorAll('.pointer-events-auto')).toHaveLength(2)
 
-    const withoutSlots = renderWithProviders(
+    const view = renderWithProviders(
       <AttachmentCard
         variant="light"
         thumbnail={thumbnail}
@@ -140,7 +144,7 @@ describe('AttachmentCard', () => {
       />
     )
     expect(
-      withoutSlots.container.querySelectorAll('.pointer-events-auto')
+      view.container.querySelectorAll('.pointer-events-auto')
     ).toHaveLength(0)
   })
 

package/src/components/Avatar/Avatar.test.tsx

@@ -42,100 +42,110 @@ describe('Avatar', () => {
   )
 
   it('does not show a star by default but shows one when starred', () => {
-    const defaultAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" />
-    )
-    expect(defaultAvatar.container.querySelector('svg')).not.toBeInTheDocument()
+    {
+      const view = renderWithProviders(<Avatar id="user-1" name="Alice" />)
+      expect(view.container.querySelector('svg')).not.toBeInTheDocument()
+    }
 
-    const starredAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" starred />
-    )
-    expect(starredAvatar.container.querySelector('svg')).toBeInTheDocument()
+    {
+      const view = renderWithProviders(
+        <Avatar id="user-1" name="Alice" starred />
+      )
+      expect(view.container.querySelector('svg')).toBeInTheDocument()
+    }
   })
 
   it('uses a squircle by default and a circle when explicitly requested', () => {
-    const squircleAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" />
-    )
-    const squircleElements = squircleAvatar.container.querySelectorAll(
-      '[style*="border-radius"]'
-    )
-    expect(squircleElements).toHaveLength(3)
-    squircleElements.forEach((element) =>
-      expect(element).toHaveStyle({ borderRadius: '1rem' })
-    )
+    {
+      const view = renderWithProviders(<Avatar id="user-1" name="Alice" />)
+      const squircleElements = view.container.querySelectorAll(
+        '[style*="border-radius"]'
+      )
+      expect(squircleElements).toHaveLength(3)
+      squircleElements.forEach((element) =>
+        expect(element).toHaveStyle({ borderRadius: '1rem' })
+      )
+    }
 
-    const circleAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" shape="circle" />
-    )
-    const circleElements = circleAvatar.container.querySelectorAll(
-      '[style*="border-radius"]'
-    )
-    expect(circleElements).toHaveLength(3)
-    circleElements.forEach((element) =>
-      expect(element).toHaveStyle({ borderRadius: '50%' })
-    )
+    {
+      const view = renderWithProviders(
+        <Avatar id="user-1" name="Alice" shape="circle" />
+      )
+      const circleElements = view.container.querySelectorAll(
+        '[style*="border-radius"]'
+      )
+      expect(circleElements).toHaveLength(3)
+      circleElements.forEach((element) =>
+        expect(element).toHaveStyle({ borderRadius: '50%' })
+      )
+    }
   })
 
   it('only applies the AI ring when dmAgentEnabled is true', () => {
-    const defaultAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" size={40} />
-    )
-    expect(
-      defaultAvatar.container.querySelector('[data-testid="avatar-ring"]')
-    ).not.toHaveStyle({
-      borderWidth: '2px',
-      borderStyle: 'solid',
-    })
+    {
+      const view = renderWithProviders(
+        <Avatar id="user-1" name="Alice" size={40} />
+      )
+      expect(
+        view.container.querySelector('[data-testid="avatar-ring"]')
+      ).not.toHaveStyle({
+        borderWidth: '2px',
+        borderStyle: 'solid',
+      })
+    }
 
-    const enabledAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" size={40} dmAgentEnabled />
-    )
-    expect(
-      enabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
-    ).toHaveStyle({
-      borderWidth: '2px',
-      borderStyle: 'solid',
-      borderColor: 'var(--AI-Gradient, #7F22FE)',
-      boxShadow: 'inset 0 1px 2px 0 rgba(255, 255, 255, 0.5)',
-    })
+    {
+      const view = renderWithProviders(
+        <Avatar id="user-1" name="Alice" size={40} dmAgentEnabled />
+      )
+      expect(
+        view.container.querySelector('[data-testid="avatar-ring"]')
+      ).toHaveStyle({
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        borderColor: 'var(--AI-Gradient, #7F22FE)',
+        boxShadow: 'inset 0 1px 2px 0 rgba(255, 255, 255, 0.5)',
+      })
+    }
 
-    const smallEnabledAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" size={20} dmAgentEnabled />
-    )
-    expect(
-      smallEnabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
-    ).toHaveStyle({ borderWidth: '1px' })
+    {
+      const view = renderWithProviders(
+        <Avatar id="user-1" name="Alice" size={20} dmAgentEnabled />
+      )
+      expect(
+        view.container.querySelector('[data-testid="avatar-ring"]')
+      ).toHaveStyle({ borderWidth: '1px' })
+    }
   })
 
   it('renders an image instead of the emoji fallback when image is provided', () => {
-    const fallbackAvatar = renderWithProviders(<Avatar id="" name="Alice" />)
-    expect(
-      fallbackAvatar.container.querySelector('img')
-    ).not.toBeInTheDocument()
-    expect(fallbackAvatar.container).toHaveTextContent('🍎')
-    expect(
-      fallbackAvatar.container.querySelector('.avatar-fallback')
-    ).toHaveClass(
-      'avatar-fallback',
-      'flex',
-      'h-full',
-      'w-full',
-      'items-center',
-      'justify-center',
-      'font-semibold',
-      'select-none',
-      'transition-colors'
-    )
+    {
+      const view = renderWithProviders(<Avatar id="" name="Alice" />)
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      expect(view.container).toHaveTextContent('🍎')
+      expect(view.container.querySelector('.avatar-fallback')).toHaveClass(
+        'avatar-fallback',
+        'flex',
+        'h-full',
+        'w-full',
+        'items-center',
+        'justify-center',
+        'font-semibold',
+        'select-none',
+        'transition-colors'
+      )
+    }
 
-    const imageAvatar = renderWithProviders(
-      <Avatar id="" name="Alice" image="https://example.com/avatar.png" />
-    )
-    expect(imageAvatar.container.querySelector('img')).toHaveAttribute(
-      'src',
-      'https://example.com/avatar.png'
-    )
-    expect(imageAvatar.container).not.toHaveTextContent('🍎')
+    {
+      const view = renderWithProviders(
+        <Avatar id="" name="Alice" image="https://example.com/avatar.png" />
+      )
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'src',
+        'https://example.com/avatar.png'
+      )
+      expect(view.container).not.toHaveTextContent('🍎')
+    }
   })
 
   it('applies the fallback background color and forwards custom classes', () => {

package/src/components/ChannelList/CustomChannelPreview.test.tsx

@@ -141,12 +141,12 @@ describe('CustomChannelPreview', () => {
   it('selects the channel by click and activation keys only', () => {
     const channel = createMockChannel([])
     const onChannelSelect = vi.fn()
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <ChannelListProvider value={{ onChannelSelect, debug: false }}>
         <CustomChannelPreview channel={channel} />
       </ChannelListProvider>
     )
-    const row = container.querySelector('[role="button"]') as HTMLElement
+    const row = screen.getByRole('button')
 
     fireEvent.click(row)
     fireEvent.keyDown(row, { key: 'Enter' })
@@ -213,11 +213,11 @@ describe('CustomChannelPreview', () => {
       image: 'https://example.com/alice.png',
     }
 
-    const { container, rerender } = renderWithProviders(
+    const { rerender } = renderWithProviders(
       <CustomChannelPreview {...defaultProps} channel={channel} />
     )
-    expect(container.querySelectorAll('img')).toHaveLength(1)
-    expect(container.querySelector('img')).toHaveAttribute(
+    expect(screen.getAllByRole('img', { hidden: true })).toHaveLength(1)
+    expect(screen.getByRole('img', { hidden: true })).toHaveAttribute(
       'src',
       'https://example.com/alice.png'
     )
@@ -229,7 +229,7 @@ describe('CustomChannelPreview', () => {
     rerender(
       <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
     )
-    expect(container.querySelectorAll('img')).toHaveLength(0)
+    expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(0)
   })
 
   it.each([

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

@@ -359,13 +359,13 @@ describe('CustomMessageInput', () => {
       vi.unstubAllGlobals()
     })
 
-    const renderCard = () => {
+    const mountCard = () => {
       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()
+      const card = mountCard()
 
       expect(card).toHaveClass(
         'max-h-[calc(var(--messaging-surface-height,100dvh)*0.5)]',
@@ -384,7 +384,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('lets the textarea grow to fit rather than scrolling its own overflow', () => {
-      const card = renderCard()
+      const card = mountCard()
 
       // TextareaComposer defaults an absent maxRows to 1, so this has to be set.
       expect(screen.getByTestId('textarea-composer')).toHaveAttribute(
@@ -403,7 +403,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('leaves plain-text pastes to the browser but lets file pastes reach Stream', () => {
-      renderCard()
+      mountCard()
 
       // 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
@@ -428,7 +428,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('detects a pasted file via clipboardData.items even when .files is empty (Safari)', () => {
-      renderCard()
+      mountCard()
 
       // Safari never populates clipboardData.files on paste, even for an
       // image — only .items has it. Checking .files here would silently drop
@@ -448,7 +448,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('scrolls the input back into view when the card shrinks under it', () => {
-      const card = renderCard()
+      const card = mountCard()
       // jsdom has no layout, so stand in for a card whose cap now cuts the
       // input off below the fold.
       Object.defineProperty(card, 'scrollHeight', {
@@ -463,7 +463,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('leaves the scroll position alone when nothing in the composer is focused', () => {
-      const card = renderCard()
+      const card = mountCard()
       Object.defineProperty(card, 'scrollHeight', {
         configurable: true,
         value: 380,
@@ -478,7 +478,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('sticks the send button to the bottom of the scroll, at its resting inset', () => {
-      renderCard()
+      mountCard()
 
       // 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