screenci 0.0.31 → 0.0.33

package/README.md

@@ -13,15 +13,15 @@ npm install screenci
 ## Init a new project
 
 ```bash
-npx screenci init my-project
-cd my-project
+npx screenci init "My Project"
+cd screenci
 npm install
 ```
 
 This scaffolds a ready-to-run project:
 
 ```
-my-project/
+screenci/
   screenci.config.ts     ← video settings
   videos/
     example.video.ts     ← your first video script

package/dist/cli.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../cli.ts"],"names":[],"mappings":";AA+BA,OAAO,KAAK,EACV,uBAAuB,EACvB,aAAa,EAEd,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AA4D/C,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAiBD,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC,EACtD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,KAAK,IAAI,GACxC,MAAM,IAAI,CAiBZ;AAuED,QAAA,MAAM,mCAAmC;;;CAG/B,CAAA;AAEV,KAAK,oBAAoB,GAAG,MAAM,OAAO,mCAAmC,CAAA;AAmc5E,wBAAgB,cAAc,CAC5B,KAAK,EAAE,QAAQ,GAAG,uBAAuB,GACxC,QAAQ,GAAG,uBAAuB,CAKpC;AAED,wBAAgB,oCAAoC,CAClD,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,mBAAmB,EAAE,GAC5B,aAAa,CAqEf;AAQD,wBAAgB,+BAA+B,CAC7C,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,MAAM,EAAE,MAAM,GACb,MAAM,CAeR;AAED,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,MAAM,EAAE,MAAM,GACb,IAAI,CAcN;AAgRD,wBAAgB,gBAAgB,IAAI,MAAM,CAKzC;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAK1C;AA2GD,wBAAgB,0BAA0B,CACxC,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,aAAa,GAAG,SAAS,GAClC,MAAM,GAAG,SAAS,CAepB;AA6wBD,wBAAsB,IAAI,kBA6PzB;AAyID,wBAAgB,sBAAsB,CACpC,aAAa,CAAC,EAAE,oBAAoB,GACnC,oBAAoB,CAoBtB"}
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../cli.ts"],"names":[],"mappings":";AA+BA,OAAO,KAAK,EACV,uBAAuB,EACvB,aAAa,EAEd,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAmE/C,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAiBD,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC,EACtD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,KAAK,IAAI,GACxC,MAAM,IAAI,CAiBZ;AAuED,QAAA,MAAM,mCAAmC;;;CAG/B,CAAA;AAEV,KAAK,oBAAoB,GAAG,MAAM,OAAO,mCAAmC,CAAA;AAmc5E,wBAAgB,cAAc,CAC5B,KAAK,EAAE,QAAQ,GAAG,uBAAuB,GACxC,QAAQ,GAAG,uBAAuB,CAKpC;AAED,wBAAgB,oCAAoC,CAClD,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,mBAAmB,EAAE,GAC5B,aAAa,CAqEf;AAQD,wBAAgB,+BAA+B,CAC7C,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,MAAM,EAAE,MAAM,GACb,MAAM,CAeR;AAED,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,MAAM,EAAE,MAAM,GACb,IAAI,CAcN;AAgRD,wBAAgB,gBAAgB,IAAI,MAAM,CAKzC;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAK1C;AA2GD,wBAAgB,0BAA0B,CACxC,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,aAAa,GAAG,SAAS,GAClC,MAAM,GAAG,SAAS,CAepB;AA00BD,wBAAsB,IAAI,kBA2PzB;AAyID,wBAAgB,sBAAsB,CACpC,aAAa,CAAC,EAAE,oBAAoB,GACnC,oBAAoB,CAoBtB"}

package/dist/cli.js

@@ -8,7 +8,7 @@ import { appendFile, mkdir, readdir, readFile, stat, writeFile, } from 'fs/promi
 import { dirname, relative as pathRelative, resolve } from 'path';
 import { fileURLToPath } from 'url';
 import { Command, CommanderError } from 'commander';
-import { input, confirm } from '@inquirer/prompts';
+import { input, confirm, select } from '@inquirer/prompts';
 import ora from 'ora';
 import pc from 'picocolors';
 import { logger } from './src/logger.js';
@@ -971,19 +971,19 @@ async function updateVideoVisibility(videoId, isPublic, configPath) {
     }
     logger.info(`${isPublic ? 'Made public' : 'Made private'}: ${videoId}`);
 }
-function generateConfig(projectName) {
+function generateConfig(projectName, initTarget) {
+    const baseURLBlock = initTarget
+        ? `    baseURL: ${JSON.stringify(initTarget.baseURL)},
+`
+        : '';
     return `import { defineConfig } from 'screenci'
 
 export default defineConfig({
   projectName: ${JSON.stringify(projectName)},
   envFile: '.env',
   videoDir: './videos',
-  forbidOnly: !!process.env.CI,
-  reporter: 'html',
   use: {
-    trace: 'retain-on-failure',
-    sendTraces: true,
-    recordOptions: {
+${baseURLBlock}    recordOptions: {
       aspectRatio: '16:9',
       quality: '1080p',
       fps: 30,
@@ -997,18 +997,13 @@ export default defineConfig({
 })
 `;
 }
-function generatePackageJson(projectName, includePlaywrightCli = false, screenciDependency = 'latest') {
-    const npmName = projectName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-    const devDependencies = {
-        '@types/node': '^25.0.0',
-    };
+function generatePackageJson(packageName, includePlaywrightCli = false, screenciDependency = 'latest') {
+    const devDependencies = {};
     if (includePlaywrightCli) {
         devDependencies['@playwright/cli'] = 'latest';
     }
     return (JSON.stringify({
-        name: npmName,
-        version: '1.0.0',
-        description: '',
+        name: packageName,
         type: 'module',
         scripts: {
             record: 'screenci record',
@@ -1021,6 +1016,25 @@ function generatePackageJson(projectName, includePlaywrightCli = false, screenci
         devDependencies,
     }, null, 2) + '\n');
 }
+async function readCurrentScreenciVersion() {
+    const currentFileDir = dirname(fileURLToPath(import.meta.url));
+    const packageJsonPaths = [
+        resolve(currentFileDir, 'package.json'),
+        resolve(currentFileDir, '../package.json'),
+    ];
+    for (const packageJsonPath of packageJsonPaths) {
+        try {
+            const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf-8'));
+            if (typeof packageJson.version === 'string') {
+                return packageJson.version;
+            }
+        }
+        catch {
+            // Try the next candidate path.
+        }
+    }
+    return 'latest';
+}
 function generateTsconfig() {
     return `${JSON.stringify({
         compilerOptions: {
@@ -1065,6 +1079,7 @@ function generateDockerfile() {
     return `FROM ghcr.io/screenci/record:latest
 
 COPY package.json ./
+RUN npm install
 COPY screenci.config.ts ./
 COPY videos ./videos
 `;
@@ -1108,10 +1123,16 @@ jobs:
           node-version: latest
 
       - name: Install dependencies
-        run: npm install
+        working-directory: screenci
+        run: npm install --include=dev
+
+      - name: Install Chromium
+        working-directory: screenci
+        run: npx playwright install chromium --with-deps
 
       - id: record
         name: Record
+        working-directory: screenci
         env:
           SCREENCI_SECRET: \${{ secrets.SCREENCI_SECRET }}
         run: npm run record
@@ -1168,7 +1189,7 @@ async function performBrowserLogin(appUrl) {
     });
 }
 function generateExampleVideo() {
-    return `import { createNarration, hide, video, voices } from 'screenci'
+    return `import { autoZoom, createNarration, hide, video, voices } from 'screenci'
 
 const narration = createNarration({
   voice: { name: voices.Sophie, style: 'Clear, friendly product walkthrough' },
@@ -1176,45 +1197,53 @@ const narration = createNarration({
     en: {
       cues: {
         intro:
-          'Here is how to find instructions for starting to create your own ScreenCI [pronounce: screen see eye] videos. [short pause] Start on the homepage, then open the documentation from the hero section.',
-        docs: 'The documentation opens with the guide sidebar on the left. In the Guides group, choose AI-Supported Editing.',
+          'This example opens your app at the configured base URL first, then uses ScreenCI [pronounce: screen see eye] to show the next steps for creating your first videos.',
+        docs: 'Use the guide sidebar to open the AI-Supported Editing guide and review the next steps for writing your own videos.',
       },
     },
     es: {
       cues: {
         intro:
-          'Aqui se muestra como encontrar instrucciones para empezar a crear tus propios videos de ScreenCI [pronounce: screen see eye]. [short pause] Comienza en la pagina principal y abre la documentacion desde la seccion principal.',
-        docs: 'La documentacion se abre con la barra lateral de guias a la izquierda. En el grupo Guias, elige Edicion asistida por IA.',
+          'Este ejemplo abre primero tu aplicacion en la URL base configurada y despues usa ScreenCI [pronounce: screen see eye] para mostrar los siguientes pasos para crear tus primeros videos.',
+        docs: 'Usa la barra lateral de guias para abrir la guia de edicion asistida por IA y revisar los siguientes pasos para escribir tus propios videos.',
       },
     },
   },
 })
 
-video('Navigate to AI editing documentation', async ({ page }) => {
+video('See the next steps in ScreenCI docs', async ({ page }) => {
+  await hide(async () => {
+    await page.goto('/')
+    await page.waitForLoadState('domcontentloaded')
+  })
+
+  await narration.intro
+  await page.waitForTimeout(1000)
+
   await hide(async () => {
     await page.goto('https://screenci.com/')
     await page.getByText('ScreenCI', { exact: true }).first().waitFor()
   })
 
-  await narration.intro
-  await page.getByRole('link', { name: 'View Documentation' }).click()
+  await autoZoom(
+    async () => {
+      await page.getByRole('link', { name: 'View Documentation' }).click()
+      await page
+        .getByRole('link', { name: 'AI-Supported Editing', exact: true })
+        .click()
+      await page.waitForTimeout(1000)
+    },
+    { duration: 400, easing: 'ease-in-out', amount: 0.4 }
+  )
 
   await narration.docs
-  await page
-    .getByRole('link', { name: 'AI-Supported Editing', exact: true })
-    .click()
+  await narration.wait()
 })
 `;
 }
 async function promptProjectName() {
     return input({ message: 'Project name:' });
 }
-async function promptInitGitRepository() {
-    return confirm({
-        message: 'Initialize a git repository? (Y/n)',
-        default: true,
-    });
-}
 async function promptInitDependencies() {
     return confirm({
         message: 'Install dependencies now, including Chromium for Playwright? (Y/n)',
@@ -1233,8 +1262,30 @@ async function promptInitGithubActionCi() {
         default: true,
     });
 }
-function getProjectDirName(name) {
-    return name.toLowerCase().replace(/\s+/g, '-');
+async function promptInitTargetMode() {
+    return select({
+        message: 'Should videos run against a local development server or a public URL?',
+        choices: [
+            { name: 'Local development server', value: 'local' },
+            { name: 'Public URL', value: 'public' },
+        ],
+        default: 'local',
+    });
+}
+async function promptInitTargetUrl(mode) {
+    return input({
+        message: mode === 'local' ? 'Local development server URL:' : 'Public app URL:',
+        default: mode === 'local' ? 'http://localhost:3000' : 'https://screenci.com',
+    });
+}
+function normalizeInitUrl(url) {
+    try {
+        return new URL(url.trim()).toString();
+    }
+    catch {
+        logger.error(`Error: Invalid URL "${url}"`);
+        process.exit(1);
+    }
 }
 function getInitProjectRoot() {
     return process.env['SCREENCI_INIT_CWD'] ?? process.cwd();
@@ -1344,7 +1395,7 @@ function checkNodeVersion() {
     }
 }
 async function runInit(projectNameArg, options) {
-    const { verbose, git, install, yes, skill, ci } = options;
+    const { verbose, install, yes, skill, ci } = options;
     checkNodeVersion();
     checkContainerRuntimeForInit();
     const initCwd = getInitProjectRoot();
@@ -1356,17 +1407,25 @@ async function runInit(projectNameArg, options) {
         logger.error('Error: Project name is required');
         process.exit(1);
     }
-    const dirName = getProjectDirName(projectName);
+    const dirName = 'screenci';
     const projectDir = resolve(initCwd, dirName);
+    const githubDir = resolve(initCwd, '.github');
+    const githubWorkflowsDir = resolve(githubDir, 'workflows');
+    const githubActionPath = resolve(githubWorkflowsDir, 'screenci.yaml');
     if (existsSync(projectDir)) {
         logger.error(`Error: Directory "${dirName}" already exists`);
         process.exit(1);
     }
-    const shouldInitializeGitRepository = yes
-        ? true
-        : git
-            ? true
-            : await promptInitGitRepository();
+    const initTarget = yes
+        ? undefined
+        : await (async () => {
+            const mode = await promptInitTargetMode();
+            const baseURL = normalizeInitUrl(await promptInitTargetUrl(mode));
+            return {
+                mode,
+                baseURL,
+            };
+        })();
     const shouldInstallDependencies = yes
         ? true
         : install
@@ -1382,6 +1441,10 @@ async function runInit(projectNameArg, options) {
         : ci
             ? true
             : await promptInitGithubActionCi();
+    if (shouldAddGithubActionCi && existsSync(githubActionPath)) {
+        logger.error('Error: GitHub Actions workflow ".github/workflows/screenci.yaml" already exists');
+        process.exit(1);
+    }
     const skillsArgs = [
         '--yes',
         'skills',
@@ -1396,17 +1459,20 @@ async function runInit(projectNameArg, options) {
     const devScreenciPackageRoot = getDevScreenciPackageRoot();
     const screenciDependency = devScreenciPackageRoot
         ? getLocalScreenciDependency(devScreenciPackageRoot, projectDir)
-        : 'latest';
+        : await readCurrentScreenciVersion();
     if (devScreenciPackageRoot) {
         await buildLocalScreenciPackage(devScreenciPackageRoot);
     }
     await mkdir(resolve(projectDir, 'videos'), { recursive: true });
     if (shouldAddGithubActionCi) {
-        await mkdir(resolve(projectDir, '.github', 'workflows'), {
-            recursive: true,
-        });
+        if (!existsSync(githubDir)) {
+            await mkdir(githubDir);
+        }
+        if (!existsSync(githubWorkflowsDir)) {
+            await mkdir(githubWorkflowsDir);
+        }
     }
-    await writeFile(resolve(projectDir, 'screenci.config.ts'), generateConfig(projectName));
+    await writeFile(resolve(projectDir, 'screenci.config.ts'), generateConfig(projectName, initTarget));
     await writeFile(resolve(projectDir, 'package.json'), generatePackageJson(dirName, shouldAddPlaywrightCli, screenciDependency));
     await writeFile(resolve(projectDir, 'tsconfig.json'), generateTsconfig());
     await writeFile(resolve(projectDir, 'README.md'), generateReadme(projectName));
@@ -1414,7 +1480,7 @@ async function runInit(projectNameArg, options) {
     await writeFile(resolve(projectDir, '.gitignore'), generateGitignore());
     await writeFile(resolve(projectDir, 'videos', 'example.video.ts'), generateExampleVideo());
     if (shouldAddGithubActionCi) {
-        await writeFile(resolve(projectDir, '.github', 'workflows', 'record.yml'), generateGithubAction());
+        await writeFile(githubActionPath, generateGithubAction());
     }
     await writeFile(resolve(projectDir, '.env'), '');
     logger.info(`Initialized screenci project "${projectName}" in ${projectDir}/`);
@@ -1427,27 +1493,10 @@ async function runInit(projectNameArg, options) {
     logger.info('  .gitignore');
     logger.info('  videos/example.video.ts');
     if (shouldAddGithubActionCi) {
-        logger.info('  .github/workflows/record.yml');
+        logger.info('  .github/workflows/screenci.yaml');
     }
     logger.info('  .env  (empty placeholder)');
     logger.info('');
-    if (shouldInitializeGitRepository) {
-        if (verbose) {
-            logger.info("Running 'git init'...");
-            await spawnInherited('git', ['init'], projectDir, 'screenci init');
-        }
-        else {
-            const spinner = ora('Initializing git repository...').start();
-            try {
-                await spawnSilent('git', ['init'], projectDir);
-                spinner.succeed('Git repository initialized');
-            }
-            catch (err) {
-                spinner.fail('git init failed');
-                throw err;
-            }
-        }
-    }
     if (shouldInstallDependencies) {
         if (verbose) {
             logger.info(`Running '${skillsCommand}'...`);
@@ -1613,7 +1662,7 @@ export async function main() {
         await run('test', parsed.otherArgs, parsed.configPath);
         if (process.env.SCREENCI_IN_CONTAINER === 'true')
             return;
-        logger.info('Tests passed. Run `npx screenci record` to render the videos.');
+        logger.info(`Tests passed. Run ${pc.cyan('npx screenci record')} to render the videos.`);
     });
     program
         .command('info')
@@ -1649,7 +1698,6 @@ export async function main() {
     program
         .command('init [name]')
         .description('Initialize a new screenci project')
-        .option('--git', 'initialize a git repository without prompting')
         .option('--install', 'install skills, dependencies, and Chromium without prompting')
         .option('--ci', 'add GitHub Action CI without prompting')
         .option('--skill', 'enable playwright-cli without prompting')
@@ -1662,7 +1710,6 @@ export async function main() {
         else {
             await runInit(name, {
                 verbose: options['verbose'] ?? false,
-                git: options['git'] ?? false,
                 install: options['install'] ?? false,
                 yes: options['yes'] ?? false,
                 skill: options['skill'] ?? false,
@@ -1897,13 +1944,21 @@ async function runWithContainer(additionalArgs, customConfigPath, verbose = fals
         process.exit(1);
     }
     logger.info('Starting ScreenCI recording container...');
+    const containerBaseHost = containerRuntime === 'docker'
+        ? 'host.docker.internal'
+        : 'host.containers.internal';
     await spawnContainerRecording(containerRuntime, [
         'run',
         '--rm',
+        ...(containerRuntime === 'docker'
+            ? ['--add-host', 'host.docker.internal:host-gateway']
+            : []),
         ...(process.env.CI !== undefined ? ['-e', `CI=${process.env.CI}`] : []),
         '-e',
         'SCREENCI_IN_CONTAINER=true',
         '-e',
+        `SCREENCI_CONTAINER_BASE_HOST=${containerBaseHost}`,
+        '-e',
         'SCREENCI_RECORD=true',
         '-e',
         `SCREENCI_SECRET=${secret}`,