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/dist/frameworks/themes/DefaultNotFound.js ADDED
@@ -0,0 +1,330 @@
1
+ "use strict";
2
+ /*
3
+ * This file is part of the Vatts.js Project.
4
+ * Copyright (c) 2026 mfraz
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+ function getDefaultNotFound() {
19
+ return `
20
+ <!DOCTYPE html>
21
+ <html lang="en">
22
+ <head>
23
+ <meta charset="UTF-8" />
24
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
25
+ <title>404 | Not Found</title>
26
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
27
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
28
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
29
+ <style>
30
+ :root {
31
+ --bg-base-start: #050507;
32
+ --bg-base-end: #09090b;
33
+
34
+ --bg-card: #0a0a0c;
35
+ --bg-terminal: #050505;
36
+
37
+ --text-main: #ffffff;
38
+ --text-dim: #71717a;
39
+ --color-accent: #0ea5e9;
40
+ }
41
+
42
+ body {
43
+ margin: 0;
44
+ padding: 0;
45
+ width: 100vw;
46
+ height: 100vh;
47
+ background-color: var(--bg-base-start);
48
+ background-image: linear-gradient(135deg, var(--bg-base-start), var(--bg-base-end));
49
+ font-family: 'Inter', system-ui, sans-serif;
50
+ color: var(--text-main);
51
+ display: flex;
52
+ flex-direction: column;
53
+ justify-content: center;
54
+ align-items: center;
55
+ overflow: hidden;
56
+ }
57
+
58
+ .container {
59
+ display: flex;
60
+ flex-direction: column;
61
+ align-items: center;
62
+ width: 100%;
63
+ z-index: 2;
64
+ }
65
+
66
+ .card-wrapper {
67
+ padding: 3px;
68
+ border-radius: 16px;
69
+ background: linear-gradient(135deg, rgb(24, 24, 27), rgb(39, 39, 42), transparent);
70
+ box-sizing: border-box;
71
+ }
72
+
73
+ .card {
74
+ background-color: var(--bg-card);
75
+ border-radius: 13px;
76
+ padding: 32px 40px;
77
+ width: 100%;
78
+ display: flex;
79
+ flex-direction: column;
80
+ gap: 24px;
81
+ box-sizing: border-box;
82
+ border: none;
83
+ box-shadow: none;
84
+ }
85
+
86
+ /* GRID PARA CONTROLAR O ESPAÇO E EVITAR QUE OS ELEMENTOS VAZEM */
87
+ .content {
88
+ display: grid;
89
+ grid-template-columns: auto 1fr;
90
+ align-items: center;
91
+ gap: 32px;
92
+ width: 100%;
93
+ }
94
+
95
+ .left-side {
96
+ display: flex;
97
+ flex-direction: column;
98
+ align-items: center;
99
+ justify-content: center;
100
+ min-width: 100px;
101
+ }
102
+
103
+ .code {
104
+ font-size: 4.5rem;
105
+ font-weight: 900;
106
+ line-height: 1;
107
+ letter-spacing: -0.05em;
108
+ background: linear-gradient(to right, #fff, var(--text-dim));
109
+ -webkit-background-clip: text;
110
+ -webkit-text-fill-color: transparent;
111
+ margin: 0;
112
+ }
113
+
114
+ .error-label {
115
+ font-size: 10px;
116
+ font-weight: 800;
117
+ letter-spacing: 0.1em;
118
+ color: #ef4444;
119
+ text-transform: uppercase;
120
+ margin-top: 4px;
121
+ }
122
+
123
+ .right-side {
124
+ display: flex;
125
+ flex-direction: column;
126
+ gap: 16px;
127
+ min-width: 0; /* Permite que o container encolha sem quebrar a grid */
128
+ }
129
+
130
+ .terminal-box {
131
+ width: 100%;
132
+ background-color: var(--bg-terminal);
133
+ border-radius: 8px;
134
+ padding: 16px;
135
+ font-family: 'JetBrains Mono', monospace;
136
+ font-size: 0.8rem;
137
+ text-align: left;
138
+ color: var(--text-dim);
139
+ box-sizing: border-box;
140
+ }
141
+
142
+ .terminal-dots {
143
+ display: flex;
144
+ gap: 6px;
145
+ margin-bottom: 10px;
146
+ opacity: 0.5;
147
+ }
148
+
149
+ .dot {
150
+ width: 8px;
151
+ height: 8px;
152
+ border-radius: 50%;
153
+ background: var(--text-dim);
154
+ }
155
+
156
+ .terminal-route {
157
+ overflow-wrap: anywhere; /* Impede a rota de vazar para fora do terminal */
158
+ word-break: break-all;
159
+ line-height: 1.4;
160
+ }
161
+
162
+ .method {
163
+ color: var(--color-accent);
164
+ font-weight: 600;
165
+ margin-right: 6px;
166
+ }
167
+
168
+ .route-path {
169
+ color: var(--text-main);
170
+ }
171
+
172
+ .actions {
173
+ display: flex;
174
+ gap: 12px;
175
+ width: 100%;
176
+ }
177
+
178
+ .btn {
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ gap: 8px;
183
+ padding: 10px 20px;
184
+ border-radius: 8px;
185
+ font-size: 0.85rem;
186
+ font-weight: 600;
187
+ cursor: pointer;
188
+ transition: all 0.2s ease;
189
+ border: none;
190
+ outline: none;
191
+ text-decoration: none;
192
+ font-family: 'Inter', sans-serif;
193
+ flex: 1;
194
+ }
195
+
196
+ .btn-primary {
197
+ background: var(--text-main);
198
+ color: #000000;
199
+ }
200
+
201
+ .btn-primary:hover {
202
+ opacity: 0.85;
203
+ transform: translateY(-1px);
204
+ }
205
+
206
+ .btn-secondary {
207
+ background: var(--bg-terminal);
208
+ color: var(--text-main);
209
+ }
210
+
211
+ .btn-secondary:hover {
212
+ background: #1a1a1a;
213
+ }
214
+
215
+ .footer {
216
+ display: flex;
217
+ justify-content: space-between;
218
+ align-items: center;
219
+ font-size: 0.75rem;
220
+ color: var(--text-dim);
221
+ font-weight: 500;
222
+ width: 100%;
223
+ border-top: 1px solid rgba(255, 255, 255, 0.02);
224
+ padding-top: 16px;
225
+ }
226
+
227
+ .status {
228
+ display: flex;
229
+ align-items: center;
230
+ gap: 6px;
231
+ }
232
+
233
+ .status-dot {
234
+ width: 6px;
235
+ height: 6px;
236
+ border-radius: 50%;
237
+ background: #ef4444;
238
+ }
239
+
240
+ .brand-link {
241
+ margin-top: 40px;
242
+ display: flex;
243
+ align-items: center;
244
+ gap: 10px;
245
+ opacity: 0.5;
246
+ transition: opacity 0.3s ease;
247
+ text-decoration: none;
248
+ color: var(--text-main);
249
+ }
250
+
251
+ .brand-link:hover {
252
+ opacity: 1;
253
+ }
254
+
255
+ /* Responsividade básica para telas muito pequenas */
256
+ @media (max-width: 480px) {
257
+ .content {
258
+ grid-template-columns: 1fr;
259
+ gap: 20px;
260
+ }
261
+ .left-side {
262
+ align-items: center;
263
+ }
264
+ }
265
+ </style>
266
+ </head>
267
+ <body>
268
+ <div class="container">
269
+ <div class="card-wrapper">
270
+ <div class="card">
271
+ <div class="content">
272
+ <div class="left-side">
273
+ <h1 class="code">404</h1>
274
+ <span class="error-label">Not Found</span>
275
+ </div>
276
+
277
+ <div class="right-side">
278
+ <div class="terminal-box">
279
+ <div class="terminal-dots">
280
+ <div class="dot"></div>
281
+ <div class="dot"></div>
282
+ <div class="dot"></div>
283
+ </div>
284
+ <div class="terminal-route">
285
+ <span class="method">GET</span>
286
+ <span class="route-path" id="display-path">/</span>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="actions">
291
+ <a href="/" class="btn btn-primary">
292
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><polyline points="9 22 9 12 15 12 15 22" /></svg>
293
+ Home
294
+ </a>
295
+ <button id="retry-btn" class="btn btn-secondary">
296
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 2v6h-6"></path><path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path><path d="M3 22v-6h6"></path><path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>
297
+ Retry
298
+ </button>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="footer">
304
+ <span>Vatts.js</span>
305
+ <div class="status">
306
+ <div class="status-dot"></div>
307
+ <span style="color: var(--text-main);">404</span>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <a href="https://npmjs.com/package/vatts" target="_blank" rel="noopener noreferrer" class="brand-link">
314
+ <img src="https://raw.githubusercontent.com/murillo-frazao-cunha/vatts-docs/master/public/logo.png" alt="Vatts Logo" style="width: 24px; height: 24px;" />
315
+ <span style="font-size: 14px; font-weight: 600; letter-spacing: 0.02em;">Vatts.js</span>
316
+ </a>
317
+ </div>
318
+
319
+ <script>
320
+ document.getElementById('display-path').textContent = window.location.pathname;
321
+
322
+ document.getElementById('retry-btn').addEventListener('click', () => {
323
+ window.location.reload();
324
+ });
325
+ </script>
326
+ </body>
327
+ </html>
328
+ `;
329
+ }
330
+ module.exports = { getDefaultNotFound };
package/dist/frameworks/themes/ErrorModal.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/frameworks/themes/ErrorModal.js ADDED
@@ -0,0 +1,345 @@
1
+ "use strict";
2
+ /*
3
+ * This file is part of the Vatts.js Project.
4
+ * Copyright (c) 2026 mfraz
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+ Object.defineProperty(exports, "__esModule", { value: true });
19
+ class VattsErrorModal extends HTMLElement {
20
+ constructor() {
21
+ super();
22
+ this._error = null;
23
+ this._isOpen = false;
24
+ this.handleKeyDown = this.handleKeyDown.bind(this);
25
+ this.closeModal = this.closeModal.bind(this);
26
+ this.copyLog = this.copyLog.bind(this);
27
+ }
28
+ set error(val) {
29
+ this._error = val;
30
+ this.render();
31
+ }
32
+ get error() {
33
+ return this._error;
34
+ }
35
+ set isOpen(val) {
36
+ this._isOpen = val;
37
+ if (val) {
38
+ document.body.style.overflow = 'hidden';
39
+ window.addEventListener('keydown', this.handleKeyDown);
40
+ }
41
+ else {
42
+ document.body.style.overflow = '';
43
+ window.removeEventListener('keydown', this.handleKeyDown);
44
+ }
45
+ this.render();
46
+ }
47
+ get isOpen() {
48
+ return this._isOpen;
49
+ }
50
+ handleKeyDown(e) {
51
+ if (e.key === 'Escape' && this._isOpen) {
52
+ this.closeModal();
53
+ }
54
+ }
55
+ closeModal() {
56
+ this.dispatchEvent(new CustomEvent('close-modal', { bubbles: true, composed: true }));
57
+ }
58
+ copyLog() {
59
+ this.dispatchEvent(new CustomEvent('copy-log', { bubbles: true, composed: true }));
60
+ }
61
+ parseAnsi(text) {
62
+ if (!text)
63
+ return '';
64
+ const ANSI_COLORS = {
65
+ '30': '#71717a', '31': '#ef4444', '32': '#22c55e',
66
+ '33': '#eab308', '34': '#3b82f6', '35': '#d946ef',
67
+ '36': '#06b6d4', '37': '#f4f4f5', '90': '#52525b',
68
+ };
69
+ const regex = /\u001b\[(\d+)(?:;\d+)*m/g;
70
+ let result = '';
71
+ let lastIndex = 0;
72
+ let match;
73
+ let currentColor = null;
74
+ while ((match = regex.exec(text)) !== null) {
75
+ const rawText = text.slice(lastIndex, match.index);
76
+ if (rawText) {
77
+ result += currentColor ? `<span style="color: ${currentColor}">${this.escapeHtml(rawText)}</span>` : this.escapeHtml(rawText);
78
+ }
79
+ const code = match[1];
80
+ if (code === '39' || code === '0') {
81
+ currentColor = null;
82
+ }
83
+ else if (ANSI_COLORS[code]) {
84
+ currentColor = ANSI_COLORS[code];
85
+ }
86
+ lastIndex = regex.lastIndex;
87
+ }
88
+ const remaining = text.slice(lastIndex);
89
+ if (remaining) {
90
+ result += currentColor ? `<span style="color: ${currentColor}">${this.escapeHtml(remaining)}</span>` : this.escapeHtml(remaining);
91
+ }
92
+ return result;
93
+ }
94
+ escapeHtml(unsafe) {
95
+ return unsafe
96
+ .replace(/&/g, "&amp;")
97
+ .replace(/</g, "&lt;")
98
+ .replace(/>/g, "&gt;")
99
+ .replace(/"/g, "&quot;")
100
+ .replace(/'/g, "&#039;");
101
+ }
102
+ render() {
103
+ if (!this._isOpen || !this._error) {
104
+ this.innerHTML = '';
105
+ return;
106
+ }
107
+ const rawOutput = this._error.message || '';
108
+ const stackOutput = this._error.stack ? `\n\nStack Trace:\n${this._error.stack}` : '';
109
+ const parsedMessage = this.parseAnsi(rawOutput);
110
+ const parsedStack = this.parseAnsi(stackOutput);
111
+ this.innerHTML = `
112
+ <style>
113
+ .vatts-modal-overlay {
114
+ position: fixed;
115
+ top: 0; left: 0;
116
+ width: 100vw; height: 100vh;
117
+ z-index: 2147483647;
118
+ background: rgba(0, 0, 0, 0.85);
119
+ backdrop-filter: blur(8px);
120
+ -webkit-backdrop-filter: blur(8px);
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ padding: 24px;
125
+ box-sizing: border-box;
126
+ animation: fadeIn 0.2s ease-out;
127
+ }
128
+
129
+ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
130
+ @keyframes scaleUp { from { transform: scale(0.98) translateY(10px); } to { transform: scale(1) translateY(0); } }
131
+
132
+ /* BORDA FAKE DE 3PX COM GRADIENTE ESCURO */
133
+ .vatts-card-wrapper {
134
+ width: 100%;
135
+ max-width: 960px;
136
+ max-height: 90vh; /* Controla o tamanho máximo para não vazar a tela */
137
+ padding: 3px;
138
+ border-radius: 16px;
139
+ background: linear-gradient(135deg, rgb(24, 24, 27), rgb(39, 39, 42), transparent);
140
+ display: flex;
141
+ flex-direction: column;
142
+ animation: scaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
143
+ }
144
+
145
+ /* CARD PRINCIPAL SEM BORDAS E SEM SHADOWS */
146
+ .vatts-modal-card {
147
+ background: #0a0a0c;
148
+ border-radius: 13px;
149
+ display: flex;
150
+ flex-direction: column;
151
+ flex: 1;
152
+ min-height: 0; /* Essencial para o scroll interno funcionar */
153
+ overflow: hidden;
154
+ border: none;
155
+ box-shadow: none;
156
+ }
157
+
158
+ .vatts-modal-header {
159
+ padding: 24px 32px;
160
+ display: flex;
161
+ justify-content: space-between;
162
+ align-items: center;
163
+ border-bottom: 1px solid rgba(255, 255, 255, 0.03);
164
+ }
165
+
166
+ .vatts-header-left {
167
+ display: flex;
168
+ align-items: center;
169
+ gap: 16px;
170
+ }
171
+
172
+ .vatts-badge-error {
173
+ font-size: 12px;
174
+ font-weight: 900;
175
+ color: #ffffff;
176
+ background: #ef4444;
177
+ padding: 4px 10px;
178
+ border-radius: 6px;
179
+ letter-spacing: 0.05em;
180
+ }
181
+
182
+ .vatts-badge-plugin {
183
+ font-size: 12px;
184
+ color: #a1a1aa;
185
+ background: #18181b;
186
+ padding: 4px 10px;
187
+ border-radius: 6px;
188
+ font-family: 'JetBrains Mono', monospace;
189
+ }
190
+
191
+ /* ÁREA DO TERMINAL COMPLETAMENTE REFEITA PARA VISIBILIDADE */
192
+ .vatts-terminal-container {
193
+ flex: 1;
194
+ min-height: 0;
195
+ padding: 0 32px 32px 32px;
196
+ overflow-y: auto;
197
+ display: flex;
198
+ flex-direction: column;
199
+ }
200
+
201
+ /* Custom Scrollbar pro Terminal */
202
+ .vatts-terminal-container::-webkit-scrollbar {
203
+ width: 10px;
204
+ }
205
+ .vatts-terminal-container::-webkit-scrollbar-track {
206
+ background: transparent;
207
+ }
208
+ .vatts-terminal-container::-webkit-scrollbar-thumb {
209
+ background: #27272a;
210
+ border-radius: 10px;
211
+ border: 3px solid #0a0a0c; /* Borda da mesma cor do fundo para dar espaçamento */
212
+ }
213
+ .vatts-terminal-container::-webkit-scrollbar-thumb:hover {
214
+ background: #3f3f46;
215
+ }
216
+
217
+ .vatts-terminal {
218
+ background: #050505;
219
+ border-radius: 8px;
220
+ padding: 24px;
221
+ margin-top: 24px;
222
+ font-family: "JetBrains Mono", monospace;
223
+ font-size: 13px;
224
+ line-height: 1.6;
225
+ color: #f4f4f5;
226
+ white-space: pre-wrap;
227
+ word-break: break-word;
228
+ flex: 1;
229
+ }
230
+
231
+ .vatts-stack {
232
+ margin-top: 24px;
233
+ padding-top: 24px;
234
+ border-top: 1px dashed rgba(255, 255, 255, 0.1);
235
+ color: #a1a1aa;
236
+ }
237
+
238
+ .vatts-footer {
239
+ padding: 16px 32px;
240
+ background: transparent;
241
+ display: flex;
242
+ justify-content: space-between;
243
+ align-items: center;
244
+ border-top: 1px solid rgba(255, 255, 255, 0.03);
245
+ font-size: 12px;
246
+ color: #71717a;
247
+ font-family: 'Inter', sans-serif;
248
+ }
249
+
250
+ .vatts-btn-group {
251
+ display: flex;
252
+ gap: 12px;
253
+ }
254
+
255
+ .vatts-btn {
256
+ display: flex;
257
+ align-items: center;
258
+ justify-content: center;
259
+ gap: 8px;
260
+ padding: 10px 20px;
261
+ border-radius: 8px;
262
+ font-size: 12px;
263
+ font-weight: 600;
264
+ cursor: pointer;
265
+ transition: all 0.2s ease;
266
+ border: none;
267
+ outline: none;
268
+ font-family: 'Inter', system-ui, sans-serif;
269
+ }
270
+
271
+ .vatts-btn-primary {
272
+ background: #ffffff;
273
+ color: #000000;
274
+ }
275
+ .vatts-btn-primary:hover {
276
+ opacity: 0.85;
277
+ transform: translateY(-1px);
278
+ }
279
+
280
+ .vatts-btn-secondary {
281
+ background: #18181b;
282
+ color: #ffffff;
283
+ }
284
+ .vatts-btn-secondary:hover {
285
+ background: #27272a;
286
+ }
287
+ </style>
288
+
289
+ <div class="vatts-modal-overlay" id="vatts-overlay">
290
+ <div class="vatts-card-wrapper" id="vatts-card-wrapper">
291
+ <div class="vatts-modal-card" id="vatts-card">
292
+
293
+ <div class="vatts-modal-header">
294
+ <div class="vatts-header-left">
295
+ <span class="vatts-badge-error">BUILD ERROR</span>
296
+ ${this._error.plugin ? `<span class="vatts-badge-plugin">${this._error.plugin}</span>` : ''}
297
+ </div>
298
+
299
+ <div class="vatts-btn-group">
300
+ <button class="vatts-btn vatts-btn-secondary" id="vatts-copy-btn">
301
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
302
+ Copy Log
303
+ </button>
304
+ <button class="vatts-btn vatts-btn-primary" id="vatts-close-btn">
305
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
306
+ Close
307
+ </button>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="vatts-terminal-container">
312
+ <div class="vatts-terminal">
313
+ ${parsedMessage}
314
+ ${parsedStack ? `<div class="vatts-stack">${parsedStack}</div>` : ''}
315
+ </div>
316
+ </div>
317
+
318
+ <div class="vatts-footer">
319
+ <div style="display: flex; align-items: center; gap: 8px;">
320
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2v6h-6"></path><path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path><path d="M3 22v-6h6"></path><path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>
321
+ <span>vatts-cli</span>
322
+ </div>
323
+ <span>Waiting for file changes to rebuild...</span>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ `;
329
+ const overlay = this.querySelector('#vatts-overlay');
330
+ const cardWrapper = this.querySelector('#vatts-card-wrapper');
331
+ const closeBtn = this.querySelector('#vatts-close-btn');
332
+ const copyBtn = this.querySelector('#vatts-copy-btn');
333
+ if (overlay)
334
+ overlay.addEventListener('mousedown', this.closeModal);
335
+ if (cardWrapper)
336
+ cardWrapper.addEventListener('mousedown', (e) => e.stopPropagation());
337
+ if (closeBtn)
338
+ closeBtn.addEventListener('click', this.closeModal);
339
+ if (copyBtn)
340
+ copyBtn.addEventListener('click', this.copyLog);
341
+ }
342
+ }
343
+ if (typeof window !== 'undefined' && !customElements.get('vatts-error-modal')) {
344
+ customElements.define('vatts-error-modal', VattsErrorModal);
345
+ }
package/dist/frameworks/themes/ServerError.d.ts ADDED
@@ -0,0 +1 @@
1
+ export function getServerErrorHtml(options?: {}): string;