nyte 1.0.1 → 1.1.0

package/dist/client/entry.client.d.ts

@@ -1 +1 @@
-export {};
+export declare function DevIndicator(): import("react/jsx-runtime").JSX.Element | null;

package/dist/client/entry.client.js

@@ -33,6 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevIndicator = DevIndicator;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /*
  * This file is part of the Nyte.js Project.
@@ -214,184 +215,72 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
     // Adiciona o indicador de dev se não for produção
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, process.env.NODE_ENV !== 'production' && (0, jsx_runtime_1.jsx)(DevIndicator, {})] }));
 }
-// --- Constantes de Configuração ---
-const DEV_INDICATOR_SIZE = 48;
-const DEV_INDICATOR_CORNERS = [
-    { top: 16, left: 16 }, // 0: topo-esquerda
-    { top: 16, right: 16 }, // 1: topo-direita
-    { bottom: 16, left: 16 }, // 2: baixo-esquerda
-    { bottom: 16, right: 16 }, // 3: baixo-direita
-];
 function DevIndicator() {
-    const [corner, setCorner] = (0, react_1.useState)(3); // Canto atual (0-3)
-    const [isDragging, setIsDragging] = (0, react_1.useState)(false); // Estado de arrastar
-    const [isBuilding, setIsBuilding] = (0, react_1.useState)(false); // Estado de build
-    // Posição visual do indicador durante o arraste
-    const [position, setPosition] = (0, react_1.useState)({ top: 0, left: 0 });
-    const indicatorRef = (0, react_1.useRef)(null);
-    const dragStartRef = (0, react_1.useRef)(null);
-    // Escuta eventos de hot reload para mostrar estado de build
-    (0, react_1.useEffect)(() => {
-        if (typeof window === 'undefined')
-            return;
-        const handleHotReloadMessage = (event) => {
-            try {
-                const message = JSON.parse(event.data);
-                // Quando detecta mudança em arquivo, ativa loading
-                if (message.type === 'frontend-reload' ||
-                    message.type === 'backend-api-reload' ||
-                    message.type === 'src-reload') {
-                    setIsBuilding(true);
-                }
-                // Quando o build termina ou servidor fica pronto, desativa loading
-                if (message.type === 'server-ready' || message.type === 'build-complete') {
-                    setIsBuilding(false);
-                }
-            }
-            catch (e) {
-                // Ignora mensagens que não são JSON
-            }
-        };
-        // Intercepta mensagens WebSocket
-        const originalWebSocket = window.WebSocket;
-        window.WebSocket = class extends originalWebSocket {
-            constructor(url, protocols) {
-                super(url, protocols);
-                this.addEventListener('message', (event) => {
-                    if (url.toString().includes('hweb-hotreload')) {
-                        handleHotReloadMessage(event);
-                    }
-                });
-            }
-        };
-        return () => {
-            window.WebSocket = originalWebSocket;
-        };
-    }, []);
-    // --- Estilos Dinâmicos ---
-    const getIndicatorStyle = () => {
-        const baseStyle = {
-            position: 'fixed',
-            zIndex: 9999,
-            width: DEV_INDICATOR_SIZE,
-            height: DEV_INDICATOR_SIZE,
-            borderRadius: '50%',
-            background: isBuilding
-                ? 'linear-gradient(135deg, #f093fb, #f5576c)' // Gradiente Rosa/Vermelho quando building
-                : 'linear-gradient(135deg, #8e2de2, #4a00e0)', // Gradiente Roxo normal
-            color: 'white',
-            fontWeight: 'bold',
-            fontSize: 28,
-            boxShadow: isBuilding
-                ? '0 4px 25px rgba(245, 87, 108, 0.6)' // Shadow mais forte quando building
-                : '0 4px 15px rgba(0,0,0,0.2)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: isDragging ? 'grabbing' : 'grab',
-            userSelect: 'none',
-            transition: isDragging ? 'none' : 'all 0.3s ease-out',
-            animation: isBuilding ? 'hweb-pulse 1.5s ease-in-out infinite' : 'none',
-        };
-        if (isDragging) {
-            return {
-                ...baseStyle,
-                top: position.top,
-                left: position.left,
-            };
-        }
-        return { ...baseStyle, ...DEV_INDICATOR_CORNERS[corner] };
-    };
-    const getMenuPositionStyle = () => {
-        // Posiciona o menu dependendo do canto
-        switch (corner) {
-            case 0: return { top: '110%', left: '0' }; // Top-Left
-            case 1: return { top: '110%', right: '0' }; // Top-Right
-            case 2: return { bottom: '110%', left: '0' }; // Bottom-Left
-            case 3: return { bottom: '110%', right: '0' }; // Bottom-Right
-            default: return {};
-        }
-    };
-    // --- Lógica de Eventos ---
-    const handleMouseDown = (e) => {
-        e.preventDefault();
-        dragStartRef.current = { x: e.clientX, y: e.clientY, moved: false };
-        if (indicatorRef.current) {
-            const rect = indicatorRef.current.getBoundingClientRect();
-            setPosition({ top: rect.top, left: rect.left });
-        }
-        setIsDragging(true);
-    };
-    const handleMouseMove = (0, react_1.useCallback)((e) => {
-        if (!isDragging || !dragStartRef.current)
-            return;
-        const deltaX = e.clientX - dragStartRef.current.x;
-        const deltaY = e.clientY - dragStartRef.current.y;
-        // Diferencia clique de arrastar (threshold de 5px)
-        if (!dragStartRef.current.moved && Math.hypot(deltaX, deltaY) > 5) {
-            dragStartRef.current.moved = true;
-        }
-        if (dragStartRef.current.moved) {
-            setPosition(prevPos => ({
-                top: prevPos.top + deltaY,
-                left: prevPos.left + deltaX,
-            }));
-            // Atualiza a referência para o próximo movimento
-            dragStartRef.current.x = e.clientX;
-            dragStartRef.current.y = e.clientY;
-        }
-    }, [isDragging]);
-    const handleMouseUp = (0, react_1.useCallback)((e) => {
-        if (!isDragging)
-            return;
-        setIsDragging(false);
-        // Se moveu, calcula o canto mais próximo
-        if (dragStartRef.current?.moved) {
-            const { clientX, clientY } = e;
-            const w = window.innerWidth;
-            const h = window.innerHeight;
-            const dists = [
-                Math.hypot(clientX, clientY), // TL
-                Math.hypot(w - clientX, clientY), // TR
-                Math.hypot(clientX, h - clientY), // BL
-                Math.hypot(w - clientX, h - clientY), // BR
-            ];
-            setCorner(dists.indexOf(Math.min(...dists)));
-        }
-        dragStartRef.current = null;
-    }, [isDragging]);
-    // Adiciona e remove listeners globais
-    (0, react_1.useEffect)(() => {
-        if (isDragging) {
-            window.addEventListener('mousemove', handleMouseMove);
-            window.addEventListener('mouseup', handleMouseUp);
-        }
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [isDragging, handleMouseMove, handleMouseUp]);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
+    if (!isVisible)
+        return null;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
-                    @keyframes hweb-pulse {
-                        0%, 100% {
-                            transform: scale(1);
-                            opacity: 1;
-                        }
-                        50% {
-                            transform: scale(1.1);
-                            opacity: 0.8;
-                        }
-                    }
-                    
-                    @keyframes hweb-spin {
-                        from {
-                            transform: rotate(0deg);
-                        }
-                        to {
-                            transform: rotate(360deg);
-                        }
-                    }
-                ` }), (0, jsx_runtime_1.jsx)("div", { ref: indicatorRef, style: getIndicatorStyle(), onMouseDown: handleMouseDown, title: isBuilding ? "Building..." : "Modo Dev Nyte.js", children: isBuilding ? ((0, jsx_runtime_1.jsx)("span", { style: { animation: 'hweb-spin 1s linear infinite' }, children: "\u27F3" })) : ('H') })] }));
+          @keyframes nyte-pulse {
+            0% { opacity: 0.4; }
+            50% { opacity: 1; }
+            100% { opacity: 0.4; }
+          }
+          .nyte-dev-badge {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 999999;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 8px 14px;
+            background: rgba(15, 15, 20, 0.8);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+  
+            border-radius: 10px;
+            color: #fff;
+            font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
+            font-size: 12px;
+            font-weight: 600;
+            letter-spacing: 0.05em;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+            transition: all 0.2s ease;
+            cursor: default;
+            user-select: none;
+          }
+          .nyte-dev-badge:hover {
+            border-color: rgba(142, 45, 226, 0.5);
+            transform: translateY(-2px);
+          }
+          .nyte-status-dot {
+            width: 8px;
+            height: 8px;
+            background: #10b981; /* Verde esmeralda */
+            border-radius: 50%;
+            box-shadow: 0 0 10px #10b981;
+            animation: nyte-pulse 2s infinite ease-in-out;
+          }
+          .nyte-label {
+            color: rgba(255, 255, 255, 0.5);
+            text-transform: uppercase;
+            font-size: 10px;
+          }
+          .nyte-logo {
+            background: linear-gradient(135deg, #00a3a3, #808080);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-weight: 800;
+          }
+        ` }), (0, jsx_runtime_1.jsxs)("div", { className: "nyte-dev-badge", children: [(0, jsx_runtime_1.jsx)("div", { className: "nyte-status-dot" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("span", { className: "nyte-logo", children: "NYTE.JS" }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setIsVisible(false), style: {
+                            background: 'none',
+                            border: 'none',
+                            color: 'rgba(255,255,255,0.3)',
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                            padding: '0 0 0 4px',
+                            marginLeft: '4px'
+                        }, title: "Fechar", children: "\u00D7" })] })] }));
 }
 // --- Inicialização do Cliente (CSR - Client-Side Rendering) ---
 function deobfuscateData(obfuscated) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nyte",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Nyte.js is a high-level framework for building web applications with ease and speed. It provides a robust set of tools and features to streamline development and enhance productivity.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/client/entry.client.tsx

@@ -223,221 +223,92 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
 
 
 
-// --- Constantes de Configuração ---
-const DEV_INDICATOR_SIZE = 48;
-const DEV_INDICATOR_CORNERS = [
-    { top: 16, left: 16 },    // 0: topo-esquerda
-    { top: 16, right: 16 },   // 1: topo-direita
-    { bottom: 16, left: 16 }, // 2: baixo-esquerda
-    { bottom: 16, right: 16 },// 3: baixo-direita
-];
-
-function DevIndicator() {
-    const [corner, setCorner] = useState(3); // Canto atual (0-3)
-    const [isDragging, setIsDragging] = useState(false); // Estado de arrastar
-    const [isBuilding, setIsBuilding] = useState(false); // Estado de build
-
-    // Posição visual do indicador durante o arraste
-    const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
-
-    const indicatorRef = useRef<HTMLDivElement>(null);
-    const dragStartRef = useRef<{ x: number; y: number; moved: boolean } | null>(null);
-
-    // Escuta eventos de hot reload para mostrar estado de build
-    useEffect(() => {
-        if (typeof window === 'undefined') return;
-
-        const handleHotReloadMessage = (event: MessageEvent) => {
-            try {
-                const message = JSON.parse(event.data);
-
-                // Quando detecta mudança em arquivo, ativa loading
-                if (message.type === 'frontend-reload' ||
-                    message.type === 'backend-api-reload' ||
-                    message.type === 'src-reload') {
-                    setIsBuilding(true);
-                }
-
-                // Quando o build termina ou servidor fica pronto, desativa loading
-                if (message.type === 'server-ready' || message.type === 'build-complete') {
-                    setIsBuilding(false);
-                }
-            } catch (e) {
-                // Ignora mensagens que não são JSON
-            }
-        };
-
-        // Intercepta mensagens WebSocket
-        const originalWebSocket = window.WebSocket;
-        window.WebSocket = class extends originalWebSocket {
-            constructor(url: string | URL, protocols?: string | string[]) {
-                super(url, protocols);
-
-                this.addEventListener('message', (event) => {
-                    if (url.toString().includes('hweb-hotreload')) {
-                        handleHotReloadMessage(event);
-                    }
-                });
-            }
-        } as any;
-
-        return () => {
-            window.WebSocket = originalWebSocket;
-        };
-    }, []);
-
-    // --- Estilos Dinâmicos ---
-    const getIndicatorStyle = (): React.CSSProperties => {
-        const baseStyle: React.CSSProperties = {
-            position: 'fixed',
-            zIndex: 9999,
-            width: DEV_INDICATOR_SIZE,
-            height: DEV_INDICATOR_SIZE,
-            borderRadius: '50%',
-            background: isBuilding
-                ? 'linear-gradient(135deg, #f093fb, #f5576c)' // Gradiente Rosa/Vermelho quando building
-                : 'linear-gradient(135deg, #8e2de2, #4a00e0)', // Gradiente Roxo normal
-            color: 'white',
-            fontWeight: 'bold',
-            fontSize: 28,
-            boxShadow: isBuilding
-                ? '0 4px 25px rgba(245, 87, 108, 0.6)' // Shadow mais forte quando building
-                : '0 4px 15px rgba(0,0,0,0.2)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: isDragging ? 'grabbing' : 'grab',
-            userSelect: 'none',
-            transition: isDragging ? 'none' : 'all 0.3s ease-out',
-            animation: isBuilding ? 'hweb-pulse 1.5s ease-in-out infinite' : 'none',
-        };
 
-        if (isDragging) {
-            return {
-                ...baseStyle,
-                top: position.top,
-                left: position.left,
-            };
-        }
-
-        return { ...baseStyle, ...DEV_INDICATOR_CORNERS[corner] };
-    };
-
-    const getMenuPositionStyle = (): React.CSSProperties => {
-        // Posiciona o menu dependendo do canto
-        switch (corner) {
-            case 0: return { top: '110%', left: '0' }; // Top-Left
-            case 1: return { top: '110%', right: '0' }; // Top-Right
-            case 2: return { bottom: '110%', left: '0' }; // Bottom-Left
-            case 3: return { bottom: '110%', right: '0' }; // Bottom-Right
-            default: return {};
-        }
-    };
-
-    // --- Lógica de Eventos ---
-    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        dragStartRef.current = { x: e.clientX, y: e.clientY, moved: false };
-        if (indicatorRef.current) {
-            const rect = indicatorRef.current.getBoundingClientRect();
-            setPosition({ top: rect.top, left: rect.left });
-        }
-        setIsDragging(true);
-    };
-
-    const handleMouseMove = useCallback((e: MouseEvent) => {
-        if (!isDragging || !dragStartRef.current) return;
 
-        const deltaX = e.clientX - dragStartRef.current.x;
-        const deltaY = e.clientY - dragStartRef.current.y;
-
-        // Diferencia clique de arrastar (threshold de 5px)
-        if (!dragStartRef.current.moved && Math.hypot(deltaX, deltaY) > 5) {
-            dragStartRef.current.moved = true;
-        }
-
-        if (dragStartRef.current.moved) {
-            setPosition(prevPos => ({
-                top: prevPos.top + deltaY,
-                left: prevPos.left + deltaX,
-            }));
-            // Atualiza a referência para o próximo movimento
-            dragStartRef.current.x = e.clientX;
-            dragStartRef.current.y = e.clientY;
-        }
-    }, [isDragging]);
-
-    const handleMouseUp = useCallback((e: MouseEvent) => {
-        if (!isDragging) return;
-        setIsDragging(false);
-
-        // Se moveu, calcula o canto mais próximo
-        if (dragStartRef.current?.moved) {
-            const { clientX, clientY } = e;
-            const w = window.innerWidth;
-            const h = window.innerHeight;
-
-            const dists = [
-                Math.hypot(clientX, clientY), // TL
-                Math.hypot(w - clientX, clientY), // TR
-                Math.hypot(clientX, h - clientY), // BL
-                Math.hypot(w - clientX, h - clientY), // BR
-            ];
-            setCorner(dists.indexOf(Math.min(...dists)));
-        }
-
-        dragStartRef.current = null;
-    }, [isDragging]);
-
-    // Adiciona e remove listeners globais
-    useEffect(() => {
-        if (isDragging) {
-            window.addEventListener('mousemove', handleMouseMove);
-            window.addEventListener('mouseup', handleMouseUp);
-        }
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [isDragging, handleMouseMove, handleMouseUp]);
+export function DevIndicator() {
+    const [isVisible, setIsVisible] = useState(true);
 
+    if (!isVisible) return null;
 
     return (
         <>
             <style>
                 {`
-                    @keyframes hweb-pulse {
-                        0%, 100% {
-                            transform: scale(1);
-                            opacity: 1;
-                        }
-                        50% {
-                            transform: scale(1.1);
-                            opacity: 0.8;
-                        }
-                    }
-                    
-                    @keyframes hweb-spin {
-                        from {
-                            transform: rotate(0deg);
-                        }
-                        to {
-                            transform: rotate(360deg);
-                        }
-                    }
-                `}
+          @keyframes nyte-pulse {
+            0% { opacity: 0.4; }
+            50% { opacity: 1; }
+            100% { opacity: 0.4; }
+          }
+          .nyte-dev-badge {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 999999;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 8px 14px;
+            background: rgba(15, 15, 20, 0.8);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+  
+            border-radius: 10px;
+            color: #fff;
+            font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
+            font-size: 12px;
+            font-weight: 600;
+            letter-spacing: 0.05em;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+            transition: all 0.2s ease;
+            cursor: default;
+            user-select: none;
+          }
+          .nyte-dev-badge:hover {
+            border-color: rgba(142, 45, 226, 0.5);
+            transform: translateY(-2px);
+          }
+          .nyte-status-dot {
+            width: 8px;
+            height: 8px;
+            background: #10b981; /* Verde esmeralda */
+            border-radius: 50%;
+            box-shadow: 0 0 10px #10b981;
+            animation: nyte-pulse 2s infinite ease-in-out;
+          }
+          .nyte-label {
+            color: rgba(255, 255, 255, 0.5);
+            text-transform: uppercase;
+            font-size: 10px;
+          }
+          .nyte-logo {
+            background: linear-gradient(135deg, #00a3a3, #808080);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-weight: 800;
+          }
+        `}
             </style>
-            <div
-                ref={indicatorRef}
-                style={getIndicatorStyle()}
-                onMouseDown={handleMouseDown}
-                title={isBuilding ? "Building..." : "Modo Dev Nyte.js"}
-            >
-                {isBuilding ? (
-                    <span style={{ animation: 'hweb-spin 1s linear infinite' }}>⟳</span>
-                ) : (
-                    'H'
-                )}
+
+            <div className="nyte-dev-badge">
+                <div className="nyte-status-dot" />
+                <div>
+                    <span className="nyte-logo">NYTE.JS</span>
+                </div>
+                <button
+                    onClick={() => setIsVisible(false)}
+                    style={{
+                        background: 'none',
+                        border: 'none',
+                        color: 'rgba(255,255,255,0.3)',
+                        cursor: 'pointer',
+                        fontSize: '14px',
+                        padding: '0 0 0 4px',
+                        marginLeft: '4px'
+                    }}
+                    title="Fechar"
+                >
+                    ×
+                </button>
             </div>
         </>
     );