fix(type): use insertText for framework-compatible input typing

.github/workflows/ci.yml

@@ -33,5 +33,55 @@ jobs:
       - name: Build
         run: pnpm build
 
+      - name: Schema drift check
+        run: |
+          pnpm --filter webreel run schema:generate
+          git diff --exit-code apps/docs/public/schema/v1.json
+
       - name: Test
-        run: pnpm test
+        run: pnpm test -- --coverage
+
+  record:
+    needs: ci
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: Install ffmpeg
+        run: |
+          sudo apt-get update && sudo apt-get install -y ffmpeg
+          echo "FFMPEG_PATH=$(which ffmpeg)" >> "$GITHUB_ENV"
+
+      - name: Cache Chrome for Testing
+        uses: actions/cache@v4
+        with:
+          path: ~/.webreel
+          key: ${{ runner.os }}-webreel-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-webreel-
+
+      - name: Build
+        run: pnpm build
+
+      - name: Record example videos
+        env:
+          SKIP_SYNC: "1"
+          EXAMPLES_FILTER: "hello-world form-filling gif-output"
+        run: bash scripts/record-examples.sh
+
+      - name: Upload recordings on failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: recorded-examples
+          path: examples/*/videos/
+          retention-days: 7

.gitignore

@@ -13,3 +13,7 @@ coverage
 *.log
 package-lock.json
 demo-reel.mp4
+
+.idea/
+videos/
+webreel.config.json

README.md

@@ -116,6 +116,8 @@ webreel record hero login
 webreel record -c custom.config.json
 webreel record --watch
 webreel record --verbose
+webreel record --dry-run
+webreel record --frames
 ```
 
 ### Preview
@@ -130,7 +132,7 @@ webreel preview hero --verbose
 
 ### Composite
 
-Re-composite videos from stored raw recordings and timelines without re-recording:
+Re-composite videos from stored raw recordings and timelines without re-recording. Timeline JSON includes cursor frames, sound events, and per-step `startMs` / `endMs` metadata so recordings can be synced with chapters, logs, or other external traces:
 
 ```bash
 webreel composite
@@ -165,58 +167,67 @@ webreel record --help
 
 ### Actions
 
-| Action       | Fields                                                 | Description                          |
-| ------------ | ------------------------------------------------------ | ------------------------------------ |
-| `pause`      | `ms`                                                   | Wait for a duration                  |
-| `click`      | `text` or `selector`, optional `within`, `modifiers`   | Move cursor to an element and click  |
-| `key`        | `key` (e.g. `"cmd+z"`), optional `label`               | Press a key or key combo             |
-| `type`       | `text`, optional `target`, `charDelay`                 | Type text character by character     |
-| `scroll`     | optional `x`, `y`, `selector`                          | Scroll the page or an element        |
-| `wait`       | `selector` or `text`, optional `timeout`               | Wait for an element to appear        |
-| `screenshot` | `output`                                               | Capture a PNG screenshot             |
-| `drag`       | `from` and `to` (each with `text`/`selector`/`within`) | Drag from one element to another     |
-| `moveTo`     | `text` or `selector`, optional `within`                | Move cursor to an element            |
-| `navigate`   | `url`                                                  | Navigate to a new URL mid-video      |
-| `hover`      | `text` or `selector`, optional `within`                | Hover over an element (triggers CSS) |
-| `select`     | `selector`, `value`                                    | Select a value in a dropdown         |
+| Action         | Fields                                                       | Description                          |
+| -------------- | ------------------------------------------------------------ | ------------------------------------ |
+| `pause`        | `ms`                                                         | Wait for a duration                  |
+| `click`        | `text` or `selector`, optional `within`, `modifiers`         | Move cursor to an element and click  |
+| `key`          | `key` (e.g. `"cmd+z"`), optional `label`                     | Press a key or key combo             |
+| `type`         | `text`, optional `selector`, `within`, `charDelay`, `method` | Type text character by character     |
+| `scroll`       | optional `x`, `y`, `selector`                                | Scroll the page or an element        |
+| `wait`         | `selector` or `text`, optional `timeout`                     | Wait for an element to appear        |
+| `screenshot`   | `output`                                                     | Capture a PNG screenshot             |
+| `drag`         | `from` and `to` (each with `text`/`selector`/`within`)       | Drag from one element to another     |
+| `moveTo`       | `text` or `selector`, optional `within`                      | Move cursor to an element            |
+| `navigate`     | `url`                                                        | Navigate to a new URL mid-video      |
+| `navigateHref` | `selector`                                                   | Navigate to a link element's href    |
+| `hover`        | `text` or `selector`, optional `within`                      | Hover over an element (triggers CSS) |
+| `select`       | `selector`, `value`                                          | Select a value in a dropdown         |
+| `upload`       | `selector`, `filePath`                                       | Set a file on a file input           |
 
 All steps (except `pause`) accept an optional `delay` field (ms to wait after the step). Use `defaultDelay` at the top-level or per-video to set a default.
 
 ### Config options
 
 #### Top-level
 
-| Field          | Default   | Description                                  |
-| -------------- | --------- | -------------------------------------------- |
-| `$schema`      | -         | JSON Schema URL for IDE autocompletion       |
-| `outDir`       | `videos/` | Default output directory for videos          |
-| `baseUrl`      | `""`      | Prepended to relative video URLs             |
-| `viewport`     | 1080x1080 | Default browser viewport dimensions          |
-| `theme`        | -         | Default cursor and HUD overlay customization |
-| `include`      | -         | Array of step files prepended to all videos  |
-| `defaultDelay` | -         | Default delay (ms) after each step           |
-| `videos`       | required  | Object mapping video names to their configs  |
+| Field          | Default         | Description                                                  |
+| -------------- | --------------- | ------------------------------------------------------------ |
+| `$schema`      | -               | JSON Schema URL for IDE autocompletion                       |
+| `outDir`       | `videos/`       | Default output directory for videos                          |
+| `baseUrl`      | `""`            | Prepended to relative video URLs                             |
+| `viewport`     | 1080x1080       | Default browser viewport dimensions                          |
+| `theme`        | -               | Default cursor and HUD overlay customization                 |
+| `include`      | -               | Array of step files prepended to all videos                  |
+| `defaultDelay` | -               | Default delay (ms) after each step                           |
+| `clickDwell`   | random 80-180ms | Milliseconds the cursor pauses before clicking (0 = instant) |
+| `sfx`          | -               | Sound effects configuration for click and keystroke sounds   |
+| `videos`       | required        | Object mapping video names to their configs                  |
 
 #### Per-video
 
-| Field          | Default       | Description                                            |
-| -------------- | ------------- | ------------------------------------------------------ |
-| `url`          | required      | URL to navigate to                                     |
-| `baseUrl`      | inherited     | Prepended to relative URLs                             |
-| `viewport`     | inherited     | Browser viewport dimensions                            |
-| `zoom`         | -             | CSS zoom level applied to the page                     |
-| `waitFor`      | -             | CSS selector to wait for before start                  |
-| `output`       | `<name>.mp4`  | Output file path (.mp4, .gif, or .webm)                |
-| `thumbnail`    | `{ time: 0 }` | Object with `time` (seconds) or `enabled: false`       |
-| `include`      | inherited     | Array of paths to JSON files whose steps are prepended |
-| `theme`        | inherited     | Cursor and HUD overlay customization                   |
-| `defaultDelay` | inherited     | Default delay (ms) after each step                     |
+| Field          | Default       | Description                                                |
+| -------------- | ------------- | ---------------------------------------------------------- |
+| `url`          | required      | URL to navigate to                                         |
+| `baseUrl`      | inherited     | Prepended to relative URLs                                 |
+| `viewport`     | inherited     | Browser viewport dimensions                                |
+| `zoom`         | -             | CSS zoom level applied to the page                         |
+| `fps`          | `60`          | Recording frame rate (1-120)                               |
+| `quality`      | `80`          | Output quality (1-100); higher values produce larger files |
+| `waitFor`      | -             | CSS selector to wait for before start                      |
+| `output`       | `<name>.mp4`  | Output file path (.mp4, .gif, or .webm)                    |
+| `thumbnail`    | `{ time: 0 }` | Object with `time` (seconds) or `enabled: false`           |
+| `include`      | inherited     | Array of paths to JSON files whose steps are prepended     |
+| `theme`        | inherited     | Cursor and HUD overlay customization                       |
+| `defaultDelay` | inherited     | Default delay (ms) after each step                         |
+| `clickDwell`   | inherited     | Milliseconds the cursor pauses before clicking             |
+| `sfx`          | inherited     | Sound effects configuration for click and keystroke sounds |
+| `autoZoom`     | `false`       | Cinematic zoom into each action (bool or object)           |
 
 ## Development
 
 ### Prerequisites
 
-- [Node.js](https://nodejs.org/) (v18+)
+- [Node.js](https://nodejs.org/) (v20+)
 - [pnpm](https://pnpm.io/)
 
 ### Setup