transitions-refine 0.3.27 → 0.3.29

package/demo.html

@@ -2633,9 +2633,12 @@
             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;
@@ -4869,11 +4872,55 @@
         // 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
+        // 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={};
@@ -4910,20 +4957,31 @@
           // (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??(base&&base.durationMs)??250,
-            delayMs:p.delayMs??(base&&base.delayMs)??0,
-            easing:p.easing??(base&&base.easing)??"ease",
+            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);
-                if(ov)registry.setPropOverride(target.id,lane.laneId,ov);
+                // 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;
             }

package/package.json

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

@@ -268,13 +268,18 @@ const RECIPES_BLOCK = [
   "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) AND transform translate distance 8px, both on the sliding page",
-  "  - Icon swap → filter blur 2px (Small)",
+  "  - 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.",
+  "  - 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");
 
@@ -317,7 +322,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, 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). 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 +332,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/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.",
+        : "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 +342,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/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.",
+        : "(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 {