transitions-refine 0.3.30 → 0.3.31

package/demo.html

@@ -2644,8 +2644,12 @@
                 const vn=vm?rootVar(vm[1]):null;
                 // distance is a magnitude — direction lives in the CSS (± calc).
                 const num=Math.abs(vn?parseFloat(cs.getPropertyValue(vn)):parseFloat(inner));
-                if(Number.isFinite(num)&&num>1e-4&&(!bestTranslate||num>bestTranslate.translate))
-                  bestTranslate={translate:num,...(vn?{translateVarName:vn}:{})};}}
+                // a var-backed translate at rest (0) still reports its var — the
+                // hook for ADDING a slide distance the source neutralized (e.g. a
+                // generic text swap with --text-swap-translate-y: 0).
+                if(Number.isFinite(num)&&(num>1e-4||vn)){
+                  const better=!bestTranslate||num>bestTranslate.translate||(bestTranslate.translateVarName==null&&vn);
+                  if(better)bestTranslate={translate:num,...(vn?{translateVarName:vn}:{})};}}}
           }else{
             const fm=txt.match(/filter\s*:\s*([^;}]+)/i);
             if(fm){const bl=fm[1].match(/blur\(\s*([^)]+)\)/i);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "transitions-refine",
-  "version": "0.3.30",
+  "version": "0.3.31",
   "description": "Live, agent-driven Refine panel for CSS/Motion transitions — injects a timeline + Refine UI and runs transitions.dev suggestions via your coding agent.",
   "type": "module",
   "bin": {

package/server/relay.mjs

@@ -269,6 +269,7 @@ const RECIPES_BLOCK = [
   "  - Panel reveal → filter blur 2px (Small)",
   "  - Page side-by-side → filter blur 3px (Medium) AND transform translate distance 8px, both on the sliding page",
   "  - Icon swap → filter blur 2px (Small) AND transform scale 0.25 (start-scale) on the swapping icon",
+  "  - Text states swap → filter blur 2px (Small) AND transform translateY distance 4px, on the swapping text (exit and enter both settle to blur 0 / translate 0)",
   "  - Skeleton loader and reveal → filter blur 2px (Small)",
   "  - Texts reveal → filter blur 3px (Medium)",
   "  - Success check → filter blur 8px (Large)",