@linktr.ee/messaging-react 4.0.0 → 4.0.1-rc-1786428994

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-B0CZqFER.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.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;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.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-JMYJWHTI.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.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;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.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as r, f as l, L as g, h as c, M, i as h, j as L, k as u, l as d, R as p, m as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, o as y, x as z, y as S, z as q, B, D, E, G as R } from "./index-Dyxu8r07.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as r, f as l, L as g, h as c, M, i as h, j as L, k as u, l as d, R as p, m as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, o as y, x as z, y as S, z as q, B, D, E, G as R } from "./index-BMcKJFQs.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.0.0",
+  "version": "4.0.1-rc-1786428994",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "^2.4.0",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1786428994",
     "@linktr.ee/messaging-taxonomy": "^0.9.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/RichCard/RichCardBody.tsx

@@ -21,9 +21,14 @@ export interface RichCardBodyProps {
 // Mirror LinkAttachment's `CardBody` type scales so the two cards read
 // identically (14/20 medium title, 12/16 subtitle). Colour is always supplied
 // via `chinTextColor`, so no per-variant text class is needed here.
+// `[text-wrap:balance]` evens the title's line lengths so a two-line title
+// doesn't drop a single word onto its own line; `[text-wrap:pretty]` does the
+// lighter last-line-widow fix for the longer subtitle prose. Arbitrary-property
+// form so the utilities generate regardless of the consumer's Tailwind version.
 const TITLE_CLASS =
-  'line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.28px]'
-const SUBTITLE_CLASS = 'text-[12px] leading-4 tracking-[0.24px]'
+  'line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.28px] [text-wrap:balance]'
+const SUBTITLE_CLASS =
+  'text-[12px] leading-4 tracking-[0.24px] [text-wrap:pretty]'
 
 /**
  * The action footer. `layout` (chosen by the first action's `variant` in

package/src/components/RichCard/RichCardImages.tsx

@@ -33,10 +33,14 @@ const FAN_ROTATION: Record<1 | 2 | 3, number[]> = {
   2: [-10, 10],
   3: [-13, 0, 13],
 }
+// Offsets sit a hair inside the mobile renderer's so the outer tiles' rotated
+// bounding box stays within the 290px shell's `overflow-hidden` edge (a `w-62%`
+// tile at ±40 + 13° rotation lands ~6px shy of the boundary, vs the old ±44
+// which clipped).
 const FAN_OFFSET_PX: Record<1 | 2 | 3, number[]> = {
   1: [0],
-  2: [-30, 30],
-  3: [-44, 0, 44],
+  2: [-26, 26],
+  3: [-40, 0, 40],
 }
 // Paint z-order per slot so the **centre** card sits on top. Survivors render
 // left→right, so with the naive `zIndex: position` the right card overlaps the
@@ -110,14 +114,21 @@ const RichCardFan: React.FC<{
           loading="lazy"
           decoding="async"
           onError={() => setFailed((prev) => ({ ...prev, [index]: true }))}
-          // A uniform, slightly-landscape tile (`h-74% w-66%`) with `object-cover`
-          // so the fan stays tidy whatever the source thumbnails are (OG scrape,
-          // upload, video frame) — the tiles are decorative, so an even cover
-          // crop reads better than per-image aspect. `rounded-[12px]` explicit,
-          // NOT `rounded-xl` — this preset's `xl` radius is 4rem, which rounds a
-          // tile into an oval. A soft drop shadow (no border) separates the
-          // overlapping tiles.
-          className="absolute left-1/2 top-1/2 h-[74%] w-[66%] rounded-[12px] object-cover shadow-lg"
+          // A uniform, slightly-landscape tile (`w-62% aspect-[3/2]`, matching
+          // the mobile renderer) with `object-cover` so the fan stays tidy
+          // whatever the source thumbnails are (OG scrape, upload, video frame)
+          // — the tiles are decorative, so an even cover crop reads better than
+          // per-image aspect. `rounded-[12px]` explicit, NOT `rounded-xl` — this
+          // preset's `xl` radius is 4rem, which rounds a tile into an oval.
+          // `bg-[#ffffff]` gives each tile an opaque holder so a transparent
+          // (PNG/WebP) source composites over white instead of letting the
+          // fan-region tint and the tiles beneath bleed through — and so the
+          // drop shadow reads against a solid card, not the see-through image.
+          // Arbitrary hex, not `bg-white`, since this package ships no Tailwind
+          // utilities and consumers scan `dist` against their own theme (same
+          // reason CardShell uses `bg-[#…]`). `shadow-md` (not `shadow-lg`)
+          // keeps the elevation subtle, matching mobile's `Shadow100`.
+          className="absolute left-1/2 top-1/2 w-[62%] aspect-[3/2] rounded-[12px] bg-[#ffffff] object-cover shadow-md"
           style={{
             transform: `translate(-50%, -50%) translateX(${offsets[position]}px) rotate(${rotations[position]}deg) scale(${scales[position]})`,
             zIndex: zorder[position],