@linktr.ee/messaging-react 3.1.3-rc-1780618254 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.1.3-rc-1780618254",
+  "version": "3.1.3",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

package/src/styles.css

@@ -1,59 +1,18 @@
-@layer stream, stream-overrides;
-
 /* Stream Chat base styles */
-@import 'stream-chat-react/dist/css/v2/index.css' layer(stream);
+@import 'stream-chat-react/dist/css/v2/index.css';
 
-@layer stream-overrides {
-  .str-chat {
-    /* Inherit the host's font instead of stream-chat-react's hardcoded system stack.
+.str-chat {
+  /* 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. */
-    --str-chat__font-family: inherit;
-
-    --str-chat__message-bubble-border-radius: 1.5rem;
-    --str-chat__message-bubble-background-color: #f1f0ee;
-    --str-chat__message-bubble-color: #181818;
-
-    --str-chat__own-message-bubble-background-color: #121110;
-    --str-chat__own-message-bubble-color: #fff;
-  }
-
-  .str-chat__message.str-chat__message--other {
-    column-gap: 0.25rem;
-  }
-
-  .str-chat__message-text {
-    padding: 0.75rem 1rem;
-  }
-
-  .str-chat__message-bubble {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .str-chat__li--single,
-  .str-chat__li--bottom {
-    margin-block-end: 0.875rem;
-
-    .str-chat__message--other .str-chat__message-bubble {
-      border-end-start-radius: var(--str-chat__message-bubble-border-radius);
-    }
-
-    .str-chat__message--me .str-chat__message-bubble {
-      border-end-end-radius: var(--str-chat__message-bubble-border-radius);
-    }
-  }
+  --str-chat__font-family: inherit;
 
-  .str-chat__date-separator {
-    .str-chat__date-separator-line {
-      display: none;
-    }
+  --str-chat__message-bubble-border-radius: 1.5rem;
+  --str-chat__message-bubble-background-color: #f1f0ee;
+  --str-chat__message-bubble-color: #181818;
 
-    .str-chat__date-separator-date {
-      margin: 0 auto;
-      font-size: 0.75rem;
-    }
-  }
+  --str-chat__own-message-bubble-background-color: #121110;
+  --str-chat__own-message-bubble-color: #fff;
 }
 
 /* Dialog component styles - used by messaging components */
@@ -346,11 +305,22 @@
   }
 }
 
-.str-chat__unread-messages-separator,
-.str-chat__date-separator-line {
+.str-chat__unread-messages-separator {
   background-color: transparent;
 }
 
+.str-chat__date-separator-line {
+  display: none;
+}
+
+.str-chat__date-separator {
+  font-size: 0.75rem;
+
+  .str-chat__date-separator-date {
+    margin: 0 auto;
+  }
+}
+
 .str-chat__list {
   background: transparent;
 }
@@ -377,6 +347,10 @@
   justify-items: flex-start;
 }
 
+.str-chat__message.str-chat__message--other {
+  column-gap: 0.25rem;
+}
+
 /* Outer grid for me (outgoing) messages — add footer row after message */
 .str-chat__li .str-chat__message--me {
   grid-template-areas:
@@ -576,6 +550,18 @@
   transition-delay: 300ms;
 }
 
+.str-chat__message
+  .str-chat__message-inner
+  .str-chat__message-bubble
+  .str-chat__message-text {
+  padding: 0.75rem 1rem;
+}
+
+.str-chat__message .str-chat__message-bubble {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 /* Chatbot reply markdown — restore semantics that consumer Tailwind preflight
    (or other resets) strip from the body of `.str-chat__message-text-inner`. */
 .str-chat__message-text-inner :where(h1, h2, h3, h4, h5, h6) {
@@ -680,6 +666,21 @@
   margin-bottom: 0;
 }
 
+.str-chat__li--single,
+.str-chat__li--bottom {
+  .str-chat__message {
+    margin-block-end: 0.875rem;
+  }
+
+  .str-chat__message--other .str-chat__message-bubble {
+    border-end-start-radius: var(--str-chat__message-bubble-border-radius);
+  }
+
+  .str-chat__message--me .str-chat__message-bubble {
+    border-end-end-radius: var(--str-chat__message-bubble-border-radius);
+  }
+}
+
 /* Locked attachment wrapper: stack card + text bubble in the correct direction */
 .str-chat__li .str-chat__message--me .str-chat__message-bubble-wrapper {
   display: flex;