vatts 1.2.1 → 1.2.3

package/dist/react/renderer-react.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.render = render;
 /*
  * This file is part of the Vatts.js Project.
- * Copyright (c) 2026 itsmuzin
+ * Copyright (c) 2026 mfraz
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/dist/router.js

@@ -19,7 +19,7 @@ exports.findMatchingWebSocketRoute = findMatchingWebSocketRoute;
 exports.setupWebSocketUpgrade = setupWebSocketUpgrade;
 /*
  * This file is part of the Vatts.js Project.
- * Copyright (c) 2026 itsmuzin
+ * Copyright (c) 2026 mfraz
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/dist/rpc/server.js

@@ -1,7 +1,7 @@
 "use strict";
 /*
  * This file is part of the Vatts.js Project.
- * Copyright (c) 2026 itsmuzin
+ * Copyright (c) 2026 mfraz
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/dist/rpc/types.js

@@ -1,7 +1,7 @@
 "use strict";
 /*
  * This file is part of the Vatts.js Project.
- * Copyright (c) 2026 itsmuzin
+ * Copyright (c) 2026 mfraz
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/dist/tsconfigPaths.js

@@ -1,7 +1,7 @@
 "use strict";
 /*
  * This file is part of the Vatts.js Project.
- * Copyright (c) 2026 itsmuzin
+ * Copyright (c) 2026 mfraz
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/dist/vue/App.vue

@@ -1,27 +1,47 @@
+<!--
+  This file is part of the Vatts.js Project.
+  Copyright (c) 2026 mfraz
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
 <template>
-  <div>
-    <!-- Renderiza o Layout se existir, envolvendo o conteúdo -->
-    <component :is="resolvedLayout" v-if="resolvedLayout">
-      <component :is="resolvedContent" v-bind="contentProps" :key="`page-${hmrTimestamp}`" />
-    </component>
-
-    <!-- Se não tiver layout, renderiza o conteúdo direto -->
-    <component v-else :is="resolvedContent" v-bind="contentProps" :key="`page-${hmrTimestamp}`" />
-
-    <!-- Dev Tools / Indicadores -->
-    <DevIndicator
-        v-if="isDev"
-        :has-build-error="!!buildError"
-        @click-build-error="isErrorOpen = true"
+  <component :is="resolvedLayout" v-if="resolvedLayout">
+    <component
+        :is="resolvedContent"
+        v-bind="contentProps"
+        :key="`page-${hmrTimestamp}-${currentPathKey}`"
     />
-
-    <ErrorModal
-        :error="buildError"
-        :is-open="isErrorOpen"
-        @close="isErrorOpen = false"
-        @copy="copyBuildError"
-    />
-  </div>
+  </component>
+
+  <component
+      v-else
+      :is="resolvedContent"
+      v-bind="contentProps"
+      :key="`page-${hmrTimestamp}-${currentPathKey}`"
+  />
+
+  <DevIndicator
+      v-if="isDev"
+      :has-build-error="!!buildError"
+      @click-build-error="isErrorOpen = true"
+  />
+
+  <ErrorModal
+      :error="buildError"
+      :is-open="isErrorOpen"
+      @close="isErrorOpen = false"
+      @copy="copyBuildError"
+  />
 </template>
 
 <script setup>
@@ -35,13 +55,14 @@ const props = defineProps({
   componentMap: Object,
   routes: Array,
   initialComponentPath: String,
-  initialParams: null, // Aceita qualquer tipo
-  layoutComponent: null // Aceita componente ou null
+  initialParams: null,
+  layoutComponent: null
 });
 
 // --- Estado ---
 const hmrTimestamp = ref(Date.now());
-// Removemos as tipagens e asserções "as any" diretas onde não são necessárias em JS
+const currentPathKey = ref(window.location.pathname); // Mantendo a correção da rota anterior
+
 const buildError = ref(window.__VATTS_BUILD_ERROR__ || null);
 const isErrorOpen = ref(!!window.__VATTS_BUILD_ERROR__);
 const isDev = process.env.NODE_ENV !== 'production';
@@ -96,10 +117,14 @@ const params = ref({});
 
 const updateRoute = () => {
   const currentPath = window.location.pathname.replace("index.html", '');
-  const match = findRouteForPath(currentPath);
 
+  // Atualiza a chave para garantir re-render na mesma rota com params diferentes
+  currentPathKey.value = currentPath;
+
+  const match = findRouteForPath(currentPath);
   if (match) {
     CurrentPageComponent.value = props.componentMap[match.componentPath];
+    console.log(props.componentMap[match.componentPath] || 'null')
     params.value = match.params;
 
     if (match.metadata?.title != null) {
@@ -111,14 +136,14 @@ const updateRoute = () => {
   }
 };
 
-// --- Computed para resolver o conteúdo final (404 vs Página) ---
+// --- Computed ---
 const resolvedContent = computed(() => {
   if (!CurrentPageComponent.value || props.initialComponentPath === '__404__') {
     const NotFoundComponent = window.__VATTS_NOT_FOUND__;
     if (NotFoundComponent) return NotFoundComponent;
 
     const DefaultNotFound = window.__VATTS_DEFAULT_NOT_FOUND__;
-    return DefaultNotFound || 'div'; // Fallback seguro
+    return DefaultNotFound || 'div';
   }
   return CurrentPageComponent.value;
 });
@@ -132,43 +157,30 @@ const resolvedLayout = computed(() => {
   return props.layoutComponent || null;
 });
 
-// --- Lifecycle & Listeners ---
+// --- Lifecycle ---
 onMounted(() => {
-  // Inicializa rota
   updateRoute();
 
-  // Listeners de Build
   window.addEventListener('vatts:build-error', handleBuildError);
   window.addEventListener('vatts:build-ok', handleBuildOk);
-
-  // Listeners de Rota
   window.addEventListener('popstate', updateRoute);
+
   const unsubscribeRouter = router.subscribe(updateRoute);
 
-  // HMR Listener
   window.__HWEB_HMR__ = true;
   const handleHMRUpdate = (event) => {
     const { file, timestamp } = event.detail;
-    const fileName = file ? file.split('/').pop()?.split('\\').pop() : 'unknown';
-    console.log('🔥 HMR: Component Update Triggered', fileName);
-
     try {
       hmrTimestamp.value = timestamp;
       window.__HMR_SUCCESS__ = true;
-      setTimeout(() => {
-        window.__HMR_SUCCESS__ = false;
-      }, 3000);
-
-      // Força update da rota caso o componente tenha mudado
+      setTimeout(() => { window.__HMR_SUCCESS__ = false; }, 3000);
       updateRoute();
     } catch (error) {
       console.error('❌ HMR Error:', error);
-      window.__HMR_SUCCESS__ = false;
     }
   };
   window.addEventListener('hmr:component-update', handleHMRUpdate);
 
-  // Cleanup
   onUnmounted(() => {
     window.removeEventListener('vatts:build-error', handleBuildError);
     window.removeEventListener('vatts:build-ok', handleBuildOk);

package/dist/vue/BuildingPage.vue

@@ -8,15 +8,18 @@ try {
 } catch (e) {}
 
 // CSS extraído para evitar que o Vue escape caracteres como '>' ou aspas
+// ATUALIZADO: Paleta de cores alterada para Vue.js Green
 const cssStyles = `
   :root {
     --bg-solid: #000000;
     --card-bg: #0a0a0a;
-    /* PALETA: Monocromática estilo Next.js */
+    /* PALETA: Vue.js Theme */
+    --vue-green: #42b883;       /* O verde principal do Vue */
+    --vue-dark: #35495e;        /* O azul escuro secundário do Vue (para substituir cinzas escuros) */
     --primary: #ffffff;
-    --primary-glow: rgba(255, 255, 255, 0.1);
     --text-main: #ffffff;
-    --text-muted: #64748b;
+    /* Mudei o texto mudo de cinza para um tom mais claro do verde */
+    --text-muted: #a7c4bc;
   }
 
   body {
@@ -49,8 +52,8 @@ const cssStyles = `
     width: 100%;
     max-width: 420px;
     background: var(--card-bg);
-    /* Borda sutil em cinza escuro */
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
+    /* Borda sutil, mudei o brilho para verde */
+    box-shadow: 0 0 0 1px rgba(66, 184, 131, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
     border-radius: 20px;
     overflow: hidden;
     display: flex;
@@ -62,9 +65,9 @@ const cssStyles = `
   .neon-line {
     height: 1px;
     width: 100%;
-    /* Linha de luz branca/cinza */
-    background: linear-gradient(90deg, transparent, #334155, #ffffff, #334155, transparent);
-    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
+    /* Linha de luz: Mudei do gradiente cinza/branco para o verde Vue */
+    background: linear-gradient(90deg, transparent, var(--vue-dark), var(--vue-green), var(--vue-dark), transparent);
+    box-shadow: 0 0 15px rgba(66, 184, 131, 0.2);
   }
 
   .content {
@@ -87,8 +90,8 @@ const cssStyles = `
     object-fit: contain;
     position: relative;
     z-index: 2;
-    /* Deixa a logo levemente dessaturada para combinar */
-    filter: grayscale(0.5);
+    /* Removi o filtro grayscale para a logo do Vue brilhar na cor original */
+    filter: none;
   }
 
   .logo-glow {
@@ -98,9 +101,10 @@ const cssStyles = `
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
-    background: #ffffff;
+    /* Mudei o brilho de fundo de branco para Verde Vue */
+    background: var(--vue-green);
     filter: blur(25px);
-    opacity: 0.1;
+    opacity: 0.2; /* Aumentei um pouco a opacidade para destacar o verde */
     border-radius: 50%;
     animation: pulse 2s ease-in-out infinite;
   }
@@ -110,14 +114,16 @@ const cssStyles = `
     font-size: 2rem;
     font-weight: 800;
     letter-spacing: -0.03em;
-    background: linear-gradient(180deg, #ffffff 0%, #475569 100%);
+    /* Gradiente do texto: De branco para Verde Vue */
+    background: linear-gradient(180deg, #ffffff 0%, var(--vue-green) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
 
   h1 span {
-    color: #475569;
-    -webkit-text-fill-color: #475569;
+    /* O ".js" agora é verde sólido */
+    color: var(--vue-green);
+    -webkit-text-fill-color: var(--vue-green);
   }
 
   p {
@@ -129,14 +135,15 @@ const cssStyles = `
 
   .terminal-box {
     width: 100%;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(66, 184, 131, 0.03); /* Fundo sutilmente verde */
+    border: 1px solid rgba(66, 184, 131, 0.1); /* Borda verde sutil */
     border-radius: 12px;
     padding: 16px;
     text-align: left;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.75rem;
-    color: #475569;
+    /* Cor do texto base do terminal alterada de cinza para um tom claro */
+    color: var(--text-muted);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -152,25 +159,31 @@ const cssStyles = `
   .term-spinner {
     width: 10px;
     height: 10px;
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    border-top-color: #ffffff;
+    border: 2px solid rgba(66, 184, 131, 0.1); /* Borda inativa verde clara */
+    border-top-color: var(--vue-green); /* Spinner ativo verde vibrante */
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
   }
 
-  .file-name { color: #94a3b8; }
-  .accent { color: #ffffff; }
+  .file-name {
+    /* Nomes de arquivo agora num tom azulado/esverdeado claro */
+    color: #8fa3b3;
+  }
+  .accent {
+    /* O destaque "src/vatts.ts" agora é Verde Vue */
+    color: var(--vue-green);
+  }
 
   .card-footer {
     width: 100%;
     padding: 12px 32px;
-    background: rgba(255,255,255,0.02);
-    border-top: 1px solid rgba(255,255,255,0.05);
+    background: rgba(66, 184, 131, 0.03); /* Fundo sutil verde */
+    border-top: 1px solid rgba(66, 184, 131, 0.05); /* Borda sutil verde */
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 11px;
-    color: rgba(255,255,255,0.2);
+    color: rgba(255,255,255,0.4);
     box-sizing: border-box;
   }
 
@@ -178,7 +191,8 @@ const cssStyles = `
     display: flex;
     align-items: center;
     gap: 6px;
-    color: #ffffff;
+    /* Texto de status e versão agora em Verde Vue */
+    color: var(--vue-green);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -187,14 +201,15 @@ const cssStyles = `
   .dot {
     width: 6px;
     height: 6px;
-    background-color: #ffffff;
+    /* O ponto de status agora é Verde Vue com brilho verde */
+    background-color: var(--vue-green);
     border-radius: 50%;
-    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 8px var(--vue-green);
   }
 
   @keyframes pulse {
-    0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
-    50% { opacity: 0.15; transform: translate(-50%, -50%) scale(1.1); }
+    0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
+    50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.1); }
   }
 
   @keyframes spin {
@@ -220,15 +235,10 @@ const clientReloadScript = `
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
 
-    <!-- v-html garante que o CSS seja renderizado sem escape (ex: '>' permanece '>') -->
     <style v-html="cssStyles"></style>
   </head>
   <body>
   <div class="building-screen-body">
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
-
     <div class="container">
       <div class="build-card">
         <div class="neon-line"></div>
@@ -248,7 +258,7 @@ const clientReloadScript = `
               <span class="file-name">Compiling <span class="accent">src/vatts.ts</span>...</span>
             </div>
             <div class="term-line" style="opacity: 0.5">
-              <span>✓</span>
+              <span style="color: var(--vue-green)">✓</span>
               <span class="file-name">Optimizing assets</span>
             </div>
           </div>
@@ -265,7 +275,6 @@ const clientReloadScript = `
     </div>
   </div>
 
-  <!-- v-html para o script garante que a arrow function não quebre com '&gt;' -->
   <script v-html="clientReloadScript"></script>
   </body>
   </html>

package/dist/vue/DefaultNotFound.vue

@@ -1,3 +1,19 @@
+<!--
+  This file is part of the Vatts.js Project.
+  Copyright (c) 2026 mfraz
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
 <script setup>
 import { ref, onMounted } from 'vue';
 
@@ -16,7 +32,6 @@ const reload = () => {
 
 <template>
   <div class="error-page-wrapper">
-    <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
 
     <div class="container">
@@ -87,20 +102,13 @@ const reload = () => {
   box-sizing: border-box;
 }
 
-/* Em componentes Vue, estilos 'scoped' aplicam-se apenas a este componente.
-  Para garantir o fundo preto total, usamos :global(body) ou aplicamos ao container fixo.
-*/
-:global(body) {
-  margin: 0;
-  padding: 0;
-  background-color: #000000;
-  color: #ffffff;
-  overflow: hidden;
-  height: 100vh;
-  width: 100vw;
-}
-
+/* Variáveis CSS locais para facilitar manutenção das cores Vue */
 .container {
+  --vue-green: #42b883;
+  --vue-dark: #35495e;
+  --bg-color: #000000;
+  --card-bg: #0a0a0a;
+
   position: fixed;
   top: 0;
   left: 0;
@@ -113,15 +121,20 @@ const reload = () => {
   justify-content: center;
   width: 100vw;
   height: 100vh;
-  background: #000000;
+  background: var(--bg-color);
+  color: #ffffff;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
 }
 
 .card {
   width: min(90%, 500px);
   display: flex;
   flex-direction: column;
-  background: #0a0a0a;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
+  background: var(--card-bg);
+  /* Sombra com leve toque de verde */
+  box-shadow: 0 0 0 1px rgba(66, 184, 131, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
   border-radius: 20px;
   overflow: hidden;
   position: relative;
@@ -130,8 +143,9 @@ const reload = () => {
 .neon-line {
   height: 1px;
   width: 100%;
-  background: linear-gradient(90deg, transparent, #334155, #ffffff, #334155, transparent);
-  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
+  /* Gradiente Verde Vue */
+  background: linear-gradient(90deg, transparent, var(--vue-dark), var(--vue-green), var(--vue-dark), transparent);
+  box-shadow: 0 0 15px rgba(66, 184, 131, 0.2);
 }
 
 .content {
@@ -148,26 +162,29 @@ const reload = () => {
   line-height: 1;
   letter-spacing: -0.04em;
   color: #fff;
-  background: linear-gradient(180deg, #ffffff 0%, #475569 100%);
+  /* Gradiente Texto: Branco para Verde */
+  background: linear-gradient(180deg, #ffffff 0%, var(--vue-green) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   /* Fallback */
-  color: #ffffff;
+  color: var(--vue-green);
   margin-bottom: 16px;
-  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.05));
+  filter: drop-shadow(0 0 20px rgba(66, 184, 131, 0.1));
 }
 
 .terminal-box {
   width: 100%;
-  background: rgba(255, 255, 255, 0.02);
+  /* Fundo esverdeado muito sutil */
+  background: rgba(66, 184, 131, 0.03);
   border-radius: 12px;
   padding: 16px;
   margin-bottom: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  /* Borda verde sutil */
+  border: 1px solid rgba(66, 184, 131, 0.1);
   font-family: "JetBrains Mono", monospace;
   font-size: 12px;
   text-align: left;
-  color: #94a3b8;
+  color: #a7c4bc; /* Texto terminal mais claro */
   box-sizing: border-box;
 }
 
@@ -186,7 +203,7 @@ const reload = () => {
 }
 
 .method {
-  color: #64748b;
+  color: var(--vue-green); /* GET em verde */
   margin-right: 4px;
 }
 
@@ -196,7 +213,7 @@ const reload = () => {
 
 .error-msg {
   margin-top: 4px;
-  color: #475569;
+  color: #5f7e76; /* Verde acinzentado escuro */
 }
 
 .actions {
@@ -224,31 +241,32 @@ const reload = () => {
 }
 
 .btn-primary {
-  background: #f8fafc;
+  /* Botão principal Verde Vue */
+  background: var(--vue-green);
   color: #000000;
 }
 
 .btn-primary:hover {
   background: #ffffff;
-  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 20px rgba(66, 184, 131, 0.4);
 }
 
 .btn-secondary {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(66, 184, 131, 0.2);
 }
 
 .btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(66, 184, 131, 0.1);
   color: #fff;
-  border-color: rgba(255, 255, 255, 0.3);
+  border-color: var(--vue-green);
 }
 
 .footer {
   padding: 12px 32px;
-  background: rgba(255, 255, 255, 0.02);
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(66, 184, 131, 0.02);
+  border-top: 1px solid rgba(66, 184, 131, 0.05);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -267,11 +285,13 @@ const reload = () => {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #475569;
+  /* Ponto de status Verde */
+  background: var(--vue-green);
+  box-shadow: 0 0 6px var(--vue-green);
 }
 
 .status-text {
-  color: #94a3b8;
+  color: var(--vue-green);
 }
 
 .brand-link {
@@ -292,7 +312,8 @@ const reload = () => {
 .brand-logo {
   width: 20px;
   height: 20px;
-  filter: grayscale(1) brightness(2);
+  /* Removi o grayscale para a logo brilhar normal, se preferir monocromático com verde, pode ajustar */
+  filter: none;
 }
 
 .brand-text {
@@ -302,6 +323,7 @@ const reload = () => {
 }
 
 .brand-highlight {
-  color: #64748b;
+  /* .js em verde */
+  color: var(--vue-green);
 }
 </style>

package/dist/vue/DevIndicator.vue

@@ -1,3 +1,19 @@
+<!--
+  This file is part of the Vatts.js Project.
+  Copyright (c) 2026 mfraz
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 

package/dist/vue/ErrorModal.vue

@@ -1,3 +1,19 @@
+<!--
+  This file is part of the Vatts.js Project.
+  Copyright (c) 2026 mfraz
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
 <template>
   <Teleport to="body">
     <!-- Overlay -->