hightjs 0.3.4 → 0.3.5

package/example/src/web/layout.tsx

@@ -8,11 +8,65 @@ interface LayoutProps {
     children: React.ReactNode;
 }
 
-// Metadata exportada (similar ao Next.js)
+
 export const metadata: Metadata = {
-    title: "Hight JS",
-    description: "O framework web mais rápido e simples para React!",
+    // --- Informações Básicas ---
+    // Título otimizado para abas do navegador e resultados de busca
+    title: "Hight JS | O Framework Web Rápido e Simples para React",
+    description: "O framework web mais rápido e simples para React! Comece a construir aplicações web performáticas hoje mesmo com Hight JS.",
+    keywords: ["Hight JS", "framework web", "React", "JavaScript", "TypeScript", "desenvolvimento web", "rápido", "simples", "SSR", "frontend"],
+    author: "Hight JS Team",
     favicon: "/favicon.ico",
+
+    // --- Mobile e Viewport ---
+    // Essencial para design responsivo e boa pontuação no mobile
+    viewport: "width=device-width, initial-scale=1.0",
+    // Cor da barra de navegação em browsers mobile (ex: Chrome no Android)
+    themeColor: "#0A0A0A", // Sugestão de cor escura, ajuste conforme sua marca
+
+    // --- SEO ---
+    // URL principal do site para evitar conteúdo duplicado
+    canonical: "https://hightjs.com", // Substitua pelo seu domínio real
+    // Instruções para robôs de busca (Google, Bing, etc.)
+    robots: "index, follow",
+
+    // --- Open Graph (para Redes Sociais como Facebook, LinkedIn, Discord) ---
+    openGraph: {
+        title: "Hight JS | O Framework Web Rápido e Simples para React",
+        description: "Descubra o Hight JS, o framework web focado em performance e simplicidade para suas aplicações React.",
+        type: "website",
+        url: "https://hightjs.com", // Seu domínio real
+        // URL de uma imagem de preview (idealmente 1200x630px)
+        image: "https://hightjs.com/og-image.png",
+        siteName: "Hight JS",
+        locale: "pt_BR",
+    },
+
+    // --- Twitter Card (para compartilhamento no Twitter) ---
+    twitter: {
+        card: "summary_large_image", // Mostra uma imagem grande no tweet
+        site: "@hightjs_team", // Handle do Twitter do projeto (exemplo)
+        creator: "@seu_criador", // Handle do Twitter do criador (exemplo)
+        title: "Hight JS | O Framework Web Rápido e Simples para React",
+        description: "Cansado de complexidade? Conheça o Hight JS e construa sites React mais rápidos e leves.",
+        // Imagem específica para Twitter (ou pode reusar a 'og-image')
+        image: "https://hightjs.com/twitter-image.png",
+        imageAlt: "Logo e slogan do framework Hight JS",
+    },
+
+    // --- Ícones e Manifest (PWA) ---
+    // Ícone para dispositivos Apple (quando salvo na tela inicial)
+    appleTouchIcon: "/apple-touch-icon.png", // (ex: 180x180px)
+    // Link para o manifest de PWA (Progressive Web App)
+    manifest: "/site.webmanifest",
+
+    // --- Outros ---
+    language: "pt-BR", // Define o idioma principal da página
+    charset: "UTF-8",  // Define o charset (embora geralmente setado no HTML)
+    other: {
+        // Tag útil para compatibilidade com navegadores legados (Edge/IE)
+        "X-UA-Compatible": "IE=edge"
+    }
 };
 
 export default function Layout({ children }: LayoutProps) {

package/example/src/web/routes/index.tsx

@@ -21,7 +21,7 @@ function Home() {
                     {status === 'loading' && <p>Carregando...</p>}
                     {status === 'authenticated' && session?.user && (
                         <>
-                            <p className="text-lg">Você está logado como <span className="font-bold text-purple-400">{session.user.name}</span> !!!</p>
+                            <p className="text-lg">Você está logado como <span className="font-bold text-purple-400">{session.user.name}</span>!</p>
                             <button
                                 onClick={() => signOut({callbackUrl: '/'})}
                                 className="rounded-full border border-solid border-transparent transition-all duration-300 flex items-center justify-center bg-purple-600 text-white gap-2 hover:bg-purple-500 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-40 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)]"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hightjs",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "HightJS is a high-level framework for building web applications with ease and speed. It provides a robust set of tools and features to streamline development and enhance productivity.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/api/console.ts

@@ -202,7 +202,9 @@ export default class Console {
     }
 
     static logWithout(level: Levels, colors?:Colors, ...args: any[]): void {
-        const color = colors || level === Levels.ERROR ? Colors.BgRed : level === Levels.WARN ? Colors.BgYellow : level === Levels.INFO ? Colors.BgMagenta : level === Levels.SUCCESS ? Colors.BgGreen : Colors.BgCyan;
+
+        const color = colors ? colors :  level === Levels.ERROR ? Colors.BgRed : level === Levels.WARN ? Colors.BgYellow : level === Levels.INFO ? Colors.BgMagenta : level === Levels.SUCCESS ? Colors.BgGreen : Colors.BgCyan;
+
         let output = "";
         for (const arg of args) {
             let msg = (arg instanceof Error) ? arg.stack : (typeof arg === 'string') ? arg : JSON.stringify(arg, null, 2);

package/src/bin/hightjs.js

@@ -133,11 +133,11 @@ program
             await app.prepare();
             console.log('✅ Build complete\n');
 
-            // 3. Copia a pasta hweb-dist para exported
-            const distDir = path.join(projectDir, 'hweb-dist');
+            // 3. Copia a pasta .hight para exported
+            const distDir = path.join(projectDir, '.hight');
             if (fs.existsSync(distDir)) {
                 console.log('📦 Copying JavaScript files...');
-                const exportDistDir = path.join(exportDir, 'hweb-dist');
+                const exportDistDir = path.join(exportDir, '.hight');
                 fs.mkdirSync(exportDistDir, { recursive: true });
 
                 const files = fs.readdirSync(distDir);

package/src/client/entry.client.tsx

@@ -153,6 +153,7 @@ const DEV_INDICATOR_CORNERS = [
 function DevIndicator() {
     const [corner, setCorner] = useState(3); // Canto atual (0-3)
     const [isDragging, setIsDragging] = useState(false); // Estado de arrastar
+    const [isBuilding, setIsBuilding] = useState(false); // Estado de build
 
     // Posição visual do indicador durante o arraste
     const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
@@ -160,6 +161,49 @@ function DevIndicator() {
     const indicatorRef = useRef<HTMLDivElement>(null);
     const dragStartRef = useRef<{ x: number; y: number; moved: boolean } | null>(null);
 
+    // Escuta eventos de hot reload para mostrar estado de build
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const handleHotReloadMessage = (event: MessageEvent) => {
+            try {
+                const message = JSON.parse(event.data);
+
+                // Quando detecta mudança em arquivo, ativa loading
+                if (message.type === 'frontend-reload' ||
+                    message.type === 'backend-api-reload' ||
+                    message.type === 'src-reload') {
+                    setIsBuilding(true);
+                }
+
+                // Quando o build termina ou servidor fica pronto, desativa loading
+                if (message.type === 'server-ready' || message.type === 'build-complete') {
+                    setIsBuilding(false);
+                }
+            } catch (e) {
+                // Ignora mensagens que não são JSON
+            }
+        };
+
+        // Intercepta mensagens WebSocket
+        const originalWebSocket = window.WebSocket;
+        window.WebSocket = class extends originalWebSocket {
+            constructor(url: string | URL, protocols?: string | string[]) {
+                super(url, protocols);
+
+                this.addEventListener('message', (event) => {
+                    if (url.toString().includes('hweb-hotreload')) {
+                        handleHotReloadMessage(event);
+                    }
+                });
+            }
+        } as any;
+
+        return () => {
+            window.WebSocket = originalWebSocket;
+        };
+    }, []);
+
     // --- Estilos Dinâmicos ---
     const getIndicatorStyle = (): React.CSSProperties => {
         const baseStyle: React.CSSProperties = {
@@ -168,17 +212,22 @@ function DevIndicator() {
             width: DEV_INDICATOR_SIZE,
             height: DEV_INDICATOR_SIZE,
             borderRadius: '50%',
-            background: 'linear-gradient(135deg, #8e2de2, #4a00e0)', // Gradiente Roxo
+            background: isBuilding
+                ? 'linear-gradient(135deg, #f093fb, #f5576c)' // Gradiente Rosa/Vermelho quando building
+                : 'linear-gradient(135deg, #8e2de2, #4a00e0)', // Gradiente Roxo normal
             color: 'white',
             fontWeight: 'bold',
             fontSize: 28,
-            boxShadow: '0 4px 15px rgba(0,0,0,0.2)',
+            boxShadow: isBuilding
+                ? '0 4px 25px rgba(245, 87, 108, 0.6)' // Shadow mais forte quando building
+                : '0 4px 15px rgba(0,0,0,0.2)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             cursor: isDragging ? 'grabbing' : 'grab',
             userSelect: 'none',
-            transition: isDragging ? 'none' : 'all 0.3s ease-out', // Animação suave ao soltar
+            transition: isDragging ? 'none' : 'all 0.3s ease-out',
+            animation: isBuilding ? 'hweb-pulse 1.5s ease-in-out infinite' : 'none',
         };
 
         if (isDragging) {
@@ -272,19 +321,85 @@ function DevIndicator() {
 
 
     return (
-        <div ref={indicatorRef} style={getIndicatorStyle()} onMouseDown={handleMouseDown} title="Modo Dev HightJS">
-            H
-        </div>
+        <>
+            <style>
+                {`
+                    @keyframes hweb-pulse {
+                        0%, 100% {
+                            transform: scale(1);
+                            opacity: 1;
+                        }
+                        50% {
+                            transform: scale(1.1);
+                            opacity: 0.8;
+                        }
+                    }
+                    
+                    @keyframes hweb-spin {
+                        from {
+                            transform: rotate(0deg);
+                        }
+                        to {
+                            transform: rotate(360deg);
+                        }
+                    }
+                `}
+            </style>
+            <div
+                ref={indicatorRef}
+                style={getIndicatorStyle()}
+                onMouseDown={handleMouseDown}
+                title={isBuilding ? "Building..." : "Modo Dev HightJS"}
+            >
+                {isBuilding ? (
+                    <span style={{ animation: 'hweb-spin 1s linear infinite' }}>⟳</span>
+                ) : (
+                    'H'
+                )}
+            </div>
+        </>
     );
 }
 
 // --- Inicialização do Cliente (CSR - Client-Side Rendering) ---
 
+function deobfuscateData(obfuscated: string): any {
+    try {
+        // Remove o hash fake
+        const parts = obfuscated.split('.');
+        const base64 = parts.length > 1 ? parts[1] : parts[0];
+
+        // Decodifica base64
+        const jsonStr = atob(base64);
+
+        // Parse JSON
+        return JSON.parse(jsonStr);
+    } catch (error) {
+        console.error('[hweb] Failed to decode data:', error);
+        return null;
+    }
+}
+
 function initializeClient() {
-    const initialData = (window as any).__HWEB_INITIAL_DATA__;
+    // Lê os dados do atributo data-h
+    const dataElement = document.getElementById('__hight_data__');
+
+    if (!dataElement) {
+        console.error('[hweb] Initial data script not found.');
+        return;
+    }
+
+    const obfuscated = dataElement.getAttribute('data-h');
+
+    if (!obfuscated) {
+        console.error('[hweb] Data attribute not found.');
+        return;
+    }
+
+    const initialData = deobfuscateData(obfuscated);
 
     if (!initialData) {
-        console.error('[hweb] Initial data not found on page.');
+        console.error('[hweb] Failed to parse initial data.');
         return;
     }
 

package/src/helpers.ts

@@ -112,6 +112,7 @@ async function loadHightConfig(projectDir: string, phase: string): Promise<Hight
         serverTimeout: 35000,
         individualRequestTimeout: 30000,
         maxUrlLength: 2048,
+        accessLogging: true,
     };
 
     try {
@@ -265,6 +266,10 @@ async function initNativeServer(hwebApp: HWebApp, options: HightJSOptions, port:
     // Extraímos a lógica principal para uma variável
     // para que possa ser usada tanto pelo servidor HTTP quanto HTTPS.
     const requestListener = async (req: HWebIncomingMessage, res: ServerResponse) => {
+        const requestStartTime = Date.now();
+        const method = req.method || 'GET';
+        const url = req.url || '/';
+
         // Configurações de segurança básicas
         res.setHeader('X-Content-Type-Options', 'nosniff');
         res.setHeader('X-Frame-Options', 'DENY');
@@ -281,11 +286,44 @@ async function initNativeServer(hwebApp: HWebApp, options: HightJSOptions, port:
         req.setTimeout(hightConfig.individualRequestTimeout || 30000, () => {
             res.statusCode = 408; // Request Timeout
             res.end('Request timeout');
+
+            // Log de timeout
+            if (hightConfig.accessLogging) {
+                const duration = Date.now() - requestStartTime;
+                Console.info(`${Colors.FgYellow}${method}${Colors.Reset} ${url} ${Colors.FgRed}408${Colors.Reset} ${Colors.FgGray}${duration}ms${Colors.Reset}`);
+            }
         });
 
+        // Intercepta o método end() para logar quando a resposta for enviada
+        const originalEnd = res.end.bind(res);
+        let hasEnded = false;
+
+        res.end = function(this: ServerResponse, ...args: any[]): any {
+            if (!hasEnded && hightConfig.accessLogging) {
+                hasEnded = true;
+                const duration = Date.now() - requestStartTime;
+                const statusCode = res.statusCode || 200;
+
+                // Define cor baseada no status code
+                let statusColor = Colors.FgGreen; // 2xx
+                if (statusCode >= 500) statusColor = Colors.FgRed; // 5xx
+                else if (statusCode >= 400) statusColor = Colors.FgYellow; // 4xx
+                else if (statusCode >= 300) statusColor = Colors.FgCyan; // 3xx
+
+                // Formata o método com cor
+                let methodColor = Colors.BgCyan;
+                if (method === 'POST') methodColor = Colors.BgGreen;
+                else if (method === 'PUT') methodColor = Colors.BgYellow;
+                else if (method === 'DELETE') methodColor = Colors.BgRed;
+                else if (method === 'PATCH') methodColor = Colors.BgMagenta;
+                Console.logCustomLevel(method, true, methodColor, `${url} ${statusColor}${statusCode}${Colors.Reset} ${Colors.FgGray}${duration}ms${Colors.Reset}`);
+            }
+            // @ts-ignore
+            return originalEnd.apply(this, args);
+        } as any;
+
         try {
             // Validação básica de URL (usa configuração personalizada)
-            const url = req.url || '/';
             const maxUrlLength = hightConfig.maxUrlLength || 2048;
             if (url.length > maxUrlLength) {
                 res.statusCode = 414; // URI Too Long

package/src/hotReload.ts

@@ -327,19 +327,21 @@ export class HotReloadManager {
             if (typeof window !== 'undefined') {
                 let ws;
                 let reconnectAttempts = 0;
-                let maxReconnectInterval = 30000; // 30 segundos max
-                let reconnectInterval = 1000; // Começa com 1 segundo
+                let maxReconnectInterval = 30000; 
+                let reconnectInterval = 1000;
                 let reconnectTimer;
                 let isConnected = false;
                 
                 function connect() {
-                    // Evita múltiplas tentativas simultâneas
+                    const url = window.location; // Objeto com info da URL atual
+                    const protocol = url.protocol === "https:" ? "wss:" : "ws:"; // Usa wss se for https
+                    const wsUrl = protocol + '//' + url.host + '/hweb-hotreload/';
                     if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) {
                         return;
                     }
 
                     try {
-                        ws = new WebSocket('ws://localhost:3000/hweb-hotreload/');
+                        ws = new WebSocket(wsUrl);
                         
                         ws.onopen = function() {
                             console.log('🔌 Hot-reload connected');
@@ -476,5 +478,12 @@ export class HotReloadManager {
             this.buildCompleteResolve = null;
         }
         this.isBuilding = false;
+
+        // Notifica os clientes que o build terminou
+        if (success) {
+            this.notifyClients('build-complete', { success: true });
+        } else {
+            this.notifyClients('build-error', { success: false });
+        }
     }
 }

package/src/index.ts

@@ -289,7 +289,7 @@ export default function hweb(options: HightJSOptions) {
 
             const notFound = loadNotFound(userWebDir);
 
-            const outDir = path.join(dir, 'hweb-dist');
+            const outDir = path.join(dir, '.hight');
             fs.mkdirSync(outDir, {recursive: true});
 
             entryPoint = createEntryFile(dir, frontendRoutes);
@@ -317,6 +317,11 @@ export default function hweb(options: HightJSOptions) {
                 time.update(""); // limpa a linha
                 time.end(`  ${Colors.BgGreen} build ${Colors.Reset}    Client build completed in ${elapsed}ms`);
 
+                // Notifica o hot reload manager que o build foi concluído
+                if (hotReloadManager) {
+                    hotReloadManager.onBuildComplete(true);
+                }
+
             } else {
                 const time = Console.dynamicLine(`  ${Colors.BgYellow} watcher ${Colors.Reset}  Starting client watch`);
                 watchWithChunks(entryPoint, outDir, hotReloadManager!).catch(err => {
@@ -373,7 +378,7 @@ export default function hweb(options: HightJSOptions) {
                 }
 
                 // 2. Primeiro verifica se é um arquivo estático da pasta public
-                if (pathname !== '/' && !pathname.startsWith('/api/') && !pathname.startsWith('/hweb-')) {
+                if (pathname !== '/' && !pathname.startsWith('/api/') && !pathname.startsWith('/.hight')) {
                     const publicDir = path.join(dir, 'public');
                     const filePath = path.join(publicDir, pathname);
 
@@ -417,12 +422,14 @@ export default function hweb(options: HightJSOptions) {
                     }
                 }
 
-                // 3. Verifica se é um arquivo estático do hweb-dist
-                if (pathname.startsWith('/hweb-dist/')) {
-                    const staticPath = path.join(dir, 'hweb-dist');
-                    const filePath = path.join(staticPath, pathname.replace('/hweb-dist/', ''));
+                // 3. Verifica se é um arquivo estático do .hight
+                if (pathname.startsWith('/_hight/')) {
+
+                    const staticPath = path.join(dir, '.hight');
+                    const filePath = path.join(staticPath, pathname.replace('/_hight/', ''));
 
                     if (fs.existsSync(filePath)) {
+
                         const ext = path.extname(filePath).toLowerCase();
                         const contentTypes: Record<string, string> = {
                             '.js': 'application/javascript',

package/src/renderer.tsx

@@ -21,19 +21,128 @@ import type { GenericRequest } from './types/framework';
 import fs from 'fs';
 import path from 'path';
 
-// Funções para codificar/decodificar dados (disfarça o JSON no HTML)
-function encodeInitialData(data: any): string {
-    // Converte para JSON, depois para base64, e adiciona um prefixo fake
+// Função para gerar todas as meta tags
+function generateMetaTags(metadata: Metadata): string {
+    const tags: string[] = [];
+
+    // Charset
+    tags.push(`<meta charset="${metadata.charset || 'UTF-8'}">`);
+
+    // Viewport
+    tags.push(`<meta name="viewport" content="${metadata.viewport || 'width=device-width, initial-scale=1.0'}">`);
+
+    // Description
+    if (metadata.description) {
+        tags.push(`<meta name="description" content="${metadata.description}">`);
+    }
+
+    // Keywords
+    if (metadata.keywords) {
+        const keywordsStr = Array.isArray(metadata.keywords)
+            ? metadata.keywords.join(', ')
+            : metadata.keywords;
+        tags.push(`<meta name="keywords" content="${keywordsStr}">`);
+    }
+
+    // Author
+    if (metadata.author) {
+        tags.push(`<meta name="author" content="${metadata.author}">`);
+    }
+
+    // Theme color
+    if (metadata.themeColor) {
+        tags.push(`<meta name="theme-color" content="${metadata.themeColor}">`);
+    }
+
+    // Robots
+    if (metadata.robots) {
+        tags.push(`<meta name="robots" content="${metadata.robots}">`);
+    }
+
+    // Canonical
+    if (metadata.canonical) {
+        tags.push(`<link rel="canonical" href="${metadata.canonical}">`);
+    }
+
+    // Favicon
+    if (metadata.favicon) {
+        tags.push(`<link rel="icon" href="${metadata.favicon}">`);
+    }
+
+    // Apple Touch Icon
+    if (metadata.appleTouchIcon) {
+        tags.push(`<link rel="apple-touch-icon" href="${metadata.appleTouchIcon}">`);
+    }
+
+    // Manifest
+    if (metadata.manifest) {
+        tags.push(`<link rel="manifest" href="${metadata.manifest}">`);
+    }
+
+    // Open Graph
+    if (metadata.openGraph) {
+        const og = metadata.openGraph;
+        if (og.title) tags.push(`<meta property="og:title" content="${og.title}">`);
+        if (og.description) tags.push(`<meta property="og:description" content="${og.description}">`);
+        if (og.type) tags.push(`<meta property="og:type" content="${og.type}">`);
+        if (og.url) tags.push(`<meta property="og:url" content="${og.url}">`);
+        if (og.siteName) tags.push(`<meta property="og:site_name" content="${og.siteName}">`);
+        if (og.locale) tags.push(`<meta property="og:locale" content="${og.locale}">`);
+
+        if (og.image) {
+            if (typeof og.image === 'string') {
+                tags.push(`<meta property="og:image" content="${og.image}">`);
+            } else {
+                tags.push(`<meta property="og:image" content="${og.image.url}">`);
+                if (og.image.width) tags.push(`<meta property="og:image:width" content="${og.image.width}">`);
+                if (og.image.height) tags.push(`<meta property="og:image:height" content="${og.image.height}">`);
+                if (og.image.alt) tags.push(`<meta property="og:image:alt" content="${og.image.alt}">`);
+            }
+        }
+    }
+
+    // Twitter Card
+    if (metadata.twitter) {
+        const tw = metadata.twitter;
+        if (tw.card) tags.push(`<meta name="twitter:card" content="${tw.card}">`);
+        if (tw.site) tags.push(`<meta name="twitter:site" content="${tw.site}">`);
+        if (tw.creator) tags.push(`<meta name="twitter:creator" content="${tw.creator}">`);
+        if (tw.title) tags.push(`<meta name="twitter:title" content="${tw.title}">`);
+        if (tw.description) tags.push(`<meta name="twitter:description" content="${tw.description}">`);
+        if (tw.image) tags.push(`<meta name="twitter:image" content="${tw.image}">`);
+        if (tw.imageAlt) tags.push(`<meta name="twitter:image:alt" content="${tw.imageAlt}">`);
+    }
+
+    // Custom meta tags
+    if (metadata.other) {
+        for (const [key, value] of Object.entries(metadata.other)) {
+            tags.push(`<meta name="${key}" content="${value}">`);
+        }
+    }
+
+    return tags.join('\n');
+}
+
+// Função para ofuscar dados (não é criptografia, apenas ofuscação)
+function obfuscateData(data: any): string {
+    // 1. Serializa para JSON minificado
     const jsonStr = JSON.stringify(data);
+
+    // 2. Converte para base64
     const base64 = Buffer.from(jsonStr).toString('base64');
-    return `hweb_${base64}_config`;
+
+    // 3. Adiciona um hash fake no início para parecer um token
+    const hash = Buffer.from(Date.now().toString()).toString('base64').substring(0, 8);
+
+    return `${hash}.${base64}`;
 }
 
-function createDecodeScript(): string {
-    return `
-    
-    window.__HWEB_DECODE__ = function(encoded) { const base64 = encoded.replace('hweb_', '').replace('_config', ''); const jsonStr = atob(base64); return JSON.parse(jsonStr); };
-    `;
+// Função para criar script ofuscado
+function createInitialDataScript(data: any): string {
+    const obfuscated = obfuscateData(data);
+
+    // Usa um atributo data-* ao invés de JSON visível
+    return `<script id="__hight_data__" type="text/plain" data-h="${obfuscated}"></script>`;
 }
 
 // Interface para opções de renderização apenas do cliente
@@ -74,27 +183,42 @@ export async function render({ req, route, params, allRoutes }: RenderOptions):
         initialParams: params,
     };
 
-    // Codifica os dados para disfarçar
-    const encodedData = encodeInitialData(initialData);
+    // Cria script JSON limpo
+    const initialDataScript = createInitialDataScript(initialData);
 
     // Script de hot reload apenas em desenvolvimento
     const hotReloadScript = !isProduction && hotReloadManager
         ? hotReloadManager.getClientScript()
         : '';
 
-    const favicon = metadata.favicon ? `<link rel="icon" href="${metadata.favicon}">` : '';
+    // Gera todas as meta tags
+    const metaTags = generateMetaTags(metadata);
 
     // Determina quais arquivos JavaScript carregar
     const jsFiles = getJavaScriptFiles(req);
 
+    const htmlLang = metadata.language || 'pt-BR';
+
     // HTML base sem SSR - apenas o container e scripts para client-side rendering
-    return `<!DOCTYPE html><html lang="pt-BR"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>${metadata.title || 'App hweb'}</title>${metadata.description ? `<meta name="description" content="${metadata.description}">` : ''}${favicon}</head><body><div id="root"></div><script>${createDecodeScript()}window.__HWEB_INITIAL_DATA__ = window.__HWEB_DECODE__('${encodedData}');</script>${jsFiles}${hotReloadScript}</body></html>`;
+    return `<!DOCTYPE html>
+<html lang="${htmlLang}">
+<head>
+${metaTags}
+<title>${metadata.title || 'App hweb'}</title>
+</head>
+<body>
+<div id="root"></div>
+${initialDataScript}
+${jsFiles}
+${hotReloadScript}
+</body>
+</html>`;
 }
 
 // Função para determinar quais arquivos JavaScript carregar
 function getJavaScriptFiles(req: GenericRequest): string {
     const projectDir = process.cwd();
-    const distDir = path.join(projectDir, 'hweb-dist');
+    const distDir = path.join(projectDir, '.hight');
 
     try {
         // Verifica se existe um manifesto de chunks (gerado pelo ESBuild com splitting)
@@ -105,7 +229,7 @@ function getJavaScriptFiles(req: GenericRequest): string {
             const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
             const scripts = Object.values(manifest)
                 .filter((file: any) => file.endsWith('.js'))
-                .map((file: any) => `<script src="/hweb-dist/${file}"></script>`)
+                .map((file: any) => `<script src="/_hight/${file}"></script>`)
                 .join('');
             return scripts;
         } else {
@@ -125,15 +249,15 @@ function getJavaScriptFiles(req: GenericRequest): string {
             if (jsFiles.length >= 1) {
                 // Modo chunks sem manifesto
                 return jsFiles
-                    .map(file => `<script src="/hweb-dist/${file}"></script>`)
+                    .map(file => `<script src="/_hight/${file}"></script>`)
                     .join('');
             } else {
                 // Modo tradicional - único arquivo
-                return '<script src="/hweb-dist/main.js"></script>';
+                return '<script src="/_hight/main.js"></script>';
             }
         }
     } catch (error) {
         // Fallback para o modo tradicional
-        return '<script src="/hweb-dist/main.js"></script>';
+        return '<script src="/_hight/main.js"></script>';
     }
 }