@linktr.ee/messaging-react 3.36.0 → 3.37.0-rc-1786161722

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -1698,8 +1698,9 @@ export declare interface RichCardActionButton {
     onClick?: () => void;
     /**
      * Button emphasis. The **first** action's variant drives the footer layout:
-     * `primary` → a stacked full-width button; `secondary` → an inline compact
-     * row. Defaults to `primary`.
+     * `primary` → a stacked full-width button below the copy; `secondary` → a row
+     * in the chin with the copy on the left and the action pinned right. Defaults
+     * to `primary`.
      */
     variant?: 'primary' | 'secondary';
 }

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 h, k as L, l as d, m as p, R 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, x as y, o as z, y as B, z as S, B as q, D, E, G as R, H as V, I as w } from "./index-CrdAtOBl.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 h, k as L, l as d, m as p, R 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, x as y, o as z, y as B, z as S, B as q, D, E, G as R, H as V, I as w } from "./index-DGmVyxHy.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.36.0",
+  "version": "3.37.0-rc-1786161722",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.4.0",
-    "@linktr.ee/messaging-taxonomy": "^0.8.0",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1786161722",
+    "@linktr.ee/messaging-taxonomy": "^0.9.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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

@@ -58,11 +58,22 @@ const CardCta: React.FC<CardCtaProps> = ({
   const emphasis: CtaEmphasis = cta.variant ?? 'primary'
   const className = classNames(
     'inline-flex h-10 items-center justify-center rounded-full px-4 text-sm font-medium leading-none transition-colors',
-    fullWidth && 'w-full',
+    fullWidth ? 'w-full' : 'min-w-0',
     !standalone && 'mt-2',
     BUTTON_CLASS_BY_VARIANT[variant][emphasis]
   )
 
+  // A content-width button (RichCard's `secondary` row, which sits beside the
+  // copy in a fixed-width card) can be squeezed by a long or localized label —
+  // truncate to an ellipsis instead of overflowing and getting clipped by the
+  // card. The full-width button (LinkAttachment's default) spans its own row
+  // and never needs this, so it is left exactly as-is.
+  const labelNode = fullWidth ? (
+    cta.label
+  ) : (
+    <span className="min-w-0 truncate">{cta.label}</span>
+  )
+
   // Mirror the URL normalization used by the shell anchor so bare
   // hostnames (e.g. `tr.ee/foo`) open as external links rather than
   // resolving against the current host.
@@ -82,7 +93,7 @@ const CardCta: React.FC<CardCtaProps> = ({
         }}
         className={`${className} no-underline`}
       >
-        {cta.label}
+        {labelNode}
       </a>
     )
   }
@@ -96,7 +107,7 @@ const CardCta: React.FC<CardCtaProps> = ({
       }}
       className={className}
     >
-      {cta.label}
+      {labelNode}
     </button>
   )
 }

package/src/components/RichCard/RichCard.test.tsx

@@ -161,14 +161,16 @@ describe('RichCard', () => {
         ]}
       />
     )
-    const link = await screen.findByText('Shop now')
-    expect(link.tagName).toBe('A')
+    // Secondary labels render inside a truncating span, so resolve the anchor/
+    // button from the label node.
+    const link = (await screen.findByText('Shop now')).closest('a')
+    expect(link).not.toBeNull()
     expect(link).toHaveAttribute('href', 'https://tr.ee/x')
     expect(link).toHaveAttribute('target', '_blank')
 
-    const button = screen.getByText('Set up')
-    expect(button.tagName).toBe('BUTTON')
-    fireEvent.click(button)
+    const button = screen.getByText('Set up').closest('button')
+    expect(button).not.toBeNull()
+    fireEvent.click(button as HTMLButtonElement)
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
@@ -191,6 +193,32 @@ describe('RichCard', () => {
       />
     )
     // Secondary → inline, content-width button (no w-full).
-    expect(screen.getByText('Shop now')).not.toHaveClass('w-full')
+    expect(screen.getByText('Shop now').closest('a')).not.toHaveClass('w-full')
+  })
+
+  it('lays a secondary chin out as a row: copy left, action right', async () => {
+    const { rerender } = renderWithProviders(
+      <RichCard.Received
+        title="Test collection"
+        subtitle="Collection of 3 links"
+        images={[HERO, IMG_2, IMG_3]}
+        actions={[{ label: 'Open', href: 'tr.ee/c', variant: 'secondary' }]}
+      />
+    )
+    // The action shares one justify-between row with the title/subtitle copy.
+    const link = await screen.findByText('Open')
+    const row = link.closest('.justify-between')
+    expect(row).not.toBeNull()
+    expect(row?.textContent).toContain('Test collection')
+
+    // Primary stays stacked below the copy — no chin row.
+    rerender(
+      <RichCard.Received
+        title="Welcome"
+        images={[HERO]}
+        actions={[{ label: 'Set up', variant: 'primary' }]}
+      />
+    )
+    expect(screen.getByText('Set up').closest('.justify-between')).toBeNull()
   })
 })

package/src/components/RichCard/RichCardBody.tsx

@@ -25,24 +25,33 @@ const TITLE_CLASS = 'line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.
 const SUBTITLE_CLASS = 'text-[12px] leading-4 tracking-[0.24px]'
 
 /**
- * Footer of action buttons. The **first** action's `variant` picks the layout:
- * `primary` → stacked full-width buttons; `secondary` → an inline compact row.
- * Each button still paints in its own emphasis. Returns `null` when there are
- * no actions.
+ * The action footer. `layout` (chosen by the first action's `variant` in
+ * {@link RichCardBody}) picks the presentation: `stacked` (`primary`) →
+ * full-width buttons stacked below the copy; `row` (`secondary`) → content-width
+ * buttons pinned to the right of the chin row (`shrink-0`, so they never
+ * compress the title/subtitle). Each button still paints in its own emphasis.
+ * Returns `null` when there are no actions.
  */
 const RichCardFooter: React.FC<{
   surface: LinkAttachmentVariant
   actions?: RichCardActionButton[]
-}> = ({ surface, actions }) => {
+  layout: 'stacked' | 'row'
+}> = ({ surface, actions, layout }) => {
   if (actions == null || actions.length === 0) return null
 
-  const inline = (actions[0].variant ?? 'primary') === 'secondary'
+  const stacked = layout === 'stacked'
 
   return (
     <div
       className={classNames(
-        'mt-3 flex gap-2',
-        inline ? 'flex-row flex-wrap' : 'flex-col'
+        'flex gap-2',
+        // `row` is capped (`max-w-[60%]`) and shrinkable (`min-w-0`) so a long
+        // or localized secondary label can never grow the footer past the
+        // card's width; the button truncates within it and the copy yields
+        // first. `stacked` keeps the full-width buttons-below layout.
+        stacked
+          ? 'mt-3 flex-col'
+          : 'min-w-0 max-w-[60%] flex-row flex-wrap justify-end'
       )}
     >
       {actions.map((action, index) => (
@@ -50,7 +59,7 @@ const RichCardFooter: React.FC<{
           key={`${action.label}-${index}`}
           variant={surface}
           cta={action}
-          fullWidth={!inline}
+          fullWidth={stacked}
           standalone
         />
       ))}
@@ -90,32 +99,49 @@ const RichCardBody: React.FC<RichCardBodyProps> = ({
         }
       : chinTextStyle
 
-  return (
-    <div className="shrink-0 px-4 py-3">
-      <div className="flex min-w-0 flex-col gap-[2px]">
-        {hasTitle && (
-          <div className="flex min-w-0 items-center gap-2">
-            {appIcon ? <span className="shrink-0">{appIcon}</span> : null}
-            <p className={classNames('min-w-0', TITLE_CLASS)} style={chinTextStyle}>
-              {title}
-            </p>
-          </div>
-        )}
+  // A secondary primary-action lays out as a row (copy left, action right);
+  // primary stacks the button full-width below the copy.
+  const inline =
+    hasActions && (actions?.[0]?.variant ?? 'primary') === 'secondary'
 
-        {hasSubtitle && (
-          <p
-            className={classNames(
-              SUBTITLE_CLASS,
-              subtitleLines <= 1 && 'truncate'
-            )}
-            style={subtitleStyle}
-          >
-            {subtitle}
+  const textBlock = (
+    <div className="flex min-w-0 flex-1 flex-col gap-[2px]">
+      {hasTitle && (
+        <div className="flex min-w-0 items-center gap-2">
+          {appIcon ? <span className="shrink-0">{appIcon}</span> : null}
+          <p className={classNames('min-w-0', TITLE_CLASS)} style={chinTextStyle}>
+            {title}
           </p>
-        )}
-      </div>
+        </div>
+      )}
+
+      {hasSubtitle && (
+        <p
+          className={classNames(
+            SUBTITLE_CLASS,
+            subtitleLines <= 1 && 'truncate'
+          )}
+          style={subtitleStyle}
+        >
+          {subtitle}
+        </p>
+      )}
+    </div>
+  )
 
-      <RichCardFooter surface={ctaSurface} actions={actions} />
+  return (
+    <div className="shrink-0 px-4 py-3">
+      {inline ? (
+        <div className="flex items-center justify-between gap-3">
+          {textBlock}
+          <RichCardFooter surface={ctaSurface} actions={actions} layout="row" />
+        </div>
+      ) : (
+        <>
+          {textBlock}
+          <RichCardFooter surface={ctaSurface} actions={actions} layout="stacked" />
+        </>
+      )}
     </div>
   )
 }

package/src/components/RichCard/RichCardImages.tsx

@@ -32,12 +32,27 @@ const FAN_BG: Record<LinkAttachmentVariant, string> = {
 const FAN_ROTATION: Record<1 | 2 | 3, number[]> = {
   1: [0],
   2: [-10, 10],
-  3: [-15, 0, 15],
+  3: [-13, 0, 13],
 }
 const FAN_OFFSET_PX: Record<1 | 2 | 3, number[]> = {
   1: [0],
-  2: [-34, 34],
-  3: [-58, 0, 58],
+  2: [-30, 30],
+  3: [-44, 0, 44],
+}
+// 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
+// middle; here the centre (slot 1 of a 3-fan) gets the highest layer.
+const FAN_ZORDER: Record<1 | 2 | 3, number[]> = {
+  1: [0],
+  2: [0, 1],
+  3: [1, 3, 2],
+}
+// The centre card of a 3-fan is nudged larger so it reads as the top of the
+// stack rather than one of three equals (mirrors the collection design).
+const FAN_SCALE: Record<1 | 2 | 3, number[]> = {
+  1: [1],
+  2: [1, 1],
+  3: [1, 1.08, 1],
 }
 
 /**
@@ -75,6 +90,8 @@ const RichCardFan: React.FC<{
   ) as 1 | 2 | 3
   const rotations = FAN_ROTATION[count]
   const offsets = FAN_OFFSET_PX[count]
+  const zorder = FAN_ZORDER[count]
+  const scales = FAN_SCALE[count]
 
   return (
     <div
@@ -95,13 +112,17 @@ const RichCardFan: React.FC<{
           loading="lazy"
           decoding="async"
           onError={() => setFailed((prev) => ({ ...prev, [index]: true }))}
-          // `rounded-[12px]` explicit, NOT `rounded-xl` — this preset's `xl`
-          // radius is 4rem, which rounds a small tile into an oval. A soft drop
-          // shadow (no border) separates the overlapping tiles.
-          className="absolute left-1/2 top-1/2 h-[82%] w-[46%] rounded-[12px] object-cover shadow-lg"
+          // 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"
           style={{
-            transform: `translate(-50%, -50%) translateX(${offsets[position]}px) rotate(${rotations[position]}deg)`,
-            zIndex: position,
+            transform: `translate(-50%, -50%) translateX(${offsets[position]}px) rotate(${rotations[position]}deg) scale(${scales[position]})`,
+            zIndex: zorder[position],
           }}
         />
       ))}

package/src/components/RichCard/types.ts

@@ -22,8 +22,9 @@ export interface RichCardActionButton {
   onClick?: () => void
   /**
    * Button emphasis. The **first** action's variant drives the footer layout:
-   * `primary` → a stacked full-width button; `secondary` → an inline compact
-   * row. Defaults to `primary`.
+   * `primary` → a stacked full-width button below the copy; `secondary` → a row
+   * in the chin with the copy on the left and the action pinned right. Defaults
+   * to `primary`.
    */
   variant?: 'primary' | 'secondary'
 }