arikajs 0.10.2 → 0.10.4

package/src/http/Kernel.ts

@@ -1,108 +0,0 @@
-import { Application } from '../Contracts/Application';
-import { Request, Response, NotFoundHttpException } from '@arikajs/http';
-import { Pipeline } from '@arikajs/middleware';
-import { Dispatcher } from '@arikajs/dispatcher';
-import { RequestLoggingMiddleware } from './Middleware/RequestLoggingMiddleware';
-import { BodyParserMiddleware, CorsMiddleware, TrimStrings, ConvertEmptyStringsToNull, SecurityHeaders, Throttle } from '@arikajs/http';
-import { Handler } from './Handler';
-import { ViewMiddleware } from './Middleware/ViewMiddleware';
-import { VerifyCsrfToken } from './Middleware/VerifyCsrfToken';
-import { ServeStaticMiddleware } from './Middleware/ServeStaticMiddleware';
-import { StartSession } from '@arikajs/session';
-import { Authenticate, EnsureEmailIsVerified } from '@arikajs/auth';
-
-
-export class Kernel {
-    /**
-     * The application's global HTTP middleware stack.
-     */
-    protected middleware: any[] = [
-        new CorsMiddleware(),
-        new SecurityHeaders(),
-        new RequestLoggingMiddleware(),
-        new BodyParserMiddleware(),
-        new TrimStrings(),
-        new ConvertEmptyStringsToNull(),
-        new ServeStaticMiddleware(),
-    ];
-
-    /**
-     * The application's route middleware groups.
-     */
-    protected middlewareGroups: Record<string, any[]> = {
-        web: [
-            StartSession,
-            ViewMiddleware,
-            VerifyCsrfToken,
-        ],
-        api: [],
-    };
-
-    /**
-     * The application's route middleware.
-     */
-    protected routeMiddleware: Record<string, any> = {
-        'auth': Authenticate,
-        'verified': EnsureEmailIsVerified,
-        'throttle': Throttle,
-    };
-
-    protected handler: Handler;
-
-    constructor(protected app: Application) {
-        try {
-            this.handler = this.app.make(Handler);
-        } catch (e) {
-            this.handler = new Handler();
-        }
-
-        const router = this.app.getRouter();
-        if ((router as any).setMiddlewareGroups) {
-            (router as any).setMiddlewareGroups(this.middlewareGroups);
-        }
-        if ((router as any).setRouteMiddleware) {
-            (router as any).setRouteMiddleware(this.routeMiddleware);
-        }
-    }
-
-    /**
-     * Handle an incoming HTTP request.
-     */
-    public async handle(request: Request, response: Response): Promise<Response> {
-        try {
-            const pipeline = new Pipeline<Request, Response>(this.app.getContainer());
-            pipeline.setMiddlewareGroups(this.middlewareGroups);
-            pipeline.setAliases(this.routeMiddleware);
-
-            return await pipeline.pipe(this.middleware)
-                .handle(request, async (req: Request) => {
-                    return this.dispatchToRouter(req, response);
-                }, response);
-        } catch (error: any) {
-            this.handler.report(error);
-            return await this.handler.render(request, error, response);
-        }
-    }
-
-    /**
-     * Dispatch the request to the router.
-     */
-    protected async dispatchToRouter(request: Request, response: Response): Promise<Response> {
-        const router = this.app.getRouter();
-
-        const result = await router.dispatch(request, response);
-
-        if (result === null) {
-            throw new NotFoundHttpException(`Route not found: [${request.method()}] ${request.path()}`);
-        }
-
-        return result as Response;
-    }
-
-    /**
-     * Send the response back to the client.
-     */
-    public terminate(request: Request, response: Response): void {
-        response.terminate();
-    }
-}

package/src/http/Middleware/RequestLoggingMiddleware.ts

@@ -1,17 +0,0 @@
-
-import { Log } from '@arikajs/logging';
-
-export class RequestLoggingMiddleware {
-    public async handle(request: any, next: (request: any) => Promise<any>): Promise<any> {
-        const start = Date.now();
-        const method = request.method();
-        const url = request.path();
-
-        const response = await next(request);
-
-        const duration = Date.now() - start;
-        Log.info(`${method} ${url} - ${duration}ms`);
-
-        return response;
-    }
-}

package/src/http/Middleware/ServeStaticMiddleware.ts

@@ -1,34 +0,0 @@
-import { Request, Response } from '@arikajs/http';
-import serveStatic from 'serve-static';
-import path from 'path';
-
-export class ServeStaticMiddleware {
-    private serve: ReturnType<typeof serveStatic>;
-
-    constructor(publicPath: string = path.join(process.cwd(), 'public')) {
-        this.serve = serveStatic(publicPath, {
-            index: false,
-            fallthrough: true,
-        });
-    }
-
-    public async handle(request: Request, next: (req: Request) => Promise<Response>, response: Response): Promise<Response> {
-        return new Promise((resolve, reject) => {
-            const req = request.getIncomingMessage();
-            const res = response.getOriginalResponse();
-
-            this.serve(req as any, res as any, async (err: any) => {
-                if (err) {
-                    return reject(err);
-                }
-
-                try {
-                    const result = await next(request);
-                    resolve(result);
-                } catch (e) {
-                    reject(e);
-                }
-            });
-        });
-    }
-}

package/src/http/Middleware/ValidateRequestMiddleware.ts

@@ -1,35 +0,0 @@
-
-import { Request, Response } from '@arikajs/http';
-import { Validator } from '@arikajs/validation';
-
-export class ValidateRequestMiddleware {
-    protected rules: Record<string, any> = {};
-
-    /**
-     * Set the validation rules.
-     */
-    public using(rules: Record<string, any>): this {
-        this.rules = rules;
-        return this;
-    }
-
-    /**
-     * Handle the incoming request.
-     */
-    public async handle(request: Request, next: (request: Request) => Promise<Response>, response: Response): Promise<Response> {
-        if (Object.keys(this.rules).length === 0) {
-            return next(request);
-        }
-
-        const validator = new Validator(request.all(), this.rules);
-
-        if (await validator.fails()) {
-            return response.status(422).json({
-                message: 'The given data was invalid.',
-                errors: validator.errors()
-            });
-        }
-
-        return next(request);
-    }
-}

package/src/http/Middleware/VerifyCsrfToken.ts

@@ -1,101 +0,0 @@
-
-import { Request, Response, Middleware } from '@arikajs/http';
-import { HttpException } from '@arikajs/http';
-import crypto from 'node:crypto';
-
-export class VerifyCsrfToken implements Middleware {
-    /**
-     * The URIs that should be excluded from CSRF verification.
-     */
-    protected except: string[] = [];
-
-    /**
-     * Handle the incoming request.
-     */
-    public async handle(request: Request, next: (request: Request) => Promise<Response>): Promise<Response> {
-        if (this.isReading(request) || this.runningUnitTests() || await this.inExceptArray(request)) {
-            return await this.addCookieToResponse(request, await next(request));
-        }
-
-        if (await this.tokensMatch(request)) {
-            return await this.addCookieToResponse(request, await next(request));
-        }
-
-        throw new HttpException(419, 'CSRF token mismatch.');
-    }
-
-    /**
-     * Determine if the request has a URI that should pass through CSRF verification.
-     */
-    protected async inExceptArray(request: Request): Promise<boolean> {
-        const path = request.path();
-        for (const except of this.except) {
-            if (except === '/') {
-                if (path === '/') return true;
-                continue;
-            }
-            if (path.startsWith(except)) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    /**
-     * Determine if the session and input tokens match.
-     */
-    protected async tokensMatch(request: Request): Promise<boolean> {
-        const token = await this.getTokenFromRequest(request);
-        const sessionToken = await request.session.get('_token');
-
-        if (!token || !sessionToken || token.length !== sessionToken.length) {
-            return false;
-        }
-
-        return crypto.timingSafeEqual(Buffer.from(token), Buffer.from(sessionToken));
-    }
-
-    /**
-     * Get the CSRF token from the request.
-     */
-    protected async getTokenFromRequest(request: Request): Promise<string | null> {
-        const token = request.input('_token') || request.header('X-CSRF-TOKEN') || request.header('X-XSRF-TOKEN');
-        
-        if (!token) {
-            return null;
-        }
-
-        return token;
-    }
-
-    /**
-     * Determine if the HTTP request uses a read-only method.
-     */
-    protected isReading(request: Request): boolean {
-        return ['GET', 'HEAD', 'OPTIONS'].includes(request.method());
-    }
-
-    /**
-     * Determine if the application is running unit tests.
-     */
-    protected runningUnitTests(): boolean {
-        return process.env.NODE_ENV === 'test';
-    }
-
-    /**
-     * Add the CSRF token to the response cookies.
-     */
-    protected async addCookieToResponse(request: Request, response: Response): Promise<Response> {
-        const token = await request.session.get('_token');
-        if (token) {
-            const config = (request as any).app.config();
-            response.cookie('XSRF-TOKEN', token, {
-                path: '/',
-                httpOnly: false,
-                sameSite: 'lax',
-                secure: config.get('session.secure', false)
-            });
-        }
-        return response;
-    }
-}

package/src/http/Middleware/ViewMiddleware.ts

@@ -1,24 +0,0 @@
-
-import { View } from '@arikajs/view';
-import crypto from 'node:crypto';
-
-export class ViewMiddleware {
-    constructor(private view: View) { }
-
-    public async handle(request: any, next: (request: any) => Promise<any>): Promise<any> {
-        // Attach the view engine to the request object
-        request.view = this.view;
-
-        // Ensure CSRF token exists in session and share it with views
-        if (request.session) {
-            let token = await request.session.get('_token');
-            if (!token) {
-                token = crypto.randomBytes(40).toString('hex');
-                await request.session.set('_token', token);
-            }
-            this.view.share('_csrf', token);
-        }
-
-        return await next(request);
-    }
-}

package/src/http/views/errors/401.ark.html

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>401 - Unauthorized | {{app_name}}</title>
-    <link rel="icon" type="image/png" href="/assets/img/favicon.png">
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; color: #0f172a; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; position: relative; }
-        .aurora { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter: blur(100px); opacity: 0.25; pointer-events: none; }
-        .aurora-blur { position: absolute; border-radius: 50%; animation: move 20s infinite alternate; }
-        .blur-1 { width: 50vw; height: 50vw; background: radial-gradient(circle, #8b5cf6 0%, transparent 70%); top: -10%; left: -10%; }
-        .blur-2 { width: 40vw; height: 40vw; background: radial-gradient(circle, #f59e0b 0%, transparent 70%); bottom: -10%; right: -10%; animation-duration: 25s; }
-        @keyframes move { from { transform: translate(0, 0) scale(1); } to { transform: translate(10%, 10%) scale(1.1); } }
-        header { width: 100%; padding: 1.5rem 5%; display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
-        .logo { width: 120px; height: auto; filter: drop-shadow(0 4px 6px rgba(139, 92, 246, 0.2)); }
-        .main-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6rem 2rem 4rem; }
-        .container { position: relative; z-index: 10; max-width: 700px; width: 100%; text-align: center; animation: fadeIn 0.8s ease-out; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
-        .badge { display: inline-block; padding: 0.45rem 1.1rem; background: rgba(245, 158, 11, 0.08); border: 1px solid #f59e0b; color: #d97706; border-radius: 999px; font-size: 0.8rem; font-weight: 700; margin-bottom: 1.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
-        h1 { font-family: 'Outfit', sans-serif; font-size: clamp(3rem, 10vw, 5.5rem); font-weight: 800; line-height: 1; margin-bottom: 1.5rem; letter-spacing: -0.04em; background: linear-gradient(135deg, #0f172a 30%, #334155 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-        .description { font-size: 1.15rem; color: #64748b; max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.7; }
-        .actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
-        .btn { padding: 0.875rem 2rem; border-radius: 12px; font-weight: 600; text-decoration: none; transition: all 0.25s ease; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.5rem; }
-        .btn-primary { background: #8b5cf6; color: white; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35); }
-        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(139, 92, 246, 0.45); background: #7c3aed; }
-        .btn-secondary { background: rgba(15, 23, 42, 0.05); color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.1); }
-        .btn-secondary:hover { background: rgba(15, 23, 42, 0.1); }
-        .code-display { font-family: 'Outfit', sans-serif; font-size: clamp(6rem, 20vw, 12rem); font-weight: 800; line-height: 1; margin-bottom: 0.5rem; background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.04em; }
-        .footer { padding: 2rem 0; color: #94a3b8; font-size: 0.8rem; text-align: center; border-top: 1px solid rgba(15, 23, 42, 0.06); }
-        .footer a { color: #8b5cf6; text-decoration: none; font-weight: 600; }
-        @media (max-width: 640px) { .actions { flex-direction: column; align-items: center; } }
-    </style>
-</head>
-<body>
-    <div class="aurora"><div class="aurora-blur blur-1"></div><div class="aurora-blur blur-2"></div></div>
-    <header><a href="/"><img src="/assets/img/logo.png" alt="{{app_name}} Logo" class="logo"></a></header>
-    <main class="main-content">
-        <div class="container">
-            <div class="code-display">401</div>
-            <div class="badge">Unauthorized</div>
-            <h1>Authentication Required</h1>
-            <p class="description">You must be logged in to view this page. Please sign in to your account and try again.</p>
-            <div class="actions">
-                <a href="/auth/login" class="btn btn-primary">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
-                    Sign In
-                </a>
-                <a href="/" class="btn btn-secondary">Return Home</a>
-            </div>
-        </div>
-    </main>
-    <footer class="footer">&copy; {{app_name}} &mdash; Powered by <a href="https://github.com/arikajs/arikajs">ArikaJS Framework</a></footer>
-</body>
-</html>

package/src/http/views/errors/403.ark.html

@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>403 - Access Denied | {{app_name}}</title>
-    <link rel="icon" type="image/png" href="/assets/img/favicon.png">
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; color: #0f172a; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; position: relative; }
-        .aurora { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter: blur(100px); opacity: 0.25; pointer-events: none; }
-        .aurora-blur { position: absolute; border-radius: 50%; animation: move 20s infinite alternate; }
-        .blur-1 { width: 50vw; height: 50vw; background: radial-gradient(circle, #ef4444 0%, transparent 70%); top: -10%; left: -10%; }
-        .blur-2 { width: 40vw; height: 40vw; background: radial-gradient(circle, #8b5cf6 0%, transparent 70%); bottom: -10%; right: -10%; animation-duration: 25s; }
-        @keyframes move { from { transform: translate(0, 0) scale(1); } to { transform: translate(10%, 10%) scale(1.1); } }
-        header { width: 100%; padding: 1.5rem 5%; display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
-        .logo { width: 120px; height: auto; filter: drop-shadow(0 4px 6px rgba(139, 92, 246, 0.2)); }
-        .main-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6rem 2rem 4rem; }
-        .container { position: relative; z-index: 10; max-width: 700px; width: 100%; text-align: center; animation: fadeIn 0.8s ease-out; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
-        .badge { display: inline-block; padding: 0.45rem 1.1rem; background: rgba(239, 68, 68, 0.08); border: 1px solid #ef4444; color: #dc2626; border-radius: 999px; font-size: 0.8rem; font-weight: 700; margin-bottom: 1.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
-        h1 { font-family: 'Outfit', sans-serif; font-size: clamp(3rem, 10vw, 5.5rem); font-weight: 800; line-height: 1; margin-bottom: 1.5rem; letter-spacing: -0.04em; background: linear-gradient(135deg, #0f172a 30%, #334155 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-        .description { font-size: 1.15rem; color: #64748b; max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.7; }
-        .actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
-        .btn { padding: 0.875rem 2rem; border-radius: 12px; font-weight: 600; text-decoration: none; transition: all 0.25s ease; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.5rem; }
-        .btn-primary { background: #8b5cf6; color: white; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35); }
-        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(139, 92, 246, 0.45); background: #7c3aed; }
-        .code-display { font-family: 'Outfit', sans-serif; font-size: clamp(6rem, 20vw, 12rem); font-weight: 800; line-height: 1; margin-bottom: 0.5rem; background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.04em; }
-        .footer { padding: 2rem 0; color: #94a3b8; font-size: 0.8rem; text-align: center; border-top: 1px solid rgba(15, 23, 42, 0.06); }
-        .footer a { color: #8b5cf6; text-decoration: none; font-weight: 600; }
-        @media (max-width: 640px) { .actions { flex-direction: column; align-items: center; } }
-    </style>
-</head>
-<body>
-    <div class="aurora"><div class="aurora-blur blur-1"></div><div class="aurora-blur blur-2"></div></div>
-    <header><a href="/"><img src="/assets/img/logo.png" alt="{{app_name}} Logo" class="logo"></a></header>
-    <main class="main-content">
-        <div class="container">
-            <div class="code-display">403</div>
-            <div class="badge">Forbidden</div>
-            <h1>Access Denied</h1>
-            <p class="description">You don't have the necessary permissions to access this area. If you believe this is an error, please contact your administrator.</p>
-            <div class="actions">
-                <a href="/" class="btn btn-primary">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12L12 3l9 9"/><path d="M9 21V12h6v9"/></svg>
-                    Return Home
-                </a>
-            </div>
-        </div>
-    </main>
-    <footer class="footer">&copy; {{app_name}} &mdash; Powered by <a href="https://github.com/arikajs/arikajs">ArikaJS Framework</a></footer>
-</body>
-</html>

package/src/http/views/errors/404.ark.html

@@ -1,179 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>404 - Page Not Found | {{app_name}}</title>
-    <link rel="icon" type="image/png" href="/assets/img/favicon.png">
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        body {
-            font-family: 'Plus Jakarta Sans', sans-serif;
-            background-color: #f8fafc;
-            color: #0f172a;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            overflow-x: hidden;
-            position: relative;
-        }
-
-        .aurora {
-            position: fixed;
-            top: 0; left: 0;
-            width: 100%; height: 100%;
-            z-index: -1;
-            filter: blur(100px);
-            opacity: 0.25;
-            pointer-events: none;
-        }
-        .aurora-blur { position: absolute; border-radius: 50%; animation: move 20s infinite alternate; }
-        .blur-1 { width: 50vw; height: 50vw; background: radial-gradient(circle, #8b5cf6 0%, transparent 70%); top: -10%; left: -10%; }
-        .blur-2 { width: 40vw; height: 40vw; background: radial-gradient(circle, #ec4899 0%, transparent 70%); bottom: -10%; right: -10%; animation-duration: 25s; }
-        @keyframes move { from { transform: translate(0, 0) scale(1); } to { transform: translate(10%, 10%) scale(1.1); } }
-
-        header {
-            width: 100%;
-            padding: 1.5rem 5%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid rgba(15, 23, 42, 0.08);
-        }
-        .logo { width: 120px; height: auto; filter: drop-shadow(0 4px 6px rgba(139, 92, 246, 0.2)); }
-
-        .main-content {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 6rem 2rem 4rem;
-        }
-
-        .container {
-            position: relative;
-            z-index: 10;
-            max-width: 700px;
-            width: 100%;
-            text-align: center;
-            animation: fadeIn 0.8s ease-out;
-        }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
-
-        .badge {
-            display: inline-block;
-            padding: 0.45rem 1.1rem;
-            background: rgba(139, 92, 246, 0.08);
-            border: 1px solid #8b5cf6;
-            color: #8b5cf6;
-            border-radius: 999px;
-            font-size: 0.8rem;
-            font-weight: 700;
-            margin-bottom: 1.75rem;
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-        }
-
-        h1 {
-            font-family: 'Outfit', sans-serif;
-            font-size: clamp(3rem, 10vw, 5.5rem);
-            font-weight: 800;
-            line-height: 1;
-            margin-bottom: 1.5rem;
-            letter-spacing: -0.04em;
-            background: linear-gradient(135deg, #0f172a 30%, #334155 100%);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        .description {
-            font-size: 1.15rem;
-            color: #64748b;
-            max-width: 520px;
-            margin: 0 auto 2.5rem;
-            line-height: 1.7;
-            font-weight: 400;
-        }
-
-        .actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
-
-        .btn {
-            padding: 0.875rem 2rem;
-            border-radius: 12px;
-            font-weight: 600;
-            text-decoration: none;
-            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-            font-size: 0.95rem;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .btn-primary {
-            background: #8b5cf6;
-            color: white;
-            box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35);
-        }
-        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(139, 92, 246, 0.45); background: #7c3aed; }
-
-        .code-display {
-            font-family: 'Outfit', sans-serif;
-            font-size: clamp(6rem, 20vw, 12rem);
-            font-weight: 800;
-            line-height: 1;
-            margin-bottom: 0.5rem;
-            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(236, 72, 153, 0.1) 100%);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.04em;
-        }
-
-        .footer {
-            padding: 2rem 0;
-            color: #94a3b8;
-            font-size: 0.8rem;
-            text-align: center;
-            border-top: 1px solid rgba(15, 23, 42, 0.06);
-        }
-        .footer a { color: #8b5cf6; text-decoration: none; font-weight: 600; }
-        .footer a:hover { text-decoration: underline; }
-
-        @media (max-width: 640px) { .actions { flex-direction: column; align-items: center; } }
-    </style>
-</head>
-<body>
-    <div class="aurora">
-        <div class="aurora-blur blur-1"></div>
-        <div class="aurora-blur blur-2"></div>
-    </div>
-
-    <header>
-        <a href="/">
-            <img src="/assets/img/logo.png" alt="{{app_name}} Logo" class="logo">
-        </a>
-    </header>
-
-    <main class="main-content">
-        <div class="container">
-            <div class="code-display">404</div>
-            <div class="badge">Page Not Found</div>
-            <h1>Lost in Space?</h1>
-            <p class="description">The page you're looking for doesn't exist or has been moved. Don't worry — you can always head back to the homepage and start again.</p>
-            <div class="actions">
-                <a href="/" class="btn btn-primary">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12L12 3l9 9"/><path d="M9 21V12h6v9"/></svg>
-                    Return Home
-                </a>
-            </div>
-        </div>
-    </main>
-
-    <footer class="footer">
-        &copy; {{app_name}} &mdash; Powered by <a href="https://github.com/arikajs/arikajs">ArikaJS Framework</a>
-    </footer>
-</body>
-</html>