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

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-ilHx7pIO.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.31.2-rc-1785926144",
+  "version": "3.31.2-rc-1785926721",
   "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.4.0-rc-1785926144",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1785926721",
     "@linktr.ee/messaging-taxonomy": "^0.5.1",
     "@phosphor-icons/react": "^2.1.10"
   },

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

@@ -461,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. 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. Many of
+ * these sit outside sRGB at the surface stops, where the browser gamut-maps.
  */
 const vividHex = (hue: number): string =>
   `#${[0, 120, 240]
@@ -506,10 +506,9 @@ const FALLBACK_BG_CLASS: Record<LinkAttachmentVariant, string> = {
 /**
  * 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.
+ * surface via `oklch(from …)`. A refused accent (`none` / `malformed`) publishes
+ * nothing and shows the fallback fill. The resolved surface hex lives only in
+ * the browser, so the cell labels its input.
  */
 const DerivedSwatch = ({
   accentColor,
@@ -547,9 +546,8 @@ 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.
+ * dense diff target for the derivation. In-gamut inputs (the neutral/edge rows)
+ * are stable; the max-chroma hue-sweep rows depend on the browser's gamut map.
  */
 export const AccentDerivation: StoryFn = () => (
   <div className="min-h-screen w-full bg-[#F9F7F4] p-8">

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

@@ -120,10 +120,9 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
   }
 
   // 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).
+  // not computed by jsdom, so these 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.
   const accentOf = (element: HTMLElement) =>
     element.style.getPropertyValue('--accent')
 
@@ -133,8 +132,8 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
     )
     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).
+    // No inline background: the surface is derived from `--accent` in CSS, the
+    // raw accent is never painted verbatim.
     expect(root.style.backgroundColor).toBe('')
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
   })
@@ -295,8 +294,8 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
 
   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 — `oklch(from 7008E7 …)` never resolves (MES-1349), so
-    // the published `--accent` must carry the `#`.
+    // the colour silently — `oklch(from 7008E7 …)` never resolves, so the
+    // published `--accent` must carry the `#`.
     const hashless = renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} accentColor="7008E7" />
     )

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

@@ -4,10 +4,10 @@ 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).
+   * the same surface as the card in CSS (`styles.css`), or `undefined` to fall
+   * back to this side's plain bubble fill. The tail paints outside the shell's
+   * box and can't inherit its background, so it runs the derivation off its own
+   * `--accent`.
    */
   accentHex?: string
   /** Sender tails hang off the right edge, receiver tails mirror to the left. */

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

@@ -18,7 +18,7 @@ export interface CardBodyProps {
    * 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).
+   * card whose surface is not the variant default still reads.
    */
   chinTextColor?: string
   /**

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

@@ -36,9 +36,9 @@ export interface CardShellProps {
   bgClassName?: string
   /**
    * 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.
+   * `styles.css` derives the card surface from it (`oklch(from …)`) and paints
+   * it over the `bg-[…]` fallback where the browser supports it. `undefined`
+   * keeps the variant / `bgClassName` fill.
    */
   accentHex?: string
   /**
@@ -101,25 +101,20 @@ const CardShell: React.FC<CardShellProps> = ({
     fixedHeight ? FIXED_HEIGHT_CLASS : 'block',
     // 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.
+    // this single class, so a published accent paints over it and an unset one
+    // lands on this 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
-    // `.str-chat`/`.mes-*` CSS — so consumers generate our classes by scanning
-    // `messaging-react/dist` against *their own* theme. `shade` comes from the
-    // component-library preset that this package builds with; frontyard builds
-    // on the Arbor preset and has no such colour, so `bg-shade` was silently
-    // dropped, the chin rendered transparent, and the own-message `color: white`
-    // left the title and URL invisible (MES-1388). An arbitrary value is
-    // generated from the class name alone and cannot depend on consumer theme.
+    // Must be an arbitrary value, not a theme token: this package ships no
+    // Tailwind utilities, so consumers generate our classes by scanning
+    // `messaging-react/dist` against their own theme. A theme colour a consumer
+    // lacks compiles to nothing and leaves the chin transparent; an arbitrary
+    // value is generated from the class name alone.
     //
     // 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
-    // and mirrored by the bubble tail's own fills in `styles.css`.
+    // `--str-chat__message-bubble-background-color`, 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

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

@@ -11,11 +11,9 @@
 /**
  * `#abc`, `#aabbcc`, or either without the leading `#`.
  *
- * The missing hash is deliberate: the extractor returns bare hexes often enough
- * that rejecting them would silently drop the colour. It is also why `toCssHex`
- * exists — `background-color: 738883` is invalid and the DOM drops it, which is
- * how a card once rendered unaccented while every calculation behind it had
- * succeeded (MES-1349).
+ * The optional hash is deliberate: the extractor returns bare hexes often
+ * enough that rejecting them would drop the colour. It is also why `toCssHex`
+ * exists — `738883` without the `#` is not a valid CSS colour.
  */
 export const HEX_PATTERN = /^#?(?:[0-9a-f]{3}|[0-9a-f]{6})$/i
 

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

@@ -42,13 +42,13 @@ export interface ChinPalette {
   /**
    * Raw extracted colour to publish as the `--accent` custom property on the
    * shell and the tail, or `undefined` when there is no paintable accent. The
-   * hue-preserving lightness swap is done in CSS (`styles.css`) — see MES-1412.
+   * card keeps its hue and swaps the lightness in CSS (`styles.css`).
    */
   accentHex?: string
   /**
    * Ink for both chin lines: white on the sender's dark stop, near-black on the
-   * receiver's pale stop and on the audio strip. Fixed per surface, so no
-   * runtime contrast measurement is needed (the stops clear AA by construction).
+   * receiver's pale stop and on the audio strip. Fixed per surface — the stops
+   * clear AA at every hue.
    */
   chinTextColor: string
   /** True while the card renders as a skeleton. */
@@ -58,33 +58,25 @@ export interface ChinPalette {
 }
 
 /**
- * Resolves a link card's accent-derived colours and tracks hero-image failure.
+ * Resolves the accent a link card publishes and tracks hero-image failure.
  *
  * The accent is a claim about an image the viewer can see, so it only paints
- * when `CardThumbnail` actually mounts that image. Mirroring its branches
- * (`CardThumbnail.tsx:98-160`), the hero is *not* the accent's source when:
+ * when `CardThumbnail` actually mounts that image. Mirroring its branches, the
+ * hero is *not* the accent's source when:
  *
  * - `layout: 'classic'` — there is no hero region at all;
- * - `status` is not `'ready'` — the hero is the pulsing skeleton and there is
- *   no image yet;
+ * - `status` is not `'ready'` — the hero is the pulsing skeleton, no image yet;
  * - `thumbnailUrl` is absent — the hero is the type-icon placeholder, or for a
  *   playable video a bare `bg-black` box with no poster;
  * - the attachment is playable audio — the hero collapses to the native
- *   `<audio>` player and the `<img>` never mounts *even though `thumbnailUrl`
- *   is set*, so `onImageError` can never rescue this one. Left ungated, an
- *   artwork-backed audio link preview shipped a coloured card with no visible
- *   source image, and the accent beat `AUDIO_BG_CLASS` on Sent / Received
- *   because `CardShell` applies it as an inline `style`, which outranks any
- *   `bg-*` class. `ComposerCard` already dodged that by returning early before
- *   it passes `accentStyle`; this is that same rule, stated once instead of
- *   three times (MES-1349);
+ *   `<audio>` player and the `<img>` never mounts even though `thumbnailUrl` is
+ *   set, so `onImageError` can never rescue it and the gate has to be up front;
  * - the image 404s — an accent extracted from something the viewer cannot see.
  *   `onImageError` covers both hero shapes: the `<img>` reports directly, and a
  *   playable video's `poster` (which raises no event of its own) is verified by
  *   the hidden probe image in `CardThumbnail`.
  *
- * Every case falls back to the variant's own fill, which already pairs with
- * the variant's own text colours.
+ * Every excluded case publishes no accent and keeps the variant's own fill.
  */
 export function useChinPalette({
   variant,
@@ -110,30 +102,26 @@ export function useChinPalette({
   // Truthiness rather than `!= null` so this tracks `CardThumbnail`'s own
   // `thumbnailUrl ?` branch, which renders the placeholder for `''` too.
   //
-  // Playable audio stays excluded, as MES-1349 decided: its hero collapses to
-  // the native `<audio>` player, so the artwork never appears and an accent
-  // taken from it would be a claim about an image the viewer cannot see. The
-  // `<img>` never mounts either, so `onImageError` could not withdraw the colour
-  // if the artwork 404'd. Colouring audio cards from their artwork is a change
-  // to the audio tickets (MES-1360 / MES-1361), not to this one.
+  // Playable audio stays excluded: its hero collapses to the native `<audio>`
+  // player, so the artwork never appears and an accent taken from it would claim
+  // an image the viewer cannot see. The `<img>` never mounts either, so
+  // `onImageError` could not withdraw the colour if the artwork 404'd.
   const isAudio = isPlayableAudio(mimeType, sourceUrl)
   const hasHero =
     layout === 'featured' && !!thumbnailUrl && !isAudio && !heroFailed
   const canDerive = hasHero && status === 'ready'
-  // Only a validated hex is published: `accent_color` is always a hex from the
-  // extractor, and CSS would resolve any colour name — narrowing keeps the input
-  // contract the same one the old `accentSurface` enforced. The bare-hex case is
-  // supported because the extractor omits the `#` often enough that dropping it
-  // would silently lose the colour (MES-1349).
+  // Only a validated hex is published: the extracted `accent_color` is always a
+  // hex, and CSS would resolve any colour name, so narrow the input here. Bare
+  // hexes are accepted because the extractor omits the `#` often enough that
+  // rejecting them would silently lose the colour.
   const accentHex =
     canDerive && accentColor != null && HEX_PATTERN.test(accentColor.trim())
       ? toCssHex(accentColor)
       : undefined
 
   // The accent surface and the sender's dark fallback both take white ink; the
-  // pale receiver fallback and the imposed audio strip both take near-black. So
-  // the ink is fixed per surface and needs no runtime contrast — a sent audio
-  // card put white ink on the strip's near-white at 1.13:1 before (MES-1388).
+  // pale receiver fallback and the imposed audio strip both take near-black — so
+  // the ink is fixed per surface.
   const chinTextColor = isAudio ? INK_ON_LIGHT : INK_BY_VARIANT[variant]
 
   return {

package/src/styles.css

@@ -1101,13 +1101,12 @@
   }
 }
 
-/* Derived accent surface for `LinkAttachment` cards (MES-1412). React publishes
-   the raw extracted colour as `--accent`; the hue-preserving lightness swap that
-   used to run in JS (culori) runs natively via relative colour syntax. Only
-   where the syntax resolves and an accent was published does the surface paint —
-   every other browser keeps the plain bubble fill from the card's `bg-[…]` class
-   (the same fallback the old JS guard degraded to). The `--surface-l` stops clear
-   4.5:1 against each side's ink at every hue by construction. */
+/* Derived accent surface for `LinkAttachment` cards. `--accent` is the raw
+   colour extracted from the attachment image; the card keeps its hue and swaps
+   the lightness to this side's `--surface-l` stop. Only paints where the browser
+   resolves relative colour syntax and an accent is set — otherwise the card's
+   `bg-[…]` fallback fill shows through. The stops clear 4.5:1 against each side's
+   ink at every hue. */
 .messaging-link-card[data-variant='dark'] {
   --surface-l: 0.3;
 }
@@ -1121,10 +1120,9 @@
   }
 }
 
-/* Bubble tail for `LinkAttachment` cards (MES-1349). Same 20x23 geometry and
-   mask path as the text-bubble tails above — the difference is that the fill
-   arrives as an inline style, because it is a dominant colour extracted from
-   the attachment image at send time and Tailwind cannot express a runtime hex.
+/* Bubble tail for `LinkAttachment` cards. Same 20x23 geometry and mask path as
+   the text-bubble tails above; the fill is the card's accent surface, derived
+   below from its own `--accent`.
 
    Hand-written here rather than as a toolkit-only Tailwind utility on purpose:
    `styles.css` ships as a built stylesheet that every consumer imports, whereas