vatts 1.2.0 → 1.2.2

package/dist/env/env.js

@@ -4,6 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadEnv = void 0;
+/*
+ * 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.
+ */
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const console_1 = __importDefault(require("../api/console"));

package/dist/global/global.d.ts

@@ -1,6 +1,6 @@
 /*
  * 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/helpers.js

@@ -2,7 +2,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/hotReload.js

@@ -39,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HotReloadManager = void 0;
 /*
  * 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/index.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/loaders.js

@@ -1,7 +1,7 @@
 "use strict";
 /*
  * This file is part of the Vatts.js Project.
- * Copyright (c) 2026 itsmuzin
+ * Copyright (c) 2026 mfraz
  */
 const fs = require('fs');
 const path = require('path');

package/dist/react/BuildingPage.js

@@ -4,6 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = BuildingScreen;
+/*
+ * 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.
+ */
 const react_1 = __importDefault(require("react"));
 function BuildingScreen() {
     let version = "1.0.0";

package/dist/react/DefaultNotFound.js

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ErrorPage;
 /*
  * 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/react/DevIndicator.js

@@ -34,6 +34,22 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = DevIndicator;
+/*
+ * 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.
+ */
 const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 function DevIndicator({ hasBuildError = false, onClickBuildError, }) {

package/dist/react/ErrorModal.js

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorModal = ErrorModal;
 /*
  * 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/react/Link.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = Link;
 /*
  * 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/react/client.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/react/entry.client.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /*
  * 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/react/image/Image.js

@@ -3,6 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * 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.
+ */
 const react_1 = __importDefault(require("react"));
 const Image = ({ src, width, height, quality = 75, priority = false, className, style, alt = "", ...props }) => {
     function getBaseUrl() {

package/dist/react/react.build.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Cria a configuração do Rollup otimizada para React
+ * @param {string} entryPoint - Arquivo de entrada
+ * @param {string} outdir - Diretório de saída
+ * @param {boolean} isProduction - Flag de produção
+ * @param {Object} plugins - Objeto contendo arrays de plugins
+ * @param {Array} plugins.prePlugins - Plugins para rodar ANTES do framework
+ * @param {Array} plugins.postPlugins - Plugins para rodar DEPOIS do framework
+ */
+export function createReactConfig(entryPoint: string, outdir: string, isProduction: boolean, { prePlugins, postPlugins }?: {
+    prePlugins: any[];
+    postPlugins: any[];
+}): Promise<{
+    input: string;
+    treeshake: {
+        moduleSideEffects: string;
+        preset: string;
+    };
+    cache: boolean;
+    perf: boolean;
+    maxParallelFileOps: number;
+    plugins: any[];
+    onwarn(warning: any, warn: any): void;
+}>;

package/dist/react/react.build.js

@@ -0,0 +1,95 @@
+"use strict";
+/*
+ * 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.
+ */
+const nodeResolve = require('@rollup/plugin-node-resolve').default;
+const commonjs = require('@rollup/plugin-commonjs').default;
+const replace = require('@rollup/plugin-replace').default;
+const esbuild = require('rollup-plugin-esbuild').default;
+const jsonPlugin = require("@rollup/plugin-json").default;
+/**
+ * Cria a configuração do Rollup otimizada para React
+ * @param {string} entryPoint - Arquivo de entrada
+ * @param {string} outdir - Diretório de saída
+ * @param {boolean} isProduction - Flag de produção
+ * @param {Object} plugins - Objeto contendo arrays de plugins
+ * @param {Array} plugins.prePlugins - Plugins para rodar ANTES do framework
+ * @param {Array} plugins.postPlugins - Plugins para rodar DEPOIS do framework
+ */
+async function createReactConfig(entryPoint, outdir, isProduction, { prePlugins = [], postPlugins = [] } = {}) {
+    const replaceValues = {
+        'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development'),
+        'process.env.PORT': JSON.stringify(process.vatts?.port || 3000)
+    };
+    const extensions = ['.mjs', '.js', '.json', '.node', '.jsx', '.tsx', '.ts'];
+    const esbuildLoaders = {
+        '.js': 'jsx',
+        '.ts': 'ts',
+        '.tsx': 'tsx'
+    };
+    return {
+        input: entryPoint,
+        treeshake: {
+            moduleSideEffects: 'no-external',
+            preset: isProduction ? 'recommended' : 'smallest'
+        },
+        cache: isProduction ? true : false,
+        perf: false,
+        maxParallelFileOps: 20,
+        plugins: [
+            replace({
+                preventAssignment: true,
+                values: replaceValues
+            }),
+            ...prePlugins,
+            nodeResolve({
+                extensions,
+                preferBuiltins: true,
+                browser: true,
+                dedupe: ['react', 'react-dom']
+            }),
+            commonjs({
+                sourceMap: !isProduction,
+                requireReturnsDefault: 'auto',
+                ignoreTryCatch: true
+            }),
+            ...postPlugins,
+            jsonPlugin(),
+            esbuild({
+                include: /\.[jt]sx?$/,
+                exclude: /node_modules/,
+                sourceMap: !isProduction,
+                minify: isProduction,
+                legalComments: 'none',
+                treeShaking: isProduction,
+                target: 'esnext',
+                jsx: 'automatic',
+                define: { __VERSION__: '"1.0.0"' },
+                loaders: esbuildLoaders
+            })
+        ],
+        onwarn(warning, warn) {
+            if (warning.code === 'MODULE_LEVEL_DIRECTIVE')
+                return;
+            if (warning.code === 'THIS_IS_UNDEFINED')
+                return;
+            if (warning.code === 'CIRCULAR_DEPENDENCY' && warning.message.includes('node_modules'))
+                return;
+            warn(warning);
+        }
+    };
+}
+module.exports = { createReactConfig };

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.
@@ -368,4 +368,3 @@ async function render({ req, res, route, params, allRoutes }) {
         throw err;
     }
 }
-// --- Componente de Tela de Building (Substituto do getBuildingHTML) ---

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

@@ -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 { onMounted, ref } from 'vue';
 

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';
 
@@ -87,18 +103,9 @@ 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.
+/* REMOVIDO :global(body).
+  Os estilos globais foram movidos para .container para não afetar o resto do site.
 */
-:global(body) {
-  margin: 0;
-  padding: 0;
-  background-color: #000000;
-  color: #ffffff;
-  overflow: hidden;
-  height: 100vh;
-  width: 100vw;
-}
 
 .container {
   position: fixed;
@@ -113,7 +120,12 @@ const reload = () => {
   justify-content: center;
   width: 100vw;
   height: 100vh;
+  /* Estilos que antes estavam no body: */
   background: #000000;
+  color: #ffffff;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
 }
 
 .card {

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 -->