vatts 1.1.0-alpha.1 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -4
- package/dist/client/BuildingPage.d.ts +1 -0
- package/dist/client/BuildingPage.js +209 -0
- package/dist/client/DefaultNotFound.js +30 -32
- package/dist/client/DevIndicator.d.ts +2 -1
- package/dist/client/DevIndicator.js +102 -104
- package/dist/client/ErrorModal.js +50 -47
- package/dist/renderer.js +8 -266
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
<picture>
|
|
3
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo
|
|
4
|
-
<img alt="Vatts.js logo" src="https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png">
|
|
4
|
+
<img alt="Vatts.js logo" src="https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png" width="128">
|
|
5
5
|
</picture>
|
|
6
6
|
<h1>Vatts.js</h1>
|
|
7
7
|
|
|
8
8
|
[](https://www.npmjs.com/package/vatts)
|
|
9
|
-
[](./LICENSE)
|
|
10
|
-
|
|
9
|
+
[](./LICENSE)
|
|
10
|
+
[](https://github.com/mfrazlab/vatts.js)
|
|
11
11
|
</div>
|
|
12
12
|
|
|
13
13
|
___
|
|
@@ -45,3 +45,4 @@ If you believe you have found a security vulnerability in Vatts.js, we encourage
|
|
|
45
45
|
|
|
46
46
|
To participate in our vulnerability disclosure program, please email [helpers@mfraz.ovh](mailto:help@mfraz.ovh). We will add you to the program and provide further instructions for submitting your report.
|
|
47
47
|
|
|
48
|
+
___
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function BuildingScreen(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = BuildingScreen;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
function BuildingScreen() {
|
|
6
|
+
let version = "1.0.0";
|
|
7
|
+
try {
|
|
8
|
+
version = require("../package.json").version;
|
|
9
|
+
}
|
|
10
|
+
catch (e) { }
|
|
11
|
+
const styles = `
|
|
12
|
+
:root {
|
|
13
|
+
--bg-solid: #000000;
|
|
14
|
+
--card-bg: #0a0a0a;
|
|
15
|
+
/* PALETA: Monocromática estilo Next.js */
|
|
16
|
+
--primary: #ffffff;
|
|
17
|
+
--primary-glow: rgba(255, 255, 255, 0.1);
|
|
18
|
+
--text-main: #ffffff;
|
|
19
|
+
--text-muted: #64748b;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
body {
|
|
23
|
+
margin: 0;
|
|
24
|
+
padding: 0;
|
|
25
|
+
width: 100vw;
|
|
26
|
+
height: 100vh;
|
|
27
|
+
background-color: var(--bg-solid);
|
|
28
|
+
font-family: 'Inter', sans-serif;
|
|
29
|
+
color: var(--text-main);
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
position: relative;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.container {
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 50%;
|
|
37
|
+
left: 50%;
|
|
38
|
+
transform: translate(-50%, -50%);
|
|
39
|
+
display: flex;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
align-items: center;
|
|
42
|
+
width: 100%;
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.build-card {
|
|
47
|
+
pointer-events: auto;
|
|
48
|
+
position: relative;
|
|
49
|
+
width: 100%;
|
|
50
|
+
max-width: 420px;
|
|
51
|
+
background: var(--card-bg);
|
|
52
|
+
/* Borda sutil em cinza escuro */
|
|
53
|
+
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
|
|
54
|
+
border-radius: 20px;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
align-items: center;
|
|
59
|
+
text-align: center;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.neon-line {
|
|
63
|
+
height: 1px;
|
|
64
|
+
width: 100%;
|
|
65
|
+
/* Linha de luz branca/cinza */
|
|
66
|
+
background: linear-gradient(90deg, transparent, #334155, #ffffff, #334155, transparent);
|
|
67
|
+
box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.content {
|
|
71
|
+
padding: 40px 32px;
|
|
72
|
+
width: 100%;
|
|
73
|
+
box-sizing: border-box;
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
align-items: center;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.logo-wrapper {
|
|
80
|
+
position: relative;
|
|
81
|
+
margin-bottom: 24px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.logo-wrapper img {
|
|
85
|
+
width: 64px;
|
|
86
|
+
height: 64px;
|
|
87
|
+
object-fit: contain;
|
|
88
|
+
position: relative;
|
|
89
|
+
z-index: 2;
|
|
90
|
+
/* Deixa a logo levemente dessaturada para combinar */
|
|
91
|
+
filter: grayscale(0.5);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.logo-glow {
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: 50%;
|
|
97
|
+
left: 50%;
|
|
98
|
+
transform: translate(-50%, -50%);
|
|
99
|
+
width: 100%;
|
|
100
|
+
height: 100%;
|
|
101
|
+
background: #ffffff;
|
|
102
|
+
filter: blur(25px);
|
|
103
|
+
opacity: 0.1;
|
|
104
|
+
border-radius: 50%;
|
|
105
|
+
animation: pulse 2s ease-in-out infinite;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
h1 {
|
|
109
|
+
margin: 0;
|
|
110
|
+
font-size: 2rem;
|
|
111
|
+
font-weight: 800;
|
|
112
|
+
letter-spacing: -0.03em;
|
|
113
|
+
background: linear-gradient(180deg, #ffffff 0%, #475569 100%);
|
|
114
|
+
-webkit-background-clip: text;
|
|
115
|
+
-webkit-text-fill-color: transparent;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
h1 span {
|
|
119
|
+
color: #475569;
|
|
120
|
+
-webkit-text-fill-color: #475569;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
p {
|
|
124
|
+
margin: 8px 0 32px 0;
|
|
125
|
+
color: var(--text-muted);
|
|
126
|
+
font-size: 0.9rem;
|
|
127
|
+
font-weight: 500;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.terminal-box {
|
|
131
|
+
width: 100%;
|
|
132
|
+
background: rgba(255, 255, 255, 0.02);
|
|
133
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
134
|
+
border-radius: 12px;
|
|
135
|
+
padding: 16px;
|
|
136
|
+
text-align: left;
|
|
137
|
+
font-family: 'JetBrains Mono', monospace;
|
|
138
|
+
font-size: 0.75rem;
|
|
139
|
+
color: #475569;
|
|
140
|
+
box-sizing: border-box;
|
|
141
|
+
display: flex;
|
|
142
|
+
flex-direction: column;
|
|
143
|
+
gap: 8px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.term-line {
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
gap: 8px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.term-spinner {
|
|
153
|
+
width: 10px;
|
|
154
|
+
height: 10px;
|
|
155
|
+
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
156
|
+
border-top-color: #ffffff;
|
|
157
|
+
border-radius: 50%;
|
|
158
|
+
animation: spin 0.6s linear infinite;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.file-name { color: #94a3b8; }
|
|
162
|
+
.accent { color: #ffffff; }
|
|
163
|
+
|
|
164
|
+
.card-footer {
|
|
165
|
+
width: 100%;
|
|
166
|
+
padding: 12px 32px;
|
|
167
|
+
background: rgba(255,255,255,0.02);
|
|
168
|
+
border-top: 1px solid rgba(255,255,255,0.05);
|
|
169
|
+
display: flex;
|
|
170
|
+
justify-content: space-between;
|
|
171
|
+
align-items: center;
|
|
172
|
+
font-size: 11px;
|
|
173
|
+
color: rgba(255,255,255,0.2);
|
|
174
|
+
box-sizing: border-box;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.status-active {
|
|
178
|
+
display: flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
gap: 6px;
|
|
181
|
+
color: #ffffff;
|
|
182
|
+
font-weight: 600;
|
|
183
|
+
text-transform: uppercase;
|
|
184
|
+
letter-spacing: 0.05em;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.dot {
|
|
188
|
+
width: 6px;
|
|
189
|
+
height: 6px;
|
|
190
|
+
background-color: #ffffff;
|
|
191
|
+
border-radius: 50%;
|
|
192
|
+
box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@keyframes pulse {
|
|
196
|
+
0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
|
|
197
|
+
50% { opacity: 0.15; transform: translate(-50%, -50%) scale(1.1); }
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
@keyframes spin {
|
|
201
|
+
to { transform: rotate(360deg); }
|
|
202
|
+
}
|
|
203
|
+
`;
|
|
204
|
+
return ((0, jsx_runtime_1.jsxs)("html", { lang: "en", children: [(0, jsx_runtime_1.jsxs)("head", { children: [(0, jsx_runtime_1.jsx)("meta", { charSet: "UTF-8" }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), (0, jsx_runtime_1.jsx)("title", { children: "Vatts.js | Building..." }), (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), (0, jsx_runtime_1.jsx)("link", { href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap", rel: "stylesheet" }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: styles } })] }), (0, jsx_runtime_1.jsxs)("body", { children: [(0, jsx_runtime_1.jsx)("div", { className: "container", children: (0, jsx_runtime_1.jsxs)("div", { className: "build-card", children: [(0, jsx_runtime_1.jsx)("div", { className: "neon-line" }), (0, jsx_runtime_1.jsxs)("div", { className: "content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "logo-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "logo-glow" }), (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png", alt: "Vatts Logo" })] }), (0, jsx_runtime_1.jsxs)("h1", { children: ["Vatts", (0, jsx_runtime_1.jsx)("span", { children: ".js" })] }), (0, jsx_runtime_1.jsx)("p", { children: "Building your masterpiece..." }), (0, jsx_runtime_1.jsxs)("div", { className: "terminal-box", children: [(0, jsx_runtime_1.jsxs)("div", { className: "term-line", children: [(0, jsx_runtime_1.jsx)("div", { className: "term-spinner" }), (0, jsx_runtime_1.jsxs)("span", { className: "file-name", children: ["Compiling ", (0, jsx_runtime_1.jsx)("span", { className: "accent", children: "src/vatts.ts" }), "..."] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "term-line", style: { opacity: 0.5 }, children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), (0, jsx_runtime_1.jsx)("span", { className: "file-name", children: "Optimizing assets" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card-footer", children: [(0, jsx_runtime_1.jsx)("span", { children: "Building..." }), (0, jsx_runtime_1.jsxs)("div", { className: "status-active", children: [(0, jsx_runtime_1.jsx)("div", { className: "dot" }), "v", version] })] })] }) }), (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: `
|
|
205
|
+
setTimeout(() => {
|
|
206
|
+
window.location.reload();
|
|
207
|
+
}, 2500);
|
|
208
|
+
` } })] })] }));
|
|
209
|
+
}
|
|
@@ -35,8 +35,8 @@ function ErrorPage() {
|
|
|
35
35
|
body {
|
|
36
36
|
margin: 0;
|
|
37
37
|
padding: 0;
|
|
38
|
-
background-color: #
|
|
39
|
-
color: #
|
|
38
|
+
background-color: #000000;
|
|
39
|
+
color: #ffffff;
|
|
40
40
|
font-family: 'Inter', system-ui, sans-serif;
|
|
41
41
|
overflow: hidden;
|
|
42
42
|
height: 100vh;
|
|
@@ -46,10 +46,10 @@ function ErrorPage() {
|
|
|
46
46
|
* { box-sizing: border-box; }
|
|
47
47
|
`;
|
|
48
48
|
// --- INLINE STYLES ---
|
|
49
|
-
//
|
|
50
|
-
const primaryColor = '#
|
|
51
|
-
const primaryColorDark = '#
|
|
52
|
-
const primaryRgb = '255,
|
|
49
|
+
// Paleta Estilo Next.js (Preto, Branco, Cinza)
|
|
50
|
+
const primaryColor = '#ffffff';
|
|
51
|
+
const primaryColorDark = '#64748b';
|
|
52
|
+
const primaryRgb = '255, 255, 255';
|
|
53
53
|
const containerStyle = {
|
|
54
54
|
position: 'fixed',
|
|
55
55
|
top: 0,
|
|
@@ -63,15 +63,15 @@ function ErrorPage() {
|
|
|
63
63
|
justifyContent: 'center',
|
|
64
64
|
width: '100vw',
|
|
65
65
|
height: '100vh',
|
|
66
|
-
background: '#
|
|
66
|
+
background: '#000000',
|
|
67
67
|
};
|
|
68
68
|
const cardStyle = {
|
|
69
69
|
width: 'min(90%, 500px)',
|
|
70
70
|
display: 'flex',
|
|
71
71
|
flexDirection: 'column',
|
|
72
|
-
background: '
|
|
73
|
-
//
|
|
74
|
-
boxShadow: `0 0 0 1px rgba(
|
|
72
|
+
background: '#0a0a0a',
|
|
73
|
+
// Borda sutil branca/cinza
|
|
74
|
+
boxShadow: `0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9)`,
|
|
75
75
|
borderRadius: 20,
|
|
76
76
|
overflow: 'hidden',
|
|
77
77
|
position: 'relative',
|
|
@@ -79,10 +79,10 @@ function ErrorPage() {
|
|
|
79
79
|
const neonLine = {
|
|
80
80
|
height: '1px',
|
|
81
81
|
width: '100%',
|
|
82
|
-
//
|
|
83
|
-
background: `linear-gradient(90deg, transparent,
|
|
84
|
-
//
|
|
85
|
-
boxShadow: `0 0 15px rgba(
|
|
82
|
+
// Gradiente monocromático
|
|
83
|
+
background: `linear-gradient(90deg, transparent, #334155, #ffffff, #334155, transparent)`,
|
|
84
|
+
// Brilho branco suave
|
|
85
|
+
boxShadow: `0 0 15px rgba(255, 255, 255, 0.1)`,
|
|
86
86
|
};
|
|
87
87
|
const contentStyle = {
|
|
88
88
|
padding: '32px',
|
|
@@ -97,20 +97,19 @@ function ErrorPage() {
|
|
|
97
97
|
lineHeight: 1,
|
|
98
98
|
letterSpacing: '-0.04em',
|
|
99
99
|
color: '#fff',
|
|
100
|
-
background: 'linear-gradient(180deg, #ffffff 0%, #
|
|
100
|
+
background: 'linear-gradient(180deg, #ffffff 0%, #475569 100%)',
|
|
101
101
|
WebkitBackgroundClip: 'text',
|
|
102
102
|
WebkitTextFillColor: 'transparent',
|
|
103
103
|
marginBottom: 16,
|
|
104
|
-
|
|
105
|
-
filter: `drop-shadow(0 0 20px rgba(${primaryRgb}, 0.15))`,
|
|
104
|
+
filter: `drop-shadow(0 0 20px rgba(255, 255, 255, 0.05))`,
|
|
106
105
|
};
|
|
107
106
|
const terminalBoxStyle = {
|
|
108
107
|
width: '100%',
|
|
109
|
-
background: 'rgba(
|
|
108
|
+
background: 'rgba(255, 255, 255, 0.02)',
|
|
110
109
|
borderRadius: 12,
|
|
111
110
|
padding: '16px',
|
|
112
111
|
marginBottom: 24,
|
|
113
|
-
border: '1px solid rgba(255, 255, 255, 0.
|
|
112
|
+
border: '1px solid rgba(255, 255, 255, 0.08)',
|
|
114
113
|
fontFamily: '"JetBrains Mono", monospace',
|
|
115
114
|
fontSize: 12,
|
|
116
115
|
textAlign: 'left',
|
|
@@ -126,27 +125,26 @@ function ErrorPage() {
|
|
|
126
125
|
fontSize: 13,
|
|
127
126
|
fontWeight: 600,
|
|
128
127
|
cursor: 'pointer',
|
|
129
|
-
transition: '
|
|
128
|
+
transition: 'all 0.2s ease',
|
|
130
129
|
border: 'none',
|
|
131
130
|
outline: 'none',
|
|
132
131
|
textDecoration: 'none',
|
|
133
132
|
fontFamily: 'Inter, sans-serif',
|
|
134
133
|
};
|
|
135
134
|
if (kind === 'primary') {
|
|
136
|
-
// COR ALTERADA: Estilos do botão primário para laranja
|
|
137
135
|
return {
|
|
138
136
|
...base,
|
|
139
|
-
background: hovering ?
|
|
140
|
-
color:
|
|
141
|
-
boxShadow: hovering ? `0 0 20px rgba(
|
|
137
|
+
background: hovering ? '#ffffff' : '#f8fafc',
|
|
138
|
+
color: '#000000',
|
|
139
|
+
boxShadow: hovering ? `0 0 20px rgba(255, 255, 255, 0.2)` : 'none',
|
|
142
140
|
};
|
|
143
141
|
}
|
|
144
142
|
return {
|
|
145
143
|
...base,
|
|
146
|
-
background: hovering ? 'rgba(255, 255, 255, 0.
|
|
144
|
+
background: hovering ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
|
|
147
145
|
color: hovering ? '#fff' : 'rgba(255, 255, 255, 0.6)',
|
|
148
|
-
border: '1px solid
|
|
149
|
-
borderColor: hovering ? 'rgba(255, 255, 255, 0.
|
|
146
|
+
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
147
|
+
borderColor: hovering ? 'rgba(255, 255, 255, 0.3)' : 'rgba(255, 255, 255, 0.1)',
|
|
150
148
|
};
|
|
151
149
|
};
|
|
152
150
|
const brandStyle = {
|
|
@@ -159,14 +157,14 @@ function ErrorPage() {
|
|
|
159
157
|
textDecoration: 'none',
|
|
160
158
|
color: '#fff',
|
|
161
159
|
};
|
|
162
|
-
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.
|
|
160
|
+
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.3 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { style: { color: '#64748b' }, children: "GET" }), ' ', (0, jsx_runtime_1.jsx)("span", { style: { color: '#fff' }, children: path })] }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: 4, color: '#475569' }, 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.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), (0, jsx_runtime_1.jsx)("polyline", { points: "9 22 9 12 15 12 15 22" })] }), "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.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M21 2v6h-6" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 22v-6h6" }), (0, jsx_runtime_1.jsx)("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" })] }), "Retry"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
163
161
|
padding: '12px 32px',
|
|
164
|
-
background: 'rgba(
|
|
165
|
-
borderTop: '1px solid rgba(255,255,255,0.
|
|
162
|
+
background: 'rgba(255,255,255,0.02)',
|
|
163
|
+
borderTop: '1px solid rgba(255,255,255,0.05)',
|
|
166
164
|
display: 'flex',
|
|
167
165
|
justifyContent: 'space-between',
|
|
168
166
|
alignItems: 'center',
|
|
169
167
|
fontSize: 11,
|
|
170
|
-
color: 'rgba(255,255,255,0.
|
|
171
|
-
}, children: [(0, jsx_runtime_1.jsx)("span", { children: "Vatts Server" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [(0, jsx_runtime_1.
|
|
168
|
+
color: 'rgba(255,255,255,0.3)'
|
|
169
|
+
}, children: [(0, jsx_runtime_1.jsx)("span", { children: "Vatts Server" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 6, height: 6, borderRadius: '50%', background: '#475569' } }), (0, jsx_runtime_1.jsx)("span", { style: { color: '#94a3b8' }, children: "Not Found" })] })] })] }), (0, jsx_runtime_1.jsxs)("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', children: [(0, jsx_runtime_1.jsx)("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)' } }), (0, jsx_runtime_1.jsxs)("span", { style: { fontSize: 13, fontWeight: 600, color: '#fff' }, children: ["Vatts", (0, jsx_runtime_1.jsx)("span", { style: { color: "#64748b" }, children: ".js" })] })] })] })] }));
|
|
172
170
|
}
|
|
@@ -3,147 +3,145 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.default = DevIndicator;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
|
+
const react_dom_1 = require("react-dom");
|
|
6
7
|
function DevIndicator({ hasBuildError = false, onClickBuildError, }) {
|
|
7
8
|
const [isVisible, setIsVisible] = (0, react_1.useState)(true);
|
|
8
9
|
const [hotState, setHotState] = (0, react_1.useState)('idle');
|
|
10
|
+
const [mounted, setMounted] = (0, react_1.useState)(false);
|
|
9
11
|
(0, react_1.useEffect)(() => {
|
|
12
|
+
setMounted(true);
|
|
10
13
|
const handler = (ev) => {
|
|
11
14
|
const detail = ev?.detail;
|
|
12
15
|
if (!detail || !detail.state)
|
|
13
16
|
return;
|
|
14
|
-
if (detail.state === 'reloading') {
|
|
17
|
+
if (detail.state === 'reloading' || detail.state === 'full-reload') {
|
|
15
18
|
setHotState('reloading');
|
|
16
19
|
}
|
|
17
20
|
if (detail.state === 'idle') {
|
|
18
21
|
setHotState('idle');
|
|
19
22
|
}
|
|
20
|
-
// Em casos de full reload, pode ficar como reloading até recarregar a página
|
|
21
|
-
if (detail.state === 'full-reload') {
|
|
22
|
-
setHotState('reloading');
|
|
23
|
-
}
|
|
24
23
|
};
|
|
25
24
|
window.addEventListener('vatts:hotreload', handler);
|
|
26
25
|
return () => window.removeEventListener('vatts:hotreload', handler);
|
|
27
26
|
}, []);
|
|
28
|
-
if (!isVisible)
|
|
27
|
+
if (!isVisible || !mounted)
|
|
29
28
|
return null;
|
|
30
29
|
const isReloading = hotState === 'reloading';
|
|
31
30
|
const isError = !!hasBuildError;
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
31
|
+
// Criamos o elemento via Portal para injetar no final do <body>
|
|
32
|
+
return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
33
|
+
@keyframes vatts-pulse {
|
|
34
|
+
0% { opacity: 0.4; }
|
|
35
|
+
50% { opacity: 1; }
|
|
36
|
+
100% { opacity: 0.4; }
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@keyframes vatts-spin {
|
|
40
|
+
0% { transform: rotate(0deg); }
|
|
41
|
+
100% { transform: rotate(360deg); }
|
|
42
|
+
}
|
|
38
43
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
.vatts-dev-badge {
|
|
45
|
+
position: fixed;
|
|
46
|
+
bottom: 20px;
|
|
47
|
+
right: 20px;
|
|
48
|
+
/* Z-index absurdo para garantir que fique acima de tudo */
|
|
49
|
+
z-index: 2147483647;
|
|
50
|
+
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: 12px;
|
|
54
|
+
padding: 8px 14px;
|
|
55
|
+
background: rgba(0, 0, 0, 0.85);
|
|
56
|
+
backdrop-filter: blur(12px);
|
|
57
|
+
-webkit-backdrop-filter: blur(12px);
|
|
43
58
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
display: flex;
|
|
51
|
-
align-items: center;
|
|
52
|
-
gap: 12px;
|
|
53
|
-
padding: 8px 14px;
|
|
54
|
-
background: rgba(15, 15, 20, 0.8);
|
|
55
|
-
backdrop-filter: blur(12px);
|
|
56
|
-
-webkit-backdrop-filter: blur(12px);
|
|
59
|
+
border-radius: 10px;
|
|
60
|
+
color: #fff;
|
|
61
|
+
font-family: 'Inter', system-ui, sans-serif;
|
|
62
|
+
font-size: 11px;
|
|
63
|
+
font-weight: 600;
|
|
64
|
+
letter-spacing: 0.05em;
|
|
57
65
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
66
|
+
/* Estilo Monocromático Next.js */
|
|
67
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
68
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
|
|
69
|
+
transition: all 0.2s ease;
|
|
70
|
+
cursor: default;
|
|
71
|
+
user-select: none;
|
|
72
|
+
}
|
|
64
73
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
cursor: default;
|
|
69
|
-
user-select: none;
|
|
70
|
-
}
|
|
74
|
+
.vatts-dev-badge.clickable {
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
}
|
|
71
77
|
|
|
72
|
-
.vatts-dev-badge
|
|
73
|
-
|
|
74
|
-
|
|
78
|
+
.vatts-dev-badge:hover {
|
|
79
|
+
border-color: rgba(255, 255, 255, 0.3);
|
|
80
|
+
transform: translateY(-2px);
|
|
81
|
+
background: rgba(10, 10, 10, 0.95);
|
|
82
|
+
}
|
|
75
83
|
|
|
76
|
-
.vatts-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
84
|
+
.vatts-status-dot {
|
|
85
|
+
width: 7px;
|
|
86
|
+
height: 7px;
|
|
87
|
+
background: #ffffff; /* Branco para status OK (Estilo Vercel) */
|
|
88
|
+
border-radius: 50%;
|
|
89
|
+
box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
|
|
90
|
+
animation: vatts-pulse 2.5s infinite ease-in-out;
|
|
91
|
+
}
|
|
82
92
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
background: #10b981; /* Verde esmeralda */
|
|
88
|
-
border-radius: 50%;
|
|
89
|
-
box-shadow: 0 0 10px #10b981;
|
|
90
|
-
animation: vatts-pulse 2s infinite ease-in-out;
|
|
91
|
-
}
|
|
93
|
+
.vatts-status-dot.reloading {
|
|
94
|
+
background: #64748b; /* Slate */
|
|
95
|
+
box-shadow: none;
|
|
96
|
+
}
|
|
92
97
|
|
|
93
|
-
.vatts-status-dot.
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
98
|
+
.vatts-status-dot.error {
|
|
99
|
+
background: #ef4444; /* Mantido vermelho por semântica de erro */
|
|
100
|
+
box-shadow: 0 0 10px #ef4444;
|
|
101
|
+
animation: vatts-pulse 1s infinite ease-in-out;
|
|
102
|
+
}
|
|
97
103
|
|
|
98
|
-
.vatts-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
104
|
+
.vatts-spinner {
|
|
105
|
+
width: 10px;
|
|
106
|
+
height: 10px;
|
|
107
|
+
border-radius: 50%;
|
|
108
|
+
border: 2px solid rgba(255,255,255,0.1);
|
|
109
|
+
border-top-color: #ffffff;
|
|
110
|
+
animation: vatts-spin 0.8s linear infinite;
|
|
111
|
+
}
|
|
103
112
|
|
|
104
|
-
.vatts-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
animation: vatts-spin 0.8s linear infinite;
|
|
111
|
-
}
|
|
113
|
+
.vatts-logo {
|
|
114
|
+
color: #ffffff;
|
|
115
|
+
font-weight: 800;
|
|
116
|
+
display: flex;
|
|
117
|
+
align-items: center;
|
|
118
|
+
}
|
|
112
119
|
|
|
113
|
-
.vatts-logo {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
-webkit-background-clip: text;
|
|
117
|
-
-webkit-text-fill-color: transparent;
|
|
118
|
-
font-weight: 800;
|
|
119
|
-
}
|
|
120
|
+
.vatts-logo span {
|
|
121
|
+
color: #64748b;
|
|
122
|
+
}
|
|
120
123
|
|
|
121
|
-
.vatts-error-pill {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
text-transform: uppercase;
|
|
132
|
-
}
|
|
133
|
-
` }), (0, jsx_runtime_1.jsxs)("div", { className: `vatts-dev-badge${isError ? ' clickable' : ''}`, title: isError ? 'Build com erro — clique para ver detalhes' : undefined, onClick: () => {
|
|
134
|
-
if (isError) {
|
|
135
|
-
onClickBuildError?.();
|
|
136
|
-
}
|
|
137
|
-
}, children: [isReloading ? ((0, jsx_runtime_1.jsx)("div", { className: "vatts-spinner" })) : ((0, jsx_runtime_1.jsx)("div", { className: `vatts-status-dot${isReloading ? ' reloading' : ''}${isError ? ' error' : ''}` })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "vatts-logo", children: "VATTS.JS" }), isError ? (0, jsx_runtime_1.jsx)("span", { className: "vatts-error-pill", children: "ERROR" }) : null] }), (0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
|
|
124
|
+
.vatts-error-pill {
|
|
125
|
+
margin-left: 8px;
|
|
126
|
+
padding: 2px 6px;
|
|
127
|
+
border-radius: 4px;
|
|
128
|
+
background: #ffffff;
|
|
129
|
+
color: #000000;
|
|
130
|
+
font-size: 9px;
|
|
131
|
+
font-weight: 900;
|
|
132
|
+
}
|
|
133
|
+
` }), (0, jsx_runtime_1.jsxs)("div", { className: `vatts-dev-badge${isError ? ' clickable' : ''}`, onClick: () => isError && onClickBuildError?.(), children: [isReloading ? ((0, jsx_runtime_1.jsx)("div", { className: "vatts-spinner" })) : ((0, jsx_runtime_1.jsx)("div", { className: `vatts-status-dot${isReloading ? ' reloading' : ''}${isError ? ' error' : ''}` })), (0, jsx_runtime_1.jsxs)("div", { className: "vatts-logo", children: ["VATTS", (0, jsx_runtime_1.jsx)("span", { children: ".JS" }), isError && (0, jsx_runtime_1.jsx)("span", { className: "vatts-error-pill", children: "ERROR" })] }), (0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
|
|
138
134
|
e.stopPropagation();
|
|
139
135
|
setIsVisible(false);
|
|
140
136
|
}, style: {
|
|
141
137
|
background: 'none',
|
|
142
138
|
border: 'none',
|
|
143
|
-
color: 'rgba(255,255,255,0.
|
|
139
|
+
color: 'rgba(255,255,255,0.2)',
|
|
144
140
|
cursor: 'pointer',
|
|
145
|
-
fontSize: '
|
|
141
|
+
fontSize: '16px',
|
|
146
142
|
padding: '0 0 0 4px',
|
|
147
|
-
marginLeft: '4px'
|
|
148
|
-
|
|
143
|
+
marginLeft: '4px',
|
|
144
|
+
display: 'flex',
|
|
145
|
+
alignItems: 'center'
|
|
146
|
+
}, children: "\u00D7" })] })] }), document.body);
|
|
149
147
|
}
|
|
@@ -20,16 +20,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
20
20
|
*/
|
|
21
21
|
const react_1 = require("react");
|
|
22
22
|
const react_dom_1 = require("react-dom");
|
|
23
|
-
// --- ANSI PARSER LOGIC ---
|
|
23
|
+
// --- ANSI PARSER LOGIC (Monochrome Adjusted) ---
|
|
24
24
|
const ANSI_COLORS = {
|
|
25
|
-
'30': '#
|
|
26
|
-
'31': '#
|
|
27
|
-
'32': '#
|
|
28
|
-
'33': '#
|
|
29
|
-
'34': '#
|
|
30
|
-
'35': '#
|
|
31
|
-
'36': '#
|
|
32
|
-
'37': '#
|
|
25
|
+
'30': '#475569',
|
|
26
|
+
'31': '#ef4444', // Mantido um vermelho sutil para erros no log
|
|
27
|
+
'32': '#ffffff', // Sucesso vira Branco
|
|
28
|
+
'33': '#94a3b8', // Warning vira Cinza
|
|
29
|
+
'34': '#cbd5e1',
|
|
30
|
+
'35': '#e2e8f0',
|
|
31
|
+
'36': '#ffffff', // Accent vira Branco
|
|
32
|
+
'37': '#ffffff',
|
|
33
33
|
'90': '#64748b',
|
|
34
34
|
};
|
|
35
35
|
function AnsiText({ text }) {
|
|
@@ -67,10 +67,10 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
|
|
|
67
67
|
const [isHoveringClose, setIsHoveringClose] = (0, react_1.useState)(false);
|
|
68
68
|
const [isHoveringCopy, setIsHoveringCopy] = (0, react_1.useState)(false);
|
|
69
69
|
const [mounted, setMounted] = (0, react_1.useState)(false);
|
|
70
|
-
//
|
|
71
|
-
const primaryColor = '#
|
|
72
|
-
const
|
|
73
|
-
const
|
|
70
|
+
// Paleta Next.js
|
|
71
|
+
const primaryColor = '#ffffff';
|
|
72
|
+
const primaryRgb = '255, 255, 255';
|
|
73
|
+
const borderColor = 'rgba(255, 255, 255, 0.1)';
|
|
74
74
|
(0, react_1.useEffect)(() => {
|
|
75
75
|
setMounted(true);
|
|
76
76
|
return () => setMounted(false);
|
|
@@ -108,14 +108,14 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
|
|
|
108
108
|
width: '100vw',
|
|
109
109
|
height: '100vh',
|
|
110
110
|
zIndex: 2147483647,
|
|
111
|
-
background: visible ? 'rgba(
|
|
112
|
-
backdropFilter: 'blur(
|
|
113
|
-
WebkitBackdropFilter: 'blur(
|
|
111
|
+
background: visible ? 'rgba(0, 0, 0, 0.95)' : 'rgba(0, 0, 0, 0)',
|
|
112
|
+
backdropFilter: 'blur(12px)',
|
|
113
|
+
WebkitBackdropFilter: 'blur(12px)',
|
|
114
114
|
display: 'flex',
|
|
115
115
|
alignItems: 'center',
|
|
116
116
|
justifyContent: 'center',
|
|
117
117
|
padding: 24,
|
|
118
|
-
transition: '
|
|
118
|
+
transition: 'all 0.3s ease',
|
|
119
119
|
opacity: visible ? 1 : 0,
|
|
120
120
|
boxSizing: 'border-box',
|
|
121
121
|
};
|
|
@@ -125,21 +125,19 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
|
|
|
125
125
|
maxHeight: '90vh',
|
|
126
126
|
display: 'flex',
|
|
127
127
|
flexDirection: 'column',
|
|
128
|
-
background: '
|
|
129
|
-
|
|
130
|
-
boxShadow: `0 0 0 1px rgba(${primaryRgb}, 0.15), 0 50px 100px -20px rgba(0, 0, 0, 1)`,
|
|
128
|
+
background: '#0a0a0a',
|
|
129
|
+
boxShadow: `0 0 0 1px ${borderColor}, 0 50px 100px -20px rgba(0, 0, 0, 1)`,
|
|
131
130
|
borderRadius: 16,
|
|
132
131
|
overflow: 'hidden',
|
|
133
132
|
transform: visible ? 'scale(1) translateY(0)' : 'scale(0.98) translateY(10px)',
|
|
134
|
-
transition: 'transform 0.
|
|
133
|
+
transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
135
134
|
position: 'relative',
|
|
136
135
|
};
|
|
137
136
|
const neonLine = {
|
|
138
137
|
height: '1px',
|
|
139
138
|
width: '100%',
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
boxShadow: `0 0 15px rgba(${primaryRgb}, 0.6)`,
|
|
139
|
+
background: `linear-gradient(90deg, transparent, #334155, #ffffff, #334155, transparent)`,
|
|
140
|
+
boxShadow: `0 0 15px rgba(255, 255, 255, 0.05)`,
|
|
143
141
|
};
|
|
144
142
|
const headerStyle = {
|
|
145
143
|
padding: '16px 24px',
|
|
@@ -153,7 +151,7 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
|
|
|
153
151
|
padding: 24,
|
|
154
152
|
overflow: 'auto',
|
|
155
153
|
flex: 1,
|
|
156
|
-
fontFamily: '"JetBrains Mono",
|
|
154
|
+
fontFamily: '"JetBrains Mono", monospace',
|
|
157
155
|
fontSize: 13,
|
|
158
156
|
lineHeight: 1.6,
|
|
159
157
|
color: '#e2e8f0',
|
|
@@ -162,7 +160,7 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
|
|
|
162
160
|
};
|
|
163
161
|
const getBtnStyle = (kind, hovering) => {
|
|
164
162
|
const base = {
|
|
165
|
-
padding: '8px
|
|
163
|
+
padding: '8px 16px',
|
|
166
164
|
borderRadius: 8,
|
|
167
165
|
fontSize: 11,
|
|
168
166
|
fontWeight: 700,
|
|
@@ -172,44 +170,49 @@ function ErrorModal({ error, isOpen, onClose, onCopy, }) {
|
|
|
172
170
|
letterSpacing: '0.05em',
|
|
173
171
|
border: 'none',
|
|
174
172
|
outline: 'none',
|
|
175
|
-
fontFamily: 'system-ui, sans-serif'
|
|
173
|
+
fontFamily: 'Inter, system-ui, sans-serif'
|
|
176
174
|
};
|
|
177
175
|
if (kind === 'primary') {
|
|
178
176
|
return {
|
|
179
177
|
...base,
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
border: `1px solid rgba(${primaryRgb}, 0.3)`,
|
|
184
|
-
boxShadow: hovering ? `0 0 10px rgba(${primaryRgb}, 0.2)` : 'none',
|
|
178
|
+
background: hovering ? '#ffffff' : '#f1f5f9',
|
|
179
|
+
color: '#000000',
|
|
180
|
+
boxShadow: hovering ? `0 0 15px rgba(255, 255, 255, 0.2)` : 'none',
|
|
185
181
|
};
|
|
186
182
|
}
|
|
187
183
|
return {
|
|
188
184
|
...base,
|
|
189
|
-
background: 'transparent',
|
|
190
|
-
color: hovering ? '#fff' : 'rgba(255,255,255,0.
|
|
185
|
+
background: hovering ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
|
|
186
|
+
color: hovering ? '#fff' : 'rgba(255, 255, 255, 0.4)',
|
|
187
|
+
border: '1px solid transparent',
|
|
188
|
+
borderColor: hovering ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
|
|
191
189
|
};
|
|
192
190
|
};
|
|
193
191
|
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: {
|
|
194
|
-
fontSize:
|
|
195
|
-
fontWeight:
|
|
196
|
-
color: '#
|
|
197
|
-
|
|
192
|
+
fontSize: 11,
|
|
193
|
+
fontWeight: 900,
|
|
194
|
+
color: '#ffffff',
|
|
195
|
+
background: '#ef4444',
|
|
196
|
+
padding: '2px 8px',
|
|
197
|
+
borderRadius: 4,
|
|
198
|
+
letterSpacing: '0.05em'
|
|
198
199
|
}, children: "ERROR" }), error.plugin && ((0, jsx_runtime_1.jsx)("span", { style: {
|
|
199
200
|
fontSize: 11,
|
|
200
|
-
color: '
|
|
201
|
-
background: 'rgba(255,255,255,0.
|
|
202
|
-
padding: '2px
|
|
201
|
+
color: '#64748b',
|
|
202
|
+
background: 'rgba(255, 255, 255, 0.03)',
|
|
203
|
+
padding: '2px 8px',
|
|
203
204
|
borderRadius: 4,
|
|
204
|
-
fontFamily: 'monospace'
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
205
|
+
fontFamily: 'monospace',
|
|
206
|
+
border: '1px solid rgba(255, 255, 255, 0.05)'
|
|
207
|
+
}, children: error.plugin }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 8 }, children: [onCopy && ((0, jsx_runtime_1.jsx)("button", { onClick: onCopy, onMouseEnter: () => setIsHoveringCopy(true), onMouseLeave: () => setIsHoveringCopy(false), style: getBtnStyle('secondary', isHoveringCopy), children: "Copy Log" })), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, onMouseEnter: () => setIsHoveringClose(true), onMouseLeave: () => setIsHoveringClose(false), style: getBtnStyle('primary', isHoveringClose), children: "Close" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: terminalContent, children: [(0, jsx_runtime_1.jsx)(AnsiText, { text: rawOutput }), stackOutput && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 24, opacity: 0.4, borderTop: '1px dashed rgba(255,255,255,0.1)', paddingTop: 16 }, children: (0, jsx_runtime_1.jsx)(AnsiText, { text: stackOutput }) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
208
|
+
padding: '10px 24px',
|
|
209
|
+
background: 'rgba(255,255,255,0.01)',
|
|
208
210
|
borderTop: '1px solid rgba(255,255,255,0.03)',
|
|
209
211
|
display: 'flex',
|
|
210
212
|
justifyContent: 'space-between',
|
|
211
213
|
fontSize: 11,
|
|
212
|
-
color: 'rgba(255,255,255,0.
|
|
213
|
-
|
|
214
|
+
color: 'rgba(255,255,255,0.3)',
|
|
215
|
+
fontFamily: 'Inter, sans-serif'
|
|
216
|
+
}, children: [(0, jsx_runtime_1.jsx)("span", { children: "vatts-cli" }), (0, jsx_runtime_1.jsx)("span", { style: { color: '#64748b', fontWeight: 500 }, children: "Watching for changes..." })] })] }) }));
|
|
214
217
|
return (0, react_dom_1.createPortal)(modalContent, document.body);
|
|
215
218
|
}
|
package/dist/renderer.js
CHANGED
|
@@ -10,6 +10,7 @@ const server_1 = require("react-dom/server");
|
|
|
10
10
|
const router_1 = require("./router");
|
|
11
11
|
const fs_1 = __importDefault(require("fs"));
|
|
12
12
|
const path_1 = __importDefault(require("path"));
|
|
13
|
+
const BuildingPage_1 = __importDefault(require("./client/BuildingPage"));
|
|
13
14
|
// --- Helpers de Servidor ---
|
|
14
15
|
// Função auxiliar para importar módulos ignorando CSS (mesma lógica do router.ts)
|
|
15
16
|
function requireWithoutStyles(modulePath) {
|
|
@@ -241,8 +242,13 @@ async function renderAsStream({ req, res, route, params, allRoutes }) {
|
|
|
241
242
|
if (!assets || assets.scripts.length === 0) {
|
|
242
243
|
// Se falhar o build, restauramos o console para o erro aparecer se necessário
|
|
243
244
|
restoreConsole();
|
|
244
|
-
|
|
245
|
-
|
|
245
|
+
// Usando stream para a tela de loading também, agora via React Component
|
|
246
|
+
const { pipe } = (0, server_1.renderToPipeableStream)((0, jsx_runtime_1.jsx)(BuildingPage_1.default, {}), {
|
|
247
|
+
onShellReady() {
|
|
248
|
+
res.setHeader('Content-Type', 'text/html');
|
|
249
|
+
pipe(res);
|
|
250
|
+
}
|
|
251
|
+
});
|
|
246
252
|
return;
|
|
247
253
|
}
|
|
248
254
|
// 2. Preparar Layout
|
|
@@ -343,267 +349,3 @@ async function renderAsStream({ req, res, route, params, allRoutes }) {
|
|
|
343
349
|
async function render(options) {
|
|
344
350
|
return "";
|
|
345
351
|
}
|
|
346
|
-
// Função para retornar HTML de "Build em andamento" com auto-refresh
|
|
347
|
-
function getBuildingHTML() {
|
|
348
|
-
let version = "1.0.0";
|
|
349
|
-
try {
|
|
350
|
-
version = require("../package.json").version;
|
|
351
|
-
}
|
|
352
|
-
catch (e) { }
|
|
353
|
-
return `
|
|
354
|
-
<!DOCTYPE html>
|
|
355
|
-
<html lang="en">
|
|
356
|
-
<head>
|
|
357
|
-
<meta charset="UTF-8">
|
|
358
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
359
|
-
<title>Vatts.js | Building...</title>
|
|
360
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
361
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
362
|
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
363
|
-
<style>
|
|
364
|
-
:root {
|
|
365
|
-
--bg-solid: #0d0d0d;
|
|
366
|
-
--card-bg: rgba(10, 10, 12, 0.95);
|
|
367
|
-
/* CORES ALTERADAS: Cyan para Laranja/Vermelho */
|
|
368
|
-
--primary: #ff6b35;
|
|
369
|
-
--primary-glow: rgba(255, 107, 53, 0.5);
|
|
370
|
-
--text-main: #f8fafc;
|
|
371
|
-
--text-muted: #94a3b8;
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
body {
|
|
375
|
-
margin: 0;
|
|
376
|
-
padding: 0;
|
|
377
|
-
width: 100vw;
|
|
378
|
-
height: 100vh;
|
|
379
|
-
background-color: var(--bg-solid);
|
|
380
|
-
font-family: 'Inter', sans-serif;
|
|
381
|
-
color: var(--text-main);
|
|
382
|
-
overflow: hidden;
|
|
383
|
-
position: relative;
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
/* Centralização Absoluta Perfeita */
|
|
387
|
-
.container {
|
|
388
|
-
position: absolute;
|
|
389
|
-
top: 50%;
|
|
390
|
-
left: 50%;
|
|
391
|
-
transform: translate(-50%, -50%);
|
|
392
|
-
display: flex;
|
|
393
|
-
justify-content: center;
|
|
394
|
-
align-items: center;
|
|
395
|
-
width: 100%;
|
|
396
|
-
pointer-events: none;
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
.build-card {
|
|
400
|
-
pointer-events: auto;
|
|
401
|
-
position: relative;
|
|
402
|
-
width: 100%;
|
|
403
|
-
max-width: 420px;
|
|
404
|
-
background: var(--card-bg);
|
|
405
|
-
/* COR ALTERADA: Borda laranja sutil */
|
|
406
|
-
box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.15), 0 40px 80px -20px rgba(0, 0, 0, 0.8);
|
|
407
|
-
border-radius: 20px;
|
|
408
|
-
overflow: hidden;
|
|
409
|
-
display: flex;
|
|
410
|
-
flex-direction: column;
|
|
411
|
-
align-items: center;
|
|
412
|
-
text-align: center;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
.neon-line {
|
|
417
|
-
height: 1px;
|
|
418
|
-
width: 100%;
|
|
419
|
-
/* COR ALTERADA: Gradiente Laranja/Vermelho */
|
|
420
|
-
background: linear-gradient(90deg, transparent, #e85d04, #ff6b35, transparent);
|
|
421
|
-
box-shadow: 0 0 15px var(--primary-glow);
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
.content {
|
|
425
|
-
padding: 40px 32px;
|
|
426
|
-
width: 100%;
|
|
427
|
-
box-sizing: border-box;
|
|
428
|
-
display: flex;
|
|
429
|
-
flex-direction: column;
|
|
430
|
-
align-items: center;
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
/* Logo Animation */
|
|
434
|
-
.logo-wrapper {
|
|
435
|
-
position: relative;
|
|
436
|
-
margin-bottom: 24px;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.logo-wrapper img {
|
|
440
|
-
width: 64px;
|
|
441
|
-
height: 64px;
|
|
442
|
-
object-fit: contain;
|
|
443
|
-
position: relative;
|
|
444
|
-
z-index: 2;
|
|
445
|
-
}
|
|
446
|
-
|
|
447
|
-
.logo-glow {
|
|
448
|
-
position: absolute;
|
|
449
|
-
top: 50%;
|
|
450
|
-
left: 50%;
|
|
451
|
-
transform: translate(-50%, -50%);
|
|
452
|
-
width: 100%;
|
|
453
|
-
height: 100%;
|
|
454
|
-
/* COR ALTERADA: Brilho da logo */
|
|
455
|
-
background: var(--primary);
|
|
456
|
-
filter: blur(25px);
|
|
457
|
-
opacity: 0.2;
|
|
458
|
-
border-radius: 50%;
|
|
459
|
-
animation: pulse 2s ease-in-out infinite;
|
|
460
|
-
}
|
|
461
|
-
|
|
462
|
-
h1 {
|
|
463
|
-
margin: 0;
|
|
464
|
-
font-size: 2rem;
|
|
465
|
-
font-weight: 800;
|
|
466
|
-
letter-spacing: -0.03em;
|
|
467
|
-
background: linear-gradient(180deg, #ffffff 0%, #94a3b8 100%);
|
|
468
|
-
-webkit-background-clip: text;
|
|
469
|
-
-webkit-text-fill-color: transparent;
|
|
470
|
-
}
|
|
471
|
-
|
|
472
|
-
h1 span {
|
|
473
|
-
/* COR ALTERADA: ".js" */
|
|
474
|
-
color: var(--primary);
|
|
475
|
-
-webkit-text-fill-color: var(--primary);
|
|
476
|
-
}
|
|
477
|
-
|
|
478
|
-
p {
|
|
479
|
-
margin: 8px 0 32px 0;
|
|
480
|
-
color: var(--text-muted);
|
|
481
|
-
font-size: 0.9rem;
|
|
482
|
-
font-weight: 500;
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
/* Terminal de Progresso Falso */
|
|
486
|
-
.terminal-box {
|
|
487
|
-
width: 100%;
|
|
488
|
-
background: rgba(0, 0, 0, 0.4);
|
|
489
|
-
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
490
|
-
border-radius: 12px;
|
|
491
|
-
padding: 16px;
|
|
492
|
-
text-align: left;
|
|
493
|
-
font-family: 'JetBrains Mono', monospace;
|
|
494
|
-
font-size: 0.75rem;
|
|
495
|
-
color: #64748b;
|
|
496
|
-
box-sizing: border-box;
|
|
497
|
-
display: flex;
|
|
498
|
-
flex-direction: column;
|
|
499
|
-
gap: 8px;
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
.term-line {
|
|
503
|
-
display: flex;
|
|
504
|
-
align-items: center;
|
|
505
|
-
gap: 8px;
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
.term-spinner {
|
|
509
|
-
width: 10px;
|
|
510
|
-
height: 10px;
|
|
511
|
-
/* COR ALTERADA: Spinner animado */
|
|
512
|
-
border: 2px solid rgba(255, 107, 53, 0.2);
|
|
513
|
-
border-top-color: var(--primary);
|
|
514
|
-
border-radius: 50%;
|
|
515
|
-
animation: spin 0.6s linear infinite;
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
.file-name { color: var(--text-muted); }
|
|
519
|
-
/* COR ALTERADA: Texto de destaque no terminal */
|
|
520
|
-
.accent { color: var(--primary); }
|
|
521
|
-
|
|
522
|
-
/* Footer Status */
|
|
523
|
-
.card-footer {
|
|
524
|
-
width: 100%;
|
|
525
|
-
padding: 12px 32px;
|
|
526
|
-
background: rgba(0,0,0,0.3);
|
|
527
|
-
border-top: 1px solid rgba(255,255,255,0.03);
|
|
528
|
-
display: flex;
|
|
529
|
-
justify-content: space-between;
|
|
530
|
-
align-items: center;
|
|
531
|
-
font-size: 11px;
|
|
532
|
-
color: rgba(255,255,255,0.2);
|
|
533
|
-
box-sizing: border-box;
|
|
534
|
-
}
|
|
535
|
-
|
|
536
|
-
.status-active {
|
|
537
|
-
display: flex;
|
|
538
|
-
align-items: center;
|
|
539
|
-
gap: 6px;
|
|
540
|
-
/* COR ALTERADA: Texto Hot Reload */
|
|
541
|
-
color: var(--primary);
|
|
542
|
-
font-weight: 600;
|
|
543
|
-
text-transform: uppercase;
|
|
544
|
-
letter-spacing: 0.05em;
|
|
545
|
-
}
|
|
546
|
-
|
|
547
|
-
.dot {
|
|
548
|
-
width: 6px;
|
|
549
|
-
height: 6px;
|
|
550
|
-
/* COR ALTERADA: Pontinho brilhante */
|
|
551
|
-
background-color: var(--primary);
|
|
552
|
-
border-radius: 50%;
|
|
553
|
-
box-shadow: 0 0 8px var(--primary);
|
|
554
|
-
}
|
|
555
|
-
|
|
556
|
-
@keyframes pulse {
|
|
557
|
-
0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
|
|
558
|
-
50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.2); }
|
|
559
|
-
}
|
|
560
|
-
|
|
561
|
-
@keyframes spin {
|
|
562
|
-
to { transform: rotate(360deg); }
|
|
563
|
-
}
|
|
564
|
-
</style>
|
|
565
|
-
</head>
|
|
566
|
-
<body>
|
|
567
|
-
<div class="container">
|
|
568
|
-
<div class="build-card">
|
|
569
|
-
<div class="neon-line"></div>
|
|
570
|
-
|
|
571
|
-
<div class="content">
|
|
572
|
-
<div class="logo-wrapper">
|
|
573
|
-
<div class="logo-glow"></div>
|
|
574
|
-
<img src="https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo-v.png" alt="Vatts Logo">
|
|
575
|
-
</div>
|
|
576
|
-
|
|
577
|
-
<h1>Vatts<span>.js</span></h1>
|
|
578
|
-
<p>Building your masterpiece...</p>
|
|
579
|
-
|
|
580
|
-
<div class="terminal-box">
|
|
581
|
-
<div class="term-line">
|
|
582
|
-
<div class="term-spinner"></div>
|
|
583
|
-
<span class="file-name">Compiling <span class="accent">src/vatts.ts</span>...</span>
|
|
584
|
-
</div>
|
|
585
|
-
<div class="term-line" style="opacity: 0.5;">
|
|
586
|
-
<span>✓</span>
|
|
587
|
-
<span class="file-name">Optimizing assets</span>
|
|
588
|
-
</div>
|
|
589
|
-
</div>
|
|
590
|
-
</div>
|
|
591
|
-
|
|
592
|
-
<div class="card-footer">
|
|
593
|
-
<span>Building...</span>
|
|
594
|
-
<div class="status-active">
|
|
595
|
-
<div class="dot"></div>
|
|
596
|
-
v${version}
|
|
597
|
-
</div>
|
|
598
|
-
</div>
|
|
599
|
-
</div>
|
|
600
|
-
</div>
|
|
601
|
-
|
|
602
|
-
<script>
|
|
603
|
-
setTimeout(() => {
|
|
604
|
-
window.location.reload();
|
|
605
|
-
}, 2500);
|
|
606
|
-
</script>
|
|
607
|
-
</body>
|
|
608
|
-
</html>`;
|
|
609
|
-
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vatts",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"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.",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"author": "itsmuzin",
|