screenci 0.0.71 → 0.0.73

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

@@ -1,21 +1,29 @@
-import { autoZoom, createNarration, hide, resetZoom, video, voices, zoomTo, } from 'screenci';
+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/';
 // Studio walkthrough recorded against the ScreenCI app (app.screenci.com), for
 // the "Remix in Studio on the web" tile on the landing page. Studio lives behind
 // 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.
-const narration = createNarration({
-    voice: { name: voices.Sophie, style: 'Friendly product guide' },
-    en: {
-        intro: 'Open any finished video in Studio to edit it right in the browser.',
-        edit: 'Change narration, add a language, or restyle render options, 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: 'Cambia la narracion, agrega un idioma o ajusta las opciones de render, y genera una nueva version. Sin codigo y sin volver a grabar.',
+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('Studio web editing', async ({ page }) => {
+})('Studio web editing', async ({ page, narration }) => {
     // Studio lives behind auth, so this recording only works with a logged-in
     // session (SCREENCI_APP_STORAGE_STATE, see screenci.config.ts). When it is not
     // configured (e.g. CI without the session secret), skip instead of timing out
@@ -23,35 +31,42 @@ video('Studio web editing', async ({ page }) => {
     video.skip(!process.env.SCREENCI_APP_STORAGE_STATE, 'Requires SCREENCI_APP_STORAGE_STATE (a logged-in app session).');
     // Navigate from the dashboard into Studio without showing it in the recording.
     await hide(async () => {
-        await page.goto('https://app.screenci.com/');
+        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();
-        // Open the first video in the project, then enter Studio.
-        await page.getByRole('link', { name: /video/i }).first().click();
+        // Open the first video, then its first language page where Studio is shown
+        // inline below the preview.
+        await page.locator('a[href*="/video/"]').first().click();
         await page
-            .getByRole('heading', { name: /languages/i })
+            .getByRole('heading', { name: /language versions/i })
             .waitFor({ timeout: 15000 });
-        await page.getByRole('link', { name: /open in studio/i }).click();
+        await page
+            .getByRole('link', { name: /^open /i })
+            .first()
+            .click();
         await page
             .getByRole('heading', { name: /^studio$/i })
             .waitFor({ timeout: 30000 });
     });
     await narration.intro();
-    // Show adding a language: a visible edit that does not trigger a render.
+    // Show the Studio panel without depending on a specific video having editable
+    // narration cues in the seeded dev data.
     await narration.edit.start();
-    await autoZoom(async () => {
-        const addLanguage = page.getByPlaceholder(/add language/i);
-        await addLanguage.scrollIntoViewIfNeeded();
-        await addLanguage.click();
-        await addLanguage.fill('French');
-    });
-    await narration.edit.end();
-    // Highlight the Render action without clicking it (avoid kicking off a render).
-    await zoomTo(page.getByRole('button', { name: /^render( [a-z-]+)?$/i }));
+    await zoomTo(page.getByRole('heading', { name: /^studio$/i }));
     await page.waitForTimeout(900);
     await resetZoom();
+    await narration.edit.end();
+    const createOneOffButton = page.getByRole('button', {
+        name: 'Create one-off version',
+    });
+    if (await createOneOffButton.isVisible().catch(() => false)) {
+        // Highlight the render entry point without clicking it.
+        await zoomTo(createOneOffButton);
+        await page.waitForTimeout(900);
+        await resetZoom();
+    }
 });
 //# sourceMappingURL=studio.screenci.js.map

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/index.d.ts

@@ -6,20 +6,22 @@ export { video } from './src/video.js';
 export { screenshot } from './src/screenshot.js';
 export type { CropTarget, CropRegion, CropOptions, ScreenshotCrop, ScreenshotCropRecord, ResolvedCropPadding, } from './src/crop.js';
 export type { ScreenCIPage, ScreenCILocator } from './src/types.js';
-export { createNarration, createStudioNarration } from './src/cue.js';
 export type { NarrationCue, Cues, TopLevelVoiceConfig } from './src/cue.js';
-export { isStudioRenderOptions } from './src/studio.js';
-export type { StudioRenderOptionsSentinel } from './src/studio.js';
+export type { LangNarrationOverride } from './src/voiceConfig.js';
+export type { EachVariant, VideoBuilder } from './src/builder.js';
+export type { LocalizeSpec, LocalizeMode, LocalizeVoiceSpec, NarrationByLang, TextByLang, VoiceConfig, LocalizeNarrationValue, } from './src/localize.js';
+export { resolveLocaleForLanguage, DEFAULT_LANGUAGE_LOCALES, } from './src/locales.js';
+export type { StudioDeclaration } from './src/studio.js';
 export { hide } from './src/hide.js';
 export { speed } from './src/speed.js';
 export { time } from './src/time.js';
 export { autoZoom } from './src/autoZoom.js';
 export { zoomTo, resetZoom } from './src/manualZoom.js';
-export { createOverlays, createStudioOverlays, setOverlayCss, MAX_AUDIO_LEVEL, } from './src/asset.js';
+export { createOverlays, setOverlayCss, MAX_AUDIO_LEVEL } from './src/asset.js';
 export type { OverlayController, OverlayConfig, OverlayConfigFactory, OverlayInput, OverlayInputOrFactory, Overlays, OverlayControllerFor, ReactElementLike, OverlayPlacement, } from './src/asset.js';
 export { overlayRect } from './src/overlayRect.js';
 export type { OverlayRect, OverlayRectOptions } from './src/overlayRect.js';
-export { createAudio, createStudioAudio } from './src/audio.js';
+export { createAudio } from './src/audio.js';
 export type { AudioController, AudioConfig, AudioInput, AudioTracks, } from './src/audio.js';
 export type { ZoomTarget, ZoomTargetPoint } from './src/manualZoom.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,WAAW,EACX,GAAG,EACH,OAAO,EACP,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,sBAAsB,EACtB,uBAAuB,EACvB,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,MAAM,EACN,kBAAkB,GACnB,MAAM,gBAAgB,CAAA;AAGvB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AACpD,YAAY,EACV,QAAQ,EACR,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,SAAS,GACV,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG9C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,YAAY,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,eAAe,CAAA;AACtB,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACrE,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,YAAY,EAAE,2BAA2B,EAAE,MAAM,iBAAiB,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,aAAa,EACb,eAAe,GAChB,MAAM,gBAAgB,CAAA;AACvB,YAAY,EACV,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,qBAAqB,EACrB,QAAQ,EACR,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAC/D,YAAY,EACV,eAAe,EACf,WAAW,EACX,UAAU,EACV,WAAW,GACZ,MAAM,gBAAgB,CAAA;AACvB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,WAAW,EACX,GAAG,EACH,OAAO,EACP,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,sBAAsB,EACtB,uBAAuB,EACvB,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,MAAM,EACN,kBAAkB,GACnB,MAAM,gBAAgB,CAAA;AAGvB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AACpD,YAAY,EACV,QAAQ,EACR,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,SAAS,GACV,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG9C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,YAAY,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,eAAe,CAAA;AACtB,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAKnE,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAC3E,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AACjE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACjE,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,UAAU,EACV,WAAW,EACX,sBAAsB,GACvB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,kBAAkB,CAAA;AACzB,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAC/E,YAAY,EACV,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,qBAAqB,EACrB,QAAQ,EACR,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EACV,eAAe,EACf,WAAW,EACX,UAAU,EACV,WAAW,GACZ,MAAM,gBAAgB,CAAA;AACvB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/index.js

@@ -5,14 +5,13 @@ export { defineConfig } from './src/config.js';
 // Re-export video fixture and narration cue
 export { video } from './src/video.js';
 export { screenshot } from './src/screenshot.js';
-export { createNarration, createStudioNarration } from './src/cue.js';
-export { isStudioRenderOptions } from './src/studio.js';
+export { resolveLocaleForLanguage, DEFAULT_LANGUAGE_LOCALES, } from './src/locales.js';
 export { hide } from './src/hide.js';
 export { speed } from './src/speed.js';
 export { time } from './src/time.js';
 export { autoZoom } from './src/autoZoom.js';
 export { zoomTo, resetZoom } from './src/manualZoom.js';
-export { createOverlays, createStudioOverlays, setOverlayCss, MAX_AUDIO_LEVEL, } from './src/asset.js';
+export { createOverlays, setOverlayCss, MAX_AUDIO_LEVEL } from './src/asset.js';
 export { overlayRect } from './src/overlayRect.js';
-export { createAudio, createStudioAudio } from './src/audio.js';
+export { createAudio } from './src/audio.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAiBA,mBAAmB;AACnB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AASpD,4BAA4B;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,4CAA4C;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAUhD,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAErE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,aAAa,EACb,eAAe,GAChB,MAAM,gBAAgB,CAAA;AAYvB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAElD,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAiBA,mBAAmB;AACnB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AASpD,4BAA4B;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,4CAA4C;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AA0BhD,OAAO,EACL,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAY/E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/src/asset.d.ts

@@ -15,30 +15,15 @@ export type ReactElementLike = {
     key?: string | null;
 };
 /**
- * Display options for an overlay. Placement fields are flat (not nested) and use
- * CSS pixels in the recording viewport (the same space as Playwright's
- * `boundingBox()`, `page.mouse`, and `viewportSize()`), each defaulting
- * independently: `relativeTo: 'recording'`, `x: 0`, `y: 0`. Provide exactly one
- * of `width`/`height` (the other follows the source aspect, or `aspectRatio`).
- * When no placement field is set, the overlay fills the recording area.
+ * Placement and capture fields shared by every overlay variant. Placement is
+ * flat (not nested) and uses CSS pixels in the recording viewport (the same
+ * space as Playwright's `boundingBox()`, `page.mouse`, and `viewportSize()`),
+ * each defaulting independently: `relativeTo: 'recording'`, `x: 0`, `y: 0`.
+ * Provide exactly one of `width`/`height` (the other follows the source aspect,
+ * or `aspectRatio`). When no placement field is set, the overlay fills the
+ * recording area.
  */
-export type OverlayConfig = {
-    /** File path: `.html` (rendered), `.svg`/`.png` (image), or `.mp4` (video). */
-    path?: string;
-    /**
-     * A React element, rendered to a transparent PNG. Use this for overlays built
-     * in JSX. Provide exactly one source: `path`, `element`, or `html`.
-     */
-    element?: ReactElementLike;
-    /**
-     * An inline HTML fragment, rendered to a transparent PNG. Use this when you
-     * want plain HTML without a React dependency or a separate `.html` file. It
-     * must be a fragment (for example `'<div class="badge">New</div>'`), never a
-     * full document: `<!doctype>`, `<html>`, `<head>`, and `<body>` tags are
-     * rejected because screenci wraps the markup in its own document. Provide
-     * exactly one source: `path`, `element`, or `html`.
-     */
-    html?: string;
+type OverlayCommon = {
     /** Reference box for placement coordinates. Defaults to `'recording'`. */
     relativeTo?: 'screen' | 'recording';
     /** Left edge in CSS px of the recording viewport. Defaults to `0`. */
@@ -54,13 +39,18 @@ export type OverlayConfig = {
      * you provide, instead of the source's intrinsic aspect. Optional.
      */
     aspectRatio?: number;
-    /** Fill the whole output frame. Overrides x/y/width/height. */
-    fullScreen?: boolean;
+    /**
+     * Fill the whole frame instead of positioning the overlay. `'recording'`
+     * fills the recording area (the same as omitting every placement field);
+     * `'screen'` fills the entire output frame, including any padding around the
+     * recording. Overrides `x`/`y`/`width`/`height`.
+     */
+    fill?: 'recording' | 'screen';
     /**
      * Position the overlay over a live element, captured at recording time from
      * the locator's bounding box. The overlay is sized to that box (plus
      * {@link margin}) and fills it, so it frames the element exactly. Overrides
-     * `x`/`y`/`width`/`height`/`relativeTo`/`fullScreen` (placement is always
+     * `x`/`y`/`width`/`height`/`relativeTo`/`fill` (placement is always
      * recording-relative). HTML files, inline `html`, and React elements only;
      * your content should fill its box (for example `width:100%;height:100%`).
      */
@@ -101,13 +91,16 @@ export type OverlayConfig = {
      * HTML files and React elements only.
      */
     capturePadding?: number;
+};
+/** Fields that only apply to a `.mp4` video overlay (a file `path`). */
+type OverlayVideoFields = {
     /**
      * Soundtrack level for `.mp4` overlays as a linear gain. `1` (the default)
      * plays the source at its natural level, `0` mutes it, and values above `1`
      * boost it (e.g. `2` is twice the natural level). Capped at
      * {@link MAX_AUDIO_LEVEL}.
      */
-    audio?: number;
+    volume?: number;
     /**
      * Playback-rate multiplier for `.mp4` overlays. `2` plays the clip (and its
      * audio) twice as fast, `0.5` at half speed; `1` (the default) is the natural
@@ -126,6 +119,59 @@ export type OverlayConfig = {
      */
     time?: number;
 };
+/**
+ * An overlay drawn from a file `path`: `.svg`/`.png` (image), `.mp4` (video),
+ * or `.html` (rendered). Only this variant accepts the {@link OverlayVideoFields}
+ * (`volume`/`speed`/`time`), which apply to `.mp4` files; they are rejected at
+ * recording time for image and HTML files.
+ */
+export type FileOverlayConfig = OverlayCommon & OverlayVideoFields & {
+    /** File path: `.html` (rendered), `.svg`/`.png` (image), or `.mp4` (video). */
+    path: string;
+    element?: never;
+    html?: never;
+};
+/**
+ * An overlay rendered from a React `element` to a transparent PNG (or animated
+ * clip). Use this for overlays built in JSX. Video-only fields
+ * (`volume`/`speed`/`time`) do not apply.
+ */
+export type ElementOverlayConfig = OverlayCommon & {
+    /** A React element, rendered to a transparent PNG. */
+    element: ReactElementLike;
+    path?: never;
+    html?: never;
+    volume?: never;
+    speed?: never;
+    time?: never;
+};
+/**
+ * An overlay rendered from an inline `html` fragment to a transparent PNG (or
+ * animated clip). Use this when you want plain HTML without a React dependency
+ * or a separate `.html` file. The markup must be a single-rooted fragment (for
+ * example `'<div class="badge">New</div>'`), never a full document: it must
+ * contain exactly one top-level element, and `<!doctype>`, `<html>`, `<head>`,
+ * and `<body>` tags are rejected because screenci wraps the markup in its own
+ * document. Video-only fields (`volume`/`speed`/`time`) do not apply.
+ */
+export type HtmlOverlayConfig = OverlayCommon & {
+    /** An inline HTML fragment (single root element), rendered to a PNG. */
+    html: string;
+    path?: never;
+    element?: never;
+    volume?: never;
+    speed?: never;
+    time?: never;
+};
+/**
+ * Display options for an overlay. An overlay draws its content from exactly one
+ * source, which selects the variant: a file {@link FileOverlayConfig.path}, a
+ * React {@link ElementOverlayConfig.element}, or an inline
+ * {@link HtmlOverlayConfig.html} fragment. The `path` variant additionally
+ * accepts the video-only `volume`/`speed`/`time` fields (for `.mp4` files); the
+ * others reject them at compile time.
+ */
+export type OverlayConfig = FileOverlayConfig | ElementOverlayConfig | HtmlOverlayConfig;
 /**
  * Upper bound for an audio level (linear gain). `4` is +12 dB, plenty of
  * headroom for a boost while guarding against accidental extreme distortion.
@@ -236,7 +282,7 @@ export type Overlays<T extends Record<string, OverlayInputOrFactory>> = {
  *   badge: <Badge label="New" />,                // React element
  *   note:  { html: '<div class="note">Tip</div>', x: 1340, y: 110, width: 380 },
  *   logo:  { path: 'logo.png', x: 96, y: 96, width: 240 },
- *   intro: { path: 'intro.mp4', fullScreen: true },
+ *   intro: { path: 'intro.mp4', fill: 'screen' },
  * })
  *
  * video('Product demo', async ({ page }) => {
@@ -254,31 +300,16 @@ export type Overlays<T extends Record<string, OverlayInputOrFactory>> = {
  */
 export declare function createOverlays<const T extends Record<string, OverlayInputOrFactory>>(overlays: T): Overlays<T>;
 /**
- * Creates typed overlay controllers whose files and display options are
- * configured on the ScreenCI Studio page instead of in code. Business tier
- * only.
- *
- * Each key becomes a callable overlay controller with the same timeline
- * behavior as {@link createOverlays} controllers, including `start()`/`end()`.
- * The file (`.svg`, `.png`, or `.mp4`), placement, image duration, and video
- * audio level all come from Studio.
+ * Builds overlay controllers for Studio-managed overlays declared via
+ * `video.studio({ overlays: [...] })`. Their file (`.svg`, `.png`, or `.mp4`),
+ * placement, image duration, and video audio level are configured on the
+ * ScreenCI Studio page instead of in code. Each name becomes a callable overlay
+ * controller with the same timeline behavior as a {@link createOverlays}
+ * controller, including `start()`/`end()`.
  *
- * On the first upload of a studio-mode video, rendering is held until the
- * video is configured in Studio (the CLI prints a direct link). Later uploads
- * reuse the saved Studio configuration automatically.
- *
- * @example
- * ```ts
- * const overlays = createStudioOverlays('intro', 'logo')
- *
- * video('Product demo', async ({ page }) => {
- *   await overlays.intro()
- *   await page.goto('/dashboard')
- *   await overlays.logo()
- * })
- * ```
+ * Internal: the `overlays` fixture exposes these to the test body.
  */
-export declare function createStudioOverlays<const K extends readonly [string, ...string[]]>(...keys: K): Record<K[number], OverlayController>;
+export declare function buildStudioOverlays(names: readonly string[]): Record<string, OverlayController>;
 /**
  * Upper bound for a playback-speed multiplier. `16` is already an extreme rate;
  * the cap guards against accidental runaway values producing degenerate output.

package/dist/src/asset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asset.d.ts","sourceRoot":"","sources":["../../src/asset.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"asset.d.ts","sourceRoot":"","sources":["../../src/asset.ts"],"names":[],"mappings":"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"}

package/dist/src/asset.js

@@ -90,7 +90,7 @@ async function validateAssetPath(assetPath, testFilePath) {
  *   badge: <Badge label="New" />,                // React element
  *   note:  { html: '<div class="note">Tip</div>', x: 1340, y: 110, width: 380 },
  *   logo:  { path: 'logo.png', x: 96, y: 96, width: 240 },
- *   intro: { path: 'intro.mp4', fullScreen: true },
+ *   intro: { path: 'intro.mp4', fill: 'screen' },
  * })
  *
  * video('Product demo', async ({ page }) => {
@@ -157,7 +157,7 @@ function buildOverlayFromConfig(name, config) {
         hasHtml,
         hasPath,
     });
-    const fullScreen = config.fullScreen ?? false;
+    const fullScreen = config.fill === 'screen';
     const animate = config.animate === true;
     if (config.fps !== undefined && !animate) {
         throw new Error(`[screenci] Overlay "${name}" sets "fps" without "animate: true". "fps" only applies to animated overlays.`);
@@ -221,8 +221,8 @@ function buildOverlayFromConfig(name, config) {
     }
     // File-backed image / video overlays.
     if (extension === '.svg' || extension === '.png') {
-        if (config.audio !== undefined) {
-            throw new Error(`[screenci] Overlay "${name}" (${path}) is an image and must not provide audio. Use durationMs instead.`);
+        if (config.volume !== undefined) {
+            throw new Error(`[screenci] Overlay "${name}" (${path}) is an image and must not provide volume. Use durationMs instead.`);
         }
         if (config.durationMs !== undefined) {
             validateDurationMs(name, path, config.durationMs);
@@ -240,11 +240,11 @@ function buildOverlayFromConfig(name, config) {
         if (config.durationMs !== undefined) {
             throw new Error(`[screenci] Overlay "${name}" (${path}) is a video and must not provide durationMs. Its natural media duration is used instead.`);
         }
-        if (config.audio !== undefined &&
-            (!Number.isFinite(config.audio) ||
-                config.audio < 0 ||
-                config.audio > MAX_AUDIO_LEVEL)) {
-            throw new Error(`[screenci] Overlay "${name}" (${path}) must provide a finite audio value between 0 and ${MAX_AUDIO_LEVEL} for .mp4 overlays. 1 is the natural level, 0 is silent, and values above 1 boost it.`);
+        if (config.volume !== undefined &&
+            (!Number.isFinite(config.volume) ||
+                config.volume < 0 ||
+                config.volume > MAX_AUDIO_LEVEL)) {
+            throw new Error(`[screenci] Overlay "${name}" (${path}) must provide a finite volume between 0 and ${MAX_AUDIO_LEVEL} for .mp4 overlays. 1 is the natural level, 0 is silent, and values above 1 boost it.`);
         }
         validateSpeedTime(`Overlay "${name}" (${path})`, config.speed, config.time);
         registeredAssetPaths.add(path);
@@ -253,7 +253,7 @@ function buildOverlayFromConfig(name, config) {
             path,
             ...(placement !== undefined && { placement }),
             fullScreen,
-            ...(config.audio !== undefined && { audio: config.audio }),
+            ...(config.volume !== undefined && { audio: config.volume }),
             ...(config.speed !== undefined && { speed: config.speed }),
             ...(config.time !== undefined && { time: config.time }),
         });
@@ -283,6 +283,71 @@ function validateInlineHtmlFragment(name, html) {
             throw new Error(`[screenci] Overlay "${name}" inline "html" must be a fragment, not a full HTML document. Remove the ${label} tag; screenci wraps the markup in a document for you.`);
         }
     }
+    validateSingleRootElement(name, html);
+}
+/**
+ * HTML void elements: they never have a closing tag, so they do not open a
+ * nesting level when counting top-level nodes.
+ */
+const VOID_ELEMENTS = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+]);
+/**
+ * Ensures an inline `html` fragment has exactly one top-level (root) element and
+ * no loose top-level text, so it wraps cleanly into screenci's overlay document
+ * and sizes predictably. Multiple siblings (for example `<div/><div/>`) or stray
+ * text outside the root are rejected. The markup inside the root may be anything,
+ * including `<script>`/`<style>`, which are left to the overlay renderer.
+ *
+ * This is a lightweight tag scanner, not a full HTML parser: it tracks nesting
+ * depth across opening, closing, void, and self-closing tags (skipping comments
+ * and quoted attribute values) which covers ordinary fragment markup.
+ */
+function validateSingleRootElement(name, html) {
+    const fail = () => {
+        throw new Error(`[screenci] Overlay "${name}" inline "html" must contain a single root element (for example '<div class="badge">New</div>'). Wrap multiple top-level nodes in one container.`);
+    };
+    // Drop comments so they never count as top-level content.
+    const stripped = html.replace(/<!--[\s\S]*?-->/g, '');
+    const tagRe = /<(\/?)([a-zA-Z][a-zA-Z0-9-]*)((?:[^>"']|"[^"]*"|'[^']*')*?)(\/?)>/g;
+    let depth = 0;
+    let rootElements = 0;
+    let lastIndex = 0;
+    let match;
+    while ((match = tagRe.exec(stripped)) !== null) {
+        const before = stripped.slice(lastIndex, match.index);
+        if (depth === 0 && before.trim().length > 0)
+            fail();
+        lastIndex = match.index + match[0].length;
+        const isClosing = match[1] === '/';
+        const tagName = match[2].toLowerCase();
+        const selfClosing = match[4] === '/';
+        if (isClosing) {
+            depth = Math.max(0, depth - 1);
+            continue;
+        }
+        if (depth === 0)
+            rootElements += 1;
+        if (!selfClosing && !VOID_ELEMENTS.has(tagName))
+            depth += 1;
+    }
+    if (stripped.slice(lastIndex).trim().length > 0 && depth === 0)
+        fail();
+    if (rootElements !== 1)
+        fail();
 }
 async function renderElementToMarkup(name, element) {
     let reactDomServer;
@@ -347,41 +412,19 @@ async function readHtmlOverlayFile(path) {
     return readFile(resolved, 'utf-8');
 }
 /**
- * Creates typed overlay controllers whose files and display options are
- * configured on the ScreenCI Studio page instead of in code. Business tier
- * only.
+ * Builds overlay controllers for Studio-managed overlays declared via
+ * `video.studio({ overlays: [...] })`. Their file (`.svg`, `.png`, or `.mp4`),
+ * placement, image duration, and video audio level are configured on the
+ * ScreenCI Studio page instead of in code. Each name becomes a callable overlay
+ * controller with the same timeline behavior as a {@link createOverlays}
+ * controller, including `start()`/`end()`.
  *
- * Each key becomes a callable overlay controller with the same timeline
- * behavior as {@link createOverlays} controllers, including `start()`/`end()`.
- * The file (`.svg`, `.png`, or `.mp4`), placement, image duration, and video
- * audio level all come from Studio.
- *
- * On the first upload of a studio-mode video, rendering is held until the
- * video is configured in Studio (the CLI prints a direct link). Later uploads
- * reuse the saved Studio configuration automatically.
- *
- * @example
- * ```ts
- * const overlays = createStudioOverlays('intro', 'logo')
- *
- * video('Product demo', async ({ page }) => {
- *   await overlays.intro()
- *   await page.goto('/dashboard')
- *   await overlays.logo()
- * })
- * ```
+ * Internal: the `overlays` fixture exposes these to the test body.
  */
-export function createStudioOverlays(...keys) {
-    const seen = new Set();
-    for (const key of keys) {
-        if (seen.has(key)) {
-            throw new Error(`Duplicate overlay key "${key}" passed to createStudioOverlays. Overlay keys must be unique.`);
-        }
-        seen.add(key);
-    }
+export function buildStudioOverlays(names) {
     const result = {};
-    for (const key of keys) {
-        result[key] = createStudioAssetController(key);
+    for (const name of names) {
+        result[name] = createStudioAssetController(name);
     }
     return result;
 }
@@ -682,9 +725,13 @@ function validatePlacement(name, placement) {
  * since the recording size is known there.
  */
 function resolveOverlayPlacement(name, config) {
-    if (config.fullScreen === true) {
+    if (config.fill === 'screen') {
         return { fullScreen: true };
     }
+    if (config.fill === 'recording') {
+        // Fill the recording area (resolved by the renderer, which knows its size).
+        return undefined;
+    }
     if (config.width !== undefined && config.height !== undefined) {
         throw new Error(`[screenci] Overlay "${name}" must set only one of width or height (the other is derived from the aspect ratio).`);
     }
@@ -695,7 +742,7 @@ function resolveOverlayPlacement(name, config) {
             config.relativeTo !== undefined ||
             config.aspectRatio !== undefined;
         if (positioned) {
-            throw new Error(`[screenci] Overlay "${name}" must set "width" or "height" (in CSS px) when positioning it. Omit all placement fields to fill the recording area, or set "fullScreen".`);
+            throw new Error(`[screenci] Overlay "${name}" must set "width" or "height" (in CSS px) when positioning it. Omit all placement fields to fill the recording area, or set "fill".`);
         }
         // Fill the recording area (resolved by the renderer, which knows its size).
         return undefined;
@@ -740,8 +787,8 @@ function resolvePlacementSource(name, config, flags) {
     if (!isRendered) {
         throw new Error(`[screenci] Overlay "${name}" can only use "over" with a React element, inline "html", or an .html file (the overlay is sized to the element's box).`);
     }
-    if (config.fullScreen === true) {
-        throw new Error(`[screenci] Overlay "${name}" cannot set both "over" and "fullScreen".`);
+    if (config.fill !== undefined) {
+        throw new Error(`[screenci] Overlay "${name}" cannot set both "over" and "fill".`);
     }
     if (config.x !== undefined ||
         config.y !== undefined ||