transitions-refine 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "transitions-refine",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "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/inject.mjs

@@ -14,6 +14,7 @@ import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 
 const DEMO_PATH = fileURLToPath(new URL("../demo.html", import.meta.url));
+const PKG_PATH = fileURLToPath(new URL("../package.json", import.meta.url));
 
 // Absolute module URLs so the injected script works without an import map.
 const REACT_URL = "https://esm.sh/react@19";
@@ -40,7 +41,7 @@ function stripSkipRegions(css) {
   return css.replace(/\/\*\s*@inject-skip-start[\s\S]*?@inject-skip-end\s*\*\//g, "").trim();
 }
 
-function buildJs(scriptSrc) {
+function buildJs(scriptSrc, version) {
   let js = scriptSrc;
   // Drop everything from the demo-only boxes onward (App + createRoot render).
   const cut = js.indexOf(CUT_MARKER);
@@ -57,7 +58,7 @@ function buildJs(scriptSrc) {
   // works on any port the CLI chose (the script is served BY the relay).
   js = js.replace(
     /(import\s+\{\s*createPortal\s*\}\s+from\s+"[^"]+";)/,
-    `$1\n    try { if (typeof window !== "undefined" && !window.REFINE_RELAY_URL) window.REFINE_RELAY_URL = new URL(import.meta.url).origin; } catch (e) {}`
+    `$1\n    try { if (typeof window !== "undefined") { if (!window.REFINE_RELAY_URL) window.REFINE_RELAY_URL = new URL(import.meta.url).origin; window.__TX_REFINE_VERSION = ${JSON.stringify(version || "")}; } } catch (e) {}`
   );
 
   return js.trim();
@@ -112,8 +113,11 @@ export async function buildInjectModule({ noCache = false } = {}) {
     throw new Error("inject: could not locate <style> or module <script> in demo.html");
   }
 
+  let version = "";
+  try { version = JSON.parse(await readFile(PKG_PATH, "utf8")).version || ""; } catch (e) {}
+
   const css = stripSkipRegions(styleSrc);
-  const js = buildJs(scriptSrc);
+  const js = buildJs(scriptSrc, version);
   _cache = `${js}\n${buildEpilogue(css)}`;
   return _cache;
 }

package/server/motion-tokens.mjs

@@ -78,10 +78,11 @@ export function refineTimings(timings) {
           id: `${prop}-duration`,
           kind: "duration",
           property: prop,
+          member: t.member || null,
           title: `Duration → ${token.name}`,
           from: `${t.durationMs}ms`,
           to: `${token.ms}ms`,
-          patch: { property: prop, durationMs: token.ms },
+          patch: { property: prop, durationMs: token.ms, ...(t.member ? { member: t.member } : {}) },
           reason: `${token.name} (${token.ms}ms) is the closest motion token — used for ${token.usage}. ${t.durationMs}ms is off-grid.`,
         });
       }
@@ -93,10 +94,11 @@ export function refineTimings(timings) {
         id: `${prop}-easing`,
         kind: "easing",
         property: prop,
+        member: t.member || null,
         title: `Easing → Smooth ease out`,
         from: t.easing,
         to: SMOOTH_OUT,
-        patch: { property: prop, easing: SMOOTH_OUT },
+        patch: { property: prop, easing: SMOOTH_OUT, ...(t.member ? { member: t.member } : {}) },
         reason: `"${t.easing}" is a generic curve. The transitions.dev standard ease-out reads more intentional on opens, closes, slides, and resizes.`,
       });
     }