@lioneltay/component-shot 0.1.0

package/dist/mcp.js

@@ -0,0 +1,247 @@
+#!/usr/bin/env node
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { CallToolRequestSchema, ListToolsRequestSchema, } from '@modelcontextprotocol/sdk/types.js';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { captureComponentShot, captureComponentSource, } from './index.js';
+const projectRootEnv = 'COMPONENT_SHOT_PROJECT_ROOT';
+const scenarioDirEnv = 'COMPONENT_SHOT_SCENARIO_DIR';
+const isObject = (value) => Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+const getString = (args, name) => {
+    const value = args[name];
+    return typeof value === 'string' && value.length > 0 ? value : undefined;
+};
+const getBoolean = (args, name) => {
+    const value = args[name];
+    return typeof value === 'boolean' ? value : undefined;
+};
+const getNumber = (args, name) => {
+    const value = args[name];
+    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+};
+const getViewport = (args) => {
+    const value = args.viewport;
+    if (!isObject(value)) {
+        return undefined;
+    }
+    const width = getNumber(value, 'width');
+    const height = getNumber(value, 'height');
+    if (!width || !height || width <= 0 || height <= 0) {
+        throw new Error('viewport must include positive width and height numbers');
+    }
+    return { height, width };
+};
+const requireString = (args, name) => {
+    const value = getString(args, name);
+    if (!value) {
+        throw new Error(`${name} is required`);
+    }
+    return value;
+};
+const resolveCwd = (args) => path.resolve(getString(args, 'cwd') ?? process.env[projectRootEnv] ?? process.cwd());
+const toCaptureOptions = ({ args, cwd, scenario, }) => ({
+    browserChannel: getString(args, 'browserChannel'),
+    cwd,
+    debug: getBoolean(args, 'debug'),
+    fullPage: getBoolean(args, 'fullPage'),
+    output: getString(args, 'output'),
+    save: getBoolean(args, 'save') ?? true,
+    saveName: getString(args, 'saveName'),
+    scenario,
+    screenshotsDir: getString(args, 'screenshotsDir'),
+    selector: getString(args, 'selector'),
+    setup: getString(args, 'setup'),
+    timeoutMs: getNumber(args, 'timeoutMs'),
+    viewport: getViewport(args),
+    waitFor: getString(args, 'waitFor'),
+});
+const readPngContent = async (outputPath) => ({
+    data: await fs.readFile(outputPath, 'base64'),
+    mimeType: 'image/png',
+    type: 'image',
+});
+const createResult = async ({ result, scenarioPath, }) => ({
+    content: [
+        {
+            text: JSON.stringify({
+                historyPath: result.historyPath,
+                latestPath: result.latestPath,
+                outputPath: result.outputPath,
+                scenarioPath,
+                url: result.url,
+            }, null, 2),
+            type: 'text',
+        },
+        await readPngContent(result.outputPath),
+    ],
+});
+const toErrorResult = (error) => ({
+    content: [
+        {
+            text: error instanceof Error ? error.stack ?? error.message : String(error),
+            type: 'text',
+        },
+    ],
+    isError: true,
+});
+const captureScenario = async (args) => {
+    const cwd = resolveCwd(args);
+    const scenario = requireString(args, 'scenario');
+    const scenarioPath = path.resolve(cwd, scenario);
+    const result = await captureComponentShot(toCaptureOptions({ args, cwd, scenario }));
+    return createResult({ result, scenarioPath });
+};
+const captureSource = async (args) => {
+    const cwd = resolveCwd(args);
+    const source = requireString(args, 'source');
+    const result = await captureComponentSource({
+        ...toCaptureOptions({
+            args,
+            cwd,
+            scenario: getString(args, 'scenario') ?? '',
+        }),
+        name: getString(args, 'name'),
+        overwrite: getBoolean(args, 'overwrite'),
+        scenario: getString(args, 'scenario'),
+        scenarioDir: getString(args, 'scenarioDir') ?? process.env[scenarioDirEnv],
+        source,
+    });
+    return createResult({ result, scenarioPath: result.scenarioPath });
+};
+const commonCaptureProperties = {
+    browserChannel: {
+        description: 'Optional Playwright browser channel, for example chrome.',
+        type: 'string',
+    },
+    cwd: {
+        description: `Project root. Defaults to ${projectRootEnv} or the MCP process cwd.`,
+        type: 'string',
+    },
+    debug: {
+        description: 'Print bundler and browser diagnostics.',
+        type: 'boolean',
+    },
+    fullPage: {
+        description: 'Capture the full page instead of the component root selector.',
+        type: 'boolean',
+    },
+    output: {
+        description: 'Optional PNG output path.',
+        type: 'string',
+    },
+    save: {
+        description: 'Save latest.png and a timestamped history PNG. Defaults to true for MCP.',
+        type: 'boolean',
+    },
+    saveName: {
+        description: 'Name to use under the screenshots directory.',
+        type: 'string',
+    },
+    screenshotsDir: {
+        description: 'Screenshot audit directory. Defaults to the nearest component-shot/screenshots.',
+        type: 'string',
+    },
+    selector: {
+        description: 'CSS selector to capture.',
+        type: 'string',
+    },
+    setup: {
+        description: 'Optional setup module. Defaults to setup.* beside the scenario component-shot folder.',
+        type: 'string',
+    },
+    timeoutMs: {
+        description: 'Capture timeout in milliseconds.',
+        type: 'number',
+    },
+    viewport: {
+        additionalProperties: false,
+        description: 'Browser viewport.',
+        properties: {
+            height: { type: 'number' },
+            width: { type: 'number' },
+        },
+        required: ['width', 'height'],
+        type: 'object',
+    },
+    waitFor: {
+        description: 'Optional selector to wait for before capture.',
+        type: 'string',
+    },
+};
+const tools = [
+    {
+        description: 'Capture a PNG screenshot for an existing component-shot scenario file.',
+        inputSchema: {
+            additionalProperties: false,
+            properties: {
+                scenario: {
+                    description: 'Scenario path, usually packages/client/component-shot/scenarios/name.tsx.',
+                    type: 'string',
+                },
+                ...commonCaptureProperties,
+            },
+            required: ['scenario'],
+            type: 'object',
+        },
+        name: 'capture_component_shot',
+    },
+    {
+        description: 'Write scenario source to the repo, capture it, and return the PNG image.',
+        inputSchema: {
+            additionalProperties: false,
+            properties: {
+                name: {
+                    description: 'Scenario filename stem when scenario is omitted.',
+                    type: 'string',
+                },
+                overwrite: {
+                    description: 'Allow replacing an existing scenario file.',
+                    type: 'boolean',
+                },
+                scenario: {
+                    description: 'Optional scenario path to write.',
+                    type: 'string',
+                },
+                scenarioDir: {
+                    description: `Directory for generated scenario files. Defaults to ${scenarioDirEnv} or component-shot/scenarios.`,
+                    type: 'string',
+                },
+                source: {
+                    description: 'Complete TSX scenario module source.',
+                    type: 'string',
+                },
+                ...commonCaptureProperties,
+            },
+            required: ['source'],
+            type: 'object',
+        },
+        name: 'capture_component_source',
+    },
+];
+const server = new Server({
+    name: 'component-shot',
+    version: '0.1.0',
+}, {
+    capabilities: {
+        tools: {},
+    },
+});
+server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools }));
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    try {
+        const args = isObject(request.params.arguments) ? request.params.arguments : {};
+        switch (request.params.name) {
+            case 'capture_component_shot':
+                return await captureScenario(args);
+            case 'capture_component_source':
+                return await captureSource(args);
+            default:
+                throw new Error(`Unknown tool "${request.params.name}"`);
+        }
+    }
+    catch (error) {
+        return toErrorResult(error);
+    }
+});
+await server.connect(new StdioServerTransport());

package/dist/rspack-runner.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=rspack-runner.d.ts.map

package/dist/rspack-runner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rspack-runner.d.ts","sourceRoot":"","sources":["../src/rspack-runner.ts"],"names":[],"mappings":""}

package/dist/rspack-runner.js

@@ -0,0 +1,295 @@
+import { rspack } from '@rspack/core';
+import fs from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const htmlTemplate = () => `<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Component Shot</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+			rel="stylesheet"
+		/>
+		<style>
+			html,
+			body {
+				margin: 0;
+				min-height: 100%;
+				background: #fff;
+				font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+			}
+
+			body {
+				box-sizing: border-box;
+				padding: 24px;
+			}
+
+			* {
+				box-sizing: border-box;
+			}
+
+			pre[data-component-shot-error='true'] {
+				margin: 0;
+				max-width: 960px;
+				overflow: auto;
+				padding: 16px;
+				white-space: pre-wrap;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>`;
+const readJson = async (filePath) => {
+    try {
+        return JSON.parse(await fs.readFile(filePath, 'utf8'));
+    }
+    catch (error) {
+        const code = typeof error === 'object' && error && 'code' in error ? error.code : undefined;
+        if (code === 'ENOENT') {
+            return undefined;
+        }
+        throw error;
+    }
+};
+const fileExists = async (filePath) => {
+    try {
+        await fs.access(filePath);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+const findWorkspaceRoot = async (cwd) => {
+    let current = path.resolve(cwd);
+    while (true) {
+        if (await fileExists(path.join(current, 'pnpm-workspace.yaml'))) {
+            return current;
+        }
+        const parent = path.dirname(current);
+        if (parent === current) {
+            return cwd;
+        }
+        current = parent;
+    }
+};
+const splitPathList = (value) => (value ?? '')
+    .split(/[,:]/)
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+const findNodeModulesDirs = async (root, packageDirs) => {
+    const nodeModulesDirs = [];
+    const rootNodeModules = path.join(root, 'node_modules');
+    if (await fileExists(rootNodeModules)) {
+        nodeModulesDirs.push(rootNodeModules);
+    }
+    for (const packageDir of packageDirs) {
+        const packagesRoot = path.resolve(root, packageDir);
+        let entries;
+        try {
+            entries = await fs.readdir(packagesRoot);
+        }
+        catch (error) {
+            const code = typeof error === 'object' && error && 'code' in error ? error.code : undefined;
+            if (code === 'ENOENT') {
+                continue;
+            }
+            throw error;
+        }
+        await Promise.all(entries.map(async (entry) => {
+            const nodeModulesDir = path.join(packagesRoot, entry, 'node_modules');
+            if (await fileExists(nodeModulesDir)) {
+                nodeModulesDirs.push(nodeModulesDir);
+            }
+        }));
+    }
+    return nodeModulesDirs;
+};
+const discoverDependencyModules = async (options, packageDirs) => {
+    const dependencyRoots = [
+        ...splitPathList(process.env.COMPONENT_SHOT_DEPENDENCY_ROOT),
+        ...splitPathList(process.env.COMPONENT_SHOT_DEPENDENCY_ROOTS),
+        ...(options.dependencyRoots ?? []),
+    ];
+    const nodeModulesDirs = await Promise.all(dependencyRoots.map((root) => findNodeModulesDirs(path.resolve(root), packageDirs)));
+    return [...new Set(nodeModulesDirs.flat())];
+};
+const discoverWorkspaceAliases = async (cwd, packageDirs) => {
+    const aliases = {};
+    const workspaceRoot = await findWorkspaceRoot(cwd);
+    const roots = [...new Set([cwd, workspaceRoot])];
+    for (const root of roots) {
+        for (const packageDir of packageDirs) {
+            const packagesRoot = path.resolve(root, packageDir);
+            let entries;
+            try {
+                entries = await fs.readdir(packagesRoot);
+            }
+            catch (error) {
+                const code = typeof error === 'object' && error && 'code' in error ? error.code : undefined;
+                if (code === 'ENOENT') {
+                    continue;
+                }
+                throw error;
+            }
+            await Promise.all(entries.map(async (entry) => {
+                const packageRoot = path.join(packagesRoot, entry);
+                const packageJson = await readJson(path.join(packageRoot, 'package.json'));
+                if (packageJson?.name) {
+                    aliases[packageJson.name] = packageRoot;
+                }
+            }));
+        }
+    }
+    return aliases;
+};
+const resolveFromProject = (cwd, request) => path.dirname(require.resolve(`${request}/package.json`, { paths: [cwd, dirname] }));
+const createConfig = async ({ context, options, }) => {
+    const setupPath = options.setup
+        ? path.resolve(context.cwd, options.setup)
+        : path.join(dirname, 'runtime/default-setup.js');
+    const packageDirs = options.workspacePackageDirs ?? ['packages'];
+    const [workspaceAliases, dependencyModules] = await Promise.all([
+        discoverWorkspaceAliases(context.cwd, packageDirs),
+        discoverDependencyModules(options, packageDirs),
+    ]);
+    const aliases = Object.fromEntries(Object.entries({
+        ...workspaceAliases,
+        ...options.aliases,
+    }).map(([name, target]) => [name, path.resolve(context.cwd, target)]));
+    const tsConfigPath = path.resolve(context.cwd, 'tsconfig.json');
+    const tsConfig = (await fileExists(tsConfigPath)) ? tsConfigPath : undefined;
+    return {
+        devtool: 'cheap-module-source-map',
+        entry: options.entry ? path.resolve(context.cwd, options.entry) : path.join(dirname, 'runtime/entry.js'),
+        externals: ['tinymce'],
+        mode: 'development',
+        module: {
+            rules: [
+                {
+                    resolve: {
+                        fullySpecified: false,
+                    },
+                    test: /\.mjs$/,
+                    type: 'javascript/auto',
+                },
+                {
+                    test: /\.(j|t)sx?$/,
+                    type: 'javascript/auto',
+                    use: {
+                        loader: 'builtin:swc-loader',
+                        options: {
+                            env: {
+                                targets: '> 1%, not dead',
+                            },
+                            jsc: {
+                                parser: {
+                                    syntax: 'typescript',
+                                    tsx: true,
+                                },
+                                transform: {
+                                    react: {
+                                        runtime: 'automatic',
+                                    },
+                                },
+                            },
+                            sourceMap: true,
+                        },
+                    },
+                },
+                {
+                    test: /\.css$/,
+                    type: 'css/auto',
+                },
+                {
+                    test: /\.(png|jpe?g|webp|svg)$/,
+                    type: 'asset/resource',
+                },
+                {
+                    test: /\.(gql|graphql)$/,
+                    type: 'asset/source',
+                },
+            ],
+        },
+        optimization: {
+            minimize: false,
+            splitChunks: false,
+        },
+        output: {
+            filename: 'component-shot.js',
+            path: context.publicDir,
+            publicPath: options.publicPath ?? '/',
+        },
+        plugins: [
+            new rspack.HtmlRspackPlugin({
+                filename: 'index.html',
+                templateContent: htmlTemplate(),
+            }),
+            new rspack.ProvidePlugin({
+                Buffer: ['buffer', 'Buffer'],
+            }),
+        ],
+        resolve: {
+            alias: {
+                ...aliases,
+                __component_shot_scenario__: context.scenarioPath,
+                __component_shot_setup__: setupPath,
+                react: resolveFromProject(context.cwd, 'react'),
+                'react-dom': resolveFromProject(context.cwd, 'react-dom'),
+                'react-dom/client': require.resolve('react-dom/client', { paths: [context.cwd, dirname] }),
+                'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime', {
+                    paths: [context.cwd, dirname],
+                }),
+                'react/jsx-runtime': require.resolve('react/jsx-runtime', { paths: [context.cwd, dirname] }),
+            },
+            extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.gql', '.graphql'],
+            fallback: {
+                buffer: require.resolve('buffer/', { paths: [context.cwd, dirname] }),
+            },
+            modules: ['node_modules', ...dependencyModules],
+            tsConfig,
+        },
+        target: 'web',
+    };
+};
+const runRspack = async (context, options) => {
+    const config = await createConfig({ context, options });
+    await new Promise((resolve, reject) => {
+        rspack(config, (error, stats) => {
+            if (error) {
+                reject(error);
+                return;
+            }
+            if (stats?.hasErrors()) {
+                reject(new Error(stats.toString({ colors: true, errorDetails: true })));
+                return;
+            }
+            if (context.debug && stats) {
+                process.stderr.write(`${stats.toString({ colors: true })}\n`);
+            }
+            resolve();
+        });
+    });
+};
+const main = async () => {
+    const contextJson = process.env.COMPONENT_SHOT_RSPACK_CONTEXT;
+    if (!contextJson) {
+        throw new Error('COMPONENT_SHOT_RSPACK_CONTEXT is required');
+    }
+    const context = JSON.parse(contextJson);
+    const options = JSON.parse(process.env.COMPONENT_SHOT_RSPACK_OPTIONS ?? '{}');
+    await runRspack(context, options);
+};
+main().catch((error) => {
+    process.stderr.write(`${error instanceof Error ? error.stack ?? error.message : String(error)}\n`);
+    process.exitCode = 1;
+});

package/dist/rspack.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentShotBuild } from './build-types.js';
+export type ComponentShotRspackOptions = {
+    aliases?: Record<string, string>;
+    dependencyRoots?: string[];
+    entry?: string;
+    publicPath?: string;
+    setup?: string;
+    workspacePackageDirs?: string[];
+};
+export declare const createRspackBuild: (options?: ComponentShotRspackOptions) => ComponentShotBuild;
+//# sourceMappingURL=rspack.d.ts.map

package/dist/rspack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rspack.d.ts","sourceRoot":"","sources":["../src/rspack.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAE1D,MAAM,MAAM,0BAA0B,GAAG;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAA;CAC/B,CAAA;AAID,eAAO,MAAM,iBAAiB,GAC5B,UAAS,0BAA+B,KAAG,kBAQ1C,CAAA"}

package/dist/rspack.js

@@ -0,0 +1,11 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+export const createRspackBuild = (options = {}) => (context) => ({
+    args: [path.join(dirname, 'rspack-runner.js')],
+    command: process.execPath,
+    env: {
+        COMPONENT_SHOT_RSPACK_CONTEXT: JSON.stringify(context),
+        COMPONENT_SHOT_RSPACK_OPTIONS: JSON.stringify(options),
+    },
+});

package/dist/runtime/default-setup.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentShotAppSetup } from './types.js';
+declare const defaultSetup: ComponentShotAppSetup;
+export default defaultSetup;
+//# sourceMappingURL=default-setup.d.ts.map

package/dist/runtime/default-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-setup.d.ts","sourceRoot":"","sources":["../../src/runtime/default-setup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAEvD,QAAA,MAAM,YAAY,EAAE,qBAA0B,CAAA;AAE9C,eAAe,YAAY,CAAA"}

package/dist/runtime/default-setup.js

@@ -0,0 +1,2 @@
+const defaultSetup = {};
+export default defaultSetup;

package/dist/runtime/entry.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    interface Window {
+        __COMPONENT_SHOT_ERROR__?: string;
+        __COMPONENT_SHOT_READY__?: boolean;
+    }
+}
+export {};
+//# sourceMappingURL=entry.d.ts.map

package/dist/runtime/entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.d.ts","sourceRoot":"","sources":["../../src/runtime/entry.tsx"],"names":[],"mappings":"AAUA,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,wBAAwB,CAAC,EAAE,MAAM,CAAA;QACjC,wBAAwB,CAAC,EAAE,OAAO,CAAA;KAClC;CACD"}

package/dist/runtime/entry.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import scenarioExport from '__component_shot_scenario__';
+import setupExport from '__component_shot_setup__';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+const defaultRootStyle = {
+    display: 'inline-block',
+    maxWidth: '100%',
+};
+const nextFrame = () => new Promise((resolve) => {
+    let isSettled = false;
+    const finish = () => {
+        if (!isSettled) {
+            isSettled = true;
+            resolve();
+        }
+    };
+    window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(finish);
+    });
+    window.setTimeout(finish, 100);
+});
+const isScenarioObject = (scenario) => typeof scenario === 'object' &&
+    scenario !== null &&
+    !React.isValidElement(scenario) &&
+    'render' in scenario &&
+    typeof scenario.render === 'function';
+const renderScenario = async (scenario) => {
+    if (isScenarioObject(scenario)) {
+        await scenario.setup?.();
+        return {
+            node: await scenario.render(),
+            objectScenario: scenario,
+        };
+    }
+    if (typeof scenario === 'function') {
+        return {
+            node: await scenario(),
+        };
+    }
+    return {
+        node: scenario,
+    };
+};
+const mount = async () => {
+    window.__COMPONENT_SHOT_READY__ = false;
+    window.__COMPONENT_SHOT_ERROR__ = undefined;
+    const rootElement = document.getElementById('root');
+    if (!rootElement) {
+        throw new Error('Missing #root element for component-shot');
+    }
+    const appSetup = setupExport ?? {};
+    const { node, objectScenario } = await renderScenario(scenarioExport);
+    const Wrapper = objectScenario?.wrapper;
+    const Provider = appSetup.Provider;
+    const providerOptions = objectScenario?.providerOptions;
+    const content = Wrapper ? _jsx(Wrapper, { children: node }) : node;
+    const wrappedContent = providerOptions === false || !Provider ? content : _jsx(Provider, { options: providerOptions, children: content });
+    createRoot(rootElement).render(_jsx("div", { "data-component-shot-root": true, style: objectScenario?.rootStyle ?? appSetup.rootStyle ?? defaultRootStyle, children: wrappedContent }));
+    await nextFrame();
+    await objectScenario?.beforeScreenshot?.();
+    await nextFrame();
+    window.__COMPONENT_SHOT_READY__ = true;
+};
+mount().catch((error) => {
+    const message = error instanceof Error ? (error.stack ?? error.message) : String(error);
+    window.__COMPONENT_SHOT_ERROR__ = message;
+    window.__COMPONENT_SHOT_READY__ = true;
+    const rootElement = document.getElementById('root');
+    if (rootElement) {
+        const errorElement = document.createElement('pre');
+        errorElement.dataset.componentShotError = 'true';
+        errorElement.textContent = message;
+        rootElement.replaceChildren(errorElement);
+    }
+});