clipwise 0.7.0 → 0.7.2

package/dist/index.js

@@ -141,9 +141,16 @@ var ClipwiseRecorder = class {
     this.cursorSpeed = scenario.effects.cursor.speed;
     this.loaderDetectionEnabled = scenario.effects.smartSpeed?.enabled ?? false;
     this.browser = await chromium.launch({ headless: true });
-    this.context = await this.browser.newContext({
+    const contextOptions = {
       viewport: this.viewport
-    });
+    };
+    if (scenario.auth?.storageState) {
+      contextOptions.storageState = scenario.auth.storageState;
+    }
+    this.context = await this.browser.newContext(contextOptions);
+    if (scenario.auth?.cookies?.length) {
+      await this.context.addCookies(scenario.auth.cookies);
+    }
     this.page = await this.context.newPage();
     this.rawFrames = [];
     this.cursorTimeline = [];
@@ -466,6 +473,31 @@ var ClipwiseRecorder = class {
       }
     }
   }
+  /**
+   * 조건 대기 중 프레임을 연속 캡처하는 헬퍼.
+   * smartWait과 동일한 패턴: isWaitingPhase 플래그 + forceRepaint 루프를 조건 promise와 병렬 실행.
+   */
+  async waitForConditionWithCapture(conditionPromise, displaySpeed) {
+    this.isWaitingPhase = true;
+    this.currentDisplaySpeed = displaySpeed;
+    try {
+      let waitDone = false;
+      const repaintLoop = (async () => {
+        let toggle = false;
+        while (!waitDone && this.isCapturing && this.page) {
+          await this.forceRepaint(toggle);
+          toggle = !toggle;
+          await new Promise((r) => setTimeout(r, REPAINT_INTERVAL_MS));
+        }
+      })();
+      await conditionPromise;
+      waitDone = true;
+      await repaintLoop;
+    } finally {
+      this.isWaitingPhase = false;
+      this.currentDisplaySpeed = void 0;
+    }
+  }
   /**
    * Pre-register waitForResponse listeners at the start of each step.
    * This ensures the listener is active before any preceding action
@@ -556,6 +588,17 @@ var ClipwiseRecorder = class {
             lastClickRefresh = now;
           }
         }
+        await this.page.evaluate((sel) => {
+          const el = document.querySelector(sel);
+          if (!el) return;
+          const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+          const setter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
+          if (setter) {
+            setter.call(el, el.value);
+            el.dispatchEvent(new Event("input", { bubbles: true }));
+            el.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+        }, action.selector);
         this.clickTimeline.push({
           position: { ...inputTarget },
           timestamp: Date.now()
@@ -629,83 +672,89 @@ var ClipwiseRecorder = class {
       }
       case "waitForSelector": {
         const locator = this.page.locator(action.selector).first();
-        await locator.waitFor({ state: action.state, timeout: action.timeout });
+        const selectorPromise = locator.waitFor({ state: action.state, timeout: action.timeout });
+        if (action.captureWhileWaiting) {
+          await this.waitForConditionWithCapture(selectorPromise, action.displaySpeed);
+        } else {
+          await selectorPromise;
+        }
         break;
       }
       case "waitForNavigation": {
-        await this.page.waitForLoadState(action.waitUntil, { timeout: action.timeout });
+        const navPromise = this.page.waitForLoadState(action.waitUntil, { timeout: action.timeout });
+        if (action.captureWhileWaiting) {
+          await this.waitForConditionWithCapture(navPromise, action.displaySpeed);
+        } else {
+          await navPromise;
+        }
         break;
       }
       case "waitForURL": {
-        await this.page.waitForURL(action.url, { timeout: action.timeout });
+        const urlPromise = this.page.waitForURL(action.url, { timeout: action.timeout });
+        if (action.captureWhileWaiting) {
+          await this.waitForConditionWithCapture(urlPromise, action.displaySpeed);
+        } else {
+          await urlPromise;
+        }
         break;
       }
       case "waitForFunction": {
-        await this.page.waitForFunction(action.expression, void 0, {
+        const fnPromise = this.page.waitForFunction(action.expression, void 0, {
           polling: action.polling,
           timeout: action.timeout
         });
+        if (action.captureWhileWaiting) {
+          await this.waitForConditionWithCapture(fnPromise, action.displaySpeed);
+        } else {
+          await fnPromise;
+        }
         break;
       }
       case "waitForResponse": {
         const pending = this.pendingResponsePromises.get(actionIndex);
         if (pending) {
-          await pending;
+          if (action.captureWhileWaiting) {
+            await this.waitForConditionWithCapture(pending, action.displaySpeed);
+          } else {
+            await pending;
+          }
         }
         break;
       }
       case "smartWait": {
-        this.isWaitingPhase = true;
-        this.currentDisplaySpeed = action.displaySpeed;
-        try {
-          let conditionPromise;
-          switch (action.until) {
-            case "networkIdle":
-              conditionPromise = this.page.waitForLoadState("networkidle", { timeout: action.timeout });
-              break;
-            case "selector":
-              conditionPromise = action.selector ? this.page.locator(action.selector).first().waitFor({ state: "visible", timeout: action.timeout }) : Promise.resolve();
-              break;
-            case "domStable":
-              conditionPromise = this.page.waitForFunction(
-                () => new Promise((resolve) => {
-                  let timer;
-                  const observer = new MutationObserver(() => {
-                    clearTimeout(timer);
-                    timer = setTimeout(() => {
-                      observer.disconnect();
-                      resolve(true);
-                    }, 500);
-                  });
-                  observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+        let conditionPromise;
+        switch (action.until) {
+          case "networkIdle":
+            conditionPromise = this.page.waitForLoadState("networkidle", { timeout: action.timeout });
+            break;
+          case "selector":
+            conditionPromise = action.selector ? this.page.locator(action.selector).first().waitFor({ state: "visible", timeout: action.timeout }) : Promise.resolve();
+            break;
+          case "domStable":
+            conditionPromise = this.page.waitForFunction(
+              () => new Promise((resolve) => {
+                let timer;
+                const observer = new MutationObserver(() => {
+                  clearTimeout(timer);
                   timer = setTimeout(() => {
                     observer.disconnect();
                     resolve(true);
                   }, 500);
-                }),
-                void 0,
-                { timeout: action.timeout }
-              );
-              break;
-            default:
-              conditionPromise = Promise.resolve();
-          }
-          let waitDone = false;
-          const repaintLoop = (async () => {
-            let toggle = false;
-            while (!waitDone && this.isCapturing && this.page) {
-              await this.forceRepaint(toggle);
-              toggle = !toggle;
-              await new Promise((r) => setTimeout(r, REPAINT_INTERVAL_MS));
-            }
-          })();
-          await conditionPromise;
-          waitDone = true;
-          await repaintLoop;
-        } finally {
-          this.isWaitingPhase = false;
-          this.currentDisplaySpeed = void 0;
+                });
+                observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+                timer = setTimeout(() => {
+                  observer.disconnect();
+                  resolve(true);
+                }, 500);
+              }),
+              void 0,
+              { timeout: action.timeout }
+            );
+            break;
+          default:
+            conditionPromise = Promise.resolve();
         }
+        await this.waitForConditionWithCapture(conditionPromise, action.displaySpeed);
         break;
       }
     }
@@ -1551,6 +1600,44 @@ import sharp5 from "sharp";
 function escapeXml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+function isCJK(ch) {
+  const code = ch.codePointAt(0) ?? 0;
+  return code >= 4352 && code <= 4607 || // 한글 자모
+  code >= 11904 && code <= 40959 || // CJK 부수, 한자
+  code >= 44032 && code <= 55215 || // 한글 음절
+  code >= 63744 && code <= 64255 || // CJK 호환 한자
+  code >= 65072 && code <= 65103 || // CJK 호환 형태
+  code >= 65280 && code <= 65519 || // Full-width 문자
+  code >= 12288 && code <= 12543 || // CJK 기호, 히라가나, 가타카나
+  code >= 12784 && code <= 12799 || // 가타카나 확장
+  code >= 131072 && code <= 195103;
+}
+function displayWidth(text) {
+  let w = 0;
+  for (const ch of text) {
+    w += isCJK(ch) ? 1.7 : 1;
+  }
+  return w;
+}
+function wrapText(text, maxWidth) {
+  if (displayWidth(text) <= maxWidth) return [text];
+  const lines = [];
+  let current = "";
+  let currentWidth = 0;
+  for (const ch of text) {
+    const chWidth = isCJK(ch) ? 1.7 : 1;
+    if (currentWidth + chWidth > maxWidth && current.length > 0) {
+      lines.push(current);
+      current = ch;
+      currentWidth = chWidth;
+    } else {
+      current += ch;
+      currentWidth += chWidth;
+    }
+  }
+  if (current.length > 0) lines.push(current);
+  return lines;
+}
 function buildSessions(keystrokes) {
   const hasSessionIds = keystrokes.some((k) => k.sessionId !== void 0);
   if (!hasSessionIds) {
@@ -1584,16 +1671,22 @@ async function renderKeystrokeHud(frameBuffer, keystrokes, frameTimestamp, confi
   const lineGap = Math.round(fontSize * 0.45);
   const charWidth = fontSize * 0.615;
   const maxHudWidth = frameWidth - 60 * dpr;
-  const maxCharsPerLine = Math.max(10, Math.floor((maxHudWidth - hudPadH * 2) / charWidth));
-  const lines = sessions.map(
-    (text) => text.length > maxCharsPerLine ? text.slice(-maxCharsPerLine) : text
-  );
-  const maxLineLen = Math.max(...lines.map((l) => l.length));
+  const maxDisplayWidth = Math.max(10, (maxHudWidth - hudPadH * 2) / charWidth);
+  const wrappedLines = [];
+  sessions.forEach((text, sIdx) => {
+    const wrapped = wrapText(text, maxDisplayWidth);
+    for (const line of wrapped) {
+      wrappedLines.push({ text: line, sessionIdx: sIdx });
+    }
+  });
+  const lines = wrappedLines.map((l) => l.text);
+  const totalLineCount = lines.length;
+  const maxLineDisplayWidth = Math.max(...lines.map((l) => displayWidth(l)));
   const hudWidth = Math.min(
-    Math.ceil(maxLineLen * charWidth) + hudPadH * 2,
+    Math.ceil(maxLineDisplayWidth * charWidth) + hudPadH * 2,
     maxHudWidth
   );
-  const hudHeight = Math.ceil(fontSize * lineCount + lineGap * (lineCount - 1) + hudPadV * 2);
+  const hudHeight = Math.ceil(fontSize * totalLineCount + lineGap * (totalLineCount - 1) + hudPadV * 2);
   const margin = 30 * dpr;
   const hudY = frameHeight - hudHeight - margin;
   let hudX;
@@ -1608,18 +1701,20 @@ async function renderKeystrokeHud(frameBuffer, keystrokes, frameTimestamp, confi
     default:
       hudX = Math.round((frameWidth - hudWidth) / 2);
   }
-  const LINE_OPACITY_FACTORS = [0.45, 0.7, 1];
-  const opacityFactors = LINE_OPACITY_FACTORS.slice(-lineCount);
+  const SESSION_OPACITY_FACTORS = [0.45, 0.7, 1];
+  const sessionOpacities = SESSION_OPACITY_FACTORS.slice(-lineCount);
   const rx = (8 * dpr).toFixed(1);
   const boxOp = (globalOpacity * 0.92).toFixed(3);
   const textX = hudX + hudPadH;
   const baselineY = hudY + hudPadV + fontSize * 0.82;
-  const textElements = lines.map((line, i) => {
-    const op = (globalOpacity * opacityFactors[i]).toFixed(3);
+  const textElements = wrappedLines.map(({ text, sessionIdx }, i) => {
+    const sessionPos = sessions.length <= 3 ? sessionIdx : sessionIdx - (sessions.length - 3);
+    const opFactor = sessionOpacities[Math.max(0, sessionPos)] ?? 1;
+    const op = (globalOpacity * opFactor).toFixed(3);
     const lineY = baselineY + i * (fontSize + lineGap);
     return `<text x="${textX}" y="${lineY}"
           font-family="monospace, Menlo, Consolas" font-size="${fontSize}"
-          fill="${config.textColor}" opacity="${op}">${escapeXml(line)}</text>`;
+          fill="${config.textColor}" opacity="${op}">${escapeXml(text)}</text>`;
   }).join("\n    ");
   const hudSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${frameWidth}" height="${frameHeight}" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
     <rect x="${hudX}" y="${hudY}" width="${hudWidth}" height="${hudHeight}"
@@ -3308,29 +3403,41 @@ 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)
+  timeout: z.number().min(0).default(15e3),
+  /** 대기 중 프레임 연속 캡처 (로딩 애니메이션 보존). */
+  captureWhileWaiting: z.boolean().default(false),
+  /** captureWhileWaiting 사용 시 출력 영상 속도 배율 (1-32). */
+  displaySpeed: z.number().min(1).max(32).default(8)
 });
 var WaitForNavigationActionSchema = z.object({
   action: z.literal("waitForNavigation"),
   waitUntil: z.enum(["load", "domcontentloaded", "networkidle"]).default("networkidle"),
-  timeout: z.number().min(0).default(15e3)
+  timeout: z.number().min(0).default(15e3),
+  captureWhileWaiting: z.boolean().default(false),
+  displaySpeed: z.number().min(1).max(32).default(8)
 });
 var WaitForURLActionSchema = z.object({
   action: z.literal("waitForURL"),
   url: z.string().min(1),
-  timeout: z.number().min(0).default(15e3)
+  timeout: z.number().min(0).default(15e3),
+  captureWhileWaiting: z.boolean().default(false),
+  displaySpeed: z.number().min(1).max(32).default(8)
 });
 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)
+  timeout: z.number().min(0).default(3e4),
+  captureWhileWaiting: z.boolean().default(false),
+  displaySpeed: z.number().min(1).max(32).default(8)
 });
 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)
+  timeout: z.number().min(0).default(3e4),
+  captureWhileWaiting: z.boolean().default(false),
+  displaySpeed: z.number().min(1).max(32).default(8)
 });
 var SmartWaitActionSchema = z.object({
   action: z.literal("smartWait"),
@@ -3525,6 +3632,22 @@ var AudioConfigSchema = z.object({
   /** Fade-out duration in milliseconds. */
   fadeOut: z.number().min(0).default(0)
 });
+var AuthConfigSchema = z.object({
+  /** Path to a Playwright storageState JSON file (cookies + localStorage). */
+  storageState: z.string().optional(),
+  /** Inline cookie definitions (applied after storageState if both specified). */
+  cookies: z.array(
+    z.object({
+      name: z.string(),
+      value: z.string(),
+      domain: z.string(),
+      path: z.string().default("/"),
+      httpOnly: z.boolean().default(false),
+      secure: z.boolean().default(false),
+      sameSite: z.enum(["Strict", "Lax", "None"]).default("Lax")
+    })
+  ).optional()
+});
 var ScenarioSchema = z.object({
   name: z.string(),
   description: z.string().optional(),
@@ -3532,6 +3655,8 @@ var ScenarioSchema = z.object({
     width: z.number().default(1280),
     height: z.number().default(800)
   }).default({}),
+  /** Optional authentication — restores browser session for logged-in pages. */
+  auth: AuthConfigSchema.optional(),
   effects: EffectsConfigSchema.default({}),
   output: OutputConfigSchema.default({}),
   /** Optional audio narration — muxed into MP4 output. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clipwise",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Scriptable cinematic screen recorder for product demos — YAML in, polished MP4 out",
   "type": "module",
   "main": "dist/index.js",

package/skills/clipwise.md

@@ -52,6 +52,7 @@ output:
   height: 800             # Output height
   fps: 30                 # 1-60
   preset: balanced        # social | balanced | archive
+  codec: auto             # auto | h264 | hevc | av1
   outputDir: "./output"
   filename: "my-recording"
 
@@ -71,7 +72,7 @@ steps: []                 # Array of steps (min 1, first must have navigate)
   actions: []                 # Array of actions
 ```
 
-### Actions (12 types)
+### Actions (13 types)
 
 #### Basic Actions
 
@@ -169,6 +170,16 @@ steps: []                 # Array of steps (min 1, first must have navigate)
   timeout: 30000
 ```
 
+13. **smartWait** — Record real wait time, then auto-compress in output
+```yaml
+- action: smartWait
+  until: networkIdle           # networkIdle | selector | domStable
+  selector: ".results"         # Required when until=selector
+  timeout: 30000               # Max wait ms (default: 30000)
+  displaySpeed: 8              # Speed multiplier for output (1-32, default: 8)
+```
+> Unlike fixed `wait`, `smartWait` captures frames during the wait period (with forced repaints to bypass dedup), then compresses them at `displaySpeed` in the final video. Use this for API calls, loading states, streaming responses.
+
 ### Effects Configuration
 
 #### Zoom — Adaptive zoom follows cursor on clicks (smart camera: auto-suppressed during scroll)
@@ -178,6 +189,7 @@ zoom:
   intensity: light            # subtle(1.15x) | light(1.25x) | moderate(1.35x) | strong(1.5x) | dramatic(1.8x)
   # scale: 1.25              # Or use numeric value (overridden by intensity)
   duration: 800               # Zoom animation ms
+  easing: ease-in-out         # ease-in-out | ease-in | ease-out | linear | spring
   autoZoom:
     followCursor: true        # Viewport pans to follow cursor position
     transitionDuration: 300
@@ -261,6 +273,17 @@ speedRamp:
   transitionFrames: 15
 ```
 
+#### Smart Speed — Content-aware speed control (auto-compresses wait/loading periods)
+```yaml
+smartSpeed:
+  enabled: true
+  waitSpeed: 8                # Speed multiplier for smartWait frames (1-32, default: 8)
+  idleSpeed: 4                # Speed multiplier for idle frames (1-16, default: 4)
+  transitionDuration: 300     # Ease duration between speed changes (ms)
+  minSegmentDuration: 500     # Don't speed up segments shorter than this (ms)
+```
+> Unlike `speedRamp` (click-based), `smartSpeed` uses semantic metadata from `smartWait` actions and per-frame change scoring. Pairs naturally with `smartWait` for loading/API-call compression.
+
 #### Audio Narration — Attach audio to MP4 output
 ```yaml
 audio:
@@ -315,6 +338,11 @@ steps:
 9. **Smart camera**: zoom is automatically suppressed during scroll actions; `followCursor` pans to cursor position
 10. **Transitions**: use `fade` or `blur` for cinematic cuts between major sections; `slide-left`/`slide-up` for sequential flows
 11. **Audio**: audio file must exist at the specified path; only works with MP4 output format
+12. **Spring zoom**: use `easing: spring` for Screen Studio-like natural camera motion with fast initial response and smooth deceleration; nearby clicks are auto-merged into continuous zoom zones
+13. **Zoom sustain during typing**: zoom automatically maintains throughout `type` actions — no need to add extra click events
+14. **Auto loader detection**: CSS spinners (`@keyframes spin/rotate/pulse/bounce`) are passively detected via CDP and auto-marked for smartSpeed compression
+15. **Codec choice**: `av1` gives 40-60% smaller files but slower encode; `hevc` provides 10-bit color (no gradient banding); `auto` picks h264 for compatibility
+16. **smartWait over wait**: prefer `smartWait` over fixed `wait` for API calls and loading states — it captures real frames and auto-compresses them
 
 ## Timing Presets