clipwise 0.1.1 → 0.2.0

package/dist/index.js

@@ -31,12 +31,13 @@ function interpolatePath(from, to, steps) {
 }
 
 // src/core/screenshot.ts
-async function getElementCenter(page, selector) {
-  if (!/^[\w\-#.\[\]="':\s,>+~*()@^$|]+$/.test(selector)) {
+var DEFAULT_ELEMENT_TIMEOUT = 5e3;
+async function getElementCenter(page, selector, timeout) {
+  if (/[\x00-\x1f\x7f;`\\{}]/.test(selector) || selector.length === 0) {
     throw new Error(`Invalid selector: ${selector}`);
   }
   const element = page.locator(selector).first();
-  await element.waitFor({ state: "visible", timeout: 5e3 });
+  await element.waitFor({ state: "visible", timeout: timeout ?? DEFAULT_ELEMENT_TIMEOUT });
   const box = await element.boundingBox();
   if (!box) {
     throw new Error(
@@ -77,6 +78,7 @@ var ClipwiseRecorder = class {
   targetFps = 30;
   cursorSpeed = "fast";
   firstContentTimestamp = 0;
+  pendingResponsePromises = /* @__PURE__ */ new Map();
   /**
    * Launch the browser and create a page with the scenario viewport.
    */
@@ -161,8 +163,9 @@ var ClipwiseRecorder = class {
       for (let si = 0; si < scenario.steps.length; si++) {
         const step = scenario.steps[si];
         this.currentStepIndex = si;
-        for (const action of step.actions) {
-          await this.executeAction(action);
+        this.preRegisterResponseListeners(step.actions);
+        for (let ai = 0; ai < step.actions.length; ai++) {
+          await this.executeAction(step.actions[ai], ai);
         }
         if (step.captureDelay > 0) {
           await this.waitWithRepaints(step.captureDelay);
@@ -228,11 +231,33 @@ var ClipwiseRecorder = class {
       }
     }
   }
+  /**
+   * Pre-register waitForResponse listeners at the start of each step.
+   * This ensures the listener is active before any preceding action
+   * (e.g. click) triggers the request, preventing race conditions
+   * where the response arrives before the listener is set up.
+   */
+  preRegisterResponseListeners(actions) {
+    this.pendingResponsePromises.clear();
+    if (!this.page) return;
+    for (let i = 0; i < actions.length; i++) {
+      const action = actions[i];
+      if (action.action === "waitForResponse") {
+        this.pendingResponsePromises.set(
+          i,
+          this.page.waitForResponse(
+            (response) => response.url().includes(action.url) && (action.status === void 0 || response.status() === action.status),
+            { timeout: action.timeout }
+          )
+        );
+      }
+    }
+  }
   /**
    * Execute a single action. CDP screencast captures frames continuously
    * in the background while actions are performed.
    */
-  async executeAction(action) {
+  async executeAction(action, actionIndex = 0) {
     if (!this.page) {
       throw new Error("Page not initialized. Call init() first.");
     }
@@ -250,7 +275,7 @@ var ClipwiseRecorder = class {
         break;
       }
       case "click": {
-        const target = await getElementCenter(this.page, action.selector);
+        const target = await getElementCenter(this.page, action.selector, action.timeout);
         await this.moveCursorSmooth(target);
         this.clickTimeline.push({
           position: { ...target },
@@ -264,7 +289,8 @@ var ClipwiseRecorder = class {
       case "type": {
         const inputTarget = await getElementCenter(
           this.page,
-          action.selector
+          action.selector,
+          action.timeout
         );
         await this.moveCursorSmooth(inputTarget);
         this.clickTimeline.push({
@@ -282,7 +308,7 @@ var ClipwiseRecorder = class {
         break;
       }
       case "scroll": {
-        const scrollTarget = action.selector ? await getElementCenter(this.page, action.selector) : null;
+        const scrollTarget = action.selector ? await getElementCenter(this.page, action.selector, action.timeout) : null;
         await this.page.evaluate(
           ({ x, y, smooth, selector }) => {
             const target = selector ? document.querySelector(selector) : window;
@@ -326,7 +352,8 @@ var ClipwiseRecorder = class {
       case "hover": {
         const hoverTarget = await getElementCenter(
           this.page,
-          action.selector
+          action.selector,
+          action.timeout
         );
         await this.moveCursorSmooth(hoverTarget);
         await this.page.hover(action.selector);
@@ -336,6 +363,33 @@ var ClipwiseRecorder = class {
         await this.waitWithRepaints(100);
         break;
       }
+      case "waitForSelector": {
+        const locator = this.page.locator(action.selector).first();
+        await locator.waitFor({ state: action.state, timeout: action.timeout });
+        break;
+      }
+      case "waitForNavigation": {
+        await this.page.waitForLoadState(action.waitUntil, { timeout: action.timeout });
+        break;
+      }
+      case "waitForURL": {
+        await this.page.waitForURL(action.url, { timeout: action.timeout });
+        break;
+      }
+      case "waitForFunction": {
+        await this.page.waitForFunction(action.expression, void 0, {
+          polling: action.polling,
+          timeout: action.timeout
+        });
+        break;
+      }
+      case "waitForResponse": {
+        const pending = this.pendingResponsePromises.get(actionIndex);
+        if (pending) {
+          await pending;
+        }
+        break;
+      }
     }
     await this.waitWithRepaints(ACTION_GAP_MS);
   }
@@ -1438,9 +1492,9 @@ import { readFile as readFile2 } from "fs/promises";
 
 // src/script/types.ts
 import { z } from "zod";
-var SafeSelectorSchema = z.string().regex(
-  /^[a-zA-Z0-9\-_#.\[\]="':\s~^$|*,>+()@]+$/,
-  "Selector contains invalid characters"
+var SafeSelectorSchema = z.string().min(1, "Selector must not be empty").regex(
+  /^[^\x00-\x1f\x7f;`\\{}]+$/,
+  "Selector contains invalid characters (control chars, semicolons, backticks, or backslashes are not allowed)"
 );
 var NavigateActionSchema = z.object({
   action: z.literal("navigate"),
@@ -1450,20 +1504,23 @@ var NavigateActionSchema = z.object({
 var ClickActionSchema = z.object({
   action: z.literal("click"),
   selector: SafeSelectorSchema,
-  delay: z.number().optional()
+  delay: z.number().optional(),
+  timeout: z.number().min(0).optional()
 });
 var TypeActionSchema = z.object({
   action: z.literal("type"),
   selector: SafeSelectorSchema,
   text: z.string(),
-  delay: z.number().default(50)
+  delay: z.number().default(50),
+  timeout: z.number().min(0).optional()
 });
 var ScrollActionSchema = z.object({
   action: z.literal("scroll"),
   selector: SafeSelectorSchema.optional(),
   y: z.number().default(0),
   x: z.number().default(0),
-  smooth: z.boolean().default(true)
+  smooth: z.boolean().default(true),
+  timeout: z.number().min(0).optional()
 });
 var WaitActionSchema = z.object({
   action: z.literal("wait"),
@@ -1471,13 +1528,42 @@ var WaitActionSchema = z.object({
 });
 var HoverActionSchema = z.object({
   action: z.literal("hover"),
-  selector: SafeSelectorSchema
+  selector: SafeSelectorSchema,
+  timeout: z.number().min(0).optional()
 });
 var ScreenshotActionSchema = z.object({
   action: z.literal("screenshot"),
   name: z.string().optional(),
   fullPage: z.boolean().default(false)
 });
+var WaitForSelectorActionSchema = z.object({
+  action: z.literal("waitForSelector"),
+  selector: SafeSelectorSchema,
+  state: z.enum(["visible", "attached", "hidden"]).default("visible"),
+  timeout: z.number().min(0).default(15e3)
+});
+var WaitForNavigationActionSchema = z.object({
+  action: z.literal("waitForNavigation"),
+  waitUntil: z.enum(["load", "domcontentloaded", "networkidle"]).default("networkidle"),
+  timeout: z.number().min(0).default(15e3)
+});
+var WaitForURLActionSchema = z.object({
+  action: z.literal("waitForURL"),
+  url: z.string().min(1),
+  timeout: z.number().min(0).default(15e3)
+});
+var WaitForFunctionActionSchema = z.object({
+  action: z.literal("waitForFunction"),
+  expression: z.string().min(1),
+  polling: z.union([z.literal("raf"), z.number().min(0)]).default("raf"),
+  timeout: z.number().min(0).default(3e4)
+});
+var WaitForResponseActionSchema = z.object({
+  action: z.literal("waitForResponse"),
+  url: z.string().min(1),
+  status: z.number().min(100).max(599).optional(),
+  timeout: z.number().min(0).default(3e4)
+});
 var StepActionSchema = z.discriminatedUnion("action", [
   NavigateActionSchema,
   ClickActionSchema,
@@ -1485,7 +1571,12 @@ var StepActionSchema = z.discriminatedUnion("action", [
   ScrollActionSchema,
   WaitActionSchema,
   HoverActionSchema,
-  ScreenshotActionSchema
+  ScreenshotActionSchema,
+  WaitForSelectorActionSchema,
+  WaitForNavigationActionSchema,
+  WaitForURLActionSchema,
+  WaitForFunctionActionSchema,
+  WaitForResponseActionSchema
 ]);
 var AutoZoomConfigSchema = z.object({
   followCursor: z.boolean().default(true),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clipwise",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Scriptable cinematic screen recorder for product demos — YAML in, polished MP4 out",
   "type": "module",
   "main": "dist/index.js",
@@ -50,20 +50,20 @@
     "node": ">=18"
   },
   "dependencies": {
-    "playwright": "^1.50.0",
-    "yaml": "^2.7.0",
-    "sharp": "^0.33.0",
+    "chalk": "^5.4.0",
     "commander": "^13.0.0",
+    "gifenc": "^1.0.3",
     "ora": "^8.0.0",
-    "chalk": "^5.4.0",
-    "zod": "^3.24.0",
-    "gifenc": "^1.0.3"
+    "playwright": "^1.50.0",
+    "sharp": "^0.33.0",
+    "yaml": "^2.7.0",
+    "zod": "^3.24.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.0",
-    "tsup": "^8.0.0",
-    "vitest": "^3.0.0",
     "@types/node": "^22.0.0",
-    "eslint": "^9.0.0"
+    "eslint": "^10.0.2",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
   }
 }