Demo — Browser Runtime

import {
	createDemoRunner,
	goto,
	narrate,
	signIn,
	spotlight,
	writeDemoManifest
} from '@absolutejs/demo';
import { createDemoAuthDriver } from '@absolutejs/demo/auth';
import { createPlaywrightDemoSession } from '@absolutejs/demo/playwright';

const session = await createPlaywrightDemoSession({
	headless: false,
	recordVideoDir: '.demo-video',
	screenshotDir: '.demo-shots'
});

const runner = createDemoRunner({
	auth: createDemoAuthDriver(),
	browser: session.browserDriver,
	annotations: session.annotations,
	voiceover: {
		speak: async ({ text }) => {
			console.log('[voiceover]', text);
		}
	}
});

const report = await runner.run({
	profiles: [
		{
			id: 'ae',
			kind: 'absolute',
			baseUrl: 'http://localhost:3000',
			email: { env: 'DEMO_EMAIL' },
			password: { env: 'DEMO_PASSWORD' },
			afterLoginUrl: 'http://localhost:3000/pipeline'
		}
	],
	id: 'crm-demo',
	title: 'CRM demo',
	steps: [
		signIn('ae'),
		narrate('Here is the live pipeline view.'),
		goto('http://localhost:3000/pipeline'),
		spotlight({
			selector: "[data-demo='pipeline-total']",
			label: 'Revenue at risk',
			durationMs: 1800
		})
	]
});

await writeDemoManifest(report, '.demo-artifacts/crm-demo.manifest.json');
console.log(report.status, report.artifacts);
await session.close();

import { createPlaywrightDemoSession } from '@absolutejs/demo/playwright';

const session = await createPlaywrightDemoSession({
	browser: 'chromium', // 'chromium' | 'firefox' | 'webkit'
	channel: 'chrome', // branded Chrome instead of the bundled build
	headless: false,
	recordVideoDir: '.demo-video', // Playwright video for this context
	screenshotDir: '.demo-shots',
	fullPageScreenshots: true,
	contextOptions: { viewport: { width: 1600, height: 900 } },
	// A storage-state profile applied when the context is created.
	account: {
		id: 'returning-user',
		kind: 'storage-state',
		storageState: '.demo-auth/ae.storage-state.json'
	}
});

// The session exposes everything the runner needs:
session.browserDriver; // DemoBrowserDriver — goto/click/fill/type/press
session.annotations; // overlay annotation driver for this page
session.page; // the raw Playwright page for anything bespoke
await session.recordingArtifact(); // video as a recording artifact
await session.close(); // stop recording, close context + browser

// Lower-level pieces are exported too:
import {
	createPlaywrightAnnotationDriver,
	createPlaywrightDemoBrowser,
	launchPlaywright
} from '@absolutejs/demo/playwright';

const browser = await launchPlaywright({ headless: true });
const driver = createPlaywrightDemoBrowser({ page, screenshotDir: 'x' });
const annotations = createPlaywrightAnnotationDriver(page);

import { createDemoRunner } from '@absolutejs/demo';

const runner = createDemoRunner({
	annotations: session.annotations, // overlay callout driver
	auth: createDemoAuthDriver(), // resolves signIn('<id>') steps
	browser: session.browserDriver, // goto/click/fill/press/waitFor
	desktop: createMacDesktopDriver(), // native-app steps
	recorder: screenRecorder, // started before step 1, stopped after
	voiceover: elevenLabs, // narrate(...) target

	// 'throw' (default) or 'continue' — a failed overlay is logged as
	// an artifact and the run keeps going.
	annotationFailure: 'continue',
	// Stream run/step/artifact events as they happen.
	onEvent: (event) => sendToDashboard(event),
	// Block each narrate() until the rendered audio duration elapses,
	// so on-screen action stays in sync with live playback.
	voiceoverPlayback: 'wait-for-duration',
	idFactory: () => 'run-' + Date.now().toString(36)
});

const report = await runner.run(script);
// report — the DemoRunReport:
// {
//   id, scriptId, startedAt, endedAt, durationMs,
//   status: 'completed' | 'failed',
//   error?: { message, stack? },
//   artifacts: DemoArtifact[], // recordings, voiceovers, screenshots
//   events: DemoRunnerEvent[]  // run.started, step.started,
// }                            // step.completed, artifact, run.failed

import {
	click,
	demoScript,
	fill,
	goto,
	markRecording,
	narrate,
	press,
	screenshot,
	signIn,
	spotlight,
	wait,
	waitFor
} from '@absolutejs/demo';

const script = demoScript({
	id: 'crm-demo',
	title: 'CRM demo',
	metadata: { audience: 'enterprise', owner: 'sales-eng' },
	profiles: [
		/* credential profiles — see Authentication */
	],
	steps: [
		signIn('ae'), // run a credential profile by id
		goto('http://localhost:3000/pipeline'),
		waitFor("[data-demo='pipeline-total']"), // selector or ms
		click('#quarter-toggle'),
		fill('#search', 'Acme'),
		press('#search', 'Enter'),
		narrate({
			text: 'Here is the live pipeline view.',
			emotion: 'confident'
		}),
		spotlight({
			selector: "[data-demo='pipeline-total']",
			label: 'Revenue at risk',
			durationMs: 1800
		}),
		markRecording('chapter: pipeline'), // recorder chapter marker
		screenshot('pipeline'),
		wait(1200),
		// Escape hatch — custom logic with the full DemoContext.
		{
			name: 'custom',
			run: async (context) => {
				await context.narrate('And one more thing.');
				await context.annotate({ type: 'clear' });
				context.addArtifact({ id: 'note', kind: 'log' });
			}
		}
	]
});

const report = await runner.run(script);

import { createDemoRunner, signIn } from '@absolutejs/demo';
import { createDemoAuthDriver } from '@absolutejs/demo/auth';

const runner = createDemoRunner({
	// Default driver — handles all three profile kinds. routes.login
	// overrides the '/auth/login' default for absolute profiles.
	auth: createDemoAuthDriver({ routes: { login: '/api/auth/login' } }),
	browser: session.browserDriver
});

await runner.run({
	id: 'signin-demo',
	profiles: [
		// absolute — a site you own that uses @absolutejs/auth. Posts
		// email + password to the auth login route.
		{
			id: 'ae',
			kind: 'absolute',
			baseUrl: 'http://localhost:3000',
			email: { env: 'DEMO_EMAIL' },
			password: { env: 'DEMO_PASSWORD' },
			afterLoginUrl: 'http://localhost:3000/pipeline'
		},
		// storage-state — reuse a saved Playwright session; applied
		// when the browser context is created.
		{
			id: 'returning-user',
			kind: 'storage-state',
			storageState: '.demo-auth/ae.storage-state.json'
		}
	],
	// Trigger a profile from a step by id:
	steps: [signIn('ae')]
});

// A third-party site you do NOT control — drives the real login UI.
{
	id: 'saucedemo',
	kind: 'form',
	loginUrl: 'https://www.saucedemo.com/',
	fields: [
		{ selector: '#user-name', value: { env: 'SAUCE_USERNAME' } },
		{
			selector: '#password',
			value: { env: 'SAUCE_PASSWORD' },
			typeDelayMs: 60 // type key-by-key, like a human
		}
	],
	submitSelector: '#login-button',
	// Confirm the login worked — an element that appears and/or a URL.
	success: { selector: '.inventory_list' }
}

// Multi-step flows (username → Next → password) use a steps array:
{
	id: 'workspace',
	kind: 'form',
	steps: [
		{ action: 'goto', url: 'https://accounts.example.com/signin' },
		{
			action: 'fill',
			selector: '#identifier',
			value: { env: 'DEMO_EMAIL' }
		},
		{ action: 'click', selector: '#identifier-next' },
		{ action: 'waitFor', target: '#password' },
		{
			action: 'fill',
			selector: '#password',
			value: { env: 'DEMO_PASSWORD' },
			pressEnter: true // submit with Enter instead of a click
		}
	],
	success: { url: '/dashboard' }
}

// Bespoke auth screens: implement DemoAuthDriver yourself.
const customAuth: DemoAuthDriver = {
	signIn: async (profile, context) => {
		await context.browser?.goto('https://app.example.com/sso');
		await context.browser?.click('#continue-with-okta');
		await context.browser?.waitFor('.dashboard');
	}
};

import {
	circle,
	clearAnnotations,
	highlight,
	spotlight
} from '@absolutejs/demo';

// Spotlight — dims the rest of the page and glows around the target.
spotlight({
	selector: "[data-demo='pipeline-total']",
	label: 'Revenue at risk',
	durationMs: 1800 // auto-clears; omit to keep it up
});

// Circle — a rounded ring around an element, no page dimming.
circle({ selector: '#submit', color: '#ff3b30' });

// Highlight — border-only emphasis; the page stays fully visible.
// Targets are a selector OR an explicit x/y/width/height rect.
highlight({ x: 120, y: 240, width: 320, height: 48, label: 'Drop zone' });

// Remove whatever is currently drawn.
clearAnnotations();

import { createDemoRunner, focusApp, openApp, wait } from '@absolutejs/demo';
import {
	createCommandDesktopDriver,
	createMacDesktopDriver
} from '@absolutejs/demo/desktop';

// macOS: open/focus apps and send keystrokes via osascript.
const runner = createDemoRunner({ desktop: createMacDesktopDriver() });

await runner.run({
	id: 'discord-demo',
	steps: [openApp('Discord'), wait(1000), focusApp('Discord')]
});

// Linux / Windows: map each capability to a command — xdotool, wmctrl,
// PowerShell, or a UIA bridge. Unconfigured capabilities throw with a
// message naming the missing capability.
const linuxDesktop = createCommandDesktopDriver({
	open: (target) => ['xdg-open', String(target)],
	focus: (target) => ['wmctrl', '-a', String(target)],
	hotkey: (keys) => ['xdotool', 'key', keys.join('+')],
	typeText: (text) => ['xdotool', 'type', text],
	click: (x, y) => [
		'xdotool', 'mousemove', String(x), String(y), 'click', '1'
	]
});