@linktr.ee/messaging-react 4.3.1-rc-1787556837 → 4.3.1-rc-1787558724

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-B5ueZK6v.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.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessagingLoggerProvider=e.MessagingLoggerProvider;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.TipMessage=e.TipMessage;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.isTipMessage=e.isTipMessage;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;exports.useMessagingLogger=e.useMessagingLogger;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CRi-q06D.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.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessagingLoggerProvider=e.MessagingLoggerProvider;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.TipMessage=e.TipMessage;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.isTipMessage=e.isTipMessage;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;exports.useMessagingLogger=e.useMessagingLogger;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.3.1-rc-1787556837",
+  "version": "4.3.1-rc-1787558724",
   "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.5.0-rc-1787556837",
+    "@linktr.ee/messaging-core": "2.5.0-rc-1787558724",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },

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

@@ -65,25 +65,25 @@ export interface CardShellProps {
 export const LOADING_LABEL = 'Loading link preview'
 
 const SHELL_CLASS = classNames(
-  // Width is a channel-scoped token: default 290px, but a read-only surface with no
-  // composer (the official channel) sets `--lt-msg-card-width` on its root to widen the
-  // content column (see ChannelView). Consumers that don't set the var keep 290px.
-  // `max-w-full` caps the card to its container so a widened value can never overflow
-  // horizontally on a narrow (sub-393px) viewport — it shrinks to fit instead.
-  'relative w-[var(--lt-msg-card-width,290px)] max-w-full select-none overflow-hidden',
+  // Fluid width, capped by a channel-scoped token: default 395px. A read-only
+  // surface with no composer (the official channel) sets `--lt-msg-card-width`
+  // on its root (see ChannelView). `w-full` fills the content column up to that
+  // cap so a card never overflows a narrower viewport — it shrinks to fit.
+  'relative max-w-[var(--lt-msg-card-width,395px)] w-full select-none overflow-hidden',
   // 20px corners — no token exists for it in the component-library preset,
   // whose radius scale is sm .5rem / md 1rem / lg 1.5rem / xl 4rem.
   'rounded-[20px]'
 )
 
-// The 290x250 lock: the chin takes the height its 1-2 line title needs
+// The 250px height lock: the chin takes the height its 1-2 line title needs
 // (82px at two lines, 62px at one) and the hero absorbs the remainder.
 const FIXED_HEIGHT_CLASS = 'flex h-[250px] flex-col'
 
 /**
- * Outer chrome for every `LinkAttachment.*` card. Matches the 290px x 250px
- * box, 20px corner radius, and borderless / shadowless treatment of the
- * composer and sent instances in Figma.
+ * Outer chrome for every `LinkAttachment.*` card. Matches the 395px-capped
+ * fluid width, 20px corner radius, and borderless / shadowless treatment of
+ * the composer and sent instances in Figma. Featured cards still lock to a
+ * 250px box.
  */
 const CardShell: React.FC<CardShellProps> = ({
   variant,

package/src/components/RichCard/RichCard.stories.tsx

@@ -95,6 +95,13 @@ const COLLECTION: RichCardBaseProps = {
   imagePresentation: 'fan',
   actions: [secondaryLink('View collection', 'tr.ee/briesummer')],
 }
+const NEWLINE_SUBTITLE: RichCardBaseProps = {
+  ...OFFICIAL_WELCOME,
+  title: 'Start every conversation with a personal welcome message!',
+  subtitle:
+    '👋 Say hello as people arrive\n✨ Spark conversations\n💬 Add automated FAQs',
+  subtitleLines: 6,
+}
 
 const bothSides = (props: RichCardBaseProps) => (
   <>
@@ -113,7 +120,8 @@ const bothSides = (props: RichCardBaseProps) => (
  * The three real surfaces that converge on `linktree_rich_card`, each shown
  * Received (light) and Sent (dark). They differ only by knobs: the official
  * welcome card is `hero + primary`; a single-link broadcast is `hero +
- * secondary`; a collection is `fan + secondary`.
+ * secondary`; a collection is `fan + secondary`. A fourth row shows a
+ * newline-separated subtitle (the onboarding result-card shape).
  */
 export const Instances: StoryFn = () => (
   <Table>
@@ -131,65 +139,14 @@ export const Instances: StoryFn = () => (
         <RowLabel>Collection — fan · secondary</RowLabel>
         {bothSides(COLLECTION)}
       </tr>
-    </tbody>
-  </Table>
-)
-Instances.parameters = { chromatic: { disableSnapshot: false } }
-
-/* ── Onboarding result cards ─────────────────────────────────────────── */
-
-const RESULT_WELCOME: RichCardBaseProps = {
-  title: 'Start every conversation with a personal welcome message!',
-  subtitle:
-    '👋 Say hello as people arrive\n✨ Spark conversations\n💬 Add automated FAQs',
-  subtitleLines: 6,
-  images: [IMAGE],
-  imagePresentation: 'hero',
-  actions: [primary('Add yours now')],
-}
-const RESULT_TIPPING: RichCardBaseProps = {
-  title: 'Enable tipping and make money from your biggest supporters!',
-  subtitle:
-    '💕 Give fans a way to support\n💰 Turn support into earnings\n📈 Simple setup, lasting value',
-  subtitleLines: 6,
-  images: [IMAGE],
-  imagePresentation: 'hero',
-  actions: [primary('Enable now')],
-}
-const RESULT_SOCIAL: RichCardBaseProps = {
-  title: 'Invite your social audience to connect with you on Linktree!',
-  subtitle:
-    '🎤 Share it on socials\n🤩 Invite people to message\n🎯 Point conversations to Linktree',
-  subtitleLines: 6,
-  images: [IMAGE],
-  imagePresentation: 'hero',
-  actions: [primary('Start sharing')],
-}
-
-/**
- * The three onboarding result cards from Figma — welcome, tipping, and
- * social audience — each shown Received (light) and Sent (dark).
- */
-export const OnboardingResultCards: StoryFn = () => (
-  <Table>
-    <TableHead columns={['Received (light)', 'Sent (dark)']} />
-    <tbody>
       <tr>
-        <RowLabel>Welcome message</RowLabel>
-        {bothSides(RESULT_WELCOME)}
-      </tr>
-      <tr>
-        <RowLabel>Tipping</RowLabel>
-        {bothSides(RESULT_TIPPING)}
-      </tr>
-      <tr>
-        <RowLabel>Social audience</RowLabel>
-        {bothSides(RESULT_SOCIAL)}
+        <RowLabel>Subtitle with newlines</RowLabel>
+        {bothSides(NEWLINE_SUBTITLE)}
       </tr>
     </tbody>
   </Table>
 )
-OnboardingResultCards.parameters = { chromatic: { disableSnapshot: false } }
+Instances.parameters = { chromatic: { disableSnapshot: false } }
 
 /* ── Image presentation — hero / fan / count default ─────────────────── */
 

package/src/styles.css

@@ -407,7 +407,8 @@
      (MES-1278). Scoped to messages with a single `.str-chat__message-bubble`
      that carries `.str-chat__message-text` — other media still use fixed
      widths and need to go fluid before the same spacing can apply generally. */
-  &:has(.str-chat__message-bubble:only-child .str-chat__message-text) {
+  &:has(.str-chat__message-bubble:only-child .str-chat__message-text),
+  &:has(.messaging-link-card) {
     padding-inline-end: calc(100% / 6);
   }
 }