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

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-quV01XX7.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.d.ts

@@ -693,8 +693,8 @@ export declare interface LinkAttachmentBaseProps {
      * screen. Omitted, unparseable, `layout: 'classic'`, no `thumbnailUrl`,
      * `status` other than `'ready'`, a playable-audio `mimeType` + `sourceUrl`
      * (whose hero is the native player rather than an image), or a hero that
-     * fails to load => the card falls back to `CHIN_FALLBACK_BG` with
-     * `CHIN_TEXT_LIGHT`.
+     * fails to load, or the colour cannot clear AA against this side's ink =>
+     * the card falls back to `BUBBLE_BG_BY_VARIANT[variant]`, the plain bubble fill.
      */
     accentColor?: string;
     /**

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-BlHbSVwK.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-DSQieSNh.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-1785436624",
+  "version": "3.25.0-rc-1785440433",
   "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-1785436624",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1785440433",
     "@linktr.ee/messaging-taxonomy": "^0.3.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/LinkAttachment/LinkAttachment.stories.tsx

@@ -239,10 +239,10 @@ export const LinkApps: StoryFn = () => (
    ────────────────────────────────────────────────────────────────── */
 
 const ACCENTS: Array<{ label: string; accentColor?: string }> = [
-  // The Figma mock's own chin colour. White measures 3.76:1 on it and fails
-  // AA, so the contrast rule flips this card to near-black text and the
-  // shipped card deliberately does NOT match the mock. This cell is the
-  // trade-off, made visible for design review.
+  // The Figma mock's own chin colour. Painted raw it measures 3.76:1 against
+  // the sender's white ink, which is why the mock cannot simply be reproduced;
+  // derived, its hue survives at a lightness both inks clear. The shipped sent
+  // card is therefore darker than the mock on purpose (MES-1388).
   { label: '#738883 (mock)', accentColor: '#738883' },
   { label: '#AA9F93', accentColor: '#AA9F93' },
   { label: '#FFF099', accentColor: '#FFF099' },
@@ -260,12 +260,20 @@ const ACCENT_CARD = {
 }
 
 /**
- * The dominant-colour chin and its WCAG AA contrast rule (MES-1349).
+ * The dominant-colour card and its WCAG AA gate (MES-1349, corrected MES-1388).
  *
- * Each column is one extracted accent; the card derives its own chin text
- * colour by taking whichever of `#FFFFFF` / `#040403` scores the higher
- * contrast ratio against it. Every cell clears 4.5:1 — the two candidates'
- * passing ranges overlap, so no sRGB colour fails against both.
+ * Each column is one extracted accent. Ink is *fixed per side* — `text-white`
+ * when sent, `text-black/90` when received — so contrast decides whether the
+ * accent may paint at all rather than which text colour to use. An accent under
+ * 4.5:1 against that side's ink is discarded for the plain message bubble fill
+ * (`#1e2330` sent, `#f1f0ee` received), so a card without a usable colour reads
+ * like the text bubbles around it.
+ *
+ * Each column is a synthetic base colour chosen to probe the derivation, not a
+ * colour taken from the hero — in production `accent_color` is extracted from
+ * the attachment image itself, so a photograph's own hue is what arrives here.
+ * Every column paints on both sides: the derivation moves lightness, never hue,
+ * so a base is never refused for contrast.
  *
  * The bottom rows cover the states where the accent is deliberately ignored:
  * `classic` has no image to extract from, and `loading` has no image yet.

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

@@ -108,41 +108,64 @@ describe('LinkAttachment.Sent', () => {
   })
 })
 
-describe('LinkAttachment accent chin (MES-1349)', () => {
-  const ACCENT = '#738883'
+describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
+  const ACCENT = '#7008E7'
+  // The near-white dominant colour from the MES-1388 report. Painted raw it put
+  // white ink on 1.09:1; derived, it is legible on both sides.
+  const PALE_ACCENT = '#FCF5E3'
   const CARD_PROPS = {
     title: 'Yoga on Ice with Brie Nala',
     url: 'tr.ee/briewebsite',
     thumbnailUrl: 'https://cdn.example.com/yoga.jpg',
   }
 
-  it('paints the card with the accent and flips the chin text to near-black', async () => {
+  const surfaceOf = (element: HTMLElement) => element.style.backgroundColor
+
+  it('derives a dark surface for the sender and inks it white', async () => {
     renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} accentColor={ACCENT} />
     )
-    // White on #738883 measures 3.76:1 and fails AA, so the rule must pick
-    // the dark candidate even though the Figma mock draws white.
-    expect(await screen.findByRole('link')).toHaveStyle({
-      backgroundColor: ACCENT,
-    })
-    expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#040403' })
-    expect(screen.getByText(CARD_PROPS.url)).toHaveStyle({ color: '#040403' })
+    const root = await screen.findByRole('link')
+    // Not the raw accent: the hue is kept, the lightness is replaced with the
+    // stop this side's ink can clear. Painting the extracted colour verbatim is
+    // what MES-1388 was reported for.
+    expect(surfaceOf(root)).not.toBe('')
+    expect(root).not.toHaveStyle({ backgroundColor: ACCENT })
+    expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
   })
 
-  it('picks light text on a dark accent', async () => {
+  it('derives a pale surface for the receiver and inks it near-black', async () => {
     renderWithProviders(
-      <LinkAttachment.Sent {...CARD_PROPS} accentColor="#7008E7" />
+      <LinkAttachment.Received {...CARD_PROPS} accentColor={ACCENT} />
     )
-    expect(await screen.findByText(CARD_PROPS.title)).toHaveStyle({
-      color: '#FFFFFF',
-    })
+    const root = await screen.findByRole('link')
+    expect(surfaceOf(root)).not.toBe('')
+    expect(root).not.toHaveStyle({ backgroundColor: ACCENT })
+    expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#040403' })
+  })
+
+  it('colours both sides from one extracted colour, never rejecting it', async () => {
+    // The pale report colour and the vivid one both paint, on both sides — the
+    // feature adds colour to every card with an image rather than half of them.
+    for (const accentColor of [ACCENT, PALE_ACCENT]) {
+      const sent = renderWithProviders(
+        <LinkAttachment.Sent {...CARD_PROPS} accentColor={accentColor} />
+      )
+      expect(surfaceOf(await screen.findByRole('link'))).not.toBe('')
+      sent.unmount()
+
+      const received = renderWithProviders(
+        <LinkAttachment.Received {...CARD_PROPS} accentColor={accentColor} />
+      )
+      expect(surfaceOf(await screen.findByRole('link'))).not.toBe('')
+      received.unmount()
+    }
   })
 
   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(screen.getByText(CARD_PROPS.title).style.color).toBe('')
+    expect(surfaceOf(root)).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
@@ -164,7 +187,8 @@ describe('LinkAttachment accent chin (MES-1349)', () => {
     )
     const root = await screen.findByRole('link')
     expect(root.style.backgroundColor).toBe('')
-    expect(screen.getByText(CARD_PROPS.title).style.color).toBe('')
+    // Ink still comes from the surface — here the sender's fallback fill.
+    expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
   })
 
   it('drops the accent when the hero image fails to load', async () => {
@@ -172,13 +196,13 @@ describe('LinkAttachment accent chin (MES-1349)', () => {
       <LinkAttachment.Sent {...CARD_PROPS} accentColor={ACCENT} />
     )
     const root = await screen.findByRole('link')
-    expect(root).toHaveStyle({ backgroundColor: ACCENT })
+    expect(root.style.backgroundColor).not.toBe('')
 
-    // An accent derived from an image the viewer cannot see is a lie, so the
+    // A surface derived from an image the viewer cannot see is a lie, so the
     // card falls all the way back rather than keeping a colour with no source.
     fireEvent.error(screen.getByRole('img'))
     expect(root.style.backgroundColor).toBe('')
-    expect(screen.getByText(CARD_PROPS.title).style.color).toBe('')
+    expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
   })
 
   it('drops the accent when a playable video poster fails to load', () => {
@@ -198,50 +222,51 @@ describe('LinkAttachment accent chin (MES-1349)', () => {
     const shell = container.querySelector(
       '[class*="select-none"]'
     ) as HTMLElement
-    expect(shell).toHaveStyle({ backgroundColor: ACCENT })
+    expect(shell.style.backgroundColor).not.toBe('')
     expect(container.querySelector('video')).toHaveAttribute('poster')
 
     fireEvent.error(container.querySelector('img') as HTMLImageElement)
 
     expect(shell.style.backgroundColor).toBe('')
-    expect(screen.getByText(CARD_PROPS.title).style.color).toBe('')
+    expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
     // The failed poster is dropped with the accent, so the player falls back to
     // its own first frame instead of retrying a 404.
     expect(container.querySelector('video')).not.toHaveAttribute('poster')
   })
 
-  it('drops the accent on a playable audio card so the audio fill survives', async () => {
-    // The hero collapses to the native player, so the `<img>` never mounts and
-    // `onImageError` can never fire — the gate has to be up front. `CardShell`
-    // applies `accentStyle` as an inline `style`, which would otherwise outrank
-    // `AUDIO_BG_CLASS` and ship a coloured card with no visible source image.
-    // Reachable through Stream, which maps any playable link attachment to
-    // `featured` (`linkCardPropsFromStreamAttachment`).
+  it('derives audio artwork into the surface, and inks the flat fill when there is none', async () => {
+    // MES-1349 refused the accent here because the hero collapses to the native
+    // player and the artwork is never shown. The colour is derived now, so it
+    // cannot mislead about legibility, and artwork is what distinguishes one
+    // track from another — so it paints. Reachable through Stream, which maps
+    // any playable link attachment to `featured`.
     const AUDIO = {
       mimeType: 'audio/mpeg',
       sourceUrl: 'https://cdn.example.com/clip.mp3',
     }
 
-    const { container, unmount } = renderWithProviders(
+    const withArtwork = renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} {...AUDIO} accentColor={ACCENT} />
     )
-    const sent = container.firstElementChild as HTMLElement
-    expect(sent.style.backgroundColor).toBe('')
-    expect(sent.className).toContain(AUDIO_BG_CLASS)
-    expect(screen.getByText(CARD_PROPS.title).style.color).toBe('')
+    const painted = withArtwork.container.firstElementChild as HTMLElement
+    expect(painted.style.backgroundColor).not.toBe('')
     expect(screen.queryByRole('img')).toBeNull()
-    unmount()
+    withArtwork.unmount()
 
-    renderWithProviders(
-      <LinkAttachment.Received
+    // No artwork: the flat audio fill stays, and this is the MES-1388 bug —
+    // `AUDIO_BG_CLASS` is near-white and lands on a *sent* card, whose variant
+    // ink is white. Ink must follow the fill it was given, not the variant.
+    const bare = renderWithProviders(
+      <LinkAttachment.Sent
         {...CARD_PROPS}
         {...AUDIO}
-        accentColor={ACCENT}
+        thumbnailUrl={undefined}
       />
     )
-    const received = await screen.findByTestId('link-attachment')
-    expect(received.style.backgroundColor).toBe('')
-    expect(received.className).toContain(AUDIO_BG_CLASS)
+    const flat = bare.container.firstElementChild as HTMLElement
+    expect(flat.style.backgroundColor).toBe('')
+    expect(flat.className).toContain(AUDIO_BG_CLASS)
+    expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#040403' })
   })
 
   it('drops the accent when the featured hero has no image to show', async () => {
@@ -259,20 +284,25 @@ describe('LinkAttachment accent chin (MES-1349)', () => {
     // 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('')
+    expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
   })
 
   it('normalizes a hashless accent so the background actually paints', async () => {
-    // `parseHex` accepts `738883`; `background-color: 738883` is invalid CSS
-    // and the DOM drops it, while the chin still took `#040403` from the parsed
-    // colour — 1.31:1 near-black on the dark fallback fill.
+    // The extractor returns a bare hex often enough that dropping it would lose
+    // the colour silently — `background-color: 7008E7` is invalid CSS (MES-1349).
+    const hashless = renderWithProviders(
+      <LinkAttachment.Sent {...CARD_PROPS} accentColor="7008E7" />
+    )
+    const derived = (await screen.findByRole('link')).style.backgroundColor
+    expect(derived).not.toBe('')
+    hashless.unmount()
+
     renderWithProviders(
-      <LinkAttachment.Sent {...CARD_PROPS} accentColor="738883" />
+      <LinkAttachment.Sent {...CARD_PROPS} accentColor={ACCENT} />
+    )
+    expect((await screen.findByRole('link')).style.backgroundColor).toBe(
+      derived
     )
-    const root = await screen.findByRole('link')
-    expect(root.style.backgroundColor).not.toBe('')
-    expect(root).toHaveStyle({ backgroundColor: ACCENT })
-    expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#040403' })
   })
 
   it('lets a loading status outrank the audio hero on all three cards', () => {
@@ -318,8 +348,12 @@ describe('LinkAttachment accent chin (MES-1349)', () => {
         groupPosition="end"
       />
     )
-    expect(await screen.findByTestId('link-card-tail')).toHaveStyle({
-      backgroundColor: ACCENT,
+    // The tail paints outside the shell's own box, so it takes the surface as an
+    // inline colour — it has to be the *derived* one or the tail and the card
+    // would disagree.
+    const card = await screen.findByRole('link')
+    expect(screen.getByTestId('link-card-tail')).toHaveStyle({
+      backgroundColor: card.style.backgroundColor,
     })
     unmount()
 

package/src/components/LinkAttachment/components/Composer/Card.tsx

@@ -147,6 +147,7 @@ const ComposerCard: React.FC<ComposerCardProps> = ({
         />
       )}
       <CardBody
+        chinTextColor={chin.chinTextColor}
         variant="dark"
         title={title}
         placeholderTitle={placeholderTitle}
@@ -155,7 +156,6 @@ const ComposerCard: React.FC<ComposerCardProps> = ({
         appIcon={appIcon}
         cta={cta}
         trailingAction={editButton}
-        chinTextColor={chin.chinTextColor}
         isLoading={chin.isLoading}
       />
     </CardShell>

package/src/components/LinkAttachment/components/Received/Card.tsx

@@ -140,13 +140,13 @@ const ReceivedCard: React.FC<ReceivedCardProps> = ({
           />
         )}
         <CardBody
+          chinTextColor={chin.chinTextColor}
           variant="light"
           title={title}
           description={description}
           url={url}
           appIcon={appIcon}
           cta={wrappedCta}
-          chinTextColor={chin.chinTextColor}
           isLoading={chin.isLoading}
         />
       </CardShell>

package/src/components/LinkAttachment/components/Sent/Card.tsx

@@ -121,6 +121,7 @@ const SentCard: React.FC<SentCardProps> = ({
           />
         )}
         <CardBody
+          chinTextColor={chin.chinTextColor}
           variant="dark"
           title={title}
           placeholderTitle={placeholderTitle}
@@ -128,7 +129,6 @@ const SentCard: React.FC<SentCardProps> = ({
           url={url}
           appIcon={appIcon}
           cta={cta}
-          chinTextColor={chin.chinTextColor}
           isLoading={chin.isLoading}
         />
       </CardShell>

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

@@ -14,6 +14,14 @@ export interface CardBodyProps {
   description?: string
   /** Footer URL shown below the description. Ignored when `cta` is set. */
   url?: string
+  /**
+   * Ink for both chin lines, from `chinContrast.inkFor` — measured against the
+   * surface this card actually paints, which may be a derived accent, the audio
+   * strip, or the variant fallback. Replaces the variant's own `text-*` classes
+   * (including their opacity) on both lines, so a card whose surface is not the
+   * variant default still reads (MES-1388).
+   */
+  chinTextColor?: string
   /**
    * Optional 16x16 brand badge rendered before the title (used by Link Apps:
    * Spotify, TikTok, FAQ, Form, etc.).
@@ -23,13 +31,6 @@ export interface CardBodyProps {
   cta?: LinkAttachmentCta
   /** Trailing action rendered on the right of the title/description block. */
   trailingAction?: React.ReactNode
-  /**
-   * Resolved chin text colour for an accent-painted card, from
-   * `chinContrast.chinTextColor`. When set it replaces the variant's own
-   * `text-*` classes (including their opacity) on both lines, because the
-   * WCAG proof only holds for the two full-opacity candidates.
-   */
-  chinTextColor?: string
   /** Renders two neutral pulsing bars in place of the text. */
   isLoading?: boolean
 }
@@ -69,6 +70,7 @@ const SKELETON_BAR_CLASS_BY_VARIANT: Record<LinkAttachmentVariant, string> = {
  */
 const CardBody: React.FC<CardBodyProps> = ({
   variant,
+  chinTextColor,
   title,
   placeholderTitle,
   description,
@@ -76,7 +78,6 @@ const CardBody: React.FC<CardBodyProps> = ({
   appIcon,
   cta,
   trailingAction,
-  chinTextColor,
   isLoading = false,
 }) => {
   const isDark = variant === 'dark'
@@ -107,8 +108,6 @@ const CardBody: React.FC<CardBodyProps> = ({
     chinTextColor == null && SECONDARY_CLASS_BY_VARIANT[variant]
   )
 
-  const chinTextStyle = chinTextColor ? { color: chinTextColor } : undefined
-
   if (isLoading) {
     const barClass = classNames(
       'animate-pulse rounded',
@@ -126,6 +125,8 @@ const CardBody: React.FC<CardBodyProps> = ({
     )
   }
 
+  const chinTextStyle = chinTextColor ? { color: chinTextColor } : undefined
+
   return (
     <div className="shrink-0 px-4 py-3">
       <div className="flex items-end gap-3">

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

@@ -110,7 +110,13 @@ const CardShell: React.FC<CardShellProps> = ({
     // 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'),
+    //
+    // Both values are the plain message bubble's own fill, so a card with no
+    // usable accent matches the text bubbles around it: `#1e2330` is
+    // `--str-chat__own-message-bubble-background-color` and `#f1f0ee` is
+    // `--str-chat__message-bubble-background-color`. Mirrored in
+    // `chinContrast.BUBBLE_BG_BY_VARIANT`, which the bubble tail reads.
+    bgClassName ?? (variant === 'dark' ? 'bg-[#1e2330]' : 'bg-[#f1f0ee]'),
     // `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

@@ -70,7 +70,16 @@ export const isPlayableMedia = (mimeType?: string, sourceUrl?: string) => {
  * Background colour the LinkAttachment cards switch to when the source is
  * audio — flat neutral around the native `<audio>` chrome regardless of
  * the dark / light variant.
+ *
+ * The hex is exported alongside the class because the card's ink is chosen by
+ * measuring contrast against whatever surface it lands on, and contrast needs
+ * channels rather than a class name. They are written out twice on purpose:
+ * Tailwind only generates utilities it can find as complete literals when it
+ * scans `dist`, so building the class from the constant
+ * (`` `bg-[${AUDIO_BG}]` ``) would emit nothing at all. `chinContrast.test.ts`
+ * asserts the two stay in step.
  */
+export const AUDIO_BG = '#F2F3F4'
 export const AUDIO_BG_CLASS = 'bg-[#F2F3F4]'
 
 /**

package/src/components/LinkAttachment/components/_shared/accentSurface.test.ts

@@ -0,0 +1,151 @@
+import { describe, expect, it } from 'vitest'
+
+import { accentSurface } from './accentSurface'
+import {
+  contrastRatio,
+  inkFor,
+  INK_ON_DARK,
+  INK_ON_LIGHT,
+  WCAG_AA_NORMAL_TEXT,
+} from './chinContrast'
+
+/** OKLab a/b of a hex — hue angle and chroma both come off this pair. */
+function oklabAb(hex: string): [number, number] {
+  const [red, green, blue] = [1, 3, 5].map((index) => {
+    const channel = Number.parseInt(hex.slice(index, index + 2), 16) / 255
+    return channel <= 0.04045
+      ? channel / 12.92
+      : ((channel + 0.055) / 1.055) ** 2.4
+  })
+  const long = Math.cbrt(
+    0.4122214708 * red + 0.5363325363 * green + 0.0514459929 * blue
+  )
+  const medium = Math.cbrt(
+    0.2119034982 * red + 0.6806995451 * green + 0.1073969566 * blue
+  )
+  const short = Math.cbrt(
+    0.0883024619 * red + 0.2817188376 * green + 0.6299787005 * blue
+  )
+  return [
+    1.9779984951 * long - 2.428592205 * medium + 0.4505937099 * short,
+    0.0259040371 * long + 0.7827717662 * medium - 0.808675766 * short,
+  ]
+}
+
+function hueOf(hex: string): number {
+  const [a, b] = oklabAb(hex)
+  return ((Math.atan2(b, a) * 180) / Math.PI + 360) % 360
+}
+
+function chromaOf(hex: string): number {
+  return Math.hypot(...oklabAb(hex))
+}
+
+/** Hues far enough apart to be visibly different colours. */
+const SAMPLES = [
+  '#7008E7', // violet — chroma well outside sRGB at both stops
+  '#2FCB5F', // green
+  '#FFF099', // pale yellow
+  '#00B6FF', // cyan
+  '#738883', // the Figma mock's desaturated green
+  '#FCF5E3', // the near-white from the MES-1388 report
+  '#1e2330', // already as dark as the sender fallback
+  '#767676', // fully neutral, zero chroma
+]
+
+describe('accentSurface', () => {
+  it('always produces a surface its own ink can clear AA on', () => {
+    // The whole point of deriving rather than admitting: no extracted colour is
+    // ever rejected for contrast, and none is ever illegible.
+    for (const sample of SAMPLES) {
+      for (const [variant, ink] of [
+        ['dark', INK_ON_DARK],
+        ['light', INK_ON_LIGHT],
+      ] as const) {
+        const surface = accentSurface(sample, variant)
+        expect(surface, `${sample} on ${variant}`).toBeDefined()
+        expect(
+          contrastRatio(surface as string, ink),
+          `${sample} on ${variant}`
+        ).toBeGreaterThanOrEqual(WCAG_AA_NORMAL_TEXT)
+        // And the ink the card will actually pick agrees with that side.
+        expect(inkFor(surface as string)).toBe(ink)
+      }
+    }
+  })
+
+  it('keeps the image hue so different links stay distinguishable', () => {
+    for (const sample of SAMPLES) {
+      // Hue is only meaningful above a little chroma: `#FCF5E3` and `#767676`
+      // are near-neutral, where the angle is numerically unstable and invisible.
+      if (chromaOf(sample) < 0.03) continue
+      const expected = hueOf(sample)
+      for (const variant of ['dark', 'light'] as const) {
+        const surface = accentSurface(sample, variant) as string
+        const drift = Math.abs(hueOf(surface) - expected)
+        expect(
+          Math.min(drift, 360 - drift),
+          `${sample} ${variant}`
+        ).toBeLessThan(2)
+      }
+    }
+  })
+
+  it('separates the two sides, so each is legible under its own ink', () => {
+    // Sent lands dark, received pale — the same link, the same hue, opposite
+    // ends of the lightness axis because the inks are opposites.
+    for (const sample of SAMPLES) {
+      const sent = accentSurface(sample, 'dark') as string
+      const received = accentSurface(sample, 'light') as string
+      expect(contrastRatio(sent, INK_ON_DARK)).toBeGreaterThan(
+        contrastRatio(sent, INK_ON_LIGHT)
+      )
+      expect(contrastRatio(received, INK_ON_LIGHT)).toBeGreaterThan(
+        contrastRatio(received, INK_ON_DARK)
+      )
+    }
+  })
+
+  it('holds AA at every hue, at chroma beyond what sRGB can show', () => {
+    // Sweeps the failure mode that a fixed lightness stop could plausibly have:
+    // a hue whose maximum chroma pushes the derived colour out of gamut.
+    for (let hue = 0; hue < 360; hue += 15) {
+      const vivid = `#${[0, 120, 240]
+        .map((offset) =>
+          Math.round(127 + 127 * Math.cos(((hue + offset) * Math.PI) / 180))
+            .toString(16)
+            .padStart(2, '0')
+        )
+        .join('')}`
+      for (const [variant, ink] of [
+        ['dark', INK_ON_DARK],
+        ['light', INK_ON_LIGHT],
+      ] as const) {
+        const surface = accentSurface(vivid, variant)
+        expect(
+          contrastRatio(surface as string, ink),
+          `hue ${hue} on ${variant}`
+        ).toBeGreaterThanOrEqual(WCAG_AA_NORMAL_TEXT)
+      }
+    }
+  })
+
+  it('accepts the shapes the extractor and CSS disagree about', () => {
+    // `accent_color` arrives from the ugc-kit query as a bare hex often enough
+    // that a missing `#` must not silently drop the colour.
+    expect(accentSurface('7008E7', 'dark')).toBe(
+      accentSurface('#7008E7', 'dark')
+    )
+    expect(accentSurface('  #7008E7  ', 'dark')).toBe(
+      accentSurface('#7008E7', 'dark')
+    )
+    expect(accentSurface('#70E', 'dark')).toBeDefined()
+  })
+
+  it('has no surface when there was no colour to derive from', () => {
+    expect(accentSurface(undefined, 'dark')).toBeUndefined()
+    expect(accentSurface('', 'dark')).toBeUndefined()
+    expect(accentSurface('rebeccapurple', 'dark')).toBeUndefined()
+    expect(accentSurface('#ff', 'light')).toBeUndefined()
+  })
+})