npm - @remixmate/cli - Versions diffs - 0.1.0 → 0.1.2 - Mend

@remixmate/cli 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

package/skills/web-capture/scripts/_media_screenshot/js/overlay_bootstrap.js ADDED Viewed

@@ -0,0 +1,19 @@
+// Inject the fixed overlay layers used by every storyboard scene.
+// Idempotent: a no-op if already mounted (e.g. across multiple scenes).
+(() => {
+  if (window.__pwOverlayReady) return;
+  const root = document.createElement('div');
+  root.id = '__pw_overlay_root';
+  Object.assign(root.style, {
+    position: 'fixed', inset: '0', pointerEvents: 'none', zIndex: '2147483646',
+  });
+  const fade = document.createElement('div');
+  fade.id = '__pw_overlay_fade';
+  Object.assign(fade.style, {
+    position: 'fixed', inset: '0', background: '#000', opacity: '0',
+    transition: 'opacity 400ms ease', pointerEvents: 'none', zIndex: '2147483647',
+  });
+  document.documentElement.appendChild(root);
+  document.documentElement.appendChild(fade);
+  window.__pwOverlayReady = true;
+})();

package/skills/web-capture/scripts/_media_screenshot/js/page_zoom_in.js ADDED Viewed

@@ -0,0 +1,54 @@
+// Browser-like zoom: scale <body> around the target element's document
+// center. Overlays live on <html> (sibling of body) so they don't get scaled.
+({ selector, targetScale, rampInMs, label, color }) => {
+  const el = document.querySelector(selector);
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const cx = rect.left + window.scrollX + rect.width / 2;
+  const cy = rect.top + window.scrollY + rect.height / 2;
+  const body = document.body;
+  body.dataset.__pwOrigTransform = body.style.transform || '';
+  body.dataset.__pwOrigTransition = body.style.transition || '';
+  body.dataset.__pwOrigOrigin = body.style.transformOrigin || '';
+  const html = document.documentElement;
+  html.dataset.__pwOrigOverflow = html.style.overflow || '';
+  html.style.overflow = 'hidden';
+  body.style.transformOrigin = `${cx}px ${cy}px`;
+  body.style.transition = `transform ${rampInMs}ms cubic-bezier(0.22, 1, 0.36, 1)`;
+  void body.offsetWidth;
+  requestAnimationFrame(() => {
+    body.style.transform = `scale(${targetScale})`;
+  });
+  if (label) {
+    const root = document.getElementById('__pw_overlay_root');
+    const lbl = document.createElement('div');
+    lbl.id = '__pw_zoom_label';
+    lbl.textContent = label;
+    Object.assign(lbl.style, {
+      position: 'fixed',
+      left: '50%',
+      bottom: '48px',
+      transform: 'translateX(-50%) translateY(8px)',
+      padding: '10px 18px',
+      background: color,
+      color: '#fff',
+      fontSize: '20px',
+      fontWeight: '700',
+      borderRadius: '8px',
+      fontFamily: 'system-ui, -apple-system, "Helvetica Neue", sans-serif',
+      boxShadow: '0 6px 18px rgba(0,0,0,0.4)',
+      whiteSpace: 'nowrap',
+      opacity: '0',
+      transition: 'opacity 280ms ease, transform 280ms ease',
+      zIndex: '2147483646',
+      pointerEvents: 'none',
+    });
+    root.appendChild(lbl);
+    setTimeout(() => {
+      lbl.style.opacity = '1';
+      lbl.style.transform = 'translateX(-50%) translateY(0)';
+    }, Math.max(0, rampInMs * 0.55));
+  }
+}

package/skills/web-capture/scripts/_media_screenshot/js/page_zoom_out.js ADDED Viewed

@@ -0,0 +1,11 @@
+// Animate <body> back to scale(1) and fade out the floating label.
+({ rampOutMs }) => {
+  const body = document.body;
+  body.style.transition = `transform ${rampOutMs}ms cubic-bezier(0.22, 1, 0.36, 1)`;
+  body.style.transform = 'scale(1)';
+  const lbl = document.getElementById('__pw_zoom_label');
+  if (lbl) {
+    lbl.style.transition = 'opacity 200ms ease';
+    lbl.style.opacity = '0';
+  }
+}

package/skills/web-capture/scripts/_media_screenshot/js/page_zoom_restore.js ADDED Viewed

@@ -0,0 +1,13 @@
+// Restore <body> and <html> inline styles stashed by page_zoom_in.js.
+() => {
+  const body = document.body;
+  body.style.transform = body.dataset.__pwOrigTransform || '';
+  body.style.transition = body.dataset.__pwOrigTransition || '';
+  body.style.transformOrigin = body.dataset.__pwOrigOrigin || '';
+  delete body.dataset.__pwOrigTransform;
+  delete body.dataset.__pwOrigTransition;
+  delete body.dataset.__pwOrigOrigin;
+  const html = document.documentElement;
+  html.style.overflow = html.dataset.__pwOrigOverflow || '';
+  delete html.dataset.__pwOrigOverflow;
+}

package/skills/web-capture/scripts/_media_screenshot/js/redact.js ADDED Viewed

@@ -0,0 +1,33 @@
+// Overlay opaque / blurred / pixelated rectangles to censor sensitive regions.
+({ items, mode }) => {
+  const root = document.getElementById('__pw_overlay_root');
+  if (!root) return;
+  items.forEach(({ box, color }) => {
+    const r = document.createElement('div');
+    Object.assign(r.style, {
+      position: 'fixed',
+      left: `${box.x}px`,
+      top: `${box.y}px`,
+      width: `${box.width}px`,
+      height: `${box.height}px`,
+      pointerEvents: 'none',
+      borderRadius: '3px',
+    });
+    if (mode === 'blur') {
+      Object.assign(r.style, {
+        backdropFilter: 'blur(14px) saturate(1.2)',
+        WebkitBackdropFilter: 'blur(14px) saturate(1.2)',
+        background: 'rgba(255,255,255,0.04)',
+      });
+    } else if (mode === 'pixelate') {
+      Object.assign(r.style, {
+        backdropFilter: 'contrast(0.55) blur(6px)',
+        WebkitBackdropFilter: 'contrast(0.55) blur(6px)',
+        background: 'rgba(0,0,0,0.04)',
+      });
+    } else {
+      r.style.background = color || '#222';
+    }
+    root.appendChild(r);
+  });
+};

package/skills/web-capture/scripts/_media_screenshot/js/scroll.js ADDED Viewed

@@ -0,0 +1,26 @@
+// Step-scroll until either endTime or toSelector is reached. Driven by the
+// Python side (endTime is `Date.now() + duration` precomputed in Python).
+async ({ step, interval, endTime, toSelector }) => {
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  let stopY = Infinity;
+  if (toSelector) {
+    const el = document.querySelector(toSelector);
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      stopY = window.scrollY + rect.bottom;
+    }
+  }
+  let last = -1;
+  while (Date.now() < endTime) {
+    const y = window.scrollY;
+    const max =
+      Math.max(
+        document.body.scrollHeight,
+        document.documentElement.scrollHeight
+      ) - window.innerHeight;
+    if (y >= max - 1 || y === last || y >= stopY) break;
+    last = y;
+    window.scrollBy({ top: step, left: 0, behavior: 'instant' });
+    await sleep(interval);
+  }
+}

package/skills/web-capture/scripts/_media_screenshot/js/scroll_through.js ADDED Viewed

@@ -0,0 +1,18 @@
+// Scroll from current position to the bottom of the page in fixed steps.
+// Used by record.py --scroll-through.
+async ({ step, interval }) => {
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  let last = -1;
+  while (true) {
+    const y = window.scrollY;
+    const max =
+      Math.max(
+        document.body.scrollHeight,
+        document.documentElement.scrollHeight
+      ) - window.innerHeight;
+    if (y >= max - 1 || y === last) break;
+    last = y;
+    window.scrollBy({ top: step, left: 0, behavior: 'instant' });
+    await sleep(interval);
+  }
+}

package/skills/web-capture/scripts/_media_screenshot/js/sequence.js ADDED Viewed

@@ -0,0 +1,76 @@
+// Draw numbered (1, 2, 3...) outlines around multiple boxes, staggered in time.
+({ items, color, lineWidth, padding, stepMs }) => {
+  const root = document.getElementById('__pw_overlay_root');
+  if (!root) return;
+  const drawOne = (idx, box, label) => {
+    const rect = document.createElement('div');
+    Object.assign(rect.style, {
+      position: 'fixed',
+      left: `${box.x - padding}px`,
+      top: `${box.y - padding}px`,
+      width: `${box.width + padding * 2}px`,
+      height: `${box.height + padding * 2}px`,
+      border: `${lineWidth}px solid ${color}`,
+      borderRadius: '8px',
+      opacity: '0',
+      transition: 'opacity 250ms ease',
+    });
+    root.appendChild(rect);
+    const badge = document.createElement('div');
+    badge.textContent = String(idx + 1);
+    Object.assign(badge.style, {
+      position: 'fixed',
+      left: `${box.x - padding - 14}px`,
+      top: `${box.y - padding - 14}px`,
+      width: '32px',
+      height: '32px',
+      lineHeight: '32px',
+      textAlign: 'center',
+      borderRadius: '999px',
+      background: color,
+      color: '#fff',
+      fontSize: '16px',
+      fontWeight: '700',
+      fontFamily: 'system-ui, -apple-system, "PingFang SC", "Helvetica Neue", sans-serif',
+      boxShadow: '0 3px 10px rgba(0,0,0,0.3)',
+      opacity: '0',
+      transform: 'scale(0.5)',
+      transition:
+        'opacity 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+    });
+    root.appendChild(badge);
+    if (label) {
+      const lbl = document.createElement('div');
+      lbl.textContent = label;
+      Object.assign(lbl.style, {
+        position: 'fixed',
+        left: `${box.x + box.width / 2}px`,
+        top: `${box.y + box.height + padding + 8}px`,
+        transform: 'translateX(-50%)',
+        padding: '4px 10px',
+        background: color,
+        color: '#fff',
+        fontSize: '14px',
+        fontWeight: '600',
+        borderRadius: '5px',
+        fontFamily: 'system-ui, -apple-system, "PingFang SC", "Helvetica Neue", sans-serif',
+        whiteSpace: 'nowrap',
+        opacity: '0',
+        transition: 'opacity 300ms ease',
+      });
+      root.appendChild(lbl);
+      setTimeout(() => (lbl.style.opacity = '1'), 100);
+    }
+    requestAnimationFrame(() => {
+      rect.style.opacity = '1';
+      badge.style.opacity = '1';
+      badge.style.transform = 'scale(1)';
+    });
+  };
+  items.forEach((it, i) => setTimeout(() => drawOne(i, it.box, it.label || ''), i * stepMs));
+};

package/skills/web-capture/scripts/_media_screenshot/js/settled_check.js ADDED Viewed

@@ -0,0 +1,15 @@
+// Return true once common skeleton / loading placeholders have disappeared.
+// Used inside page.wait_for_function with a timeout fallback.
+() => {
+  const selectors = [
+    '.skeleton-box',
+    '.Skeleton-loader',
+    '[data-loading-state="loading"]',
+    'include-fragment[aria-busy="true"]',
+    '[aria-busy="true"]',
+  ];
+  for (const sel of selectors) {
+    if (document.querySelector(sel)) return false;
+  }
+  return true;
+}

package/skills/web-capture/scripts/_media_screenshot/js/title_card.js ADDED Viewed

@@ -0,0 +1,71 @@
+// Full-screen title card: title + accent bar + subtitle, with staggered reveal.
+({ title, subtitle, bg, fg, accent }) => {
+  const root = document.getElementById('__pw_overlay_root');
+  if (!root) return;
+  const card = document.createElement('div');
+  Object.assign(card.style, {
+    position: 'fixed',
+    inset: '0',
+    background: bg,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    opacity: '0',
+    transition: 'opacity 400ms ease',
+    fontFamily: 'system-ui, -apple-system, "PingFang SC", "Helvetica Neue", sans-serif',
+  });
+  const t = document.createElement('div');
+  t.textContent = title || '';
+  Object.assign(t.style, {
+    color: fg,
+    fontSize: '54px',
+    fontWeight: '800',
+    transform: 'translateY(20px)',
+    opacity: '0',
+    transition:
+      'transform 600ms cubic-bezier(0.22,0.61,0.36,1) 200ms, opacity 600ms ease 200ms',
+    textAlign: 'center',
+    padding: '0 40px',
+    lineHeight: '1.2',
+  });
+  const accentBar = document.createElement('div');
+  Object.assign(accentBar.style, {
+    width: '60px',
+    height: '4px',
+    background: accent,
+    margin: '20px 0',
+    transform: 'scaleX(0)',
+    transformOrigin: 'left center',
+    transition: 'transform 500ms cubic-bezier(0.22,0.61,0.36,1) 600ms',
+  });
+  const s = document.createElement('div');
+  s.textContent = subtitle || '';
+  Object.assign(s.style, {
+    color: fg,
+    fontSize: '22px',
+    fontWeight: '400',
+    transform: 'translateY(20px)',
+    opacity: '0',
+    transition: 'transform 500ms ease 700ms, opacity 500ms ease 700ms',
+    textAlign: 'center',
+    padding: '0 40px',
+    lineHeight: '1.4',
+  });
+  card.append(t);
+  if (subtitle) card.append(accentBar, s);
+  root.appendChild(card);
+  requestAnimationFrame(() => {
+    card.style.opacity = '1';
+    t.style.transform = 'translateY(0)';
+    t.style.opacity = '1';
+    accentBar.style.transform = 'scaleX(1)';
+    s.style.transform = 'translateY(0)';
+    s.style.opacity = '0.85';
+  });
+};

package/skills/web-capture/scripts/_media_screenshot/js_loader.py ADDED Viewed

@@ -0,0 +1,14 @@
+"""Load .js files from `js/` as strings, cached at import time."""
+from __future__ import annotations
+from functools import lru_cache
+from pathlib import Path
+_JS_DIR = Path(__file__).resolve().parent / "js"
+@lru_cache(maxsize=None)
+def load(name: str) -> str:
+    """Return the contents of js/<name>.js. Raises FileNotFoundError if missing."""
+    path = _JS_DIR / f"{name}.js"
+    return path.read_text(encoding="utf-8")

package/skills/web-capture/scripts/_media_screenshot/overlay.py ADDED Viewed

@@ -0,0 +1,17 @@
+"""Small wrappers around the overlay-management JS snippets."""
+from __future__ import annotations
+from . import js_loader
+def ensure_overlay(page) -> None:
+    page.evaluate(js_loader.load("overlay_bootstrap"))
+def clear_overlay(page) -> None:
+    page.evaluate(js_loader.load("clear_overlay"))
+def fade_out_overlays(page, duration: int) -> None:
+    page.evaluate(js_loader.load("fade_out_overlays"), duration)
+    page.wait_for_timeout(duration)

package/skills/web-capture/scripts/_media_screenshot/recording.py ADDED Viewed

@@ -0,0 +1,100 @@
+"""Plain recording: fixed duration / stop-when / scroll-through."""
+from __future__ import annotations
+import sys
+import time
+from pathlib import Path
+from . import js_loader
+from .bootstrap import ensure_runtime
+from .browser import (
+    apply_pre_action_waits,
+    build_context_options,
+    launch_with_browser_install,
+)
+def _scroll_through(page, cfg: dict) -> None:
+    step = cfg.get("scrollStep", 60)
+    interval = cfg.get("scrollInterval", 50)
+    pause_top = cfg.get("scrollPauseTop", 800)
+    pause_bottom = cfg.get("scrollPauseBottom", 1200)
+    page.evaluate("() => window.scrollTo(0, 0)")
+    page.wait_for_timeout(pause_top)
+    page.evaluate(js_loader.load("scroll_through"), {"step": step, "interval": interval})
+    page.wait_for_timeout(pause_bottom)
+def _wait_for_stop_condition(page, cfg: dict) -> str:
+    cap = cfg.get("maxDuration", 60000)
+    duration = cfg.get("duration")
+    stop_when_selector = cfg.get("stopWhenSelector")
+    stop_when_hidden = cfg.get("stopWhenHidden")
+    if not (duration or stop_when_selector or stop_when_hidden):
+        page.wait_for_timeout(5000)
+        return "default-5s"
+    deadline = time.time() + cap / 1000.0
+    if duration:
+        deadline = min(deadline, time.time() + duration / 1000.0)
+    poll = 100
+    while time.time() < deadline:
+        if stop_when_selector:
+            try:
+                page.wait_for_selector(stop_when_selector, state="visible", timeout=poll)
+                return "stopWhenSelector"
+            except Exception:
+                pass
+        if stop_when_hidden:
+            try:
+                page.wait_for_selector(stop_when_hidden, state="hidden", timeout=poll)
+                return "stopWhenHidden"
+            except Exception:
+                pass
+        if not (stop_when_selector or stop_when_hidden):
+            page.wait_for_timeout(min(poll, max(0, int((deadline - time.time()) * 1000))))
+    return "duration" if duration else "cap"
+def do_record(cfg: dict) -> Path:
+    """Plain recording — returns the absolute output path."""
+    ensure_runtime()
+    from playwright.sync_api import sync_playwright
+    output = Path(cfg["output"]).resolve()
+    output.parent.mkdir(parents=True, exist_ok=True)
+    out_dir = str(output.parent)
+    with sync_playwright() as p:
+        browser = launch_with_browser_install(p, cfg.get("browser"))
+        try:
+            context = browser.new_context(**build_context_options(p, cfg, out_dir))
+            if cfg.get("timeout"):
+                context.set_default_timeout(cfg["timeout"])
+            page = context.new_page()
+            video_path: str | None = None
+            try:
+                page.goto(cfg["url"], wait_until="domcontentloaded")
+                apply_pre_action_waits(page, cfg)
+                if cfg.get("scrollThrough"):
+                    _scroll_through(page, cfg)
+                    reason = "scrollThrough"
+                else:
+                    reason = _wait_for_stop_condition(page, cfg)
+                print(f"[runner] stop reason: {reason}", file=sys.stderr)
+                video = page.video
+                context.close()
+                if video:
+                    video_path = video.path()
+            finally:
+                pass
+        finally:
+            browser.close()
+    if not video_path or not Path(video_path).exists():
+        raise SystemExit("record finished but no video file was produced")
+    src = Path(video_path)
+    if src.resolve() != output:
+        src.replace(output)
+    return output

package/skills/web-capture/scripts/_media_screenshot/scenes/__init__.py ADDED Viewed

@@ -0,0 +1,39 @@
+"""Scene registry.
+Each scene type registers a handler ``(page, scene_cfg) -> None`` via the
+``@register("type")`` decorator. Import the per-scene modules at the bottom so
+their decorators fire at package import time.
+"""
+from __future__ import annotations
+from typing import Callable
+SceneHandler = Callable[[object, dict], None]
+_REGISTRY: dict[str, SceneHandler] = {}
+def register(type_name: str):
+    def decorator(handler: SceneHandler) -> SceneHandler:
+        _REGISTRY[type_name] = handler
+        return handler
+    return decorator
+def get_handler(type_name: str) -> SceneHandler | None:
+    return _REGISTRY.get(type_name)
+def known_types() -> list[str]:
+    return sorted(_REGISTRY.keys())
+# Auto-discover every non-underscore module in this package so its
+# @register decorators fire at import time. Adding a new scene only
+# requires dropping a `scenes/<type>.py` file — no edits here.
+import importlib as _importlib
+import pkgutil as _pkgutil
+for _, _name, _ in _pkgutil.iter_modules(__path__):
+    if not _name.startswith("_"):
+        _importlib.import_module(f"{__name__}.{_name}")

package/skills/web-capture/scripts/_media_screenshot/scenes/arrow.py ADDED Viewed

@@ -0,0 +1,50 @@
+"""Arrow scene: curved arrow from one anchor (selector/coords) to another."""
+from __future__ import annotations
+from .. import js_loader
+from ..browser import resolve_locator
+from . import register
+def _resolve_anchor(page, anchor: dict) -> tuple[float, float]:
+    """Anchor is either {x, y} or {selector, side}. Returns page-fixed (x, y)."""
+    if anchor is None:
+        raise RuntimeError("arrow: missing anchor (need from/to)")
+    if "x" in anchor and "y" in anchor:
+        return float(anchor["x"]), float(anchor["y"])
+    sel = anchor.get("selector")
+    if not sel:
+        raise RuntimeError("arrow: anchor needs either {x,y} or {selector}")
+    loc = resolve_locator(page, sel)
+    box = loc.bounding_box()
+    if not box:
+        raise RuntimeError(f"arrow: no bounding box for {sel}")
+    side = anchor.get("side", "center")
+    cx = box["x"] + box["width"] / 2
+    cy = box["y"] + box["height"] / 2
+    if side == "left":
+        return box["x"], cy
+    if side == "right":
+        return box["x"] + box["width"], cy
+    if side == "top":
+        return cx, box["y"]
+    if side == "bottom":
+        return cx, box["y"] + box["height"]
+    return cx, cy
+@register("arrow")
+def scene_arrow(page, scene: dict) -> None:
+    fx, fy = _resolve_anchor(page, scene.get("from") or {})
+    tx, ty = _resolve_anchor(page, scene.get("to") or {})
+    page.evaluate(
+        js_loader.load("arrow"),
+        {
+            "from": {"x": fx, "y": fy},
+            "to": {"x": tx, "y": ty},
+            "color": scene.get("color", "#ff3b30"),
+            "lineWidth": scene.get("lineWidth", 4),
+            "label": scene.get("label", ""),
+        },
+    )
+    page.wait_for_timeout(scene.get("duration", 3000))

package/skills/web-capture/scripts/_media_screenshot/scenes/caption.py ADDED Viewed

@@ -0,0 +1,20 @@
+"""Caption scene: subtitle strip sliding in from top or bottom edge."""
+from __future__ import annotations
+from .. import js_loader
+from . import register
+@register("caption")
+def scene_caption(page, scene: dict) -> None:
+    page.evaluate(
+        js_loader.load("caption"),
+        {
+            "text": scene.get("text", ""),
+            "position": scene.get("position", "bottom"),
+            "bg": scene.get("background", "rgba(0,0,0,0.78)"),
+            "fg": scene.get("color", "#fff"),
+            "fontSize": scene.get("fontSize", 20),
+        },
+    )
+    page.wait_for_timeout(scene.get("duration", 3000))

package/skills/web-capture/scripts/_media_screenshot/scenes/click.py ADDED Viewed

@@ -0,0 +1,35 @@
+"""Click scene: animated cursor flies to target, ripple, then optional real click."""
+from __future__ import annotations
+from .. import js_loader
+from ..browser import resolve_locator
+from . import register
+@register("click")
+def scene_click(page, scene: dict) -> None:
+    locator = resolve_locator(page, scene["selector"])
+    box = locator.bounding_box()
+    if not box:
+        raise RuntimeError(f"click: no bounding box for {scene['selector']}")
+    cx = box["x"] + box["width"] / 2
+    cy = box["y"] + box["height"] / 2
+    move_ms = int(scene.get("moveMs", 700))
+    pre_hold = int(scene.get("preHoldMs", 150))
+    post_hold = int(scene.get("postHoldMs", 800))
+    ripple_ms = int(scene.get("rippleMs", 550))
+    color = scene.get("color", "#ff3b30")
+    page.evaluate(js_loader.load("cursor_bootstrap"))
+    page.evaluate(js_loader.load("cursor_move"), {"x": cx, "y": cy, "ms": move_ms})
+    page.wait_for_timeout(move_ms + pre_hold)
+    page.evaluate(js_loader.load("cursor_ripple"), {"color": color, "ms": ripple_ms})
+    if scene.get("realClick", True):
+        try:
+            locator.evaluate("el => el.click()")
+        except Exception:
+            pass
+    page.wait_for_timeout(post_hold)