@bananacool467/authtics-host 0.2.7 → 0.2.9

package/README.md

@@ -1,6 +1,6 @@
 # Authtics Host
 
-Version 0.2.7, License: MIT
+Version 0.2.9, License: MIT
 
 Authtics Host is a web framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering), SSG (Static Site Generation), CSR (Client-Side Rendering) and SRTWS (Site Rendering Through WebSockets) and uses **Esbuild**. This is not to be confused with auth platforms.
 
@@ -17,6 +17,11 @@ or
 npm install @bananacool467/authtics-host@latest
 ```
 
+You may have to get **React** and **React DOM**:
+```bash
+npm i @types/react @types/react-dom
+```
+
 You can have auto paging enabled, auto paging checks your given directory for HTML and TSX files and then adds them to route. If auto filing is enabled, auto filing will check your given directory for files and add them accessible to route.
 
 To make your app, with auto paging and auto filing, your file tree should look like:
@@ -172,6 +177,11 @@ To run the project use:
 node --experimental-strip-types index.ts
 ```
 
+Or:
+```
+hostjs start
+```
+
 ## Result
 
 Then when you run your project, you will get a page just saying **"Hello, World!"** and you should see a clickable Developer Panel at the bottom-right.
@@ -366,6 +376,33 @@ There isn't any limit of DATs you can add.
 
 **(Note: Adding your DAT will give you access to Restart and Shutdown and Pause/Resume Users and other features in the Developer Panel)**
 
+## HostJS commands
+
+There are 3 different HostJS commands:
+
+```bash
+hostjs -v
+# or:
+hostjs --version
+# or:
+hostjs version
+```
+Returns the current HostJS *version*.
+
+```bash
+hostjs help
+```
+Returns all the avaliable HostJS commands.
+
+```bash
+hostjs start
+```
+Runs `node --experimental-strip-types index.ts` but you can use:
+```bash
+hostjs start path/to/script.ts
+```
+Which runs the same command but uses the path to the script instead of `index.ts`
+
 ## Reasons for the name, Authtics Host
 
 I named this web framework Authtics Host because it uses DAT (For the **Auth**tics part) for developer authentication for dev panel, and for "Host" is because it let's the developer **Restart**/**Shutdown** the server.

package/bin/hostjs.js

@@ -0,0 +1,62 @@
+import { parseArgs } from 'node:util';
+import { logger } from './logger.js';
+import { spawnSync } from 'node:child_process';
+import path from "node:path";
+import fs from "node:fs/promises";
+import url from "node:url";
+
+const { positionals } = parseArgs({
+  allowPositionals: true
+});
+
+const [arg, arg2] = positionals;
+if ( !arg ) {
+  process.exit(0);
+}
+
+if ( arg != "help" && arg != "version" && arg != "--version" && arg != "start" && arg != "-v" ) {
+  logger.error(`Unknown command: \x1b[33m${arg}`);
+  logger.skip();
+  logger.notice("You can get commands by typing \"hostjs help\".");
+  process.exit(1);
+} else if ( arg == "help" ) {
+  logger.log("Avaliable HostJS commands:");
+  logger.skip();
+  logger.log("  help    => Get help with HostJS commands.");
+  logger.log("  version => See the current downloaded version.");
+  logger.log("    [-v|--version] => Other ways to get version.");
+  logger.log("  start   => Start your website.");
+} else if ( arg == "start" ) {
+  logger.notice("Starting...");
+  let file = "index.ts";
+  const command = "node";
+  const commandArg = "--experimental-strip-types";
+  if ( arg2 != null ) file = arg2;
+
+  const result = spawnSync(command, [commandArg, file], { stdio: 'inherit' });
+
+  if ( result.status !== 0 ) {
+    logger.error(`Process exited with code ${result.status}`);
+    process.exit(result.status || 1);
+  }
+} else if ( arg == "-v" || arg == "version" || arg == "--version" ) {
+  const __filename = url.fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+  const packageJsonPath = path.join(__dirname, '..', 'package.json');
+  async function loadPackageConfig() {
+    try {
+      const rawData = await fs.readFile(packageJsonPath, 'utf-8');
+
+      const packageJson = JSON.parse(rawData);
+
+      return packageJson
+    } catch (error) {
+      logger.error('Failed to read package.json:', error);
+      process.exit(1);
+    }
+  }
+
+  const package_ = await loadPackageConfig();
+  logger.notice(`Authtics Host version: ${package_.version}`);
+}
+process.exit(0);

package/bin/logger.js

@@ -0,0 +1,29 @@
+function skip () {
+  return console.log('');
+}
+
+function error (msg) {
+  return console.error(`[HostJS \x1b[31mError\x1b[0m]: \x1b[31m${msg}\x1b[0m`);
+}
+
+function notice (msg) {
+  return console.log(`[HostJS \x1b[32mNotice\x1b[0m]: \x1b[32m${msg}\x1b[0m`)
+}
+
+function log (msg) {
+  return console.log(msg);
+}
+
+function warn (msg) {
+  return console.log(`[HostJS \x1b[33mWarn\x1b[0m]: \x1b[33m${msg}\x1b[0m`)
+}
+
+const logger = {
+  skip,
+  error,
+  notice,
+  log,
+  warn
+}
+
+export { logger };

package/dist/cli.js

@@ -425,6 +425,12 @@ export default class App {
                     message: "ok"
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post('/__authtics_host_apis__/is-users-paused', async (req, res) => {
             let datMatched = false;
@@ -439,6 +445,12 @@ export default class App {
                     realInfo: usersPaused
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post('/__authtics_host_apis__/get-dat-restriction-missing', async (req, res) => {
             let datMatched = false;
@@ -457,6 +469,12 @@ export default class App {
                     enabled: datRestrictedEnv
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post('/__authtics_host_apis__/get-dat-matching', async (req, res) => {
             let datMatched = false;
@@ -487,6 +505,12 @@ export default class App {
                     heapTotal
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post('/__authtics_host_apis__/get-user-settings', async (req, res) => {
             let datMatched = false;
@@ -500,6 +524,12 @@ export default class App {
                     showError: config_.showError !== undefined ? config_.showError : true
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/get-server-info", async (req, res) => {
             let datMatched = false;
@@ -513,6 +543,12 @@ export default class App {
                     uptime, totalRequests, users
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/restart", async (req, res) => {
             let datMatched = false;
@@ -522,17 +558,23 @@ export default class App {
                 datMatched = true;
             if (datMatched) {
                 res.writeHead(200, { "Content-Type": "application/json" });
-                res.end(JSON.stringify({ message: "Restarting..." }));
                 const { spawn } = await import('node:child_process');
                 const child = spawn(process.argv[0], process.argv.slice(1), {
                     detached: true,
                     stdio: 'inherit'
                 });
                 child.unref();
+                res.end(JSON.stringify({ message: "Restarting..." }));
                 this.server?.close(() => {
                     process.kill(process.pid, 'SIGTERM');
                 });
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/shutdown", async (req, res) => {
             let datMatched = false;
@@ -547,6 +589,12 @@ export default class App {
                     process.kill(process.pid, 'SIGTERM');
                 });
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/get-render-type", async (req, res) => {
             let datMatched = false;
@@ -560,6 +608,12 @@ export default class App {
                     renderType: config_.renderType
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/get-compiler", async (req, res) => {
             let datMatched = false;
@@ -573,6 +627,12 @@ export default class App {
                     compiler: config_.compilerType
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/get-host-ver", async (req, res) => {
             let datMatched = false;
@@ -591,6 +651,12 @@ export default class App {
                     version: packageJsonVersion
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/get-file-by-pathname", async (req, res) => {
             let datMatched = false;
@@ -628,6 +694,12 @@ export default class App {
                     filePath: (filePath ? filePath : "Cannot find file because autoPage is disabled.")
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post("/__authtics_host_apis__/ping", async (req, res) => {
             let datMatched = false;
@@ -639,6 +711,12 @@ export default class App {
                 res.setHeader("Content-Type", "application/json");
                 res.end(JSON.stringify({ status: "ok" }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
         this.post('/__authtics_host_apis__/get-connection', async (req, res) => {
             let datMatched = false;
@@ -652,6 +730,12 @@ export default class App {
                     httpVersion: req.httpVersion
                 }));
             }
+            else {
+                res.writeHead(401, { "Content-Type": "application/json" });
+                return res.end(JSON.stringify({
+                    message: "unauthorized"
+                }));
+            }
         });
     }
     async startServer() {

package/dist/devPanel.js

@@ -1,7 +1,91 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { ShieldCheck, Shield, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, Cog, TriangleAlert, Eye, Zap, Power, Check as Tick, CheckCircle2 } from 'lucide-react';
+import { ShieldCheck, Shield, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, Cog, TriangleAlert, Eye, Zap, Power, Check as Tick, CheckCircle2, EyeOff, Copy, CopyCheck } from 'lucide-react';
 import { TraceMap, originalPositionFor, sourceContentFor, } from "@jridgewell/trace-mapping";
+let pT, rT, sT;
+function Tab({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function TabBody({ children }) {
+    return (_jsx("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: children }));
+}
+function TabData({ title, titleColor, content, contentColor }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            padding: '6px 10px',
+            background: '#fff',
+            borderRadius: '50px',
+            border: '1px solid #eee',
+            fontSize: '12px',
+            color: '#333',
+        }, children: [_jsx("span", { style: { fontSize: '12px', color: titleColor ?? '#333' }, children: title }), _jsx("span", { style: { fontSize: '12px', color: contentColor ?? 'blue' }, children: content })] }));
+}
+function TabHeader({ title, icon, onBack, children }) {
+    return (_jsxs("div", { style: {
+            padding: '6px 8px',
+            borderBottom: '1px solid #ddd',
+            background: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+            margin: '10px',
+            borderRadius: '100px'
+        }, children: [_jsxs("div", { style: {
+                    alignItems: 'center',
+                    display: 'flex'
+                }, children: [_jsx(PanelButton, { onClick: () => { onBack(); }, style: { color: '#555' }, children: _jsx(ArrowLeft, { size: 12 }) }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [icon, " ", title] })] }), _jsx("div", { style: {
+                    alignItems: 'center',
+                    display: 'flex'
+                }, children: children })] }));
+}
+async function increaseDots(dots, setter, type) {
+    return new Promise((r) => {
+        const t = setTimeout(() => {
+            if (type == 1) {
+                if (pT == null)
+                    r(0);
+            }
+            if (type == 2) {
+                if (rT == null)
+                    r(0);
+            }
+            if (type == 3) {
+                if (sT == null)
+                    r(0);
+            }
+            if (dots == 0)
+                r(0);
+            let newDots = dots;
+            if (dots < 6)
+                newDots++;
+            else
+                newDots = 1;
+            r(newDots);
+        }, 250);
+        if (type === 1)
+            pT = t;
+        if (type === 2)
+            rT = t;
+        if (type === 3)
+            sT = t;
+        setter(t);
+    });
+}
+function finalizeDots(text, dots) {
+    if (dots === 1)
+        return text + "   ";
+    if (dots === 2)
+        return text + ".  ";
+    if (dots === 3)
+        return text + ".. ";
+    if (dots === 4)
+        return text + "...";
+    if (dots === 5)
+        return text + " ..";
+    if (dots === 6)
+        return text + "  .";
+}
 export async function mapGeneratedLocation(location) {
     try {
         if (!location.file || !location.line || !location.column) {
@@ -458,7 +542,7 @@ function SecuredTab() {
     return (_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '10px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(CircleX, { size: 32, color: '#ff7d7d' }), _jsx("span", { style: { color: '#ff7d7d', fontSize: 24 }, children: "This tab is currently not accessible" }), _jsx("span", { style: { color: '#ff7d7d', fontSize: 12 }, children: "To access this tab, you need to set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart." })] }));
 }
 function ShutdownTab() {
-    return (_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '10px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(Power, { size: 32, color: 'grey' }), _jsx("span", { style: { color: 'grey', fontSize: 24 }, children: "The server was shutdown by you." })] }));
+    return (_jsx(Tab, { children: _jsx(TabBody, { children: _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '10px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(Power, { size: 32, color: 'grey' }), _jsx("span", { style: { color: 'grey', fontSize: 24 }, children: "The server was shutdown by you." })] }) }) }));
 }
 function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled, background }) {
     const [hovered, setHovered] = useState(false);
@@ -472,7 +556,7 @@ function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled,
             }
         }, onMouseEnter: () => setHovered(true), onMouseLeave: () => { setHovered(false); setPressed(false); }, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), style: {
             cursor: 'pointer',
-            borderRadius: '10px',
+            borderRadius: '50px',
             padding: '6px 10px',
             fontSize: '11px',
             display: 'flex',
@@ -484,9 +568,9 @@ function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled,
             background: disabled
                 ? '#bdbdbd'
                 : pressed
-                    ? `color-mix(in srgb, ${background} 12%, transparent)`
+                    ? `color-mix(in srgb, ${background} 85%, transparent)`
                     : hovered
-                        ? `color-mix(in srgb, ${background} 6%, transparent)`
+                        ? `color-mix(in srgb, ${background} 95%, transparent)`
                         : background ?? '#fff',
             transition: 'background 0.15s ease',
             ...style,
@@ -512,7 +596,9 @@ export default function DevPanel() {
     const [panelCustomOpen, setPanelCustomOpen] = useState(false);
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [shutdown, setShutdown] = useState(false);
-    const [shuttingDown, setShuttingDown] = useState(false);
+    const [shuttingDown, setShuttingDown] = useState(0);
+    const [restarting, setRestarting] = useState(0);
+    const [pausing, setPausing] = useState(0);
     const [packageSecurityOpen, setPackageSecurityOpen] = useState(false);
     const [highRiskDeps, setHighRiskDeps] = useState([]);
     const [mediumRiskDeps, setMediumRiskDeps] = useState([]);
@@ -551,6 +637,7 @@ export default function DevPanel() {
     const [tokenHidden, setTokenHidden] = useState(true);
     const [locationMode, setLocationMode] = useState("approximate");
     const NOTIFICATION_SLEEP_MS = 10 * 60 * 1000;
+    const [copied, setCopied] = useState(false);
     const notificationSleepingUntilRef = useRef(0);
     const [notificationSleepingUntil, setNotificationSleepingUntil] = useState(0);
     const sleepErrorNotifications = () => {
@@ -567,6 +654,9 @@ export default function DevPanel() {
     const [isAtBottom, setIsAtBottom] = useState(true);
     const [datRestrictionMissing, setDatRestrictionMissing] = useState(true);
     const [heapResult, setHeapResult] = useState("0 Bytes / 0 Bytes");
+    const [shuttingDownTimeout, setShuttingDownTimeout] = useState();
+    const [restartingTimeout, setRestartingTimeout] = useState();
+    const [pausingTimeout, setPausingTimeout] = useState();
     const cookie = {
         set: (k, v, sS = "Lax", s = true, mA = null) => {
             const cookieParts = [`${encodeURIComponent(k)}=${encodeURIComponent(v)}`, "path=/"];
@@ -615,6 +705,32 @@ export default function DevPanel() {
             consoleScrollRef.current.scrollTop = consoleScrollRef.current.scrollHeight;
         }
     }, [filteredLogs, isAtBottom]);
+    useEffect(() => {
+        if (pausing == 0) {
+            clearTimeout(pausingTimeout);
+            clearTimeout(pT);
+            pT = null;
+        }
+        if (restarting == 0) {
+            clearTimeout(restartingTimeout);
+            clearTimeout(rT);
+            rT = null;
+        }
+        if (shuttingDown == 0) {
+            clearTimeout(shuttingDownTimeout);
+            clearTimeout(sT);
+            sT = null;
+        }
+        async function run() {
+            if (pausing != 0)
+                setPausing(await increaseDots(pausing, setPausingTimeout, 1));
+            if (restarting != 0)
+                setRestarting(await increaseDots(restarting, setRestartingTimeout, 2));
+            if (shuttingDown != 0)
+                setShuttingDown(await increaseDots(shuttingDown, setShuttingDownTimeout, 3));
+        }
+        run();
+    }, [pausing, restarting, shuttingDown]);
     const loop = () => {
         frameCount.current++;
         requestAnimationFrame(loop);
@@ -776,20 +892,27 @@ export default function DevPanel() {
         }, 250);
     }, []);
     const restart = async () => {
+        setRestarting(1);
         await fetch('/__authtics_host_apis__/restart', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({})
         });
+        setRestarting(0);
+        clearTimeout(restartingTimeout);
+        setRestartingTimeout(undefined);
+        window.location.reload();
     };
     const shutDown = async () => {
-        setShuttingDown(true);
+        setShuttingDown(1);
         await fetch('/__authtics_host_apis__/shutdown', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({})
         });
         setShutdown(true);
+        clearTimeout(shuttingDownTimeout);
+        setShuttingDownTimeout(undefined);
     };
     useEffect(() => {
         const animationId = requestAnimationFrame(loop);
@@ -877,6 +1000,16 @@ export default function DevPanel() {
         }, Math.max(remaining, 0));
         return () => window.clearTimeout(timer);
     }, [notificationSleepingUntil]);
+    const handleCopy = async (text) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy text: ', err);
+        }
+    };
     useEffect(() => {
         installConsoleInterceptor();
         installNetworkInterceptor((f) => setNetworkFetches(prev => [...prev.slice(-499), f]), (f) => setNetworkFetches(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setEventSources(prev => [...prev.slice(-499), f]), (f) => setEventSources(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setWebSockets(prev => [...prev.slice(-499), f]), (f) => setWebSockets(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setResourcesFound(prev => [...prev.slice(-499), f]), (f) => setResourcesFound(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setResourcesFound(prev => prev.filter(p => p.id !== f.id)), (sent) => {
@@ -1016,6 +1149,7 @@ export default function DevPanel() {
         __();
     }, []);
     const pause_Resume_Users = async () => {
+        setPausing(1);
         if (usersPausedRealInfo) {
             const resp = await fetch('/__authtics_host_apis__/set-users-paused', {
                 method: 'POST',
@@ -1040,6 +1174,9 @@ export default function DevPanel() {
                 setUsersPausedRealInfo(true);
             }
         }
+        setPausing(0);
+        clearTimeout(pausingTimeout);
+        setPausingTimeout(undefined);
     };
     return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                     position: 'absolute',
@@ -1081,7 +1218,7 @@ export default function DevPanel() {
                                         alignItems: 'center',
                                         whiteSpace: 'nowrap',
                                         gap: '4px'
-                                    }, children: [_jsx(ShieldCheck, { size: 16, color: "#f472b6", style: { flexShrink: 0 } }), " Authtics Host"] }), _jsxs("p", { style: { color: 'red', fontSize: '12px' }, children: ["Error found (", selectedError, "/", errors.length, ")"] }), _jsx(PanelButton, { onClick: () => { setErrorBoxOpen(false); sleepErrorNotifications(); }, style: { marginLeft: 'auto', }, children: "Close" })] }), _jsxs("div", { style: {
+                                    }, children: [_jsx(ShieldCheck, { size: 16, color: "#f472b6", style: { flexShrink: 0 } }), " Authtics Host"] }), _jsxs("p", { style: { color: 'red', fontSize: '12px' }, children: ["Error found (", selectedError, "/", errors.length, ")"] }), _jsx(PanelButton, { onClick: () => { setErrorBoxOpen(false); sleepErrorNotifications(); setErrors([]); setSelectedError(1); }, style: { marginLeft: 'auto', }, children: "Close" })] }), _jsxs("div", { style: {
                                 padding: '6px 2px',
                                 display: 'flex',
                                 alignItems: 'center',
@@ -1173,10 +1310,10 @@ export default function DevPanel() {
                             maxHeight: drawerHeight,
                             opacity: open ? 1 : 0,
                             pointerEvents: open ? 'auto' : 'none',
-                            overflow: (!consoleOpen && !networkOpen && !aboutHostOpen && !webpageInfoOpen && !clientInfoOpen ? 'hidden auto' : 'hidden'),
                             borderRadius: '10px',
                             transition: 'max-height 0.35s ease, opacity 0.25s ease',
                             border: '1px solid #e6e3e3',
+                            overflow: (!consoleOpen && !packageSecurityOpen && !settingsOpen && !panelCustomOpen && !serverInfoOpen && !routeOpen && !networkOpen && !aboutHostOpen && !webpageInfoOpen && !clientInfoOpen ? 'hidden auto' : 'hidden'),
                         }, children: _jsxs("div", { style: {
                                 background: '#f7f7f7',
                                 borderRadius: '10px',
@@ -1193,7 +1330,7 @@ export default function DevPanel() {
                                                 display: 'flex',
                                                 alignItems: 'center',
                                                 gap: '6px',
-                                            }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), _jsxs("span", { style: { fontSize: '10px', color: '#aaa', marginLeft: '2px' }, children: [filteredLogs.length, " message", filteredLogs.length !== 1 ? 's' : '', " shown, ", logs.length, " in total"] }), _jsx(PanelButton, { onClick: () => setLogs([]), style: { color: '#aaa', marginLeft: 'auto' }, children: "Clear" })] }), _jsx("div", { style: {
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), _jsxs("span", { style: { fontSize: '10px', color: '#aaa', marginLeft: '2px' }, children: [logs.length, " log", logs.length !== 1 ? 's' : ''] }), _jsx(PanelButton, { onClick: () => setLogs([]), style: { color: '#aaa', marginLeft: 'auto' }, children: "Clear" })] }), _jsx("div", { style: {
                                                 display: 'flex',
                                                 gap: '4px',
                                                 padding: '5px 8px',
@@ -1242,7 +1379,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1300,7 +1437,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1309,16 +1446,17 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
+                                                        overflowWrap: 'break-word', wordBreak: 'break-word',
                                                     }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "File Path" }), _jsx("span", { style: { color: 'blue', fontFamily: 'monospace' }, children: path })] }), _jsxs("div", { style: {
                                                         display: 'flex',
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1334,7 +1472,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1343,7 +1481,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1352,7 +1490,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1361,7 +1499,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1377,7 +1515,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1386,7 +1524,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1395,7 +1533,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1406,12 +1544,12 @@ export default function DevPanel() {
                                                 display: 'flex',
                                                 alignItems: 'center',
                                                 gap: '6px',
-                                            }, children: [_jsxs(PanelButton, { onClick: () => setPanelCustomOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Cog, { size: 12, color: "#3b82f6" }), " Panel Configuration"] })] }), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Colors" }), _jsxs("div", { style: {
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setPanelCustomOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Cog, { size: 12, color: "#3b82f6" }), " Panel Customization"] })] }), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Colors" }), _jsxs("div", { style: {
                                                         display: 'flex',
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         alignItems: 'center'
                                                     }, children: [_jsxs("div", { style: { background: '#16a34a', width: '50px', height: '50px', borderRadius: '100px', cursor: 'pointer', alignItems: 'center', textAlign: 'center', justifyContent: 'center', flexDirection: 'column', display: 'flex', border: '1px solid #15803d', gap: '8px' }, onClick: () => {
@@ -1450,7 +1588,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1459,16 +1597,16 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
-                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Made By" }), _jsx("span", { style: { fontSize: '12px', color: 'orange' }, children: "bananakitssu" })] }), _jsxs("a", { style: {
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Made By" }), _jsx("span", { style: { fontSize: '12px', color: 'orange' }, children: "bananakitssu ( bananacool467 )" })] }), _jsxs("a", { style: {
                                                         display: 'flex',
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1486,7 +1624,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1495,7 +1633,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1504,7 +1642,7 @@ export default function DevPanel() {
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
                                                         background: '#fff',
-                                                        borderRadius: '10px',
+                                                        borderRadius: '50px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
@@ -1535,16 +1673,34 @@ export default function DevPanel() {
                                                 maxHeight: '260px',
                                                 flexDirection: 'column',
                                             }, children: [_jsxs("div", { style: {
-                                                        justifyContent: 'space-between',
+                                                        flexDirection: "column",
                                                         padding: '6px 10px',
                                                         background: '#fff',
                                                         borderRadius: '10px',
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
-                                                        display: 'flex'
+                                                        display: 'flex',
+                                                        gap: "8px"
                                                     }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333', position: 'relative' }, children: "DAT (Developer Access Token)" }), _jsxs("div", { style: { position: 'relative',
-                                                                display: 'inline-flex' }, children: [_jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: token }), tokenHidden && (_jsxs("div", { style: {
+                                                                display: 'inline-flex' }, children: [_jsxs("span", { style: { fontSize: '12px', color: 'blue', display: "flex", justifyContent: "space-between" }, children: [token, !tokenHidden && (_jsxs("div", { style: {
+                                                                                position: 'absolute',
+                                                                                marginTop: '-2.5px',
+                                                                                height: '100%',
+                                                                                backdropFilter: 'blur(10px)',
+                                                                                backgroundColor: 'rgba(255,255,255,0.3)',
+                                                                                cursor: 'pointer',
+                                                                                padding: '2.5px 2.5px',
+                                                                                borderRadius: '8px',
+                                                                                textAlign: 'center',
+                                                                                display: 'flex',
+                                                                                justifyContent: 'center',
+                                                                                alignItems: 'center',
+                                                                                gap: '4px',
+                                                                                paddingLeft: 5,
+                                                                                paddingRight: 5,
+                                                                                right: 0
+                                                                            }, onClick: () => setTokenHidden(true), children: [_jsx(EyeOff, { size: 12 }), "Hide"] }))] }), tokenHidden && (_jsxs("div", { style: {
                                                                         position: 'absolute',
                                                                         top: 0, left: 0,
                                                                         marginTop: '-2.5px',
@@ -1559,7 +1715,9 @@ export default function DevPanel() {
                                                                         justifyContent: 'center',
                                                                         alignItems: 'center',
                                                                         gap: '4px'
-                                                                    }, onClick: () => setTokenHidden(false), children: [_jsx(Eye, { size: 12 }), "Click to reveal"] }))] })] }), tokenLength !== 16 ? (_jsx(_Fragment, { children: _jsxs("div", { style: {
+                                                                    }, onClick: () => setTokenHidden(false), children: [_jsx(Eye, { size: 12 }), "Click to reveal"] }))] }), _jsxs(PanelButton, { onClick: () => {
+                                                                handleCopy(token || "");
+                                                            }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: '#00b2ed' }, children: [copied ? (_jsx(CopyCheck, { size: 16 })) : (_jsx(Copy, { size: 16 })), " ", copied ? "Copied!" : "Copy"] })] }), tokenLength !== 16 ? (_jsx(_Fragment, { children: _jsxs("div", { style: {
                                                             display: 'flex',
                                                             background: '#ba4e4e',
                                                             borderRadius: '10px',
@@ -1579,7 +1737,7 @@ export default function DevPanel() {
                                                             gap: '6px',
                                                             color: '#fff',
                                                             flexDirection: 'row',
-                                                        }, children: "Updates to security. Apps with version 0.0.1-beta.9 and over will now require DAT restriction to access remote features like restarting and shutting down the app." }) })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { restart(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#ba4e4e') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: "Restart App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Restarting the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { shutDown(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#ba4e4e') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: shuttingDown ? "Shutting Down App" : "Shut Down App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Shutting down the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { pause_Resume_Users(); }, fullWidth: true, style: { color: (datRestrictionMissing ? '#fff' : '#333'), justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#f2f2f2') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: usersPausedRealInfo ? "Resume Users" : "Pause Users" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Pausing users from accessing the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {}))] })] })) : (_jsx(_Fragment, {}))] }) }), datMatch ? (_jsxs("div", { onClick: () => setOpen(o => !o), style: {
+                                                        }, children: "Updates to security. Apps with version 0.0.1-beta.9 and over will now require DAT restriction to access remote features like restarting and shutting down the app." }) })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { restart(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#ba4e4e') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: _jsx("pre", { children: restarting ? String(finalizeDots("Restarting App", restarting)) : "Restart App" }) }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Restarting the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { shutDown(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#ba4e4e') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: _jsx("pre", { children: shuttingDown ? String(finalizeDots("Shutting Down App", shuttingDown)) : "Shut Down App" }) }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Shutting down the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { pause_Resume_Users(); }, fullWidth: true, style: { color: (datRestrictionMissing ? '#fff' : '#333'), justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#f2f2f2') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: _jsx("pre", { children: pausing ? String(finalizeDots("Pausing", pausing)) : usersPausedRealInfo ? "Resume Users" : "Pause Users" }) }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Pausing users from accessing the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {}))] })] })) : (_jsx(_Fragment, {}))] }) }), datMatch ? (_jsxs("div", { onClick: () => setOpen(o => !o), style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@bananacool467/authtics-host",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Authtics Host, A Next.js-inspired web framework for Node.js and React with TypeScript and JSX support.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "sideEffects": false,
   "bin": {
-    "host": "dist/cli.js"
+    "hostjs": "./bin/hostjs.js"
   },
   "exports": {
     ".": "./dist/index.js"