vatts 1.2.2 → 1.2.3

package/dist/hotReload.js

@@ -291,7 +291,8 @@ class HotReloadManager {
             filePath.includes('not-found.tsx') ||
             filePath.endsWith('.tsx') ||
             filePath.endsWith(".ts") ||
-            filePath.endsWith(".vue");
+            filePath.endsWith(".vue") ||
+            filePath.endsWith(".css");
         const isBackendFile = filePath.includes(path.join('src', 'backend')) && !isFrontendFile;
         (0, router_1.clearFileCache)(filePath);
         this.clearBackendCache(filePath);

package/dist/react/BuildingPage.js

@@ -31,11 +31,13 @@ function BuildingScreen() {
         :root {
             --bg-solid: #000000;
             --card-bg: #0a0a0a;
-            /* PALETA: Monocromática estilo Next.js */
+            /* PALETA: React Theme */
+            --react-cyan: #61DAFB;      /* O azul/ciano clássico do React */
+            --react-dark: #20232a;      /* Fundo escuro azulado */
             --primary: #ffffff;
-            --primary-glow: rgba(255, 255, 255, 0.1);
+            --primary-glow: rgba(97, 218, 251, 0.1);
             --text-main: #ffffff;
-            --text-muted: #64748b;
+            --text-muted: #8ea9c7;      /* Cinza azulado para combinar */
         }
 
         body {
@@ -68,8 +70,8 @@ function BuildingScreen() {
             width: 100%;
             max-width: 420px;
             background: var(--card-bg);
-            /* Borda sutil em cinza escuro */
-            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
+            /* Borda sutil com brilho React Cyan */
+            box-shadow: 0 0 0 1px rgba(97, 218, 251, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
             border-radius: 20px;
             overflow: hidden;
             display: flex;
@@ -81,9 +83,9 @@ function BuildingScreen() {
         .neon-line {
             height: 1px;
             width: 100%;
-            /* Linha de luz branca/cinza */
-            background: linear-gradient(90deg, transparent, #334155, #ffffff, #334155, transparent);
-            box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
+            /* Linha de luz: Gradiente usando o Cyan */
+            background: linear-gradient(90deg, transparent, var(--react-dark), var(--react-cyan), var(--react-dark), transparent);
+            box-shadow: 0 0 15px rgba(97, 218, 251, 0.2);
         }
 
         .content {
@@ -106,8 +108,8 @@ function BuildingScreen() {
             object-fit: contain;
             position: relative;
             z-index: 2;
-            /* Deixa a logo levemente dessaturada para combinar */
-            filter: grayscale(0.5);
+            /* Removi o grayscale para a logo brilhar na cor natural se tiver cor, ou ficar nítida */
+            filter: none;
         }
 
         .logo-glow {
@@ -117,9 +119,10 @@ function BuildingScreen() {
             transform: translate(-50%, -50%);
             width: 100%;
             height: 100%;
-            background: #ffffff;
+            /* Glow Cyan do React */
+            background: var(--react-cyan);
             filter: blur(25px);
-            opacity: 0.1;
+            opacity: 0.2;
             border-radius: 50%;
             animation: pulse 2s ease-in-out infinite;
         }
@@ -129,14 +132,16 @@ function BuildingScreen() {
             font-size: 2rem;
             font-weight: 800;
             letter-spacing: -0.03em;
-            background: linear-gradient(180deg, #ffffff 0%, #475569 100%);
+            /* Gradiente do texto: Branco para Cyan */
+            background: linear-gradient(180deg, #ffffff 0%, var(--react-cyan) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
 
         h1 span {
-            color: #475569;
-            -webkit-text-fill-color: #475569;
+            /* Span .js em Cyan Sólido */
+            color: var(--react-cyan);
+            -webkit-text-fill-color: var(--react-cyan);
         }
 
         p {
@@ -148,14 +153,14 @@ function BuildingScreen() {
 
         .terminal-box {
             width: 100%;
-            background: rgba(255, 255, 255, 0.02);
-            border: 1px solid rgba(255, 255, 255, 0.08);
+            background: rgba(97, 218, 251, 0.03); /* Fundo azulado bem sutil */
+            border: 1px solid rgba(97, 218, 251, 0.1); /* Borda ciano sutil */
             border-radius: 12px;
             padding: 16px;
             text-align: left;
             font-family: 'JetBrains Mono', monospace;
             font-size: 0.75rem;
-            color: #475569;
+            color: var(--text-muted);
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
@@ -171,25 +176,25 @@ function BuildingScreen() {
         .term-spinner {
             width: 10px;
             height: 10px;
-            border: 2px solid rgba(255, 255, 255, 0.1);
-            border-top-color: #ffffff;
+            border: 2px solid rgba(97, 218, 251, 0.1);
+            border-top-color: var(--react-cyan); /* Spinner Cyan */
             border-radius: 50%;
             animation: spin 0.6s linear infinite;
         }
 
-        .file-name { color: #94a3b8; }
-        .accent { color: #ffffff; }
+        .file-name { color: #8ea9c7; }
+        .accent { color: var(--react-cyan); }
 
         .card-footer {
             width: 100%;
             padding: 12px 32px;
-            background: rgba(255,255,255,0.02);
-            border-top: 1px solid rgba(255,255,255,0.05);
+            background: rgba(97, 218, 251, 0.02);
+            border-top: 1px solid rgba(97, 218, 251, 0.05);
             display: flex;
             justify-content: space-between;
             align-items: center;
             font-size: 11px;
-            color: rgba(255,255,255,0.2);
+            color: rgba(255,255,255,0.3);
             box-sizing: border-box;
         }
 
@@ -197,7 +202,7 @@ function BuildingScreen() {
             display: flex;
             align-items: center;
             gap: 6px;
-            color: #ffffff;
+            color: var(--react-cyan);
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 0.05em;
@@ -206,14 +211,14 @@ function BuildingScreen() {
         .dot {
             width: 6px;
             height: 6px;
-            background-color: #ffffff;
+            background-color: var(--react-cyan);
             border-radius: 50%;
-            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 8px var(--react-cyan);
         }
 
         @keyframes pulse {
-            0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
-            50% { opacity: 0.15; transform: translate(-50%, -50%) scale(1.1); }
+            0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
+            50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.1); }
         }
 
         @keyframes spin {
@@ -249,7 +254,7 @@ function BuildingScreen() {
                                     react_1.default.createElement("span", { className: "accent" }, "src/vatts.ts"),
                                     "...")),
                             react_1.default.createElement("div", { className: "term-line", style: { opacity: 0.5 } },
-                                react_1.default.createElement("span", null, "\u2713"),
+                                react_1.default.createElement("span", { style: { color: "var(--react-cyan)" } }, "\u2713"),
                                 react_1.default.createElement("span", { className: "file-name" }, "Optimizing assets")))),
                     react_1.default.createElement("div", { className: "card-footer" },
                         react_1.default.createElement("span", null, "Building..."),

package/dist/react/DefaultNotFound.js

@@ -60,6 +60,14 @@ function ErrorPage() {
             setPath(window.location.pathname);
         }
     }, []);
+    // --- CORES DO TEMA REACT ---
+    const theme = {
+        cyan: '#61DAFB', // React Blue/Cyan
+        dark: '#20232a', // React Dark BG Accent
+        textMuted: '#8ea9c7', // Azul acinzentado
+        bg: '#000000',
+        cardBg: '#0a0a0a'
+    };
     // --- GLOBAL STYLES ---
     const globalStyles = `
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap');
@@ -67,7 +75,7 @@ function ErrorPage() {
         body {
             margin: 0;
             padding: 0;
-            background-color: #000000; 
+            background-color: ${theme.bg}; 
             color: #ffffff;
             font-family: 'Inter', system-ui, sans-serif;
             overflow: hidden;
@@ -78,10 +86,6 @@ function ErrorPage() {
         * { box-sizing: border-box; }
     `;
     // --- INLINE STYLES ---
-    // Paleta Estilo Next.js (Preto, Branco, Cinza)
-    const primaryColor = '#ffffff';
-    const primaryColorDark = '#64748b';
-    const primaryRgb = '255, 255, 255';
     const containerStyle = {
         position: 'fixed',
         top: 0,
@@ -95,15 +99,15 @@ function ErrorPage() {
         justifyContent: 'center',
         width: '100vw',
         height: '100vh',
-        background: '#000000',
+        background: theme.bg,
     };
     const cardStyle = {
         width: 'min(90%, 500px)',
         display: 'flex',
         flexDirection: 'column',
-        background: '#0a0a0a',
-        // Borda sutil branca/cinza
-        boxShadow: `0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9)`,
+        background: theme.cardBg,
+        // Borda sutil com brilho Cyan
+        boxShadow: `0 0 0 1px rgba(97, 218, 251, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9)`,
         borderRadius: 20,
         overflow: 'hidden',
         position: 'relative',
@@ -111,10 +115,10 @@ function ErrorPage() {
     const neonLine = {
         height: '1px',
         width: '100%',
-        // Gradiente monocromático
-        background: `linear-gradient(90deg, transparent, #334155, #ffffff, #334155, transparent)`,
-        // Brilho branco suave
-        boxShadow: `0 0 15px rgba(255, 255, 255, 0.1)`,
+        // Gradiente usando o Cyan do React
+        background: `linear-gradient(90deg, transparent, ${theme.dark}, ${theme.cyan}, ${theme.dark}, transparent)`,
+        // Brilho Cyan suave
+        boxShadow: `0 0 15px rgba(97, 218, 251, 0.2)`,
     };
     const contentStyle = {
         padding: '32px',
@@ -129,23 +133,24 @@ function ErrorPage() {
         lineHeight: 1,
         letterSpacing: '-0.04em',
         color: '#fff',
-        background: 'linear-gradient(180deg, #ffffff 0%, #475569 100%)',
+        // Gradiente Branco -> Cyan
+        background: `linear-gradient(180deg, #ffffff 0%, ${theme.cyan} 100%)`,
         WebkitBackgroundClip: 'text',
         WebkitTextFillColor: 'transparent',
         marginBottom: 16,
-        filter: `drop-shadow(0 0 20px rgba(255, 255, 255, 0.05))`,
+        filter: `drop-shadow(0 0 20px rgba(97, 218, 251, 0.1))`,
     };
     const terminalBoxStyle = {
         width: '100%',
-        background: 'rgba(255, 255, 255, 0.02)',
+        background: 'rgba(97, 218, 251, 0.03)', // Fundo azulado sutil
         borderRadius: 12,
         padding: '16px',
         marginBottom: 24,
-        border: '1px solid rgba(255, 255, 255, 0.08)',
+        border: '1px solid rgba(97, 218, 251, 0.1)', // Borda cyan sutil
         fontFamily: '"JetBrains Mono", monospace',
         fontSize: 12,
         textAlign: 'left',
-        color: '#94a3b8',
+        color: theme.textMuted,
     };
     const getBtnStyle = (kind, hovering) => {
         const base = {
@@ -166,17 +171,18 @@ function ErrorPage() {
         if (kind === 'primary') {
             return {
                 ...base,
-                background: hovering ? '#ffffff' : '#f8fafc',
+                // Botão Primário agora é o Cyan do React com texto escuro (contraste alto)
+                background: hovering ? '#ffffff' : theme.cyan,
                 color: '#000000',
-                boxShadow: hovering ? `0 0 20px rgba(255, 255, 255, 0.2)` : 'none',
+                boxShadow: hovering ? `0 0 20px rgba(97, 218, 251, 0.4)` : 'none',
             };
         }
         return {
             ...base,
-            background: hovering ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
-            color: hovering ? '#fff' : 'rgba(255, 255, 255, 0.6)',
-            border: '1px solid rgba(255, 255, 255, 0.1)',
-            borderColor: hovering ? 'rgba(255, 255, 255, 0.3)' : 'rgba(255, 255, 255, 0.1)',
+            background: hovering ? 'rgba(97, 218, 251, 0.1)' : 'transparent',
+            color: hovering ? '#fff' : theme.textMuted,
+            border: '1px solid',
+            borderColor: hovering ? theme.cyan : 'rgba(255, 255, 255, 0.1)',
         };
     };
     const brandStyle = {
@@ -202,10 +208,10 @@ function ErrorPage() {
                             react_1.default.createElement("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } }),
                             react_1.default.createElement("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } })),
                         react_1.default.createElement("div", null,
-                            react_1.default.createElement("span", { style: { color: '#64748b' } }, "GET"),
+                            react_1.default.createElement("span", { style: { color: theme.cyan } }, "GET"),
                             ' ',
                             react_1.default.createElement("span", { style: { color: '#fff' } }, path)),
-                        react_1.default.createElement("div", { style: { marginTop: 4, color: '#475569' } },
+                        react_1.default.createElement("div", { style: { marginTop: 4, color: theme.textMuted } },
                             react_1.default.createElement("span", null, "Error: Route not found"))),
                     react_1.default.createElement("div", { style: { display: 'flex', gap: 12, width: '100%' } },
                         react_1.default.createElement("a", { href: "/", onMouseEnter: () => setHoverHome(true), onMouseLeave: () => setHoverHome(false), style: { ...getBtnStyle('primary', hoverHome), flex: 1, justifyContent: 'center' } },
@@ -222,8 +228,8 @@ function ErrorPage() {
                             "Retry"))),
                 react_1.default.createElement("div", { style: {
                         padding: '12px 32px',
-                        background: 'rgba(255,255,255,0.02)',
-                        borderTop: '1px solid rgba(255,255,255,0.05)',
+                        background: 'rgba(97, 218, 251, 0.02)',
+                        borderTop: '1px solid rgba(97, 218, 251, 0.05)',
                         display: 'flex',
                         justifyContent: 'space-between',
                         alignItems: 'center',
@@ -232,11 +238,11 @@ function ErrorPage() {
                     } },
                     react_1.default.createElement("span", null, "Vatts Server"),
                     react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
-                        react_1.default.createElement("div", { style: { width: 6, height: 6, borderRadius: '50%', background: '#475569' } }),
-                        react_1.default.createElement("span", { style: { color: '#94a3b8' } }, "Not Found")))),
+                        react_1.default.createElement("div", { style: { width: 6, height: 6, borderRadius: '50%', background: theme.cyan, boxShadow: `0 0 6px ${theme.cyan}` } }),
+                        react_1.default.createElement("span", { style: { color: theme.cyan } }, "Not Found")))),
             react_1.default.createElement("a", { href: "https://npmjs.com/package/vatts", target: "_blank", rel: "noopener noreferrer", style: brandStyle, onMouseEnter: (e) => e.currentTarget.style.opacity = '1', onMouseLeave: (e) => e.currentTarget.style.opacity = '0.4' },
-                react_1.default.createElement("img", { src: "https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png", alt: "Vatts Logo", style: { width: 20, height: 20, filter: 'grayscale(1) brightness(2)' } }),
+                react_1.default.createElement("img", { src: "https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png", alt: "Vatts Logo", style: { width: 20, height: 20 } }),
                 react_1.default.createElement("span", { style: { fontSize: 13, fontWeight: 600, color: '#fff' } },
                     "Vatts",
-                    react_1.default.createElement("span", { style: { color: "#64748b" } }, ".js"))))));
+                    react_1.default.createElement("span", { style: { color: theme.cyan } }, ".js"))))));
 }

package/dist/vue/BuildingPage.vue

@@ -1,19 +1,3 @@
-<!--
-  This file is part of the Vatts.js Project.
-  Copyright (c) 2026 mfraz
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
--->
 <script setup>
 import { onMounted, ref } from 'vue';
 
@@ -24,15 +8,18 @@ try {
 } catch (e) {}
 
 // CSS extraído para evitar que o Vue escape caracteres como '>' ou aspas
+// ATUALIZADO: Paleta de cores alterada para Vue.js Green
 const cssStyles = `
   :root {
     --bg-solid: #000000;
     --card-bg: #0a0a0a;
-    /* PALETA: Monocromática estilo Next.js */
+    /* PALETA: Vue.js Theme */
+    --vue-green: #42b883;       /* O verde principal do Vue */
+    --vue-dark: #35495e;        /* O azul escuro secundário do Vue (para substituir cinzas escuros) */
     --primary: #ffffff;
-    --primary-glow: rgba(255, 255, 255, 0.1);
     --text-main: #ffffff;
-    --text-muted: #64748b;
+    /* Mudei o texto mudo de cinza para um tom mais claro do verde */
+    --text-muted: #a7c4bc;
   }
 
   body {
@@ -65,8 +52,8 @@ const cssStyles = `
     width: 100%;
     max-width: 420px;
     background: var(--card-bg);
-    /* Borda sutil em cinza escuro */
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
+    /* Borda sutil, mudei o brilho para verde */
+    box-shadow: 0 0 0 1px rgba(66, 184, 131, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
     border-radius: 20px;
     overflow: hidden;
     display: flex;
@@ -78,9 +65,9 @@ const cssStyles = `
   .neon-line {
     height: 1px;
     width: 100%;
-    /* Linha de luz branca/cinza */
-    background: linear-gradient(90deg, transparent, #334155, #ffffff, #334155, transparent);
-    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
+    /* Linha de luz: Mudei do gradiente cinza/branco para o verde Vue */
+    background: linear-gradient(90deg, transparent, var(--vue-dark), var(--vue-green), var(--vue-dark), transparent);
+    box-shadow: 0 0 15px rgba(66, 184, 131, 0.2);
   }
 
   .content {
@@ -103,8 +90,8 @@ const cssStyles = `
     object-fit: contain;
     position: relative;
     z-index: 2;
-    /* Deixa a logo levemente dessaturada para combinar */
-    filter: grayscale(0.5);
+    /* Removi o filtro grayscale para a logo do Vue brilhar na cor original */
+    filter: none;
   }
 
   .logo-glow {
@@ -114,9 +101,10 @@ const cssStyles = `
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
-    background: #ffffff;
+    /* Mudei o brilho de fundo de branco para Verde Vue */
+    background: var(--vue-green);
     filter: blur(25px);
-    opacity: 0.1;
+    opacity: 0.2; /* Aumentei um pouco a opacidade para destacar o verde */
     border-radius: 50%;
     animation: pulse 2s ease-in-out infinite;
   }
@@ -126,14 +114,16 @@ const cssStyles = `
     font-size: 2rem;
     font-weight: 800;
     letter-spacing: -0.03em;
-    background: linear-gradient(180deg, #ffffff 0%, #475569 100%);
+    /* Gradiente do texto: De branco para Verde Vue */
+    background: linear-gradient(180deg, #ffffff 0%, var(--vue-green) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
 
   h1 span {
-    color: #475569;
-    -webkit-text-fill-color: #475569;
+    /* O ".js" agora é verde sólido */
+    color: var(--vue-green);
+    -webkit-text-fill-color: var(--vue-green);
   }
 
   p {
@@ -145,14 +135,15 @@ const cssStyles = `
 
   .terminal-box {
     width: 100%;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(66, 184, 131, 0.03); /* Fundo sutilmente verde */
+    border: 1px solid rgba(66, 184, 131, 0.1); /* Borda verde sutil */
     border-radius: 12px;
     padding: 16px;
     text-align: left;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.75rem;
-    color: #475569;
+    /* Cor do texto base do terminal alterada de cinza para um tom claro */
+    color: var(--text-muted);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -168,25 +159,31 @@ const cssStyles = `
   .term-spinner {
     width: 10px;
     height: 10px;
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    border-top-color: #ffffff;
+    border: 2px solid rgba(66, 184, 131, 0.1); /* Borda inativa verde clara */
+    border-top-color: var(--vue-green); /* Spinner ativo verde vibrante */
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
   }
 
-  .file-name { color: #94a3b8; }
-  .accent { color: #ffffff; }
+  .file-name {
+    /* Nomes de arquivo agora num tom azulado/esverdeado claro */
+    color: #8fa3b3;
+  }
+  .accent {
+    /* O destaque "src/vatts.ts" agora é Verde Vue */
+    color: var(--vue-green);
+  }
 
   .card-footer {
     width: 100%;
     padding: 12px 32px;
-    background: rgba(255,255,255,0.02);
-    border-top: 1px solid rgba(255,255,255,0.05);
+    background: rgba(66, 184, 131, 0.03); /* Fundo sutil verde */
+    border-top: 1px solid rgba(66, 184, 131, 0.05); /* Borda sutil verde */
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 11px;
-    color: rgba(255,255,255,0.2);
+    color: rgba(255,255,255,0.4);
     box-sizing: border-box;
   }
 
@@ -194,7 +191,8 @@ const cssStyles = `
     display: flex;
     align-items: center;
     gap: 6px;
-    color: #ffffff;
+    /* Texto de status e versão agora em Verde Vue */
+    color: var(--vue-green);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -203,14 +201,15 @@ const cssStyles = `
   .dot {
     width: 6px;
     height: 6px;
-    background-color: #ffffff;
+    /* O ponto de status agora é Verde Vue com brilho verde */
+    background-color: var(--vue-green);
     border-radius: 50%;
-    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 8px var(--vue-green);
   }
 
   @keyframes pulse {
-    0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
-    50% { opacity: 0.15; transform: translate(-50%, -50%) scale(1.1); }
+    0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
+    50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.1); }
   }
 
   @keyframes spin {
@@ -236,15 +235,10 @@ const clientReloadScript = `
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
 
-    <!-- v-html garante que o CSS seja renderizado sem escape (ex: '>' permanece '>') -->
     <style v-html="cssStyles"></style>
   </head>
   <body>
   <div class="building-screen-body">
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
-
     <div class="container">
       <div class="build-card">
         <div class="neon-line"></div>
@@ -264,7 +258,7 @@ const clientReloadScript = `
               <span class="file-name">Compiling <span class="accent">src/vatts.ts</span>...</span>
             </div>
             <div class="term-line" style="opacity: 0.5">
-              <span>✓</span>
+              <span style="color: var(--vue-green)">✓</span>
               <span class="file-name">Optimizing assets</span>
             </div>
           </div>
@@ -281,7 +275,6 @@ const clientReloadScript = `
     </div>
   </div>
 
-  <!-- v-html para o script garante que a arrow function não quebre com '&gt;' -->
   <script v-html="clientReloadScript"></script>
   </body>
   </html>

package/dist/vue/DefaultNotFound.vue

@@ -32,7 +32,6 @@ const reload = () => {
 
 <template>
   <div class="error-page-wrapper">
-    <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
 
     <div class="container">
@@ -103,11 +102,13 @@ const reload = () => {
   box-sizing: border-box;
 }
 
-/* REMOVIDO :global(body).
-  Os estilos globais foram movidos para .container para não afetar o resto do site.
-*/
-
+/* Variáveis CSS locais para facilitar manutenção das cores Vue */
 .container {
+  --vue-green: #42b883;
+  --vue-dark: #35495e;
+  --bg-color: #000000;
+  --card-bg: #0a0a0a;
+
   position: fixed;
   top: 0;
   left: 0;
@@ -120,8 +121,7 @@ const reload = () => {
   justify-content: center;
   width: 100vw;
   height: 100vh;
-  /* Estilos que antes estavam no body: */
-  background: #000000;
+  background: var(--bg-color);
   color: #ffffff;
   overflow: hidden;
   margin: 0;
@@ -132,8 +132,9 @@ const reload = () => {
   width: min(90%, 500px);
   display: flex;
   flex-direction: column;
-  background: #0a0a0a;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
+  background: var(--card-bg);
+  /* Sombra com leve toque de verde */
+  box-shadow: 0 0 0 1px rgba(66, 184, 131, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
   border-radius: 20px;
   overflow: hidden;
   position: relative;
@@ -142,8 +143,9 @@ const reload = () => {
 .neon-line {
   height: 1px;
   width: 100%;
-  background: linear-gradient(90deg, transparent, #334155, #ffffff, #334155, transparent);
-  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
+  /* Gradiente Verde Vue */
+  background: linear-gradient(90deg, transparent, var(--vue-dark), var(--vue-green), var(--vue-dark), transparent);
+  box-shadow: 0 0 15px rgba(66, 184, 131, 0.2);
 }
 
 .content {
@@ -160,26 +162,29 @@ const reload = () => {
   line-height: 1;
   letter-spacing: -0.04em;
   color: #fff;
-  background: linear-gradient(180deg, #ffffff 0%, #475569 100%);
+  /* Gradiente Texto: Branco para Verde */
+  background: linear-gradient(180deg, #ffffff 0%, var(--vue-green) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   /* Fallback */
-  color: #ffffff;
+  color: var(--vue-green);
   margin-bottom: 16px;
-  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.05));
+  filter: drop-shadow(0 0 20px rgba(66, 184, 131, 0.1));
 }
 
 .terminal-box {
   width: 100%;
-  background: rgba(255, 255, 255, 0.02);
+  /* Fundo esverdeado muito sutil */
+  background: rgba(66, 184, 131, 0.03);
   border-radius: 12px;
   padding: 16px;
   margin-bottom: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  /* Borda verde sutil */
+  border: 1px solid rgba(66, 184, 131, 0.1);
   font-family: "JetBrains Mono", monospace;
   font-size: 12px;
   text-align: left;
-  color: #94a3b8;
+  color: #a7c4bc; /* Texto terminal mais claro */
   box-sizing: border-box;
 }
 
@@ -198,7 +203,7 @@ const reload = () => {
 }
 
 .method {
-  color: #64748b;
+  color: var(--vue-green); /* GET em verde */
   margin-right: 4px;
 }
 
@@ -208,7 +213,7 @@ const reload = () => {
 
 .error-msg {
   margin-top: 4px;
-  color: #475569;
+  color: #5f7e76; /* Verde acinzentado escuro */
 }
 
 .actions {
@@ -236,31 +241,32 @@ const reload = () => {
 }
 
 .btn-primary {
-  background: #f8fafc;
+  /* Botão principal Verde Vue */
+  background: var(--vue-green);
   color: #000000;
 }
 
 .btn-primary:hover {
   background: #ffffff;
-  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 20px rgba(66, 184, 131, 0.4);
 }
 
 .btn-secondary {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(66, 184, 131, 0.2);
 }
 
 .btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(66, 184, 131, 0.1);
   color: #fff;
-  border-color: rgba(255, 255, 255, 0.3);
+  border-color: var(--vue-green);
 }
 
 .footer {
   padding: 12px 32px;
-  background: rgba(255, 255, 255, 0.02);
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(66, 184, 131, 0.02);
+  border-top: 1px solid rgba(66, 184, 131, 0.05);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -279,11 +285,13 @@ const reload = () => {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #475569;
+  /* Ponto de status Verde */
+  background: var(--vue-green);
+  box-shadow: 0 0 6px var(--vue-green);
 }
 
 .status-text {
-  color: #94a3b8;
+  color: var(--vue-green);
 }
 
 .brand-link {
@@ -304,7 +312,8 @@ const reload = () => {
 .brand-logo {
   width: 20px;
   height: 20px;
-  filter: grayscale(1) brightness(2);
+  /* Removi o grayscale para a logo brilhar normal, se preferir monocromático com verde, pode ajustar */
+  filter: none;
 }
 
 .brand-text {
@@ -314,6 +323,7 @@ const reload = () => {
 }
 
 .brand-highlight {
-  color: #64748b;
+  /* .js em verde */
+  color: var(--vue-green);
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vatts",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Vatts.js 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.",
   "types": "dist/index.d.ts",
   "author": "mfraz",