@qwertybit/pr-preview 0.1.0

package/dist/harness/logo-wordmark.svg

@@ -0,0 +1,22 @@
+<svg width="248" height="64" viewBox="0 0 248 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="PR Preview">
+  <defs>
+    <linearGradient id="prp-grad-w" x1="6" y1="4" x2="58" y2="60" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#635BFF"/>
+      <stop offset="1" stop-color="#4B45C6"/>
+    </linearGradient>
+  </defs>
+  <rect x="2" y="2" width="60" height="60" rx="15" fill="url(#prp-grad-w)"/>
+  <g transform="rotate(-9 32 19)">
+    <rect x="13" y="13.5" width="38" height="9.5" rx="2.4" fill="#FFFFFF"/>
+    <path d="M19 13.5 24 23M27 13.5 32 23M35 13.5 40 23M43 13.5 48 23"
+          stroke="#4B45C6" stroke-width="2.3" stroke-linecap="round"/>
+  </g>
+  <rect x="13" y="26" width="38" height="24" rx="4.5" fill="#FFFFFF"/>
+  <g stroke="#4B45C6" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="M23 32 17.5 38 23 44"/>
+    <path d="M41 32 46.5 38 41 44"/>
+    <path d="M35.5 30.5 28.5 45.5" stroke="#635BFF"/>
+  </g>
+  <text x="78" y="40" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif"
+        font-size="26" font-weight="700" fill="#1F2328">PR Preview</text>
+</svg>

package/dist/harness/logo.svg

@@ -0,0 +1,23 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="PR Preview">
+  <defs>
+    <linearGradient id="prp-grad" x1="6" y1="4" x2="58" y2="60" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#635BFF"/>
+      <stop offset="1" stop-color="#4B45C6"/>
+    </linearGradient>
+  </defs>
+  <rect x="2" y="2" width="60" height="60" rx="15" fill="url(#prp-grad)"/>
+  <!-- clapperboard hinge bar (tilted) — the "clip / recording" signal -->
+  <g transform="rotate(-9 32 19)">
+    <rect x="13" y="13.5" width="38" height="9.5" rx="2.4" fill="#FFFFFF"/>
+    <path d="M19 13.5 24 23M27 13.5 32 23M35 13.5 40 23M43 13.5 48 23"
+          stroke="#4B45C6" stroke-width="2.3" stroke-linecap="round"/>
+  </g>
+  <!-- board body -->
+  <rect x="13" y="26" width="38" height="24" rx="4.5" fill="#FFFFFF"/>
+  <!-- </> — the "code" signal -->
+  <g stroke="#4B45C6" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="M23 32 17.5 38 23 44"/>
+    <path d="M41 32 46.5 38 41 44"/>
+    <path d="M35.5 30.5 28.5 45.5" stroke="#635BFF"/>
+  </g>
+</svg>

package/dist/inpage/recorder.global.js

@@ -0,0 +1,344 @@
+"use strict";
+(() => {
+  // src/recorder/inpage/selector.ts
+  var TESTID_ATTRS = ["data-testid", "data-test", "data-cy", "data-qa"];
+  function looksGenerated(id) {
+    if (/^[«:]/.test(id)) return true;
+    if (/\d{4,}/.test(id)) return true;
+    if (/[0-9a-f]{6,}/i.test(id)) return true;
+    if (/^(radix|headlessui|mui|aria)-/i.test(id)) return true;
+    return false;
+  }
+  function cssEscape(value) {
+    return window.CSS && CSS.escape ? CSS.escape(value) : value.replace(/"/g, '\\"');
+  }
+  function looksLikeExampleValue(s) {
+    const t = s.trim();
+    if (!t) return true;
+    return /^[\d.,:%$£€/\\\s+-]+$/.test(t);
+  }
+  function isUnique(selector, el) {
+    try {
+      const root = el.getRootNode();
+      const matches = root.querySelectorAll(selector);
+      return matches.length === 1 && matches[0] === el;
+    } catch {
+      return false;
+    }
+  }
+  function cssPath(el) {
+    const parts = [];
+    let node = el;
+    while (node && node !== document.documentElement && parts.length < 8) {
+      let part = node.tagName.toLowerCase();
+      const parent = node.parentElement;
+      if (parent) {
+        const sameTag = Array.from(parent.children).filter(
+          (c) => c.tagName === node.tagName
+        );
+        if (sameTag.length > 1) {
+          part += `:nth-of-type(${sameTag.indexOf(node) + 1})`;
+        }
+      }
+      parts.unshift(part);
+      if (parent && isUnique(parts.join(" > "), el)) break;
+      node = parent;
+    }
+    return parts.join(" > ");
+  }
+  function buildSelectors(target) {
+    const el = closestInteractive(target) ?? target;
+    const out = [];
+    const push = (sel) => {
+      if (sel && !out.includes(sel) && isUnique(sel, el)) out.push(sel);
+    };
+    for (const attr of TESTID_ATTRS) {
+      const v = el.getAttribute(attr);
+      if (v) push(`[${attr}="${cssEscape(v)}"]`);
+    }
+    if (el.id && !looksGenerated(el.id)) push(`#${cssEscape(el.id)}`);
+    const name = el.getAttribute("name");
+    if (name) push(`${el.tagName.toLowerCase()}[name="${cssEscape(name)}"]`);
+    const ariaLabel = el.getAttribute("aria-label");
+    if (ariaLabel) push(`[aria-label="${cssEscape(ariaLabel)}"]`);
+    const placeholder = el.getAttribute("placeholder");
+    if (placeholder && !looksLikeExampleValue(placeholder)) {
+      push(`[placeholder="${cssEscape(placeholder)}"]`);
+    }
+    const text = (el.textContent ?? "").trim();
+    if (text.length > 0 && text.length <= 40 && !text.includes('"') && ["a", "button", "summary", "label"].includes(el.tagName.toLowerCase())) {
+      const sel = `${el.tagName.toLowerCase()}:has-text("${text}")`;
+      const root = el.getRootNode();
+      const sameText = Array.from(root.querySelectorAll(el.tagName)).filter(
+        (e) => (e.textContent ?? "").trim() === text
+      );
+      if (sameText.length === 1 && !out.includes(sel)) out.push(sel);
+    }
+    const inShadow = el.getRootNode() instanceof ShadowRoot;
+    if (!inShadow) {
+      const path = cssPath(el);
+      if (path && isUnique(path, el)) push(path);
+      if (out.length === 0 && path) out.push(path);
+    }
+    return out;
+  }
+  function closestInteractive(el) {
+    return el.closest(
+      'button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="checkbox"], [role="switch"], label, [onclick], [tabindex]'
+    );
+  }
+
+  // src/recorder/inpage/recorder.ts
+  var SCROLL_IDLE_MS = 250;
+  var start = Date.now();
+  function emit(event) {
+    try {
+      void window.__prPreviewEmit?.(JSON.stringify(event));
+    } catch {
+    }
+  }
+  function frameUrl() {
+    return location.pathname + location.search + location.hash;
+  }
+  function norm(x, max) {
+    return max > 0 ? Math.min(1, Math.max(0, x / max)) : 0;
+  }
+  function realTarget(e) {
+    const path = e.composedPath?.();
+    const first = path && path[0];
+    if (first instanceof Element) return first;
+    return e.target instanceof Element ? e.target : null;
+  }
+  function installRecorder() {
+    if (window.__prPreviewRecorderInstalled) return;
+    window.__prPreviewRecorderInstalled = true;
+    document.addEventListener(
+      "click",
+      (e) => {
+        if (!e.isTrusted) return;
+        if (e.detail === 0) return;
+        const target = realTarget(e);
+        if (!target) return;
+        if (window.__prPreviewRecording) window.__prPreviewCursor?.clickPulse();
+        const el = closestInteractive(target) ?? target;
+        emit({
+          kind: "click",
+          selectors: buildSelectors(target),
+          xNorm: norm(e.clientX, window.innerWidth),
+          yNorm: norm(e.clientY, window.innerHeight),
+          text: (el.textContent ?? "").trim().slice(0, 40) || void 0,
+          frameUrl: frameUrl(),
+          ts: Date.now() - start
+        });
+      },
+      { capture: true }
+    );
+    let mouseRaf = 0;
+    let lastX = 0;
+    let lastY = 0;
+    document.addEventListener(
+      "mousemove",
+      (e) => {
+        if (!e.isTrusted || !window.__prPreviewRecording) return;
+        lastX = e.clientX;
+        lastY = e.clientY;
+        if (mouseRaf) return;
+        mouseRaf = requestAnimationFrame(() => {
+          mouseRaf = 0;
+          window.__prPreviewCursor?.show(lastX, lastY);
+        });
+      },
+      { capture: true, passive: true }
+    );
+    document.addEventListener(
+      "input",
+      (e) => {
+        if (!e.isTrusted) return;
+        const el = realTarget(e);
+        if (!el || !("value" in el)) return;
+        if (el.tagName === "SELECT") return;
+        const type = el.type ?? "";
+        if (["checkbox", "radio", "file", "range", "color"].includes(type)) return;
+        const rect = el.getBoundingClientRect();
+        emit({
+          kind: "input",
+          selectors: buildSelectors(el),
+          value: el.value,
+          xNorm: norm(rect.x + rect.width / 2, window.innerWidth),
+          yNorm: norm(rect.y + rect.height / 2, window.innerHeight),
+          frameUrl: frameUrl(),
+          ts: Date.now() - start
+        });
+      },
+      { capture: true }
+    );
+    document.addEventListener(
+      "change",
+      (e) => {
+        if (!e.isTrusted) return;
+        const el = realTarget(e);
+        if (!(el instanceof HTMLSelectElement)) return;
+        const rect = el.getBoundingClientRect();
+        emit({
+          kind: "select",
+          selectors: buildSelectors(el),
+          value: el.value,
+          xNorm: norm(rect.x + rect.width / 2, window.innerWidth),
+          yNorm: norm(rect.y + rect.height / 2, window.innerHeight),
+          frameUrl: frameUrl(),
+          ts: Date.now() - start
+        });
+      },
+      { capture: true }
+    );
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (!e.isTrusted) return;
+        if (!["Enter", "Escape", "Tab", "ArrowDown", "ArrowUp"].includes(e.key)) return;
+        const target = realTarget(e);
+        emit({
+          kind: "key",
+          key: e.key,
+          selectors: target ? buildSelectors(target) : [],
+          frameUrl: frameUrl(),
+          ts: Date.now() - start
+        });
+      },
+      { capture: true }
+    );
+    let scrollTimer;
+    let lastScrollTarget = "window";
+    document.addEventListener(
+      "scroll",
+      (e) => {
+        if (!e.isTrusted) return;
+        const t = e.target;
+        lastScrollTarget = t === document || t === document.documentElement || t === window ? "window" : t;
+        clearTimeout(scrollTimer);
+        scrollTimer = setTimeout(() => {
+          if (lastScrollTarget === "window") {
+            const doc = document.documentElement;
+            emit({
+              kind: "scroll",
+              target: "window",
+              xNorm: norm(window.scrollX, doc.scrollWidth - window.innerWidth),
+              yNorm: norm(window.scrollY, doc.scrollHeight - window.innerHeight),
+              frameUrl: frameUrl(),
+              ts: Date.now() - start
+            });
+          } else {
+            const el = lastScrollTarget;
+            emit({
+              kind: "scroll",
+              target: buildSelectors(el)[0] ?? "window",
+              xNorm: norm(el.scrollLeft, el.scrollWidth - el.clientWidth),
+              yNorm: norm(el.scrollTop, el.scrollHeight - el.clientHeight),
+              frameUrl: frameUrl(),
+              ts: Date.now() - start
+            });
+          }
+        }, SCROLL_IDLE_MS);
+      },
+      { capture: true, passive: true }
+    );
+    const fireNavigate = () => emit({ kind: "navigate", url: frameUrl(), frameUrl: frameUrl(), ts: Date.now() - start });
+    const wrap = (method) => {
+      const original = history[method].bind(history);
+      history[method] = ((...args) => {
+        const result = original(...args);
+        fireNavigate();
+        return result;
+      });
+    };
+    wrap("pushState");
+    wrap("replaceState");
+    window.addEventListener("popstate", fireNavigate);
+  }
+
+  // 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>`;
+  function ease(t) {
+    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+  }
+  function installCursor() {
+    if (window.__prPreviewCursor) return;
+    let el = null;
+    let pos = { x: (window.innerWidth || 1280) / 2, y: (window.innerHeight || 800) / 2 };
+    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;
+      document.body.appendChild(el);
+      return el;
+    }
+    function place(x, y) {
+      pos = { x, y };
+      const node = ensure();
+      node.style.transform = `translate(${x}px, ${y}px)`;
+    }
+    window.__prPreviewCursor = {
+      show(x, y) {
+        const node = ensure();
+        place(x, y);
+        node.style.display = "block";
+      },
+      moveTo(x, y, durationMs) {
+        return new Promise((resolve) => {
+          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));
+          if (dist < 1) {
+            resolve();
+            return;
+          }
+          const t0 = performance.now();
+          const tick = (now) => {
+            const t = Math.min(1, (now - t0) / dur);
+            const k = ease(t);
+            place(from.x + (x - from.x) * k, from.y + (y - from.y) * k);
+            if (t < 1) requestAnimationFrame(tick);
+            else resolve();
+          };
+          requestAnimationFrame(tick);
+        });
+      },
+      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;`;
+          document.body.appendChild(ring);
+          requestAnimationFrame(() => {
+            ring.style.transform = "scale(1.4)";
+            ring.style.opacity = "0";
+          });
+          setTimeout(() => {
+            ring.remove();
+            resolve();
+          }, 320);
+        });
+      },
+      hide() {
+        if (el) el.style.display = "none";
+      }
+    };
+  }
+
+  // src/recorder/inpage/index.ts
+  (() => {
+    try {
+      if (window.self === window.top) return;
+    } catch {
+    }
+    installRecorder();
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", installCursor);
+    } else {
+      installCursor();
+    }
+  })();
+})();

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@qwertybit/pr-preview",
+  "version": "0.1.0",
+  "description": "Record a UI journey once, get polished before/after MP4 clips of every pull request — automatically.",
+  "license": "MIT",
+  "author": "QwertyBit <vlad@flowpoint.ai>",
+  "homepage": "https://pr-preview.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/QwertyBit-Ventures/pr-preview.git",
+    "directory": "npm_package"
+  },
+  "bugs": {
+    "url": "https://github.com/QwertyBit-Ventures/pr-preview/issues"
+  },
+  "type": "module",
+  "bin": {
+    "pr-preview": "dist/cli/index.js"
+  },
+  "main": "./dist/cli/index.js",
+  "files": [
+    "dist",
+    "assets",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:harness && npm run build:lib",
+    "build:lib": "tsup",
+    "build:harness": "vite build harness",
+    "dev:harness": "vite harness",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run test/unit",
+    "test:e2e": "vitest run test/e2e",
+    "test:all": "vitest run",
+    "test:watch": "vitest test/unit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "pull-request",
+    "pr",
+    "code-review",
+    "demo",
+    "mp4",
+    "gif",
+    "screen-recording",
+    "visual-diff",
+    "before-after",
+    "playwright",
+    "git",
+    "frontend"
+  ],
+  "dependencies": {
+    "commander": "^12.1.0",
+    "get-port": "^7.1.0",
+    "gifenc": "^1.0.3",
+    "jiti": "^2.4.2",
+    "ora": "^8.2.0",
+    "picocolors": "^1.1.1",
+    "playwright": "^1.52.0",
+    "sharp": "^0.33.5",
+    "tree-kill": "^1.2.2",
+    "ws": "^8.18.0",
+    "zod": "^3.24.0"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.0",
+    "@types/node": "^22.10.0",
+    "@types/ws": "^8.5.13",
+    "preact": "^10.25.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vitest": "^2.1.8"
+  }
+}