@qwertybit/pr-preview 0.1.3 → 0.1.4

package/dist/inpage/recorder.global.js

@@ -257,27 +257,40 @@
   }
 
   // src/recorder/inpage/cursor.ts
-  var CURSOR_SVG = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.36Z" fill="#1a1a2e" stroke="#fff" stroke-width="1.5"/></svg>`;
+  var CURSOR_SVG = `<svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.36Z" fill="#1a1a2e" stroke="#fff" stroke-width="1.5"/></svg>`;
   function ease(t) {
     return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
   }
+  function easeOut(t) {
+    return 1 - Math.pow(1 - t, 3);
+  }
   function installCursor() {
     if (window.__prPreviewCursor) return;
     let el = null;
     let pos = { x: (window.innerWidth || 1280) / 2, y: (window.innerHeight || 800) / 2 };
+    let scale = 1;
     function ensure() {
       if (el && document.body.contains(el)) return el;
       el = document.createElement("div");
       el.id = "__pr-preview-cursor";
-      el.style.cssText = "position:fixed;z-index:2147483647;pointer-events:none;width:24px;height:24px;transition:none;will-change:transform;display:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));";
-      el.innerHTML = CURSOR_SVG;
+      el.style.cssText = "position:fixed;left:0;top:0;width:0;height:0;z-index:2147483647;pointer-events:none;transform-origin:0 0;transition:none;will-change:transform;display:none;";
+      const halo = document.createElement("div");
+      halo.style.cssText = "position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,rgba(79,142,247,.45) 0%,rgba(79,142,247,.18) 42%,rgba(79,142,247,0) 70%);";
+      const arrow = document.createElement("div");
+      arrow.style.cssText = "position:absolute;left:-6px;top:-5px;width:40px;height:40px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));";
+      arrow.innerHTML = CURSOR_SVG;
+      el.appendChild(halo);
+      el.appendChild(arrow);
       document.body.appendChild(el);
       return el;
     }
+    function apply() {
+      const node = ensure();
+      node.style.transform = `translate(${pos.x}px, ${pos.y}px) scale(${scale})`;
+    }
     function place(x, y) {
       pos = { x, y };
-      const node = ensure();
-      node.style.transform = `translate(${x}px, ${y}px)`;
+      apply();
     }
     window.__prPreviewCursor = {
       show(x, y) {
@@ -290,28 +303,80 @@
           const node = ensure();
           node.style.display = "block";
           const from = { ...pos };
-          const dist = Math.hypot(x - from.x, y - from.y);
-          const dur = Math.max(140, Math.min(durationMs, dist * 0.7));
+          const dx = x - from.x;
+          const dy = y - from.y;
+          const dist = Math.hypot(dx, dy);
           if (dist < 1) {
+            place(x, y);
             resolve();
             return;
           }
+          const dur = Math.max(280, Math.min(durationMs, dist * 0.9));
+          const ux = dx / dist;
+          const uy = dy / dist;
+          const nx = -uy;
+          const ny = ux;
+          const overshoot = dist > 70 ? Math.min(dist * 0.08, 14) : 0;
+          const aim = { x: x + ux * overshoot, y: y + uy * overshoot };
+          const adx = aim.x - from.x;
+          const ady = aim.y - from.y;
+          const arc = Math.min(dist * 0.16, 55) * (Math.random() < 0.5 ? -1 : 1);
+          const cx = from.x + adx * 0.5 + nx * arc;
+          const cy = from.y + ady * 0.5 + ny * arc;
+          const jitter = Math.min(dist * 0.02, 3.5);
+          const ballisticDur = overshoot ? dur * 0.82 : dur;
+          const correctDur = 150;
+          const correct = (from2, c0) => {
+            const t = Math.min(1, (performance.now() - c0) / correctDur);
+            const k = easeOut(t);
+            place(from2.x + (x - from2.x) * k, from2.y + (y - from2.y) * k);
+            if (t < 1) requestAnimationFrame(() => correct(from2, c0));
+            else {
+              place(x, y);
+              resolve();
+            }
+          };
           const t0 = performance.now();
-          const tick = (now) => {
-            const t = Math.min(1, (now - t0) / dur);
+          const ballistic = (now) => {
+            const t = Math.min(1, (now - t0) / ballisticDur);
             const k = ease(t);
-            place(from.x + (x - from.x) * k, from.y + (y - from.y) * k);
-            if (t < 1) requestAnimationFrame(tick);
-            else resolve();
+            const mt = 1 - k;
+            let px = mt * mt * from.x + 2 * mt * k * cx + k * k * aim.x;
+            let py = mt * mt * from.y + 2 * mt * k * cy + k * k * aim.y;
+            if (t < 0.9) {
+              const fade = 1 - t / 0.9;
+              px += (Math.random() * 2 - 1) * jitter * fade;
+              py += (Math.random() * 2 - 1) * jitter * fade;
+            }
+            place(px, py);
+            if (t < 1) requestAnimationFrame(ballistic);
+            else if (overshoot) correct({ x: aim.x, y: aim.y }, performance.now());
+            else {
+              place(x, y);
+              resolve();
+            }
           };
-          requestAnimationFrame(tick);
+          requestAnimationFrame(ballistic);
         });
       },
       clickPulse() {
         return new Promise((resolve) => {
           const ring = document.createElement("div");
-          ring.style.cssText = `position:fixed;z-index:2147483646;pointer-events:none;left:${pos.x - 14}px;top:${pos.y - 14}px;width:28px;height:28px;border-radius:50%;border:3px solid #4f8ef7;opacity:.9;transform:scale(.4);transition:transform .3s ease-out,opacity .3s ease-out;`;
+          ring.style.cssText = `position:fixed;z-index:2147483646;pointer-events:none;left:${pos.x - 22}px;top:${pos.y - 22}px;width:44px;height:44px;border-radius:50%;border:3px solid #4f8ef7;opacity:.9;transform:scale(.4);transition:transform .3s ease-out,opacity .3s ease-out;`;
           document.body.appendChild(ring);
+          const pressT0 = performance.now();
+          const PRESS_MS = 200;
+          const press = (now) => {
+            const p = Math.min(1, (now - pressT0) / PRESS_MS);
+            scale = 1 - 0.18 * Math.sin(p * Math.PI);
+            apply();
+            if (p < 1) requestAnimationFrame(press);
+            else {
+              scale = 1;
+              apply();
+            }
+          };
+          requestAnimationFrame(press);
           requestAnimationFrame(() => {
             ring.style.transform = "scale(1.4)";
             ring.style.opacity = "0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwertybit/pr-preview",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Record a UI journey once, get polished before/after MP4 clips of every pull request — automatically.",
   "license": "MIT",
   "author": "QwertyBit <vlad@flowpoint.ai>",
@@ -57,6 +57,7 @@
     "frontend"
   ],
   "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "commander": "^12.1.0",
     "get-port": "^7.1.0",
     "gifenc": "^1.0.3",