transitions-refine 0.3.23 → 0.3.25

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "transitions-refine",
-  "version": "0.3.23",
+  "version": "0.3.25",
   "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": {
-    "refine": "./bin/cli.mjs"
+    "refine": "bin/cli.mjs"
   },
   "files": [
     "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

@@ -300,7 +300,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 also uses transform pre-scale or filter pre-blur, add EXTRA per-lane value patches for those lanes (not property:\"all\") and include that lane's `member` + `varName` from input timings, 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}`. 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`.",
         "",
       );
     }
@@ -335,7 +335,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");