blok0 0.1.0 → 0.1.2

package/dist/api/index.d.ts

@@ -0,0 +1,46 @@
+export interface BlockMetadata {
+    id: number;
+    name: string;
+    slug: string;
+    codeFiles: Array<{
+        sourceCode?: {
+            name: string;
+            url: string;
+        };
+    }>;
+    _status: 'published' | 'draft';
+}
+export interface CodeFile {
+    name: string;
+    content: string;
+}
+declare class APIClient {
+    private client;
+    private baseURL;
+    constructor(baseURL?: string);
+    /**
+     * Fetch block metadata from URL
+     */
+    fetchBlockMetadata(url: string): Promise<BlockMetadata>;
+    /**
+     * Download source code file
+     */
+    downloadSourceCode(url: string): Promise<string>;
+    /**
+     * Validate block metadata
+     */
+    validateBlockMetadata(metadata: BlockMetadata): void;
+    /**
+     * Fetch complete block data including source files
+     */
+    fetchBlockData(url: string): Promise<{
+        metadata: BlockMetadata;
+        files: CodeFile[];
+    }>;
+    /**
+     * Test API connectivity and authentication
+     */
+    testConnection(): Promise<boolean>;
+}
+export declare const apiClient: APIClient;
+export { APIClient };

package/dist/api/index.js

@@ -0,0 +1,147 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APIClient = exports.apiClient = void 0;
+const axios_1 = __importDefault(require("axios"));
+const auth_1 = require("../auth");
+class APIClient {
+    client;
+    baseURL;
+    constructor(baseURL = 'https://www.blok0.xyz') {
+        this.baseURL = baseURL;
+        this.client = axios_1.default.create({
+            baseURL,
+            timeout: 30000,
+            headers: {
+                'User-Agent': 'blok0-cli/1.0.0'
+            }
+        });
+        // Add auth header to all requests
+        this.client.interceptors.request.use(async (config) => {
+            const authHeader = await (0, auth_1.getAuthHeader)();
+            if (authHeader) {
+                config.headers.Authorization = authHeader;
+                console.log(`🔐 API Request: ${config.method?.toUpperCase()} ${config.url}`);
+                console.log(`🔑 Authorization: ${authHeader}`);
+            }
+            else {
+                console.log(`🚫 API Request: ${config.method?.toUpperCase()} ${config.url} (No auth)`);
+            }
+            return config;
+        });
+    }
+    /**
+     * Fetch block metadata from URL
+     */
+    async fetchBlockMetadata(url) {
+        try {
+            const response = await this.client.get(url);
+            return response.data;
+        }
+        catch (error) {
+            if (axios_1.default.isAxiosError(error)) {
+                if (error.response?.status === 401) {
+                    throw new Error('Authentication required. Please run `blok0 login` first.');
+                }
+                if (error.response?.status === 404) {
+                    throw new Error(`Block not found at URL: ${url}`);
+                }
+                throw new Error(`API request failed: ${error.response?.data?.message || error.message}`);
+            }
+            throw error;
+        }
+    }
+    /**
+     * Download source code file
+     */
+    async downloadSourceCode(url) {
+        try {
+            const response = await this.client.get(url, {
+                responseType: 'text'
+            });
+            return response.data;
+        }
+        catch (error) {
+            if (axios_1.default.isAxiosError(error)) {
+                throw new Error(`Failed to download source code from ${url}: ${error.message}`);
+            }
+            throw error;
+        }
+    }
+    /**
+     * Validate block metadata
+     */
+    validateBlockMetadata(metadata) {
+        if (!metadata.id || typeof metadata.id !== 'number') {
+            throw new Error('Invalid block metadata: missing or invalid id');
+        }
+        if (!metadata.name || typeof metadata.name !== 'string') {
+            throw new Error('Invalid block metadata: missing or invalid name');
+        }
+        if (!metadata.slug || typeof metadata.slug !== 'string') {
+            throw new Error('Invalid block metadata: missing or invalid slug');
+        }
+        // Validate slug format
+        const slugRegex = /^[a-z0-9-]+$/;
+        if (!slugRegex.test(metadata.slug)) {
+            throw new Error('Invalid block slug format. Must contain only lowercase letters, numbers, and dashes.');
+        }
+        if (!metadata.codeFiles || !Array.isArray(metadata.codeFiles)) {
+            throw new Error('Invalid block metadata: missing or invalid codeFiles');
+        }
+        // Filter out malformed codeFiles entries
+        const validCodeFiles = metadata.codeFiles.filter(file => file.sourceCode && file.sourceCode.name && file.sourceCode.url);
+        if (validCodeFiles.length === 0) {
+            throw new Error('Invalid block metadata: no valid code files specified');
+        }
+        // Check for required files
+        const hasConfig = validCodeFiles.some(file => file.sourceCode.name === 'config.ts');
+        if (!hasConfig) {
+            throw new Error('Invalid block metadata: config.ts file is required');
+        }
+        if (metadata._status !== 'published') {
+            throw new Error('Block is not published and cannot be installed');
+        }
+    }
+    /**
+     * Fetch complete block data including source files
+     */
+    async fetchBlockData(url) {
+        const metadata = await this.fetchBlockMetadata(url);
+        this.validateBlockMetadata(metadata);
+        const files = [];
+        // Filter out malformed codeFiles entries (same logic as validation)
+        const validCodeFiles = metadata.codeFiles.filter(file => file.sourceCode && file.sourceCode.name && file.sourceCode.url);
+        for (const fileInfo of validCodeFiles) {
+            const { name, url: fileUrl } = fileInfo.sourceCode;
+            // Resolve relative URLs
+            const resolvedUrl = fileUrl.startsWith('http') ? fileUrl : `${this.baseURL}${fileUrl}`;
+            try {
+                const content = await this.downloadSourceCode(resolvedUrl);
+                files.push({ name, content });
+            }
+            catch (error) {
+                throw new Error(`Failed to download ${name}: ${error.message}`);
+            }
+        }
+        return { metadata, files };
+    }
+    /**
+     * Test API connectivity and authentication
+     */
+    async testConnection() {
+        try {
+            // Try to access a test endpoint or just check auth header
+            const authHeader = await (0, auth_1.getAuthHeader)();
+            return authHeader !== null;
+        }
+        catch (error) {
+            return false;
+        }
+    }
+}
+exports.APIClient = APIClient;
+// Export singleton instance
+exports.apiClient = new APIClient();

package/dist/ast/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Update Payload page collection config to include new block
+ */
+export declare function updatePageCollectionConfig(pagesCollectionPath: string, blockConfigPath: string, blockName: string): void;
+/**
+ * Update RenderBlocks.tsx to include new block component
+ */
+export declare function updateRenderBlocksComponent(componentPath: string, blockSlug: string, blockComponentPath: string): void;
+/**
+ * Validate that a file can be parsed as TypeScript
+ */
+export declare function validateTypeScriptFile(filePath: string): {
+    valid: boolean;
+    errors: string[];
+};
+/**
+ * Find Payload config file in project
+ */
+export declare function findPayloadConfig(): string | null;
+/**
+ * Find RenderBlocks component file
+ */
+export declare function findRenderBlocksComponent(): string | null;
+/**
+ * Find Pages collection file in project
+ */
+export declare function findPagesCollection(): string | null;
+/**
+ * Extract the component name from a Component.tsx file
+ */
+export declare function extractComponentName(componentPath: string): string | null;

package/dist/ast/index.js

@@ -0,0 +1,324 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updatePageCollectionConfig = updatePageCollectionConfig;
+exports.updateRenderBlocksComponent = updateRenderBlocksComponent;
+exports.validateTypeScriptFile = validateTypeScriptFile;
+exports.findPayloadConfig = findPayloadConfig;
+exports.findRenderBlocksComponent = findRenderBlocksComponent;
+exports.findPagesCollection = findPagesCollection;
+exports.extractComponentName = extractComponentName;
+const ts_morph_1 = require("ts-morph");
+/**
+ * Update Payload page collection config to include new block
+ */
+function updatePageCollectionConfig(pagesCollectionPath, blockConfigPath, blockName) {
+    const project = new ts_morph_1.Project();
+    const sourceFile = project.addSourceFileAtPath(pagesCollectionPath);
+    // Check if block is already imported (do this first before any modifications)
+    const importDeclarations = sourceFile.getImportDeclarations();
+    const existingImport = importDeclarations.find(imp => imp.getModuleSpecifier().getLiteralValue() === blockConfigPath);
+    let needsImport = !existingImport;
+    if (needsImport) {
+        // Add import statement
+        const lastImport = importDeclarations[importDeclarations.length - 1];
+        const importText = `\nimport { ${blockName} } from '${blockConfigPath}';\n`;
+        sourceFile.insertText(lastImport.getEnd(), importText);
+        sourceFile.saveSync(); // Save the import addition
+    }
+    // Re-load the source file after modification to get fresh AST
+    const updatedProject = new ts_morph_1.Project();
+    const updatedSourceFile = updatedProject.addSourceFileAtPath(pagesCollectionPath);
+    // Find the Pages collection export (fresh references)
+    const pagesExport = updatedSourceFile.getVariableDeclaration('Pages');
+    if (!pagesExport) {
+        throw new Error('Could not find Pages collection export');
+    }
+    const pagesObject = pagesExport.getInitializer();
+    if (!pagesObject || !ts_morph_1.Node.isObjectLiteralExpression(pagesObject)) {
+        throw new Error('Could not find Pages collection object');
+    }
+    // Find the fields array
+    const fieldsProperty = pagesObject.getProperty('fields');
+    if (!fieldsProperty || !ts_morph_1.Node.isPropertyAssignment(fieldsProperty)) {
+        throw new Error('Could not find fields property in Pages collection');
+    }
+    const fieldsArray = fieldsProperty.getInitializer();
+    if (!fieldsArray || !ts_morph_1.Node.isArrayLiteralExpression(fieldsArray)) {
+        throw new Error('Could not find fields array in Pages collection');
+    }
+    // Find the tabs array within fields
+    const tabsField = fieldsArray.getElements().find(element => {
+        if (ts_morph_1.Node.isObjectLiteralExpression(element)) {
+            const typeProperty = element.getProperty('type');
+            if (ts_morph_1.Node.isPropertyAssignment(typeProperty)) {
+                const initializer = typeProperty.getInitializer();
+                return ts_morph_1.Node.isStringLiteral(initializer) && initializer.getLiteralValue() === 'tabs';
+            }
+        }
+        return false;
+    });
+    if (!tabsField || !ts_morph_1.Node.isObjectLiteralExpression(tabsField)) {
+        throw new Error('Could not find tabs field in Pages collection');
+    }
+    const tabsProperty = tabsField.getProperty('tabs');
+    if (!tabsProperty || !ts_morph_1.Node.isPropertyAssignment(tabsProperty)) {
+        throw new Error('Could not find tabs property');
+    }
+    const tabsArray = tabsProperty.getInitializer();
+    if (!tabsArray || !ts_morph_1.Node.isArrayLiteralExpression(tabsArray)) {
+        throw new Error('Could not find tabs array');
+    }
+    // Find the "Content" tab (which contains the layout)
+    const contentTab = tabsArray.getElements().find(element => {
+        if (ts_morph_1.Node.isObjectLiteralExpression(element)) {
+            const labelProperty = element.getProperty('label');
+            if (ts_morph_1.Node.isPropertyAssignment(labelProperty)) {
+                const initializer = labelProperty.getInitializer();
+                return ts_morph_1.Node.isStringLiteral(initializer) && initializer.getLiteralValue() === 'Content';
+            }
+        }
+        return false;
+    });
+    if (!contentTab || !ts_morph_1.Node.isObjectLiteralExpression(contentTab)) {
+        throw new Error('Could not find Content tab in Pages collection');
+    }
+    // Find the layout field within the Content tab
+    const contentFields = contentTab.getProperty('fields');
+    if (!contentFields || !ts_morph_1.Node.isPropertyAssignment(contentFields)) {
+        throw new Error('Could not find fields in Content tab');
+    }
+    const contentFieldsArray = contentFields.getInitializer();
+    if (!contentFieldsArray || !ts_morph_1.Node.isArrayLiteralExpression(contentFieldsArray)) {
+        throw new Error('Could not find fields array in Content tab');
+    }
+    // Find the layout field
+    const layoutField = contentFieldsArray.getElements().find(element => {
+        if (ts_morph_1.Node.isObjectLiteralExpression(element)) {
+            const nameProperty = element.getProperty('name');
+            if (ts_morph_1.Node.isPropertyAssignment(nameProperty)) {
+                const initializer = nameProperty.getInitializer();
+                return ts_morph_1.Node.isStringLiteral(initializer) && initializer.getLiteralValue() === 'layout';
+            }
+        }
+        return false;
+    });
+    if (!layoutField || !ts_morph_1.Node.isObjectLiteralExpression(layoutField)) {
+        throw new Error('Could not find layout field');
+    }
+    // Find the blocks array
+    const blocksProperty = layoutField.getProperty('blocks');
+    if (!blocksProperty || !ts_morph_1.Node.isPropertyAssignment(blocksProperty)) {
+        throw new Error('Could not find blocks property in layout');
+    }
+    const blocksArray = blocksProperty.getInitializer();
+    if (!blocksArray || !ts_morph_1.Node.isArrayLiteralExpression(blocksArray)) {
+        throw new Error('Could not find blocks array in layout');
+    }
+    // Check if block is already in array
+    const existingElements = blocksArray.getElements();
+    const alreadyExists = existingElements.some(element => {
+        if (ts_morph_1.Node.isIdentifier(element)) {
+            return element.getText() === blockName;
+        }
+        return false;
+    });
+    if (!alreadyExists) {
+        // Add block to array
+        const lastElement = existingElements[existingElements.length - 1];
+        if (lastElement) {
+            blocksArray.insertElement(existingElements.length, blockName);
+        }
+        else {
+            blocksArray.addElement(blockName);
+        }
+    }
+    updatedSourceFile.saveSync();
+}
+/**
+ * Update RenderBlocks.tsx to include new block component
+ */
+function updateRenderBlocksComponent(componentPath, blockSlug, blockComponentPath) {
+    // Extract the actual component name from the Component.tsx file
+    const fullComponentPath = require('path').resolve(blockComponentPath.replace('./', 'src/blocks/') + '.tsx');
+    const componentName = extractComponentName(fullComponentPath);
+    if (!componentName) {
+        throw new Error(`Could not extract component name from ${fullComponentPath}`);
+    }
+    // Convert slug to blockType key (camelCase)
+    const blockTypeKey = blockSlug.split('-').map((word, index) => index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)).join('');
+    const project = new ts_morph_1.Project();
+    const sourceFile = project.addSourceFileAtPath(componentPath);
+    // Find the blockComponents object
+    const blockComponents = sourceFile.getVariableDeclaration('blockComponents')?.getInitializer();
+    if (!blockComponents || !ts_morph_1.Node.isObjectLiteralExpression(blockComponents)) {
+        throw new Error('Could not find blockComponents object in RenderBlocks.tsx');
+    }
+    // Check if component is already imported (check both default and named imports)
+    const importDeclarations = sourceFile.getImportDeclarations();
+    const existingImport = importDeclarations.find(imp => {
+        // Check default import
+        const defaultImport = imp.getDefaultImport();
+        if (defaultImport && defaultImport.getText() === componentName) {
+            return true;
+        }
+        // Check named imports
+        const namedImports = imp.getNamedImports();
+        return namedImports.some(namedImport => namedImport.getName() === componentName);
+    });
+    let needsImport = !existingImport;
+    if (needsImport) {
+        // Add import statement (named import)
+        const lastImport = importDeclarations[importDeclarations.length - 1];
+        const importText = `\nimport { ${componentName} } from '${blockComponentPath}';\n`;
+        sourceFile.insertText(lastImport.getEnd(), importText);
+        sourceFile.saveSync(); // Save the import addition
+    }
+    // Re-load the source file after modification to get fresh AST
+    const updatedProject = new ts_morph_1.Project();
+    const updatedSourceFile = updatedProject.addSourceFileAtPath(componentPath);
+    const updatedBlockComponents = updatedSourceFile.getVariableDeclaration('blockComponents')?.getInitializer();
+    if (!updatedBlockComponents || !ts_morph_1.Node.isObjectLiteralExpression(updatedBlockComponents)) {
+        throw new Error('Could not find blockComponents object in RenderBlocks.tsx after reload');
+    }
+    // Check if property already exists
+    const existingProperties = updatedBlockComponents.getProperties();
+    const propertyExists = existingProperties.some(prop => {
+        if (ts_morph_1.Node.isPropertyAssignment(prop)) {
+            const name = prop.getName();
+            return name === `'${blockTypeKey}'` || name === `"${blockTypeKey}"`;
+        }
+        return false;
+    });
+    if (!propertyExists) {
+        // Add new property to object
+        const lastProperty = existingProperties[existingProperties.length - 1];
+        if (lastProperty) {
+            const insertPos = lastProperty.getEnd();
+            const newPropertyText = `,\n  '${blockTypeKey}': ${componentName}`;
+            updatedSourceFile.insertText(insertPos, newPropertyText);
+        }
+        else {
+            // Object is empty, add first property
+            const objectStart = updatedBlockComponents.getStart() + 1; // After opening brace
+            updatedSourceFile.insertText(objectStart, `\n  '${blockTypeKey}': ${componentName}\n`);
+        }
+    }
+    updatedSourceFile.saveSync();
+}
+/**
+ * Validate that a file can be parsed as TypeScript
+ */
+function validateTypeScriptFile(filePath) {
+    const errors = [];
+    try {
+        const project = new ts_morph_1.Project();
+        const sourceFile = project.addSourceFileAtPath(filePath);
+        // Check for syntax errors
+        const diagnostics = sourceFile.getPreEmitDiagnostics();
+        for (const diagnostic of diagnostics) {
+            errors.push(diagnostic.getMessageText().toString());
+        }
+    }
+    catch (error) {
+        errors.push(`Failed to parse TypeScript file: ${error.message}`);
+    }
+    return { valid: errors.length === 0, errors };
+}
+/**
+ * Find Payload config file in project
+ */
+function findPayloadConfig() {
+    const possiblePaths = [
+        'payload.config.ts',
+        'payload.config.js',
+        'src/payload.config.ts',
+        'src/payload.config.js'
+    ];
+    for (const path of possiblePaths) {
+        if (require('fs').existsSync(path)) {
+            return path;
+        }
+    }
+    return null;
+}
+/**
+ * Find RenderBlocks component file
+ */
+function findRenderBlocksComponent() {
+    const possiblePaths = [
+        'src/blocks/RenderBlocks.tsx',
+        'src/blocks/RenderBlocks.ts',
+        'src/components/RenderBlocks.tsx',
+        'src/components/RenderBlocks.ts'
+    ];
+    for (const path of possiblePaths) {
+        if (require('fs').existsSync(path)) {
+            return path;
+        }
+    }
+    return null;
+}
+/**
+ * Find Pages collection file in project
+ */
+function findPagesCollection() {
+    const possiblePaths = [
+        'src/collections/Pages/index.ts',
+        'src/collections/Pages.ts',
+        'src/collections/pages/index.ts',
+        'src/collections/pages.ts'
+    ];
+    for (const path of possiblePaths) {
+        if (require('fs').existsSync(path)) {
+            return path;
+        }
+    }
+    return null;
+}
+/**
+ * Extract the component name from a Component.tsx file
+ */
+function extractComponentName(componentPath) {
+    try {
+        const project = new ts_morph_1.Project();
+        const sourceFile = project.addSourceFileAtPath(componentPath);
+        // Look for named exports like "export const ComponentName"
+        const variableDeclarations = sourceFile.getVariableDeclarations();
+        for (const declaration of variableDeclarations) {
+            if (declaration.isExported()) {
+                const name = declaration.getName();
+                // Check if it's a React component (function or const with JSX)
+                const initializer = declaration.getInitializer();
+                if (initializer) {
+                    // Look for React.FC or function patterns
+                    const type = declaration.getType();
+                    const typeText = type.getText();
+                    if (typeText.includes('React.FC') || typeText.includes('FC<') ||
+                        initializer.getText().includes('React.FC') || initializer.getText().includes('FC<')) {
+                        return name;
+                    }
+                }
+            }
+        }
+        // Look for export default statements
+        const defaultExport = sourceFile.getDefaultExportSymbol();
+        if (defaultExport) {
+            return defaultExport.getName();
+        }
+        // Look for export default expressions
+        const exportAssignments = sourceFile.getExportAssignments();
+        for (const assignment of exportAssignments) {
+            if (assignment.isExportEquals() === false) { // export default
+                const expression = assignment.getExpression();
+                if (expression) {
+                    return expression.getText();
+                }
+            }
+        }
+        return null;
+    }
+    catch (error) {
+        console.error('Error extracting component name:', error);
+        return null;
+    }
+}

package/dist/auth/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const AUTH_BASE_URL = "https://www.blok0.xyz";
+export declare const AUTHORIZE_ENDPOINT = "/api/authorize/cli";
+export declare const DEFAULT_TIMEOUT: number;
+export declare const PORT_RANGE: {
+    min: number;
+    max: number;
+};
+export declare const CALLBACK_PATH = "/callback";
+export declare const SUCCESS_HTML = "\n<!DOCTYPE html>\n<html>\n<head>\n    <title>Authentication Successful</title>\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            background: #f5f5f5;\n            margin: 0;\n            padding: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 100vh;\n        }\n        .container {\n            background: white;\n            padding: 2rem;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            text-align: center;\n            max-width: 400px;\n        }\n        .success-icon {\n            color: #10b981;\n            font-size: 3rem;\n            margin-bottom: 1rem;\n        }\n        h1 {\n            color: #1f2937;\n            margin: 0 0 0.5rem 0;\n            font-size: 1.5rem;\n        }\n        p {\n            color: #6b7280;\n            margin: 0;\n        }\n    </style>\n</head>\n<body>\n    <div class=\"container\">\n        <div class=\"success-icon\">\u2713</div>\n        <h1>Authentication Successful!</h1>\n        <p>You can now close this window and return to your terminal.</p>\n    </div>\n</body>\n</html>\n";
+export declare const ERROR_HTML = "\n<!DOCTYPE html>\n<html>\n<head>\n    <title>Authentication Failed</title>\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            background: #f5f5f5;\n            margin: 0;\n            padding: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 100vh;\n        }\n        .container {\n            background: white;\n            padding: 2rem;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            text-align: center;\n            max-width: 400px;\n        }\n        .error-icon {\n            color: #ef4444;\n            font-size: 3rem;\n            margin-bottom: 1rem;\n        }\n        h1 {\n            color: #1f2937;\n            margin: 0 0 0.5rem 0;\n            font-size: 1.5rem;\n        }\n        p {\n            color: #6b7280;\n            margin: 0;\n        }\n    </style>\n</head>\n<body>\n    <div class=\"container\">\n        <div class=\"error-icon\">\u2717</div>\n        <h1>Authentication Failed</h1>\n        <p>Please try again or contact support if the problem persists.</p>\n    </div>\n</body>\n</html>\n";
+export declare const TIMEOUT_HTML = "\n<!DOCTYPE html>\n<html>\n<head>\n    <title>Authentication Timeout</title>\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            background: #f5f5f5;\n            margin: 0;\n            padding: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 100vh;\n        }\n        .container {\n            background: white;\n            padding: 2rem;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            text-align: center;\n            max-width: 400px;\n        }\n        .timeout-icon {\n            color: #f59e0b;\n            font-size: 3rem;\n            margin-bottom: 1rem;\n        }\n        h1 {\n            color: #1f2937;\n            margin: 0 0 0.5rem 0;\n            font-size: 1.5rem;\n        }\n        p {\n            color: #6b7280;\n            margin: 0;\n        }\n    </style>\n</head>\n<body>\n    <div class=\"container\">\n        <div class=\"timeout-icon\">\u23F1</div>\n        <h1>Authentication Timeout</h1>\n        <p>The authentication request has timed out. Please try again.</p>\n    </div>\n</body>\n</html>\n";