transitions-refine 0.3.26 → 0.3.28

package/demo.html

@@ -2443,11 +2443,25 @@
         }
         return out;
       }
-      _applyOverrides(baseLanes,po){
-        return baseLanes.map(t=>{const o=po[t.laneId]||{};return {...t,durationMs:o.durationMs??t.durationMs,delayMs:o.delayMs??t.delayMs,easing:o.easing??t.easing,spring:o.spring??t.spring,
+      _applyOverrides(baseLanes,po,memberFilter){
+        const out=baseLanes.map(t=>{const o=po[t.laneId]||{};return {...t,durationMs:o.durationMs??t.durationMs,delayMs:o.delayMs??t.delayMs,easing:o.easing??t.easing,spring:o.spring??t.spring,
           // value overrides (scale/blur) come only from applied refine suggestions;
           // they carry their own from-value + backing var so Accept + live preview work.
-          scale:o.scale??t.scale,blur:o.blur??t.blur,varName:o.varName??t.varName,scaleFrom:o.scaleFrom??t.scaleFrom,blurFrom:o.blurFrom??t.blurFrom};});
+          scale:o.scale??t.scale,blur:o.blur??t.blur,varName:o.varName??t.varName,scaleFrom:o.scaleFrom??t.scaleFrom,blurFrom:o.blurFrom??t.blurFrom,
+          translate:o.translate??t.translate,translateFrom:o.translateFrom??t.translateFrom,translateVarName:o.translateVarName??t.translateVarName};});
+        // Synthetic lanes: a refine recipe can ADD a lane the source never
+        // animated (e.g. blur on a transition with no `filter`). Overrides that
+        // carry their own `property` and match no base lane become new lanes so
+        // the transition string, live preview and Accept all see them.
+        // memberFilter: undefined → include all; otherwise only lanes whose
+        // memberId matches (null for flat entries).
+        const have=new Set(baseLanes.map(t=>t.laneId));
+        for(const[laneId,o]of Object.entries(po||{})){
+          if(have.has(laneId)||!o||!o.property)continue;
+          if(memberFilter!==undefined&&(o.memberId??null)!==memberFilter)continue;
+          out.push({laneId,synthetic:true,...o});
+        }
+        return out;
       }
       _notify(){
         this.effectiveCache.clear();
@@ -2463,7 +2477,7 @@
             const members=(ph.members||[]).map(m=>{
               const mb=baseLanes.filter(l=>l.memberId===m.id);
               return {memberId:m.id,label:m.label||m.id,selector:m.selector,toState:m.toState,
-                lanes:this._applyOverrides(mb,po),baseLanes:mb};
+                lanes:this._applyOverrides(mb,po,m.id),baseLanes:mb};
             });
             const item={id,kind:"phase",groupId:g.id,groupLabel:g.label||g.id,component:g.component||null,
               phase:ph.phase||null,phaseLabel:ph.label||ph.phase||"Phase",
@@ -2581,9 +2595,12 @@
     }
 
     // Read the non-resting ("pre") VALUE a lane animates from the live stylesheets:
-    // transform-scale (≠1) and filter-blur (≠0), plus the CSS custom property
-    // backing it (var-backed values are the ones we can live-preview). Returns
-    // {scale?|blur?, varName?}. Only meaningful for transform/filter lanes.
+    // transform-scale (≠1), transform-translate distance (≠0) and filter-blur,
+    // plus the CSS custom property backing each (var-backed values are the ones we
+    // can live-preview). Returns {scale?, blur?, varName?, translate?,
+    // translateVarName?}. A var-backed blur is reported even at 0px — the var is
+    // how an ADDED blur (recipe lane the source lacks) goes live. Only meaningful
+    // for transform/filter lanes.
     function readElValueHint(el, property){
       const out={};
       try{
@@ -2593,32 +2610,55 @@
         const esc=s=>s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");
         const tokRes=own.map(c=>new RegExp("\\."+esc(c)+"(?![\\w-])"));
         const matchTok=sel=>!own.length||tokRes.some(re=>re.test(sel));
-        let bestScale=null,bestBlur=null;
-        const consider=txt=>{
+        let bestScale=null,bestBlur=null,bestTranslate=null;
+        // custom-property definitions seen on matching rules — lets a var chain
+        // resolve to its token var (--t-page-from-x: calc(var(--page-slide-distance)
+        // * -1) → --page-slide-distance), which is the var shared across members.
+        const varDefs=new Map();
+        // walk nested var() definitions to the innermost ("token") var.
+        const rootVar=(name)=>{let n=name,guard=0;
+          while(guard++<4){const def=varDefs.get(n);const nm=def&&def.match(/var\(\s*(--[\w-]+)/);if(!nm)break;n=nm[1];}
+          return n;};
+        const texts=[];
+        const collect=list=>{for(const rule of Array.from(list||[])){
+          if(rule.cssRules&&rule.selectorText===undefined){collect(rule.cssRules);continue;}
+          const sel=rule.selectorText;if(!sel||!matchTok(sel))continue;
+          if(rule.cssText)texts.push(rule.cssText);}};
+        for(const sheet of Array.from(document.styleSheets||[])){let r;try{r=sheet.cssRules;}catch{continue;}collect(r);}
+        for(const txt of texts){const defRe=/(--[\w-]+)\s*:\s*([^;}]+)/g;let dm;
+          while((dm=defRe.exec(txt)))if(!varDefs.has(dm[1]))varDefs.set(dm[1],dm[2].trim());}
+        for(const txt of texts){
           if(property==="transform"){
             const tm=txt.match(/transform\s*:\s*([^;}]+)/i);
             if(tm){const sc=tm[1].match(/scale\(\s*([^),]+)/i);
               if(sc){const inner=sc[1].trim();const vm=inner.match(/var\(\s*(--[\w-]+)/);
                 const num=vm?parseFloat(cs.getPropertyValue(vm[1])):parseFloat(inner);
-                // pick the value furthest from the resting 1 (the real pre-scale).
-                if(Number.isFinite(num)&&Math.abs(num-1)>1e-4&&(!bestScale||Math.abs(num-1)>Math.abs(bestScale.scale-1)))
-                  bestScale={scale:num,...(vm?{varName:vm[1]}:{})};}}
+                // pick the value furthest from the resting 1 (the real pre-scale);
+                // a var-backed scale at rest (1) still reports its var — the hook
+                // for ADDING a start-scale the source neutralized (e.g. icon swap).
+                if(Number.isFinite(num)&&(Math.abs(num-1)>1e-4||vm)){
+                  const better=!bestScale||Math.abs(num-1)>Math.abs(bestScale.scale-1)||(bestScale.varName==null&&vm);
+                  if(better)bestScale={scale:num,...(vm?{varName:vm[1]}:{})};}}
+              const tr=tm[1].match(/translate(?:X|Y|3d)?\(\s*([^),]+)/i);
+              if(tr){const inner=tr[1].trim();const vm=inner.match(/var\(\s*(--[\w-]+)/);
+                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}:{})};}}
           }else{
             const fm=txt.match(/filter\s*:\s*([^;}]+)/i);
             if(fm){const bl=fm[1].match(/blur\(\s*([^)]+)\)/i);
               if(bl){const inner=bl[1].trim();const vm=inner.match(/var\(\s*(--[\w-]+)/);
                 const num=vm?parseFloat(cs.getPropertyValue(vm[1])):parseFloat(inner);
-                if(Number.isFinite(num)&&num>1e-4&&(!bestBlur||num>bestBlur.blur))
+                // var-backed 0px still reports the var (the hook for ADDING blur).
+                if(Number.isFinite(num)&&(num>1e-4||vm)&&(!bestBlur||num>bestBlur.blur))
                   bestBlur={blur:num,...(vm?{varName:vm[1]}:{})};}}
           }
-        };
-        const collect=list=>{for(const rule of Array.from(list||[])){
-          if(rule.cssRules&&rule.selectorText===undefined){collect(rule.cssRules);continue;}
-          const sel=rule.selectorText;if(!sel||!matchTok(sel))continue;
-          if(rule.cssText)consider(rule.cssText);}};
-        for(const sheet of Array.from(document.styleSheets||[])){let r;try{r=sheet.cssRules;}catch{continue;}collect(r);}
+        }
         if(bestScale)Object.assign(out,bestScale);
         if(bestBlur)Object.assign(out,bestBlur);
+        if(bestTranslate)Object.assign(out,bestTranslate);
       }catch{}
       return out;
     }
@@ -3240,7 +3280,10 @@
                         "Updates ",
                         s.patches.map((pp,pi)=>h("span",{className:"tl-sug-phase",key:pi},
                           (cap(pp.phase)||pp.phase||"Phase"),
-                          pp.durationMs!=null&&h("span",{className:"tl-sug-phase-dur"},pp.durationMs+"ms")))))
+                          pp.durationMs!=null&&h("span",{className:"tl-sug-phase-dur"},pp.durationMs+"ms"),
+                          pp.scale!=null&&h("span",{className:"tl-sug-phase-dur"},"scale "+pp.scale),
+                          pp.blur!=null&&h("span",{className:"tl-sug-phase-dur"},"blur "+pp.blur+"px"),
+                          pp.translate!=null&&h("span",{className:"tl-sug-phase-dur"},"slide "+pp.translate+"px")))))
                   : h(React.Fragment,null,
                       s.title&&h("div",{className:"tl-sug-title"},s.title),
                       (s.from||s.to)&&h("div",{className:"tl-sug-delta"},
@@ -3532,14 +3575,21 @@
         const base=tgt.baseLanes||[];
         const bmap=new Map(base.map(t=>[t.laneId,t]));
         for(const t of (tgt.effectiveTimings||[])){
-          const b=bmap.get(t.laneId);if(!b)continue;
-          if(t.durationMs!==b.durationMs||t.delayMs!==b.delayMs||(t.easing||"")!==(b.easing||"")){
+          const b=bmap.get(t.laneId);
+          // a SYNTHETIC lane (recipe added a property the source never animated,
+          // e.g. blur on a filter-less transition) has no base — write it as an
+          // addition: the lane's timing plus its value(s) below.
+          if(!b&&!t.synthetic)continue;
+          if(!b){
+            out.push({property:t.property,member:t.member||null,selector:t.selector||null,phase:tgt.phase||null,added:true,
+              from:null,to:{durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing}});
+          }else if(t.durationMs!==b.durationMs||t.delayMs!==b.delayMs||(t.easing||"")!==(b.easing||"")){
             out.push({property:t.property,member:t.member||null,selector:t.selector||null,phase:tgt.phase||null,
               from:{durationMs:b.durationMs,delayMs:b.delayMs,easing:b.easing},
               to:{durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing}});
           }
-          // value edits (scale/blur) live as overrides on the effective lane and
-          // carry their own from-value + backing var; emit one change each.
+          // value edits (scale/blur/translate) live as overrides on the effective
+          // lane and carry their own from-value + backing var; emit one change each.
           if(t.scale!=null){
             out.push({property:t.property,member:t.member||null,selector:t.selector||null,phase:tgt.phase||null,varName:t.varName||null,
               from:{scale:t.scaleFrom},to:{scale:t.scale}});
@@ -3548,6 +3598,10 @@
             out.push({property:t.property,member:t.member||null,selector:t.selector||null,phase:tgt.phase||null,varName:t.varName||null,
               from:{blur:t.blurFrom},to:{blur:t.blur}});
           }
+          if(t.translate!=null){
+            out.push({property:t.property,member:t.member||null,selector:t.selector||null,phase:tgt.phase||null,varName:t.translateVarName||null,
+              from:{translate:t.translateFrom},to:{translate:t.translate}});
+          }
         }
       }
       return out;
@@ -4602,7 +4656,10 @@
       const[refineLabel,setRefineLabel]=useState(null);
       const[appliedIds,setAppliedIds]=useState({});
       const[refineMode,setRefineMode]=useState("llm"); // llm (Agent) | deterministic
-      const[refineType,setRefineType]=useState("small"); // small | replace
+      // small | replace — last selected tab persists (same pattern as tl-theme-pref)
+      const[refineType,setRefineType]=useState(()=>{
+        try{const v=localStorage.getItem("tl-refine-tab-pref");return v==="small"||v==="replace"?v:"small";}catch{return "small";}
+      });
       const[llmAvailable,setLlmAvailable]=useState(null); // null=unknown, true/false from /health
       const[cliInstalled,setCliInstalled]=useState(null); // null=unknown, true/false from /health
       const[agentReason,setAgentReason]=useState(null); // why no CLI is wired (/health agentReason)
@@ -4741,7 +4798,8 @@
           // attach the lane's non-resting scale/blur value (+ backing var) so the
           // agent + deterministic engine can refine transform/filter VALUES too.
           const withVal=(t)=>{const v=laneValueHint(t.selector,t.property);return {property:t.property,member:t.member||null,durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing,
-            ...(v.scale!=null?{scale:v.scale}:{}),...(v.blur!=null?{blur:v.blur}:{}),...(v.varName?{varName:v.varName}:{})};};
+            ...(v.scale!=null?{scale:v.scale}:{}),...(v.blur!=null?{blur:v.blur}:{}),...(v.varName?{varName:v.varName}:{}),
+            ...(v.translate!=null?{translate:v.translate}:{}),...(v.translateVarName?{translateVarName:v.translateVarName}:{})};};
           const timings=et.map(withVal);
           const selector=(active.bindings&&active.bindings.selector)||(et[0]&&et[0].selector)||null;
           // A recipe swap (replace/both) on a grouped phase should update its related
@@ -4769,6 +4827,7 @@
       // (idle/error), tabs just preview copy and never auto-scan.
       const changeRefineType=useCallback((t)=>{
         setRefineType(t);
+        try{localStorage.setItem("tl-refine-tab-pref",t);}catch{}
         if(!active)return;
         if(scanModeRef.current==="deterministic")return;
         if(refinePhase!=="done"&&refinePhase!=="scanning")return;
@@ -4818,6 +4877,27 @@
           : (s.patch&&s.patch.property?[{...s.patch,phase:(active&&active.phase)||null}]:[]);
         if(!patches.length)return;
         const groupId=active&&active.groupId;
+        // 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
+        // recipe's phase timing — NOT the source lane's leftover timing — so the
+        // whole recipe moves in lockstep (e.g. filter deblurs exactly as the page
+        // finishes sliding, instead of lagging on the old duration). Collect the
+        // phase timing up front so synthesis is order-independent.
+        const phaseTiming=new Map(); // phaseKey -> {durationMs,delayMs,easing}
+        for(const p of patches){
+          if(p.durationMs==null&&p.easing==null&&p.delayMs==null)continue;
+          const key=p.phase||"";
+          const cur=phaseTiming.get(key)||{};
+          // a coarse property:"all" patch describes the whole phase; prefer it.
+          if(p.property==="all"||!phaseTiming.has(key)){
+            phaseTiming.set(key,{
+              durationMs:p.durationMs??cur.durationMs,
+              delayMs:p.delayMs??cur.delayMs,
+              easing:p.easing??cur.easing,
+            });
+          }
+        }
         for(const p of patches){
           if(!p.property)continue;
           const timingOverride={};
@@ -4835,6 +4915,7 @@
           // map the property patch onto the matching lane(s) — a property can span
           // several members in a grouped phase, so apply to each.
           const et=target.effectiveTimings||[];
+          const memberLanes=p.member?et.filter(t=>(t.member===p.member||t.memberId===p.member)):et;
           let lanes=p.property==="all"?et:et.filter(t=>t.property===p.property);
           if(p.member)lanes=lanes.filter(t=>(t.member===p.member||t.memberId===p.member));
           const ids=lanes.length?lanes.map(t=>t.laneId):[p.property];
@@ -4842,31 +4923,79 @@
             for(const id of ids)registry.setPropOverride(target.id,id,timingOverride);
           }
 
-          // Value edits (scale/blur) must land on concrete lanes so live preview
-          // can write the right backing var. For coarse recipe patches that use
-          // property:"all" and omit varName, fan out by lane type.
-          if(p.scale!=null){
-            let scaleLanes=lanes.filter(t=>t.property==="transform"||t.scale!=null);
-            if(!scaleLanes.length&&p.property==="all")scaleLanes=et.filter(t=>t.property==="transform"||t.scale!=null);
-            const scaleFrom=(s.from!=null?parseFloat(s.from):undefined);
-            for(const lane of scaleLanes){
-              const ov={scale:p.scale,scaleFrom};
-              const vn=p.varName??lane.varName;
-              if(vn!=null)ov.varName=vn;
-              registry.setPropOverride(target.id,lane.laneId,ov);
-            }
-          }
-          if(p.blur!=null){
-            let blurLanes=lanes.filter(t=>t.property==="filter"||t.blur!=null);
-            if(!blurLanes.length&&p.property==="all")blurLanes=et.filter(t=>t.property==="filter"||t.blur!=null);
-            const blurFrom=(s.from!=null?parseFloat(s.from):undefined);
-            for(const lane of blurLanes){
-              const ov={blur:p.blur,blurFrom};
-              const vn=p.varName??lane.varName;
-              if(vn!=null)ov.varName=vn;
-              registry.setPropOverride(target.id,lane.laneId,ov);
+          // Value edits (scale/blur/translate) must land on concrete lanes so live
+          // preview can write the right backing var. For coarse recipe patches that
+          // use property:"all" and omit varName, fan out by lane type. When a
+          // recipe prescribes a value the source has NO lane for (e.g. blur on a
+          // transition that never animated `filter`), SYNTHESIZE the lane: an
+          // override keyed by a fresh laneId that carries its own property, member
+          // and timing, which the registry surfaces as a new effective lane.
+          // The backing var is probed from the live stylesheets at apply time
+          // (readElValueHint reports var-backed values even at their resting 0),
+          // so the patch doesn't need to know the page's CSS custom properties.
+          const sibling=(prop)=>memberLanes.find(t=>t.property===prop)||memberLanes[0]||et[0]||null;
+          // Prefer this patch's own timing, then the recipe's phase timing, then
+          // the sibling lane's timing — so an added lane matches the recipe, not
+          // the source's stale duration/easing.
+          const pt=phaseTiming.get(p.phase||"")||{};
+          // recipe timing to stamp on a value lane (blur/scale/translate) so it
+          // rides the recipe duration/easing, not the source's leftover timing.
+          const recipeTiming=()=>{const t={};if(pt.durationMs!=null)t.durationMs=pt.durationMs;if(pt.delayMs!=null)t.delayMs=pt.delayMs;if(pt.easing!=null)t.easing=pt.easing;return t;};
+          const synthTiming=(base)=>({
+            durationMs:p.durationMs??pt.durationMs??(base&&base.durationMs)??250,
+            delayMs:p.delayMs??pt.delayMs??(base&&base.delayMs)??0,
+            easing:p.easing??pt.easing??(base&&base.easing)??"ease",
+          });
+          const applyValue=(prop,mk)=>{
+            // mk(lane, hint) → override fields for one lane, or null to skip.
+            let vLanes=lanes.filter(t=>t.property===prop);
+            if(!vLanes.length&&p.property==="all")vLanes=et.filter(t=>t.property===prop&&(!p.member||t.member===p.member||t.memberId===p.member));
+            if(vLanes.length){
+              const rt=recipeTiming();
+              for(const lane of vLanes){
+                const hint=laneValueHint(lane.selector,prop);
+                const ov=mk(lane,hint);
+                // an EXISTING lane the recipe reuses (e.g. Page side-by-side's
+                // filter lane at the source's 300ms) must ALSO adopt the recipe's
+                // phase duration/easing, so the value settles in lockstep.
+                if(ov)registry.setPropOverride(target.id,lane.laneId,{...rt,...ov});
+              }
+              return;
             }
-          }
+            // no such lane on this member → synthesize one next to its siblings.
+            // A new filter lane rides the transform (slide) timing per the skill.
+            const sib=sibling(prop==="filter"?"transform":"opacity");
+            if(!sib)return;
+            const hint=laneValueHint(sib.selector,prop);
+            const ov=mk(null,hint);
+            if(!ov)return;
+            const laneId=(sib.memberId?sib.memberId+"::":"")+prop;
+            registry.setPropOverride(target.id,laneId,{
+              property:prop,memberId:sib.memberId??null,member:sib.member??null,selector:sib.selector??null,
+              ...synthTiming(sib),...ov,
+            });
+          };
+          if(p.scale!=null)applyValue("transform",(lane,hint)=>{
+            const ov={scale:p.scale,scaleFrom:(lane&&lane.scale)??hint.scale??(s.from!=null?parseFloat(s.from):undefined)};
+            const vn=p.varName??(lane&&lane.varName)??hint.varName;
+            if(vn!=null)ov.varName=vn;
+            return ov;
+          });
+          if(p.blur!=null)applyValue("filter",(lane,hint)=>{
+            const ov={blur:p.blur,blurFrom:(lane&&lane.blur)??hint.blur??0};
+            const vn=p.varName??(lane&&lane.varName)??hint.varName;
+            if(vn!=null)ov.varName=vn;
+            return ov;
+          });
+          if(p.translate!=null)applyValue("transform",(lane,hint)=>{
+            const ov={translate:p.translate,translateFrom:(lane&&lane.translate)??hint.translate??0};
+            const vn=p.translateVarName??p.varName??(lane&&lane.translateVarName)??hint.translateVarName;
+            // a translate distance can only go live through a backing var — the
+            // inline transition string can't express keyframe positions. Still
+            // record the edit (Accept writes it) even when no var exists.
+            if(vn!=null)ov.translateVarName=vn;
+            return ov;
+          });
         }
         setAppliedIds(prev=>({...prev,[s.id]:true}));
       },[registry,active,entries]);
@@ -4892,11 +5021,13 @@
         if(typeof document==="undefined")return;
         const applied=liveAppliedRef.current;
         const desired=new Map(); // el → {css, vars:{name:value}}
-        // collect the var-backed scale/blur overrides on a set of lanes into a
-        // {varName: cssValue} map (scale → unitless, blur → px) for live preview.
-        const lanesToVars=(lanes)=>{const v={};for(const l of (lanes||[])){if(!l.varName)continue;
-          if(l.scale!=null)v[l.varName]=String(l.scale);
-          if(l.blur!=null)v[l.varName]=l.blur+"px";}return v;};
+        // collect the var-backed scale/blur/translate overrides on a set of lanes
+        // into a {varName: cssValue} map (scale → unitless, blur/translate → px).
+        const lanesToVars=(lanes)=>{const v={};for(const l of (lanes||[])){
+          if(l.varName){
+            if(l.scale!=null)v[l.varName]=String(l.scale);
+            if(l.blur!=null)v[l.varName]=l.blur+"px";}
+          if(l.translate!=null&&l.translateVarName)v[l.translateVarName]=l.translate+"px";}return v;};
         const add=(els,css,vars)=>{ for(const el of els){ if(!el||(el.closest&&el.closest("[data-timeline-panel],[data-tl-ui]")))continue; desired.set(el,{css,vars:vars||{}}); } };
         for(const item of entries){
           if(item.kind==="phase")continue; // phases handled by the state-scoped effect
@@ -4962,9 +5093,11 @@
         if(livePhaseRef.current) txTeardownPhase(livePhaseRef.current);
         const store={observers:[],ptr:null,applied:new Map(),pending:false};
         livePhaseRef.current=store;
-        const lanesToVars=(lanes)=>{const v={};for(const l of (lanes||[])){if(!l.varName)continue;
-          if(l.scale!=null)v[l.varName]=String(l.scale);
-          if(l.blur!=null)v[l.varName]=l.blur+"px";}return v;};
+        const lanesToVars=(lanes)=>{const v={};for(const l of (lanes||[])){
+          if(l.varName){
+            if(l.scale!=null)v[l.varName]=String(l.scale);
+            if(l.blur!=null)v[l.varName]=l.blur+"px";}
+          if(l.translate!=null&&l.translateVarName)v[l.translateVarName]=l.translate+"px";}return v;};
         const inUI=el=>el&&el.closest&&el.closest("[data-timeline-panel],[data-tl-ui]");
         const safeMatches=(el,sel)=>{ if(!sel)return false; try{return el.matches(sel);}catch{return false;} };
         const fresh=sel=>{ if(!sel)return []; try{return Array.from(document.querySelectorAll(sel)).filter(e=>!inUI(e));}catch{return [];} };

package/package.json

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

@@ -265,16 +265,20 @@ const RECIPES_BLOCK = [
   "- Card hover tilt: 3D tilt toward the pointer (19-card-tilt.md)",
   "- Plus to menu morph: a circular trigger becomes the surface it opens (20-plus-menu-morph.md)",
   "- Accordion expand: a collapsible body grows/shrinks in height (21-accordion.md)",
-  "Recipe non-resting values — the pre-blur/pre-scale the recipe animates FROM (settling to blur 0 / scale 1). When you pick one of these recipes you MUST also emit a lane-level value patch for it, EVEN IF the input has no such lane (add the lane so the element gains the recipe's blur/scale):",
+  "Recipe non-resting values — the pre-blur/pre-scale/slide-distance the recipe animates FROM (settling to blur 0 / scale 1 / translate 0). When you pick one of these recipes you MUST also emit a lane-level value patch for EACH of its values, EVEN IF the input has no such lane (add the lane so the element gains the recipe's blur/scale/distance):",
   "  - Panel reveal → filter blur 2px (Small)",
-  "  - Page side-by-side → filter blur 3px (Medium) on the sliding page",
-  "  - Icon swap → 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",
   "  - Skeleton loader and reveal → filter blur 2px (Small)",
   "  - Texts reveal → filter blur 3px (Medium)",
   "  - Success check → filter blur 8px (Large)",
   "  - Modal open/close → transform scale 0.96 (Large)",
   "  - Menu dropdown → transform scale 0.97 (Medium) open, 0.99 (Tiny) close",
   "  - Tooltip open/close → transform scale 0.98 (Small)",
+  "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.",
+  "  - 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");
 
@@ -305,7 +309,7 @@ function buildPrompt(job) {
     "",
     "Infer each declaration's USAGE (modal close, dropdown open, tooltip, badge, resize, color/theme change…) from the label/selector. Match on usage intent, not the nearest number.",
     "",
-    "Some timings carry VALUES too: a `transform` lane may include `scale` (its non-resting pre-scale, e.g. 0.8) and a `filter` lane may include `blur` (its non-resting pre-blur in px). When present, also check these against the Scales/Blur tokens by USAGE (a dropdown-open surface should pre-scale to 0.97, not whatever number it has) and propose a fix when they differ. A lane may also carry `varName` (the CSS custom property backing the value) — pass it straight through in the patch so the edit targets that variable.",
+    "Some timings carry VALUES too: a `transform` lane may include `scale` (its non-resting pre-scale, e.g. 0.8) and/or `translate` (its non-resting slide distance in px, e.g. 30), and a `filter` lane may include `blur` (its non-resting pre-blur in px). When present, also check these against the Scales/Blur tokens and the recipe values by USAGE (a dropdown-open surface should pre-scale to 0.97, not whatever number it has; a page slide should travel the recipe's distance) and propose a fix when they differ. A lane may also carry `varName` / `translateVarName` (the CSS custom property backing each value) — pass them straight through in the patch so the edit targets that variable.",
     "",
   ];
   if (needsRecipe) {
@@ -317,7 +321,7 @@ function buildPrompt(job) {
     );
     if (multiPhase) {
       lines.push(
-        "RELATED PHASES: `phases` lists this transition's related states (e.g. open AND close). They are ONE motion — a recipe swap must update them TOGETHER. For the replace suggestion emit a `patches` array with ONE timing entry per phase in `phases`, shaped `{\"phase\":<phase>,\"property\":\"all\",\"durationMs\":...,\"easing\":...}`. If the recipe uses transform pre-scale or filter pre-blur (see \"Recipe non-resting values\" above), add EXTRA per-lane value patches for those lanes (not property:\"all\"), e.g. `{\"phase\":\"open\",\"property\":\"transform\",\"member\":\"Panel\",\"varName\":\"--dropdown-pre-scale\",\"scale\":0.97}` and `{\"phase\":\"open\",\"property\":\"filter\",\"member\":\"Panel\",\"varName\":\"--panel-blur\",\"blur\":2}`. Copy each lane's `member` + `varName` from the input timings when that lane exists; when the recipe adds a lane the input LACKS (e.g. Page side-by-side prescribes a 3px blur but the captured page has no `filter` lane), STILL emit the blur patch — reuse the sibling lane's `member` so it targets the right element and omit `varName`. Take each phase duration from MOTION TOKENS (open usually slower than close, e.g. 250ms/150ms). Also include a single `patch` for live preview (first timing patch is fine). Apply will write every phase from `patches`.",
+        "RELATED PHASES: `phases` lists this transition's related states (e.g. open AND close). They are ONE motion — a recipe swap must update them TOGETHER. For the replace suggestion emit a `patches` array with ONE timing entry per phase in `phases`, shaped `{\"phase\":<phase>,\"property\":\"all\",\"durationMs\":...,\"easing\":...}`. If the recipe uses transform pre-scale, filter pre-blur or a slide distance (see \"Recipe non-resting values\" above), add EXTRA per-lane value patches for those lanes (not property:\"all\"), e.g. `{\"phase\":\"open\",\"property\":\"transform\",\"member\":\"Panel\",\"varName\":\"--dropdown-pre-scale\",\"scale\":0.97}`, `{\"phase\":\"open\",\"property\":\"filter\",\"member\":\"Panel\",\"varName\":\"--panel-blur\",\"blur\":2}` or `{\"phase\":\"forward\",\"property\":\"transform\",\"member\":\"Page panel\",\"translateVarName\":\"--page-slide-distance\",\"translate\":8}`. Copy each lane's `member` + `varName`/`translateVarName` from the input timings when that lane exists; when the recipe adds a lane the input LACKS (e.g. Page side-by-side prescribes a 3px blur but the captured page has no `filter` lane), STILL emit the value patch — reuse the sibling lane's `member` so it targets the right element and omit the var name (Apply discovers the page's backing variable itself). Set each phase's `durationMs` AND `easing` from \"Recipe timing & easing\" above (SYMMETRIC recipes use the SAME duration+easing for every phase — do NOT split open/close; ASYMMETRIC recipes use open 250ms / close 150ms). The added value lanes (blur/translate) automatically inherit their phase's timing on Apply, so you don't need to repeat duration/easing on those lane-level patches. Also include a single `patch` for live preview (first timing patch is fine). Apply will write every phase from `patches`.",
         "",
       );
     }
@@ -327,7 +331,7 @@ function buildPrompt(job) {
       "refineType is \"replace\": suggest a WHOLE-TRANSITION replacement ONLY — do NOT propose motion-token tweaks (no kind \"duration\"/\"delay\"/\"easing\").",
       multiPhase
         ? "Pick the SINGLE best-fit recipe from the list above. Emit ONE suggestion with kind \"replace\": include the `patches` array (one entry per related phase, as described above) AND a single `patch` (the first phase) for the live preview, add a `reference` field with the reference filename, and name the recipe in `title`/`reason`. If no recipe genuinely fits the usage, return an empty suggestions array."
-        : "Pick the SINGLE best-fit recipe from the list above. Emit ONE suggestion with kind \"replace\": set its `patch` to the motion-token duration/easing for the recipe's phase on the property that already transitions (or \"all\") so Apply works live, add a `reference` field with the reference filename, and name the recipe in `title`/`reason`. If the recipe prescribes a non-resting pre-blur/pre-scale (see \"Recipe non-resting values\" above), put that value on the `patch` too (add `blur` for a filter-blur recipe like Page side-by-side → 3px, `scale` for a scale recipe) so the sliding/scaling element gains it even when the captured transition had no such lane. If no recipe genuinely fits the usage, return an empty suggestions array.",
+        : "Pick the SINGLE best-fit recipe from the list above. Emit ONE suggestion with kind \"replace\": set its `patch` to the recipe's documented duration AND easing (see \"Recipe timing & easing\" — do NOT keep the source's easing when the recipe differs) on the property that already transitions (or \"all\") so Apply works live, add a `reference` field with the reference filename, and name the recipe in `title`/`reason`. If the recipe prescribes a non-resting pre-blur/pre-scale/slide-distance (see \"Recipe non-resting values\" above), put those values on the `patch` too (add `blur` for a filter-blur recipe like Page side-by-side → 3px, `scale` for a scale recipe, `translate` for a slide distance like Page side-by-side → 8px) so the sliding/scaling element gains them even when the captured transition had no such lane. If no recipe genuinely fits the usage, return an empty suggestions array.",
       "Answer in ONE response — do NOT read or search files.",
     );
   } else if (refineType === "both") {
@@ -337,7 +341,7 @@ function buildPrompt(job) {
       MISSING_BLUR_NOTE,
       multiPhase
         ? "(2) Whole-transition replacement (kind \"replace\"): ALWAYS evaluate one — pick the SINGLE best-fit recipe. Emit at most ONE \"replace\" suggestion with the `patches` array (one entry per related phase) AND a single `patch` (the first phase), a `reference` field, and the recipe named in `title`/`reason`. If no recipe genuinely fits, omit the replace suggestion."
-        : "(2) Whole-transition replacement (kind \"replace\"): ALWAYS evaluate one — pick the SINGLE best-fit recipe from the list above. Emit at most ONE \"replace\" suggestion: set its `patch` to the motion-token duration/easing for the recipe's phase on the property that already transitions (or \"all\"); if the recipe prescribes a non-resting pre-blur/pre-scale (see \"Recipe non-resting values\" above) put that `blur`/`scale` on the `patch` too so e.g. Page side-by-side gains its 3px blur. Add a `reference` field with the reference filename, and name the recipe in `title`/`reason`. If no recipe genuinely fits, omit the replace suggestion.",
+        : "(2) Whole-transition replacement (kind \"replace\"): ALWAYS evaluate one — pick the SINGLE best-fit recipe from the list above. Emit at most ONE \"replace\" suggestion: set its `patch` to the recipe's documented duration AND easing (see \"Recipe timing & easing\" — do NOT keep the source's easing when the recipe differs) on the property that already transitions (or \"all\"); if the recipe prescribes a non-resting pre-blur/pre-scale/slide-distance (see \"Recipe non-resting values\" above) put those `blur`/`scale`/`translate` values on the `patch` too so e.g. Page side-by-side gains its 3px blur and 8px distance. Add a `reference` field with the reference filename, and name the recipe in `title`/`reason`. If no recipe genuinely fits, omit the replace suggestion.",
       "Answer in ONE response — do NOT read or search files.",
     );
   } else {
@@ -354,8 +358,8 @@ function buildPrompt(job) {
     'A scale tweak looks like {"id":"transform-scale","kind":"scale","property":"transform","member":"Menu","title":"Scale → Medium","from":"0.8","to":"0.97","patch":{"property":"transform","member":"Menu","scale":0.97},"reason":"…"}; a blur tweak like {"id":"filter-blur","kind":"blur","property":"filter","member":"Panel","title":"Blur → Small","from":"8px","to":"2px","patch":{"property":"filter","member":"Panel","blur":2},"reason":"…"}.',
     "CRITICAL — `member`: every suggestion and its `patch` MUST echo the `member` of the input lane it came from, copied VERBATIM from that lane in the data above. This is REQUIRED whenever any input lane carries a `member` — most importantly when several lanes share the same `property` (e.g. a dropdown where a caret does `transform: rotate` AND a panel does `transform: scale`): the `member` is the ONLY way to tell which lane a `transform` tweak targets. Omitting it mislabels the suggestion onto the wrong element. Omit `member` only for lanes that genuinely have none.",
     multiPhase
-      ? 'A multi-phase replace suggestion ALSO carries a `patches` array. Put timing in phase-level entries (`property:"all"`, duration/easing), and put scale/blur in lane-level entries (`property:"transform"`/`"filter"` plus the lane `member` and `varName` from input timings). In each `patch`/`patches` entry include only changed fields (durationMs, delayMs, easing, scale, blur — plus `member` copied from input lane and `varName` when present); `property` must match an input property or "all".'
-      : 'In each `patch` include only the changed fields (durationMs, delayMs, easing, scale, blur — plus `member` copied from the input lane, and `varName` if the input lane had one); `property` must match an input property or "all". If nothing should change, return an empty suggestions array.',
+      ? 'A multi-phase replace suggestion ALSO carries a `patches` array. Put timing in phase-level entries (`property:"all"`, duration/easing), and put scale/blur/translate in lane-level entries (`property:"transform"`/`"filter"` plus the lane `member` and `varName`/`translateVarName` from input timings). In each `patch`/`patches` entry include only changed fields (durationMs, delayMs, easing, scale, blur, translate — plus `member` copied from input lane and `varName`/`translateVarName` when present); `property` must match an input property or "all".'
+      : 'In each `patch` include only the changed fields (durationMs, delayMs, easing, scale, blur, translate — plus `member` copied from the input lane, and `varName`/`translateVarName` if the input lane had one); `property` must match an input property or "all". If nothing should change, return an empty suggestions array.',
   );
   return lines.join("\n");
 }
@@ -503,7 +507,7 @@ function buildApplyPrompt(job) {
     "",
     "Steps:",
     "1. Find where this transition is defined in the source. Search by the per-change `selector`/`member`, the `component` hint, and class names. Handle plain CSS, CSS Modules, styled-components/emotion template literals, Tailwind utilities/config, inline style objects, and Motion/Framer variants — the browser selector is a hint, the real declaration may live in any of these.",
-    "2. For each change, edit the source so that property's transition uses the `to` values. A change's `to` may include timing (durationMs in ms, easing, delayMs in ms) AND/OR values: `scale` (the non-resting transform pre-scale, e.g. set `transform: scale(0.97)` on the pre-open/closed state — never the resting scale(1)) and `blur` (the non-resting filter pre-blur in px, e.g. `filter: blur(2px)` on that same state). If the change carries `varName`, the value is backed by that CSS custom property — update the variable's value at its definition instead of the inline declaration. Keep the file's existing unit/format conventions (e.g. `0.25s` vs `250ms`) and only touch the named property on the right member + phase.",
+    "2. For each change, edit the source so that property's transition uses the `to` values. A change's `to` may include timing (durationMs in ms, easing, delayMs in ms) AND/OR values: `scale` (the non-resting transform pre-scale, e.g. set `transform: scale(0.97)` on the pre-open/closed state — never the resting scale(1)), `blur` (the non-resting filter pre-blur in px, e.g. `filter: blur(2px)` on that same state) and `translate` (the non-resting slide distance in px — the offset the element travels from, keeping the existing direction/sign convention). A change with `added:true` introduces a lane the source never animated — add that property to the transition (with the `to` timing) AND give the pre-state its non-resting value from the paired value change. If the change carries `varName`, the value is backed by that CSS custom property — update the variable's value at its definition instead of the inline declaration. Keep the file's existing unit/format conventions (e.g. `0.25s` vs `250ms`) and only touch the named property on the right member + phase.",
     "3. Make the minimal edit. Do not reformat or change unrelated code.",
     "",
     'Output ONLY a JSON object — no prose, no markdown fences — shaped exactly like:',