#!/usr/bin/env node

/**

* Captures screenshots of example models for welcome modal tiles.

* Captures both dark and light themes using ?theme= URL parameter.

* Run with: npm run screenshots

*/

import puppeteer from 'puppeteer-core';

import { readFileSync, existsSync, mkdirSync } from 'fs';

import { dirname, join, resolve } from 'path';

import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath(import.meta.url));

const STATIC_DIR = join(__dirname, '..', 'static', 'examples');

const MANIFEST_PATH = join(STATIC_DIR, 'manifest.json');

// Where to write the PNGs. Override (SCREENSHOT_OUT_DIR) so a fastsim build can

// capture straight into its build output instead of the default static dir.

const SCREENSHOTS_DIR = process.env.SCREENSHOT_OUT_DIR

? resolve(process.env.SCREENSHOT_OUT_DIR)

: join(STATIC_DIR, 'screenshots');

// Origin (+ base path) to screenshot. Defaults to the public blue pathview.

// The fastsim build points this at a local `vite preview` of the red /app

// build so the tiles match its styling (SCREENSHOT_BASE_URL=http://localhost:PORT/app).

const BASE_URL = process.env.SCREENSHOT_BASE_URL || 'https://view.pathsim.org';

const VIEWPORT = { width: 1000, height: 600 };

const DEVICE_SCALE_FACTOR = 1;

const SETTLE_DELAY = 5000;

const THEMES = ['dark', 'light'];

async function captureScreenshot(browser, filename, theme) {

const basename = filename.replace('.json', '');

const url = `${BASE_URL}?model=examples/${filename}&theme=${theme}&fancyloading=false`;

console.log(` ${basename} ${theme}...`);

const page = await browser.newPage();

await page.setViewport({ width: VIEWPORT.width, height: VIEWPORT.height, deviceScaleFactor: DEVICE_SCALE_FACTOR });

try {

await page.goto(url, { waitUntil: 'networkidle2', timeout: 30000 });

await new Promise((resolve) => setTimeout(resolve, SETTLE_DELAY));

const outputPath = join(SCREENSHOTS_DIR, `${basename}-${theme}.png`);

await page.screenshot({ path: outputPath, type: 'png' });

console.log(` Saved: ${basename}-${theme}.png`);

} catch (error) {

console.error(` Error: ${error.message}`);

} finally {

await page.close();

}

}

async function main() {

if (!existsSync(MANIFEST_PATH)) {

console.error('manifest.json not found at', MANIFEST_PATH);

process.exit(1);

}

const manifest = JSON.parse(readFileSync(MANIFEST_PATH, 'utf-8'));

const files = manifest.files || [];

if (files.length === 0) {

console.log('No example files in manifest.');

return;

}

if (!existsSync(SCREENSHOTS_DIR)) {

mkdirSync(SCREENSHOTS_DIR, { recursive: true });

}

console.log('Launching browser...');

const browser = await puppeteer.launch({

headless: true,

channel: 'chrome',

args: ['--no-sandbox', '--disable-setuid-sandbox']

});

try {

for (const filename of files) {

for (const theme of THEMES) {

await captureScreenshot(browser, filename, theme);

}

}

} finally {

await browser.close();

}

console.log('\nDone!');

}

main().catch((error) => {

console.error('Fatal error:', error);

process.exit(1);

});