runlab 1.1.0 → 1.3.1

package/dist/app/app.js

@@ -151,12 +151,14 @@ export function setViewActive(status = false){
   if(status){
     document.getElementById("runlab-view").style.display = "block";
     viewBtn.style.background = "#303030";
+    viewBtn.style.borderRadius = "8px";
     viewBtn.style.color = "#fff";
   }
 
   if (!status){
     document.getElementById("runlab-view").style.display = "none";
     editorBtn.style.background = "#303030";
+    editorBtn.style.borderRadius = "8px";
     editorBtn.style.color = "#fff";
   }
 }
@@ -259,4 +261,12 @@ export function getFeExecutables() {
 
 export function getFileNode(file) {
   return feNode.getFileNode(file);
+}
+
+export function getNodeFromPath(path, currentPath) {
+  return feNode.getNodeFromPath(path, currentPath);
+}
+
+export function setMoveNode(node, destNode) {
+  feNode.setMoveNode(node, destNode);
 }

package/dist/app/assets/fileIconSvg.js

@@ -0,0 +1,11 @@
+export const standardFileIcon = `📄`;
+
+export const jsonIcon = `<svg width="64px" height="64px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fbc02d"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>language_json</title> <rect width="24" height="24" fill="none"></rect> <path d="M5,3H7V5H5v5a2,2,0,0,1-2,2,2,2,0,0,1,2,2v5H7v2H5c-1.07-.27-2-.9-2-2V15a2,2,0,0,0-2-2H0V11H1A2,2,0,0,0,3,9V5A2,2,0,0,1,5,3M19,3a2,2,0,0,1,2,2V9a2,2,0,0,0,2,2h1v2H23a2,2,0,0,0-2,2v4a2,2,0,0,1-2,2H17V19h2V14a2,2,0,0,1,2-2,2,2,0,0,1-2-2V5H17V3h2M12,15a1,1,0,1,1-1,1,1,1,0,0,1,1-1M8,15a1,1,0,1,1-1,1,1,1,0,0,1,1-1m8,0a1,1,0,1,1-1,1A1,1,0,0,1,16,15Z"></path> </g></svg>`;
+export const htmlIcon = `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M6 28L4 3H28L26 28L16 31L6 28Z" fill="#E44D26"></path> <path d="M26 5H16V29.5L24 27L26 5Z" fill="#F16529"></path> <path d="M9.5 17.5L8.5 8H24L23.5 11H11.5L12 14.5H23L22 24L16 26L10 24L9.5 19H12.5L13 21.5L16 22.5L19 21.5L19.5 17.5H9.5Z" fill="white"></path> </g></svg>`;
+export const cssIcon = `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M6 28L4 3H28L26 28L16 31L6 28Z" fill="#1172B8"></path> <path d="M26 5H16V29.5L24 27L26 5Z" fill="#33AADD"></path> <path d="M19.5 17.5H9.5L9 14L17 11.5H9L8.5 8.5H24L23.5 12L17 14.5H23L22 24L16 26L10 24L9.5 19H12.5L13 21.5L16 22.5L19 21.5L19.5 17.5Z" fill="white"></path> </g></svg>`;
+
+
+export const javascriptIcon = `<svg xmlns="http://www.w3.org/2000/svg" aria-label="JavaScript" role="img" viewBox="0 0 512 512" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><rect width="512" height="512" rx="15%" fill="#f7df1e"></rect><path d="M324 370c10 17 24 29 47 29c20 0 33-10 33 -24c0-16 -13 -22 -35 -32l-12-5c-35-15 -58 -33 -58 -72c0-36 27 -64 70 -64c31 0 53 11 68 39l-37 24c-8-15 -17 -21 -31 -21c-14 0-23 9 -23 21c0 14 9 20 30 29l12 5c41 18 64 35 64 76c0 43-34 67 -80 67c-45 0-74 -21 -88 -49zm-170 4c8 13 14 25 31 25c16 0 26-6 26 -30V203h48v164c0 50-29 72 -72 72c-39 0-61 -20 -72 -44z"></path></g></svg>`;
+export const typescriptIcon = `<svg xmlns="http://www.w3.org/2000/svg" aria-label="TypeScript" role="img" viewBox="0 0 512 512" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><rect width="512" height="512" rx="15%" fill="#3178c6"></rect><path fill="#ffffff" d="m233 284h64v-41H118v41h64v183h51zm84 173c8.1 4.2 18 7.3 29 9.4s23 3.1 35 3.1c12 0 23-1.1 34-3.4c11-2.3 20-6.1 28-11c8.1-5.3 15-12 19-21s7.1-19 7.1-32c0-9.1-1.4-17-4.1-24s-6.6-13-12-18c-5.1-5.3-11-10-18-14s-15-8.2-24-12c-6.6-2.7-12-5.3-18-7.9c-5.2-2.6-9.7-5.2-13-7.8c-3.7-2.7-6.5-5.5-8.5-8.4c-2-3-3-6.3-3-10c0-3.4.89-6.5 2.7-9.3s4.3-5.1 7.5-7.1c3.2-2 7.2-3.5 12-4.6c4.7-1.1 9.9-1.6 16-1.6c4.2 0 8.6.31 13 .94c4.6.63 9.3 1.6 14 2.9c4.7 1.3 9.3 2.9 14 4.9c4.4 2 8.5 4.3 12 6.9v-47c-7.6-2.9-16-5.1-25-6.5s-19-2.1-31-2.1c-12 0-23 1.3-34 3.8s-20 6.5-28 12c-8.1 5.4-14 12-19 21c-4.7 8.4-7 18-7 30c0 15 4.3 28 13 38c8.6 11 22 19 39 27c6.9 2.8 13 5.6 19 8.3s11 5.5 15 8.4c4.3 2.9 7.7 6.1 10 9.5c2.5 3.4 3.8 7.4 3.8 12c0 3.2-.78 6.2-2.3 9s-3.9 5.2-7.1 7.2s-7.1 3.6-12 4.8c-4.7 1.1-10 1.7-17 1.7c-11 0-22-1.9-32-5.7c-11-3.8-21-9.5-28.1-15.44z"></path></g></svg>`;
+export const pythonIcon = `<svg width="64px" height="64px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0164 2C10.8193 2 9.03825 3.72453 9.03825 5.85185V8.51852H15.9235V9.25926H5.97814C3.78107 9.25926 2 10.9838 2 13.1111L2 18.8889C2 21.0162 3.78107 22.7407 5.97814 22.7407H8.27322V19.4815C8.27322 17.3542 10.0543 15.6296 12.2514 15.6296H19.5956C21.4547 15.6296 22.9617 14.1704 22.9617 12.3704V5.85185C22.9617 3.72453 21.1807 2 18.9836 2H13.0164ZM12.0984 6.74074C12.8589 6.74074 13.4754 6.14378 13.4754 5.40741C13.4754 4.67103 12.8589 4.07407 12.0984 4.07407C11.3378 4.07407 10.7213 4.67103 10.7213 5.40741C10.7213 6.14378 11.3378 6.74074 12.0984 6.74074Z" fill="url(#paint0_linear_87_8204)"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M18.9834 30C21.1805 30 22.9616 28.2755 22.9616 26.1482V23.4815L16.0763 23.4815L16.0763 22.7408L26.0217 22.7408C28.2188 22.7408 29.9998 21.0162 29.9998 18.8889V13.1111C29.9998 10.9838 28.2188 9.25928 26.0217 9.25928L23.7266 9.25928V12.5185C23.7266 14.6459 21.9455 16.3704 19.7485 16.3704L12.4042 16.3704C10.5451 16.3704 9.03809 17.8296 9.03809 19.6296L9.03809 26.1482C9.03809 28.2755 10.8192 30 13.0162 30H18.9834ZM19.9015 25.2593C19.1409 25.2593 18.5244 25.8562 18.5244 26.5926C18.5244 27.329 19.1409 27.9259 19.9015 27.9259C20.662 27.9259 21.2785 27.329 21.2785 26.5926C21.2785 25.8562 20.662 25.2593 19.9015 25.2593Z" fill="url(#paint1_linear_87_8204)"></path> <defs> <linearGradient id="paint0_linear_87_8204" x1="12.4809" y1="2" x2="12.4809" y2="22.7407" gradientUnits="userSpaceOnUse"> <stop stop-color="#327EBD"></stop> <stop offset="1" stop-color="#1565A7"></stop> </linearGradient> <linearGradient id="paint1_linear_87_8204" x1="19.519" y1="9.25928" x2="19.519" y2="30" gradientUnits="userSpaceOnUse"> <stop stop-color="#FFDA4B"></stop> <stop offset="1" stop-color="#F9C600"></stop> </linearGradient> </defs> </g></svg>`;
+

package/dist/app/assets/navbarIconSvg.js

@@ -0,0 +1,24 @@
+export const closeIcon =  `<svg width="16" height="16" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#ffffff" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"></path></g></svg>`;
+export const minimizeIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 4C23 2.34315 21.6569 1 20 1H8C6.34315 1 5 2.34315 5 4V5H4C2.34315 5 1 6.34315 1 8V20C1 21.6569 2.34315 23 4 23H16C17.6569 23 19 21.6569 19 20V19H20C21.6569 19 23 17.6569 23 16V4ZM19 17H20C20.5523 17 21 16.5523 21 16V4C21 3.44772 20.5523 3 20 3H8C7.44772 3 7 3.44772 7 4V5H16C17.6569 5 19 6.34315 19 8V17ZM16 7C16.5523 7 17 7.44772 17 8V20C17 20.5523 16.5523 21 16 21H4C3.44772 21 3 20.5523 3 20V8C3 7.44772 3.44772 7 4 7H16Z" fill="#FFFFFF"/>
+</svg>`;
+export const runIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+xmlns="http://www.w3.org/2000/svg">
+<path
+d="M16.6582 9.28638C18.098 10.1862 18.8178 10.6361 19.0647 11.2122C19.2803 11.7152 19.2803 12.2847 19.0647 12.7878C18.8178 13.3638 18.098 13.8137 16.6582 14.7136L9.896 18.94C8.29805 19.9387 7.49907 20.4381 6.83973 20.385C6.26501 20.3388 5.73818 20.0469 5.3944 19.584C5 19.053 5 18.1108 5 16.2264V7.77357C5 5.88919 5 4.94701 5.3944 4.41598C5.73818 3.9531 6.26501 3.66111 6.83973 3.6149C7.49907 3.5619 8.29805 4.06126 9.896 5.05998L16.6582 9.28638Z"
+stroke="#ffffff"
+stroke-width="2"
+stroke-linejoin="round"
+/>
+</svg>`;
+export const helpIcon = `<svg
+xmlns="http://www.w3.org/2000/svg"
+viewBox="0 0 24 24"
+width="16"
+height="16"
+fill="none"
+>
+<path d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM3.00683 12C3.00683 16.9668 7.03321 20.9932 12 20.9932C16.9668 20.9932 20.9932 16.9668 20.9932 12C20.9932 7.03321 16.9668 3.00683 12 3.00683C7.03321 3.00683 3.00683 7.03321 3.00683 12Z" fill="#FFFFFF"/>
+<path d="M13.5 18C13.5 18.8284 12.8284 19.5 12 19.5C11.1716 19.5 10.5 18.8284 10.5 18C10.5 17.1716 11.1716 16.5 12 16.5C12.8284 16.5 13.5 17.1716 13.5 18Z" fill="#FFFFFF"/>
+<path d="M11 12V14C11 14 11 15 12 15C13 15 13 14 13 14V12C13 12 13.4792 11.8629 13.6629 11.7883C13.6629 11.7883 13.9969 11.6691 14.2307 11.4896C14.4646 11.3102 14.6761 11.097 14.8654 10.8503C15.0658 10.6035 15.2217 10.3175 15.333 9.99221C15.4443 9.66693 15.5 9.4038 15.5 9C15.5 8.32701 15.3497 7.63675 15.0491 7.132C14.7596 6.61604 14.3476 6.21786 13.8132 5.93745C13.2788 5.64582 12.6553 5.5 11.9427 5.5C11.4974 5.5 11.1021 5.55608 10.757 5.66825C10.4118 5.7692 10.1057 5.9094 9.83844 6.08887C9.58236 6.25712 9.36525 6.4478 9.18711 6.66091C9.02011 6.86281 8.8865 7.0591 8.78629 7.24978C8.68609 7.44046 8.61929 7.6087 8.58589 7.75452C8.51908 7.96763 8.49125 8.14149 8.50238 8.27609C8.52465 8.41069 8.59145 8.52285 8.70279 8.61258C8.81413 8.70231 8.9867 8.79765 9.22051 8.8986C9.46546 8.97712 9.65473 9.00516 9.78834 8.98273C9.93308 8.96029 10.05 8.89299 10.1391 8.78083C10.1391 8.78083 10.6138 8.10569 10.7474 7.97109C10.8922 7.82528 11.0703 7.71312 11.2819 7.6346C11.4934 7.54487 11.7328 7.5 12 7.5C12.579 7.5 13.0076 7.64021 13.286 7.92062C13.5754 8.18982 13.6629 8.41629 13.6629 8.93225C13.6629 9.27996 13.6017 9.56038 13.4792 9.77349C13.3567 9.9866 13.1953 10.1605 12.9949 10.2951C12.9949 10.2951 12.7227 10.3991 12.5 10.5C12.2885 10.5897 11.9001 10.7381 11.6997 10.8503C11.5104 10.9512 11.4043 11.0573 11.2819 11.2144C11.1594 11.3714 11 11.7308 11 12Z" fill="#FFFFFF"/>
+</svg>`;

package/dist/app/core/navbar.js

@@ -1,6 +1,7 @@
 import { sendCode } from "../../index.js";
 import { setViewActive } from "../app.js";
 import { getCurrentCode, getCurrentExtension } from "./editor.js";
+import { closeIcon, minimizeIcon, runIcon, helpIcon } from "../assets/navbarIconSvg.js";
 import Swal from "sweetalert2";
 
 export function createNavbar(parentId) {
@@ -34,11 +35,9 @@ export function createNavbar(parentId) {
     });
     ul.appendChild(leftGroup);
 
-    const menuItems = ["✕", "🗗","Run", "Help"];
+    const menuItems = ["close", "minimize","help", "run"];
     menuItems.forEach(item => {
         const li = document.createElement("li");
-        li.textContent = item;
-
         Object.assign(li.style, {
             marginRight: "15px",
             marginLeft: "15px",
@@ -46,14 +45,16 @@ export function createNavbar(parentId) {
             cursor: "pointer",
             color: "#fff"
         });
-        if (item === "✕") {
+        if (item === "close") {
+            li.innerHTML = closeIcon;
             li.addEventListener("click", () => {
                 const app = document.getElementById("runlab-custom-div");
                 app.style.display = "none";
                 document.getElementById("runlab-custom-btn").textContent = "Show App";
             });
         }
-        if (item === "🗗"){
+        if (item === "minimize") {
+            li.innerHTML = minimizeIcon;
             li.addEventListener("click", () => {
                 const container = document.getElementById("runlab-container");
                 let isMaximized = container.style.height === "100vh"? false: true;
@@ -76,13 +77,15 @@ export function createNavbar(parentId) {
                 }
             });
         }
-        if (item === "Run") {
+        if (item === "run") {
+            li.innerHTML = runIcon;
             li.addEventListener("click", () => {
                 sendCode(getCurrentCode(),getCurrentExtension());
                 setViewActive(true);
             });
         }
-        if (item === "Help") {
+        if (item === "help") {
+            li.innerHTML = helpIcon;
             li.addEventListener("click", () => {
                 Swal.fire({
                     title: "RunLab Help",
@@ -103,7 +106,9 @@ export function createNavbar(parentId) {
                         <li><span style="font-weight: bold;">pwd</span>: Print current directory</li>
                         <li><span style="font-weight: bold;">run</span>: Run a file (e.g., run script.js)</li>
                         <li><span style="font-weight: bold;">help | h</span>: Show help message</li>
+                        <li><span style="font-weight: bold;">mv</span>: Move a file or folder (e.g., mv folder1/script.js folder2)</li>
                     </ul>
+                    <p>If the path starts with / it will be considered absolute (from root), otherwise it will be considered relative to the current path.</p>
                     `,
                     width: 700,
                     confirmButtonText: "Got it!"
@@ -127,7 +132,8 @@ export function createNavbar(parentId) {
         padding: "10px 14px",
         fontWeight: "600",
         color: "#FFDE21",
-        whiteSpace: "nowrap"
+        whiteSpace: "nowrap",
+        letterSpacing: "2px",
     });
 
     ul.appendChild(activeFileName);
@@ -142,6 +148,7 @@ export function createNavbar(parentId) {
     const toggle = document.createElement("div");
     Object.assign(toggle.style, {
         display: "grid",
+        padding: "2px",
         gridTemplateColumns: "1fr 1fr",
         width: "180px",
         height: "28px",

package/dist/app/fileExplorer/FileExplorer.js

@@ -3,6 +3,7 @@ import { File } from "./File.js";
 import { updateEditorContentById, setActiveFile } from "../core/editor.js";
 import Swal from "sweetalert2";
 import { setEditorActive, setViewActive } from "../app.js";
+import { standardFileIcon, jsonIcon, htmlIcon, cssIcon, javascriptIcon, typescriptIcon, pythonIcon } from "../assets/fileIconSvg.js";
 
 export class FileExplorer {
     constructor(parentId) {
@@ -11,6 +12,7 @@ export class FileExplorer {
         this.execFiles = [];
         this.filesPath = [];
         this.path = [];
+        this.currentNodeDragged = null;
         this.render();
     }
 
@@ -42,6 +44,106 @@ export class FileExplorer {
         this.execFiles = files;
     }
 
+    getNodeFromPath(path, currentPath) {
+        
+        if (path === "/") {
+            return this.root;
+        }
+
+        if (path.includes("..")) {
+            return null;
+        }
+        // Absolute path
+        if (path.startsWith("/")) {
+            path = path.slice(1);
+            let currentNode = this.root;
+
+            if (!path.includes("/")) {
+                if (path.includes(".")) { //File
+                    const [name, ext] = path.split(".");
+                    return currentNode.children.find(c => c.name === name && c.ext === ext);
+                }
+                return currentNode.children.find(c => c.name === path);//Folder
+            }
+
+            let pathList = path.split("/").filter(p => p);
+    
+            for (let i = 0; i < pathList.length; i++) {
+                const part = pathList[i];
+    
+                if (part.includes(".")) {
+                    const [name, ext] = part.split(".");
+                    const nextNode = currentNode.children.find(c => c.name === name && c.ext === ext);
+                    if (!nextNode) return null;
+                    currentNode = nextNode;
+                }
+    
+                if (!part.includes(".")) {
+                    const nextNode = currentNode.children.find(c => c.name === part && !c.ext);
+                    if (!nextNode) return null;
+                    currentNode = nextNode;
+                }
+                
+            }
+            return currentNode;
+
+        }
+        // Relative path
+        if (!path.startsWith("/")) {
+            let currentNode = this.root;
+
+            if (currentPath.length > 1) {
+                for (let i = 1; i < currentPath.length; i++) {
+                    const part = currentPath[i];
+                    const nextNode = currentNode.children.find(c => c.name === part && !c.ext);
+                    if (!nextNode) return null;
+                    currentNode = nextNode;
+                }
+            }
+
+            if (!path.includes("/")) {
+                if (path.includes(".")) { //File
+                    const [name, ext] = path.split(".");
+                    return currentNode.children.find(c => c.name === name && c.ext === ext);
+                }
+                return currentNode.children.find(c => c.name === path);//Folder
+            }
+
+            let pathList = path.split("/").filter(p => p);
+
+            for (let i = 0; i < pathList.length; i++) {
+                const part = pathList[i];
+                
+                if (part.includes(".")) {
+                    const [name, ext] = part.split(".");
+                    const nextNode = currentNode.children.find(c => c.name === name && c.ext === ext);
+                    if (!nextNode) return null;
+                    currentNode = nextNode;
+                }
+    
+                if (!part.includes(".")) {
+                    const nextNode = currentNode.children.find(c => c.name === part && !c.ext);
+                    if (!nextNode) return null;
+                    currentNode = nextNode;
+                }
+                
+            }
+            return currentNode;
+
+        }
+
+    }
+
+    setMoveNode(node, destNode) {
+        if (node === this.root) return;
+        if (node instanceof File) {
+            this.moveFile(node, destNode);
+        }
+        if (node instanceof Folder) {
+            this.moveFolder(node, destNode);
+        }
+    }
+
     /* =========================
        RENDER
     ========================== */
@@ -61,6 +163,22 @@ export class FileExplorer {
             this.showRootMenu(e);
         };
 
+        rootDiv.addEventListener("dragover", (e) => {
+            if (e.target !== rootDiv) {
+                return;
+            }
+            rootDiv.style.backgroundColor = "#084475a4";
+            e.preventDefault();
+        });
+        rootDiv.addEventListener("dragleave", (e) => {
+            rootDiv.style.backgroundColor = "transparent";
+        });
+        rootDiv.addEventListener("drop", (e) => {
+            rootDiv.style.backgroundColor = "transparent";
+            e.preventDefault();
+            this.setMoveNode(this.currentNodeDragged, this.root);
+            this.currentNodeDragged = null;
+        });
 
         this.renderFolder(this.root, rootDiv);
 
@@ -70,6 +188,8 @@ export class FileExplorer {
     renderFolder(folder, parentUl) {
         folder.children.forEach(node => {
             if (node instanceof Folder) {
+
+                /* ============ BUTTON =============== */
                 const btn = document.createElement("button");
                 btn.textContent = `📁 ${node.name}`;
                 btn.style.width = "100%";
@@ -80,18 +200,18 @@ export class FileExplorer {
                 btn.style.paddingTop = "8px";
                 btn.style.paddingBottom = "8px";
                 btn.style.cursor = "pointer";
-                
-                
-
-                btn.onmouseover = () => btn.style.backgroundColor = "#555";
-                btn.onmouseout = () => btn.style.backgroundColor = "transparent";
-
+                btn.draggable = true;
+                /* ============ UL =============== */
                 const ul = document.createElement("ul"); 
                 ul.style.display = "none";
                 ul.style.listStyle = "none";
                 ul.style.margin = "0";
                 ul.style.padding = "0 0 0 24px";
-
+                /* ============ DIV =============== */
+                const div = document.createElement("div");
+                /* ============ EVENTS =============== */
+                btn.onmouseover = () => btn.style.backgroundColor = "#555";
+                btn.onmouseout = () => btn.style.backgroundColor = "transparent";
 
                 btn.onclick = () => this.toggle(ul);
                 btn.oncontextmenu = e => {
@@ -100,13 +220,69 @@ export class FileExplorer {
                     this.showFolderMenu(e, node);
                 };
 
-                parentUl.append(btn, ul);
+                btn.addEventListener("dragstart", (e) => {
+
+                    this.currentNodeDragged = node;
+                });
+                btn.addEventListener("dragover", (e) => {
+                    if (e.target !== btn) {
+                        return;
+                    }
+                    div.style.backgroundColor = "#084475a4";
+                    e.preventDefault();
+                });
+                btn.addEventListener("dragleave", (e) => {
+                    div.style.backgroundColor = "transparent";
+                });
+                btn.addEventListener("drop", (e) => {
+                    div.style.backgroundColor = "transparent";
+                    e.preventDefault();
+                    this.setMoveNode(this.currentNodeDragged, node);
+                    this.currentNodeDragged = null;
+                });
+
+                ul.addEventListener("dragover", (e) => {
+                    if (e.target !== ul) {
+                        return;
+                    }
+                    div.style.backgroundColor = "#084475a4";
+                    e.preventDefault();
+                });
+                ul.addEventListener("dragleave", (e) => {
+                    div.style.backgroundColor = "transparent";
+                });
+                ul.addEventListener("drop", (e) => {
+                    div.style.backgroundColor = "transparent";
+                    e.preventDefault();
+                    this.setMoveNode(this.currentNodeDragged, node);
+                    this.currentNodeDragged = null;
+                });
+
+                /* ============ APPEND =============== */
+                div.append(btn, ul);
+                parentUl.append(div);
                 this.renderFolder(node, ul);
             }
 
             if (node instanceof File) {
+                /* ============ LI =============== */
                 const li = document.createElement("li");
-                li.textContent = `📄 ${node.name}.${node.ext}`;
+                const icon = this.getSvgIcon(node.ext);
+                li.innerHTML = `
+                <div style="display:flex; align-items:center; gap:4px;">
+                    <div style="
+                        width:16px;
+                        height:16px;
+                        display:flex;
+                        align-items:center;
+                        justify-content:center;
+                        flex-shrink:0;
+                    ">
+                        ${icon}
+                    </div>
+                    <span>${node.name}.${node.ext}</span>
+                </div>
+                `;
                 li.style.width = "100%";
                 li.style.textAlign = "left";
                 li.style.border = "none";
@@ -114,9 +290,10 @@ export class FileExplorer {
                 li.style.color = "white";
                 li.style.paddingTop = "8px";
                 li.style.paddingBottom = "8px";
+                li.style.paddingLeft = "8px";
                 li.style.cursor = "pointer";
-                
-
+                li.draggable = true;
+                /* ============ EVENTS =============== */
                 li.onclick = () => {
                     setActiveFile(node);
                     setViewActive(false);
@@ -130,6 +307,26 @@ export class FileExplorer {
                     this.showFileMenu(e, node);
                 };
 
+                li.addEventListener("dragstart", (e) => {
+                    this.currentNodeDragged = node;
+                });
+                li.addEventListener("dragover", (e) => {
+                    if (e.target !== li) {
+                        return;
+                    }
+                    parentUl.parentElement.style.backgroundColor = "#084475a4";
+                    e.preventDefault();
+                });
+                li.addEventListener("dragleave", (e) => {
+                    parentUl.parentElement.style.backgroundColor = "transparent";
+                });
+                li.addEventListener("drop", (e) => {
+                    parentUl.parentElement.style.backgroundColor = "transparent";
+                    e.preventDefault();
+                    this.setMoveNode(this.currentNodeDragged, node.parent);
+                    this.currentNodeDragged = null;
+                });
+                /* ============ APPEND =============== */
                 parentUl.appendChild(li);
                 this.filesPath.push({ name: `${node.name}.${node.ext}`, path: node.parent.path });
 
@@ -168,6 +365,29 @@ export class FileExplorer {
         this.render();
     }
 
+    moveFile(node, newParent) {
+        if (newParent === node) return;
+        if (newParent instanceof File) return;
+        if (node === this.root) return;
+        const oldParent = node.parent;
+        oldParent.children = oldParent.children.filter(c => c !== node);
+        newParent.children.push(node);
+        node.parent = newParent;
+        this.render();
+    }
+
+    moveFolder(node, newParent) {
+        if (newParent === node) return;
+        if (newParent instanceof File) return;
+        if (node === this.root) return;
+        const oldParent = node.parent;
+        oldParent.children = oldParent.children.filter(c => c !== node);
+        newParent.children.push(node);
+        node.parent = newParent;
+        node.path = [...newParent.path, node.name];
+        this.render();
+    }
+
     /* =========================
        MENUS
     ========================== */
@@ -402,4 +622,23 @@ export class FileExplorer {
 
         document.body.appendChild(menu);
     }
+
+    getSvgIcon(ext) {
+        switch (ext) {
+            case 'json':
+                return jsonIcon;
+            case 'html':
+                return htmlIcon;
+            case 'css':
+                return cssIcon;
+            case 'js':
+                return javascriptIcon;
+            case 'ts':
+                return typescriptIcon;
+            case 'py':
+                return pythonIcon;
+            default:
+                return standardFileIcon;
+        }
+    }
 }

package/dist/app/terminal/commands.js

@@ -1,6 +1,6 @@
 import { getCurrentDir, getCurrentPath, setCurrentDir, setCurrentPath } from "./terminal.js"
 import { sendCode } from "../../index.js";
-import { setViewActive, getFeExecutables, getFileNode } from "../app.js";
+import { setViewActive, getFeExecutables, getFileNode, getNodeFromPath, setMoveNode } from "../app.js";
 
 export function print(text = "") {
     const div = document.createElement("div")
@@ -114,4 +114,33 @@ export function handleRun(cmd) {
     const fileNode = getFileNode(file)
     sendCode(fileNode.content, fileNode.ext)
     setViewActive(true)
+}
+
+export function handleMove(cmd) {
+
+    if (cmd.split(" ").length !== 3) {
+        print("Invalid move command format! Use: mv <source> <destination>")
+        return
+    }
+
+    const nodePath = cmd.split(" ")[1];
+    const destPath = cmd.split(" ")[2];
+
+    const currentPath = getCurrentPath();
+
+    const node = getNodeFromPath(nodePath, currentPath);
+    const destNode = getNodeFromPath(destPath, currentPath);
+
+    if (!node) {
+        print("File or folder to be moved not found!")
+        return
+    }
+
+    if (!destNode) {
+        print("Folder to move into not found!")
+        return
+    }
+
+    setMoveNode(node, destNode)
+
 }

package/dist/app/terminal/terminal.js

@@ -1,4 +1,4 @@
-import {print, handleLS, handleClear, handleChangeDirectory, handleRun} from "./commands.js"
+import {print, handleLS, handleClear, handleChangeDirectory, handleRun, handleMove} from "./commands.js"
 
 export let currentDirNode = null
 export let currentPath = []
@@ -120,7 +120,13 @@ function handleCommand(cmd) {
         print("- pwd: Print current directory")
         print("- run: Run a file (e.g., run script.js)")
         print("- help | h: Show this help message")
-    } else if (trimmed !== "") {
+        print("- mv: Move a file or folder (e.g., mv <source> <destination>)")
+        print("  If the path starts with / it will be considered absolute (from root), otherwise it will be considered relative to the current path.")
+
+    } else if (split[0] === "mv") { 
+        handleMove(trimmed)
+
+    }else if (trimmed !== "") {
         print(`command not found: ${trimmed}`)
     }
 }

package/dist/index.js

@@ -1,6 +1,8 @@
 import { generateContainer } from "./app/app.js";
 import { appendViewContent } from "./app/app.js";
-import { ReactRunlabButton } from "./reactButton.jsx";
+import { setCurrentDir } from "./app/terminal/terminal.js";
+import { ReactRunlabButton } from "./installButtons/reactButton.jsx";
+import { generateHash } from "./security/hashing.js";
 
 let runtimeUrl = "";
 function setRuntimeUrl(url) {
@@ -10,6 +12,21 @@ function getRuntimeUrl() {
   return runtimeUrl;
 }
 
+let currentAuthHash = "";
+function setAuthHash(hash) {
+  currentAuthHash = hash;
+}
+function getAuthHash() {
+  return currentAuthHash;
+}
+
+export async function RunlabSignature(secretKey) {
+  const timestamp = Math.floor(Date.now() / 10000).toString();
+  const hash = await generateHash(secretKey, timestamp);
+  setAuthHash(hash);
+  return;
+}
+
 export async function run({
   parentId,
   runtimeUrl = ""
@@ -27,10 +44,13 @@ export async function sendCode(code, ext = "txt") {
   }
 
   try {
+    const timestamp = Date.now().toString();
     const response = await fetch(getRuntimeUrl(), {
       method: "POST",
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        "X-Timestamp": timestamp,
+        "X-Signature": await getSignature(timestamp)
       },
       body: JSON.stringify({ code, ext })
     });

package/dist/{reactButton.jsx → installButtons/reactButton.jsx}

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { run } from "./index.js";
+import { run } from "../index.js";
 
 export function ReactRunlabButton(props = { runConfig: {} }) {
   const { runConfig } = props;

package/dist/security/hashing.js

@@ -0,0 +1,8 @@
+export async function generateHash(secretKey, timestamp) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(secretKey + timestamp);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, "0")).join("");
+  return hashHex;
+}

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "runlab",
-  "version": "1.1.0",
+  "version": "1.3.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
 
   "exports": {
-    ".": "./dist/index.js",
-    "./wasm": "./dist/runlab.wasm",
-    "./wasm_exec": "./dist/wasm_exec.js"
+    ".": "./dist/index.js"
   },
 
   "files": ["dist/**/*", "LICENSE"],