@bananacool467/authtics-host 0.0.1-beta.9 → 0.0.2-beta.2

package/README.md

@@ -1,10 +1,8 @@
 # Authtics Host
 
-Version 0.0.1-beta.9
+Version 0.0.2-beta.2
 License: MIT
 
-**(UPDATE (Security Update): Now versions, 0.0.1-beta.9 and over now requires DAT (Developer Access Token) restriction to access remote controls such as: Restarting and Shutting Down)**
-
 **(NOTE: This version is in BETA, bugs are expected)**
 
 Authtics Host is a framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering) and uses esbuild.

package/dist/cli.js

@@ -5,7 +5,6 @@ import path from "node:path";
 import fs from "node:fs";
 import url from "node:url";
 import { renderPage } from "./renderEngine.js";
-import tls from 'tls';
 let config_ = {};
 let uptime = 0;
 let totalRequests = 0;
@@ -14,7 +13,6 @@ const jiti = createJiti(import.meta.url);
 const routes = new Map();
 const __filename = url.fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-// SSE clients waiting for hot reload signals
 const hmrClients = new Set();
 function notifyHmrClients() {
     for (const client of hmrClients) {
@@ -25,11 +23,7 @@ function notifyHmrClients() {
             hmrClients.delete(client);
         }
     }
-    //console.log(`[authtics] hot reload triggered (${hmrClients.size} client(s))`);
 }
-// ---------------------------------------------------------------------------
-// MIME types for static files in public/
-// ---------------------------------------------------------------------------
 const MIME_TYPES = {
     '.html': 'text/html',
     '.css': 'text/css',
@@ -50,9 +44,6 @@ const MIME_TYPES = {
     '.txt': 'text/plain',
     '.pdf': 'application/pdf',
 };
-// ---------------------------------------------------------------------------
-// Augment ServerResponse with helper methods
-// ---------------------------------------------------------------------------
 function augmentRes(res) {
     const r = res;
     r.html = (html) => { res.setHeader("Content-Type", "text/html"); res.end(html); };
@@ -73,13 +64,11 @@ const getCpu = () => {
 };
 async function getJsonBody(req) {
     return new Promise((resolve, reject) => {
-        // 1. Immediate exit for methods that shouldn't have a body
         const hasBody = req.headers['content-length'] || req.headers['transfer-encoding'];
         if (!hasBody && (req.method === 'GET' || req.method === 'DELETE')) {
             return resolve({});
         }
         const chunks = [];
-        // 2. Safety Timeout: If it takes more than 5s, kill the request
         const timeout = setTimeout(() => {
             req.destroy();
             reject(new Error('Request Timeout: Body took too long to arrive'));
@@ -103,9 +92,6 @@ async function getJsonBody(req) {
         });
     });
 }
-// ---------------------------------------------------------------------------
-// App class
-// ---------------------------------------------------------------------------
 export default class App {
     server;
     constructor() {
@@ -210,9 +196,7 @@ export default class App {
                     stdio: 'inherit'
                 });
                 child.unref();
-                //this.server.close(() => {
                 process.kill(process.pid, 'SIGTERM');
-                //})
             }
         });
         this.post("/__authtics_host_apis__/shutdown", async (req, res) => {
@@ -329,22 +313,10 @@ export default class App {
             if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(reqBody.dat))
                 datMatched = true;
             if (datMatched) {
-                if (req.socket instanceof tls.TLSSocket) {
-                    const protocol = req.socket.getProtocol();
-                    const cipher = req.socket.getCipher();
-                    res.writeHead(200, { "Content-Type": "application/json" });
-                    res.end(JSON.stringify({
-                        protocol,
-                        cipher: cipher.name,
-                        httpVersion: req.httpVersion
-                    }));
-                }
-                else {
-                    res.writeHead(200, { "Content-Type": "application/json" });
-                    res.end(JSON.stringify({
-                        httpVersion: req.httpVersion
-                    }));
-                }
+                res.writeHead(200, { "Content-Type": "application/json" });
+                res.end(JSON.stringify({
+                    httpVersion: req.httpVersion
+                }));
             }
             else {
                 const { url = "/", method } = req;
@@ -388,11 +360,7 @@ export default class App {
         routes.set(`DELETE:${routePath}`, handler);
     }
 }
-// ---------------------------------------------------------------------------
-// Server
-// ---------------------------------------------------------------------------
 async function start() {
-    //console.log("🛠️  Initializing Authtics Host...");
     let config = {};
     try {
         const configPath = path.join(process.cwd(), "authtics_host.config.ts");
@@ -400,7 +368,6 @@ async function start() {
         config_ = config;
     }
     catch {
-        //console.log("ℹ️  No config found, using defaults.");
     }
     if (config.autoPage == null)
         config.autoPage = true;
@@ -416,21 +383,15 @@ async function start() {
     const publicDir = config.autoFile === true ? path.join(process.cwd(), config.autoFileDir || "") : undefined;
     const apiDir = pagesDir ? path.join(pagesDir, "api") : undefined;
     const server = createServer(async (req, res) => {
-        //const body = await getJsonBody(req) as any;
-        const actuallyShowPanel = showPanel; /* && (config.dat != undefined ? (body.dat == config.dat || (Array.isArray(config.dat) && config.dat.includes(body.dat))) : true)*/
+        const actuallyShowPanel = showPanel;
         const r = augmentRes(res);
         const { url = "/", method } = req;
-        // Strip query string, hash, trailing slash
         let pathname = url.split("?")[0].split("#")[0];
         if (pathname !== "/" && pathname.endsWith("/"))
             pathname = pathname.slice(0, -1);
-        /*if (pathname !== "/__authtics_host_apis__/ping" && pathname !== "/__authtics_host_apis__/get-connection" && pathname !== "/__authtics_hmr__" && pathname !== "/__authtics_host_apis__/get-file-by-pathname" && pathname !== "/__authtics_host_apis__/get-is-ssr" && pathname !== "/__authtics_host_apis__/get-compiler" && pathname !== "/__authtics_host_apis__/restart" && pathname !== "/__authtics_host_apis__/shutdown" && pathname !== "/__authtics_host_apis__/get-server-info" && pathname !== "/__authtics_host_apis__/get-cpu_memory") {
-          totalRequests++;
-        }*/
         if (!pathname.includes('/__authtics_host_apis__/')) {
             totalRequests++;
         }
-        // ── 1. Registered routes (from app.get/post/etc.) ──────────────────────
         const routeKey = `${method}:${pathname}`;
         if (routes.has(routeKey)) {
             const handler = routes.get(routeKey);
@@ -441,8 +402,6 @@ async function start() {
                 return handler(req, r);
             }
         }
-        // ── 2. Hot reload SSE endpoint ─────────────────────────────────────────
-        // Browser connects here and waits for a 'reload' event
         if (pathname === '/__authtics_hmr__') {
             res.writeHead(200, {
                 'Content-Type': 'text/event-stream',
@@ -456,11 +415,8 @@ async function start() {
             req.on('close', () => { hmrClients.delete(res); users--; });
             return;
         }
-        // ── 3. Public folder — serves files from /public ────────────────────────
-        // e.g. GET /logo.png → public/logo.png
         if (publicDir && fs.existsSync(publicDir)) {
             const staticPath = path.join(publicDir, pathname);
-            // Make sure the resolved path is still inside publicDir (prevent traversal)
             const safePath = path.resolve(staticPath);
             if (safePath.startsWith(path.resolve(publicDir)) && fs.existsSync(safePath) && fs.statSync(safePath).isFile()) {
                 const ext = path.extname(safePath).toLowerCase();
@@ -469,15 +425,12 @@ async function start() {
                 return fs.createReadStream(safePath).pipe(res);
             }
         }
-        // ── 4. API routes — pages/api/*.ts files ────────────────────────────────
-        // e.g. GET /api/users → pages/api/users.ts
         if (pathname.startsWith("/api/") && pagesDir != null) {
             const apiFile = path.join(pagesDir, `${pathname}.ts`);
             const apiFileTsx = path.join(pagesDir, `${pathname}.tsx`);
             const resolvedApi = fs.existsSync(apiFile) ? apiFile : fs.existsSync(apiFileTsx) ? apiFileTsx : null;
             if (resolvedApi) {
                 try {
-                    // Use jiti to import the API route handler on the fly
                     const apiModule = await jiti.import(resolvedApi, { default: true });
                     const handler = apiModule.default ?? apiModule.handler ?? null;
                     if (typeof handler !== 'function') {
@@ -492,11 +445,9 @@ async function start() {
                     return res.end(JSON.stringify({ error: e.message }));
                 }
             }
-            // /api/ path but no matching file → 404
             res.writeHead(404);
             return res.end(JSON.stringify({ error: `API route not found: ${pathname}` }));
         }
-        // ── 5. TSX pages (SSR) ──────────────────────────────────────────────────
         const urlPath = pathname === "/" ? "/index" : pathname;
         const tsxPath = pagesDir ? path.join(pagesDir, `${urlPath}.tsx`) : undefined;
         const htmlPath = pagesDir ? path.join(pagesDir, `${urlPath}.html`) : undefined;
@@ -512,12 +463,10 @@ async function start() {
                 return res.end(`<html><body><pre>500 | Render error:\n${e.message}</pre></body></html>`);
             }
         }
-        // ── 6. Static HTML pages ────────────────────────────────────────────────
         if (htmlPath && fs.existsSync(htmlPath)) {
             res.setHeader("Content-Type", "text/html");
             return res.end(fs.readFileSync(htmlPath, "utf-8"));
         }
-        // ── 7. App.tsx file handling ──────────────────────────────────────────────────────────────
         if (routes.has("APP_TSX")) {
             const appTsxPath = routes.get("APP_TSX");
             const appPath = path.join(process.cwd(), appTsxPath);
@@ -534,7 +483,6 @@ async function start() {
                 }
             }
         }
-        // ── 8. 404 ──────────────────────────────────────────────────────────────
         const notFoundPath = path.join(__dirname, '404.js');
         if (fs.existsSync(notFoundPath)) {
             try {
@@ -555,15 +503,12 @@ async function start() {
         }
     });
     server.listen(PORT, () => {
-        //console.log(`🚀 Authtics Host live at http://localhost:${PORT}`);
         setInterval(() => {
             uptime++;
         }, 1000);
     });
-    // ── Hot reload file watcher ─────────────────────────────────────────────
     if (config.hotReload === true) {
         const watchDirs = [pagesDir];
-        // Also watch src/devPanel.tsx if it exists
         const devPanelDir = path.join(__dirname, 'devPanel.js');
         const _404Dir = path.join(__dirname, '404.js');
         if (fs.existsSync(devPanelDir))
@@ -575,8 +520,6 @@ async function start() {
                 fs.watch(dir, { recursive: true }, (eventType, filename) => {
                     if (!filename)
                         return;
-                    //console.log(`[authtics] file changed: ${filename}`);
-                    // Clear the cache for any .tsx/.ts/.html file change
                     notifyHmrClients();
                 });
             }
@@ -590,13 +533,10 @@ async function start() {
                 fs.watch(dir, { recursive: true }, (eventType, filename) => {
                     if (!filename)
                         return;
-                    //console.log(`[authtics] file changed: ${filename}`);
-                    // Clear the cache for any .tsx/.ts/.html file change
                     notifyHmrClients();
                 });
             }
         }
-        //console.log('🔥 Hot reload enabled — watching for file changes...');
     }
     return server;
 }

package/dist/devPanel.js

@@ -1,31 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef } from 'react';
 import { ShieldCheck, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server } from 'lucide-react';
-//import { isMobile } from 'react-device-detect';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-javascript';
 Prism.languages.javascript['builtin'] = /\b(window|document|console|navigator|localStorage|sessionStorage|fetch|Promise|setTimeout|setInterval|clearTimeout|clearInterval|requestAnimationFrame|Math|JSON|Object|Array|String|Number|Boolean|Date|RegExp|Error|Map|Set|Symbol|Proxy|Reflect|performance|history|location|screen|crypto|indexedDB|alert|confirm|prompt)\b/;
-//const isMobile = true;
 function getCallerSource() {
     try {
         const stack = new Error().stack ?? '';
         const lines = stack.split('\n');
-        // Skip frames: Error, getCallerSource, the patched console[type], and installConsoleInterceptor
         for (let i = 3; i < lines.length; i++) {
             const line = lines[i];
-            // Skip internals and DevPanel's own frames
-            if (
-            /*line.includes('installConsoleInterceptor') ||
-            line.includes('devPanel') ||
-            line.includes('<anonymous>') ||*/
-            line.trim() === '')
+            if (line.trim() === '')
                 continue;
-            // Extract filename:line from something like "at foo (http://localhost:5000/pages/index.tsx:42:10)"
             const match = line.match(/\(?(https?:\/\/[^)]+)\)?$/) ??
                 line.match(/at\s+(https?:\/\/\S+)/);
             if (match) {
                 const url = match[1];
-                // Turn full URL into just "filename:line"
                 const parts = url.replace(/\?.*/, '').split('/');
                 const file = parts[parts.length - 1];
                 const colonLine = url.match(/:(\d+):\d+$/);
@@ -33,17 +23,15 @@ function getCallerSource() {
             }
         }
     }
-    catch { /* ignore */ }
+    catch { }
     return '';
 }
 const LOG_TYPES = ['Log', 'Info', 'Warn', 'Error', 'Debug'];
-const LOG_TYPE_2 = ['Eval'];
 let fetchId = 0;
 const TYPE_STYLE = {
     Error: { bg: '#fff0f0', color: '#e53e3e', icon: _jsx(CircleX, { size: 11 }) },
     Warn: { bg: '#fffbea', color: '#d97706', icon: _jsx(AlertTriangle, { size: 11 }) },
     Log: { bg: '#ffffff', color: '#888', textColor: '#333', icon: null },
-    Eval: { bg: '#ffffff', color: '#888', textColor: '#333', icon: null },
     Info: { bg: '#eff6ff', color: '#3b82f6', icon: _jsx(Info, { size: 11 }) },
     Debug: { bg: '#f0fdf4', color: '#16a34a', icon: _jsx(Bug, { size: 11 }) },
 };
@@ -51,7 +39,6 @@ const FILTER_COLORS = {
     Error: '#e53e3e',
     Warn: '#d97706',
     Log: '#888',
-    Eval: '#888',
     Info: '#3b82f6',
     Debug: '#16a34a',
 };
@@ -62,7 +49,6 @@ const TruncatedText = ({ content, id }) => {
         : content;
     return _jsx("div", { id: id, children: truncated });
 };
-// ── Sparkline chart (SVG, no dependencies) ──────────────────────────────────
 function Sparkline({ data, color, label, unit }) {
     const W = 280, H = 48;
     const max = Math.max(...data, 1);
@@ -87,14 +73,11 @@ function installNetworkInterceptor(onFetch, setFetch, onBytesClient, onBytesServ
         const savedFetchId = fetchId;
         const url = typeof args[0] === 'string' ? args[0] : args[0].url;
         const method = (args[1]?.method ?? 'GET').toUpperCase();
-        // Filter out DevPanel's own internal pings so they don't show up in the network tab
         if (url.startsWith('/__authtics_host_apis__/') || url === "/__authtics_hmr__") {
             return originalFetch(...args);
         }
-        // Estimate bytes sent: body size + rough header/URL overhead
         const body = args[1]?.body;
         const bodyBytes = body ? new Blob([body]).size : 0;
-        // Headers + URL as a rough proxy for request overhead (like Chrome devtools does)
         const headerStr = JSON.stringify(args[1]?.headers ?? {});
         const sentBytes = bodyBytes + url.length + headerStr.length;
         onBytesClient(sentBytes);
@@ -164,7 +147,7 @@ function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled }
             ...style,
         }, children: children }));
 }
-const MAX_POINTS = 20; // number of data points shown in charts
+const MAX_POINTS = 20;
 const generateToken = () => {
     return crypto.randomUUID().replace(/-/g, '').substring(0, 16);
 };
@@ -221,7 +204,7 @@ export default function DevPanel() {
     const [rootEl, setRootEl] = useState(null);
     const [doc, setDoc] = useState(null);
     const [filters, setFilters] = useState({
-        Log: true, Info: true, Warn: true, Error: true, Debug: false, Eval: true
+        Log: true, Info: true, Warn: true, Error: true, Debug: false
     });
     const errorCount = logs.filter(l => l.type === 'Error').length;
     const warnCount = logs.filter(l => l.type === 'Warn').length;
@@ -229,7 +212,6 @@ export default function DevPanel() {
     const handleScroll = () => {
         if (consoleScrollRef.current) {
             const { scrollTop, scrollHeight, clientHeight } = consoleScrollRef.current;
-            // Buffer of 5px to handle zoom or rounding issues
             const reachedBottom = scrollHeight - scrollTop - clientHeight < 5;
             setIsAtBottom(reachedBottom);
         }
@@ -239,230 +221,6 @@ export default function DevPanel() {
             consoleScrollRef.current.scrollTop = consoleScrollRef.current.scrollHeight;
         }
     }, [filteredLogs, isAtBottom]);
-    /*useEffect(() => {
-      setRootEl(doc?.documentElement as HTMLElement);
-    }, []);
-    const [picking, setPicking] = React.useState(false);*/
-    /*const onMouseDown = (e: React.MouseEvent) => {
-    dragging || setDragging(true);
-    offset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };
-    e.preventDefault();
-  };
-  
-    const onTouchStart = (e: React.TouchEvent) => {
-    const t = e.touches[0];
-    offset.current = { x: t.clientX - pos.x, y: t.clientY - pos.y };
-  };
-  
-    const [rect, setRect] = React.useState<DOMRect | null>(null);
-  
-    const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set());
-  const [domVersion, setDomVersion] = useState(0);
-  
-    const [currentNode, setCurrentNode] = useState<Element>(doc?.documentElement as HTMLElement);
-  const [history, setHistory] = useState<Element[]>([]);
-  
-  const goInto = (el: Element) => {
-    setHistory(prev => [...prev, currentNode]);
-    setCurrentNode(el);
-  };
-  
-  const goBack = () => {
-    setHistory(prev => {
-      const next = [...prev];
-      setCurrentNode(next.pop()!);
-      return next;
-    });
-  };
-  
-  useEffect(() => {
-    const observer = new MutationObserver(() => setDomVersion(v => v + 1));
-    observer.observe(doc?.documentElement as HTMLElement, { childList: true, subtree: true, attributes: true });
-    return () => observer.disconnect();
-  }, []);
-  
-  const getPath = (el: Element, depth: number) => el.tagName + depth + el.className + el.id;
-  
-  const toggle = (path: string) => {
-    setExpandedPaths(prev => {
-      const next = new Set(prev);
-      next.has(path) ? next.delete(path) : next.add(path);
-      return next;
-    });
-  };
-  
-    const colorizeJS = (code: string): string => {
-    const escaped = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    return escaped
-      .replace(/(\/\/[^\n]*)/g, '<span style="color:#888">$1</span>')
-      .replace(/(".*?"|'.*?')/g, '<span style="color:#0a0">$1</span>')
-      .replace(/\b(const|let|var|function|return|if|else|for|while|import|export|default|class|new)\b/g, '<span style="color:#e05">$1</span>')
-      .replace(/\b(\d+)\b/g, '<span style="color:#f90">$1</span>');
-  };
-  
-  const colorizeCSS = (code: string): string => {
-    const escaped = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    return escaped
-      .replace(/([\w-]+)(\s*:)/g, '<span style="color:#f90">$1</span>$2')
-      .replace(/([.#]?[\w-]+)\s*\{/g, '<span style="color:#e05">$1</span> {');
-  };
-  
-    const colorizeHtml = (code: string): React.ReactElement => {
-    const tokens: React.ReactElement[] = [];
-    let rest = code;
-    let i = 0;
-  
-    const tagRegex = /(<\/?)([a-zA-Z][a-zA-Z0-9]*)([^>]*)(>)/g;
-    let last = 0;
-    let match;
-  
-    while ((match = tagRegex.exec(code)) !== null) {
-      if (match.index > last)
-        tokens.push(<span key={i++} style={{ color: '#555' }}>{code.slice(last, match.index)}</span>);
-      tokens.push(<span key={i++} style={{ color: '#666' }}>{match[1]}</span>);
-      tokens.push(<span key={i++} style={{ color: '#e05' }}>{match[2]}</span>);
-      // colorize attributes
-      const attrStr = match[3];
-      const attrRegex = /(\s[a-zA-Z-]+)(="([^"]*)")?/g;
-      let am;
-      while ((am = attrRegex.exec(attrStr)) !== null) {
-        tokens.push(<span key={i++} style={{ color: '#f90' }}>{am[1]}</span>);
-        if (am[2]) {
-          tokens.push(<span key={i++} style={{ color: '#999' }}>="</span>);
-          tokens.push(<span key={i++} style={{ color: '#0a0' }}>{am[3]}</span>);
-          tokens.push(<span key={i++} style={{ color: '#999' }}>"</span>);
-        }
-      }
-      tokens.push(<span key={i++} style={{ color: '#666' }}>{match[4]}</span>);
-      last = match.index + match[0].length;
-    }
-  
-    if (last < code.length)
-      tokens.push(<span key={i++} style={{ color: '#555' }}>{code.slice(last)}</span>);
-  
-    return <>{tokens}</>;
-  };
-  
-  const renderNode = (el: Element, depth = 0, path = el.tagName): React.ReactElement => {
-    const isSelected = selected === el;
-    const tag = el.tagName.toLowerCase();
-    ;const idAttr = el.id ? el.id : null;
-  const classAttr = el.className ? String(el.className).slice(0, 15) : null;
-  const otherAttrs = Array.from(el.attributes)
-    .filter(a => a.name !== 'id' && a.name !== 'class')
-    .slice(0, 2);
-    const text = Array.from(el.childNodes)
-    .filter(n => n.nodeType === Node.TEXT_NODE)
-    .map(n => n.textContent?.trim())
-    .filter(Boolean)
-    .join(' ');
-  
-  const hasChildren = el.children.length > 0;
-  const hasText = text.length > 0;
-  const expandable = hasChildren || hasText;
-  const isExpanded = expandedPaths.has(path);*/
-    /*return (
-    <div key={path}>
-      {*/ /* opening tag */ /*}
-    <div
-  onClick={() => { setSelected(el); setRect(el.getBoundingClientRect()); if (expandable) toggle(path); }}
-  style={{ paddingLeft: depth * 10 + 4, cursor: 'pointer', background: isSelected ? '#e0edff' : 'transparent', borderRadius: 4, fontSize: 11, fontFamily: 'monospace', whiteSpace: 'nowrap' }}
->
-  <span style={{ color: '#999' }}>{expandable ? (isExpanded ? '▾' : '▸') : '·'} </span>
-<span style={{ color: '#666' }}>&lt;</span>
-<span style={{ color: '#e05' }}>{tag}</span>
-{idAttr && <><span style={{ color: '#f90' }}> id</span><span style={{ color: '#999' }}>="</span><span style={{ color: '#0a0' }}>{idAttr}</span><span style={{ color: '#999' }}>"</span></>}
-{classAttr && <><span style={{ color: '#f90' }}> class</span><span style={{ color: '#999' }}>="</span><span style={{ color: '#0a0' }}>{classAttr}</span><span style={{ color: '#999' }}>"</span></>}
-{otherAttrs.map(a => (
-  <span key={a.name}>
-    <span style={{ color: '#f90' }}> {a.name}</span>
-    <span style={{ color: '#999' }}>="</span>
-    <span style={{ color: '#0a0' }}>{a.value.slice(0, 20)}</span>
-    <span style={{ color: '#999' }}>"</span>
-  </span>
-))}
-<span style={{ color: '#666' }}>&gt;</span>
-  {!isExpanded && hasText && <span style={{ color: '#333' }}>{text.slice(0, 30)}{text.length > 30 ? '...' : ''}</span>}
-  {!isExpanded && <span style={{ color: '#e05' }}>&lt;/{tag}&gt;</span>}
-</div>
-
-{/* expanded content */ /*}
-    {isExpanded && (
-      <>
-        {hasText && (
-      <div
-        style={{ paddingLeft: (depth + 2) * 10 + 4, fontSize: 11, fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}
-        dangerouslySetInnerHTML={{
-          __html: tag === 'script'
-            ? colorizeJS(text)
-            : tag === 'style'
-            ? colorizeCSS(text)
-            : `"${text}"`
-        }}
-      />
-    )}
-        {hasChildren && Array.from(el.children).map((child, i) =>
-          renderNode(child, depth + 1, path + '>' + child.tagName + i)
-        )}
-        {/* closing tag only shows separately when expanded */ /*}
-    <div style={{ paddingLeft: depth * 10 + 4, fontSize: 11, fontFamily: 'monospace', color: '#e05' }}>
-    <span style={{ color: '#666' }}>&lt;/</span>
-<span style={{ color: '#e05' }}>{tag}</span>
-<span style={{ color: '#666' }}>&gt;</span>
-    </div>
-  </>
-)}
-  </div>
-);
-};
-  
-useEffect(() => {
-  if (!picking) return;
-  const onOver = (e: MouseEvent) => (e.target as HTMLElement).style.outline = '2px solid #e05';
-  const onOut = (e: MouseEvent) => (e.target as HTMLElement).style.outline = '';
-  const onClick = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const el = e.target as HTMLElement;
-    el.style.outline = '';
-    setSelected(el);
-    setRect(el.getBoundingClientRect());
-    setPicking(false);
-  };
-  document.addEventListener('mouseover', onOver);
-  document.addEventListener('mouseout', onOut);
-  document.addEventListener('click', onClick, true);
-  return () => {
-    document.removeEventListener('mouseover', onOver);
-    document.removeEventListener('mouseout', onOut);
-    document.removeEventListener('click', onClick, true);
-  };
-}, [picking]);
-
-const styles = selected ? window.getComputedStyle(selected) : null;
-const isFlex = styles?.display === 'flex';
-const isGrid = styles?.display === 'grid';
-const rotation = styles?.transform !== 'none' ? styles?.transform : null;
-const styleKeys = ['color','background','fontSize','margin','padding','display','width','height','position','borderRadius'];
-
-useEffect(() => {
-  const onMove = (e: MouseEvent | TouchEvent) => {
-    if (!dragging) return;
-    const point = 'touches' in e ? e.touches[0] : e;
-    setPos({ x: point.clientX - offset.current.x, y: point.clientY - offset.current.y });
-  };
-  const onUp = () => setDragging(false);
-  window.addEventListener('mousemove', onMove as any);
-  window.addEventListener('mouseup', onUp);
-  window.addEventListener('touchmove', onMove as any);
-  window.addEventListener('touchend', onUp);
-  return () => {
-    window.removeEventListener('mousemove', onMove as any);
-    window.removeEventListener('mouseup', onUp);
-    window.removeEventListener('touchmove', onMove as any);
-    window.removeEventListener('touchend', onUp);
-  };
-}, [dragging]);*/
     const loop = () => {
         frameCount.current++;
         requestAnimationFrame(loop);
@@ -606,18 +364,6 @@ useEffect(() => {
                 update();
             }, 500);
         }, 250);
-        /*setInterval(() => {
-          //setFps(Math.round(1000 / (performance.now() - (window as any).lastFrameTime)));
-          const now = performance.now();
-          const last = (window as any).lastFrameTime;
-          if (typeof last === 'number') {
-            const _ = now - last;
-            if (fpsSpanRef.current) {
-              fpsSpanRef.current.textContent = _ > 0 ? Math.round(1000 / _).toString() : '0';
-            }
-          }
-          (window as any).lastFrameTime = now;
-        }, 1000)*/
     }, []);
     const restart = async () => {
         const resp = await fetch('/__authtics_host_apis__/restart', {
@@ -647,7 +393,6 @@ useEffect(() => {
             clearInterval(intervalId);
         };
     }, []);
-    // Accumulated bytes per 2s tick
     const pendingSent = useRef(0);
     const pendingReceived = useRef(0);
     const [sentHistory, setSentHistory] = useState(Array(MAX_POINTS).fill(0));
@@ -659,7 +404,6 @@ useEffect(() => {
         : consoleOpen || networkOpen || routeOpen || webpageInfoOpen || clientInfoOpen || aboutHostOpen
             ? '320px'
             : '320px';
-    // Ping every second
     useEffect(() => {
         const dat = localStorage.getItem('dat');
         const interval = setInterval(async () => {
@@ -676,11 +420,10 @@ useEffect(() => {
                         setPing__(Date.now() - timeStart);
                 }
             }
-            catch { /* server not reachable */ }
+            catch { }
         }, 1000);
         return () => clearInterval(interval);
     }, []);
-    // Chart tick every 2 seconds — snapshot pending bytes then reset
     useEffect(() => {
         const interval = setInterval(() => {
             const s = pendingSent.current;
@@ -698,7 +441,6 @@ useEffect(() => {
         }, 1000);
         return () => clearInterval(interval);
     }, []);
-    // Console + network interceptors
     useEffect(() => {
         installConsoleInterceptor();
         installNetworkInterceptor((f) => setNetworkFetches(prev => [...prev.slice(-49), f]), (f) => setNetworkFetches(prev => prev.map(p => p.id === f.id ? f : p)), (sent) => {
@@ -749,13 +491,6 @@ useEffect(() => {
         setHostName(window.location.hostname);
         setDoc(document);
         setProtocol(window.location.protocol.replace(':', '').toUpperCase());
-        // Test logs
-        //setTimeout(() => console.error('DevPanel rendered.'), 2000);
-        //setTimeout(() => console.error('DevPanel rendered. 2'), 2000);
-        /*setTimeout(() => console.debug('DevPanel rendered.'), 2000);
-        setTimeout(() => console.info('DevPanel rendered.'),  2000);
-        setTimeout(() => console.log('DevPanel rendered.'),   2000);
-        setTimeout(() => console.warn('DevPanel rendered.'),  2000);*/
         return () => window.removeEventListener('authtics:log', handler);
     }, []);
     const getOS = () => {
@@ -941,7 +676,7 @@ useEffect(() => {
                                                 userSelect: 'none',
                                             }, children: [_jsx("input", { type: "checkbox", checked: filters[type], onChange: () => toggleFilter(type), style: { display: 'none' } }), type] }, type))) }), _jsx("div", { style: { overflowY: 'auto', maxHeight: '220px' }, ref: consoleScrollRef, onScroll: handleScroll, children: filteredLogs.length === 0
                                             ? _jsx("div", { style: { padding: '16px 12px', color: '#aaa', fontSize: '12px' }, children: "No logs yet." })
-                                            : [...filteredLogs] /*.reverse()*/.map(log => {
+                                            : [...filteredLogs].map(log => {
                                                 const s = TYPE_STYLE[log.type];
                                                 return (_jsxs("div", { style: {
                                                         display: 'flex',
@@ -955,12 +690,7 @@ useEffect(() => {
                                                                 fontSize: '11px',
                                                                 fontFamily: 'monospace',
                                                                 wordBreak: 'break-all',
-                                                            }, children: log.type === "Eval" ? (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '4px', justifyContent: 'center', alignItems: 'center' }, children: ["(You): ", _jsx("div", { style: {
-                                                                            fontFamily: 'monospace',
-                                                                            fontSize: '12px',
-                                                                            whiteSpace: 'pre-wrap',
-                                                                            wordBreak: 'break-all',
-                                                                        }, dangerouslySetInnerHTML: { __html: Prism.highlight(log.message, Prism.languages.javascript, 'javascript') } })] })) : log.message })] }, log.id));
+                                                            }, children: log.message })] }, log.id));
                                             }) })] })) : networkOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                             padding: '6px 8px',
                                             borderBottom: '1px solid #ddd',

package/dist/renderEngine.js

@@ -1,36 +1,20 @@
-// src/renderEngine.ts
 import path from "node:path";
 import fs from "node:fs";
 import { fileURLToPath } from "node:url";
-import { createRequire } from "node:module";
 import * as esbuild from "esbuild";
+import * as babel from "@babel/core";
+import * as babelPresetEnv from "@babel/preset-env";
 import React from "react";
 import { renderToString } from "react-dom/server";
 import { tempFileForTsx, writeTempFile, readTempFile, ensureTempDirs, } from "./rendererTempFiles.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-//const __dirname = fileURLToPath(new URL(".", import.meta.url));
-const require = createRequire(import.meta.url);
-// ---------------------------------------------------------------------------
-// Babel compiler (optional — only used if compilerType: 'babel' in config)
-// Lazily required so babel doesn't need to be installed for esbuild users.
-// ---------------------------------------------------------------------------
 async function buildWithBabel(entryPath, virtualContent, platform) {
-    let babel;
-    try {
-        babel = require('@babel/core');
-    }
-    catch {
-        throw new Error('[authtics] compilerType is "babel" but @babel/core is not installed.\n' +
-            'Run: npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript');
-    }
     const presets = [
-        [require('@babel/preset-env'), {
+        [babelPresetEnv, {
                 targets: platform === 'node' ? { node: 'current' } : { browsers: '>0.5%, not dead' },
                 modules: platform === 'node' ? 'commonjs' : false,
             }],
-        [require('@babel/preset-react'), { runtime: 'automatic' }],
-        [require('@babel/preset-typescript'), {}],
     ];
     const result = await babel.transformAsync(virtualContent, {
         filename: entryPath,
@@ -41,9 +25,6 @@ async function buildWithBabel(entryPath, virtualContent, platform) {
         throw new Error('[authtics] Babel produced no output');
     return result.code;
 }
-// ---------------------------------------------------------------------------
-// esbuild compiler (default)
-// ---------------------------------------------------------------------------
 async function buildWithEsbuild(virtualContent, resolveDir, platform) {
     const isNode = platform === 'node';
     const result = await esbuild.build({
@@ -54,8 +35,6 @@ async function buildWithEsbuild(virtualContent, resolveDir, platform) {
         },
         bundle: true,
         write: false,
-        // Server: CJS so require() works (e.g. lucide-react)
-        // Client: IIFE so it runs as a plain <script> tag
         format: isNode ? 'cjs' : 'iife',
         platform,
         jsx: 'automatic',
@@ -63,8 +42,6 @@ async function buildWithEsbuild(virtualContent, resolveDir, platform) {
         target: isNode ? ['node18'] : ['es2020'],
         minify: false,
         treeShaking: true,
-        // Server: externalize React to avoid duplicate instance → "Invalid hook call"
-        // Client: bundle React in so the browser needs no CDN or importmap
         external: isNode
             ? ['react', 'react-dom', 'react-dom/server', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'node:http',
                 'node:path',
@@ -78,9 +55,6 @@ async function buildWithEsbuild(virtualContent, resolveDir, platform) {
     });
     return result.outputFiles[0].text;
 }
-// ---------------------------------------------------------------------------
-// Resolve devPanel.tsx
-// ---------------------------------------------------------------------------
 export function findFileUpwards(startDir, relativePath) {
     let dir = path.resolve(startDir);
     const root = path.parse(dir).root;
@@ -95,19 +69,12 @@ export function findFileUpwards(startDir, relativePath) {
     return null;
 }
 function resolveDevPanelPath() {
-    /*const fromCwd = findFileUpwards(process.cwd(), path.join("src", "devPanel.tsx"));
-    if (fromCwd) return fromCwd;
-    const fromParent = findFileUpwards(path.join(process.cwd(), ".."), path.join("src", "devPanel.tsx"));
-    if (fromParent) return fromParent;*/
     const nextToCli = path.join(__dirname, "devPanel.js");
     if (fs.existsSync(nextToCli))
         return nextToCli;
     return null;
 }
 const devPanelPath = resolveDevPanelPath();
-// ---------------------------------------------------------------------------
-// Template resolution
-// ---------------------------------------------------------------------------
 function resolveTemplate(tsxPath) {
     const pagesDir = path.join(process.cwd(), "pages");
     let dir = path.dirname(tsxPath);
@@ -144,7 +111,6 @@ function buildHtml(opts) {
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Authtics</title>
   </head>
   <body>
     <div id="root">${pageHtml}</div>
@@ -154,21 +120,15 @@ function buildHtml(opts) {
   </body>
 </html>`;
 }
-// ---------------------------------------------------------------------------
-// Cache validity
-// ---------------------------------------------------------------------------
 function isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPath) {
     if (!fs.existsSync(tempPath) || !fs.existsSync(serverCjsPath))
         return false;
     try {
         const cacheMtime = fs.statSync(tempPath).mtimeMs;
-        // Page file changed?
         if (fs.statSync(tsxPath).mtimeMs > cacheMtime)
             return false;
-        // Template changed?
         if (templatePath && fs.existsSync(templatePath) && fs.statSync(templatePath).mtimeMs > cacheMtime)
             return false;
-        // DevPanel changed?
         if (devPanelPath && fs.existsSync(devPanelPath) && fs.statSync(devPanelPath).mtimeMs > cacheMtime)
             return false;
         return true;
@@ -177,11 +137,6 @@ function isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPa
         return false;
     }
 }
-// ---------------------------------------------------------------------------
-// renderPage
-// ---------------------------------------------------------------------------
-// Small script injected into every page when hotReload is enabled.
-// It opens an SSE connection to /__authtics_hmr__ and reloads on signal.
 const HMR_SCRIPT = `
 <script>
 (function() {
@@ -198,10 +153,6 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
     }
     const usesDevPanel = showPanel && devPanelPath !== null;
     const templatePath = resolveTemplate(tsxPath);
-    /*console.log(`[authtics] compiler     = ${compiler}`);
-    console.log(`[authtics] devPanelPath = ${devPanelPath ?? "(not found)"}`);
-    console.log(`[authtics] usesDevPanel = ${usesDevPanel}`);
-    console.log(`[authtics] template     = ${templatePath ?? "(none, using default)"}`);*/
     const tempPath = tempFileForTsx(tsxPath);
     const serverCjsPath = tempPath.replace(/\.json$/, ".server.cjs");
     let clientCode;
@@ -211,14 +162,11 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
             const parsed = JSON.parse(readTempFile(tempPath));
             clientCode = parsed.clientCode;
             serverCode = fs.readFileSync(serverCjsPath, "utf-8");
-            //console.log(`[authtics] using cached bundle for ${path.basename(tsxPath)}`);
         }
         catch {
-            // corrupt — rebuild
         }
     }
     if (!clientCode || !serverCode) {
-        //console.log(`[authtics] building bundle (${compiler}) for ${path.basename(tsxPath)}...`);
         const virtualServer = `
       import Page from ${JSON.stringify(tsxPath)};
       ${usesDevPanel ? `import DevPanel from ${JSON.stringify(devPanelPath)};` : ""}
@@ -248,9 +196,7 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
         }
         fs.writeFileSync(serverCjsPath, serverCode, "utf-8");
         writeTempFile(tempPath, JSON.stringify({ clientCode }));
-        //console.log(`[authtics] bundle cached for ${path.basename(tsxPath)}`);
     }
-    // SSR
     const serverModule = await import(`${serverCjsPath}?t=${Date.now()}`);
     const exports = serverModule.default ?? serverModule;
     const PageComponent = exports.default ?? exports.Page ?? exports.page ?? null;

package/dist/rendererTempFiles.d.ts

@@ -1,19 +1,6 @@
 export declare function ensureTempDirs(): void;
-/**
- * Returns the cache file path for a given source .tsx file.
- * Uses the basename + a short hash of the full path to avoid collisions
- * between files named the same thing in different directories.
- *
- * Example: /project/pages/about.tsx → .authtics_host/cache/about.tsx_a3f9b2.json
- */
 export declare function tempFileForTsx(tsxPath: string): string;
-/**
- * Returns true if the cache file exists and is at least as new as the source file.
- */
 export declare function isTempUpToDate(tsxPath: string, tempPath: string): boolean;
 export declare function writeTempFile(tempPath: string, content: string): void;
 export declare function readTempFile(tempPath: string): string;
-/**
- * Wipes the entire cache directory. Useful for a `authtics clean` CLI command.
- */
 export declare function clearCache(): void;

package/dist/rendererTempFiles.js

@@ -1,11 +1,5 @@
-// src/rendererTempFiles.ts
 import fs from "node:fs";
 import path from "node:path";
-// ---------------------------------------------------------------------------
-// Directory layout:
-//   <project>/.authtics_host/
-//     cache/          ← compiled server+client bundles (JSON, keyed by source)
-// ---------------------------------------------------------------------------
 const AUTHTICS_DIR = path.join(process.cwd(), ".authtics_host");
 const CACHE_DIR = path.join(AUTHTICS_DIR, "cache");
 export function ensureTempDirs() {
@@ -14,22 +8,12 @@ export function ensureTempDirs() {
     if (!fs.existsSync(CACHE_DIR))
         fs.mkdirSync(CACHE_DIR, { recursive: true });
 }
-/**
- * Returns the cache file path for a given source .tsx file.
- * Uses the basename + a short hash of the full path to avoid collisions
- * between files named the same thing in different directories.
- *
- * Example: /project/pages/about.tsx → .authtics_host/cache/about.tsx_a3f9b2.json
- */
 export function tempFileForTsx(tsxPath) {
     ensureTempDirs();
     const base = path.basename(tsxPath);
     const hash = simpleHash(tsxPath);
     return path.join(CACHE_DIR, `${base}_${hash}.json`);
 }
-/**
- * Returns true if the cache file exists and is at least as new as the source file.
- */
 export function isTempUpToDate(tsxPath, tempPath) {
     try {
         const srcMtime = fs.statSync(tsxPath).mtimeMs;
@@ -46,19 +30,12 @@ export function writeTempFile(tempPath, content) {
 export function readTempFile(tempPath) {
     return fs.readFileSync(tempPath, "utf-8");
 }
-/**
- * Wipes the entire cache directory. Useful for a `authtics clean` CLI command.
- */
 export function clearCache() {
     if (fs.existsSync(CACHE_DIR)) {
         fs.rmSync(CACHE_DIR, { recursive: true, force: true });
     }
     ensureTempDirs();
 }
-// ---------------------------------------------------------------------------
-// Internal helpers
-// ---------------------------------------------------------------------------
-/** Tiny non-cryptographic hash — good enough to avoid filename collisions. */
 function simpleHash(str) {
     let h = 0;
     for (let i = 0; i < str.length; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bananacool467/authtics-host",
-  "version": "0.0.1-beta.9",
+  "version": "0.0.2-beta.2",
   "description": "A Next.js-inspired SSR framework for Node.js with TypeScript and JSX support.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -40,25 +40,27 @@
   "author": "bananacool467",
   "license": "MIT",
   "dependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__preset-env": "^7.10.0",
     "esbuild": "^0.27.3",
     "jiti": "^2.6.1",
     "lucide-react": "^0.577.0",
     "prismjs": "^1.30.0",
-    "react-device-detect": "^2.2.3",
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.0",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5"
+    "react-device-detect": "^2.2.3"
   },
   "peerDependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
+    "@types/node": "^22.13.11",
+    "@types/prismjs": "^1.26.6",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "@types/node": "^22.13.11",
-    "@types/prismjs": "^1.26.6"
+    "@types/react-syntax-highlighter": "^15.5.13"
   }
 }