transitions-refine 0.3.28 → 0.3.30

package/demo.html

@@ -4872,11 +4872,34 @@
         // A replace suggestion may carry `patches` (one per related phase, e.g.
         // open + close) — a recipe swap is one motion, so applying it writes BOTH.
         // Otherwise fall back to the single `patch` on the active phase.
-        const patches=Array.isArray(s.patches)&&s.patches.length
+        let patches=Array.isArray(s.patches)&&s.patches.length
           ? s.patches
           : (s.patch&&s.patch.property?[{...s.patch,phase:(active&&active.phase)||null}]:[]);
         if(!patches.length)return;
         const groupId=active&&active.groupId;
+        // Same-slot swap recipes (icon/text swaps) use two stacked members in one
+        // group. The agent can sometimes return the recipe's blur/scale value for
+        // only the currently selected member; expand those value patches to every
+        // sibling member so replace applies the WHOLE group, not just the exiting
+        // icon/text.
+        const isSameSlotSwap=s.kind==="replace"&&/icon[-\s]?swap|text states swap|text[-\s]?swap|09-icon-swap|04-text-states-swap/i.test([s.title,s.reference,s.reason].filter(Boolean).join(" "));
+        if(isSameSlotSwap&&groupId){
+          const extra=[]; const has=new Set(patches.map(p=>[p.phase||"",p.property||"",p.member||"",p.blur!=null?"blur":"",p.scale!=null?"scale":"",p.translate!=null?"translate":""].join("|")));
+          const valuePatches=patches.filter(p=>p.member&&(p.blur!=null||p.scale!=null)&&(p.property==="filter"||p.property==="transform"));
+          for(const p of valuePatches){
+            const target=entries.find(e=>e.kind==="phase"&&e.groupId===groupId&&(!p.phase||e.phase===p.phase))||active;
+            const members=new Map();
+            for(const t of (target&&target.effectiveTimings)||[]){
+              const m=t.member||t.memberId;if(m&&!members.has(m))members.set(m,m);
+            }
+            for(const member of members.values()){
+              const k=[p.phase||"",p.property||"",member,p.blur!=null?"blur":"",p.scale!=null?"scale":"",p.translate!=null?"translate":""].join("|");
+              if(has.has(k))continue;
+              has.add(k); extra.push({...p,member});
+            }
+          }
+          if(extra.length)patches=patches.concat(extra);
+        }
         // Recipe timing per phase: a replace emits a phase-level timing patch
         // (property:"all", duration+easing) plus lane-level value patches. An
         // ADDED lane (e.g. a blur/filter lane the source never had) must ride the
@@ -5145,10 +5168,32 @@
             if(sp.toSuf) active=stEls.length?stEls.some(e=>safeMatches(e,sp.toSuf)):true;        // open
             else if(sp.fromSuf) active=stEls.length?stEls.some(e=>!safeMatches(e,sp.fromSuf)):true; // close = not in fromState
             else active=true; // no state info → always reflect (degrades to old behavior)
+            const spVars={}; // union of this phase's value vars (scale/blur/translate)
+            const memberEls=[]; // {el,css} of resolved members this phase
             for(const mm of sp.members) for(const el of txMemberEls(mm.selector,sp.stateTarget)){
               if(inUI(el))continue;
-              if(mm.vars&&Object.keys(mm.vars).length){ const ex=desiredVars.get(el)||{}; desiredVars.set(el,{...ex,...mm.vars}); }
+              if(mm.vars&&Object.keys(mm.vars).length){ const ex=desiredVars.get(el)||{}; desiredVars.set(el,{...ex,...mm.vars}); Object.assign(spVars,mm.vars); }
               if(active) desiredCss.set(el,mm.css);
+              memberEls.push({el,css:mm.css});
+            }
+            // SHARED-VAR recipes (icon/text swap, page slide, …) drive the non-
+            // resting look through a custom property read by SEVERAL stacked
+            // members from a COMMON ANCESTOR — and the "from" member is often not
+            // even a captured lane (e.g. only opacity animates at rest, so the
+            // entering icon has no filter/transform lane). Writing the var inline
+            // on one member can't reach its siblings, and only the captured
+            // member gets the recipe timing. So when a phase carries value vars:
+            //   (1) set the vars on the stateTarget container — every descendant
+            //       member inherits them, and each state's own CSS rule
+            //       (active → blur(0)/scale(1); inactive → blur(var)/scale(var))
+            //       gates where they actually show; and
+            //   (2) give the same recipe timing to the member's same-slot stacked
+            //       siblings (element children of the same parent sharing a class)
+            //       so the ENTERING member animates the new filter/transform lanes
+            //       instead of snapping.
+            if(Object.keys(spVars).length){
+              for(const el of stEls){ if(inUI(el))continue; const ex=desiredVars.get(el)||{}; desiredVars.set(el,{...ex,...spVars}); }
+              if(active) for(const{el,css}of memberEls){ const parent=el.parentElement; if(!parent)continue; const cls=[...(el.classList||[])]; for(const sib of Array.from(parent.children)){ if(sib===el||inUI(sib)||!sib.classList)continue; if(cls.some(c=>sib.classList.contains(c))&&!desiredCss.has(sib))desiredCss.set(sib,css); } }
             }
           }
           const allEls=new Set([...desiredCss.keys(),...desiredVars.keys()]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "transitions-refine",
-  "version": "0.3.28",
+  "version": "0.3.30",
   "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

@@ -278,6 +278,7 @@ const RECIPES_BLOCK = [
   "Recipe timing & easing — SET the transition to the recipe's documented values; do NOT keep the source's duration/easing when they differ from the recipe (a value being an on-grid token is NOT a reason to keep it if the recipe uses a different one):",
   "  - Easing: most surface/slide/reveal recipes use cubic-bezier(0.22, 1, 0.36, 1) (Smooth ease out) — page side-by-side, panel reveal, menu dropdown, modal, tooltip, accordion, tabs sliding, card resize, texts reveal, success check. Cross-fade swaps use ease-in-out — icon swap, text states swap. Overshoot curves stay as documented — notification badge / number pop-in cubic-bezier(0.34, 1.36, 0.64, 1), avatar return cubic-bezier(0.34, 3.85, 0.64, 1).",
   "  - SYMMETRIC recipes (SAME duration + easing BOTH directions — do NOT split open/close): page side-by-side (250ms), tabs sliding (250ms), accordion (250ms), icon swap (250ms), text states swap (150ms). Emit identical durationMs/easing for every phase.",
+  "  - WHOLE-GROUP swaps: icon swap and text states swap are two stacked members in the same slot. A replace suggestion MUST patch BOTH members in EVERY phase, not just the currently selected/exiting member. Emit blur/scale (icon) or blur/translate (text) lane patches once per member per phase, copying each member name from `phases[].timings`.",
   "  - ASYMMETRIC recipes (open slower, close faster): menu dropdown / modal / tooltip / panel reveal → open 250ms, close 150ms.",
   "Tie-break: prefer the lower-overhead recipe (card resize over panel reveal, dropdown over modal). If no recipe genuinely fits, return an empty suggestions array.",
 ].join("\n");