transitions-refine 0.2.0 → 0.3.1

package/package.json

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

@@ -86,15 +86,13 @@ function buildEpilogue(css) {
 
   function InjectedRoot(){
     const registry = useMemo(() => new TransitionRegistry(), []);
-    const preview = useMemo(() => new PreviewController(), []);
     const [activeId, setActiveId] = useState(null);
     useEffect(() => {
       const scanner = new DomScanner(document.body, registry);
-      preview.setScanner(scanner);
       scanner.start();
-      return () => { scanner.stop(); preview.setScanner(null); };
-    }, [registry, preview]);
-    const ctx = useMemo(() => ({ registry, preview, activeId, setActiveId }), [registry, preview, activeId]);
+      return () => { scanner.stop(); };
+    }, [registry]);
+    const ctx = useMemo(() => ({ registry, activeId, setActiveId }), [registry, activeId]);
     return h(TimelineCtx.Provider, { value: ctx }, h(TimelinePanel));
   }
 

package/server/relay.mjs

@@ -16,7 +16,9 @@
 //          and POSTs the result back. This is the default, install-free path.
 //       b) A headless CLI: start the relay with REFINE_AGENT_CMD set and the
 //          relay spawns it once per job (stdin = prompt, stdout = JSON).
-//          e.g.  REFINE_AGENT_CMD='cursor-agent -p' npm run relay
+//          e.g.  REFINE_AGENT_CMD='cursor-agent -p --trust --force' npm run relay
+//          (for cursor-agent the relay auto-appends any missing -p/--trust/--force
+//          so headless jobs don't fail the workspace-trust prompt.)
 //
 // Run: node server/relay.mjs   (or: npm run relay)
 
@@ -31,7 +33,23 @@ import { buildInjectModule } from "./inject.mjs";
 
 const PORT = Number(process.env.REFINE_RELAY_PORT) || 7331;
 const AUTO = process.env.REFINE_AUTO !== "0";
-const AGENT_CMD = process.env.REFINE_AGENT_CMD || null;
+
+// A bare `cursor-agent` goes interactive: it prints "⚠ Workspace Trust Required"
+// and exits 1, so every headless refine/scan/apply job fails. Force the headless
+// trio whenever the command is cursor-agent: -p (print/headless, reads the prompt
+// from stdin), --trust (trust the workspace without prompting; only valid with
+// --print), and --force (auto-allow tool calls so apply/scan don't hang on
+// approval). Append only the missing flags; leave non-cursor-agent commands alone.
+function augmentAgentCmd(cmd) {
+  if (!cmd || !/(^|\s|\/)cursor-agent(\s|$)/.test(cmd)) return cmd;
+  const has = (...flags) => flags.some((f) => new RegExp(`(^|\\s)${f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(\\s|$)`).test(cmd));
+  const extra = [];
+  if (!has("-p", "--print")) extra.push("-p");
+  if (!has("--trust")) extra.push("--trust");
+  if (!has("-f", "--force", "--yolo")) extra.push("--force");
+  return extra.length ? `${cmd} ${extra.join(" ")}` : cmd;
+}
+const AGENT_CMD = augmentAgentCmd(process.env.REFINE_AGENT_CMD || null);
 const AGENT_TIMEOUT_MS = Number(process.env.REFINE_AGENT_TIMEOUT_MS) || 120000;
 const LONGPOLL_MS = Number(process.env.REFINE_LONGPOLL_MS) || 25000;
 // Grace window after a `/refine live` agent's last poll during which LLM mode is
@@ -109,7 +127,8 @@ function nextPendingLlm() {
 
 function buildPrompt(job) {
   const r = job.request || {};
-  const refineType = (r.refineType || "small") === "replace" ? "replace" : "small";
+  const rawType = r.refineType || "small";
+  const refineType = rawType === "replace" ? "replace" : rawType === "both" ? "both" : "small";
   const lines = [
     "You are refining ONE CSS transition against the transitions.dev library and motion tokens.",
     "Read the transitions-dev skill's SKILL.md (look in .agents/skills/transitions-dev/ or ~/.agents/skills/transitions-dev/) and apply its `transitions refine` behaviour, `## Motion tokens`, and `## Decision rules`.",
@@ -125,6 +144,12 @@ function buildPrompt(job) {
       "refineType is \"replace\": suggest a WHOLE-TRANSITION replacement ONLY — do NOT propose motion-token tweaks (no kind \"duration\"/\"delay\"/\"easing\").",
       "Run the skill's `## Decision rules` on the inferred usage, pick the SINGLE best-fit transitions.dev recipe, and read its reference file (e.g. 06-modal.md) for the real timings/easing. Emit ONE suggestion with kind \"replace\": set its `patch` to the recipe's recommended duration/easing for 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`. Never invent timings — quote the reference file. If no recipe genuinely fits the usage, return an empty suggestions array.",
     );
+  } 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\"): for each declaration, propose the token value only where it DIFFERS from the current one.",
+      "(2) Whole-transition replacement (kind \"replace\"): ALWAYS evaluate one — run the skill's `## Decision rules` on the inferred usage, pick the SINGLE best-fit transitions.dev recipe, and read its reference file (e.g. 06-modal.md) for the real timings/easing. Emit at most ONE \"replace\" suggestion: set its `patch` to the recipe's recommended duration/easing for the property that already transitions (or \"all\"), add a `reference` field with the reference filename, and name the recipe in `title`/`reason`. Never invent timings — quote the reference file. If no recipe genuinely fits the usage, simply omit the replace suggestion.",
+    );
   } else {
     lines.push(
       "refineType is \"small\": FIRST suggest motion-token tweaks — for each declaration, propose the token value only where it DIFFERS from the current one (kind \"duration\"/\"delay\"/\"easing\").",
@@ -241,10 +266,18 @@ function buildScanPrompt(job) {
     "Steps:",
     "1. Identify each animated UI component (dropdown, modal, tooltip, accordion, drawer, toast…). Read its source (CSS/CSS Modules, styled-components/emotion, Tailwind, inline styles, Motion/Framer variants).",
     "2. For each component, split into PHASES — typically `open` and `close` (a hover-only component may have a single phase). Open and close often live on different selectors (e.g. `.is-open` vs `.is-closing`) with different timings; report BOTH even though only one is in the DOM right now.",
-    "3. For each phase, list its MEMBER elements (panel, backdrop, the staggered items…). Give each member a stable `id`, a human `label`, a CSS `selector` that resolves in the live DOM, an optional `toState` hint (the class/attribute that drives that phase, e.g. `.is-open`), and its real `propertyTimings` (durationMs, delayMs, easing per animated property). Quote the real timings from source — never invent.",
+    "3. PHASE STATE — how the phase is driven (REQUIRED for playback to work). For each phase provide:",
+    "   - `stateTarget`: a CSS selector for the ONE element whose class/attribute is toggled to drive the whole phase (e.g. the dropdown root, the `.modal`, the element with `[data-open]`). It MUST resolve in the live DOM RIGHT NOW, in any state — so it must NOT itself contain the toggled state (write `.t-morph`, never `.t-morph[data-open=\"true\"]`).",
+    "   - `fromState` and `toState`: the class/attribute on `stateTarget` at the START and END of this phase, as a token: a class `\".is-open\"`, an attribute `\"[data-open=\\\"true\\\"]\"`, or `null`/`\"\"` for the base/no-class state. OPEN usually goes base→open (`fromState:null`, `toState:\".is-open\"`); CLOSE goes open→base (`fromState:\".is-open\"`, `toState:null`). Get the DIRECTION right — open must animate into the open look, close must animate back out.",
+    "4. For each phase, list its MEMBER elements (panel, backdrop, the staggered items…). Give each member a stable `id`, a human `label`, a CSS `selector`, and its real `propertyTimings`. The member `selector` MUST resolve in the live DOM RIGHT NOW regardless of phase — use the BASE element selector and do NOT bake the phase's toggled class/attribute into it (write `.t-morph .t-morph-plus`, never `.t-morph[data-open=\"true\"] .t-morph-plus`). The toggled state belongs only in the phase's `stateTarget`/`toState`.",
+    "5. TIMINGS MUST BE EXACT AND PER-PROPERTY. This is the most common mistake — do not make it:",
+    "   - List one `propertyTimings` entry per animated property. Read EACH property's own duration/delay/easing from the shorthand `transition:` list (or the property-specific longhand). Do NOT copy one property's duration onto the others, and do NOT use the phase's longest/representative duration for every lane.",
+    "   - Resolve CSS custom properties (e.g. `var(--morph-fade-dur)`) to concrete numbers by following the `:root`/scope where they're defined; convert `s`→ms (`0.25s`→250). Never emit a `var(...)` or a guess.",
+    "   - It is normal and expected for properties within one phase to differ (e.g. opacity/filter 200ms but transform 350ms). If every property in a phase ends up identical, re-read the source — you probably collapsed them by mistake.",
+    "   - Open and close usually have DIFFERENT durations/easings; report each from its own rule.",
     "",
     "Output ONLY a JSON object — no prose, no markdown fences — shaped exactly like:",
-    '{"summary":"Grouped 3 components.","groups":[{"id":"dropdown","label":"Dropdown","component":"src/Dropdown.tsx","phases":[{"id":"dropdown:open","phase":"open","label":"Open","members":[{"id":"panel","label":"Panel","selector":".dropdown-panel","toState":".is-open","propertyTimings":[{"property":"opacity","durationMs":200,"delayMs":0,"easing":"ease-out"},{"property":"transform","durationMs":200,"delayMs":0,"easing":"cubic-bezier(0.22, 1, 0.36, 1)"}]}]},{"id":"dropdown:close","phase":"close","label":"Close","members":[{"id":"panel","label":"Panel","selector":".dropdown-panel","toState":".is-closing","propertyTimings":[{"property":"opacity","durationMs":150,"delayMs":0,"easing":"ease-in"}]}]}]}]}',
+    '{"summary":"Grouped 3 components.","groups":[{"id":"dropdown","label":"Dropdown","component":"src/Dropdown.tsx","phases":[{"id":"dropdown:open","phase":"open","label":"Open","stateTarget":".dropdown","fromState":null,"toState":".is-open","members":[{"id":"panel","label":"Panel","selector":".dropdown .dropdown-panel","propertyTimings":[{"property":"opacity","durationMs":200,"delayMs":0,"easing":"ease-out"},{"property":"transform","durationMs":200,"delayMs":0,"easing":"cubic-bezier(0.22, 1, 0.36, 1)"}]}]},{"id":"dropdown:close","phase":"close","label":"Close","stateTarget":".dropdown","fromState":".is-open","toState":null,"members":[{"id":"panel","label":"Panel","selector":".dropdown .dropdown-panel","propertyTimings":[{"property":"opacity","durationMs":150,"delayMs":0,"easing":"ease-in"},{"property":"transform","durationMs":150,"delayMs":0,"easing":"ease-in"}]}]}]}]}',
     "If you cannot confidently group anything, return an empty groups array with a short summary; the panel keeps its flat DOM scan.",
   ].join("\n");
 }
@@ -318,7 +351,7 @@ async function answerJob(job) {
       if (!AGENT_CMD) {
         throw new Error(
           "LLM mode needs an agent CLI. Restart the relay with REFINE_AGENT_CMD set " +
-            "(e.g. REFINE_AGENT_CMD='cursor-agent -p' npm run relay), or switch to the Deterministic tab."
+            "(e.g. REFINE_AGENT_CMD='cursor-agent -p --trust --force' npm run relay), or switch to the Deterministic tab."
         );
       }
       job.statusLog.push({ message: "Asking your agent…", at: now() });