transitions-refine 0.3.24 → 0.3.26

package/demo.html

@@ -2891,10 +2891,16 @@
     // Token-faithful tweaks for one lane list (mirrors refineTimings()).
     function _txTokenTweaks(timings, ctx){
       const out=[]; const c=ctx||{};
+      const blurByMember=new Map(); // memberKey -> {member,hint,sawBlur,varName}
       for(const t of (timings||[])){
         const prop=t.property||"all";
         const member=t.member||null;
         const hint=[c.label,c.selector,c.phase,t.property,t.member].filter(Boolean).join(" ");
+        const memberKey=member||"__all__";
+        if(!blurByMember.has(memberKey))blurByMember.set(memberKey,{member,hint,sawBlur:false,varName:null});
+        const bm=blurByMember.get(memberKey);
+        bm.hint=[bm.hint,hint].filter(Boolean).join(" ");
+        if(t.varName&&(!bm.varName||prop==="filter"))bm.varName=t.varName;
         const mp=(rest)=> member ? {member, ...rest} : rest;
         if(Number.isFinite(t.durationMs)){const {token,delta}=_txNearest(_TX_DUR_TOKENS,t.durationMs);
           if(delta>10)out.push({id:"mock-"+prop+"-duration",kind:"duration",property:prop,member,
@@ -2911,11 +2917,23 @@
             patch:mp({property:prop,scale:token.v,...(t.varName?{varName:t.varName}:{})}),
             reason:token.name+" ("+token.v+") is the transitions.dev scale token for "+token.usage+". "+t.scale+" is "+(usage?"off the usage token":"off-grid")+"."});}
         if(Number.isFinite(t.blur)&&t.blur>1e-4){const usage=_txBlurUsage(hint);const {token:near,delta}=_txNearest(_TX_BLUR_TOKENS,t.blur);const token=usage||near;
+          bm.sawBlur=true;
           if(token&&(usage||delta>0.5)&&Math.abs(token.v-t.blur)>1e-4)out.push({id:"mock-"+prop+"-blur",kind:"blur",property:prop,member,
             title:"Blur → "+token.name,from:t.blur+"px",to:token.v+"px",
             patch:mp({property:prop,blur:token.v,...(t.varName?{varName:t.varName}:{})}),
             reason:token.name+" ("+token.v+"px) is the transitions.dev blur token for "+token.usage+". "+t.blur+"px is "+(usage?"off the usage token":"off-grid")+"."});}
       }
+      // Missing-blur detection (demo parity with server token engine).
+      for(const [memberKey,info] of blurByMember){
+        if(info.sawBlur)continue;
+        const token=_txBlurUsage(info.hint);
+        if(!token)continue;
+        const member=info.member||null;
+        out.push({id:"mock-"+memberKey+"-blur-add",kind:"blur",property:"filter",member,
+          title:"Blur → "+token.name,from:"0px",to:token.v+"px",
+          patch:{property:"filter",blur:token.v,...(member?{member}:{}),...(info.varName?{varName:info.varName}:{})},
+          reason:token.name+" ("+token.v+"px) is the transitions.dev blur token for "+token.usage+". This transition currently has no blur."});
+      }
       return out;
     }
     // refine → token-faithful suggestions (same verdict the shipped agent reaches)
@@ -2938,15 +2956,20 @@
       // property and needs the var name, which only the scanned timings know.
       const reqPhases = (request && Array.isArray(request.phases)) ? request.phases.filter(p=>p&&p.phase) : [];
       const recipeScale = ph => /close/i.test(ph)?0.99:0.97;
+      const recipeBlur  = ph => /close/i.test(ph)?2:2;
       const recipeDur   = ph => /close/i.test(ph)?150:250;
       // one scale patch per transform/filter lane that has a backing var, so the
       // applied override carries {scale, varName} and the live var gets written.
       const scalePatchesFor = (phase, timings) => (timings||[])
         .filter(tt=>tt.varName && tt.scale!=null)
         .map(tt=>({phase, property:tt.property, member:tt.member||null, varName:tt.varName, scale:recipeScale(phase)}));
+      const blurPatchesFor = (phase, timings) => (timings||[])
+        .filter(tt=>tt.varName && tt.blur!=null)
+        .map(tt=>({phase, property:tt.property, member:tt.member||null, varName:tt.varName, blur:recipeBlur(phase)}));
       const phasePatches = (phase, timings) => [
         {phase, property:"all", durationMs:recipeDur(phase), easing:_TX_EASE},
-        ...scalePatchesFor(phase, timings)];
+        ...scalePatchesFor(phase, timings),
+        ...blurPatchesFor(phase, timings)];
       let replacePatches = reqPhases.length>1
         ? reqPhases.flatMap(p=>phasePatches(p.phase, p.timings))
         : phasePatches((request&&request.phase)||null, t);
@@ -4797,15 +4820,10 @@
         const groupId=active&&active.groupId;
         for(const p of patches){
           if(!p.property)continue;
-          const o={};
-          if(p.durationMs!=null)o.durationMs=p.durationMs;
-          if(p.delayMs!=null)o.delayMs=p.delayMs;
-          if(p.easing!=null)o.easing=p.easing;
-          // value edits: keep the new value, the backing var, and the from-value
-          // (parsed off the suggestion) so computeChanges can write source on Accept.
-          if(p.scale!=null){o.scale=p.scale;o.scaleFrom=(s.from!=null?parseFloat(s.from):undefined);}
-          if(p.blur!=null){o.blur=p.blur;o.blurFrom=(s.from!=null?parseFloat(s.from):undefined);}
-          if(p.varName!=null)o.varName=p.varName;
+          const timingOverride={};
+          if(p.durationMs!=null)timingOverride.durationMs=p.durationMs;
+          if(p.delayMs!=null)timingOverride.delayMs=p.delayMs;
+          if(p.easing!=null)timingOverride.easing=p.easing;
           // resolve the phase entry this patch targets (its sibling open/close
           // lives in the same group); default to the active entry.
           let target=active;
@@ -4820,7 +4838,35 @@
           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];
-          for(const id of ids)registry.setPropOverride(target.id,id,o);
+          if(Object.keys(timingOverride).length){
+            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);
+            }
+          }
         }
         setAppliedIds(prev=>({...prev,[s.id]:true}));
       },[registry,active,entries]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "transitions-refine",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "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/motion-tokens.mjs

@@ -133,6 +133,7 @@ export function refineTimings(timings, ctx) {
   const suggestions = [];
   if (!Array.isArray(timings)) return suggestions;
   const c = ctx || {};
+  const blurByMember = new Map(); // memberKey -> {member,hint,sawBlur,varName}
 
   for (const t of timings) {
     const prop = t.property || "all";
@@ -140,6 +141,13 @@ export function refineTimings(timings, ctx) {
     // with this lane's own property/member so component words (dropdown, modal,
     // page slide…) are visible to the usage matcher.
     const hint = [c.label, c.selector, c.phase, t.hint, t.property, t.member].filter(Boolean).join(" ");
+    const memberKey = t.member || "__all__";
+    if (!blurByMember.has(memberKey)) {
+      blurByMember.set(memberKey, { member: t.member || null, hint, sawBlur: false, varName: null });
+    }
+    const bm = blurByMember.get(memberKey);
+    bm.hint = [bm.hint, hint].filter(Boolean).join(" ");
+    if (t.varName && (!bm.varName || prop === "filter")) bm.varName = t.varName;
 
     // Duration → nearest token (skip if already on-grid or within 10ms).
     if (Number.isFinite(t.durationMs)) {
@@ -199,6 +207,7 @@ export function refineTimings(timings, ctx) {
     // Blur → a transitions.dev blur token (usage-first, nearest fallback). The
     // captured value is the non-resting "pre" blur (settles to 0); skip 0/none.
     if (Number.isFinite(t.blur) && t.blur > 1e-4) {
+      bm.sawBlur = true;
       const usage = pickBlurByUsage(hint);
       const { token: near, delta } = nearestBlur(t.blur);
       const token = usage || near;
@@ -218,5 +227,30 @@ export function refineTimings(timings, ctx) {
     }
   }
 
+  // Missing-blur detection: when usage clearly maps to a blur token but no blur
+  // lane is present, suggest adding one so the motion isn't opacity-only.
+  for (const [memberKey, info] of blurByMember) {
+    if (info.sawBlur) continue;
+    const token = pickBlurByUsage(info.hint);
+    if (!token) continue;
+    const member = info.member;
+    suggestions.push({
+      id: `${memberKey}-blur-add`,
+      kind: "blur",
+      property: "filter",
+      member,
+      title: `Blur → ${token.name}`,
+      from: "0px",
+      to: `${token.px}px`,
+      patch: {
+        property: "filter",
+        blur: token.px,
+        ...(info.varName ? { varName: info.varName } : {}),
+        ...(member ? { member } : {}),
+      },
+      reason: `${token.name} (${token.px}px) is the transitions.dev blur token for ${token.usage}. This transition currently has no blur.`,
+    });
+  }
+
   return suggestions;
 }

package/server/relay.mjs

@@ -265,9 +265,26 @@ 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):",
+  "  - Panel reveal → filter blur 2px (Small)",
+  "  - Page side-by-side → filter blur 3px (Medium) on the sliding page",
+  "  - Icon swap → filter blur 2px (Small)",
+  "  - 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)",
   "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");
 
+// Shared guidance for the token-tweak passes (small + both). Mirrors the
+// deterministic engine's "missing-blur" path: some usages animate a non-resting
+// pre-blur that a bare opacity/transform capture won't show, so the agent must
+// ADD it rather than only tweak blur lanes that already exist.
+const MISSING_BLUR_NOTE =
+  "MISSING BLUR: blur can be ABSENT, not just off-token. When the inferred usage clearly implies a non-resting pre-blur per the Blur tokens above (e.g. a page slide / page side-by-side panel → 3px Medium; an icon swap, text swap, panel reveal, skeleton reveal or number pop-in → 2px Small; a text reveal → 3px Medium; a success check → 8px Large) but the input timings carry NO `filter` lane, ADD one: emit a `blur` suggestion with `property:\"filter\"`, `from:\"0px\"`, `to` the usage token (e.g. \"3px\"), echoing the `member` (and `varName` if present) of the sibling lanes so the sliding/swapping element gains the recipe's blur. Only add blur when the usage genuinely calls for it — never on motion that is intentionally opacity-only (a plain fade, a colour/theme change).";
+
 function buildPrompt(job) {
   const r = job.request || {};
   const rawType = r.refineType || "small";
@@ -300,7 +317,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 entry per phase in `phases`, each shaped `{\"phase\":<that phase's name verbatim>,\"property\":\"all\",\"durationMs\":<recipe duration for THAT phase>,\"easing\":<recipe easing>,\"scale\":<recipe pre-scale for THAT phase>,\"blur\":<recipe pre-blur px for THAT phase>}`. Take each phase's duration from the MOTION TOKENS for that phase — open is usually slower than close (e.g. 250ms open / 150ms close) — and use the same easing for both unless the recipe differs. Include `scale`/`blur` ONLY when the recipe animates transform-scale / filter-blur (omit them otherwise), using the Scales/Blur tokens for that phase. Also include a single `patch` equal to the FIRST phase's entry (it drives the live preview). 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 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`.",
         "",
       );
     }
@@ -310,21 +327,23 @@ 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 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.",
       "Answer in ONE response — do NOT read or search files.",
     );
   } else if (refineType === "both") {
     lines.push(
       "refineType is \"both\": produce TWO independent groups in the SAME suggestions array — the UI shows them in separate tabs, so include each group whenever it applies.",
       "(1) Motion-token tweaks (kind \"duration\"/\"delay\"/\"easing\"/\"scale\"/\"blur\"): for each declaration, propose the token value only where it DIFFERS from the current one. Use \"scale\" for an off-token transform pre-scale and \"blur\" for an off-token filter pre-blur, picked by usage.",
+      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\"), 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 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.",
       "Answer in ONE response — do NOT read or search files.",
     );
   } else {
     lines.push(
       "refineType is \"small\": suggest motion-token tweaks ONLY — for each declaration, propose the token value only where it DIFFERS from the current one (kind \"duration\"/\"delay\"/\"easing\"/\"scale\"/\"blur\"). Use \"scale\" for an off-token transform pre-scale and \"blur\" for an off-token filter pre-blur, picked by usage. Do NOT propose a whole-transition replacement (no kind \"replace\") — the Replace tab requests that separately.",
+      MISSING_BLUR_NOTE,
       "Answer in ONE response using ONLY the data above. Do NOT read or search files, run tools, spawn subagents, or explore the codebase — the motion tokens contain everything you need. This is a quick judgement, not a coding task.",
     );
   }
@@ -335,7 +354,7 @@ 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, e.g. "patches":[{"phase":"open","property":"all","durationMs":250,"easing":"cubic-bezier(0.22, 1, 0.36, 1)","scale":0.97},{"phase":"close","property":"all","durationMs":150,"easing":"cubic-bezier(0.22, 1, 0.36, 1)","scale":0.99}]. In each `patch`/`patches` entry 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".'
+      ? '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.',
   );
   return lines.join("\n");