nyte 1.2.0 → 1.2.2

package/dist/client/DefaultNotFound.js

@@ -9,68 +9,63 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const lucide_react_1 = require("lucide-react");
 function ErrorPage() {
-    // State for interactive hover effects
+    const [path, setPath] = (0, react_1.useState)('/');
+    // Estados apenas para mudar a COR do botão, sem mover nada de lugar
     const [hoverHome, setHoverHome] = (0, react_1.useState)(false);
     const [hoverRetry, setHoverRetry] = (0, react_1.useState)(false);
-    const [mounted, setMounted] = (0, react_1.useState)(false);
-    const [path, setPath] = (0, react_1.useState)('/');
     (0, react_1.useEffect)(() => {
-        setMounted(true);
         if (typeof window !== 'undefined') {
             setPath(window.location.pathname);
         }
     }, []);
-    // --- GLOBAL STYLES (Reset & Fonts & Solid Background) ---
+    // --- 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');
 
         body {
             margin: 0;
             padding: 0;
-            /* SOLID DARK BACKGROUND HERE */
             background-color: #0d0d0d; 
             color: #e2e8f0;
             font-family: 'Inter', system-ui, sans-serif;
-            overflow: hidden;
+            overflow: hidden; /* Trava scroll */
             height: 100vh;
             width: 100vw;
-            position: relative;
         }
 
         * { box-sizing: border-box; }
     `;
     // --- INLINE STYLES ---
-    // Container updated for absolute perfect centering
     const containerStyle = {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
+        // MUDANÇA CRÍTICA:
+        // Position fixed cobrindo a tela toda (inset: 0)
+        // Usamos Flexbox para centralizar. Isso não tem animação, é layout puro.
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 9999,
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 10,
-        width: '100%',
-        pointerEvents: 'none', // Allows clicks to pass through container areas not covered by children
+        alignItems: 'center', // Centraliza Horizontalmente
+        justifyContent: 'center', // Centraliza Verticalmente
+        width: '100vw',
+        height: '100vh',
+        background: '#0d0d0d', // Fundo sólido de segurança
     };
     const cardStyle = {
         width: 'min(90%, 500px)',
         display: 'flex',
         flexDirection: 'column',
-        // Super Glassmorphism Dark (Matching Modal)
         background: 'rgba(10, 10, 12, 0.95)',
-        // Cyan Glow Border + Deep Shadow
         boxShadow: '0 0 0 1px rgba(34, 211, 238, 0.15), 0 40px 80px -20px rgba(0, 0, 0, 0.8)',
         borderRadius: 20,
         overflow: 'hidden',
         position: 'relative',
-        transform: mounted ? 'scale(1) translateY(0)' : 'scale(0.98) translateY(10px)',
-        opacity: mounted ? 1 : 0,
-        transition: 'transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease',
-        pointerEvents: 'auto', // Re-enable clicks on the card itself
+        // REMOVIDO: transform, transition, opacity
+        // O card nasce desenhado na posição final.
     };
-    // The Signature Neon Line
     const neonLine = {
         height: '1px',
         width: '100%',
@@ -90,7 +85,6 @@ function ErrorPage() {
         lineHeight: 1,
         letterSpacing: '-0.04em',
         color: '#fff',
-        // Subtle Gradient Text
         background: 'linear-gradient(180deg, #ffffff 0%, #94a3b8 100%)',
         WebkitBackgroundClip: 'text',
         WebkitTextFillColor: 'transparent',
@@ -109,7 +103,6 @@ function ErrorPage() {
         textAlign: 'left',
         color: '#94a3b8',
     };
-    // Button Generator (Reusable)
     const getBtnStyle = (kind, hovering) => {
         const base = {
             display: 'flex',
@@ -120,7 +113,8 @@ function ErrorPage() {
             fontSize: 13,
             fontWeight: 600,
             cursor: 'pointer',
-            transition: 'all 0.2s ease',
+            // Mantive a transição de COR (0.2s), mas não move pixel nenhum
+            transition: 'background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease',
             border: 'none',
             outline: 'none',
             textDecoration: 'none',
@@ -148,12 +142,11 @@ function ErrorPage() {
         alignItems: 'center',
         gap: 10,
         opacity: 0.4,
-        transition: 'opacity 0.3s',
+        transition: 'opacity 0.3s', // Apenas opacidade muda, sem movimento
         textDecoration: 'none',
         color: '#fff',
-        pointerEvents: 'auto', // Re-enable clicks on brand link
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: globalStyles } }), (0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: cardStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: neonLine }), (0, jsx_runtime_1.jsxs)("div", { style: contentStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: codeStyle, children: "404" }), (0, jsx_runtime_1.jsxs)("div", { style: terminalBoxStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 6, marginBottom: 8, opacity: 0.5 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#f87171' } }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fbbf24' } }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#4ade80' } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { style: { color: '#c084fc' }, children: "GET" }), ' ', (0, jsx_runtime_1.jsx)("span", { style: { color: '#22d3ee' }, children: path })] }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: 4, color: '#f87171' }, children: (0, jsx_runtime_1.jsx)("span", { children: "Error: Route not found" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsxs)("a", { href: "/", style: { ...getBtnStyle('primary', false), flex: 1, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Home, { size: 16 }), "Back Home"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => window.location.reload(), style: { ...getBtnStyle('secondary', false), flex: 1, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }), "Retry"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: globalStyles } }), (0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: cardStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: neonLine }), (0, jsx_runtime_1.jsxs)("div", { style: contentStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: codeStyle, children: "404" }), (0, jsx_runtime_1.jsxs)("div", { style: terminalBoxStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 6, marginBottom: 8, opacity: 0.5 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#f87171' } }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fbbf24' } }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#4ade80' } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { style: { color: '#c084fc' }, children: "GET" }), ' ', (0, jsx_runtime_1.jsx)("span", { style: { color: '#22d3ee' }, children: path })] }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: 4, color: '#f87171' }, children: (0, jsx_runtime_1.jsx)("span", { children: "Error: Route not found" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsxs)("a", { href: "/", onMouseEnter: () => setHoverHome(true), onMouseLeave: () => setHoverHome(false), style: { ...getBtnStyle('primary', hoverHome), flex: 1, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Home, { size: 16 }), "Back Home"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => window.location.reload(), onMouseEnter: () => setHoverRetry(true), onMouseLeave: () => setHoverRetry(false), style: { ...getBtnStyle('secondary', hoverRetry), flex: 1, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }), "Retry"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                     padding: '12px 32px',
                                     background: 'rgba(0,0,0,0.3)',
                                     borderTop: '1px solid rgba(255,255,255,0.03)',

package/dist/client/ErrorModal.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface NyteBuildError {
     message?: string;
     name?: string;
@@ -16,4 +17,4 @@ export declare function ErrorModal({ error, isOpen, onClose, onCopy, }: {
     isOpen: boolean;
     onClose: () => void;
     onCopy?: () => void;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.ReactPortal | null;

package/dist/client/ErrorModal.js

@@ -19,17 +19,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * limitations under the License.
  */
 const react_1 = require("react");
+const react_dom_1 = require("react-dom"); // <--- IMPORTANTE: Importar o Portal
 // --- ANSI PARSER LOGIC ---
 const ANSI_COLORS = {
-    '30': '#94a3b8', // Black (Gray)
-    '31': '#f87171', // Red (Error)
-    '32': '#4ade80', // Green
-    '33': '#facc15', // Yellow (Warning)
-    '34': '#60a5fa', // Blue
-    '35': '#c084fc', // Magenta
-    '36': '#22d3ee', // Cyan (Neon)
-    '37': '#e2e8f0', // White
-    '90': '#64748b', // Bright Black
+    '30': '#94a3b8',
+    '31': '#f87171',
+    '32': '#4ade80',
+    '33': '#facc15',
+    '34': '#60a5fa',
+    '35': '#c084fc',
+    '36': '#22d3ee',
+    '37': '#e2e8f0',
+    '90': '#64748b',
 };
 function AnsiText({ text }) {
     const parts = (0, react_1.useMemo)(() => {
@@ -45,7 +46,7 @@ function AnsiText({ text }) {
             }
             const code = match[1];
             if (code === '39' || code === '0') {
-                currentColor = null; // Reset
+                currentColor = null;
             }
             else if (ANSI_COLORS[code]) {
                 currentColor = ANSI_COLORS[code];
@@ -65,13 +66,24 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const [isHoveringClose, setIsHoveringClose] = (0, react_1.useState)(false);
     const [isHoveringCopy, setIsHoveringCopy] = (0, react_1.useState)(false);
+    // Estado para garantir que rodamos apenas no client-side (evita erro de SSR com document.body)
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
     (0, react_1.useEffect)(() => {
         if (isOpen) {
+            // Trava o scroll do body quando o modal abre
+            document.body.style.overflow = 'hidden';
             setTimeout(() => setVisible(true), 10);
         }
         else {
+            document.body.style.overflow = '';
             setVisible(false);
         }
+        // Limpeza de segurança
+        return () => { document.body.style.overflow = ''; };
     }, [isOpen]);
     (0, react_1.useEffect)(() => {
         if (!isOpen)
@@ -83,26 +95,29 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
     }, [isOpen, onClose]);
-    if (!isOpen || !error)
+    if (!mounted || !isOpen || !error)
         return null;
-    // Combine raw error text to emulate a real terminal output
-    // Often build tools put the frame inside the message, so we prioritize message.
     const rawOutput = error.message || '';
     const stackOutput = error.stack ? `\n\nStack Trace:\n${error.stack}` : '';
     // --- STYLES ---
     const overlayStyle = {
         position: 'fixed',
-        inset: 0,
-        zIndex: 99999,
-        background: visible ? 'rgba(0, 0, 0, 0.75)' : 'rgba(0,0,0,0)',
-        backdropFilter: 'blur(8px)',
-        WebkitBackdropFilter: 'blur(8px)',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: 2147483647, // Max Z-Index seguro
+        // Fundo praticamente sólido (98% opacidade) para esconder o site atrás
+        background: visible ? 'rgba(5, 5, 5, 0.98)' : 'rgba(5, 5, 5, 0)',
+        backdropFilter: 'blur(10px)', // Blur extra caso algo vaze
+        WebkitBackdropFilter: 'blur(10px)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         padding: 24,
         transition: 'background 0.3s ease, opacity 0.3s ease',
         opacity: visible ? 1 : 0,
+        boxSizing: 'border-box',
     };
     const cardStyle = {
         width: '100%',
@@ -110,10 +125,8 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
         maxHeight: '90vh',
         display: 'flex',
         flexDirection: 'column',
-        // Super Glassmorphism Dark
-        background: 'rgba(10, 10, 12, 0.95)',
-        // Cyan Glow Border
-        boxShadow: '0 0 0 1px rgba(34, 211, 238, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.9)',
+        background: 'rgba(10, 10, 12, 1)', // Card totalmente sólido
+        boxShadow: '0 0 0 1px rgba(34, 211, 238, 0.15), 0 50px 100px -20px rgba(0, 0, 0, 1)',
         borderRadius: 16,
         overflow: 'hidden',
         transform: visible ? 'scale(1) translateY(0)' : 'scale(0.98) translateY(10px)',
@@ -175,10 +188,10 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
             color: hovering ? '#fff' : 'rgba(255,255,255,0.5)',
         };
     };
-    return ((0, jsx_runtime_1.jsx)("div", { style: overlayStyle, onMouseDown: onClose, children: (0, jsx_runtime_1.jsxs)("div", { style: cardStyle, onMouseDown: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("div", { style: neonLine }), (0, jsx_runtime_1.jsxs)("div", { style: headerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+    const modalContent = ((0, jsx_runtime_1.jsx)("div", { style: overlayStyle, onMouseDown: onClose, children: (0, jsx_runtime_1.jsxs)("div", { style: cardStyle, onMouseDown: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("div", { style: neonLine }), (0, jsx_runtime_1.jsxs)("div", { style: headerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
                                         fontSize: 12,
                                         fontWeight: 800,
-                                        color: '#f87171', // Red for "ERROR"
+                                        color: '#f87171',
                                         letterSpacing: '0.1em'
                                     }, children: "ERROR" }), error.plugin && ((0, jsx_runtime_1.jsx)("span", { style: {
                                         fontSize: 11,
@@ -196,4 +209,6 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
                         fontSize: 11,
                         color: 'rgba(255,255,255,0.2)'
                     }, children: [(0, jsx_runtime_1.jsx)("span", { children: "nyte-cli v2.0.0" }), (0, jsx_runtime_1.jsx)("span", { style: { color: '#22d3ee' }, children: "Watching for changes..." })] })] }) }));
+    // O PULO DO GATO: Renderiza direto no body para ignorar contexto de scroll dos pais
+    return (0, react_dom_1.createPortal)(modalContent, document.body);
 }

package/dist/client/entry.client.js

@@ -269,91 +269,95 @@ function DevIndicator({ hasBuildError = false, onClickBuildError, }) {
     const isReloading = hotState === 'reloading';
     const isError = !!hasBuildError;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
-          @keyframes nyte-pulse {
-            0% { opacity: 0.4; }
-            50% { opacity: 1; }
-            100% { opacity: 0.4; }
-          }
-          @keyframes nyte-spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-          }
-          .nyte-dev-badge {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 999999;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 8px 14px;
-            background: rgba(15, 15, 20, 0.8);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-  
-            border-radius: 10px;
-            color: #fff;
-            font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
-            font-size: 12px;
-            font-weight: 600;
-            letter-spacing: 0.05em;
+      @keyframes nyte-pulse {
+        0% { opacity: 0.4; }
+        50% { opacity: 1; }
+        100% { opacity: 0.4; }
+      }
+      @keyframes nyte-spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      .nyte-dev-badge {
+        /* AQUI ESTÁ O QUE SEGURA ELE NA TELA: */
+        position: sticky;
+        bottom: 20px;
+        /* float e margens para forçar a direita no modo sticky */
+        float: right; 
+        margin-right: 20px;
+        z-index: 999999;
+        
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 14px;
+        background: rgba(15, 15, 20, 0.8);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
 
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-            transition: all 0.2s ease;
-            cursor: default;
-            user-select: none;
-          }
-          .nyte-dev-badge.clickable {
-            cursor: pointer;
-          }
-          .nyte-dev-badge:hover {
-            border-color: rgba(142, 45, 226, 0.5);
-            transform: translateY(-2px);
-          }
-          .nyte-status-dot {
-            width: 8px;
-            height: 8px;
-            background: #10b981; /* Verde esmeralda */
-            border-radius: 50%;
-            box-shadow: 0 0 10px #10b981;
-            animation: nyte-pulse 2s infinite ease-in-out;
-          }
-          .nyte-status-dot.reloading {
-            background: #f59e0b; /* Amber */
-            box-shadow: 0 0 10px #f59e0b;
-          }
-          .nyte-status-dot.error {
-            background: #ef4444; /* Red */
-            box-shadow: 0 0 12px #ef4444;
-            animation: nyte-pulse 1.2s infinite ease-in-out;
-          }
-          .nyte-spinner {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            border: 2px solid rgba(255,255,255,0.25);
-            border-top-color: rgba(255,255,255,0.85);
-            animation: nyte-spin 0.8s linear infinite;
-          }
-          .nyte-logo {
-            background: linear-gradient(135deg, #00a3a3, #808080);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-weight: 800;
-          }
-          .nyte-error-pill {
-            margin-left: 6px;
-            padding: 2px 6px;
-            border-radius: 999px;
-            background: rgba(239, 68, 68, 0.18);
-            border: 1px solid rgba(239, 68, 68, 0.35);
-            color: rgba(255,255,255,0.9);
-            font-size: 10px;
-            font-weight: 800;
-            letter-spacing: 0.08em;
-            text-transform: uppercase;
-          }
-        ` }), (0, jsx_runtime_1.jsxs)("div", { className: `nyte-dev-badge${isError ? ' clickable' : ''}`, title: isError ? 'Build com erro — clique para ver detalhes' : undefined, onClick: () => {
+        border-radius: 10px;
+        color: #fff;
+        font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.05em;
+
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        transition: all 0.2s ease;
+        cursor: default;
+        user-select: none;
+      }
+      .nyte-dev-badge.clickable {
+        cursor: pointer;
+      }
+      .nyte-dev-badge:hover {
+        border-color: rgba(142, 45, 226, 0.5);
+        transform: translateY(-2px);
+      }
+      .nyte-status-dot {
+        width: 8px;
+        height: 8px;
+        background: #10b981; /* Verde esmeralda */
+        border-radius: 50%;
+        box-shadow: 0 0 10px #10b981;
+        animation: nyte-pulse 2s infinite ease-in-out;
+      }
+      .nyte-status-dot.reloading {
+        background: #f59e0b; /* Amber */
+        box-shadow: 0 0 10px #f59e0b;
+      }
+      .nyte-status-dot.error {
+        background: #ef4444; /* Red */
+        box-shadow: 0 0 12px #ef4444;
+        animation: nyte-pulse 1.2s infinite ease-in-out;
+      }
+      .nyte-spinner {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        border: 2px solid rgba(255,255,255,0.25);
+        border-top-color: rgba(255,255,255,0.85);
+        animation: nyte-spin 0.8s linear infinite;
+      }
+      .nyte-logo {
+        background: linear-gradient(135deg, #00a3a3, #808080);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-weight: 800;
+      }
+      .nyte-error-pill {
+        margin-left: 6px;
+        padding: 2px 6px;
+        border-radius: 999px;
+        background: rgba(239, 68, 68, 0.18);
+        border: 1px solid rgba(239, 68, 68, 0.35);
+        color: rgba(255,255,255,0.9);
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+    ` }), (0, jsx_runtime_1.jsxs)("div", { className: `nyte-dev-badge${isError ? ' clickable' : ''}`, title: isError ? 'Build com erro — clique para ver detalhes' : undefined, onClick: () => {
                     if (isError) {
                         onClickBuildError?.();
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nyte",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Nyte.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": "itsmuzin",

package/src/client/DefaultNotFound.tsx

@@ -6,34 +6,31 @@ import React, { useState, useEffect } from 'react';
 import { Home, RefreshCw, AlertTriangle } from 'lucide-react';
 
 export default function ErrorPage() {
-    // State for interactive hover effects
+    const [path, setPath] = useState('/');
+
+    // Estados apenas para mudar a COR do botão, sem mover nada de lugar
     const [hoverHome, setHoverHome] = useState(false);
     const [hoverRetry, setHoverRetry] = useState(false);
-    const [mounted, setMounted] = useState(false);
-    const [path, setPath] = useState('/');
 
     useEffect(() => {
-        setMounted(true);
         if (typeof window !== 'undefined') {
             setPath(window.location.pathname);
         }
     }, []);
 
-    // --- GLOBAL STYLES (Reset & Fonts & Solid Background) ---
+    // --- 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');
 
         body {
             margin: 0;
             padding: 0;
-            /* SOLID DARK BACKGROUND HERE */
             background-color: #0d0d0d; 
             color: #e2e8f0;
             font-family: 'Inter', system-ui, sans-serif;
-            overflow: hidden;
+            overflow: hidden; /* Trava scroll */
             height: 100vh;
             width: 100vw;
-            position: relative;
         }
 
         * { box-sizing: border-box; }
@@ -41,39 +38,41 @@ export default function ErrorPage() {
 
     // --- INLINE STYLES ---
 
-    // Container updated for absolute perfect centering
     const containerStyle: React.CSSProperties = {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
+        // MUDANÇA CRÍTICA:
+        // Position fixed cobrindo a tela toda (inset: 0)
+        // Usamos Flexbox para centralizar. Isso não tem animação, é layout puro.
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 9999,
+
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 10,
-        width: '100%',
-        pointerEvents: 'none', // Allows clicks to pass through container areas not covered by children
+        alignItems: 'center', // Centraliza Horizontalmente
+        justifyContent: 'center', // Centraliza Verticalmente
+
+        width: '100vw',
+        height: '100vh',
+        background: '#0d0d0d', // Fundo sólido de segurança
     };
 
     const cardStyle: React.CSSProperties = {
         width: 'min(90%, 500px)',
         display: 'flex',
         flexDirection: 'column',
-        // Super Glassmorphism Dark (Matching Modal)
         background: 'rgba(10, 10, 12, 0.95)',
-        // Cyan Glow Border + Deep Shadow
         boxShadow: '0 0 0 1px rgba(34, 211, 238, 0.15), 0 40px 80px -20px rgba(0, 0, 0, 0.8)',
         borderRadius: 20,
         overflow: 'hidden',
         position: 'relative',
-        transform: mounted ? 'scale(1) translateY(0)' : 'scale(0.98) translateY(10px)',
-        opacity: mounted ? 1 : 0,
-        transition: 'transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease',
-        pointerEvents: 'auto', // Re-enable clicks on the card itself
+
+        // REMOVIDO: transform, transition, opacity
+        // O card nasce desenhado na posição final.
     };
 
-    // The Signature Neon Line
     const neonLine: React.CSSProperties = {
         height: '1px',
         width: '100%',
@@ -95,7 +94,6 @@ export default function ErrorPage() {
         lineHeight: 1,
         letterSpacing: '-0.04em',
         color: '#fff',
-        // Subtle Gradient Text
         background: 'linear-gradient(180deg, #ffffff 0%, #94a3b8 100%)',
         WebkitBackgroundClip: 'text',
         WebkitTextFillColor: 'transparent',
@@ -116,7 +114,6 @@ export default function ErrorPage() {
         color: '#94a3b8',
     };
 
-    // Button Generator (Reusable)
     const getBtnStyle = (kind: 'primary' | 'secondary', hovering: boolean): React.CSSProperties => {
         const base: React.CSSProperties = {
             display: 'flex',
@@ -127,7 +124,8 @@ export default function ErrorPage() {
             fontSize: 13,
             fontWeight: 600,
             cursor: 'pointer',
-            transition: 'all 0.2s ease',
+            // Mantive a transição de COR (0.2s), mas não move pixel nenhum
+            transition: 'background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease',
             border: 'none',
             outline: 'none',
             textDecoration: 'none',
@@ -157,28 +155,22 @@ export default function ErrorPage() {
         alignItems: 'center',
         gap: 10,
         opacity: 0.4,
-        transition: 'opacity 0.3s',
+        transition: 'opacity 0.3s', // Apenas opacidade muda, sem movimento
         textDecoration: 'none',
         color: '#fff',
-        pointerEvents: 'auto', // Re-enable clicks on brand link
     };
 
     return (
         <div >
             <style dangerouslySetInnerHTML={{ __html: globalStyles }} />
-            {/* Removed bgGlowStyle div for solid background */}
 
             <div style={containerStyle}>
                 <div style={cardStyle}>
-                    {/* Top Neon Line */}
                     <div style={neonLine} />
 
                     <div style={contentStyle}>
-                        {/* 404 Title */}
                         <div style={codeStyle}>404</div>
 
-
-                        {/* Tech/Terminal Detail */}
                         <div style={terminalBoxStyle}>
                             <div style={{ display: 'flex', gap: 6, marginBottom: 8, opacity: 0.5 }}>
                                 <div style={{width: 8, height: 8, borderRadius: '50%', background: '#f87171'}}/>
@@ -194,18 +186,21 @@ export default function ErrorPage() {
                             </div>
                         </div>
 
-                        {/* Actions */}
                         <div style={{ display: 'flex', gap: 12, width: '100%' }}>
                             <a
                                 href="/"
-                                style={{ ...getBtnStyle('primary', false), flex: 1, justifyContent: 'center' }}
+                                onMouseEnter={() => setHoverHome(true)}
+                                onMouseLeave={() => setHoverHome(false)}
+                                style={{ ...getBtnStyle('primary', hoverHome), flex: 1, justifyContent: 'center' }}
                             >
                                 <Home size={16} />
                                 Back Home
                             </a>
                             <button
                                 onClick={() => window.location.reload()}
-                                style={{ ...getBtnStyle('secondary', false), flex: 1, justifyContent: 'center' }}
+                                onMouseEnter={() => setHoverRetry(true)}
+                                onMouseLeave={() => setHoverRetry(false)}
+                                style={{ ...getBtnStyle('secondary', hoverRetry), flex: 1, justifyContent: 'center' }}
                             >
                                 <RefreshCw size={16} />
                                 Retry
@@ -213,7 +208,6 @@ export default function ErrorPage() {
                         </div>
                     </div>
 
-                    {/* Footer Status Bar (Matching Modal Footer) */}
                     <div style={{
                         padding: '12px 32px',
                         background: 'rgba(0,0,0,0.3)',
@@ -232,7 +226,6 @@ export default function ErrorPage() {
                     </div>
                 </div>
 
-                {/* Brand Footer */}
                 <a
                     href="https://npmjs.com/package/nyte"
                     target="_blank"

package/src/client/ErrorModal.tsx

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 import React, { useEffect, useState, useMemo } from 'react';
+import { createPortal } from 'react-dom'; // <--- IMPORTANTE: Importar o Portal
 
 export interface NyteBuildError {
     message?: string;
@@ -32,15 +33,15 @@ export interface NyteBuildError {
 
 // --- ANSI PARSER LOGIC ---
 const ANSI_COLORS: Record<string, string> = {
-    '30': '#94a3b8', // Black (Gray)
-    '31': '#f87171', // Red (Error)
-    '32': '#4ade80', // Green
-    '33': '#facc15', // Yellow (Warning)
-    '34': '#60a5fa', // Blue
-    '35': '#c084fc', // Magenta
-    '36': '#22d3ee', // Cyan (Neon)
-    '37': '#e2e8f0', // White
-    '90': '#64748b', // Bright Black
+    '30': '#94a3b8',
+    '31': '#f87171',
+    '32': '#4ade80',
+    '33': '#facc15',
+    '34': '#60a5fa',
+    '35': '#c084fc',
+    '36': '#22d3ee',
+    '37': '#e2e8f0',
+    '90': '#64748b',
 };
 
 function AnsiText({ text }: { text: string }) {
@@ -59,7 +60,7 @@ function AnsiText({ text }: { text: string }) {
 
             const code = match[1];
             if (code === '39' || code === '0') {
-                currentColor = null; // Reset
+                currentColor = null;
             } else if (ANSI_COLORS[code]) {
                 currentColor = ANSI_COLORS[code];
             }
@@ -102,13 +103,26 @@ export function ErrorModal({
     const [visible, setVisible] = useState(false);
     const [isHoveringClose, setIsHoveringClose] = useState(false);
     const [isHoveringCopy, setIsHoveringCopy] = useState(false);
+    // Estado para garantir que rodamos apenas no client-side (evita erro de SSR com document.body)
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
 
     useEffect(() => {
         if (isOpen) {
+            // Trava o scroll do body quando o modal abre
+            document.body.style.overflow = 'hidden';
             setTimeout(() => setVisible(true), 10);
         } else {
+            document.body.style.overflow = '';
             setVisible(false);
         }
+
+        // Limpeza de segurança
+        return () => { document.body.style.overflow = ''; };
     }, [isOpen]);
 
     useEffect(() => {
@@ -120,10 +134,8 @@ export function ErrorModal({
         return () => window.removeEventListener('keydown', onKey);
     }, [isOpen, onClose]);
 
-    if (!isOpen || !error) return null;
+    if (!mounted || !isOpen || !error) return null;
 
-    // Combine raw error text to emulate a real terminal output
-    // Often build tools put the frame inside the message, so we prioritize message.
     const rawOutput = error.message || '';
     const stackOutput = error.stack ? `\n\nStack Trace:\n${error.stack}` : '';
 
@@ -131,17 +143,22 @@ export function ErrorModal({
 
     const overlayStyle: React.CSSProperties = {
         position: 'fixed',
-        inset: 0,
-        zIndex: 99999,
-        background: visible ? 'rgba(0, 0, 0, 0.75)' : 'rgba(0,0,0,0)',
-        backdropFilter: 'blur(8px)',
-        WebkitBackdropFilter: 'blur(8px)',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: 2147483647, // Max Z-Index seguro
+        // Fundo praticamente sólido (98% opacidade) para esconder o site atrás
+        background: visible ? 'rgba(5, 5, 5, 0.98)' : 'rgba(5, 5, 5, 0)',
+        backdropFilter: 'blur(10px)', // Blur extra caso algo vaze
+        WebkitBackdropFilter: 'blur(10px)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         padding: 24,
         transition: 'background 0.3s ease, opacity 0.3s ease',
         opacity: visible ? 1 : 0,
+        boxSizing: 'border-box',
     };
 
     const cardStyle: React.CSSProperties = {
@@ -150,10 +167,8 @@ export function ErrorModal({
         maxHeight: '90vh',
         display: 'flex',
         flexDirection: 'column',
-        // Super Glassmorphism Dark
-        background: 'rgba(10, 10, 12, 0.95)',
-        // Cyan Glow Border
-        boxShadow: '0 0 0 1px rgba(34, 211, 238, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.9)',
+        background: 'rgba(10, 10, 12, 1)', // Card totalmente sólido
+        boxShadow: '0 0 0 1px rgba(34, 211, 238, 0.15), 0 50px 100px -20px rgba(0, 0, 0, 1)',
         borderRadius: 16,
         overflow: 'hidden',
         transform: visible ? 'scale(1) translateY(0)' : 'scale(0.98) translateY(10px)',
@@ -221,7 +236,7 @@ export function ErrorModal({
         };
     };
 
-    return (
+    const modalContent = (
         <div style={overlayStyle} onMouseDown={onClose}>
             <div style={cardStyle} onMouseDown={(e) => e.stopPropagation()}>
                 <div style={neonLine} />
@@ -232,7 +247,7 @@ export function ErrorModal({
                          <span style={{
                              fontSize: 12,
                              fontWeight: 800,
-                             color: '#f87171', // Red for "ERROR"
+                             color: '#f87171',
                              letterSpacing: '0.1em'
                          }}>
                             ERROR
@@ -275,10 +290,7 @@ export function ErrorModal({
 
                 {/* Terminal Output */}
                 <div style={terminalContent}>
-                    {/* The star of the show: The ANSI parsed text */}
                     <AnsiText text={rawOutput} />
-
-                    {/* Stack trace appended if exists and usually not in message */}
                     {stackOutput && (
                         <div style={{ marginTop: 24, opacity: 0.6, borderTop: '1px dashed rgba(255,255,255,0.1)', paddingTop: 16 }}>
                             <AnsiText text={stackOutput} />
@@ -302,4 +314,7 @@ export function ErrorModal({
             </div>
         </div>
     );
+
+    // O PULO DO GATO: Renderiza direto no body para ignorar contexto de scroll dos pais
+    return createPortal(modalContent, document.body);
 }

package/src/client/entry.client.tsx

@@ -261,10 +261,12 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
 
 
 
+
+
 export function DevIndicator({
-    hasBuildError = false,
-    onClickBuildError,
-}: {
+                                 hasBuildError = false,
+                                 onClickBuildError,
+                             }: {
     hasBuildError?: boolean;
     onClickBuildError?: () => void;
 }) {
@@ -303,91 +305,95 @@ export function DevIndicator({
         <>
             <style>
                 {`
-          @keyframes nyte-pulse {
-            0% { opacity: 0.4; }
-            50% { opacity: 1; }
-            100% { opacity: 0.4; }
-          }
-          @keyframes nyte-spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-          }
-          .nyte-dev-badge {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 999999;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 8px 14px;
-            background: rgba(15, 15, 20, 0.8);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-  
-            border-radius: 10px;
-            color: #fff;
-            font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
-            font-size: 12px;
-            font-weight: 600;
-            letter-spacing: 0.05em;
-
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-            transition: all 0.2s ease;
-            cursor: default;
-            user-select: none;
-          }
-          .nyte-dev-badge.clickable {
-            cursor: pointer;
-          }
-          .nyte-dev-badge:hover {
-            border-color: rgba(142, 45, 226, 0.5);
-            transform: translateY(-2px);
-          }
-          .nyte-status-dot {
-            width: 8px;
-            height: 8px;
-            background: #10b981; /* Verde esmeralda */
-            border-radius: 50%;
-            box-shadow: 0 0 10px #10b981;
-            animation: nyte-pulse 2s infinite ease-in-out;
-          }
-          .nyte-status-dot.reloading {
-            background: #f59e0b; /* Amber */
-            box-shadow: 0 0 10px #f59e0b;
-          }
-          .nyte-status-dot.error {
-            background: #ef4444; /* Red */
-            box-shadow: 0 0 12px #ef4444;
-            animation: nyte-pulse 1.2s infinite ease-in-out;
-          }
-          .nyte-spinner {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            border: 2px solid rgba(255,255,255,0.25);
-            border-top-color: rgba(255,255,255,0.85);
-            animation: nyte-spin 0.8s linear infinite;
-          }
-          .nyte-logo {
-            background: linear-gradient(135deg, #00a3a3, #808080);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-weight: 800;
-          }
-          .nyte-error-pill {
-            margin-left: 6px;
-            padding: 2px 6px;
-            border-radius: 999px;
-            background: rgba(239, 68, 68, 0.18);
-            border: 1px solid rgba(239, 68, 68, 0.35);
-            color: rgba(255,255,255,0.9);
-            font-size: 10px;
-            font-weight: 800;
-            letter-spacing: 0.08em;
-            text-transform: uppercase;
-          }
-        `}
+      @keyframes nyte-pulse {
+        0% { opacity: 0.4; }
+        50% { opacity: 1; }
+        100% { opacity: 0.4; }
+      }
+      @keyframes nyte-spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      .nyte-dev-badge {
+        /* AQUI ESTÁ O QUE SEGURA ELE NA TELA: */
+        position: sticky;
+        bottom: 20px;
+        /* float e margens para forçar a direita no modo sticky */
+        float: right; 
+        margin-right: 20px;
+        z-index: 999999;
+        
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 14px;
+        background: rgba(15, 15, 20, 0.8);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+
+        border-radius: 10px;
+        color: #fff;
+        font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.05em;
+
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        transition: all 0.2s ease;
+        cursor: default;
+        user-select: none;
+      }
+      .nyte-dev-badge.clickable {
+        cursor: pointer;
+      }
+      .nyte-dev-badge:hover {
+        border-color: rgba(142, 45, 226, 0.5);
+        transform: translateY(-2px);
+      }
+      .nyte-status-dot {
+        width: 8px;
+        height: 8px;
+        background: #10b981; /* Verde esmeralda */
+        border-radius: 50%;
+        box-shadow: 0 0 10px #10b981;
+        animation: nyte-pulse 2s infinite ease-in-out;
+      }
+      .nyte-status-dot.reloading {
+        background: #f59e0b; /* Amber */
+        box-shadow: 0 0 10px #f59e0b;
+      }
+      .nyte-status-dot.error {
+        background: #ef4444; /* Red */
+        box-shadow: 0 0 12px #ef4444;
+        animation: nyte-pulse 1.2s infinite ease-in-out;
+      }
+      .nyte-spinner {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        border: 2px solid rgba(255,255,255,0.25);
+        border-top-color: rgba(255,255,255,0.85);
+        animation: nyte-spin 0.8s linear infinite;
+      }
+      .nyte-logo {
+        background: linear-gradient(135deg, #00a3a3, #808080);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-weight: 800;
+      }
+      .nyte-error-pill {
+        margin-left: 6px;
+        padding: 2px 6px;
+        border-radius: 999px;
+        background: rgba(239, 68, 68, 0.18);
+        border: 1px solid rgba(239, 68, 68, 0.35);
+        color: rgba(255,255,255,0.9);
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+    `}
             </style>
 
             <div