@linktr.ee/messaging-react 3.24.2-rc-1785435591 → 3.24.2-rc-1785436624

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BwfUbPpY.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-F3RRurYR.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-Daw6ObfN.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-BlHbSVwK.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.24.2-rc-1785435591",
+  "version": "3.24.2-rc-1785436624",
   "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.3.0-rc-1785435591",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1785436624",
     "@linktr.ee/messaging-taxonomy": "^0.3.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/LinkAttachment/LinkAttachment.test.tsx

@@ -138,12 +138,24 @@ describe('LinkAttachment accent chin (MES-1349)', () => {
     })
   })
 
-  it('leaves the variant fill in place when no accent is given', async () => {
+  it('falls back to a self-contained fill, not a consumer theme token', async () => {
     renderWithProviders(<LinkAttachment.Sent {...CARD_PROPS} />)
     const root = await screen.findByRole('link')
     expect(root.style.backgroundColor).toBe('')
-    expect(root.className).toContain('bg-shade')
     expect(screen.getByText(CARD_PROPS.title).style.color).toBe('')
+
+    // The fill has to survive in consumers that do not share our Tailwind
+    // theme. This package ships no utilities, so consumers generate our classes
+    // against their own preset: `bg-shade` compiled here but was dropped in
+    // frontyard (Arbor preset, no `shade` colour), leaving the chin transparent
+    // under the own-message `color: white` (MES-1388). An arbitrary value is
+    // generated from the class name alone, so assert that shape — not the
+    // literal colour, which design may change.
+    const fill = root.className
+      .split(/\s+/)
+      .find((c) => c.startsWith('bg-') && c !== 'bg-white')
+    expect(fill).toBeDefined()
+    expect(fill).toMatch(/^bg-\[/)
   })
 
   it('treats an unparseable accent as no accent', async () => {
@@ -244,7 +256,9 @@ describe('LinkAttachment accent chin (MES-1349)', () => {
     )
     const root = await screen.findByRole('link')
     expect(root.style.backgroundColor).toBe('')
-    expect(root.className).toContain('bg-shade')
+    // Variant fill, asserted by shape not literal — see the self-contained-fill
+    // test above for why this must stay an arbitrary value (MES-1388).
+    expect(root.className).toMatch(/bg-\[/)
     expect(screen.getByText(CARD_PROPS.title).style.color).toBe('')
   })
 

package/src/components/LinkAttachment/components/_shared/CardBody.tsx

@@ -47,7 +47,7 @@ const SECONDARY_CLASS_BY_VARIANT: Record<LinkAttachmentVariant, string> = {
 }
 
 // Skeleton bars, variant-aware for the same reason the placeholder hero is: a
-// fixed dark tint is invisible on the dark card's own `bg-shade` fill. Values
+// fixed dark tint is invisible on the dark card's own dark fill. Values
 // match `SkeletonTextLines`, the toolkit's existing skeleton bars, which also
 // documents why these are explicit black/white rather than `bg-current/N`
 // (Tailwind emits nothing for an opacity modifier on `current`).

package/src/components/LinkAttachment/components/_shared/CardShell.tsx

@@ -100,7 +100,17 @@ const CardShell: React.FC<CardShellProps> = ({
     // Kept underneath `accentStyle` rather than swapped out: the inline
     // background wins on specificity, and leaving the class in place means
     // an accent that somehow doesn't paint still lands on a sane surface.
-    bgClassName ?? (variant === 'dark' ? 'bg-shade' : 'bg-white'),
+    //
+    // MUST be an arbitrary value, not a theme token. This package ships no
+    // Tailwind utilities — `dist/assets/index.css` is only the hand-written
+    // `.str-chat`/`.mes-*` CSS — so consumers generate our classes by scanning
+    // `messaging-react/dist` against *their own* theme. `shade` comes from the
+    // component-library preset that this package builds with; frontyard builds
+    // on the Arbor preset and has no such colour, so `bg-shade` was silently
+    // dropped, the chin rendered transparent, and the own-message `color: white`
+    // left the title and URL invisible (MES-1388). An arbitrary value is
+    // generated from the class name alone and cannot depend on consumer theme.
+    bgClassName ?? (variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white'),
     // `focus-ring` is a design-system utility from the component-library
     // tailwind preset — outline-none + a black 2px focus-visible ring
     // with offset, so keyboard users can see the focused card.

package/src/components/LinkAttachment/components/_shared/CardThumbnail.tsx

@@ -129,7 +129,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
     >
       {isLoading ? (
         // Reuses the placeholder fill: a fixed `bg-black/[0.06]` would be
-        // invisible on the dark card's `bg-shade` surface. Stock Tailwind only
+        // invisible on the dark card's dark surface. Stock Tailwind only
         // — `animate-shimmer` exists in this package's own tailwind config but
         // not in either consumer's, so it would compile to nothing in
         // frontyard and profiles while looking right in this Storybook.

package/src/components/LinkAttachment/components/_shared/useChinPalette.ts

@@ -15,7 +15,7 @@ import {
 
 /**
  * Background each variant falls back to when no accent is paintable, as a hex.
- * Mirrors `CardShell`'s tailwind classes (`bg-shade` / `bg-white`) — needed
+ * Mirrors `CardShell`'s tailwind classes (`bg-[#1e2330]` / `bg-white`) — needed
  * separately because the bubble tail paints *outside* the shell's own box, via
  * an inline style a utility class can't reach.
  */

package/src/styles.css

@@ -485,27 +485,9 @@
   background-color: transparent;
 }
 
-/* `str-chat__message-attachment--card` is emitted only by stream-chat-react's
-   default `Attachment` — no toolkit component renders that class. It is reached
-   when a message falls through `canRenderAttachmentsInToolkit`
-   (`CustomMessage/index.tsx`), which happens whenever ANY attachment on the
-   message fails classification: `buildOrderedAttachmentSegments` silently
-   `continue`s past it, `allAttachmentsRepresented` goes false, and the whole
-   message loses the toolkit's chrome.
-
-   The `color: white` below has been here since "Theme Stream chat UI" (#185) and
-   assumes an opaque dark card. Stream paints no background on the card content,
-   so on an own message the title and URL landed white on the `#FBFAF9` messaging
-   surface — measured ~1.02:1, effectively invisible (MES-1388).
-
-   Paint the same shade the designed link chin falls back to
-   (`CHIN_FALLBACK_BG` in `LinkAttachment/.../chinContrast.ts`), so the assumption
-   the white text makes is actually true. This is a floor, not the fix for why a
-   given attachment fails classification — see the note in MES-1388. */
 .str-chat__message.str-chat__message--me {
   .str-chat__attachment-list .str-chat__message-attachment--card {
     color: white;
-    background-color: var(--brand-shade, #1e2330);
   }
 }
 
@@ -683,9 +665,7 @@
   line-height: 1.4;
   color: var(--str-chat__text-low-emphasis-color, rgba(0, 0, 0, 0.5));
 }
-.str-chat__li
-  .str-chat__message--me
-  .sent-message-status-row
+.str-chat__li .str-chat__message--me .sent-message-status-row
   .str-chat__message-status {
   grid-area: auto;
   justify-content: inherit;
@@ -714,9 +694,7 @@
 .str-chat__li .str-chat__message--me .sent-message-status-row svg path {
   fill: currentColor;
 }
-.str-chat__li
-  .str-chat__message--me
-  .sent-message-status-row
+.str-chat__li .str-chat__message--me .sent-message-status-row
   .sent-message-broadcast-badge {
   display: inline-flex;
   width: 16px;
@@ -728,31 +706,20 @@
   background: var(--sent-message-broadcast-badge-color);
   color: #fff;
 }
-.str-chat__li
-  .str-chat__message--me
-  .sent-message-status-row
-  .sent-message-broadcast-badge
-  svg {
+.str-chat__li .str-chat__message--me .sent-message-status-row
+  .sent-message-broadcast-badge svg {
   width: 10px;
   height: 10px;
 }
-.str-chat__li
-  .str-chat__message--me
-  .sent-message-status-row
-  .sent-message-broadcast-badge
-  svg
-  path {
+.str-chat__li .str-chat__message--me .sent-message-status-row
+  .sent-message-broadcast-badge svg path {
   fill: currentColor;
 }
-.str-chat__li
-  .str-chat__message--me
-  .sent-message-status-row
+.str-chat__li .str-chat__message--me .sent-message-status-row
   .sent-message-broadcast-name {
   color: var(--sent-message-broadcast-name-color);
 }
-.str-chat__li
-  .str-chat__message--me
-  .sent-message-status-row
+.str-chat__li .str-chat__message--me .sent-message-status-row
   .sent-message-broadcast-link
   .sent-message-broadcast-name {
   text-decoration: underline;