Demo — Browser Runtime

import { mkdir } from "node:fs/promises";
import { createDemoRunner, goto, narrate, spotlight, writeDemoManifest } from "@absolutejs/demo";
import { createPlaywrightDemoSession } from "@absolutejs/demo/playwright";
import { createElevenLabsVoiceover } from "@absolutejs/demo/voiceover";
import { composeDemoWithFFmpeg } from "@absolutejs/demo/composition";

const apiKey = process.env.ELEVENLABS_API_KEY;
if (!apiKey) throw new Error("Set ELEVENLABS_API_KEY in your environment or .env file.");
const outputDir = ".demo-artifacts/quick-start";
await mkdir(outputDir, { recursive: true });

// Render before recording so network latency does not leave dead air.
const text = "Here is the live pipeline view. Revenue at risk is forty-two thousand dollars.";
const voiceover = createElevenLabsVoiceover({ apiKey, outputDir });
const narration = await voiceover.speak({ text });

// A local fixture makes this runnable without an existing app or login.
const server = Bun.serve({
  hostname: "127.0.0.1",
  port: 0,
  fetch: () => new Response(
    '<!doctype html><html lang="en"><title>CRM demo</title><body style="font:24px sans-serif;padding:80px"><h1>Pipeline</h1><p id="total">Revenue at risk: $42,000</p></body></html>',
    { headers: { "content-type": "text/html" } }
  )
});

try {
  const session = await createPlaywrightDemoSession({
    headless: process.env.DEMO_HEADLESS === "1",
    recordVideoDir: outputDir,
    contextOptions: { viewport: { width: 1280, height: 720 } }
  });
  let closed = false;
  try {
    const runner = createDemoRunner({
      browser: session.browserDriver,
      annotations: session.annotations,
      voiceover: { speak: async () => narration },
      voiceoverPlayback: "wait-for-duration"
    });
    const report = await runner.run({
      id: "crm-demo",
      steps: [
        goto(server.url.href),
        spotlight({ selector: "#total", label: "Revenue at risk" }),
        narrate(text)
      ]
    });
    // Closing finalizes the video; the session does not attach it for you.
    const recording = await session.close();
    closed = true;
    if (recording) report.artifacts.push(recording);
    if (report.status === "completed") {
      report.artifacts.push(await composeDemoWithFFmpeg(report, {
        outputPath: outputDir + "/crm-demo.mp4",
        voiceoverTiming: "timeline"
      }));
    }
    await writeDemoManifest(report, outputDir + "/crm-demo.manifest.json");
    if (report.status !== "completed") throw new Error(report.error?.message ?? "Demo failed");
    console.log("Created", outputDir + "/crm-demo.mp4");
  } finally {
    if (!closed) await session.close();
  }
} finally {
  await server.stop(true);
}

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
const recording = await session.close(); // finalize video and close browser
if (recording) report.artifacts.push(recording); // attach before composing

// 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'
	]
});