demo-composer 0.1.1

package/dist/configuration.js

@@ -0,0 +1,104 @@
+import { z } from 'zod';
+import { mkdtemp } from 'node:fs/promises';
+import { readFileSync, existsSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+const demoJsonSchema = z.object({
+    width: z.number().int().positive().optional(),
+    height: z.number().int().positive().optional(),
+    outputDir: z.string().optional(),
+    featuresGlob: z.string().optional(),
+    musicFile: z.string().optional(),
+    musicVolume: z.number().min(0).max(1).optional(),
+    musicFadeSeconds: z.number().min(0).optional(),
+    stepDelayMs: z.number().min(0).optional(),
+    stepSettleMs: z.number().min(0).optional(),
+    scenarioEndPauseMs: z.number().min(0).optional(),
+    ttsModel: z.string().optional(),
+    ttsVoice: z.string().optional(),
+    ttsStylePreamble: z.string().optional(),
+    introLabel: z.string().optional(),
+    deviceScaleFactor: z.number().int().min(1).max(3).optional(),
+    fps: z.number().int().min(1).max(120).optional(),
+    crossfadeDurationSeconds: z.number().min(0).optional(),
+}).strict();
+const CONVENTION_DEFAULTS = {
+    width: 1920,
+    height: 1080,
+    outputDir: resolve(process.cwd(), 'demos'),
+    featuresGlob: 'features/**/*.feature',
+    musicFile: '',
+    musicVolume: 0.15,
+    musicFadeSeconds: 2,
+    stepDelayMs: 500,
+    stepSettleMs: 500,
+    scenarioEndPauseMs: 2000,
+    ttsModel: 'gemini-2.5-pro-tts',
+    ttsVoice: 'Kore',
+    ttsStylePreamble: 'Read the following in a calm, steady, professional tone at a moderate pace. ' +
+        'Speak as a friendly and composed presenter narrating a product demo video. ' +
+        'Keep the energy level consistent and even throughout — never rushed, never overly excited:',
+    introLabel: 'Demo',
+    deviceScaleFactor: 1,
+    fps: 60,
+    crossfadeDurationSeconds: 0.5,
+};
+function loadDemoJson(cwd) {
+    const configPath = join(cwd, 'demo.json');
+    if (!existsSync(configPath))
+        return {};
+    const raw = readFileSync(configPath, 'utf-8');
+    return demoJsonSchema.parse(JSON.parse(raw));
+}
+function resolveConventionMusicFile(cwd) {
+    const candidate = join(cwd, 'demo-music.mp3');
+    return existsSync(candidate) ? candidate : '';
+}
+export function loadConfiguration(cwd) {
+    const root = cwd ?? process.cwd();
+    const json = loadDemoJson(root);
+    const conventionMusic = resolveConventionMusicFile(root);
+    return Object.freeze({
+        appBaseUrl: process.env.APP_BASE_URL ?? '',
+        width: json.width ?? CONVENTION_DEFAULTS.width,
+        height: json.height ?? CONVENTION_DEFAULTS.height,
+        outputDir: json.outputDir ? resolve(root, json.outputDir) : CONVENTION_DEFAULTS.outputDir,
+        featuresGlob: json.featuresGlob ?? CONVENTION_DEFAULTS.featuresGlob,
+        musicFile: json.musicFile ? resolve(root, json.musicFile) : conventionMusic,
+        musicVolume: json.musicVolume ?? CONVENTION_DEFAULTS.musicVolume,
+        musicFadeSeconds: json.musicFadeSeconds ?? CONVENTION_DEFAULTS.musicFadeSeconds,
+        stepDelayMs: json.stepDelayMs ?? CONVENTION_DEFAULTS.stepDelayMs,
+        stepSettleMs: json.stepSettleMs ?? CONVENTION_DEFAULTS.stepSettleMs,
+        scenarioEndPauseMs: json.scenarioEndPauseMs ?? CONVENTION_DEFAULTS.scenarioEndPauseMs,
+        ttsModel: json.ttsModel ?? CONVENTION_DEFAULTS.ttsModel,
+        ttsVoice: json.ttsVoice ?? CONVENTION_DEFAULTS.ttsVoice,
+        ttsStylePreamble: json.ttsStylePreamble ?? CONVENTION_DEFAULTS.ttsStylePreamble,
+        introLabel: json.introLabel ?? CONVENTION_DEFAULTS.introLabel,
+        deviceScaleFactor: json.deviceScaleFactor ?? CONVENTION_DEFAULTS.deviceScaleFactor,
+        fps: json.fps ?? CONVENTION_DEFAULTS.fps,
+        crossfadeDurationSeconds: json.crossfadeDurationSeconds ?? CONVENTION_DEFAULTS.crossfadeDurationSeconds,
+        googleCloudProject: process.env.GOOGLE_CLOUD_PROJECT ?? '',
+        googleCloudRegion: process.env.GOOGLE_CLOUD_REGION ?? 'us-central1',
+        narrationTimingFile: process.env.DEMO_NARRATION_TIMING_FILE ?? '',
+        manifestDir: process.env.DEMO_MANIFEST_DIR ?? join(tmpdir(), 'demo-composer-manifest'),
+        browserHeadless: process.env.BROWSER_HEADLESS !== 'false',
+    });
+}
+let _config;
+export function initConfiguration(cwd) {
+    _config = loadConfiguration(cwd);
+    return _config;
+}
+export function getConfiguration() {
+    if (!_config) {
+        _config = loadConfiguration();
+    }
+    return _config;
+}
+export function resetConfiguration() {
+    _config = undefined;
+}
+export async function createTempDir(prefix) {
+    return mkdtemp(join(tmpdir(), `demo-composer-${prefix}-`));
+}
+//# sourceMappingURL=configuration.js.map

package/dist/configuration.js.map

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

package/dist/cucumber-config.d.ts

@@ -0,0 +1,4 @@
+import type { IConfiguration } from '@cucumber/cucumber';
+export declare function createCucumberConfig(): Partial<IConfiguration>;
+declare const _default: Partial<IConfiguration>;
+export default _default;

package/dist/cucumber-config.js

@@ -0,0 +1,17 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+function discoverImports() {
+    const ownDir = dirname(fileURLToPath(import.meta.url));
+    const hooksPath = resolve(ownDir, 'hooks.js');
+    return [hooksPath, 'features/**/*.steps.ts'];
+}
+export function createCucumberConfig() {
+    return {
+        failFast: true,
+        format: ['summary'],
+        paths: ['features/**/*.feature'],
+        import: discoverImports(),
+    };
+}
+export default createCucumberConfig();
+//# sourceMappingURL=cucumber-config.js.map

package/dist/cucumber-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cucumber-config.js","sourceRoot":"","sources":["../src/cucumber-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,SAAS,eAAe;IACpB,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,EAAE,wBAAwB,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,oBAAoB;IAChC,OAAO;QACH,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,CAAC,SAAS,CAAC;QACnB,KAAK,EAAE,CAAC,uBAAuB,CAAC;QAChC,MAAM,EAAE,eAAe,EAAE;KAC5B,CAAC;AACN,CAAC;AAED,eAAe,oBAAoB,EAAE,CAAC"}

package/dist/effects.d.ts

@@ -0,0 +1,6 @@
+import type { BrowserContext, Locator, Page } from 'playwright';
+export declare function injectDemoEffects(context: BrowserContext, cssZoom?: number): Promise<void>;
+export declare function highlightElement(page: Page, locator: Locator): Promise<void>;
+export declare function unhighlightElement(page: Page, locator: Locator): Promise<void>;
+export declare function zoomToElement(page: Page, locator: Locator, scale?: number): Promise<void>;
+export declare function resetZoom(page: Page): Promise<void>;

package/dist/effects.js

@@ -0,0 +1,248 @@
+import { getConfiguration } from './configuration.js';
+const CURSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28">
+  <path d="M2 1 L2 22 L7.5 16.5 L12.5 26 L15.5 24.5 L10.5 15 L18 15 Z"
+        fill="white" stroke="black" stroke-width="1.2" stroke-linejoin="round"/>
+</svg>`;
+export async function injectDemoEffects(context, cssZoom = 1) {
+    await context.addInitScript(({ cursorSvgMarkup, zoom }) => {
+        const RIPPLE_COLOR = 'rgba(0, 102, 255, 0.5)';
+        const HIGHLIGHT_OUTLINE = '2px solid rgba(0, 102, 255, 0.5)';
+        const INTERACTIVE_SELECTOR = 'button, a, input, select, textarea, [role="button"], [role="link"], [role="menuitem"], [tabindex]';
+        let cursor;
+        let style;
+        let highlightedEl = null;
+        let prevOutline = '';
+        let prevOutlineOffset = '';
+        // Cursor lerp state for smooth frame-by-frame interpolation
+        let targetX = 0;
+        let targetY = 0;
+        let currentX = 0;
+        let currentY = 0;
+        let lerpInitialized = false;
+        const LERP_FACTOR = 0.18;
+        function getBodyTransform() {
+            const t = document.body?.style.transform;
+            if (!t)
+                return { tx: 0, ty: 0, s: 1 };
+            const m = t.match(/translate\(([-\d.]+)px,\s*([-\d.]+)px\)\s*scale\(([-\d.]+)\)/);
+            return m
+                ? { tx: parseFloat(m[1]), ty: parseFloat(m[2]), s: parseFloat(m[3]) }
+                : { tx: 0, ty: 0, s: 1 };
+        }
+        function ensureElements() {
+            document.documentElement.style.zoom = String(zoom);
+            if (cursor && document.body.contains(cursor))
+                return;
+            if (!style || !document.head.contains(style)) {
+                style = document.createElement('style');
+                style.textContent = `
+                    @keyframes demo-ripple {
+                        0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
+                        100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
+                    }
+                    .demo-cursor {
+                        position: fixed;
+                        width: 24px;
+                        height: 28px;
+                        pointer-events: none;
+                        z-index: 2147483647;
+                        transform: scale(1);
+                        transition: transform 80ms ease;
+                        will-change: left, top, transform;
+                        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+                    }
+                    .demo-cursor--pressed {
+                        transform: scale(0.85);
+                    }
+                    .demo-ripple {
+                        position: fixed;
+                        width: 80px;
+                        height: 80px;
+                        border-radius: 50%;
+                        background: ${RIPPLE_COLOR};
+                        border: 2px solid ${RIPPLE_COLOR};
+                        pointer-events: none;
+                        z-index: 2147483646;
+                        animation: demo-ripple 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+            const cx = window.innerWidth / 2 / zoom;
+            const cy = window.innerHeight / 2 / zoom;
+            cursor = document.createElement('div');
+            cursor.className = 'demo-cursor';
+            cursor.innerHTML = cursorSvgMarkup;
+            cursor.style.left = `${cx}px`;
+            cursor.style.top = `${cy}px`;
+            document.body.appendChild(cursor);
+            if (!lerpInitialized) {
+                currentX = cx;
+                currentY = cy;
+                targetX = cx;
+                targetY = cy;
+                lerpInitialized = true;
+            }
+        }
+        if (document.body) {
+            ensureElements();
+        }
+        document.addEventListener('DOMContentLoaded', () => ensureElements());
+        // rAF loop: interpolate cursor position each frame for smooth movement
+        (function animateCursor() {
+            if (document.body && (!cursor || !document.body.contains(cursor))) {
+                ensureElements();
+            }
+            if (cursor && lerpInitialized) {
+                const dx = targetX - currentX;
+                const dy = targetY - currentY;
+                if (Math.abs(dx) > 0.1 || Math.abs(dy) > 0.1) {
+                    currentX += dx * LERP_FACTOR;
+                    currentY += dy * LERP_FACTOR;
+                }
+                else {
+                    currentX = targetX;
+                    currentY = targetY;
+                }
+                cursor.style.left = `${currentX}px`;
+                cursor.style.top = `${currentY}px`;
+            }
+            requestAnimationFrame(animateCursor);
+        })();
+        document.addEventListener('mousemove', (e) => {
+            ensureElements();
+            const bt = getBodyTransform();
+            targetX = (e.clientX / zoom - bt.tx) / bt.s;
+            targetY = (e.clientY / zoom - bt.ty) / bt.s;
+        }, true);
+        document.addEventListener('mousedown', (e) => {
+            ensureElements();
+            cursor.classList.add('demo-cursor--pressed');
+            const ripple = document.createElement('div');
+            ripple.className = 'demo-ripple';
+            const bt = getBodyTransform();
+            ripple.style.left = `${(e.clientX / zoom - bt.tx) / bt.s}px`;
+            ripple.style.top = `${(e.clientY / zoom - bt.ty) / bt.s}px`;
+            document.body.appendChild(ripple);
+            ripple.addEventListener('animationend', () => ripple.remove());
+        }, true);
+        document.addEventListener('mouseup', () => {
+            if (cursor)
+                cursor.classList.remove('demo-cursor--pressed');
+        }, true);
+        document.addEventListener('mouseover', (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            const interactive = target.closest(INTERACTIVE_SELECTOR);
+            if (interactive && interactive !== highlightedEl) {
+                clearHighlight();
+                highlightedEl = interactive;
+                const el = interactive;
+                prevOutline = el.style.outline;
+                prevOutlineOffset = el.style.outlineOffset;
+                el.style.outline = HIGHLIGHT_OUTLINE;
+                el.style.outlineOffset = '2px';
+            }
+        }, true);
+        document.addEventListener('mouseout', (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            if (highlightedEl && (target === highlightedEl || highlightedEl.contains(target))) {
+                const related = e.relatedTarget;
+                if (!related || !highlightedEl.contains(related)) {
+                    clearHighlight();
+                }
+            }
+        }, true);
+        function clearHighlight() {
+            if (highlightedEl) {
+                const el = highlightedEl;
+                el.style.outline = prevOutline;
+                el.style.outlineOffset = prevOutlineOffset;
+                highlightedEl = null;
+            }
+        }
+    }, { cursorSvgMarkup: CURSOR_SVG, zoom: cssZoom });
+}
+export async function highlightElement(page, locator) {
+    const element = await locator.elementHandle();
+    if (!element)
+        return;
+    await page.evaluate((el) => {
+        if (!document.getElementById('demo-highlight-style')) {
+            const s = document.createElement('style');
+            s.id = 'demo-highlight-style';
+            s.textContent = `
+                @keyframes demo-highlight-pulse {
+                    0%, 100% { box-shadow: 0 0 8px 4px rgba(0, 102, 255, 0.6); }
+                    50%      { box-shadow: 0 0 16px 8px rgba(0, 102, 255, 0.3); }
+                }
+            `;
+            document.head.appendChild(s);
+        }
+        el.style.outline = '3px solid rgba(0, 102, 255, 0.8)';
+        el.style.outlineOffset = '3px';
+        el.style.animation = 'demo-highlight-pulse 800ms ease-in-out infinite';
+        el.dataset.demoHighlighted = '1';
+    }, element);
+}
+export async function unhighlightElement(page, locator) {
+    const element = await locator.elementHandle();
+    if (!element)
+        return;
+    await page.evaluate((el) => {
+        el.style.outline = '';
+        el.style.outlineOffset = '';
+        el.style.animation = '';
+        delete el.dataset.demoHighlighted;
+    }, element);
+}
+export async function zoomToElement(page, locator, scale = 2) {
+    const box = await locator.boundingBox();
+    if (!box)
+        return;
+    const viewport = page.viewportSize();
+    if (!viewport)
+        return;
+    const dpr = getConfiguration().deviceScaleFactor;
+    // Read the current body transform so we can reverse it mathematically
+    const cur = await page.evaluate(() => {
+        const t = document.body.style.transform;
+        if (!t)
+            return { tx: 0, ty: 0, s: 1 };
+        const m = t.match(/translate\(([-\d.]+)px,\s*([-\d.]+)px\)\s*scale\(([-\d.]+)\)/);
+        return m
+            ? { tx: parseFloat(m[1]), ty: parseFloat(m[2]), s: parseFloat(m[3]) }
+            : { tx: 0, ty: 0, s: 1 };
+    });
+    // boundingBox is in viewport pixels; convert to CSS coords then undo current transform
+    const centerX = ((box.x + box.width / 2) / dpr - cur.tx) / cur.s;
+    const centerY = ((box.y + box.height / 2) / dpr - cur.ty) / cur.s;
+    const tx = viewport.width / dpr / 2 - centerX * scale;
+    const ty = viewport.height / dpr / 2 - centerY * scale;
+    await page.evaluate(({ tx, ty, s }) => {
+        const body = document.body;
+        body.style.transition = 'transform 1200ms ease';
+        body.style.transformOrigin = '0 0';
+        body.style.transform = `translate(${tx}px, ${ty}px) scale(${s})`;
+    }, { tx, ty, s: scale });
+    await page.waitForTimeout(1200);
+}
+export async function resetZoom(page) {
+    await page.evaluate(() => {
+        const body = document.body;
+        body.style.transition = 'transform 1200ms ease';
+        body.style.transformOrigin = '0 0';
+        body.style.transform = 'translate(0px, 0px) scale(1)';
+    });
+    await page.waitForTimeout(1200);
+    await page.evaluate(() => {
+        const body = document.body;
+        body.style.transition = '';
+        body.style.transform = '';
+        body.style.transformOrigin = '';
+    });
+}
+//# sourceMappingURL=effects.js.map

package/dist/effects.js.map

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

package/dist/hooks.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks.js

@@ -0,0 +1,57 @@
+import { Before, After, BeforeStep, AfterStep, setWorldConstructor, AfterAll, setDefaultTimeout } from '@cucumber/cucumber';
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { DemoWorld } from './world.js';
+import { getConfiguration } from './configuration.js';
+DemoWorld.recordingEnabled = true;
+setDefaultTimeout(-1);
+setWorldConstructor(DemoWorld);
+function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+let narrationTimings;
+async function loadNarrationTimings() {
+    if (narrationTimings !== undefined)
+        return narrationTimings;
+    const config = getConfiguration();
+    const timingFile = config.narrationTimingFile;
+    if (!timingFile)
+        return undefined;
+    const content = await readFile(timingFile, 'utf-8');
+    narrationTimings = JSON.parse(content);
+    return narrationTimings;
+}
+Before(async function (scenario) {
+    await this.init();
+    this.scenarioName = scenario.pickle.name;
+    const featureUri = scenario.gherkinDocument.uri;
+    this.featureFilePath = featureUri ? resolve(featureUri) : '';
+    this.featureName = scenario.gherkinDocument.feature?.name ?? '';
+});
+BeforeStep(async function ({ pickleStep }) {
+    const config = getConfiguration();
+    const timings = await loadNarrationTimings();
+    const stepIndex = this.stepTimings.length;
+    const stepDurations = timings?.[this.featureFilePath]?.[this.scenarioName];
+    const narrationDurationMs = stepDurations?.[stepIndex] != null
+        ? stepDurations[stepIndex] * 1000
+        : 0;
+    const delay = narrationDurationMs + config.stepDelayMs;
+    await sleep(delay);
+    this.recordStepStart(pickleStep.text, pickleStep.type ?? '');
+});
+AfterStep(async function () {
+    const config = getConfiguration();
+    this.recordStepEnd();
+    await sleep(config.stepSettleMs);
+});
+After(async function () {
+    const config = getConfiguration();
+    await sleep(config.scenarioEndPauseMs);
+    await this.cleanup();
+});
+AfterAll(async function () {
+    await DemoWorld.writeManifest();
+    await DemoWorld.closeBrowser();
+});
+//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { DemoWorld } from './world.js';
+export type { DemoConfiguration, DemoJson } from './configuration.js';
+export { run, type RunOptions } from './runner.js';
+export { createCucumberConfig } from './cucumber-config.js';
+export type { TemplateOverrides } from './templates.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { DemoWorld } from './world.js';
+export { run } from './runner.js';
+export { createCucumberConfig } from './cucumber-config.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,OAAO,EAAE,GAAG,EAAmB,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/narration.d.ts

@@ -0,0 +1,17 @@
+export interface StepNarration {
+    gherkin: string;
+    narration: string;
+}
+export interface ScenarioNarration {
+    name: string;
+    summary: string;
+    steps: StepNarration[];
+}
+export interface FeatureNarration {
+    feature: string;
+    description: string;
+    introNarration: string;
+    conclusionNarration: string;
+    scenarios: ScenarioNarration[];
+}
+export declare function generateNarration(featureFilePath: string): Promise<FeatureNarration>;

package/dist/narration.js

@@ -0,0 +1,109 @@
+import { GoogleGenAI, Type } from '@google/genai';
+import { readFile } from 'node:fs/promises';
+import { getConfiguration } from './configuration.js';
+const responseJsonSchema = {
+    type: Type.OBJECT,
+    properties: {
+        feature: { type: Type.STRING },
+        description: { type: Type.STRING },
+        introNarration: { type: Type.STRING },
+        conclusionNarration: { type: Type.STRING },
+        scenarios: {
+            type: Type.ARRAY,
+            items: {
+                type: Type.OBJECT,
+                properties: {
+                    name: { type: Type.STRING },
+                    summary: { type: Type.STRING },
+                    steps: {
+                        type: Type.ARRAY,
+                        items: {
+                            type: Type.OBJECT,
+                            properties: {
+                                gherkin: { type: Type.STRING },
+                                narration: { type: Type.STRING },
+                            },
+                            required: ['gherkin', 'narration'],
+                        },
+                    },
+                },
+                required: ['name', 'summary', 'steps'],
+            },
+        },
+    },
+    required: ['feature', 'description', 'introNarration', 'conclusionNarration', 'scenarios'],
+};
+function buildNarrationPrompt(introLabel) {
+    return `You are narrating a product demo video for a web application.
+You will be given a Gherkin feature file. Your job is to produce narration text that will be
+read aloud by a text-to-speech engine as voiceover for a demo video showing the app in action.
+The narration is spoken BEFORE each action happens on screen, so the viewer knows what to watch for.
+
+IMPORTANT — Tone and style consistency:
+- Maintain a calm, steady, professional, and friendly tone throughout ALL narration text.
+- Every sentence should feel like it comes from the same speaker in the same recording session.
+- Keep all narration sentences between 10 and 20 words.
+- Do NOT use exclamation marks.
+- Do NOT vary the energy level between steps — avoid alternating between enthusiastic and subdued phrasing.
+- Use a measured, even cadence. Avoid dramatic pauses or build-ups in the text.
+
+Produce the following:
+
+1. An "introNarration" — a welcoming 2-3 sentence overview of the feature, suitable to be read over
+   an intro title card at the very beginning of the demo video. Briefly describe what the feature is
+   about and preview the scenarios that will be demonstrated. Speak as a presenter opening a demo.
+
+2. A "conclusionNarration" — a brief 1-2 sentence wrap-up, suitable to be read over a closing card
+   at the end of the demo video. Summarize what was demonstrated and close on a positive note.
+
+3. For each scenario, produce:
+   a. A "summary" — a friendly 1-2 sentence introduction of what the scenario demonstrates, suitable to be read over a title card.
+   b. For each step, a "narration" — a natural, conversational sentence that anticipates what is about to happen.
+      - For actions: use anticipatory phrasing like "Now let's...", "Next, we'll...", "Watch as...".
+      - For observations/assertions: use phrasing like "We should now see...", "Notice that...".
+      - Do NOT use Gherkin keywords (Given/When/Then/And).
+      - Speak as if you are a presenter walking someone through the app.
+      - Be concise but descriptive.
+      - Use present tense.
+
+Here is an example of the desired narration style for a scenario:
+
+Scenario summary: "In this scenario, we will see how a new user creates an account and sets up their profile."
+Step narrations:
+- "Let's start by navigating to the registration page."
+- "Now we'll fill in the required fields with our account details."
+- "Next, we'll click the submit button to create the account."
+- "We should now see a confirmation message indicating the account was created."
+- "Notice that the user is automatically redirected to the profile setup page."
+
+Notice how each sentence above uses a similar length, calm phrasing, and consistent energy.
+Follow this same pattern for all narration you produce.
+
+Return the result as structured JSON matching the provided schema.`;
+}
+export async function generateNarration(featureFilePath) {
+    const config = getConfiguration();
+    const featureContent = await readFile(featureFilePath, 'utf-8');
+    const ai = new GoogleGenAI({
+        vertexai: true,
+        project: config.googleCloudProject,
+        location: config.googleCloudRegion,
+    });
+    const response = await ai.models.generateContent({
+        model: 'gemini-2.5-flash-lite',
+        contents: [
+            buildNarrationPrompt(config.introLabel),
+            `Here is the feature file:\n\n${featureContent}`,
+        ],
+        config: {
+            responseMimeType: 'application/json',
+            responseSchema: responseJsonSchema,
+        },
+    });
+    const text = response.text;
+    if (!text) {
+        throw new Error('Gemini returned no text for narration generation');
+    }
+    return JSON.parse(text);
+}
+//# sourceMappingURL=narration.js.map

package/dist/narration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"narration.js","sourceRoot":"","sources":["../src/narration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAqBtD,MAAM,kBAAkB,GAAG;IACvB,IAAI,EAAE,IAAI,CAAC,MAAM;IACjB,UAAU,EAAE;QACR,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;QAC9B,WAAW,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;QAClC,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;QACrC,mBAAmB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;QAC1C,SAAS,EAAE;YACP,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,KAAK,EAAE;gBACH,IAAI,EAAE,IAAI,CAAC,MAAM;gBACjB,UAAU,EAAE;oBACR,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;oBAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;oBAC9B,KAAK,EAAE;wBACH,IAAI,EAAE,IAAI,CAAC,KAAK;wBAChB,KAAK,EAAE;4BACH,IAAI,EAAE,IAAI,CAAC,MAAM;4BACjB,UAAU,EAAE;gCACR,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;gCAC9B,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;6BACnC;4BACD,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;yBACrC;qBACJ;iBACJ;gBACD,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC;aACzC;SACJ;KACJ;IACD,QAAQ,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,WAAW,CAAC;CAC7F,CAAC;AAEF,SAAS,oBAAoB,CAAC,UAAkB;IAC5C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mEA6CwD,CAAC;AACpE,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,iBAAiB,CAAC,eAAuB;IAC3D,MAAM,MAAM,GAAG,gBAAgB,EAAE,CAAC;IAClC,MAAM,cAAc,GAAG,MAAM,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;IAEhE,MAAM,EAAE,GAAG,IAAI,WAAW,CAAC;QACvB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,QAAQ,EAAE,MAAM,CAAC,iBAAiB;KACrC,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC;QAC7C,KAAK,EAAE,uBAAuB;QAC9B,QAAQ,EAAE;YACN,oBAAoB,CAAC,MAAM,CAAC,UAAU,CAAC;YACvC,gCAAgC,cAAc,EAAE;SACnD;QACD,MAAM,EAAE;YACJ,gBAAgB,EAAE,kBAAkB;YACpC,cAAc,EAAE,kBAAkB;SACrC;KACJ,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;IAC3B,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACxE,CAAC;IACD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAqB,CAAC;AAChD,CAAC"}

package/dist/overlay.d.ts

@@ -0,0 +1,2 @@
+import { overlayHtml as defaultOverlayHtml } from './templates.js';
+export declare function renderOverlayImages(featureName: string, scenarios: string[], width: number, height: number, renderFn: (html: string, outputPath: string, width: number, height: number) => Promise<void>, overlayHtmlFn?: typeof defaultOverlayHtml): Promise<string[]>;