vatts 1.2.0-alpha.1 → 1.2.0-test.0

package/dist/loaders.js

@@ -101,6 +101,8 @@ function registerLoaders(options = {}) {
             throw new Error('Para carregar arquivos .vue no servidor, você precisa instalar "vue" e "esbuild".');
         }
         const source = fs.readFileSync(filename, 'utf8');
+        // Variável para armazenar o código final para fins de debug
+        let finalEsm = '';
         try {
             // 1. Parse do SFC
             const { descriptor, errors } = sfcCompiler.parse(source, {
@@ -120,10 +122,16 @@ function registerLoaders(options = {}) {
                         isProd: false,
                         inlineTemplate: false
                     });
-                    // Truque: Substitui "export default" por uma variável local para podermos
-                    // anexar a função render antes de exportar tudo no final.
-                    // Isso é necessário pois estamos criando um arquivo único virtual.
-                    scriptContent = compiledScript.content.replace('export default', 'const _sfc_main =');
+                    // FIX: Uso de Regex para ser mais flexível com espaços
+                    // Ex: aceita "export default" e "export  default"
+                    if (compiledScript.content.match(/export\s+default/)) {
+                        scriptContent = compiledScript.content.replace(/export\s+default/, 'const _sfc_main =');
+                    }
+                    else {
+                        // Fallback: Se não achou export default, assume que o script apenas roda side-effects ou define variáveis,
+                        // mas precisamos garantir que _sfc_main exista.
+                        scriptContent = compiledScript.content + '\nconst _sfc_main = {};';
+                    }
                     bindings = compiledScript.bindings;
                 }
                 catch (e) {
@@ -132,7 +140,6 @@ function registerLoaders(options = {}) {
                 }
             }
             // 3. Compilação do Template para SSR
-            // Isso gera a função `ssrRender` necessária para o @vue/server-renderer
             let templateContent = '';
             if (descriptor.template) {
                 try {
@@ -140,11 +147,10 @@ function registerLoaders(options = {}) {
                         source: descriptor.template.content,
                         filename: filename,
                         id: filename,
-                        ssr: true, // IMPORTANTE: Gera código otimizado para servidor (string concatenation)
+                        ssr: true,
                         compilerOptions: {
-                            bindingMetadata: bindings // Otimiza bindings baseados no script setup
+                            bindingMetadata: bindings
                         },
-                        // CORREÇÃO: Passa as variáveis CSS detectadas no parse para o compilador de template
                         ssrCssVars: descriptor.cssVars || []
                     });
                     templateContent = templateResult.code;
@@ -154,27 +160,29 @@ function registerLoaders(options = {}) {
                 }
             }
             // 4. Montagem do Código Final (ESM Virtual)
-            // Combinamos o script compilado com o template compilado e unimos as partes.
-            const finalEsm = `
+            finalEsm = `
                 ${scriptContent}
                 ${templateContent}
                 
                 // Anexa a função de renderização SSR ao componente principal
+                // Usa verificação de tipo segura para evitar ReferenceError na checagem
                 if (typeof _sfc_main !== 'undefined') {
                     if (typeof ssrRender !== 'undefined') {
                         _sfc_main.ssrRender = ssrRender;
                     }
-                    // Fallback para renderização cliente/hidratação se necessário (opcional no server)
                     if (typeof render !== 'undefined') {
                         _sfc_main.render = render;
                     }
+                } else {
+                    // Safety net: Se _sfc_main não foi definido acima, define agora para não quebrar o export abaixo
+                    var _sfc_main = {}; 
                 }
                 
                 export default _sfc_main;
             `;
             // 5. Transformação final para CommonJS (Node.js) via Esbuild
             const result = esbuild.transformSync(finalEsm, {
-                loader: 'ts', // Suporta TS e JS
+                loader: 'ts',
                 format: 'cjs',
                 target: 'node16',
                 sourcefile: filename
@@ -183,7 +191,15 @@ function registerLoaders(options = {}) {
             module._compile(result.code, filename);
         }
         catch (err) {
-            console.error(`Falha fatal ao carregar .vue: ${filename}`);
+            console.error(`\n--- Vatts Loader Debug ---`);
+            console.error(`Falha fatal ao carregar: ${filename}`);
+            console.error(`Erro original: ${err.message}`);
+            // Mostra um snippet do código gerado para facilitar a correção
+            if (finalEsm) {
+                console.error(`\n[DEBUG] Código gerado (Snippet):`);
+                console.error(finalEsm.split('\n').slice(0, 30).join('\n') + '\n...');
+            }
+            console.error(`--------------------------\n`);
             throw err;
         }
     };

package/dist/react/BuildingPage.d.ts

@@ -1 +1,2 @@
-export default function BuildingScreen(): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export default function BuildingScreen(): React.JSX.Element;

package/dist/react/BuildingPage.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function BuildingScreen() {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BuildingScreen;
+const react_1 = __importDefault(require("react"));
+function BuildingScreen() {
     let version = "1.0.0";
     try {
         version = require("../package.json").version;
@@ -198,9 +204,46 @@ export default function BuildingScreen() {
             to { transform: rotate(360deg); }
         }
     `;
-    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: "Vatts.js | Building..." }), _jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), _jsx("link", { href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap", rel: "stylesheet" }), _jsx("style", { dangerouslySetInnerHTML: { __html: styles } })] }), _jsxs("body", { children: [_jsx("div", { className: "container", children: _jsxs("div", { className: "build-card", children: [_jsx("div", { className: "neon-line" }), _jsxs("div", { className: "content", children: [_jsxs("div", { className: "logo-wrapper", children: [_jsx("div", { className: "logo-glow" }), _jsx("img", { src: "https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png", alt: "Vatts Logo" })] }), _jsxs("h1", { children: ["Vatts", _jsx("span", { children: ".js" })] }), _jsx("p", { children: "Building your masterpiece..." }), _jsxs("div", { className: "terminal-box", children: [_jsxs("div", { className: "term-line", children: [_jsx("div", { className: "term-spinner" }), _jsxs("span", { className: "file-name", children: ["Compiling ", _jsx("span", { className: "accent", children: "src/vatts.ts" }), "..."] })] }), _jsxs("div", { className: "term-line", style: { opacity: 0.5 }, children: [_jsx("span", { children: "\u2713" }), _jsx("span", { className: "file-name", children: "Optimizing assets" })] })] })] }), _jsxs("div", { className: "card-footer", children: [_jsx("span", { children: "Building..." }), _jsxs("div", { className: "status-active", children: [_jsx("div", { className: "dot" }), "v", version] })] })] }) }), _jsx("script", { dangerouslySetInnerHTML: { __html: `
+    return (react_1.default.createElement("html", { lang: "en" },
+        react_1.default.createElement("head", null,
+            react_1.default.createElement("meta", { charSet: "UTF-8" }),
+            react_1.default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }),
+            react_1.default.createElement("title", null, "Vatts.js | Building..."),
+            react_1.default.createElement("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }),
+            react_1.default.createElement("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }),
+            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" }),
+            react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: styles } })),
+        react_1.default.createElement("body", null,
+            react_1.default.createElement("div", { className: "container" },
+                react_1.default.createElement("div", { className: "build-card" },
+                    react_1.default.createElement("div", { className: "neon-line" }),
+                    react_1.default.createElement("div", { className: "content" },
+                        react_1.default.createElement("div", { className: "logo-wrapper" },
+                            react_1.default.createElement("div", { className: "logo-glow" }),
+                            react_1.default.createElement("img", { src: "https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png", alt: "Vatts Logo" })),
+                        react_1.default.createElement("h1", null,
+                            "Vatts",
+                            react_1.default.createElement("span", null, ".js")),
+                        react_1.default.createElement("p", null, "Building your application..."),
+                        react_1.default.createElement("div", { className: "terminal-box" },
+                            react_1.default.createElement("div", { className: "term-line" },
+                                react_1.default.createElement("div", { className: "term-spinner" }),
+                                react_1.default.createElement("span", { className: "file-name" },
+                                    "Compiling ",
+                                    react_1.default.createElement("span", { className: "accent" }, "src/vatts.ts"),
+                                    "...")),
+                            react_1.default.createElement("div", { className: "term-line", style: { opacity: 0.5 } },
+                                react_1.default.createElement("span", null, "\u2713"),
+                                react_1.default.createElement("span", { className: "file-name" }, "Optimizing assets")))),
+                    react_1.default.createElement("div", { className: "card-footer" },
+                        react_1.default.createElement("span", null, "Building..."),
+                        react_1.default.createElement("div", { className: "status-active" },
+                            react_1.default.createElement("div", { className: "dot" }),
+                            "v",
+                            version)))),
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: { __html: `
                 setTimeout(() => {
                     window.location.reload();
                 }, 2500);
-            ` } })] })] }));
+            ` } }))));
 }

package/dist/react/DefaultNotFound.d.ts

@@ -1 +1,2 @@
-export default function ErrorPage(): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export default function ErrorPage(): React.JSX.Element;

package/dist/react/DefaultNotFound.js

@@ -1,4 +1,39 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ErrorPage;
 /*
  * This file is part of the Vatts.js Project.
  * Copyright (c) 2026 itsmuzin
@@ -15,12 +50,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useState, useEffect } from 'react';
-export default function ErrorPage() {
-    const [path, setPath] = useState('/');
-    const [hoverHome, setHoverHome] = useState(false);
-    const [hoverRetry, setHoverRetry] = useState(false);
-    useEffect(() => {
+const react_1 = __importStar(require("react"));
+function ErrorPage() {
+    const [path, setPath] = (0, react_1.useState)('/');
+    const [hoverHome, setHoverHome] = (0, react_1.useState)(false);
+    const [hoverRetry, setHoverRetry] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         if (typeof window !== 'undefined') {
             setPath(window.location.pathname);
         }
@@ -154,14 +189,54 @@ export default function ErrorPage() {
         textDecoration: 'none',
         color: '#fff',
     };
-    return (_jsxs("div", { children: [_jsx("style", { dangerouslySetInnerHTML: { __html: globalStyles } }), _jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: cardStyle, children: [_jsx("div", { style: neonLine }), _jsxs("div", { style: contentStyle, children: [_jsx("div", { style: codeStyle, children: "404" }), _jsxs("div", { style: terminalBoxStyle, children: [_jsxs("div", { style: { display: 'flex', gap: 6, marginBottom: 8, opacity: 0.3 }, children: [_jsx("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } }), _jsx("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } }), _jsx("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } })] }), _jsxs("div", { children: [_jsx("span", { style: { color: '#64748b' }, children: "GET" }), ' ', _jsx("span", { style: { color: '#fff' }, children: path })] }), _jsx("div", { style: { marginTop: 4, color: '#475569' }, children: _jsx("span", { children: "Error: Route not found" }) })] }), _jsxs("div", { style: { display: 'flex', gap: 12, width: '100%' }, children: [_jsxs("a", { href: "/", onMouseEnter: () => setHoverHome(true), onMouseLeave: () => setHoverHome(false), style: { ...getBtnStyle('primary', hoverHome), flex: 1, justifyContent: 'center' }, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] }), "Back Home"] }), _jsxs("button", { onClick: () => window.location.reload(), onMouseEnter: () => setHoverRetry(true), onMouseLeave: () => setHoverRetry(false), style: { ...getBtnStyle('secondary', hoverRetry), flex: 1, justifyContent: 'center' }, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 2v6h-6" }), _jsx("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), _jsx("path", { d: "M3 22v-6h6" }), _jsx("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" })] }), "Retry"] })] })] }), _jsxs("div", { style: {
-                                    padding: '12px 32px',
-                                    background: 'rgba(255,255,255,0.02)',
-                                    borderTop: '1px solid rgba(255,255,255,0.05)',
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    alignItems: 'center',
-                                    fontSize: 11,
-                                    color: 'rgba(255,255,255,0.3)'
-                                }, children: [_jsx("span", { children: "Vatts Server" }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx("div", { style: { width: 6, height: 6, borderRadius: '50%', background: '#475569' } }), _jsx("span", { style: { color: '#94a3b8' }, children: "Not Found" })] })] })] }), _jsxs("a", { href: "https://npmjs.com/package/vatts", target: "_blank", rel: "noopener noreferrer", style: brandStyle, onMouseEnter: (e) => e.currentTarget.style.opacity = '1', onMouseLeave: (e) => e.currentTarget.style.opacity = '0.4', children: [_jsx("img", { src: "https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png", alt: "Vatts Logo", style: { width: 20, height: 20, filter: 'grayscale(1) brightness(2)' } }), _jsxs("span", { style: { fontSize: 13, fontWeight: 600, color: '#fff' }, children: ["Vatts", _jsx("span", { style: { color: "#64748b" }, children: ".js" })] })] })] })] }));
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: globalStyles } }),
+        react_1.default.createElement("div", { style: containerStyle },
+            react_1.default.createElement("div", { style: cardStyle },
+                react_1.default.createElement("div", { style: neonLine }),
+                react_1.default.createElement("div", { style: contentStyle },
+                    react_1.default.createElement("div", { style: codeStyle }, "404"),
+                    react_1.default.createElement("div", { style: terminalBoxStyle },
+                        react_1.default.createElement("div", { style: { display: 'flex', gap: 6, marginBottom: 8, opacity: 0.3 } },
+                            react_1.default.createElement("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } }),
+                            react_1.default.createElement("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } }),
+                            react_1.default.createElement("div", { style: { width: 8, height: 8, borderRadius: '50%', background: '#fff' } })),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("span", { style: { color: '#64748b' } }, "GET"),
+                            ' ',
+                            react_1.default.createElement("span", { style: { color: '#fff' } }, path)),
+                        react_1.default.createElement("div", { style: { marginTop: 4, color: '#475569' } },
+                            react_1.default.createElement("span", null, "Error: Route not found"))),
+                    react_1.default.createElement("div", { style: { display: 'flex', gap: 12, width: '100%' } },
+                        react_1.default.createElement("a", { href: "/", onMouseEnter: () => setHoverHome(true), onMouseLeave: () => setHoverHome(false), style: { ...getBtnStyle('primary', hoverHome), flex: 1, justifyContent: 'center' } },
+                            react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+                                react_1.default.createElement("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+                                react_1.default.createElement("polyline", { points: "9 22 9 12 15 12 15 22" })),
+                            "Back Home"),
+                        react_1.default.createElement("button", { onClick: () => window.location.reload(), onMouseEnter: () => setHoverRetry(true), onMouseLeave: () => setHoverRetry(false), style: { ...getBtnStyle('secondary', hoverRetry), flex: 1, justifyContent: 'center' } },
+                            react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+                                react_1.default.createElement("path", { d: "M21 2v6h-6" }),
+                                react_1.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }),
+                                react_1.default.createElement("path", { d: "M3 22v-6h6" }),
+                                react_1.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" })),
+                            "Retry"))),
+                react_1.default.createElement("div", { style: {
+                        padding: '12px 32px',
+                        background: 'rgba(255,255,255,0.02)',
+                        borderTop: '1px solid rgba(255,255,255,0.05)',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        fontSize: 11,
+                        color: 'rgba(255,255,255,0.3)'
+                    } },
+                    react_1.default.createElement("span", null, "Vatts Server"),
+                    react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
+                        react_1.default.createElement("div", { style: { width: 6, height: 6, borderRadius: '50%', background: '#475569' } }),
+                        react_1.default.createElement("span", { style: { color: '#94a3b8' } }, "Not Found")))),
+            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' },
+                react_1.default.createElement("img", { src: "https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png", alt: "Vatts Logo", style: { width: 20, height: 20, filter: 'grayscale(1) brightness(2)' } }),
+                react_1.default.createElement("span", { style: { fontSize: 13, fontWeight: 600, color: '#fff' } },
+                    "Vatts",
+                    react_1.default.createElement("span", { style: { color: "#64748b" } }, ".js"))))));
 }

package/dist/react/DevIndicator.js

@@ -1,11 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
-export default function DevIndicator({ hasBuildError = false, onClickBuildError, }) {
-    const [isVisible, setIsVisible] = useState(true);
-    const [hotState, setHotState] = useState('idle');
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DevIndicator;
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+function DevIndicator({ hasBuildError = false, onClickBuildError, }) {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
+    const [hotState, setHotState] = (0, react_1.useState)('idle');
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         setMounted(true);
         const handler = (ev) => {
             const detail = ev?.detail;
@@ -26,7 +61,8 @@ export default function DevIndicator({ hasBuildError = false, onClickBuildError,
     const isReloading = hotState === 'reloading';
     const isError = !!hasBuildError;
     // Criamos o elemento via Portal para injetar no final do <body>
-    return createPortal(_jsxs(_Fragment, { children: [_jsx("style", { children: `
+    return (0, react_dom_1.createPortal)(react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("style", null, `
                 @keyframes vatts-pulse {
                   0% { opacity: 0.4; }
                   50% { opacity: 1; }
@@ -127,18 +163,25 @@ export default function DevIndicator({ hasBuildError = false, onClickBuildError,
                   font-size: 9px;
                   font-weight: 900;
                 }
-                ` }), _jsxs("div", { className: `vatts-dev-badge${isError ? ' clickable' : ''}`, onClick: () => isError && onClickBuildError?.(), children: [isReloading ? (_jsx("div", { className: "vatts-spinner" })) : (_jsx("div", { className: `vatts-status-dot${isReloading ? ' reloading' : ''}${isError ? ' error' : ''}` })), _jsxs("div", { className: "vatts-logo", children: ["VATTS", _jsx("span", { children: ".JS" }), isError && _jsx("span", { className: "vatts-error-pill", children: "ERROR" })] }), _jsx("button", { onClick: (e) => {
-                            e.stopPropagation();
-                            setIsVisible(false);
-                        }, style: {
-                            background: 'none',
-                            border: 'none',
-                            color: 'rgba(255,255,255,0.2)',
-                            cursor: 'pointer',
-                            fontSize: '16px',
-                            padding: '0 0 0 4px',
-                            marginLeft: '4px',
-                            display: 'flex',
-                            alignItems: 'center'
-                        }, children: "\u00D7" })] })] }), document.body);
+                `),
+        react_1.default.createElement("div", { className: `vatts-dev-badge${isError ? ' clickable' : ''}`, onClick: () => isError && onClickBuildError?.() },
+            isReloading ? (react_1.default.createElement("div", { className: "vatts-spinner" })) : (react_1.default.createElement("div", { className: `vatts-status-dot${isReloading ? ' reloading' : ''}${isError ? ' error' : ''}` })),
+            react_1.default.createElement("div", { className: "vatts-logo" },
+                "VATTS",
+                react_1.default.createElement("span", null, ".JS"),
+                isError && react_1.default.createElement("span", { className: "vatts-error-pill" }, "ERROR")),
+            react_1.default.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    setIsVisible(false);
+                }, style: {
+                    background: 'none',
+                    border: 'none',
+                    color: 'rgba(255,255,255,0.2)',
+                    cursor: 'pointer',
+                    fontSize: '16px',
+                    padding: '0 0 0 4px',
+                    marginLeft: '4px',
+                    display: 'flex',
+                    alignItems: 'center'
+                } }, "\u00D7"))), document.body);
 }

package/dist/react/ErrorModal.js

@@ -1,4 +1,39 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorModal = ErrorModal;
 /*
  * This file is part of the Vatts.js Project.
  * Copyright (c) 2026 itsmuzin
@@ -15,8 +50,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useEffect, useState, useMemo } from 'react';
-import { createPortal } from 'react-dom';
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
 // --- ANSI PARSER LOGIC (Monochrome Adjusted) ---
 const ANSI_COLORS = {
     '30': '#475569',
@@ -30,7 +65,7 @@ const ANSI_COLORS = {
     '90': '#64748b',
 };
 function AnsiText({ text }) {
-    const parts = useMemo(() => {
+    const parts = (0, react_1.useMemo)(() => {
         const regex = /\u001b\[(\d+)(?:;\d+)*m/g;
         const result = [];
         let lastIndex = 0;
@@ -56,23 +91,23 @@ function AnsiText({ text }) {
         }
         return result;
     }, [text]);
-    return (_jsx("span", { children: parts.map((part, i) => (_jsx("span", { style: { color: part.color || 'inherit' }, children: part.text }, i))) }));
+    return (react_1.default.createElement("span", null, parts.map((part, i) => (react_1.default.createElement("span", { key: i, style: { color: part.color || 'inherit' } }, part.text)))));
 }
 // --- MAIN MODAL ---
-export function ErrorModal({ error, isOpen, onClose, onCopy, }) {
-    const [visible, setVisible] = useState(false);
-    const [isHoveringClose, setIsHoveringClose] = useState(false);
-    const [isHoveringCopy, setIsHoveringCopy] = useState(false);
-    const [mounted, setMounted] = useState(false);
+function ErrorModal({ error, isOpen, onClose, onCopy, }) {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [isHoveringClose, setIsHoveringClose] = (0, react_1.useState)(false);
+    const [isHoveringCopy, setIsHoveringCopy] = (0, react_1.useState)(false);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
     // Paleta Next.js
     const primaryColor = '#ffffff';
     const primaryRgb = '255, 255, 255';
     const borderColor = 'rgba(255, 255, 255, 0.1)';
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         setMounted(true);
         return () => setMounted(false);
     }, []);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (isOpen) {
             document.body.style.overflow = 'hidden';
             setTimeout(() => setVisible(true), 10);
@@ -83,7 +118,7 @@ export function ErrorModal({ error, isOpen, onClose, onCopy, }) {
         }
         return () => { document.body.style.overflow = ''; };
     }, [isOpen]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!isOpen)
             return;
         const onKey = (e) => {
@@ -185,31 +220,47 @@ export function ErrorModal({ error, isOpen, onClose, onCopy, }) {
             borderColor: hovering ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
         };
     };
-    const modalContent = (_jsx("div", { style: overlayStyle, onMouseDown: onClose, children: _jsxs("div", { style: cardStyle, onMouseDown: (e) => e.stopPropagation(), children: [_jsx("div", { style: neonLine }), _jsxs("div", { style: headerStyle, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [_jsx("span", { style: {
-                                        fontSize: 11,
-                                        fontWeight: 900,
-                                        color: '#ffffff',
-                                        background: '#ef4444',
-                                        padding: '2px 8px',
-                                        borderRadius: 4,
-                                        letterSpacing: '0.05em'
-                                    }, children: "ERROR" }), error.plugin && (_jsx("span", { style: {
-                                        fontSize: 11,
-                                        color: '#64748b',
-                                        background: 'rgba(255, 255, 255, 0.03)',
-                                        padding: '2px 8px',
-                                        borderRadius: 4,
-                                        fontFamily: 'monospace',
-                                        border: '1px solid rgba(255, 255, 255, 0.05)'
-                                    }, children: error.plugin }))] }), _jsxs("div", { style: { display: 'flex', gap: 8 }, children: [onCopy && (_jsx("button", { onClick: onCopy, onMouseEnter: () => setIsHoveringCopy(true), onMouseLeave: () => setIsHoveringCopy(false), style: getBtnStyle('secondary', isHoveringCopy), children: "Copy Log" })), _jsx("button", { onClick: onClose, onMouseEnter: () => setIsHoveringClose(true), onMouseLeave: () => setIsHoveringClose(false), style: getBtnStyle('primary', isHoveringClose), children: "Close" })] })] }), _jsxs("div", { style: terminalContent, children: [_jsx(AnsiText, { text: rawOutput }), stackOutput && (_jsx("div", { style: { marginTop: 24, opacity: 0.4, borderTop: '1px dashed rgba(255,255,255,0.1)', paddingTop: 16 }, children: _jsx(AnsiText, { text: stackOutput }) }))] }), _jsxs("div", { style: {
-                        padding: '10px 24px',
-                        background: 'rgba(255,255,255,0.01)',
-                        borderTop: '1px solid rgba(255,255,255,0.03)',
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        fontSize: 11,
-                        color: 'rgba(255,255,255,0.3)',
-                        fontFamily: 'Inter, sans-serif'
-                    }, children: [_jsx("span", { children: "vatts-cli" }), _jsx("span", { style: { color: '#64748b', fontWeight: 500 }, children: "Watching for changes..." })] })] }) }));
-    return createPortal(modalContent, document.body);
+    const modalContent = (react_1.default.createElement("div", { style: overlayStyle, onMouseDown: onClose },
+        react_1.default.createElement("div", { style: cardStyle, onMouseDown: (e) => e.stopPropagation() },
+            react_1.default.createElement("div", { style: neonLine }),
+            react_1.default.createElement("div", { style: headerStyle },
+                react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 12 } },
+                    react_1.default.createElement("span", { style: {
+                            fontSize: 11,
+                            fontWeight: 900,
+                            color: '#ffffff',
+                            background: '#ef4444',
+                            padding: '2px 8px',
+                            borderRadius: 4,
+                            letterSpacing: '0.05em'
+                        } }, "ERROR"),
+                    error.plugin && (react_1.default.createElement("span", { style: {
+                            fontSize: 11,
+                            color: '#64748b',
+                            background: 'rgba(255, 255, 255, 0.03)',
+                            padding: '2px 8px',
+                            borderRadius: 4,
+                            fontFamily: 'monospace',
+                            border: '1px solid rgba(255, 255, 255, 0.05)'
+                        } }, error.plugin))),
+                react_1.default.createElement("div", { style: { display: 'flex', gap: 8 } },
+                    onCopy && (react_1.default.createElement("button", { onClick: onCopy, onMouseEnter: () => setIsHoveringCopy(true), onMouseLeave: () => setIsHoveringCopy(false), style: getBtnStyle('secondary', isHoveringCopy) }, "Copy Log")),
+                    react_1.default.createElement("button", { onClick: onClose, onMouseEnter: () => setIsHoveringClose(true), onMouseLeave: () => setIsHoveringClose(false), style: getBtnStyle('primary', isHoveringClose) }, "Close"))),
+            react_1.default.createElement("div", { style: terminalContent },
+                react_1.default.createElement(AnsiText, { text: rawOutput }),
+                stackOutput && (react_1.default.createElement("div", { style: { marginTop: 24, opacity: 0.4, borderTop: '1px dashed rgba(255,255,255,0.1)', paddingTop: 16 } },
+                    react_1.default.createElement(AnsiText, { text: stackOutput })))),
+            react_1.default.createElement("div", { style: {
+                    padding: '10px 24px',
+                    background: 'rgba(255,255,255,0.01)',
+                    borderTop: '1px solid rgba(255,255,255,0.03)',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    fontSize: 11,
+                    color: 'rgba(255,255,255,0.3)',
+                    fontFamily: 'Inter, sans-serif'
+                } },
+                react_1.default.createElement("span", null, "vatts-cli"),
+                react_1.default.createElement("span", { style: { color: '#64748b', fontWeight: 500 } }, "Watching for changes...")))));
+    return (0, react_dom_1.createPortal)(modalContent, document.body);
 }

package/dist/react/Link.d.ts

@@ -1,7 +1,7 @@
-import { type AnchorHTMLAttributes, type ReactNode } from 'react';
+import React, { type AnchorHTMLAttributes, type ReactNode } from 'react';
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
     children: ReactNode;
 }
-export declare function Link({ href, children, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ href, children, ...props }: LinkProps): React.JSX.Element;
 export {};