hightjs 0.4.0 → 0.5.0

package/README.md

@@ -1,158 +1,90 @@
 <div align="center">
   <picture>
       <source media="(prefers-color-scheme: dark)" srcset="https://repository-images.githubusercontent.com/1069175740/e5c59d3a-e1fd-446c-a89f-785ed08f6a16">
-      <img alt="Next.js logo" src="https://repository-images.githubusercontent.com/1069175740/e5c59d3a-e1fd-446c-a89f-785ed08f6a16" height="128">
+      <img alt="HightJS logo" src="https://repository-images.githubusercontent.com/1069175740/e5c59d3a-e1fd-446c-a89f-785ed08f6a16" height="128">
     </picture>
   <h1>HightJS</h1>
 
 [![NPM](https://img.shields.io/npm/v/hightjs.svg?style=for-the-badge&labelColor=000000)](https://www.npmjs.com/package/hightjs)
-[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg?style=for-the-badge&labelColor=000000)](./LICENSE)
-
+[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg?style=for-the-badge&labelColor=000000)](../../LICENSE)
 
 </div>
 
-> Um framework web full‑stack moderno para Node.js, focado em simplicidade, DX e velocidade. Bundler via esbuild, hot reload, roteamento automático, APIs, autenticação JWT, CLI e muito mais.
----
-
-# Precisa de ajuda?
-Caso tenha alguma dúvida, entre em contato por uma das redes abaixo:
-
-[![Discord](https://img.shields.io/badge/Discord-mulinfrc-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.com/users/1264710048786026588)
-[![Gmail](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:murillofrazaocunha@gmail.com)
-[![Instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://instagram.com/itsmuh_)
-[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/murillo-frazao-cunha)
+> A modern full-stack web framework for Node.js, focused on simplicity, developer experience, and speed.
 
 ---
 
-## 📑 Índice
+## ✨ Features
+
+- **🚀 Blazing Fast** - Built on esbuild for lightning-fast builds and hot reload
+- **📁 File-based Routing** - Automatic routing for pages (`src/web/routes`) and APIs (`src/backend/routes`)
+- **⚛️ React 19** - Latest React with client-side hydration and streaming SSR
+- **📘 TypeScript First** - Fully typed out of the box
+- **🎨 Asset Imports** - Import images, markdown, SVG, JSON, fonts, audio, video directly
+- **🔌 WebSockets** - Native WebSocket support in backend routes
+- **🎯 Dynamic Routes** - Support for dynamic parameters in frontend and backend
+- **🛡️ Middleware** - Per-folder and per-route middleware support
+- **🔄 Hot Reload** - Native hot reload via internal WebSocket in dev mode
+- **🎭 Layouts** - Global layouts and custom 404 pages
+- **📝 Dynamic Metadata** - Per-page metadata generation
+- **📦 Smart Bundling** - Single bundle or code splitting
+- **🔒 Built-in SSL** - HTTPS out-of-the-box in Native mode
+- **🔐 Authentication** - JWT authentication built-in (HWebAuth)
+- **⚙️ CLI** - Own CLI (`hight`) for dev and production
+- **📂 Static Files** - Serve static files from `public/`
+- **🛡️ Security** - Built-in sanitization and rate limiting
 
-- [✨ Principais Recursos](#-principais-recursos)
-- [🚀 Início Rápido](#-início-rápido)
-- [📚 Documentação](#-documentação)
-- [🪪 Licença](#-licença)
 ---
 
-## ✨ Principais Recursos
-
-- **Roteamento automático** de páginas [`src/web/routes`] e APIs [`src/backend/routes`]
-- **React 19** com client-side hydration
-- **TypeScript** first (totalmente tipado)
-- **WebSockets** nativo nas rotas backend
-- **Rotas dinâmicas** com parâmetros (frontend e backend)
-- **Middlewares** por pasta ou rota
-- **Hot Reload** nativo (WebSocket interno) em dev
-- **Layouts globais** e página 404 customizada
-- **Metadata** dinâmica por página
-- **Build inteligente** (single bundle ou chunks)
-- **SSL integrado** no modo Native (HTTPS out-of-the-box)
-- **Autenticação** JWT embutida (HWebAuth)
-- **CLI própria** (`hight`) para dev e produção
-- **Entrega de estáticos** (`public/`)
-- Segurança, saneamento e limitações nativas
-
----
-
-## 🚀 Início Rápido
-
-> O mínimo para rodar!
+## 📦 Installation
 
 ```bash
-npm init -y
-npm install typescript --save-dev
-npx tsc --init
-npm install hightjs react@19 react-dom@19 ts-node
-npm install --save-dev @types/react
-```
-
-Crie um `tsconfig.json` na raiz do projeto:
-
-```json
-{
-  "compilerOptions": {
-    "target": "ES6",
-    "module": "CommonJS",
-    "jsx": "react",
-    "strict": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "./dist",
-    "moduleResolution": "nodenext"
-  },
-  "include": ["src/**/*"]
-}
-```
-
-Estrutura mínima:
-
-```
-src/
-  web/
-    routes/
-      index.tsx
-```
-
-Exemplo de página inicial em `src/web/routes/index.tsx`:
-
-```tsx
-import { RouteConfig } from 'hightjs/client';
-import React from 'react';
-
-function Home() {
-  return <h1>Bem-vindo ao HightJS 🚀</h1>;
-}
-
-export const config: RouteConfig = {
-  pattern: '/',
-  component: Home,
-  generateMetadata: () => ({ title: 'HightJS | Home' })
-};
-export default config;
+npm install hightjs react@19 react-dom@19
 ```
 
-Rode em modo dev:
+## 🚀 Quick Start
 
 ```bash
 npx hight dev
 ```
 
-Acesse: [http://localhost:3000](http://localhost:3000)
+Visit [http://localhost:3000](http://localhost:3000)
 
 ---
 
-## 📚 Documentação
+## 📚 Documentation
 
-Documentação completa disponível na pasta `docs/`:
+For complete documentation, tutorials, and guides, visit:
 
-### Fundamentos
-- [📦 Estrutura Recomendada](./docs/estrutura.md)
-- [🖥️ Rotas Frontend](./docs/rotas-frontend.md)
-- [🌐 Rotas Backend](./docs/rotas-backend.md)
+**[https://docs.hgo.me](https://docs.hgo.me)**
 
-### Recursos Avançados
-- [🛜 WebSocket](./docs/websocket.md)
-- [🧩 Middlewares](./docs/middlewares.md)
-- [🔐 Autenticação](./docs/autenticacao.md)
+Learn about:
+- Getting started
+- Routing (frontend & backend)
+- Authentication
+- Middleware
+- Layouts & Metadata
+- Static export
+- And much more!
 
-### Ferramentas e Configuração
-- [🛠️ CLI](./docs/cli.md)
-- [📂 Arquivos Especiais](./docs/arquivos-especiais.md)
-- [🔌 Integrações](./docs/integracoes.md)
-- [🔐 Segurança Interna](./docs/seguranca.md)
-- [♻️ Hot Reload](./docs/hot-reload.md)
+---
+
+## 💬 Need Help?
 
-### Ajuda
-- [❓ FAQ Rápido](./docs/faq.md)
-- [✅ Checklist Mental](./docs/checklist.md)
+If you have questions or need support, feel free to reach out:
+
+[![Discord](https://img.shields.io/badge/Discord-mulinfrc-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.com/users/1264710048786026588)
+[![Gmail](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:murillofrazaocunha@gmail.com)
+[![Instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://instagram.com/itsmuh_)
+[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/murillo-frazao-cunha)
 
 ---
 
-## 🪪 Licença
+## 🪪 License
 
 Copyright 2025 itsmuzin
 
-Este projeto está licenciado sob a [Licença Apache 2.0](LICENSE).
+This project is licensed under the [Apache License 2.0](../../LICENSE).
 
 ---
 

package/dist/bin/hightjs.js

@@ -18,6 +18,9 @@
  */
 // Registra o ts-node para que o Node.js entenda TypeScript/TSX
 require('ts-node').register();
+// Registra loaders customizados para arquivos markdown, imagens, etc.
+const { registerLoaders } = require('../loaders');
+registerLoaders();
 const { program } = require('commander');
 program
     .version('1.0.0')
@@ -90,14 +93,44 @@ program
     .action((options) => {
     initializeApp(options, false); // Chama a função com dev: false
 });
-// --- Comando EXPORT ---
+/**
+ * Função corrigida para copiar diretórios recursivamente.
+ * Ela agora verifica se um item é um arquivo ou um diretório.
+ */
+function copyDirRecursive(src, dest) {
+    try {
+        // Garante que o diretório de destino exista
+        fs.mkdirSync(dest, { recursive: true });
+        // Usamos { withFileTypes: true } para evitar uma chamada extra de fs.statSync
+        const entries = fs.readdirSync(src, { withFileTypes: true });
+        for (let entry of entries) {
+            const srcPath = path.join(src, entry.name);
+            const destPath = path.join(dest, entry.name);
+            if (entry.isDirectory()) {
+                // Se for um diretório, chama a si mesma (recursão)
+                copyDirRecursive(srcPath, destPath);
+            }
+            else {
+                // Se for um arquivo, apenas copia
+                fs.copyFileSync(srcPath, destPath);
+            }
+        }
+    }
+    catch (error) {
+        console.error(`❌ Erro ao copiar ${src} para ${dest}:`, error);
+        // Lança o erro para parar o processo de exportação se a cópia falhar
+        throw error;
+    }
+}
+// --- INÍCIO DO SEU CÓDIGO (AGORA CORRIGIDO) ---
 program
     .command('export')
     .description('Exports the application as static HTML to the "exported" folder.')
     .option('-o, --output <path>', 'Specifies the output directory', 'exported')
     .action(async (options) => {
     const projectDir = process.cwd();
-    const exportDir = path.join(projectDir, options.output);
+    // Usar path.resolve é mais seguro para garantir um caminho absoluto
+    const exportDir = path.resolve(projectDir, options.output);
     console.log('🚀 Starting export...\n');
     try {
         // 1. Cria a pasta exported (limpa se já existir)
@@ -109,43 +142,36 @@ program
         console.log('✅ Export folder created\n');
         // 2. Inicializa e prepara o build
         console.log('🔨 Building application...');
+        // ATENÇÃO: Ajuste o caminho deste 'require' conforme a estrutura do seu projeto!
         const teste = require("../helpers");
         const app = teste.default({ dev: false, port: 3000, hostname: '0.0.0.0', framework: 'native' });
         await app.prepare();
         console.log('✅ Build complete\n');
-        // 3. Copia a pasta .hight para exported
+        // 3. Copia a pasta .hight para exported (*** CORRIGIDO ***)
         const distDir = path.join(projectDir, '.hight');
         if (fs.existsSync(distDir)) {
             console.log('📦 Copying JavaScript files...');
             const exportDistDir = path.join(exportDir, '.hight');
-            fs.mkdirSync(exportDistDir, { recursive: true });
-            const files = fs.readdirSync(distDir);
-            files.forEach(file => {
-                fs.copyFileSync(path.join(distDir, file), path.join(exportDistDir, file));
-            });
+            // --- Lógica de cópia substituída ---
+            // A função copyDirRecursive agora lida com tudo (arquivos e subpastas)
+            copyDirRecursive(distDir, exportDistDir);
+            // --- Fim da substituição ---
             console.log('✅ JavaScript files copied\n');
         }
-        // 4. Copia a pasta public se existir
+        // 4. Copia a pasta public se existir (*** CORRIGIDO ***)
         const publicDir = path.join(projectDir, 'public');
         if (fs.existsSync(publicDir)) {
             console.log('📁 Copying public files...');
             const exportPublicDir = path.join(exportDir, 'public');
-            function copyRecursive(src, dest) {
-                if (fs.statSync(src).isDirectory()) {
-                    fs.mkdirSync(dest, { recursive: true });
-                    fs.readdirSync(src).forEach(file => {
-                        copyRecursive(path.join(src, file), path.join(dest, file));
-                    });
-                }
-                else {
-                    fs.copyFileSync(src, dest);
-                }
-            }
-            copyRecursive(publicDir, exportPublicDir);
+            // --- Lógica de cópia substituída ---
+            // Reutilizamos a mesma função corrigida
+            copyDirRecursive(publicDir, exportPublicDir);
+            // --- Fim da substituição ---
             console.log('✅ Public files copied\n');
         }
         // 5. Gera o index.html
         console.log('📝 Generating index.html...');
+        // ATENÇÃO: Ajuste os caminhos destes 'requires' conforme a estrutura do seu projeto!
         const { render } = require('../renderer');
         const { loadRoutes, loadLayout, loadNotFound } = require('../router');
         // Carrega as rotas para gerar o HTML
@@ -170,15 +196,17 @@ program
                 params: {},
                 allRoutes: routes
             });
+            const scriptReplaced = html.replace('/_hight/', './.hight/');
             const indexPath = path.join(exportDir, 'index.html');
-            fs.writeFileSync(indexPath, html, 'utf8');
+            fs.writeFileSync(indexPath, scriptReplaced, 'utf8');
             console.log('✅ index.html generated\n');
         }
         console.log('🎉 Export completed successfully!');
         console.log(`📂 Files exported to: ${exportDir}\n`);
     }
     catch (error) {
-        console.error('❌ Error during export:', error.message);
+        // Logar o erro completo (com stack trace) é mais útil
+        console.error('❌ Error during export:', error);
         process.exit(1);
     }
 });

package/dist/builder.js

@@ -212,6 +212,142 @@ if (typeof window !== 'undefined' && window.__HWEB_HMR__) {
         });
     }
 };
+/**
+ * Plugin para suportar importação de arquivos Markdown (.md)
+ */
+const markdownPlugin = {
+    name: 'markdown-plugin',
+    setup(build) {
+        build.onLoad({ filter: /\.md$/ }, async (args) => {
+            const fs = require('fs');
+            const content = await fs.promises.readFile(args.path, 'utf8');
+            return {
+                contents: `export default ${JSON.stringify(content)};`,
+                loader: 'js'
+            };
+        });
+    }
+};
+/**
+ * Plugin para suportar importação de arquivos de imagem e outros assets
+ */
+const assetsPlugin = {
+    name: 'assets-plugin',
+    setup(build) {
+        // Suporte para imagens (PNG, JPG, JPEG, GIF, SVG, WEBP, etc)
+        build.onLoad({ filter: /\.(png|jpe?g|gif|webp|avif|ico|bmp|tiff?)$/i }, async (args) => {
+            const fs = require('fs');
+            const buffer = await fs.promises.readFile(args.path);
+            const base64 = buffer.toString('base64');
+            const ext = path.extname(args.path).slice(1).toLowerCase();
+            // Mapeamento de extensões para MIME types
+            const mimeTypes = {
+                'png': 'image/png',
+                'jpg': 'image/jpeg',
+                'jpeg': 'image/jpeg',
+                'gif': 'image/gif',
+                'webp': 'image/webp',
+                'avif': 'image/avif',
+                'ico': 'image/x-icon',
+                'bmp': 'image/bmp',
+                'tif': 'image/tiff',
+                'tiff': 'image/tiff'
+            };
+            const mimeType = mimeTypes[ext] || 'application/octet-stream';
+            return {
+                contents: `export default "data:${mimeType};base64,${base64}";`,
+                loader: 'js'
+            };
+        });
+        // Suporte especial para SVG (pode ser usado como string ou data URL)
+        build.onLoad({ filter: /\.svg$/i }, async (args) => {
+            const fs = require('fs');
+            const content = await fs.promises.readFile(args.path, 'utf8');
+            const base64 = Buffer.from(content).toString('base64');
+            return {
+                contents: `
+                    export default "data:image/svg+xml;base64,${base64}";
+                    export const svgContent = ${JSON.stringify(content)};
+                `,
+                loader: 'js'
+            };
+        });
+        // Suporte para arquivos JSON
+        build.onLoad({ filter: /\.json$/i }, async (args) => {
+            const fs = require('fs');
+            const content = await fs.promises.readFile(args.path, 'utf8');
+            return {
+                contents: `export default ${content};`,
+                loader: 'js'
+            };
+        });
+        // Suporte para arquivos de texto (.txt)
+        build.onLoad({ filter: /\.txt$/i }, async (args) => {
+            const fs = require('fs');
+            const content = await fs.promises.readFile(args.path, 'utf8');
+            return {
+                contents: `export default ${JSON.stringify(content)};`,
+                loader: 'js'
+            };
+        });
+        // Suporte para arquivos de fonte (WOFF, WOFF2, TTF, OTF, EOT)
+        build.onLoad({ filter: /\.(woff2?|ttf|otf|eot)$/i }, async (args) => {
+            const fs = require('fs');
+            const buffer = await fs.promises.readFile(args.path);
+            const base64 = buffer.toString('base64');
+            const ext = path.extname(args.path).slice(1).toLowerCase();
+            const mimeTypes = {
+                'woff': 'font/woff',
+                'woff2': 'font/woff2',
+                'ttf': 'font/ttf',
+                'otf': 'font/otf',
+                'eot': 'application/vnd.ms-fontobject'
+            };
+            const mimeType = mimeTypes[ext] || 'application/octet-stream';
+            return {
+                contents: `export default "data:${mimeType};base64,${base64}";`,
+                loader: 'js'
+            };
+        });
+        // Suporte para arquivos de áudio (MP3, WAV, OGG, etc)
+        build.onLoad({ filter: /\.(mp3|wav|ogg|m4a|aac|flac)$/i }, async (args) => {
+            const fs = require('fs');
+            const buffer = await fs.promises.readFile(args.path);
+            const base64 = buffer.toString('base64');
+            const ext = path.extname(args.path).slice(1).toLowerCase();
+            const mimeTypes = {
+                'mp3': 'audio/mpeg',
+                'wav': 'audio/wav',
+                'ogg': 'audio/ogg',
+                'm4a': 'audio/mp4',
+                'aac': 'audio/aac',
+                'flac': 'audio/flac'
+            };
+            const mimeType = mimeTypes[ext] || 'audio/mpeg';
+            return {
+                contents: `export default "data:${mimeType};base64,${base64}";`,
+                loader: 'js'
+            };
+        });
+        // Suporte para arquivos de vídeo (MP4, WEBM, OGV)
+        build.onLoad({ filter: /\.(mp4|webm|ogv)$/i }, async (args) => {
+            const fs = require('fs');
+            const buffer = await fs.promises.readFile(args.path);
+            const base64 = buffer.toString('base64');
+            const ext = path.extname(args.path).slice(1).toLowerCase();
+            const mimeTypes = {
+                'mp4': 'video/mp4',
+                'webm': 'video/webm',
+                'ogv': 'video/ogg'
+            };
+            const mimeType = mimeTypes[ext] || 'video/mp4';
+            return {
+                contents: `export default "data:${mimeType};base64,${base64}";`,
+                loader: 'js'
+            };
+        });
+    }
+};
 /**
  * Builds with code splitting into multiple chunks based on module types.
  * @param {string} entryPoint - The path to the entry file.
@@ -232,7 +368,7 @@ async function buildWithChunks(entryPoint, outdir, isProduction = false) {
             outdir: outdir,
             loader: { '.js': 'jsx', '.ts': 'tsx' },
             external: nodeBuiltIns,
-            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin],
+            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, markdownPlugin, assetsPlugin],
             format: 'esm', // ESM suporta melhor o code splitting
             jsx: 'automatic',
             define: {
@@ -293,7 +429,7 @@ async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
             outdir: outdir,
             loader: { '.js': 'jsx', '.ts': 'tsx' },
             external: nodeBuiltIns,
-            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, hmrPlugin, buildCompletePlugin],
+            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, hmrPlugin, buildCompletePlugin, markdownPlugin, assetsPlugin],
             format: 'esm',
             jsx: 'automatic',
             define: {
@@ -337,7 +473,7 @@ async function build(entryPoint, outfile, isProduction = false) {
             outfile: outfile,
             loader: { '.js': 'jsx', '.ts': 'tsx' },
             external: nodeBuiltIns,
-            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin],
+            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, markdownPlugin, assetsPlugin],
             format: 'iife',
             globalName: 'HwebApp',
             jsx: 'automatic',
@@ -399,7 +535,6 @@ async function watch(entryPoint, outfile, hotReloadManager = null) {
             outfile: outfile,
             loader: { '.js': 'jsx', '.ts': 'tsx' },
             external: nodeBuiltIns,
-            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, buildCompletePlugin],
             format: 'iife',
             globalName: 'HwebApp',
             jsx: 'automatic',

package/dist/client/DefaultNotFound.d.ts

@@ -1 +1 @@
-export default function DefaultNotFound(): import("react/jsx-runtime").JSX.Element;
+export default function App(): import("react/jsx-runtime").JSX.Element;

package/dist/client/DefaultNotFound.js

@@ -1,53 +1,79 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = DefaultNotFound;
+exports.default = App;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function DefaultNotFound() {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            fontFamily: 'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-            height: '100vh',
-            textAlign: 'center',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center'
-        }, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
-                        __html: `
-                        body {
-    color: #000;
-    /* Alterado de cor sólida para gradiente */
-    background: linear-gradient(to bottom, #e9e9e9, #ffffff);
-    margin: 0;
-}
+function App() {
+    const globalStyles = `
+        
+        html, body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            box-sizing: border-box;
+        }
 
-.next-error-h1 {
-    border-right: 1px solid rgba(0, 0, 0, .3);
-}
+        *, *:before, *:after {
+            box-sizing: inherit;
+        }
 
-@media (prefers-color-scheme: dark) {
-    body {
-        color: #fff;
-        /* Alterado de cor sólida para gradiente escuro */
-        background: linear-gradient(to bottom, #222, #000);
-    }
+        body {
+            color: #000;
+            background: linear-gradient(to bottom, #e9e9e9, #ffffff);
+            background-attachment: fixed;
+            
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            text-align: center;
+            padding: 20px;
+        }
+        
+        .error-container {
+             /* Remove qualquer estilo de "card" anterior */
+        }
 
-    .next-error-h1 {
-        border-right: 1px solid rgba(255, 255, 255, .3);
-    }
-}
-                    `
-                    } }), (0, jsx_runtime_1.jsx)("h1", { className: "next-error-h1", style: {
-                        display: 'inline-block',
-                        margin: '0px 20px 0px 0px',
-                        padding: '0px 23px 0px 0px',
-                        fontSize: '24px',
-                        fontWeight: '500',
-                        verticalAlign: 'top',
-                        lineHeight: '49px'
-                    }, children: "404" }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'inline-block' }, children: (0, jsx_runtime_1.jsx)("h2", { style: {
-                            fontSize: '14px',
-                            fontWeight: '400',
-                            lineHeight: '49px',
-                            margin: '0px'
-                        }, children: "This page cannot be found." }) })] }) }));
+        .hight-error-h1 {
+            border-right: 1px solid rgba(0, 0, 0, .3);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            body {
+                color: #fff;
+                background: linear-gradient(to bottom, #222, #000);
+            }
+            .hight-error-h2 {
+                color: white;  
+             }
+            .hight-error-h1 {
+                color: white;
+                border-right: 1px solid rgba(255, 255, 255, .3);
+            }
+        }
+    `;
+    // Estilos inline do seu exemplo original
+    const h1Styles = {
+        display: 'inline-block',
+        margin: '0px 20px 0px 0px',
+        padding: '0px 23px 0px 0px',
+        fontSize: '24px',
+        fontWeight: '500',
+        verticalAlign: 'top',
+        lineHeight: '49px'
+    };
+    const h2ContainerStyles = {
+        display: 'inline-block',
+        verticalAlign: 'top', // Alinha com o topo do H1
+    };
+    const h2Styles = {
+        fontSize: '14px',
+        fontWeight: '400',
+        lineHeight: '49px',
+        margin: '0px'
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: globalStyles } }), (0, jsx_runtime_1.jsxs)("div", { className: "error-container", children: [(0, jsx_runtime_1.jsx)("h1", { className: "hight-error-h1", style: h1Styles, children: "404" }), (0, jsx_runtime_1.jsx)("div", { style: h2ContainerStyles, children: (0, jsx_runtime_1.jsx)("h2", { style: h2Styles, className: "hight-error-h2", children: "This page cannot be found." }) })] })] }));
 }

package/dist/client/client.d.ts

@@ -0,0 +1,3 @@
+export { Link } from '../components/Link';
+export { RouteConfig, Metadata } from "../types";
+export { router } from './clientRouter';