@linktr.ee/messaging-react 3.31.1-rc-1785925535 → 3.31.1

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -696,17 +696,16 @@ 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. 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
+     * 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
      * 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 => the card keeps the plain bubble fill. Browsers without
-     * relative-colour-syntax support also keep that fill (progressive enhancement).
+     * (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.
      */
     accentColor?: string;
     /**
@@ -1787,32 +1786,13 @@ declare module 'stream-chat' {
          */
         accent_color?: string;
     }
-    interface CustomChannelData {
+    interface CustomChannelData extends LinktreeChannelData {
         /**
-         * Whether the channel has at least one visitor-originated message.
-         * Legacy channels may omit this field.
-         */
-        has_visitor_message?: boolean;
-        /**
-         * Priority score assigned by backend classification for spotlighting.
-         */
-        priority_score?: number;
-        /**
-         * Indicates a paid message is pending creator reply.
-         */
-        pending_earn_message_reply?: boolean;
-        /**
-         * Indicates DM agent has deferred and creator follow-up is needed.
-         */
-        agent_deferred?: boolean;
-        /**
-         * Whether DM agent auto-replies are paused for this channel.
+         * Whether DM agent auto-replies are paused for this channel. Writer-only
+         * field not read by other clients, so it stays local rather than in the
+         * shared {@link LinktreeChannelData} contract.
          */
         chatbot_paused?: boolean;
-        /**
-         * Customer classification tag for this conversation (e.g. CUSTOMER_PAID).
-         */
-        customer_tag?: string;
     }
     interface CustomMemberData {
         /**
@@ -1820,7 +1800,7 @@ declare module 'stream-chat' {
          */
         is_follower?: boolean;
     }
-    interface CustomMessageData {
+    interface CustomMessageData extends LinktreeMessageData {
         /**
          * Message metadata from backend.
          * Contains type and payment information.

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

package/dist/testing.d.ts

@@ -124,32 +124,13 @@ declare module 'stream-chat' {
          */
         accent_color?: string;
     }
-    interface CustomChannelData {
+    interface CustomChannelData extends LinktreeChannelData {
         /**
-         * Whether the channel has at least one visitor-originated message.
-         * Legacy channels may omit this field.
-         */
-        has_visitor_message?: boolean;
-        /**
-         * Priority score assigned by backend classification for spotlighting.
-         */
-        priority_score?: number;
-        /**
-         * Indicates a paid message is pending creator reply.
-         */
-        pending_earn_message_reply?: boolean;
-        /**
-         * Indicates DM agent has deferred and creator follow-up is needed.
-         */
-        agent_deferred?: boolean;
-        /**
-         * Whether DM agent auto-replies are paused for this channel.
+         * Whether DM agent auto-replies are paused for this channel. Writer-only
+         * field not read by other clients, so it stays local rather than in the
+         * shared {@link LinktreeChannelData} contract.
          */
         chatbot_paused?: boolean;
-        /**
-         * Customer classification tag for this conversation (e.g. CUSTOMER_PAID).
-         */
-        customer_tag?: string;
     }
     interface CustomMemberData {
         /**
@@ -157,7 +138,7 @@ declare module 'stream-chat' {
          */
         is_follower?: boolean;
     }
-    interface CustomMessageData {
+    interface CustomMessageData extends LinktreeMessageData {
         /**
          * Message metadata from backend.
          * Contains type and payment information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.31.1-rc-1785925535",
+  "version": "3.31.1",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,9 +50,10 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.4.0-rc-1785925535",
-    "@linktr.ee/messaging-taxonomy": "^0.5.0",
-    "@phosphor-icons/react": "^2.1.10"
+    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-taxonomy": "^0.5.1",
+    "@phosphor-icons/react": "^2.1.10",
+    "culori": "^4.0.2"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.5.0",
@@ -66,6 +67,7 @@
     "@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,8 +7,9 @@ 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 { HEX_PATTERN, toCssHex } from './components/_shared/hex'
+import { BUBBLE_BG_BY_VARIANT, inkFor } from './components/_shared/chinContrast'
 
 import LinkAttachment from '.'
 
@@ -387,9 +388,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: 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.
+ *   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.
  * - **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`.
@@ -461,8 +462,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. These are
- * the out-of-gamut extremes where the CSS derivation and the old JS one diverge.
+ * the hue walks the wheel at the most saturated triple each hue has. Mirrors
+ * the generator `accentSurface.test.ts` sweeps.
  */
 const vividHex = (hue: number): string =>
   `#${[0, 120, 240]
@@ -478,7 +479,7 @@ const HUE_SWEEP = Array.from({ length: 24 }, (_, i) => ({
   accentColor: vividHex(i * 15),
 }))
 
-// Neutrals and near-limits where the ink and the fallback actually decide
+// Neutrals and near-limits where the AA gate and the ink flip 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' },
@@ -491,25 +492,13 @@ 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 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.
+ * 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.
  */
 const DerivedSwatch = ({
   accentColor,
@@ -518,23 +507,17 @@ const DerivedSwatch = ({
   accentColor?: string
   variant: LinkAttachmentVariant
 }) => {
-  const accentHex =
-    accentColor != null && HEX_PATTERN.test(accentColor.trim())
-      ? toCssHex(accentColor)
-      : undefined
+  const surface = accentSurface(accentColor, variant)
+  const painted = surface ?? BUBBLE_BG_BY_VARIANT[variant]
   return (
     <div
-      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
-      }
+      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) }}
     >
       <span>Yoga on Ice</span>
-      <span className="font-mono opacity-80">{accentHex ?? 'fallback'}</span>
+      <span className="font-mono opacity-80">
+        {surface ?? `fallback ${painted}`}
+      </span>
     </div>
   )
 }
@@ -544,12 +527,12 @@ const GridHead = ({ children }: { children: React.ReactNode }) => (
 )
 
 /**
- * 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.
+ * 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.
  */
 export const AccentDerivation: StoryFn = () => (
   <div className="min-h-screen w-full bg-[#F9F7F4] p-8">

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

@@ -119,33 +119,28 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
     thumbnailUrl: 'https://cdn.example.com/yoga.jpg',
   }
 
-  // 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 () => {
+  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} />
     )
     const root = await screen.findByRole('link')
-    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('')
+    // 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('publishes the accent for the receiver and inks the chin near-black', async () => {
+  it('derives a pale surface for the receiver and inks it near-black', async () => {
     renderWithProviders(
       <LinkAttachment.Received {...CARD_PROPS} accentColor={ACCENT} />
     )
     const root = await screen.findByRole('link')
-    expect(accentOf(root)).toBe(ACCENT)
-    expect(root.style.backgroundColor).toBe('')
+    expect(surfaceOf(root)).not.toBe('')
+    expect(root).not.toHaveStyle({ backgroundColor: ACCENT })
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#040403' })
   })
 
@@ -156,13 +151,13 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       const sent = renderWithProviders(
         <LinkAttachment.Sent {...CARD_PROPS} accentColor={accentColor} />
       )
-      expect(accentOf(await screen.findByRole('link'))).toBe(accentColor)
+      expect(surfaceOf(await screen.findByRole('link'))).not.toBe('')
       sent.unmount()
 
       const received = renderWithProviders(
         <LinkAttachment.Received {...CARD_PROPS} accentColor={accentColor} />
       )
-      expect(accentOf(await screen.findByRole('link'))).toBe(accentColor)
+      expect(surfaceOf(await screen.findByRole('link'))).not.toBe('')
       received.unmount()
     }
   })
@@ -170,7 +165,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(accentOf(root)).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
@@ -191,8 +186,8 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       <LinkAttachment.Sent {...CARD_PROPS} accentColor="rebeccapurple" />
     )
     const root = await screen.findByRole('link')
-    expect(accentOf(root)).toBe('')
-    // Ink still comes from the side — here the sender's fallback fill.
+    expect(root.style.backgroundColor).toBe('')
+    // Ink still comes from the surface — here the sender's fallback fill.
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
   })
 
@@ -201,12 +196,12 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       <LinkAttachment.Sent {...CARD_PROPS} accentColor={ACCENT} />
     )
     const root = await screen.findByRole('link')
-    expect(accentOf(root)).toBe(ACCENT)
+    expect(root.style.backgroundColor).not.toBe('')
 
     // 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(accentOf(root)).toBe('')
+    expect(root.style.backgroundColor).toBe('')
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
   })
 
@@ -227,12 +222,12 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
     const shell = container.querySelector(
       '[class*="select-none"]'
     ) as HTMLElement
-    expect(shell.style.getPropertyValue('--accent')).toBe(ACCENT)
+    expect(shell.style.backgroundColor).not.toBe('')
     expect(container.querySelector('video')).toHaveAttribute('poster')
 
     fireEvent.error(container.querySelector('img') as HTMLImageElement)
 
-    expect(shell.style.getPropertyValue('--accent')).toBe('')
+    expect(shell.style.backgroundColor).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.
@@ -257,7 +252,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.getPropertyValue('--accent')).toBe('')
+    expect(sent.style.backgroundColor).toBe('')
     expect(sent.className).toContain(AUDIO_BG_CLASS)
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#040403' })
     expect(screen.queryByRole('img')).toBeNull()
@@ -271,7 +266,7 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       />
     )
     const received = await screen.findByTestId('link-attachment')
-    expect(received.style.getPropertyValue('--accent')).toBe('')
+    expect(received.style.backgroundColor).toBe('')
     expect(received.className).toContain(AUDIO_BG_CLASS)
   })
 
@@ -286,27 +281,29 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       />
     )
     const root = await screen.findByRole('link')
-    expect(accentOf(root)).toBe('')
+    expect(root.style.backgroundColor).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 derivation actually resolves', async () => {
+  it('normalizes a hashless accent so the background actually paints', async () => {
     // The extractor returns a bare hex often enough that dropping it would lose
-    // the colour silently — `oklch(from 7008E7 …)` never resolves (MES-1349), so
-    // the published `--accent` must carry the `#`.
+    // the colour silently — `background-color: 7008E7` is invalid CSS (MES-1349).
     const hashless = renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} accentColor="7008E7" />
     )
-    expect(accentOf(await screen.findByRole('link'))).toBe('#7008E7')
+    const derived = (await screen.findByRole('link')).style.backgroundColor
+    expect(derived).not.toBe('')
     hashless.unmount()
 
     renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} accentColor={ACCENT} />
     )
-    expect(accentOf(await screen.findByRole('link'))).toBe('#7008E7')
+    expect((await screen.findByRole('link')).style.backgroundColor).toBe(
+      derived
+    )
   })
 
   it('lets a loading status outrank the audio hero on all three cards', () => {
@@ -352,15 +349,13 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
         groupPosition="end"
       />
     )
-    // 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.
+    // 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')
-    const tail = screen.getByTestId('link-card-tail')
-    expect(tail.style.getPropertyValue('--accent')).toBe(
-      card.style.getPropertyValue('--accent')
-    )
-    expect(tail.style.getPropertyValue('--accent')).toBe(ACCENT)
+    expect(screen.getByTestId('link-card-tail')).toHaveStyle({
+      backgroundColor: card.style.backgroundColor,
+    })
     unmount()
 
     // Mid-run the following bubble owns the tail.
@@ -375,13 +370,10 @@ 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} />)
-    const tail = await screen.findByTestId('link-card-tail')
-    expect(tail.style.getPropertyValue('--accent')).toBe('')
-    expect(tail).toHaveAttribute('data-variant', 'dark')
+    expect(await screen.findByTestId('link-card-tail')).toHaveStyle({
+      backgroundColor: '#1e2330',
+    })
   })
 
   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}
-      accentHex={chin.accentHex}
+      accentStyle={chin.accentStyle}
       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
-      accentHex={chin.accentHex}
+      color={chin.tailColor}
       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}
-        accentHex={chin.accentHex}
+        accentStyle={chin.accentStyle}
         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
-      accentHex={chin.accentHex}
+      color={chin.tailColor}
       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}
-        accentHex={chin.accentHex}
+        accentStyle={chin.accentStyle}
         busy={chin.isLoading}
         bgClassName={isAudio ? AUDIO_BG_CLASS : undefined}
       >

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

@@ -3,13 +3,11 @@ import React from 'react'
 
 export interface BubbleTailProps {
   /**
-   * 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).
+   * 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.
    */
-  accentHex?: string
+  color: string
   /** Sender tails hang off the right edge, receiver tails mirror to the left. */
   side: 'sender' | 'receiver'
   /**
@@ -32,20 +30,13 @@ export interface BubbleTailProps {
  * tinted from the text-bubble surface would clash with a coloured card.
  */
 const BubbleTail: React.FC<BubbleTailProps> = ({
-  accentHex,
+  color,
   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
@@ -55,8 +46,7 @@ const BubbleTail: React.FC<BubbleTailProps> = ({
       <span
         aria-hidden
         data-testid="link-card-tail"
-        data-variant={variant}
-        style={accentStyle}
+        style={{ backgroundColor: color }}
         className={classNames(
           'messaging-link-card-tail',
           side === 'receiver' && 'messaging-link-card-tail--received'

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

@@ -15,10 +15,11 @@ export interface CardBodyProps {
   /** Footer URL shown below the description. Ignored when `cta` is set. */
   url?: string
   /**
-   * 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).
+   * 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
   /**