vatts 2.0.2 → 2.0.3-canary.1

package/dist/react/BuildingPage.js

@@ -27,203 +27,203 @@ function BuildingScreen() {
         version = require("../package.json").version;
     }
     catch (e) { }
-    const styles = `
-        :root {
-            --bg-solid: #000000;
-            --card-bg: #0a0a0a;
-            /* PALETA: React Theme */
-            --react-cyan: #61DAFB;      /* O azul/ciano clássico do React */
-            --react-dark: #20232a;      /* Fundo escuro azulado */
-            --primary: #ffffff;
-            --primary-glow: rgba(97, 218, 251, 0.1);
-            --text-main: #ffffff;
-            --text-muted: #8ea9c7;      /* Cinza azulado para combinar */
-        }
-
-        body {
-            margin: 0;
-            padding: 0;
-            width: 100vw;
-            height: 100vh;
-            background-color: var(--bg-solid);
-            font-family: 'Inter', sans-serif;
-            color: var(--text-main);
-            overflow: hidden;
-            position: relative;
-        }
-
-        .container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            pointer-events: none;
-        }
-
-        .build-card {
-            pointer-events: auto;
-            position: relative;
-            width: 100%;
-            max-width: 420px;
-            background: var(--card-bg);
-            /* 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;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-        }
-
-        .neon-line {
-            height: 1px;
-            width: 100%;
-            /* 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 {
-            padding: 40px 32px;
-            width: 100%;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        .logo-wrapper {
-            position: relative;
-            margin-bottom: 24px;
-        }
-        
-        .logo-wrapper img {
-            width: 64px;
-            height: 64px;
-            object-fit: contain;
-            position: relative;
-            z-index: 2;
-            /* Removi o grayscale para a logo brilhar na cor natural se tiver cor, ou ficar nítida */
-            filter: none;
-        }
-
-        .logo-glow {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 100%;
-            height: 100%;
-            /* Glow Cyan do React */
-            background: var(--react-cyan);
-            filter: blur(25px);
-            opacity: 0.2;
-            border-radius: 50%;
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        h1 {
-            margin: 0;
-            font-size: 2rem;
-            font-weight: 800;
-            letter-spacing: -0.03em;
-            /* 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 {
-            /* Span .js em Cyan Sólido */
-            color: var(--react-cyan);
-            -webkit-text-fill-color: var(--react-cyan);
-        }
-
-        p {
-            margin: 8px 0 32px 0;
-            color: var(--text-muted);
-            font-size: 0.9rem;
-            font-weight: 500;
-        }
-
-        .terminal-box {
-            width: 100%;
-            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: var(--text-muted);
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .term-line {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .term-spinner {
-            width: 10px;
-            height: 10px;
-            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: #8ea9c7; }
-        .accent { color: var(--react-cyan); }
-
-        .card-footer {
-            width: 100%;
-            padding: 12px 32px;
-            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.3);
-            box-sizing: border-box;
-        }
-
-        .status-active {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            color: var(--react-cyan);
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-
-        .dot {
-            width: 6px;
-            height: 6px;
-            background-color: var(--react-cyan);
-            border-radius: 50%;
-            box-shadow: 0 0 8px var(--react-cyan);
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
-            50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.1); }
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
+    const styles = `
+        :root {
+            --bg-solid: #000000;
+            --card-bg: #0a0a0a;
+            /* PALETA: React Theme */
+            --react-cyan: #61DAFB;      /* O azul/ciano clássico do React */
+            --react-dark: #20232a;      /* Fundo escuro azulado */
+            --primary: #ffffff;
+            --primary-glow: rgba(97, 218, 251, 0.1);
+            --text-main: #ffffff;
+            --text-muted: #8ea9c7;      /* Cinza azulado para combinar */
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100vw;
+            height: 100vh;
+            background-color: var(--bg-solid);
+            font-family: 'Inter', sans-serif;
+            color: var(--text-main);
+            overflow: hidden;
+            position: relative;
+        }
+
+        .container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            pointer-events: none;
+        }
+
+        .build-card {
+            pointer-events: auto;
+            position: relative;
+            width: 100%;
+            max-width: 420px;
+            background: var(--card-bg);
+            /* 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;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+
+        .neon-line {
+            height: 1px;
+            width: 100%;
+            /* 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 {
+            padding: 40px 32px;
+            width: 100%;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .logo-wrapper {
+            position: relative;
+            margin-bottom: 24px;
+        }
+        
+        .logo-wrapper img {
+            width: 64px;
+            height: 64px;
+            object-fit: contain;
+            position: relative;
+            z-index: 2;
+            /* Removi o grayscale para a logo brilhar na cor natural se tiver cor, ou ficar nítida */
+            filter: none;
+        }
+
+        .logo-glow {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            height: 100%;
+            /* Glow Cyan do React */
+            background: var(--react-cyan);
+            filter: blur(25px);
+            opacity: 0.2;
+            border-radius: 50%;
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        h1 {
+            margin: 0;
+            font-size: 2rem;
+            font-weight: 800;
+            letter-spacing: -0.03em;
+            /* 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 {
+            /* Span .js em Cyan Sólido */
+            color: var(--react-cyan);
+            -webkit-text-fill-color: var(--react-cyan);
+        }
+
+        p {
+            margin: 8px 0 32px 0;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+
+        .terminal-box {
+            width: 100%;
+            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: var(--text-muted);
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .term-line {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .term-spinner {
+            width: 10px;
+            height: 10px;
+            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: #8ea9c7; }
+        .accent { color: var(--react-cyan); }
+
+        .card-footer {
+            width: 100%;
+            padding: 12px 32px;
+            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.3);
+            box-sizing: border-box;
+        }
+
+        .status-active {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--react-cyan);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .dot {
+            width: 6px;
+            height: 6px;
+            background-color: var(--react-cyan);
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--react-cyan);
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
+            50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.1); }
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
     `;
     return (react_1.default.createElement("html", { lang: "en" },
         react_1.default.createElement("head", null,
@@ -262,9 +262,9 @@ function BuildingScreen() {
                             react_1.default.createElement("div", { className: "dot" }),
                             "v",
                             version)))),
-            react_1.default.createElement("script", { dangerouslySetInnerHTML: { __html: `
-                setTimeout(() => {
-                    window.location.reload();
-                }, 2500);
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: { __html: `
+                setTimeout(() => {
+                    window.location.reload();
+                }, 2500);
             ` } }))));
 }

package/dist/react/DefaultNotFound.js

@@ -69,21 +69,21 @@ function ErrorPage() {
         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');
-
-        body {
-            margin: 0;
-            padding: 0;
-            background-color: ${theme.bg}; 
-            color: #ffffff;
-            font-family: 'Inter', system-ui, sans-serif;
-            overflow: hidden;
-            height: 100vh;
-            width: 100vw;
-        }
-
-        * { box-sizing: border-box; }
+    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;
+            background-color: ${theme.bg}; 
+            color: #ffffff;
+            font-family: 'Inter', system-ui, sans-serif;
+            overflow: hidden;
+            height: 100vh;
+            width: 100vw;
+        }
+
+        * { box-sizing: border-box; }
     `;
     // --- INLINE STYLES ---
     const containerStyle = {

package/dist/react/DevIndicator.js

@@ -78,107 +78,107 @@ function DevIndicator({ hasBuildError = false, onClickBuildError, }) {
     const isError = !!hasBuildError;
     // Criamos o elemento via Portal para injetar no final do <body>
     return (0, react_dom_1.createPortal)(react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("style", null, `
-                @keyframes vatts-pulse {
-                  0% { opacity: 0.4; }
-                  50% { opacity: 1; }
-                  100% { opacity: 0.4; }
-                }
-
-                @keyframes vatts-spin {
-                  0% { transform: rotate(0deg); }
-                  100% { transform: rotate(360deg); }
-                }
-
-                .vatts-dev-badge {
-                  position: fixed;
-                  bottom: 20px;
-                  right: 20px;
-                  /* Z-index absurdo para garantir que fique acima de tudo */
-                  z-index: 2147483647; 
-                  
-                  display: flex;
-                  align-items: center;
-                  gap: 12px;
-                  padding: 8px 14px;
-                  background: rgba(0, 0, 0, 0.85);
-                  backdrop-filter: blur(12px);
-                  -webkit-backdrop-filter: blur(12px);
-
-                  border-radius: 10px;
-                  color: #fff;
-                  font-family: 'Inter', system-ui, sans-serif;
-                  font-size: 11px;
-                  font-weight: 600;
-                  letter-spacing: 0.05em;
-
-                  /* Estilo Monocromático Next.js */
-                  border: 1px solid rgba(255, 255, 255, 0.1);
-                  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-                  transition: all 0.2s ease;
-                  cursor: default;
-                  user-select: none;
-                }
-
-                .vatts-dev-badge.clickable {
-                  cursor: pointer;
-                }
-
-                .vatts-dev-badge:hover {
-                  border-color: rgba(255, 255, 255, 0.3);
-                  transform: translateY(-2px);
-                  background: rgba(10, 10, 10, 0.95);
-                }
-
-                .vatts-status-dot {
-                  width: 7px;
-                  height: 7px;
-                  background: #ffffff; /* Branco para status OK (Estilo Vercel) */
-                  border-radius: 50%;
-                  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
-                  animation: vatts-pulse 2.5s infinite ease-in-out;
-                }
-
-                .vatts-status-dot.reloading {
-                  background: #64748b; /* Slate */
-                  box-shadow: none;
-                }
-
-                .vatts-status-dot.error {
-                  background: #ef4444; /* Mantido vermelho por semântica de erro */
-                  box-shadow: 0 0 10px #ef4444;
-                  animation: vatts-pulse 1s infinite ease-in-out;
-                }
-
-                .vatts-spinner {
-                  width: 10px;
-                  height: 10px;
-                  border-radius: 50%;
-                  border: 2px solid rgba(255,255,255,0.1);
-                  border-top-color: #ffffff;
-                  animation: vatts-spin 0.8s linear infinite;
-                }
-
-                .vatts-logo {
-                  color: #ffffff;
-                  font-weight: 800;
-                  display: flex;
-                  align-items: center;
-                }
-
-                .vatts-logo span {
-                  color: #64748b;
-                }
-
-                .vatts-error-pill {
-                  margin-left: 8px;
-                  padding: 2px 6px;
-                  border-radius: 4px;
-                  background: #ffffff;
-                  color: #000000;
-                  font-size: 9px;
-                  font-weight: 900;
-                }
+        react_1.default.createElement("style", null, `
+                @keyframes vatts-pulse {
+                  0% { opacity: 0.4; }
+                  50% { opacity: 1; }
+                  100% { opacity: 0.4; }
+                }
+
+                @keyframes vatts-spin {
+                  0% { transform: rotate(0deg); }
+                  100% { transform: rotate(360deg); }
+                }
+
+                .vatts-dev-badge {
+                  position: fixed;
+                  bottom: 20px;
+                  right: 20px;
+                  /* Z-index absurdo para garantir que fique acima de tudo */
+                  z-index: 2147483647; 
+                  
+                  display: flex;
+                  align-items: center;
+                  gap: 12px;
+                  padding: 8px 14px;
+                  background: rgba(0, 0, 0, 0.85);
+                  backdrop-filter: blur(12px);
+                  -webkit-backdrop-filter: blur(12px);
+
+                  border-radius: 10px;
+                  color: #fff;
+                  font-family: 'Inter', system-ui, sans-serif;
+                  font-size: 11px;
+                  font-weight: 600;
+                  letter-spacing: 0.05em;
+
+                  /* Estilo Monocromático Next.js */
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+                  transition: all 0.2s ease;
+                  cursor: default;
+                  user-select: none;
+                }
+
+                .vatts-dev-badge.clickable {
+                  cursor: pointer;
+                }
+
+                .vatts-dev-badge:hover {
+                  border-color: rgba(255, 255, 255, 0.3);
+                  transform: translateY(-2px);
+                  background: rgba(10, 10, 10, 0.95);
+                }
+
+                .vatts-status-dot {
+                  width: 7px;
+                  height: 7px;
+                  background: #ffffff; /* Branco para status OK (Estilo Vercel) */
+                  border-radius: 50%;
+                  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
+                  animation: vatts-pulse 2.5s infinite ease-in-out;
+                }
+
+                .vatts-status-dot.reloading {
+                  background: #64748b; /* Slate */
+                  box-shadow: none;
+                }
+
+                .vatts-status-dot.error {
+                  background: #ef4444; /* Mantido vermelho por semântica de erro */
+                  box-shadow: 0 0 10px #ef4444;
+                  animation: vatts-pulse 1s infinite ease-in-out;
+                }
+
+                .vatts-spinner {
+                  width: 10px;
+                  height: 10px;
+                  border-radius: 50%;
+                  border: 2px solid rgba(255,255,255,0.1);
+                  border-top-color: #ffffff;
+                  animation: vatts-spin 0.8s linear infinite;
+                }
+
+                .vatts-logo {
+                  color: #ffffff;
+                  font-weight: 800;
+                  display: flex;
+                  align-items: center;
+                }
+
+                .vatts-logo span {
+                  color: #64748b;
+                }
+
+                .vatts-error-pill {
+                  margin-left: 8px;
+                  padding: 2px 6px;
+                  border-radius: 4px;
+                  background: #ffffff;
+                  color: #000000;
+                  font-size: 9px;
+                  font-weight: 900;
+                }
                 `),
         react_1.default.createElement("div", { className: `vatts-dev-badge${isError ? ' clickable' : ''}`, onClick: () => isError && onClickBuildError?.() },
             isReloading ? (react_1.default.createElement("div", { className: "vatts-spinner" })) : (react_1.default.createElement("div", { className: `vatts-status-dot${isReloading ? ' reloading' : ''}${isError ? ' error' : ''}` })),