vatts 1.1.0 → 1.1.2
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/builder.js +55 -7
- 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/client/client.d.ts +2 -0
- package/dist/client/client.js +8 -1
- package/dist/client/image/Image.d.ts +10 -0
- package/dist/client/image/Image.js +35 -0
- package/dist/index.js +142 -1
- package/dist/renderer.js +8 -266
- package/package.json +4 -2
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
|
+
___
|
package/dist/builder.js
CHANGED
|
@@ -20,6 +20,14 @@ const path = require('path');
|
|
|
20
20
|
const Console = require("./api/console").default;
|
|
21
21
|
const fs = require('fs');
|
|
22
22
|
const { readdir, stat, rm } = require("node:fs/promises");
|
|
23
|
+
// Tenta carregar o Sharp para otimização de imagens
|
|
24
|
+
let sharp;
|
|
25
|
+
try {
|
|
26
|
+
sharp = require('sharp');
|
|
27
|
+
}
|
|
28
|
+
catch (e) {
|
|
29
|
+
Console.warn("Sharp não encontrado. Otimização de imagem (resize) desativada. Instale com: npm install sharp");
|
|
30
|
+
}
|
|
23
31
|
// Plugins Oficiais do Rollup
|
|
24
32
|
const nodeResolve = require('@rollup/plugin-node-resolve').default;
|
|
25
33
|
const commonjs = require('@rollup/plugin-commonjs').default;
|
|
@@ -202,8 +210,8 @@ const customPostCssPlugin = (isProduction) => {
|
|
|
202
210
|
};
|
|
203
211
|
};
|
|
204
212
|
/**
|
|
205
|
-
* Plugin Inteligente para Assets (Otimizado para RAM)
|
|
206
|
-
* -
|
|
213
|
+
* Plugin Inteligente para Assets (Otimizado para RAM e agora com Sharp)
|
|
214
|
+
* - Suporta redimensionamento via query params: import img from './image.png?w=200&h=200'
|
|
207
215
|
*/
|
|
208
216
|
const smartAssetPlugin = (isProduction) => {
|
|
209
217
|
// 4KB - Arquivos maiores que isso viram referência externa.
|
|
@@ -212,7 +220,8 @@ const smartAssetPlugin = (isProduction) => {
|
|
|
212
220
|
return {
|
|
213
221
|
name: 'smart-asset-loader',
|
|
214
222
|
async load(id) {
|
|
215
|
-
|
|
223
|
+
// Separa o ID dos parâmetros de query
|
|
224
|
+
const [cleanId, queryParams] = id.split('?');
|
|
216
225
|
if (cleanId.startsWith('\0'))
|
|
217
226
|
return null;
|
|
218
227
|
const ext = path.extname(cleanId).slice(1).toLowerCase();
|
|
@@ -236,6 +245,46 @@ const smartAssetPlugin = (isProduction) => {
|
|
|
236
245
|
return `export default ${JSON.stringify(content)};`;
|
|
237
246
|
}
|
|
238
247
|
let buffer = await fs.promises.readFile(cleanId);
|
|
248
|
+
// --- VATTS IMAGE OPTIMIZATION (SHARP) ---
|
|
249
|
+
// Verifica se tem sharp e se tem parâmetros de resize (w=, h=, q=)
|
|
250
|
+
if (sharp && queryParams && ['png', 'jpg', 'jpeg', 'webp', 'avif'].includes(ext)) {
|
|
251
|
+
try {
|
|
252
|
+
const params = new URLSearchParams(queryParams);
|
|
253
|
+
const width = params.get('w') || params.get('width');
|
|
254
|
+
const height = params.get('h') || params.get('height');
|
|
255
|
+
const quality = params.get('q') || params.get('quality');
|
|
256
|
+
if (width || height || quality) {
|
|
257
|
+
let transformer = sharp(buffer);
|
|
258
|
+
if (width || height) {
|
|
259
|
+
transformer = transformer.resize({
|
|
260
|
+
width: width ? parseInt(width) : null,
|
|
261
|
+
height: height ? parseInt(height) : null,
|
|
262
|
+
fit: 'cover', // Padrão 'cover' para manter aspect ratio preenchendo
|
|
263
|
+
withoutEnlargement: true // Não aumenta se a imagem original for menor
|
|
264
|
+
});
|
|
265
|
+
}
|
|
266
|
+
// Aplica qualidade/compressão se solicitado
|
|
267
|
+
if (quality) {
|
|
268
|
+
const q = parseInt(quality);
|
|
269
|
+
if (ext === 'jpeg' || ext === 'jpg')
|
|
270
|
+
transformer.jpeg({ quality: q });
|
|
271
|
+
if (ext === 'webp')
|
|
272
|
+
transformer.webp({ quality: q });
|
|
273
|
+
if (ext === 'avif')
|
|
274
|
+
transformer.avif({ quality: q });
|
|
275
|
+
if (ext === 'png')
|
|
276
|
+
transformer.png({ quality: q });
|
|
277
|
+
}
|
|
278
|
+
buffer = await transformer.toBuffer();
|
|
279
|
+
// Atualiza o tamanho para a decisão de inline/emit abaixo
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
catch (e) {
|
|
283
|
+
Console.warn(`Failed to optimize image ${path.basename(cleanId)}:`, e.message);
|
|
284
|
+
// Falha silenciosa: usa o buffer original
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
// ------------------------------------------
|
|
239
288
|
const size = buffer.length;
|
|
240
289
|
// Tratamento especial para SVG (inline SVG vs URL)
|
|
241
290
|
if (type === 'svg') {
|
|
@@ -263,18 +312,17 @@ const smartAssetPlugin = (isProduction) => {
|
|
|
263
312
|
}
|
|
264
313
|
}
|
|
265
314
|
// Para outros assets:
|
|
266
|
-
// Se for pequeno
|
|
267
|
-
// Se for grande, Arquivo (reduz uso de RAM e tamanho do bundle JS)
|
|
268
|
-
// Essa lógica agora aplica para DEV e PROD. Base64 em Dev para arquivos grandes era o vilão da RAM.
|
|
315
|
+
// Se for pequeno (ou ficou pequeno após resize), Base64
|
|
269
316
|
if (size < INLINE_LIMIT) {
|
|
270
317
|
const base64 = buffer.toString('base64');
|
|
271
318
|
buffer = null; // Libera memória do buffer bruto imediatamente
|
|
272
319
|
return `export default "data:${type};base64,${base64}";`;
|
|
273
320
|
}
|
|
274
321
|
else {
|
|
322
|
+
// Se ainda for grande, emite arquivo
|
|
275
323
|
const referenceId = this.emitFile({
|
|
276
324
|
type: 'asset',
|
|
277
|
-
name: path.basename(cleanId),
|
|
325
|
+
name: path.basename(cleanId), // O nome será hasheado pelo Rollup output options
|
|
278
326
|
source: buffer
|
|
279
327
|
});
|
|
280
328
|
buffer = null; // Libera memória
|
|
@@ -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
|
}
|