@linktr.ee/messaging-react 4.2.0-rc-1787250088 → 4.2.0-rc-1787283154

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.2.0-rc-1787250088",
+  "version": "4.2.0-rc-1787283154",
   "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.6.0-rc-1787250088",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1787283154",
     "@linktr.ee/messaging-taxonomy": "^0.11.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/CustomMessageInput/index.tsx

@@ -496,7 +496,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
 
       <div className="relative z-10 flex min-h-0 flex-col">
         {renderHeader?.()}
-        <div className="flex min-h-0 flex-col gap-4 p-4">
+        <div className="flex min-h-0 flex-col gap-4 p-3 pb-5 md:p-5">
           <div
             // @ts-expect-error Only React 19 onwards has `inert` in its types.
             inert={isFrozen ? '' : undefined}

package/src/styles.css

@@ -120,10 +120,6 @@
   }
 }
 
-.messaging-channel-layout {
-  --messaging-composer-fade-height: 2rem;
-}
-
 .messaging-composer-chrome--floating {
   position: relative;
   right: 0;
@@ -138,21 +134,10 @@
 
 .messaging-composer-chrome--floating .messaging-composer-backdrop {
   position: absolute;
-  top: calc(-1 * var(--messaging-composer-fade-height));
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   overflow: hidden;
   isolation: isolate;
   pointer-events: none;
-  /* Frosted band height, from the backdrop's top edge down to the composer
-     pill: the fade-height above the chrome plus the chrome's own top padding
-     (p-4 = 1rem). Blur/gradient stops are anchored to this fixed band so the
-     frosting stays in the gap above the composer and does not scale with the
-     (opaque) composer height. */
-  --messaging-composer-fade-band: calc(
-    var(--messaging-composer-fade-height) + 1rem
-  );
 }
 
 .messaging-composer-backdrop-blur {
@@ -161,99 +146,71 @@
   pointer-events: none;
 }
 
+/* Figma progressive background blur: (50%, 0%) → (50%, 100%), 0 → 16.
+   CSS has no spatially-varying blur, so five evenly spaced masked layers
+   approximate the linear ramp across the full parent height. */
 .messaging-composer-backdrop-blur:nth-child(1) {
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-  mask: linear-gradient(
-    to bottom,
-    transparent 0,
-    black calc(var(--messaging-composer-fade-band) * 0.12),
-    black calc(var(--messaging-composer-fade-band) * 0.32),
-    transparent calc(var(--messaging-composer-fade-band) * 0.5)
-  );
-  -webkit-mask: linear-gradient(
+  --messaging-composer-blur-mask: linear-gradient(
     to bottom,
-    transparent 0,
-    black calc(var(--messaging-composer-fade-band) * 0.12),
-    black calc(var(--messaging-composer-fade-band) * 0.32),
-    transparent calc(var(--messaging-composer-fade-band) * 0.5)
+    transparent 0%,
+    black 20%,
+    transparent 40%
   );
+  backdrop-filter: blur(3.2px);
+  -webkit-backdrop-filter: blur(3.2px);
+  mask: var(--messaging-composer-blur-mask);
+  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(2) {
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  mask: linear-gradient(
-    to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.2),
-    black calc(var(--messaging-composer-fade-band) * 0.38),
-    black calc(var(--messaging-composer-fade-band) * 0.55),
-    transparent calc(var(--messaging-composer-fade-band) * 0.7)
-  );
-  -webkit-mask: linear-gradient(
+  --messaging-composer-blur-mask: linear-gradient(
     to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.2),
-    black calc(var(--messaging-composer-fade-band) * 0.38),
-    black calc(var(--messaging-composer-fade-band) * 0.55),
-    transparent calc(var(--messaging-composer-fade-band) * 0.7)
+    transparent 20%,
+    black 40%,
+    transparent 60%
   );
+  backdrop-filter: blur(6.4px);
+  -webkit-backdrop-filter: blur(6.4px);
+  mask: var(--messaging-composer-blur-mask);
+  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(3) {
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  mask: linear-gradient(
+  --messaging-composer-blur-mask: linear-gradient(
     to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.4),
-    black calc(var(--messaging-composer-fade-band) * 0.58),
-    black calc(var(--messaging-composer-fade-band) * 0.72),
-    transparent calc(var(--messaging-composer-fade-band) * 0.85)
-  );
-  -webkit-mask: linear-gradient(
-    to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.4),
-    black calc(var(--messaging-composer-fade-band) * 0.58),
-    black calc(var(--messaging-composer-fade-band) * 0.72),
-    transparent calc(var(--messaging-composer-fade-band) * 0.85)
+    transparent 40%,
+    black 60%,
+    transparent 80%
   );
+  backdrop-filter: blur(9.6px);
+  -webkit-backdrop-filter: blur(9.6px);
+  mask: var(--messaging-composer-blur-mask);
+  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(4) {
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  mask: linear-gradient(
-    to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.55),
-    black calc(var(--messaging-composer-fade-band) * 0.72),
-    black calc(var(--messaging-composer-fade-band) * 0.88),
-    transparent var(--messaging-composer-fade-band)
-  );
-  -webkit-mask: linear-gradient(
+  --messaging-composer-blur-mask: linear-gradient(
     to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.55),
-    black calc(var(--messaging-composer-fade-band) * 0.72),
-    black calc(var(--messaging-composer-fade-band) * 0.88),
-    transparent var(--messaging-composer-fade-band)
+    transparent 60%,
+    black 80%,
+    transparent 100%
   );
+  backdrop-filter: blur(12.8px);
+  -webkit-backdrop-filter: blur(12.8px);
+  mask: var(--messaging-composer-blur-mask);
+  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(5) {
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  mask: linear-gradient(
+  --messaging-composer-blur-mask: linear-gradient(
     to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.7),
-    black calc(var(--messaging-composer-fade-band) * 0.9),
-    black var(--messaging-composer-fade-band),
-    transparent var(--messaging-composer-fade-band)
-  );
-  -webkit-mask: linear-gradient(
-    to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.7),
-    black calc(var(--messaging-composer-fade-band) * 0.9),
-    black var(--messaging-composer-fade-band),
-    transparent var(--messaging-composer-fade-band)
+    transparent 80%,
+    black 100%
   );
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  mask: var(--messaging-composer-blur-mask);
+  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-gradient {
@@ -261,9 +218,9 @@
   inset: 0;
   pointer-events: none;
   background: linear-gradient(
-    180deg,
-    rgba(251, 250, 249, 0) 0,
-    #fbfaf9 var(--messaging-composer-fade-band)
+    to bottom,
+    rgba(251, 250, 249, 0) 0%,
+    #fbfaf9 100%
   );
 }