screenci 0.0.75 → 0.0.78

package/dist/docs/video-sources/public-urls-and-embeds.screenci.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-urls-and-embeds.screenci.d.ts","sourceRoot":"","sources":["../../../docs/video-sources/public-urls-and-embeds.screenci.ts"],"names":[],"mappings":""}

package/dist/docs/video-sources/public-urls-and-embeds.screenci.js

@@ -0,0 +1,60 @@
+import { hide, resetZoom, video, voices, zoomTo } from 'screenci';
+video.use({
+    renderOptions: {
+        narration: {
+            voice: { name: voices.Sophie, style: 'Friendly product guide' },
+        },
+    },
+});
+const appUrl = process.env.SCREENCI_APP_URL ?? 'https://app.screenci.com/';
+// Public URLs walkthrough recorded against the ScreenCI app (app.screenci.com) for
+// the Public URLs and Embeds guide. It opens a finished video and highlights the
+// Enable public URL switch that mints stable, language-specific delivery URLs.
+// Recording needs a logged-in session: set SCREENCI_APP_STORAGE_STATE (see
+// screenci.config.ts). The navigation mirrors studio.screenci.ts up to the video
+// page.
+//
+// The logo intro (assets/logo.png) is gitignored: it is uploaded on the first
+// record and reused on later runs (CI included).
+video
+    .overlays({
+    logo: { path: './assets/logo.png', fill: 'recording', duration: '2s' },
+})
+    .narration({
+    en: {
+        intro: 'Public URLs give a finished video a stable delivery surface.',
+        enable: 'Turn on Enable public URL to mint a route for each language.',
+        auto: 'Auto-select keeps every language on its latest finished render.',
+        outro: 'Embed the URL in docs, changelogs, or release pages.',
+    },
+})('Public URLs and embeds', async ({ page, narration, overlays }) => {
+    // The public-delivery switch lives behind auth (SCREENCI_APP_STORAGE_STATE).
+    video.skip(!process.env.SCREENCI_APP_STORAGE_STATE, 'Requires SCREENCI_APP_STORAGE_STATE (a logged-in app session).');
+    // Open a finished video page without showing the navigation.
+    await hide(async () => {
+        await page.goto(appUrl);
+        await page.waitForLoadState('networkidle');
+        await page
+            .getByRole('heading', { name: 'Projects' })
+            .waitFor({ timeout: 30000 });
+        await page.getByTestId('projects-list').getByRole('link').first().click();
+        await page.locator('a[href*="/video/"]').first().click();
+        await page
+            .getByRole('heading', { name: /language versions/i })
+            .waitFor({ timeout: 15000 });
+    });
+    await overlays.logo.for('2s');
+    await narration.intro();
+    // Frame the public-delivery control, identified by its label text.
+    await narration.enable.start();
+    const enableControl = page.getByText(/enable public url/i).first();
+    if (await enableControl.isVisible().catch(() => false)) {
+        await zoomTo(enableControl);
+        await page.waitForTimeout(900);
+        await resetZoom();
+    }
+    await narration.enable.end();
+    await narration.auto();
+    await narration.outro();
+});
+//# sourceMappingURL=public-urls-and-embeds.screenci.js.map

package/dist/docs/video-sources/public-urls-and-embeds.screenci.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-urls-and-embeds.screenci.js","sourceRoot":"","sources":["../../../docs/video-sources/public-urls-and-embeds.screenci.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjE,KAAK,CAAC,GAAG,CAAC;IACR,aAAa,EAAE;QACb,SAAS,EAAE;YACT,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,wBAAwB,EAAE;SAChE;KACF;CACF,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,gBAAgB,IAAI,2BAA2B,CAAA;AAE1E,mFAAmF;AACnF,iFAAiF;AACjF,+EAA+E;AAC/E,2EAA2E;AAC3E,iFAAiF;AACjF,QAAQ;AACR,EAAE;AACF,8EAA8E;AAC9E,iDAAiD;AACjD,KAAK;KACF,QAAQ,CAAC;IACR,IAAI,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE;CACvE,CAAC;KACD,SAAS,CAAC;IACT,EAAE,EAAE;QACF,KAAK,EAAE,8DAA8D;QACrE,MAAM,EAAE,8DAA8D;QACtE,IAAI,EAAE,iEAAiE;QACvE,KAAK,EAAE,sDAAsD;KAC9D;CACF,CAAC,CAAC,wBAAwB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrE,6EAA6E;IAC7E,KAAK,CAAC,IAAI,CACR,CAAC,OAAO,CAAC,GAAG,CAAC,0BAA0B,EACvC,gEAAgE,CACjE,CAAA;IAED,6DAA6D;IAC7D,MAAM,IAAI,CAAC,KAAK,IAAI,EAAE;QACpB,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QACvB,MAAM,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAE1C,MAAM,IAAI;aACP,SAAS,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;aAC1C,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAA;QAC9B,MAAM,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAA;QACzE,MAAM,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAA;QACxD,MAAM,IAAI;aACP,SAAS,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE,CAAC;aACpD,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAA;IAChC,CAAC,CAAC,CAAA;IAEF,MAAM,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;IAC7B,MAAM,SAAS,CAAC,KAAK,EAAE,CAAA;IAEvB,mEAAmE;IACnE,MAAM,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IAC9B,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,KAAK,EAAE,CAAA;IAClE,IAAI,MAAM,aAAa,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QACvD,MAAM,MAAM,CAAC,aAAa,CAAC,CAAA;QAC3B,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;QAC9B,MAAM,SAAS,EAAE,CAAA;IACnB,CAAC;IACD,MAAM,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,CAAA;IAE5B,MAAM,SAAS,CAAC,IAAI,EAAE,CAAA;IACtB,MAAM,SAAS,CAAC,KAAK,EAAE,CAAA;AACzB,CAAC,CAAC,CAAA"}

package/dist/docs/video-sources/speaking-style.screenci.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=speaking-style.screenci.d.ts.map

package/dist/docs/video-sources/speaking-style.screenci.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"speaking-style.screenci.d.ts","sourceRoot":"","sources":["../../../docs/video-sources/speaking-style.screenci.ts"],"names":[],"mappings":""}

package/dist/docs/video-sources/speaking-style.screenci.js

@@ -0,0 +1,76 @@
+import { hide, video, voices } from 'screenci';
+video.use({
+    renderOptions: {
+        recording: {
+            size: 0.85,
+            shape: 'rounded',
+            roundness: 0.05,
+            dropShadow: 'drop-shadow(0 22px 49px rgba(0,0,0,0.28)) drop-shadow(0 6px 15px rgba(0,0,0,0.17))',
+        },
+        narration: {
+            voice: {
+                name: voices.Nora,
+                style: 'Clear and professional product narrator.',
+            },
+            size: 0.3,
+            shape: 'rounded',
+            roundness: 0,
+            corner: 'bottom-right',
+            padding: 0.04,
+            dropShadow: 1,
+        },
+        output: {
+            aspectRatio: '16:9',
+            quality: '1080p',
+            background: {
+                backgroundCss: 'linear-gradient(313deg, #ffffff 0%, #d6d6d6 100%)',
+            },
+        },
+    },
+});
+// Each cue carries its own style prompt, so the voice adapts its delivery per
+// line without any audio editing.
+video.narration({
+    en: {
+        hook: {
+            cue: 'Every narration line can have its own speaking style.',
+            voice: {
+                name: voices.Nora,
+                style: 'Warm and intriguing, drawing the viewer in.',
+            },
+        },
+        explain: {
+            cue: 'You write a style prompt alongside the text. The same voice reads the line, but the delivery follows the prompt you wrote.',
+            voice: {
+                name: voices.Nora,
+                style: 'Measured and instructional, making a point clearly.',
+            },
+        },
+        reveal: {
+            cue: 'One script can have a calm explainer, then shift to an excited reveal, all in the same render.',
+            voice: {
+                name: voices.Nora,
+                style: 'Energetic and enthusiastic, building into a reveal.',
+            },
+        },
+        outro: {
+            cue: 'Write the style in plain English. The voice does the rest.',
+            voice: {
+                name: voices.Nora,
+                style: 'Confident and conclusive, landing the final thought.',
+            },
+        },
+    },
+})('Per-cue speaking style', async ({ page, narration }) => {
+    await hide(async () => {
+        await page.goto('https://screenci.com/docs/guides/narration');
+        await page.waitForLoadState('networkidle');
+    });
+    await narration.hook();
+    await narration.explain();
+    await page.evaluate(() => window.scrollBy({ top: 400, behavior: 'smooth' }));
+    await page.waitForTimeout(1200);
+    await narration.reveal();
+    await narration.outro();
+});
+//# sourceMappingURL=speaking-style.screenci.js.map

package/dist/docs/video-sources/speaking-style.screenci.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"speaking-style.screenci.js","sourceRoot":"","sources":["../../../docs/video-sources/speaking-style.screenci.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAE9C,KAAK,CAAC,GAAG,CAAC;IACR,aAAa,EAAE;QACb,SAAS,EAAE;YACT,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,IAAI;YACf,UAAU,EACR,oFAAoF;SACvF;QACD,SAAS,EAAE;YACT,KAAK,EAAE;gBACL,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,KAAK,EAAE,0CAA0C;aAClD;YACD,IAAI,EAAE,GAAG;YACT,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,cAAc;YACtB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,CAAC;SACd;QACD,MAAM,EAAE;YACN,WAAW,EAAE,MAAM;YACnB,OAAO,EAAE,OAAO;YAChB,UAAU,EAAE;gBACV,aAAa,EAAE,mDAAmD;aACnE;SACF;KACF;CACF,CAAC,CAAA;AAEF,8EAA8E;AAC9E,kCAAkC;AAClC,KAAK,CAAC,SAAS,CAAC;IACd,EAAE,EAAE;QACF,IAAI,EAAE;YACJ,GAAG,EAAE,uDAAuD;YAC5D,KAAK,EAAE;gBACL,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,KAAK,EAAE,6CAA6C;aACrD;SACF;QACD,OAAO,EAAE;YACP,GAAG,EAAE,4HAA4H;YACjI,KAAK,EAAE;gBACL,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,KAAK,EAAE,qDAAqD;aAC7D;SACF;QACD,MAAM,EAAE;YACN,GAAG,EAAE,gGAAgG;YACrG,KAAK,EAAE;gBACL,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,KAAK,EAAE,qDAAqD;aAC7D;SACF;QACD,KAAK,EAAE;YACL,GAAG,EAAE,4DAA4D;YACjE,KAAK,EAAE;gBACL,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,KAAK,EAAE,sDAAsD;aAC9D;SACF;KACF;CACF,CAAC,CAAC,wBAAwB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;IACzD,MAAM,IAAI,CAAC,KAAK,IAAI,EAAE;QACpB,MAAM,IAAI,CAAC,IAAI,CAAC,4CAA4C,CAAC,CAAA;QAC7D,MAAM,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;IAC5C,CAAC,CAAC,CAAA;IAEF,MAAM,SAAS,CAAC,IAAI,EAAE,CAAA;IACtB,MAAM,SAAS,CAAC,OAAO,EAAE,CAAA;IAEzB,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;IAC5E,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IAE/B,MAAM,SAAS,CAAC,MAAM,EAAE,CAAA;IACxB,MAAM,SAAS,CAAC,KAAK,EAAE,CAAA;AACzB,CAAC,CAAC,CAAA"}

package/dist/docs/video-sources/studio.screenci.js

@@ -12,16 +12,14 @@ const appUrl = process.env.SCREENCI_APP_URL ?? 'https://app.screenci.com/';
 // auth, so recording this needs a logged-in session: set SCREENCI_APP_STORAGE_STATE
 // to a Playwright storageState JSON (see screenci.config.ts). The walkthrough is
 // self-contained: it opens the first project and video, then enters Studio.
-video.localize({
-    narration: {
-        en: {
-            intro: 'Open any finished video in Studio to edit it right in the browser.',
-            edit: 'Review render options in the Studio panel, then render a new version. No code, no re-recording.',
-        },
-        es: {
-            intro: 'Abre cualquier video terminado en Studio para editarlo directamente en el navegador.',
-            edit: 'Revisa las opciones de render en el panel de Studio y genera una nueva version. Sin codigo y sin volver a grabar.',
-        },
+video.narration({
+    en: {
+        intro: 'Open any finished video in Studio to edit it right in the browser.',
+        edit: 'Review render options in the Studio panel, then render a new version. No code, no re-recording.',
+    },
+    es: {
+        intro: 'Abre cualquier video terminado en Studio para editarlo directamente en el navegador.',
+        edit: 'Revisa las opciones de render en el panel de Studio y genera una nueva version. Sin codigo y sin volver a grabar.',
     },
 })('Studio web editing', async ({ page, narration }) => {
     // Studio lives behind auth, so this recording only works with a logged-in

package/dist/docs/video-sources/studio.screenci.js.map

@@ -1 +1 @@
-{"version":3,"file":"studio.screenci.js","sourceRoot":"","sources":["../../../docs/video-sources/studio.screenci.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"studio.screenci.js","sourceRoot":"","sources":["../../../docs/video-sources/studio.screenci.ts"],"names":[],"mappings":"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"}

package/dist/docs/video-sources/vertical-video.screenci.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=vertical-video.screenci.d.ts.map

package/dist/docs/video-sources/vertical-video.screenci.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-video.screenci.d.ts","sourceRoot":"","sources":["../../../docs/video-sources/vertical-video.screenci.ts"],"names":[],"mappings":""}

package/dist/docs/video-sources/vertical-video.screenci.js

@@ -0,0 +1,58 @@
+import { hide, video, voices } from 'screenci';
+video.use({
+    renderOptions: {
+        recording: {
+            size: 0.82,
+            shape: 'rounded',
+            roundness: 0.05,
+            dropShadow: 'drop-shadow(0 20px 44px rgba(0,0,0,0.30)) drop-shadow(0 5px 12px rgba(0,0,0,0.16))',
+        },
+        narration: {
+            voice: {
+                name: voices.Sophie,
+                style: 'Calm and direct, presenting a product feature to developers.',
+            },
+            size: 0.26,
+            shape: 'rounded',
+            roundness: 0,
+            corner: 'bottom-right',
+            padding: 0.04,
+            dropShadow: 1,
+        },
+        output: {
+            aspectRatio: '9:16',
+            quality: '1080p',
+            background: {
+                backgroundCss: 'linear-gradient(170deg, #0f0c1e 0%, #1b1040 55%, #0d0b1a 100%)',
+            },
+        },
+    },
+    recordOptions: {
+        aspectRatio: '9:16',
+        // 720px wide viewport triggers mobile/responsive layout on the site.
+        // The render output stays at 1080p (1080x1920) via renderOptions.output.
+        quality: '720p',
+    },
+});
+video.narration({
+    en: {
+        hook: 'Most product videos are built for landscape. But social, ads, and mobile all need vertical.',
+        config: 'ScreenCI handles vertical natively. Set the aspect ratio to nine-sixteen and the recorder opens a portrait viewport automatically.',
+        demo: 'No cropping, no reframing. The whole walkthrough was captured vertically from frame one.',
+        outro: 'Same script, same narration, new format. One config change, re-render, done.',
+    },
+})('Vertical video output', async ({ page, narration }) => {
+    await hide(async () => {
+        await page.goto('https://screenci.com/');
+        await page.waitForLoadState('networkidle');
+    });
+    await narration.hook();
+    await narration.config();
+    await page.evaluate(() => window.scrollBy({ top: 320, behavior: 'smooth' }));
+    await page.waitForTimeout(1600);
+    await narration.demo();
+    await page.evaluate(() => window.scrollBy({ top: 280, behavior: 'smooth' }));
+    await page.waitForTimeout(1400);
+    await narration.outro();
+});
+//# sourceMappingURL=vertical-video.screenci.js.map

package/dist/docs/video-sources/vertical-video.screenci.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-video.screenci.js","sourceRoot":"","sources":["../../../docs/video-sources/vertical-video.screenci.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAE9C,KAAK,CAAC,GAAG,CAAC;IACR,aAAa,EAAE;QACb,SAAS,EAAE;YACT,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,IAAI;YACf,UAAU,EACR,oFAAoF;SACvF;QACD,SAAS,EAAE;YACT,KAAK,EAAE;gBACL,IAAI,EAAE,MAAM,CAAC,MAAM;gBACnB,KAAK,EAAE,8DAA8D;aACtE;YACD,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,cAAc;YACtB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,CAAC;SACd;QACD,MAAM,EAAE;YACN,WAAW,EAAE,MAAM;YACnB,OAAO,EAAE,OAAO;YAChB,UAAU,EAAE;gBACV,aAAa,EACX,gEAAgE;aACnE;SACF;KACF;IACD,aAAa,EAAE;QACb,WAAW,EAAE,MAAM;QACnB,qEAAqE;QACrE,yEAAyE;QACzE,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAA;AAEF,KAAK,CAAC,SAAS,CAAC;IACd,EAAE,EAAE;QACF,IAAI,EAAE,6FAA6F;QACnG,MAAM,EACJ,oIAAoI;QACtI,IAAI,EAAE,0FAA0F;QAChG,KAAK,EACH,8EAA8E;KACjF;CACF,CAAC,CAAC,uBAAuB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;IACxD,MAAM,IAAI,CAAC,KAAK,IAAI,EAAE;QACpB,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAA;QACxC,MAAM,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;IAC5C,CAAC,CAAC,CAAA;IAEF,MAAM,SAAS,CAAC,IAAI,EAAE,CAAA;IACtB,MAAM,SAAS,CAAC,MAAM,EAAE,CAAA;IAExB,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;IAC5E,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IAE/B,MAAM,SAAS,CAAC,IAAI,EAAE,CAAA;IAEtB,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;IAC5E,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IAE/B,MAAM,SAAS,CAAC,KAAK,EAAE,CAAA;AACzB,CAAC,CAAC,CAAA"}

package/dist/docs/videos.d.ts

@@ -34,6 +34,26 @@ export declare const docsVideoRegistry: {
         readonly alt: "A marketing-site link highlighted by a pink ring with margin around it, framed as a branded still";
         readonly sourcePath: "screenci/docs/video-sources/locator-highlight-still.screenci.ts";
     };
+    readonly 'docs/guides/narration': {
+        readonly sourcePath: "screenci/docs/video-sources/narration.screenci.ts";
+        readonly showSource: false;
+    };
+    readonly 'docs/guides/camera-and-zooming': {
+        readonly sourcePath: "screenci/docs/video-sources/camera-and-zooming.screenci.ts";
+        readonly showSource: false;
+    };
+    readonly 'docs/guides/languages': {
+        readonly sourcePath: "screenci/docs/video-sources/languages.screenci.ts";
+        readonly showSource: false;
+    };
+    readonly 'docs/guides/studio': {
+        readonly sourcePath: "screenci/docs/video-sources/studio.screenci.ts";
+        readonly showSource: false;
+    };
+    readonly 'docs/guides/public-urls-and-embeds': {
+        readonly sourcePath: "screenci/docs/video-sources/public-urls-and-embeds.screenci.ts";
+        readonly showSource: false;
+    };
 };
 export declare function getDocVideo(slug: string): DocVideo | null;
 export declare function hasPublicId(video: DocVideo): video is PublishedDocVideo;

package/dist/docs/videos.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"videos.d.ts","sourceRoot":"","sources":["../../docs/videos.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,YAAY,CAAA;AAEjD,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,gDAAgD;IAChD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG;IAC/C,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAA;AAEhD,MAAM,MAAM,QAAQ,GAAG,iBAAiB,GAAG,mBAAmB,CAAA;AAE9D,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;CAqBe,CAAA;AAE7C,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAEzD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,GAAG,KAAK,IAAI,iBAAiB,CAEvE"}
+{"version":3,"file":"videos.d.ts","sourceRoot":"","sources":["../../docs/videos.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,YAAY,CAAA;AAEjD,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,gDAAgD;IAChD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG;IAC/C,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAA;AAEhD,MAAM,MAAM,QAAQ,GAAG,iBAAiB,GAAG,mBAAmB,CAAA;AAE9D,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Ce,CAAA;AAE7C,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAEzD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,GAAG,KAAK,IAAI,iBAAiB,CAEvE"}

package/dist/docs/videos.js

@@ -17,6 +17,31 @@ export const docsVideoRegistry = {
         alt: 'A marketing-site link highlighted by a pink ring with margin around it, framed as a branded still',
         sourcePath: 'screenci/docs/video-sources/locator-highlight-still.screenci.ts',
     },
+    // The narrated walkthroughs below are authored but not yet recorded: they have
+    // no publicId, so the page injects an invisible placeholder until the video is
+    // recorded and published, then a publicId is added here (see videos.ts docs).
+    // The four app demos record the authenticated app via shared auth
+    // (SCREENCI_APP_STORAGE_STATE); camera-and-zooming records the public site.
+    'docs/guides/narration': {
+        sourcePath: 'screenci/docs/video-sources/narration.screenci.ts',
+        showSource: false,
+    },
+    'docs/guides/camera-and-zooming': {
+        sourcePath: 'screenci/docs/video-sources/camera-and-zooming.screenci.ts',
+        showSource: false,
+    },
+    'docs/guides/languages': {
+        sourcePath: 'screenci/docs/video-sources/languages.screenci.ts',
+        showSource: false,
+    },
+    'docs/guides/studio': {
+        sourcePath: 'screenci/docs/video-sources/studio.screenci.ts',
+        showSource: false,
+    },
+    'docs/guides/public-urls-and-embeds': {
+        sourcePath: 'screenci/docs/video-sources/public-urls-and-embeds.screenci.ts',
+        showSource: false,
+    },
 };
 export function getDocVideo(slug) {
     return docsVideoRegistry[slug] ?? null;

package/dist/docs/videos.js.map

@@ -1 +1 @@
-{"version":3,"file":"videos.js","sourceRoot":"","sources":["../../docs/videos.ts"],"names":[],"mappings":"AAyBA,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,mBAAmB,EAAE;QACnB,QAAQ,EAAE,kCAAkC;QAC5C,UAAU,EAAE,sDAAsD;QAClE,UAAU,EAAE,KAAK;KAClB;IACD,gEAAgE;IAChE,sBAAsB,EAAE;QACtB,QAAQ,EAAE,kCAAkC;QAC5C,UAAU,EACR,oEAAoE;KACvE;IACD,uEAAuE;IACvE,wBAAwB;IACxB,yBAAyB,EAAE;QACzB,QAAQ,EAAE,kCAAkC;QAC5C,IAAI,EAAE,YAAY;QAClB,GAAG,EAAE,mGAAmG;QACxG,UAAU,EACR,iEAAiE;KACpE;CAC0C,CAAA;AAE7C,MAAM,UAAU,WAAW,CAAC,IAAY;IACtC,OAAO,iBAAiB,CAAC,IAAsC,CAAC,IAAI,IAAI,CAAA;AAC1E,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAe;IACzC,OAAO,UAAU,IAAI,KAAK,CAAA;AAC5B,CAAC"}
+{"version":3,"file":"videos.js","sourceRoot":"","sources":["../../docs/videos.ts"],"names":[],"mappings":"AAyBA,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,mBAAmB,EAAE;QACnB,QAAQ,EAAE,kCAAkC;QAC5C,UAAU,EAAE,sDAAsD;QAClE,UAAU,EAAE,KAAK;KAClB;IACD,gEAAgE;IAChE,sBAAsB,EAAE;QACtB,QAAQ,EAAE,kCAAkC;QAC5C,UAAU,EACR,oEAAoE;KACvE;IACD,uEAAuE;IACvE,wBAAwB;IACxB,yBAAyB,EAAE;QACzB,QAAQ,EAAE,kCAAkC;QAC5C,IAAI,EAAE,YAAY;QAClB,GAAG,EAAE,mGAAmG;QACxG,UAAU,EACR,iEAAiE;KACpE;IACD,+EAA+E;IAC/E,+EAA+E;IAC/E,8EAA8E;IAC9E,kEAAkE;IAClE,4EAA4E;IAC5E,uBAAuB,EAAE;QACvB,UAAU,EAAE,mDAAmD;QAC/D,UAAU,EAAE,KAAK;KAClB;IACD,gCAAgC,EAAE;QAChC,UAAU,EAAE,4DAA4D;QACxE,UAAU,EAAE,KAAK;KAClB;IACD,uBAAuB,EAAE;QACvB,UAAU,EAAE,mDAAmD;QAC/D,UAAU,EAAE,KAAK;KAClB;IACD,oBAAoB,EAAE;QACpB,UAAU,EAAE,gDAAgD;QAC5D,UAAU,EAAE,KAAK;KAClB;IACD,oCAAoC,EAAE;QACpC,UAAU,EACR,gEAAgE;QAClE,UAAU,EAAE,KAAK;KAClB;CAC0C,CAAA;AAE7C,MAAM,UAAU,WAAW,CAAC,IAAY;IACtC,OAAO,iBAAiB,CAAC,IAAsC,CAAC,IAAI,IAAI,CAAA;AAC1E,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAe;IACzC,OAAO,UAAU,IAAI,KAAK,CAAA;AAC5B,CAAC"}

package/dist/e2e/instrument.e2e.js

@@ -122,6 +122,14 @@ test.describe('click instrumentation', () => {
         });
         expect(await scrollY(page)).toBeGreaterThan(0);
     });
+    test('does not scroll when clicking an already-visible element', async ({ page, }) => {
+        expect(await scrollY(page)).toBe(0);
+        await clickableLocator(page.locator('#click-button')).click({
+            moveDuration: 50,
+        });
+        // The button is already on screen, so a plain click must not move the page.
+        expect(await scrollY(page)).toBe(0);
+    });
     test('actually clicks an off-screen button after scrolling', async ({ page, }) => {
         await clickableLocator(page.locator('#offscreen-click-button')).click({
             moveDuration: 50,
@@ -641,12 +649,25 @@ test.describe('mouse.move instrumentation', () => {
             ? events[0].easing
             : events[0].mouse?.easing).toBe('ease-out');
     });
-    test('records mouseMove without easing for instant move', async ({ page, }) => {
+    test('a bare move animates by default with default easing', async ({ page, }) => {
         await page.mouse.move(100, 150);
         const events = mouseMoveEvents();
         expect(events).toHaveLength(1);
         expect(events[0].x).toBe(100);
         expect(events[0].y).toBe(150);
+        expect(moveEndMs(events[0]) - moveStartMs(events[0])).toBeGreaterThan(0);
+        expect(events[0].type === 'mouseMove'
+            ? events[0].easing
+            : events[0].mouse?.easing).toBe('ease-in-out');
+    });
+    test('records mouseMove without easing for an explicit instant move', async ({ page, }) => {
+        await page.mouse.move(100, 150, {
+            duration: 0,
+        });
+        const events = mouseMoveEvents();
+        expect(events).toHaveLength(1);
+        expect(events[0].x).toBe(100);
+        expect(events[0].y).toBe(150);
         expect(events[0].type === 'mouseMove'
             ? events[0].easing
             : events[0].mouse?.easing).toBeUndefined();
@@ -670,6 +691,44 @@ test.describe('mouse.move instrumentation', () => {
     });
 });
 // ---------------------------------------------------------------------------
+// page.mouse press methods (down / up / click / dblclick)
+// ---------------------------------------------------------------------------
+test.describe('mouse press instrumentation', () => {
+    async function clickButtonCenter(page) {
+        const bb = await page.locator('#click-button').boundingBox();
+        return { x: bb.x + bb.width / 2, y: bb.y + bb.height / 2 };
+    }
+    test('records page.mouse.down and page.mouse.up as their own input events', async ({ page, }) => {
+        const mouse = page.mouse;
+        await mouse.down();
+        await mouse.up();
+        const subTypes = inputEvents().map((e) => e.subType);
+        expect(subTypes).toEqual(['mouseDown', 'mouseUp']);
+    });
+    test('page.mouse.click actually clicks at the coordinates', async ({ page, }) => {
+        const { x, y } = await clickButtonCenter(page);
+        await page.mouse.click(x, y, {
+            moveDuration: 50,
+        });
+        await expect(page.locator('#click-status')).not.toHaveText('Not clicked');
+        expect(clickEvents()).toHaveLength(1);
+    });
+    test('fake page.mouse.click records a click but does not click the page', async ({ page, }) => {
+        const { x, y } = await clickButtonCenter(page);
+        await page.mouse.click(x, y, {
+            moveDuration: 50,
+            fake: true,
+        });
+        // The page was never actually clicked...
+        await expect(page.locator('#click-status')).toHaveText('Not clicked');
+        // ...but the click is still recorded for the video.
+        const events = clickEvents();
+        expect(events).toHaveLength(1);
+        expect(events[0].events.some((e) => e.type === 'mouseDown')).toBe(true);
+        expect(events[0].events.some((e) => e.type === 'mouseUp')).toBe(true);
+    });
+});
+// ---------------------------------------------------------------------------
 // hover
 // ---------------------------------------------------------------------------
 function hoverableLocator(locator) {