@linktr.ee/messaging-react 3.31.1 → 3.31.2-rc-1785926144

package/dist/index.cjs

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

@@ -696,16 +696,17 @@ export declare interface LinkAttachmentBaseProps {
     /**
      * Dominant colour extracted from `thumbnailUrl`, as a hex string
      * (`#RRGGBB` or `#RGB`). Paints the card and — when the card is the last
-     * bubble in a same-author run — its tail. The card derives its own chin
-     * text colour from this value for WCAG AA contrast; callers never pass a
+     * bubble in a same-author run — its tail. Its hue is kept while the lightness
+     * is swapped to a fixed per-side stop (`oklch(from …)` in `styles.css`); the
+     * stops clear WCAG AA at every hue by construction, so callers never pass a
      * text colour.
      *
      * Only painted while the hero image it was extracted from is actually on
      * 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, 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.
+     * (whose hero is the native player rather than an image), or a hero that fails
+     * to load => the card keeps the plain bubble fill. Browsers without
+     * relative-colour-syntax support also keep that fill (progressive enhancement).
      */
     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-CN3errpB.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-BKkCNnea.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.31.1",
+  "version": "3.31.2-rc-1785926144",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,10 +50,9 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1785926144",
     "@linktr.ee/messaging-taxonomy": "^0.5.1",
-    "@phosphor-icons/react": "^2.1.10",
-    "culori": "^4.0.2"
+    "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.5.0",
@@ -67,7 +66,6 @@
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/culori": "^4",
     "@types/react": "^18.3.24",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.2.1",

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

@@ -7,9 +7,8 @@ import {
 import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
-import { accentSurface } from './components/_shared/accentSurface'
 import type { LinkAttachmentVariant } from './components/_shared/CardShell'
-import { BUBBLE_BG_BY_VARIANT, inkFor } from './components/_shared/chinContrast'
+import { HEX_PATTERN, toCssHex } from './components/_shared/hex'
 
 import LinkAttachment from '.'
 
@@ -388,9 +387,9 @@ const AUDIO_PREVIEW = {
  *   player. The artwork is still handed over as `thumbnailUrl` and there is
  *   still no `<img>`, so `onImageError` can never clear the accent — the gate
  *   has to be up front. These three cells are the regression that prompted the
- *   rule: `accentStyle` is an inline `style` and outranks the `bg-[#F2F3F4]`
- *   audio fill, so a purple card would ship around a native player with the
- *   artwork nowhere in sight.
+ *   rule: the derived surface outranks the `bg-[#F2F3F4]` audio fill, so a
+ *   purple card would ship around a native player with the artwork nowhere in
+ *   sight.
  * - **No `thumbnailUrl`** leaves the type-icon placeholder, which is not an
  *   image the accent could have come from. Stream reaches this whenever a link
  *   preview carries a playable clip but no `image_url`.
@@ -462,8 +461,8 @@ AccentWithoutVisibleHero.parameters = { chromatic: { disableSnapshot: false } }
 
 /**
  * Max-chroma sRGB colour for a hue — three phase-shifted cosines, so stepping
- * the hue walks the wheel at the most saturated triple each hue has. Mirrors
- * the generator `accentSurface.test.ts` sweeps.
+ * the hue walks the wheel at the most saturated triple each hue has. These are
+ * the out-of-gamut extremes where the CSS derivation and the old JS one diverge.
  */
 const vividHex = (hue: number): string =>
   `#${[0, 120, 240]
@@ -479,7 +478,7 @@ const HUE_SWEEP = Array.from({ length: 24 }, (_, i) => ({
   accentColor: vividHex(i * 15),
 }))
 
-// Neutrals and near-limits where the AA gate and the ink flip actually decide
+// Neutrals and near-limits where the ink and the fallback actually decide
 // something, plus the two inputs that must never derive a surface.
 const EDGE_SAMPLES: Array<{ label: string; accentColor?: string }> = [
   { label: 'mock #738883', accentColor: '#738883' },
@@ -492,13 +491,25 @@ const EDGE_SAMPLES: Array<{ label: string; accentColor?: string }> = [
   { label: 'malformed', accentColor: 'rebeccapurple' },
 ]
 
+// Ink is fixed per side — white on the dark stop, near-black on the pale stop.
+const INK_BY_VARIANT: Record<LinkAttachmentVariant, string> = {
+  dark: '#FFFFFF',
+  light: '#040403',
+}
+// The plain bubble fill each side falls back to, as a self-contained arbitrary
+// value (mirrors `CardShell`). The accent rule in `styles.css` paints over it.
+const FALLBACK_BG_CLASS: Record<LinkAttachmentVariant, string> = {
+  dark: 'bg-[#1e2330]',
+  light: 'bg-[#f1f0ee]',
+}
+
 /**
- * One derivation cell: the surface the card would paint for this accent and
- * variant, drawn in the ink `inkFor` picks against it. `accentSurface` and
- * `inkFor` are the only outputs `culori` feeds into the card, so this paints
- * exactly what a colour-library swap could move — with the resolved hex printed
- * so a shift also reads as a text diff. A refused accent shows the variant's
- * fallback fill, tagged.
+ * One derivation cell driven by the *same* CSS the card uses: a
+ * `.messaging-link-card` publishing `--accent`, so `styles.css` derives the
+ * surface via `oklch(from …)`. No JS colour maths — this is exactly the render
+ * path a colour-library swap moves. A refused accent (`none` / `malformed`)
+ * publishes nothing and shows the fallback fill. The resolved surface hex is
+ * the browser's now, not JS's, so only the input is labelled.
  */
 const DerivedSwatch = ({
   accentColor,
@@ -507,17 +518,23 @@ const DerivedSwatch = ({
   accentColor?: string
   variant: LinkAttachmentVariant
 }) => {
-  const surface = accentSurface(accentColor, variant)
-  const painted = surface ?? BUBBLE_BG_BY_VARIANT[variant]
+  const accentHex =
+    accentColor != null && HEX_PATTERN.test(accentColor.trim())
+      ? toCssHex(accentColor)
+      : undefined
   return (
     <div
-      className="flex h-12 flex-col justify-between rounded-md px-2 py-1.5 text-[11px] font-medium"
-      style={{ backgroundColor: painted, color: inkFor(painted) }}
+      className={`messaging-link-card flex h-12 flex-col justify-between rounded-md px-2 py-1.5 text-[11px] font-medium ${FALLBACK_BG_CLASS[variant]}`}
+      data-variant={variant}
+      style={
+        {
+          color: INK_BY_VARIANT[variant],
+          ...(accentHex ? { '--accent': accentHex } : {}),
+        } as React.CSSProperties
+      }
     >
       <span>Yoga on Ice</span>
-      <span className="font-mono opacity-80">
-        {surface ?? `fallback ${painted}`}
-      </span>
+      <span className="font-mono opacity-80">{accentHex ?? 'fallback'}</span>
     </div>
   )
 }
@@ -527,12 +544,12 @@ const GridHead = ({ children }: { children: React.ReactNode }) => (
 )
 
 /**
- * Isolates the colour maths behind the accent chin: for every hue at maximum
- * chroma and every neutral/edge input, the `dark` (Sent) and `light` (Received)
- * surfaces `accentSurface` derives, each in the ink `inkFor` returns for it.
- * One snapshot, no hero pixels — a dense visual companion to the
- * `accentSurface` hue-sweep unit test, so any drift in the derivation shows up
- * as both a colour change and a hex text diff across adjacent rows.
+ * Isolates the accent-chin surface: for every hue at maximum chroma and every
+ * neutral/edge input, the `dark` (Sent) and `light` (Received) surfaces CSS
+ * derives from the published `--accent`. One snapshot, no hero pixels — the
+ * dense diff target for the MES-1412 culori→CSS swap. In-gamut inputs match the
+ * old JS output exactly; the max-chroma hue-sweep rows are where the browser's
+ * gamut clip diverges from culori's `clampChroma`, and will visibly diff.
  */
 export const AccentDerivation: StoryFn = () => (
   <div className="min-h-screen w-full bg-[#F9F7F4] p-8">

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

@@ -119,28 +119,33 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
     thumbnailUrl: 'https://cdn.example.com/yoga.jpg',
   }
 
-  const surfaceOf = (element: HTMLElement) => element.style.backgroundColor
-
-  it('derives a dark surface for the sender and inks it white', async () => {
+  // The colour derivation itself is CSS (`oklch(from …)` in styles.css) and is
+  // not computed by jsdom, so the unit tests assert the *contract* React owns:
+  // the raw extracted hex is published as `--accent` (and dropped when there is
+  // no visible hero), leaving the surface derivation to the browser. Pixel
+  // parity is covered by the `AccentDerivation` Chromatic story (MES-1412).
+  const accentOf = (element: HTMLElement) =>
+    element.style.getPropertyValue('--accent')
+
+  it('publishes the accent for the sender and inks the chin white', async () => {
     renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} accentColor={ACCENT} />
     )
     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(accentOf(root)).toBe(ACCENT)
+    // No inline background: the surface is derived from `--accent` in CSS, not
+    // painted verbatim (painting the raw accent is what MES-1388 reported).
+    expect(root.style.backgroundColor).toBe('')
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
   })
 
-  it('derives a pale surface for the receiver and inks it near-black', async () => {
+  it('publishes the accent for the receiver and inks the chin near-black', async () => {
     renderWithProviders(
       <LinkAttachment.Received {...CARD_PROPS} accentColor={ACCENT} />
     )
     const root = await screen.findByRole('link')
-    expect(surfaceOf(root)).not.toBe('')
-    expect(root).not.toHaveStyle({ backgroundColor: ACCENT })
+    expect(accentOf(root)).toBe(ACCENT)
+    expect(root.style.backgroundColor).toBe('')
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#040403' })
   })
 
@@ -151,13 +156,13 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       const sent = renderWithProviders(
         <LinkAttachment.Sent {...CARD_PROPS} accentColor={accentColor} />
       )
-      expect(surfaceOf(await screen.findByRole('link'))).not.toBe('')
+      expect(accentOf(await screen.findByRole('link'))).toBe(accentColor)
       sent.unmount()
 
       const received = renderWithProviders(
         <LinkAttachment.Received {...CARD_PROPS} accentColor={accentColor} />
       )
-      expect(surfaceOf(await screen.findByRole('link'))).not.toBe('')
+      expect(accentOf(await screen.findByRole('link'))).toBe(accentColor)
       received.unmount()
     }
   })
@@ -165,7 +170,7 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
   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(surfaceOf(root)).toBe('')
+    expect(accentOf(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
@@ -186,8 +191,8 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       <LinkAttachment.Sent {...CARD_PROPS} accentColor="rebeccapurple" />
     )
     const root = await screen.findByRole('link')
-    expect(root.style.backgroundColor).toBe('')
-    // Ink still comes from the surface — here the sender's fallback fill.
+    expect(accentOf(root)).toBe('')
+    // Ink still comes from the side — here the sender's fallback fill.
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
   })
 
@@ -196,12 +201,12 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       <LinkAttachment.Sent {...CARD_PROPS} accentColor={ACCENT} />
     )
     const root = await screen.findByRole('link')
-    expect(root.style.backgroundColor).not.toBe('')
+    expect(accentOf(root)).toBe(ACCENT)
 
     // 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(accentOf(root)).toBe('')
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
   })
 
@@ -222,12 +227,12 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
     const shell = container.querySelector(
       '[class*="select-none"]'
     ) as HTMLElement
-    expect(shell.style.backgroundColor).not.toBe('')
+    expect(shell.style.getPropertyValue('--accent')).toBe(ACCENT)
     expect(container.querySelector('video')).toHaveAttribute('poster')
 
     fireEvent.error(container.querySelector('img') as HTMLImageElement)
 
-    expect(shell.style.backgroundColor).toBe('')
+    expect(shell.style.getPropertyValue('--accent')).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.
@@ -252,7 +257,7 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       <LinkAttachment.Sent {...CARD_PROPS} {...AUDIO} accentColor={ACCENT} />
     )
     const sent = container.firstElementChild as HTMLElement
-    expect(sent.style.backgroundColor).toBe('')
+    expect(sent.style.getPropertyValue('--accent')).toBe('')
     expect(sent.className).toContain(AUDIO_BG_CLASS)
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#040403' })
     expect(screen.queryByRole('img')).toBeNull()
@@ -266,7 +271,7 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       />
     )
     const received = await screen.findByTestId('link-attachment')
-    expect(received.style.backgroundColor).toBe('')
+    expect(received.style.getPropertyValue('--accent')).toBe('')
     expect(received.className).toContain(AUDIO_BG_CLASS)
   })
 
@@ -281,29 +286,27 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       />
     )
     const root = await screen.findByRole('link')
-    expect(root.style.backgroundColor).toBe('')
+    expect(accentOf(root)).toBe('')
     // 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)).toHaveStyle({ color: '#FFFFFF' })
   })
 
-  it('normalizes a hashless accent so the background actually paints', async () => {
+  it('normalizes a hashless accent so the derivation actually resolves', async () => {
     // The extractor returns a bare hex often enough that dropping it would lose
-    // the colour silently — `background-color: 7008E7` is invalid CSS (MES-1349).
+    // the colour silently — `oklch(from 7008E7 …)` never resolves (MES-1349), so
+    // the published `--accent` must carry the `#`.
     const hashless = renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} accentColor="7008E7" />
     )
-    const derived = (await screen.findByRole('link')).style.backgroundColor
-    expect(derived).not.toBe('')
+    expect(accentOf(await screen.findByRole('link'))).toBe('#7008E7')
     hashless.unmount()
 
     renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} accentColor={ACCENT} />
     )
-    expect((await screen.findByRole('link')).style.backgroundColor).toBe(
-      derived
-    )
+    expect(accentOf(await screen.findByRole('link'))).toBe('#7008E7')
   })
 
   it('lets a loading status outrank the audio hero on all three cards', () => {
@@ -349,13 +352,15 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
         groupPosition="end"
       />
     )
-    // 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.
+    // The tail paints outside the shell's own box, so it can't inherit the
+    // shell's computed background — it publishes the same `--accent` and derives
+    // the surface itself in CSS, 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,
-    })
+    const tail = screen.getByTestId('link-card-tail')
+    expect(tail.style.getPropertyValue('--accent')).toBe(
+      card.style.getPropertyValue('--accent')
+    )
+    expect(tail.style.getPropertyValue('--accent')).toBe(ACCENT)
     unmount()
 
     // Mid-run the following bubble owns the tail.
@@ -370,10 +375,13 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
   })
 
   it('falls back to the variant fill for the tail when there is no accent', async () => {
+    // No accent published, so no `--accent`: the tail's `[data-variant='dark']`
+    // rule in styles.css paints the sender's plain `#1e2330` bubble fill (the
+    // computed value isn't observable in jsdom — see the note on `accentOf`).
     renderWithProviders(<LinkAttachment.Sent {...CARD_PROPS} />)
-    expect(await screen.findByTestId('link-card-tail')).toHaveStyle({
-      backgroundColor: '#1e2330',
-    })
+    const tail = await screen.findByTestId('link-card-tail')
+    expect(tail.style.getPropertyValue('--accent')).toBe('')
+    expect(tail).toHaveAttribute('data-variant', 'dark')
   })
 
   it('exposes the loading skeleton as a labelled busy region', async () => {

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

@@ -130,7 +130,7 @@ const ComposerCard: React.FC<ComposerCardProps> = ({
     <CardShell
       variant="dark"
       fixedHeight={!isClassic}
-      accentStyle={chin.accentStyle}
+      accentHex={chin.accentHex}
       busy={chin.isLoading}
       topRight={isClassic ? dismissButton : undefined}
     >

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

@@ -108,7 +108,7 @@ const ReceivedCard: React.FC<ReceivedCardProps> = ({
 
   return (
     <BubbleTail
-      color={chin.tailColor}
+      accentHex={chin.accentHex}
       side="receiver"
       // Only the last card in a same-author run carries the tail; the audio
       // player card is not a bubble, so it never does.
@@ -123,7 +123,7 @@ const ReceivedCard: React.FC<ReceivedCardProps> = ({
         onClick={shellOnClick}
         ariaLabel={title ?? 'Open attachment preview'}
         fixedHeight={layout === 'featured' && audioBg == null}
-        accentStyle={chin.accentStyle}
+        accentHex={chin.accentHex}
         busy={chin.isLoading}
         bgClassName={audioBg}
         data-testid="link-attachment"

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

@@ -92,7 +92,7 @@ const SentCard: React.FC<SentCardProps> = ({
 
   return (
     <BubbleTail
-      color={chin.tailColor}
+      accentHex={chin.accentHex}
       side="sender"
       // Only the last card in a same-author run carries the tail; the audio
       // player card is not a bubble, so it never does.
@@ -105,7 +105,7 @@ const SentCard: React.FC<SentCardProps> = ({
         href={shellHref}
         onClick={shellOnClick}
         fixedHeight={layout === 'featured' && !isAudio}
-        accentStyle={chin.accentStyle}
+        accentHex={chin.accentHex}
         busy={chin.isLoading}
         bgClassName={isAudio ? AUDIO_BG_CLASS : undefined}
       >

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

@@ -3,11 +3,13 @@ import React from 'react'
 
 export interface BubbleTailProps {
   /**
-   * Hex the tail paints in — the card's accent colour, or its variant
-   * fallback fill. Inline rather than a class because the accent is a
-   * runtime value extracted from the attachment image.
+   * Raw extracted accent colour, published as `--accent` so the tail derives
+   * the same surface as the card in CSS (`styles.css`). `undefined` falls the
+   * tail back to this side's plain bubble fill. The tail paints outside the
+   * shell's box, so it can't inherit the shell's computed background — it runs
+   * the derivation itself off its own `--accent` (MES-1412).
    */
-  color: string
+  accentHex?: string
   /** Sender tails hang off the right edge, receiver tails mirror to the left. */
   side: 'sender' | 'receiver'
   /**
@@ -30,13 +32,20 @@ export interface BubbleTailProps {
  * tinted from the text-bubble surface would clash with a coloured card.
  */
 const BubbleTail: React.FC<BubbleTailProps> = ({
-  color,
+  accentHex,
   side,
   visible,
   children,
 }) => {
   if (!visible) return <>{children}</>
 
+  // Sender tails sit on the dark stop, receiver tails on the pale one — the
+  // same mapping the cards use (`SentCard` is `dark`, `ReceivedCard` `light`).
+  const variant = side === 'sender' ? 'dark' : 'light'
+  const accentStyle = accentHex
+    ? ({ '--accent': accentHex } as React.CSSProperties)
+    : undefined
+
   return (
     // `isolate` keeps the tail's negative z-index from escaping behind the
     // thread background; `w-fit` stops the wrapper from stretching in the
@@ -46,7 +55,8 @@ const BubbleTail: React.FC<BubbleTailProps> = ({
       <span
         aria-hidden
         data-testid="link-card-tail"
-        style={{ backgroundColor: color }}
+        data-variant={variant}
+        style={accentStyle}
         className={classNames(
           'messaging-link-card-tail',
           side === 'receiver' && 'messaging-link-card-tail--received'

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

@@ -15,11 +15,10 @@ export interface CardBodyProps {
   /** 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).
+   * Ink for both chin lines, from `useChinPalette` — fixed per surface (white on
+   * the dark stop, near-black on the pale stop and the audio strip). 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
   /**

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

@@ -35,11 +35,12 @@ export interface CardShellProps {
    */
   bgClassName?: string
   /**
-   * Inline background for the dynamic accent colour extracted from the
-   * attachment image. Wins over `bgClassName` / the variant default when
-   * set — Tailwind cannot express a runtime hex.
+   * Raw extracted accent colour, published as the `--accent` custom property.
+   * `styles.css` derives the card surface from it in CSS (`oklch(from …)`) and
+   * paints it over the `bg-[…]` fallback where the browser supports it —
+   * MES-1412. `undefined` keeps the variant / `bgClassName` fill.
    */
-  accentStyle?: React.CSSProperties
+  accentHex?: string
   /**
    * Locks the card to Figma's 250px box and makes it a flex column, so the
    * hero absorbs whatever height the chin leaves. Only the `featured` layout
@@ -88,18 +89,21 @@ const CardShell: React.FC<CardShellProps> = ({
   rootRef,
   topRight,
   bgClassName,
-  accentStyle,
+  accentHex,
   fixedHeight = false,
   busy = false,
   'data-testid': dataTestId,
 }) => {
   const isInteractive = href != null || onClick != null
   const className = classNames(
+    'messaging-link-card',
     SHELL_CLASS,
     fixedHeight ? FIXED_HEIGHT_CLASS : 'block',
-    // 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.
+    // The plain fallback fill, kept underneath the `--accent` derivation: the
+    // `.messaging-link-card[style*='--accent']` rule in `styles.css` outranks
+    // this single class, so a published accent paints over it where the browser
+    // resolves `oklch(from …)`, and an accent that can't (or was never set)
+    // lands on this sane surface.
     //
     // MUST be an arbitrary value, not a theme token. This package ships no
     // Tailwind utilities — `dist/assets/index.css` is only the hand-written
@@ -115,7 +119,7 @@ const CardShell: React.FC<CardShellProps> = ({
     // 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.
+    // and mirrored by the bubble tail's own fills in `styles.css`.
     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
@@ -127,6 +131,12 @@ const CardShell: React.FC<CardShellProps> = ({
     ? { role: 'status', 'aria-busy': true, 'aria-label': LOADING_LABEL }
     : undefined
 
+  // Published as a custom property, not a `background`: the `[style*='--accent']`
+  // rule in `styles.css` keys off its presence and derives the surface in CSS.
+  const accentStyle = accentHex
+    ? ({ '--accent': accentHex } as React.CSSProperties)
+    : undefined
+
   const corner = topRight ? (
     <div className="pointer-events-auto absolute right-3 top-3 z-10">
       {topRight}
@@ -142,6 +152,7 @@ const CardShell: React.FC<CardShellProps> = ({
         rel="noopener noreferrer"
         onClick={onClick}
         data-testid={dataTestId}
+        data-variant={variant}
         className={className}
         style={accentStyle}
         {...busyProps}
@@ -160,6 +171,7 @@ const CardShell: React.FC<CardShellProps> = ({
         onClick={onClick}
         aria-label={ariaLabel}
         data-testid={dataTestId}
+        data-variant={variant}
         className={classNames(className, 'text-left')}
         style={accentStyle}
         {...busyProps}
@@ -174,6 +186,7 @@ const CardShell: React.FC<CardShellProps> = ({
     <div
       ref={rootRef as React.Ref<HTMLDivElement>}
       data-testid={dataTestId}
+      data-variant={variant}
       className={className}
       style={accentStyle}
       {...busyProps}

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

@@ -1,11 +1,11 @@
 /**
- * The hex contract shared by `chinContrast` and `accentSurface`.
+ * The hex contract for the accent colour `useChinPalette` publishes.
  *
- * `culori` does the parsing, and it accepts every CSS colour — including names
- * like `rebeccapurple` and formats with alpha. Every colour reaching these two
- * modules comes from `getDominantColorFromImageUrl` via a Stream attachment
- * field, or from a constant in this directory, so both narrow the input to a hex
- * before handing it over rather than widening their contract by accident.
+ * The extracted `accent_color` (from `getDominantColorFromImageUrl` via a Stream
+ * attachment field) is always a hex, but CSS `oklch(from …)` would resolve any
+ * colour name — including `rebeccapurple` — so the input is narrowed to a hex
+ * before it is published as `--accent`, rather than widening that contract by
+ * accident.
  */
 
 /**
@@ -19,7 +19,7 @@
  */
 export const HEX_PATTERN = /^#?(?:[0-9a-f]{3}|[0-9a-f]{6})$/i
 
-/** Normalizes a hex for CSS and for culori, adding the `#` the extractor omits. */
+/** Normalizes a hex for CSS, adding the `#` the extractor omits. */
 export function toCssHex(hex: string): string {
   const trimmed = hex.trim()
   return trimmed.startsWith('#') ? trimmed : `#${trimmed}`