vatts 2.2.6 → 2.3.0-canary.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.
Files changed (70) hide show
  1. package/LICENSE +12 -12
  2. package/README.md +65 -65
  3. package/dist/builder.js +79 -42
  4. package/dist/frameworks/FrontCore.d.ts +34 -0
  5. package/dist/frameworks/FrontCore.js +128 -0
  6. package/dist/{vue → frameworks/builds}/vue.build.js +1 -1
  7. package/dist/frameworks/react/client.d.ts +8 -0
  8. package/dist/{react → frameworks/react}/client.js +14 -14
  9. package/dist/{react → frameworks/react/components}/Link.js +2 -2
  10. package/dist/frameworks/react/entry.client.d.ts +14 -0
  11. package/dist/frameworks/react/entry.client.js +211 -0
  12. package/dist/frameworks/react/react-elements.d.ts +10 -0
  13. package/dist/{react → frameworks/renderers}/renderer-react.d.ts +2 -2
  14. package/dist/{react → frameworks/renderers}/renderer-react.js +53 -86
  15. package/dist/{vue → frameworks/renderers}/renderer.vue.d.ts +2 -2
  16. package/dist/frameworks/renderers/renderer.vue.js +193 -0
  17. package/dist/frameworks/themes/BuildingPage.d.ts +1 -0
  18. package/dist/frameworks/themes/BuildingPage.js +312 -0
  19. package/dist/frameworks/themes/DefaultNotFound.d.ts +1 -0
  20. package/dist/frameworks/themes/DefaultNotFound.js +330 -0
  21. package/dist/frameworks/themes/ErrorModal.d.ts +1 -0
  22. package/dist/frameworks/themes/ErrorModal.js +345 -0
  23. package/dist/frameworks/themes/ServerError.d.ts +1 -0
  24. package/dist/frameworks/themes/ServerError.js +401 -0
  25. package/dist/frameworks/themes/VattsDevBadge.d.ts +1 -0
  26. package/dist/frameworks/themes/VattsDevBadge.js +232 -0
  27. package/dist/frameworks/vue/App.vue +149 -0
  28. package/dist/frameworks/vue/client.d.ts +9 -0
  29. package/dist/{vue → frameworks/vue}/client.js +13 -11
  30. package/dist/{vue → frameworks/vue/components}/Link.vue +38 -38
  31. package/dist/{vue → frameworks/vue/components}/image/Image.vue +128 -128
  32. package/dist/frameworks/vue/entry.client.js +75 -0
  33. package/dist/global/global.d.ts +179 -180
  34. package/dist/hotReload.js +77 -77
  35. package/dist/index.js +12 -1
  36. package/dist/loaders.js +15 -15
  37. package/dist/renderer.js +2 -2
  38. package/dist/renderers/common.js +3 -3
  39. package/dist/utils/core-go.js +2 -2
  40. package/dist/utils/utils.js +5 -5
  41. package/package.json +10 -26
  42. package/dist/react/BuildingPage.d.ts +0 -2
  43. package/dist/react/BuildingPage.js +0 -270
  44. package/dist/react/DefaultNotFound.d.ts +0 -2
  45. package/dist/react/DefaultNotFound.js +0 -248
  46. package/dist/react/DevIndicator.d.ts +0 -5
  47. package/dist/react/DevIndicator.js +0 -203
  48. package/dist/react/ErrorModal.d.ts +0 -20
  49. package/dist/react/ErrorModal.js +0 -266
  50. package/dist/react/client.d.ts +0 -8
  51. package/dist/react/entry.client.d.ts +0 -6
  52. package/dist/react/entry.client.js +0 -325
  53. package/dist/react/server-error.d.ts +0 -8
  54. package/dist/react/server-error.js +0 -346
  55. package/dist/vue/App.vue +0 -199
  56. package/dist/vue/BuildingPage.vue +0 -281
  57. package/dist/vue/DefaultNotFound.vue +0 -329
  58. package/dist/vue/DevIndicator.vue +0 -226
  59. package/dist/vue/ErrorModal.vue +0 -317
  60. package/dist/vue/client.d.ts +0 -9
  61. package/dist/vue/entry.client.js +0 -110
  62. package/dist/vue/renderer.vue.js +0 -387
  63. package/dist/vue/server-error.vue +0 -351
  64. /package/dist/{react → frameworks/builds}/react.build.d.ts +0 -0
  65. /package/dist/{react → frameworks/builds}/react.build.js +0 -0
  66. /package/dist/{vue → frameworks/builds}/vue.build.d.ts +0 -0
  67. /package/dist/{react → frameworks/react/components}/Link.d.ts +0 -0
  68. /package/dist/{react → frameworks/react/components}/image/Image.d.ts +0 -0
  69. /package/dist/{react → frameworks/react/components}/image/Image.js +0 -0
  70. /package/dist/{vue → frameworks/vue}/entry.client.d.ts +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vatts",
3
- "version": "2.2.6",
3
+ "version": "2.3.0-canary.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": "mfraz",
@@ -46,14 +46,14 @@
46
46
  "require": "./dist/api/console.js"
47
47
  },
48
48
  "./react": {
49
- "types": "./dist/react/client.d.ts",
50
- "import": "./dist/react/client.js",
51
- "require": "./dist/react/client.js"
49
+ "types": "./dist/frameworks/react/client.d.ts",
50
+ "import": "./dist/frameworks/react/client.js",
51
+ "require": "./dist/frameworks/react/client.js"
52
52
  },
53
53
  "./vue": {
54
- "types": "./dist/vue/client.d.ts",
55
- "import": "./dist/vue/client.js",
56
- "require": "./dist/vue/client.js"
54
+ "types": "./dist/frameworks/vue/client.d.ts",
55
+ "import": "./dist/frameworks/vue/client.js",
56
+ "require": "./dist/frameworks/vue/client.js"
57
57
  },
58
58
  "./helpers": {
59
59
  "types": "./dist/helpers.d.ts",
@@ -102,41 +102,28 @@
102
102
  "pg": {
103
103
  "optional": true
104
104
  },
105
- "better-sqlite3": {
106
- "optional": true
107
- },
108
- "sqlite3": {
105
+ "@libsql/client": {
109
106
  "optional": true
110
107
  }
111
108
  },
112
109
  "peerDependencies": {
113
110
  "@libsql/client": "^0.17.0",
114
- "better-sqlite3": "^12.6.2",
115
111
  "express": "^4.0.0",
116
112
  "fastify": "^5.6.1",
117
113
  "mysql2": "^3.17.4",
118
114
  "pg": "^8.18.0",
119
115
  "react": "^19.2.3",
120
116
  "react-dom": "^19.2.3",
121
- "sqlite3": "^5.1.6",
122
117
  "vue": "^3.5.27"
123
118
  },
124
119
  "dependencies": {
125
- "@rollup/plugin-alias": "^6.0.0",
126
- "@rollup/plugin-commonjs": "^29.0.2",
127
- "@rollup/plugin-json": "^6.1.0",
128
- "@rollup/plugin-node-resolve": "^16.0.3",
129
- "@rollup/plugin-replace": "^6.0.3",
130
- "@rollup/plugin-terser": "^0.4.4",
131
120
  "@vue/server-renderer": "^3.5.34",
132
121
  "chokidar": "^3.6.0",
133
122
  "commander": "^14.0.3",
123
+ "cpx2": "^9.0.0",
134
124
  "esbuild": "^0.27.7",
135
125
  "esbuild-plugin-vue3": "^0.5.1",
136
126
  "koffi": "^2.16.2",
137
- "rollup": "^4.60.3",
138
- "rollup-plugin-esbuild": "^6.2.1",
139
- "rollup-plugin-vue": "^6.0.0",
140
127
  "sharp": "^0.34.5",
141
128
  "ts-loader": "9.5.4",
142
129
  "ts-node": "^10.9.2",
@@ -156,16 +143,13 @@
156
143
  "@types/react-dom": "^19.2.3",
157
144
  "@types/ws": "^8.18.1",
158
145
  "@vue/tsconfig": "^0.8.1",
159
- "better-sqlite3": "^12.9.0",
160
- "copyfiles": "^2.4.1",
161
146
  "image-size": "^2.0.2",
162
147
  "mysql2": "^3.22.3",
163
148
  "pg": "^8.20.0",
164
- "sqlite3": "^5.1.7",
165
149
  "vue": "^3.5.34",
166
150
  "vue-tsc": "^3.2.8"
167
151
  },
168
152
  "scripts": {
169
- "build": "tsc && copyfiles -u 1 \"src/**/*.{vue,d.ts}\" dist"
153
+ "build": "tsc && npx cpx2 \"src/**/**/**/*.{vue,d.ts}\" dist"
170
154
  }
171
155
  }
@@ -1,2 +0,0 @@
1
- import React from "react";
2
- export default function BuildingScreen(): React.JSX.Element;
@@ -1,270 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.default = BuildingScreen;
7
- /*
8
- * This file is part of the Vatts.js Project.
9
- * Copyright (c) 2026 mfraz
10
- *
11
- * Licensed under the Apache License, Version 2.0 (the "License");
12
- * you may not use this file except in compliance with the License.
13
- * You may obtain a copy of the License at
14
- *
15
- * http://www.apache.org/licenses/LICENSE-2.0
16
- *
17
- * Unless required by applicable law or agreed to in writing, software
18
- * distributed under the License is distributed on an "AS IS" BASIS,
19
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
20
- * See the License for the specific language governing permissions and
21
- * limitations under the License.
22
- */
23
- const react_1 = __importDefault(require("react"));
24
- function BuildingScreen() {
25
- let version = "1.0.0";
26
- try {
27
- version = require("../package.json").version;
28
- }
29
- catch (e) { }
30
- const styles = `
31
- :root {
32
- --bg-solid: #000000;
33
- --card-bg: #0a0a0a;
34
- /* PALETA: React Theme */
35
- --react-cyan: #61DAFB; /* O azul/ciano clássico do React */
36
- --react-dark: #20232a; /* Fundo escuro azulado */
37
- --primary: #ffffff;
38
- --primary-glow: rgba(97, 218, 251, 0.1);
39
- --text-main: #ffffff;
40
- --text-muted: #8ea9c7; /* Cinza azulado para combinar */
41
- }
42
-
43
- body {
44
- margin: 0;
45
- padding: 0;
46
- width: 100vw;
47
- height: 100vh;
48
- background-color: var(--bg-solid);
49
- font-family: 'Inter', sans-serif;
50
- color: var(--text-main);
51
- overflow: hidden;
52
- position: relative;
53
- }
54
-
55
- .container {
56
- position: absolute;
57
- top: 50%;
58
- left: 50%;
59
- transform: translate(-50%, -50%);
60
- display: flex;
61
- justify-content: center;
62
- align-items: center;
63
- width: 100%;
64
- pointer-events: none;
65
- }
66
-
67
- .build-card {
68
- pointer-events: auto;
69
- position: relative;
70
- width: 100%;
71
- max-width: 420px;
72
- background: var(--card-bg);
73
- /* Borda sutil com brilho React Cyan */
74
- box-shadow: 0 0 0 1px rgba(97, 218, 251, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
75
- border-radius: 20px;
76
- overflow: hidden;
77
- display: flex;
78
- flex-direction: column;
79
- align-items: center;
80
- text-align: center;
81
- }
82
-
83
- .neon-line {
84
- height: 1px;
85
- width: 100%;
86
- /* Linha de luz: Gradiente usando o Cyan */
87
- background: linear-gradient(90deg, transparent, var(--react-dark), var(--react-cyan), var(--react-dark), transparent);
88
- box-shadow: 0 0 15px rgba(97, 218, 251, 0.2);
89
- }
90
-
91
- .content {
92
- padding: 40px 32px;
93
- width: 100%;
94
- box-sizing: border-box;
95
- display: flex;
96
- flex-direction: column;
97
- align-items: center;
98
- }
99
-
100
- .logo-wrapper {
101
- position: relative;
102
- margin-bottom: 24px;
103
- }
104
-
105
- .logo-wrapper img {
106
- width: 64px;
107
- height: 64px;
108
- object-fit: contain;
109
- position: relative;
110
- z-index: 2;
111
- /* Removi o grayscale para a logo brilhar na cor natural se tiver cor, ou ficar nítida */
112
- filter: none;
113
- }
114
-
115
- .logo-glow {
116
- position: absolute;
117
- top: 50%;
118
- left: 50%;
119
- transform: translate(-50%, -50%);
120
- width: 100%;
121
- height: 100%;
122
- /* Glow Cyan do React */
123
- background: var(--react-cyan);
124
- filter: blur(25px);
125
- opacity: 0.2;
126
- border-radius: 50%;
127
- animation: pulse 2s ease-in-out infinite;
128
- }
129
-
130
- h1 {
131
- margin: 0;
132
- font-size: 2rem;
133
- font-weight: 800;
134
- letter-spacing: -0.03em;
135
- /* Gradiente do texto: Branco para Cyan */
136
- background: linear-gradient(180deg, #ffffff 0%, var(--react-cyan) 100%);
137
- -webkit-background-clip: text;
138
- -webkit-text-fill-color: transparent;
139
- }
140
-
141
- h1 span {
142
- /* Span .js em Cyan Sólido */
143
- color: var(--react-cyan);
144
- -webkit-text-fill-color: var(--react-cyan);
145
- }
146
-
147
- p {
148
- margin: 8px 0 32px 0;
149
- color: var(--text-muted);
150
- font-size: 0.9rem;
151
- font-weight: 500;
152
- }
153
-
154
- .terminal-box {
155
- width: 100%;
156
- background: rgba(97, 218, 251, 0.03); /* Fundo azulado bem sutil */
157
- border: 1px solid rgba(97, 218, 251, 0.1); /* Borda ciano sutil */
158
- border-radius: 12px;
159
- padding: 16px;
160
- text-align: left;
161
- font-family: 'JetBrains Mono', monospace;
162
- font-size: 0.75rem;
163
- color: var(--text-muted);
164
- box-sizing: border-box;
165
- display: flex;
166
- flex-direction: column;
167
- gap: 8px;
168
- }
169
-
170
- .term-line {
171
- display: flex;
172
- align-items: center;
173
- gap: 8px;
174
- }
175
-
176
- .term-spinner {
177
- width: 10px;
178
- height: 10px;
179
- border: 2px solid rgba(97, 218, 251, 0.1);
180
- border-top-color: var(--react-cyan); /* Spinner Cyan */
181
- border-radius: 50%;
182
- animation: spin 0.6s linear infinite;
183
- }
184
-
185
- .file-name { color: #8ea9c7; }
186
- .accent { color: var(--react-cyan); }
187
-
188
- .card-footer {
189
- width: 100%;
190
- padding: 12px 32px;
191
- background: rgba(97, 218, 251, 0.02);
192
- border-top: 1px solid rgba(97, 218, 251, 0.05);
193
- display: flex;
194
- justify-content: space-between;
195
- align-items: center;
196
- font-size: 11px;
197
- color: rgba(255,255,255,0.3);
198
- box-sizing: border-box;
199
- }
200
-
201
- .status-active {
202
- display: flex;
203
- align-items: center;
204
- gap: 6px;
205
- color: var(--react-cyan);
206
- font-weight: 600;
207
- text-transform: uppercase;
208
- letter-spacing: 0.05em;
209
- }
210
-
211
- .dot {
212
- width: 6px;
213
- height: 6px;
214
- background-color: var(--react-cyan);
215
- border-radius: 50%;
216
- box-shadow: 0 0 8px var(--react-cyan);
217
- }
218
-
219
- @keyframes pulse {
220
- 0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
221
- 50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.1); }
222
- }
223
-
224
- @keyframes spin {
225
- to { transform: rotate(360deg); }
226
- }
227
- `;
228
- return (react_1.default.createElement("html", { lang: "en" },
229
- react_1.default.createElement("head", null,
230
- react_1.default.createElement("meta", { charSet: "UTF-8" }),
231
- react_1.default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }),
232
- react_1.default.createElement("title", null, "Vatts.js | Building..."),
233
- react_1.default.createElement("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }),
234
- react_1.default.createElement("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }),
235
- react_1.default.createElement("link", { href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap", rel: "stylesheet" }),
236
- react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: styles } })),
237
- react_1.default.createElement("body", null,
238
- react_1.default.createElement("div", { className: "container" },
239
- react_1.default.createElement("div", { className: "build-card" },
240
- react_1.default.createElement("div", { className: "neon-line" }),
241
- react_1.default.createElement("div", { className: "content" },
242
- react_1.default.createElement("div", { className: "logo-wrapper" },
243
- react_1.default.createElement("div", { className: "logo-glow" }),
244
- react_1.default.createElement("img", { src: "https://raw.githubusercontent.com/murillo-frazao-cunha/vatts-docs/master/public/logo.png", alt: "Vatts Logo" })),
245
- react_1.default.createElement("h1", null,
246
- "Vatts",
247
- react_1.default.createElement("span", null, ".js")),
248
- react_1.default.createElement("p", null, "Building your application..."),
249
- react_1.default.createElement("div", { className: "terminal-box" },
250
- react_1.default.createElement("div", { className: "term-line" },
251
- react_1.default.createElement("div", { className: "term-spinner" }),
252
- react_1.default.createElement("span", { className: "file-name" },
253
- "Compiling ",
254
- react_1.default.createElement("span", { className: "accent" }, "src/vatts.ts"),
255
- "...")),
256
- react_1.default.createElement("div", { className: "term-line", style: { opacity: 0.5 } },
257
- react_1.default.createElement("span", { style: { color: "var(--react-cyan)" } }, "\u2713"),
258
- react_1.default.createElement("span", { className: "file-name" }, "Optimizing assets")))),
259
- react_1.default.createElement("div", { className: "card-footer" },
260
- react_1.default.createElement("span", null, "Building..."),
261
- react_1.default.createElement("div", { className: "status-active" },
262
- react_1.default.createElement("div", { className: "dot" }),
263
- "v",
264
- version)))),
265
- react_1.default.createElement("script", { dangerouslySetInnerHTML: { __html: `
266
- setTimeout(() => {
267
- window.location.reload();
268
- }, 2500);
269
- ` } }))));
270
- }
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export default function ErrorPage(): React.JSX.Element;
@@ -1,248 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || (function () {
19
- var ownKeys = function(o) {
20
- ownKeys = Object.getOwnPropertyNames || function (o) {
21
- var ar = [];
22
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
- return ar;
24
- };
25
- return ownKeys(o);
26
- };
27
- return function (mod) {
28
- if (mod && mod.__esModule) return mod;
29
- var result = {};
30
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
- __setModuleDefault(result, mod);
32
- return result;
33
- };
34
- })();
35
- Object.defineProperty(exports, "__esModule", { value: true });
36
- exports.default = ErrorPage;
37
- /*
38
- * This file is part of the Vatts.js Project.
39
- * Copyright (c) 2026 mfraz
40
- *
41
- * Licensed under the Apache License, Version 2.0 (the "License");
42
- * you may not use this file except in compliance with the License.
43
- * You may obtain a copy of the License at
44
- *
45
- * http://www.apache.org/licenses/LICENSE-2.0
46
- *
47
- * Unless required by applicable law or agreed to in writing, software
48
- * distributed under the License is distributed on an "AS IS" BASIS,
49
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
50
- * See the License for the specific language governing permissions and
51
- * limitations under the License.
52
- */
53
- const react_1 = __importStar(require("react"));
54
- function ErrorPage() {
55
- const [path, setPath] = (0, react_1.useState)('/');
56
- const [hoverHome, setHoverHome] = (0, react_1.useState)(false);
57
- const [hoverRetry, setHoverRetry] = (0, react_1.useState)(false);
58
- (0, react_1.useEffect)(() => {
59
- if (typeof window !== 'undefined') {
60
- setPath(window.location.pathname);
61
- }
62
- }, []);
63
- // --- CORES DO TEMA REACT ---
64
- const theme = {
65
- cyan: '#61DAFB', // React Blue/Cyan
66
- dark: '#20232a', // React Dark BG Accent
67
- textMuted: '#8ea9c7', // Azul acinzentado
68
- bg: '#000000',
69
- cardBg: '#0a0a0a'
70
- };
71
- // --- GLOBAL STYLES ---
72
- const globalStyles = `
73
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap');
74
-
75
- body {
76
- margin: 0;
77
- padding: 0;
78
- background-color: ${theme.bg};
79
- color: #ffffff;
80
- font-family: 'Inter', system-ui, sans-serif;
81
- overflow: hidden;
82
- height: 100vh;
83
- width: 100vw;
84
- }
85
-
86
- * { box-sizing: border-box; }
87
- `;
88
- // --- INLINE STYLES ---
89
- const containerStyle = {
90
- position: 'fixed',
91
- top: 0,
92
- left: 0,
93
- right: 0,
94
- bottom: 0,
95
- zIndex: 9999,
96
- display: 'flex',
97
- flexDirection: 'column',
98
- alignItems: 'center',
99
- justifyContent: 'center',
100
- width: '100vw',
101
- height: '100vh',
102
- background: theme.bg,
103
- };
104
- const cardStyle = {
105
- width: 'min(90%, 500px)',
106
- display: 'flex',
107
- flexDirection: 'column',
108
- background: theme.cardBg,
109
- // Borda sutil com brilho Cyan
110
- boxShadow: `0 0 0 1px rgba(97, 218, 251, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9)`,
111
- borderRadius: 20,
112
- overflow: 'hidden',
113
- position: 'relative',
114
- };
115
- const neonLine = {
116
- height: '1px',
117
- width: '100%',
118
- // Gradiente usando o Cyan do React
119
- background: `linear-gradient(90deg, transparent, ${theme.dark}, ${theme.cyan}, ${theme.dark}, transparent)`,
120
- // Brilho Cyan suave
121
- boxShadow: `0 0 15px rgba(97, 218, 251, 0.2)`,
122
- };
123
- const contentStyle = {
124
- padding: '32px',
125
- display: 'flex',
126
- flexDirection: 'column',
127
- alignItems: 'center',
128
- textAlign: 'center',
129
- };
130
- const codeStyle = {
131
- fontSize: 80,
132
- fontWeight: 900,
133
- lineHeight: 1,
134
- letterSpacing: '-0.04em',
135
- color: '#fff',
136
- // Gradiente Branco -> Cyan
137
- background: `linear-gradient(180deg, #ffffff 0%, ${theme.cyan} 100%)`,
138
- WebkitBackgroundClip: 'text',
139
- WebkitTextFillColor: 'transparent',
140
- marginBottom: 16,
141
- filter: `drop-shadow(0 0 20px rgba(97, 218, 251, 0.1))`,
142
- };
143
- const terminalBoxStyle = {
144
- width: '100%',
145
- background: 'rgba(97, 218, 251, 0.03)', // Fundo azulado sutil
146
- borderRadius: 12,
147
- padding: '16px',
148
- marginBottom: 24,
149
- border: '1px solid rgba(97, 218, 251, 0.1)', // Borda cyan sutil
150
- fontFamily: '"JetBrains Mono", monospace',
151
- fontSize: 12,
152
- textAlign: 'left',
153
- color: theme.textMuted,
154
- };
155
- const getBtnStyle = (kind, hovering) => {
156
- const base = {
157
- display: 'flex',
158
- alignItems: 'center',
159
- gap: 8,
160
- padding: '10px 20px',
161
- borderRadius: 10,
162
- fontSize: 13,
163
- fontWeight: 600,
164
- cursor: 'pointer',
165
- transition: 'all 0.2s ease',
166
- border: 'none',
167
- outline: 'none',
168
- textDecoration: 'none',
169
- fontFamily: 'Inter, sans-serif',
170
- };
171
- if (kind === 'primary') {
172
- return {
173
- ...base,
174
- // Botão Primário agora é o Cyan do React com texto escuro (contraste alto)
175
- background: hovering ? '#ffffff' : theme.cyan,
176
- color: '#000000',
177
- boxShadow: hovering ? `0 0 20px rgba(97, 218, 251, 0.4)` : 'none',
178
- };
179
- }
180
- return {
181
- ...base,
182
- background: hovering ? 'rgba(97, 218, 251, 0.1)' : 'transparent',
183
- color: hovering ? '#fff' : theme.textMuted,
184
- border: '1px solid',
185
- borderColor: hovering ? theme.cyan : 'rgba(255, 255, 255, 0.1)',
186
- };
187
- };
188
- const brandStyle = {
189
- marginTop: 32,
190
- display: 'flex',
191
- alignItems: 'center',
192
- gap: 10,
193
- opacity: 0.4,
194
- transition: 'opacity 0.3s',
195
- textDecoration: 'none',
196
- color: '#fff',
197
- };
198
- return (react_1.default.createElement("div", null,
199
- react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: globalStyles } }),
200
- react_1.default.createElement("div", { style: containerStyle },
201
- react_1.default.createElement("div", { style: cardStyle },
202
- react_1.default.createElement("div", { style: neonLine }),
203
- react_1.default.createElement("div", { style: contentStyle },
204
- react_1.default.createElement("div", { style: codeStyle }, "404"),
205
- react_1.default.createElement("div", { style: terminalBoxStyle },
206
- react_1.default.createElement("div", { style: { display: 'flex', gap: 6, marginBottom: 8, opacity: 0.3 } },
207
- react_1.default.createElement("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } }),
208
- react_1.default.createElement("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } }),
209
- react_1.default.createElement("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } })),
210
- react_1.default.createElement("div", null,
211
- react_1.default.createElement("span", { style: { color: theme.cyan } }, "GET"),
212
- ' ',
213
- react_1.default.createElement("span", { style: { color: '#fff' } }, path)),
214
- react_1.default.createElement("div", { style: { marginTop: 4, color: theme.textMuted } },
215
- react_1.default.createElement("span", null, "Error: Route not found"))),
216
- react_1.default.createElement("div", { style: { display: 'flex', gap: 12, width: '100%' } },
217
- react_1.default.createElement("a", { href: "/", onMouseEnter: () => setHoverHome(true), onMouseLeave: () => setHoverHome(false), style: { ...getBtnStyle('primary', hoverHome), flex: 1, justifyContent: 'center' } },
218
- react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
219
- react_1.default.createElement("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
220
- react_1.default.createElement("polyline", { points: "9 22 9 12 15 12 15 22" })),
221
- "Back Home"),
222
- react_1.default.createElement("button", { onClick: () => window.location.reload(), onMouseEnter: () => setHoverRetry(true), onMouseLeave: () => setHoverRetry(false), style: { ...getBtnStyle('secondary', hoverRetry), flex: 1, justifyContent: 'center' } },
223
- react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
224
- react_1.default.createElement("path", { d: "M21 2v6h-6" }),
225
- react_1.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }),
226
- react_1.default.createElement("path", { d: "M3 22v-6h6" }),
227
- react_1.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" })),
228
- "Retry"))),
229
- react_1.default.createElement("div", { style: {
230
- padding: '12px 32px',
231
- background: 'rgba(97, 218, 251, 0.02)',
232
- borderTop: '1px solid rgba(97, 218, 251, 0.05)',
233
- display: 'flex',
234
- justifyContent: 'space-between',
235
- alignItems: 'center',
236
- fontSize: 11,
237
- color: 'rgba(255,255,255,0.3)'
238
- } },
239
- react_1.default.createElement("span", null, "Vatts Server"),
240
- react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
241
- react_1.default.createElement("div", { style: { width: 6, height: 6, borderRadius: '50%', background: theme.cyan, boxShadow: `0 0 6px ${theme.cyan}` } }),
242
- react_1.default.createElement("span", { style: { color: theme.cyan } }, "Not Found")))),
243
- react_1.default.createElement("a", { href: "https://npmjs.com/package/vatts", target: "_blank", rel: "noopener noreferrer", style: brandStyle, onMouseEnter: (e) => e.currentTarget.style.opacity = '1', onMouseLeave: (e) => e.currentTarget.style.opacity = '0.4' },
244
- react_1.default.createElement("img", { src: "https://raw.githubusercontent.com/murillo-frazao-cunha/vatts-docs/master/public/logo.png", alt: "Vatts Logo", style: { width: 20, height: 20 } }),
245
- react_1.default.createElement("span", { style: { fontSize: 13, fontWeight: 600, color: '#fff' } },
246
- "Vatts",
247
- react_1.default.createElement("span", { style: { color: theme.cyan } }, ".js"))))));
248
- }
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- export default function DevIndicator({ hasBuildError, onClickBuildError, }: {
3
- hasBuildError?: boolean;
4
- onClickBuildError?: () => void;
5
- }): React.ReactPortal | null;