@agentforge-io/chat-sdk 2.4.0 → 2.4.1

package/dist/ChatDrawer.js

@@ -205,24 +205,44 @@ function ChatDrawer(props) {
     // **bottom-sheet (snap<1)**: anchor the surface to the bottom of the
     // visual viewport. `bottom = visualViewport.offsetTop` is the legacy
     // path that handles the rubber-band scroll case on iOS Safari.
+    // Motion choreography (NLP-aware):
+    //   - Origin: the drawer "grows" from the bottom of the page rather
+    //     than appearing in place. Subconsciously this maps to "the chat
+    //     emerges because YOU asked for it" — agency stays with the user.
+    //   - Curve: cubic-bezier(.22, 1, .36, 1) is the ease-out-expo curve.
+    //     It starts fast, then settles with the same deceleration profile
+    //     a hand has when reaching out and stopping. Bodies recognize it
+    //     as "natural" without consciously parsing why.
+    //   - Duration: 360ms. Below 300ms feels mechanical/jumpy. Above 450ms
+    //     feels sluggish on mobile. 360ms is the breath-pause sweet spot
+    //     for "the world updated and I noticed it".
+    //   - Coupled fade+scale: the surface opens at 98% scale and fades in
+    //     while sliding. The 2% scale delta is barely perceivable
+    //     consciously but the brain reads it as "expanding into presence"
+    //     instead of "popping in".
+    const transitionExpr = isDragging
+        ? 'none'
+        : 'transform 360ms cubic-bezier(.22, 1, .36, 1), opacity 240ms cubic-bezier(.22, 1, .36, 1)';
+    const openTransform = `translate3d(0, ${dragOffset}px, 0) scale(${open ? 1 : 0.98})`;
+    const closedTransformFullscreen = `translate3d(0, 24px, 0) scale(0.98)`;
+    const closedTransformSheet = `translate3d(0, ${drawerHeight}px, 0) scale(1)`;
     const surfaceMotionStyle = fullscreen
         ? {
             top: `${vv.offsetTop}px`,
             height: `${vv.h}px`,
-            transform: `translate3d(0, ${translateY}, 0)`,
-            transition: isDragging
-                ? 'none'
-                : 'transform 240ms cubic-bezier(.32,.72,0,1)',
-            willChange: 'transform',
+            transform: open ? openTransform : closedTransformFullscreen,
+            opacity: open ? 1 : 0,
+            transition: transitionExpr,
+            transformOrigin: 'bottom center',
+            willChange: 'transform, opacity',
         }
         : {
             height: `${drawerHeight}px`,
-            transform: `translate3d(0, ${translateY}, 0)`,
+            transform: open ? openTransform : closedTransformSheet,
             bottom: `${vv.offsetTop}px`,
-            transition: isDragging
-                ? 'none'
-                : 'transform 240ms cubic-bezier(.32,.72,0,1)',
-            willChange: 'transform',
+            transition: transitionExpr,
+            transformOrigin: 'bottom center',
+            willChange: 'transform, opacity',
         };
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { className: "af-drawer-root", "data-state": open ? 'open' : 'closed', style: {
             position: 'fixed',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentforge-io/chat-sdk",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Framework-free chat session SDK for AgentForge public chat tokens. Headless — no DOM. Drop into any frontend (React, Vue, Svelte, vanilla) and listen for events.",
   "license": "MIT",
   "main": "dist/index.js",