@linktr.ee/messaging-react 4.0.2 → 4.0.3-rc-1786434864

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CySvYnYr.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-BMcKJFQs.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-wbdGLZCu.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.0.2",
+  "version": "4.0.3-rc-1786434864",
   "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-1786434864",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/ChannelHeader.tsx

@@ -135,11 +135,13 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({
                 </span>
               )}
               {showStarBadge && (
-                <span
-                  aria-label="Starred conversation"
-                  className="flex size-4 shrink-0 items-center justify-center rounded-full bg-[#FFD60A] text-white"
-                >
-                  <StarIcon className="size-2.5" weight="fill" />
+                <span className="messaging-header-star-badge flex overflow-hidden">
+                  <span
+                    aria-label="Starred conversation"
+                    className="flex size-4 shrink-0 items-center justify-center rounded-full bg-[#FFD60A] text-white"
+                  >
+                    <StarIcon className="size-2.5" weight="fill" />
+                  </span>
                 </span>
               )}
               {onParticipantNameClick && (

package/src/styles.css

@@ -48,6 +48,8 @@
 @import 'stream-chat-react/dist/css/v2/index.css';
 
 .str-chat {
+  interpolate-size: allow-keywords;
+
   /* Inherit the host's font instead of stream-chat-react's hardcoded system stack.
    In admin (federation host) this resolves to Link Sans; on linktr.ee profile
    pages it resolves to the creator's profile font. */
@@ -61,6 +63,24 @@
   --str-chat__own-message-bubble-color: #fff;
 }
 
+/* Channel-header starred badge: grow the name pill open when the star appears.
+   @starting-style animates width 0 → auto on insertion (enter only — unstar
+   removes the node, which snaps). Chrome/Edge 129+; elsewhere it just appears. */
+.messaging-header-star-badge {
+  width: calc-size(auto, size);
+  transition: width 250ms;
+}
+@starting-style {
+  .messaging-header-star-badge {
+    width: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .messaging-header-star-badge {
+    transition: none;
+  }
+}
+
 .messaging-channel-message-list--floating .str-chat__message-list-scroll {
   padding-bottom: calc(var(--messaging-composer-height, 9rem) + 1.25rem);
 }