js_lis 2.0.5 → 2.0.7

package/VirtualKeyboard.js

@@ -1,4 +1,5 @@
 import { layouts } from "./layouts.js";
+import { injectCSS } from "./style/kbstyle.js";
 
 export class VirtualKeyboard {
   constructor() {
@@ -13,34 +14,16 @@ export class VirtualKeyboard {
     this.shiftActive = false;
     this.capsLockActive = false;
     this.isScrambled = false;
-    this.isVirtualKeyboardActive = false; // Flag to track VK operations
+    this.isVirtualKeyboardActive = false; 
 
-    // Maintain plaintext buffers per input (not stored in DOM). DOM will store only encrypted text.
     this.inputPlaintextBuffers = new WeakMap();
-
-    // Security state
-    this.security = {
-      detectorStatus: "idle",
-      suspiciousEvents: [],
-      observer: null,
-      addSuspicious(event) {
-        try {
-          this.suspiciousEvents.push({
-            time: new Date().toISOString(),
-            ...event,
-          });
-          console.warn("[VK Security] Suspicious activity detected:", event);
-        } catch (_) {}
-      },
-    };
-
+    
     this.initialize();
   }
 
   async initialize() {
     try {
-      this.applyCSPReportOnly();
-      this.startKeyloggerDetector();
+      injectCSS();
       this.render();
       this.initializeInputListeners();
       console.log("VirtualKeyboard initialized successfully.");
@@ -49,113 +32,6 @@ export class VirtualKeyboard {
     }
   }
 
-  // Inject CSP Report-Only meta for runtime visibility into potential violations
-  applyCSPReportOnly() {
-    // Disabled: Report-Only CSP must be set via HTTP headers. See server middleware in app.js.
-    return;
-  }
-
-  // Start MutationObserver and limited listener-hook to detect potential keylogger injections
-  startKeyloggerDetector() {
-    try {
-      const allowlistedScriptHosts = new Set([
-        window.location.host,
-        "cdnjs.cloudflare.com",
-      ]);
-
-      const isSuspiciousScript = (node) => {
-        try {
-          if (!(node instanceof HTMLScriptElement)) return false;
-          const src = node.getAttribute("src") || "";
-          if (!src) {
-            const code = (node.textContent || "").toLowerCase();
-            return /addEventListener\(['\"]key|document\.onkey|keylogger|send\(|fetch\(|xmlhttprequest/i.test(code);
-          }
-          const url = new URL(src, window.location.href);
-          return !Array.from(allowlistedScriptHosts).some((h) => url.host.endsWith(h));
-        } catch (_) {
-          return true;
-        }
-      };
-
-      const isSuspiciousElement = (node) => {
-        try {
-          if (!(node instanceof Element)) return false;
-          const hasKeyHandlers = node.hasAttribute("onkeydown") || node.hasAttribute("onkeypress") || node.hasAttribute("onkeyup");
-          const hiddenFrame = node.tagName === "IFRAME" && (node.getAttribute("sandbox") === null || node.getAttribute("srcdoc") !== null);
-          return hasKeyHandlers || hiddenFrame;
-        } catch (_) {
-          return false;
-        }
-      };
-
-      const quarantineScript = (script) => {
-        try {
-          script.type = "text/plain";
-          script.setAttribute("data-quarantined", "true");
-        } catch (_) {}
-      };
-
-      const observer = new MutationObserver((mutations) => {
-        for (const m of mutations) {
-          if (m.type === "childList") {
-            m.addedNodes.forEach((node) => {
-              if (isSuspiciousScript(node)) {
-                this.security.addSuspicious({ type: "script", reason: "suspicious source or inline pattern", node });
-                quarantineScript(node);
-              } else if (isSuspiciousElement(node)) {
-                this.security.addSuspicious({ type: "element", reason: "inline key handlers or risky frame", node });
-              }
-            });
-          } else if (m.type === "attributes" && isSuspiciousElement(m.target)) {
-            this.security.addSuspicious({ type: "attr", reason: `attribute ${m.attributeName}`, node: m.target });
-          }
-        }
-      });
-
-      observer.observe(document.documentElement, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ["onkeydown", "onkeypress", "onkeyup", "src", "type", "sandbox", "srcdoc"],
-      });
-
-      // Hook addEventListener to monitor keyboard listeners registration
-      const OriginalAddEventListener = EventTarget.prototype.addEventListener;
-      const selfRef = this;
-      EventTarget.prototype.addEventListener = function(type, listener, options) {
-        try {
-          if (type && /^(key(?:down|up|press))$/i.test(type)) {
-            const info = {
-              type: "event-listener",
-              reason: `keyboard listener registered: ${type}`,
-              target: this,
-            };
-            selfRef.security.addSuspicious(info);
-          }
-        } catch (_) {}
-        return OriginalAddEventListener.call(this, type, listener, options);
-      };
-
-      this.security.observer = observer;
-      this.security.detectorStatus = "running";
-
-      // Expose minimal security API
-      window.VKSecurity = {
-        getStatus: () => this.security.detectorStatus,
-        getEvents: () => [...this.security.suspiciousEvents],
-        stop: () => {
-          try { observer.disconnect(); } catch (_) {}
-          this.security.detectorStatus = "stopped";
-        },
-      };
-      console.info("[VK Security] Keylogger detector started");
-    } catch (err) {
-      this.security.detectorStatus = "error";
-      console.warn("[VK Security] Detector error:", err);
-    }
-  }
-
   getLayoutName(layout) {
     switch (layout) {
       case "full":
@@ -168,6 +44,8 @@ export class VirtualKeyboard {
         return "Numpad Keyboard";
       case "symbols":
         return "Symbols Keyboard";
+      case "full-layouts":
+        return "Full English + Numpad";
       default:
         return "Unknown Layout";
     }
@@ -177,40 +55,42 @@ export class VirtualKeyboard {
     document.addEventListener("click", (e) => {
       const target = e.target;
       if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-        this.setCurrentInput(target);
+        const clickCursorPos = target.selectionStart;
+        this.setCurrentInput(target, !this.isVirtualKeyboardActive);
+        setTimeout(() => {
+          if (target.selectionStart !== clickCursorPos) {
+            target.setSelectionRange(clickCursorPos, clickCursorPos);
+          }
+        }, 10);
       }
     });
 
-    document.addEventListener(
-      "focus",
-      (e) => {
+    document.addEventListener("focus", (e) => {
         const target = e.target;
         if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-          this.setCurrentInput(target);
+          this.setCurrentInput(target, !this.isVirtualKeyboardActive);
         }
       },
       true
     );
 
-    // Add real keyboard input listeners to handle encryption
+    //Add real keyboard input listeners to handle encryption
     document.addEventListener("input", (e) => {
       const target = e.target;
       if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
-        // Only handle real keyboard input if it's not coming from virtual keyboard operations
         if (!this.isVirtualKeyboardActive) {
           this.handleRealKeyboardInput(target);
         }
       }
     });
 
+    // Add real keyboard arrow key support
     document.addEventListener("keydown", (e) => {
       const target = e.target;
       if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
-        // Handle special keys that might not trigger input event
-        if ((e.key === "Backspace" || e.key === "Delete") && !this.isVirtualKeyboardActive) {
-          // Wait for the input event to handle the updated value
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.code)) {
           setTimeout(() => {
-            this.handleRealKeyboardInput(target);
+            target.focus();
           }, 0);
         }
       }
@@ -222,7 +102,7 @@ export class VirtualKeyboard {
     }
   }
 
-  setCurrentInput(inputElement) {
+  setCurrentInput(inputElement, moveToEnd = true) {
     if (this.currentInput) {
       this.currentInput.classList.remove("keyboard-active");
     }
@@ -230,6 +110,8 @@ export class VirtualKeyboard {
     this.currentInput = inputElement;
     this.currentInput.classList.add("keyboard-active");
 
+    this.currentInput.focus();
+    
     // Ensure buffer initialized for this input
     if (!this.inputPlaintextBuffers.has(this.currentInput)) {
       const ds = this.currentInput.dataset ? this.currentInput.dataset.encrypted : undefined;
@@ -248,6 +130,14 @@ export class VirtualKeyboard {
     }
     // Sync visible with buffer (masking for password)
     this.updateDisplayedValue();
+    
+    // Only move cursor to end on initial focus, not during virtual keyboard operations
+    if (moveToEnd) {
+      setTimeout(() => {
+        const length = this.currentInput.value.length;
+        this.currentInput.setSelectionRange(length, length);
+      }, 0);
+    }
   }
 
   // [1]
@@ -407,124 +297,79 @@ export class VirtualKeyboard {
           key.classList.toggle("active", this.isScrambled);
         });
       }
+
+      if (this.currentLayout === "full") {
+        if (this.isScrambled) {
+          this.unscrambleKeys();
+        } else {
+          this.scrambleFullLayoutKeys();
+        }
+        this.isScrambled = !this.isScrambled;
+        document
+          .querySelectorAll('.key[data-key="scrambled"]')
+          .forEach((key) => {
+            key.classList.toggle("active", this.isScrambled);
+          });
+      }
       this.isVirtualKeyboardActive = false;
       return;
     }
 
     switch (keyPressed) {
-      case "Esc":
-        const modals = document.querySelectorAll(".modal");
-        if (modals.length === 0) {
-          document.exitFullscreen();
-          console.warn("No modals found to close.");
-        }
-        modals.forEach((modal) => {
-          modal.classList.add("hidden"); 
-        });
-        break;
-
-      case "F1":
-        break;
-
-      case "F2":
-        // เปิดโหมดแก้ไขสำหรับ element ที่เลือก
-        const activeElement = document.activeElement;
-        if (activeElement && activeElement.contentEditable !== undefined) {
-          activeElement.contentEditable = true;
-          activeElement.focus();
-          console.log(activeElement.contentEditable);
-        } else {
-          console.warn("No editable element found.");
-        }
-        break;
-
-      case "F3":
-        // เปิดการค้นหา
-        event.preventDefault();
-        this.option.openSearch();
-        break;
-
-      case "F4":
-        // เปิดเมนูการตั้งค่า
-        event.preventDefault();
-        this.option.openSettings();
-        break;
-
-      case "F5":
-        // รีโหลดหน้าเว็บ (คงเดิม)
-        window.location.reload();
-        break;
-
-      case "F6":
-        // สลับระหว่างโหมดกลางวัน/กลางคืน
-        document.body.classList.toggle("dark-mode");
-        break;
-
-      case "F7":
-        break;
-
-      case "F8":
-        break;
-
-      case "F9":
-        break;
-
-      case "F10":
-        break;
-
-      case "F11":
-        if (!document.fullscreenElement) {
-          document.documentElement
-            .requestFullscreen()
-            .catch((err) =>
-              console.error("Error attempting to enable fullscreen:", err)
-            );
-        } else {
-          document
-            .exitFullscreen()
-            .catch((err) =>
-              console.error("Error attempting to exit fullscreen:", err)
-            );
-        }
-        break;
-
-      case "F12":
-        break;
-
       case "HOME":
-        this.currentInput.setSelectionRange(Math.max(0, 0), Math.max(0, 0));
-        break;
+        this.currentInput.setSelectionRange(0, 0);
+        this.currentInput.focus();
+        setTimeout(() => {
+          this.currentInput.setSelectionRange(0, 0);
+          this.currentInput.focus();
+        }, 5);
+        // Skip the general cursor repositioning for navigation keys
+        this.isVirtualKeyboardActive = false;
+        return;
 
       case "END":
-        const length = this.currentInput.value.length;
-        this.currentInput.setSelectionRange(length, length);
-        break;
+        const bufferLengthEnd = this.getCurrentBuffer().length;
+        this.currentInput.setSelectionRange(bufferLengthEnd, bufferLengthEnd);
+        this.currentInput.focus();
+        setTimeout(() => {
+          this.currentInput.setSelectionRange(bufferLengthEnd, bufferLengthEnd);
+          this.currentInput.focus();
+        }, 5);
+        // Skip the general cursor repositioning for navigation keys
+        this.isVirtualKeyboardActive = false;
+        return;
 
       case "Backspace":
       case "backspace":
         if (start === end && start > 0) {
           const newBuffer = buffer.slice(0, start - 1) + buffer.slice(end);
           this.setCurrentBuffer(newBuffer);
-          this.currentInput.selectionStart = this.currentInput.selectionEnd = start - 1;
+          const newCursorPos = start - 1;
+          this.updateDisplayedValue(false);
+          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
         } else {
           const newBuffer = buffer.slice(0, start) + buffer.slice(end);
           this.setCurrentBuffer(newBuffer);
-          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
+          const newCursorPos = start;
+          this.updateDisplayedValue(false);
+          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
         }
-        this.updateDisplayedValue();
         break;
 
       case "DEL⌦":
         if (start === end && start < buffer.length) {
           const newBuffer = buffer.slice(0, start) + buffer.slice(end + 1);
           this.setCurrentBuffer(newBuffer);
-          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
+          const newCursorPos = start;
+          this.updateDisplayedValue(false);
+          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
         } else {
           const newBuffer = buffer.slice(0, start) + buffer.slice(end);
           this.setCurrentBuffer(newBuffer);
-          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
+          const newCursorPos = start;
+          this.updateDisplayedValue(false);
+          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
         }
-        this.updateDisplayedValue();
         break;
 
       case "Space":
@@ -539,8 +384,9 @@ export class VirtualKeyboard {
         if (this.currentInput.tagName === "TEXTAREA") {
           const newBuffer = buffer.slice(0, start) + "\n" + buffer.slice(end);
           this.setCurrentBuffer(newBuffer);
-          this.updateDisplayedValue();
-          this.currentInput.setSelectionRange(start + 1, start + 1);
+          const newCursorPos = start + 1;
+          this.updateDisplayedValue(false);
+          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
         } else if (this.currentInput.tagName === "INPUT" || this.currentInput.type === "password" || this.currentInput.type === "text" ) {
           if (this.currentInput.form) {
             const submitButton = this.currentInput.form.querySelector(
@@ -550,7 +396,7 @@ export class VirtualKeyboard {
           } else {
             const newBuffer = buffer + "\n";
             this.setCurrentBuffer(newBuffer);
-            this.updateDisplayedValue();
+            this.updateDisplayedValue(false);
           }
         }
         break;
@@ -564,33 +410,50 @@ export class VirtualKeyboard {
         break;
 
       case "←":
-        this.currentInput.setSelectionRange(
-          Math.max(0, start - 1),
-          Math.max(0, start - 1)
-        );
+        const leftNewPos = Math.max(0, start - 1);
+        this.currentInput.setSelectionRange(leftNewPos, leftNewPos);
         break;
 
       case "→":
-        this.currentInput.setSelectionRange(start + 1, start + 1);
+        const bufferLength = this.getCurrentBuffer().length;
+        const rightNewPos = Math.min(bufferLength, start + 1);
+        this.currentInput.setSelectionRange(rightNewPos, rightNewPos);
         break;
 
       case "↑":
       case "↓":
-        const text = this.currentInput.value;
-        const lines = text.substring(0, start).split("\n");
-        const currentLineIndex = lines.length - 1;
-        const currentLine = lines[currentLineIndex];
-        const columnIndex = start - text.lastIndexOf("\n", start - 1) - 1;
-
-        if (keyPressed === "↑" && currentLineIndex > 0) {
-          const prevLineLength = lines[currentLineIndex - 1].length;
-          const newPos = start - currentLine.length - 1 - Math.min(columnIndex, prevLineLength);
-          this.currentInput.setSelectionRange(newPos, newPos);
-        } else if (keyPressed === "↓" && currentLineIndex < lines.length - 1) {
-          const nextLine = lines[currentLineIndex + 1];
-          const newPos = start + currentLine.length + 1 + Math.min(columnIndex, nextLine.length);
-          this.currentInput.setSelectionRange(newPos, newPos);
+        // Use the actual buffer content instead of displayed value
+        const actualText = this.getCurrentBuffer();
+        const actualLines = actualText.substring(0, start).split("\n");
+        const actualCurrentLineIndex = actualLines.length - 1;
+        const actualCurrentLine = actualLines[actualCurrentLineIndex];
+        const actualColumnIndex = start - actualText.lastIndexOf("\n", start - 1) - 1;
+
+        if (keyPressed === "↑" && actualCurrentLineIndex > 0) {
+          // Move to previous line
+          const prevLineLength = actualLines[actualCurrentLineIndex - 1].length;
+          const upNewPos = start - actualCurrentLine.length - 1 - Math.max(0, actualColumnIndex - prevLineLength);
+          this.currentInput.setSelectionRange(Math.max(0, upNewPos), Math.max(0, upNewPos));
+        } else if (keyPressed === "↓") {
+          // Move to next line
+          const remainingText = actualText.substring(start);
+          const nextLineBreak = remainingText.indexOf("\n");
+          
+          if (nextLineBreak !== -1) {
+            // There is a next line
+            const textAfterNextLineBreak = remainingText.substring(nextLineBreak + 1);
+            const nextLineEnd = textAfterNextLineBreak.indexOf("\n");
+            const nextLineLength = nextLineEnd === -1 ? textAfterNextLineBreak.length : nextLineEnd;
+            
+            const downNewPos = start + nextLineBreak + 1 + Math.min(actualColumnIndex, nextLineLength);
+            this.currentInput.setSelectionRange(downNewPos, downNewPos);
+          }
+          // If no next line, do nothing (cursor stays at current position)
         }
+        
+        this.currentInput.focus();
+        // Skip the general cursor repositioning for arrow keys
+        this.isVirtualKeyboardActive = false;
         break;
 
       default:
@@ -600,12 +463,17 @@ export class VirtualKeyboard {
 
     if (isShiftActive && !isCapsActive) this.toggleShift();
 
+    this.currentInput.focus();
+
+    setTimeout(() => {
+      this.currentInput.focus();
+      const cursorPos = this.currentInput.selectionStart;
+      this.currentInput.setSelectionRange(cursorPos, cursorPos);
+    }, 0);
+    
     this.currentInput.focus();
     const event = new Event("input", { bubbles: true });
     this.currentInput.dispatchEvent(event);
-    
-    // Reset flag after virtual keyboard operation is complete
-    this.isVirtualKeyboardActive = false;
   }
 
   // [3]
@@ -617,8 +485,12 @@ export class VirtualKeyboard {
     const buffer = this.getCurrentBuffer();
     const newBuffer = buffer.slice(0, start) + textvalue + buffer.slice(end);
     this.setCurrentBuffer(newBuffer);
-    this.updateDisplayedValue();
-    this.currentInput.selectionStart = this.currentInput.selectionEnd = start + textvalue.length;
+    
+    const newCursorPos = start + textvalue.length;
+    
+    this.updateDisplayedValue(false);
+    
+    this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
   }
 
   // Helper: get current plaintext buffer for active input
@@ -635,12 +507,22 @@ export class VirtualKeyboard {
   }
 
   // Helper: reflect masked value in the visible input/textarea
-  updateDisplayedValue() {
+  updateDisplayedValue(preserveCursor = true) {
     if (!this.currentInput) return;
     const buffer = this.getCurrentBuffer();
     const isPassword = this.currentInput.type === "password";
     const maskChar = "•";
+    
+    // Store current cursor position only if we want to preserve it
+    const currentStart = preserveCursor ? this.currentInput.selectionStart : 0;
+    const currentEnd = preserveCursor ? this.currentInput.selectionEnd : 0;
+    
     this.currentInput.value = isPassword ? maskChar.repeat(buffer.length) : buffer;
+    
+    // Restore cursor position after updating value only if preserving
+    if (preserveCursor) {
+      this.currentInput.setSelectionRange(currentStart, currentEnd);
+    }
   }
 
   // Handle real keyboard input and encrypt it
@@ -655,9 +537,6 @@ export class VirtualKeyboard {
     
     // Encrypt and store in data-encrypted attribute
     this.updateDomEncrypted(input, currentValue);
-    // this.updateDisplayedValue();
-    // console.log("Real keyboard input captured and encrypted for:", input.id || input.name || "unnamed input");
-    // console.log("Input type:", input.type, "Value length:", currentValue.length);
   }
 
   // Helper: encrypt and store ciphertext in DOM attribute
@@ -820,7 +699,7 @@ export class VirtualKeyboard {
   // [12]
   scrambleEnglishKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key='Space']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
+      ".key:not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key=' ']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
     );
     const englishAlphabet = "abcdefghijklmnopqrstuvwxyz/.,';\\][`1234567890-=".split("");
     this.shuffleArray(englishAlphabet);
@@ -833,7 +712,7 @@ export class VirtualKeyboard {
   // [13]
   scrambleThaiKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='scrambled']):not([data-key='scr']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Space']):not([data-key='Tab ↹'])"
+      ".key:not([data-key='scrambled']):not([data-key='scr']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key=' ']):not([data-key='Tab ↹'])"
     );
     const ThaiAlphabet = '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split("");
     this.shuffleArray(ThaiAlphabet);
@@ -856,6 +735,21 @@ export class VirtualKeyboard {
     });
   }
 
+
+  scrambleFullLayoutKeys() {
+    const keys = document.querySelectorAll(
+      ".key:not(.concat-keys):not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key=' ']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
+    );
+    const englishChars = "abcdefghijklmnopqrstuvwxyz1234567890;'\\/][`,.-=".split("");
+    this.shuffleArray(englishChars);
+    keys.forEach((key, index) => {
+      if (index < englishChars.length) {
+        key.textContent = englishChars[index];
+        key.dataset.key = englishChars[index];
+      }
+    });
+  }
+
   // [14] จัดการการลากคีย์บอร์ด
   startDrag(event) {
     this.isDragging = true;

package/layouts.js

@@ -1,25 +1,25 @@
 export const layouts = {
   full: [
-    ["Esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "DEL⌦", "HOME", "END"],
+    // ["Esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "DEL⌦", "HOME", "END"],"ㅤ","ㅤ","ㅤ","ㅤ",
     ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace"].concat(["+", "-", "*","/"]),
     ["Tab ↹", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"].concat(["7", "8", "9", "%"]),
     ["Caps 🄰", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"].concat(["4", "5", "6", "_"]),
     ["Shift ⇧", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift ⇧", "↑"].concat(["1", "2", "3", "="]),
-    ["Space", "←", "↓", "→"].concat(["0", "."]),
+    ["scrambled", " ", "←", "↓", "→"].concat(["0", "."]),
   ],
   en: [
     ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace"],
     ["Tab ↹", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
     ["Caps 🄰", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
     ["Shift ⇧", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift ⇧"],
-    ["scrambled", "Space"],
+    ["scrambled", " "],
   ],
   th: [
     ["_", "ๅ", "/", "-", "ภ", "ถ", "ุ", "ึ", "ค", "ต", "จ", "ข", "ช", "Backspace"],
     ["Tab ↹", "ๆ", "ไ", "ำ", "พ", "ะ", "ั", "ี", "ร", "น", "ย", "บ", "ล", "ฃ"],
     ["Caps 🄰", "ฟ", "ห", "ก", "ด", "เ", "้", "่", "า", "ส", "ว", "ง", "Enter"],
     ["Shift ⇧", "ผ", "ป", "แ", "อ", "ิ", "ื", "ท", "ม", "ใ", "ฝ", "Shift ⇧"],
-    ["scrambled" ,"Space"],
+    ["scrambled" ," "],
   ],
   numpad: [
     ["scr", "+", "-", "*"],

package/main.js

@@ -34,7 +34,7 @@ window.onload = () => {
     try {
         // Initialize per-page crypto helper
         window.VKCrypto = createSessionCrypto();
-
+        
         window.keyboard = new VirtualKeyboard();
         console.log("VirtualKeyboard initialized successfully.");
     } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js_lis",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/style/kbstyle.js

@@ -0,0 +1,10 @@
+// CSS-in-JS version of kbstyle.css
+export const css = `
+.keyboard-row,.virtual-keyboard{display:flex;display:flex}.keyb,.keyboard-key{cursor:pointer;font-size:16px;text-align:center}.virtual-keyboard{flex-direction:column;width:100%;max-width:800px;margin:0 auto;border:2px solid #333;border-radius:10px;padding:20px;background-color:#f5f5f5;box-shadow:0 4px 10px rgba(0,0,0,.1)}.keyboard-row{justify-content:space-between}.keyboard-key{flex:1;padding:10px 15px;margin:2px;border:1px solid #ccc;border-radius:5px;background-color:#fff;transition:background-color .2s}.keyboard-active,input:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.backspacew{flex:1.5;width:260px}.keyboard-key:hover{background:#e0e0e0}.keyboard-key:active{background:#d0d0d0;transform:translateY(1px)}.keyboard-row{display:flex;justify-content:flex-start;margin:5px 0}.controls{margin-bottom:20px}button,select{margin-right:10px;padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px;cursor:pointer}button:hover{background:#f0f0f0}input:focus,textarea:focus{outline:0}#keyboard{position:absolute;cursor:move;top:80%;left:50%;transform:translate(-50%,-50%)}.keyb{color:#fff;border:#000;width:40px;height:25px;line-height:50px;margin:8px}.keyboard-row .active{background:#c7c7c7}body.dark-mode .virtual-keyboard{background-color:#333;box-shadow:0 4px 8px rgba(247,245,245,.1)}body.dark-mode{background-color:#333}body.dark-mode .login-container{background-color:#000;box-shadow:0 4px 8px rgba(247,245,245,.1);color:#fff}body.dark-mode .login-container input{background-color:#3333335d;color:#fff}body.dark-mode .login-container button{background-color:#005703;color:#fff}.fa-keyboard{color:#000}body.dark-mode .keyb .fa-keyboard{color:#ffffffde}body.dark-mode .keyboard-key.key{background-color:#222;color:#ffffffde}[data-key="Caps 🄰"],[data-key="Shift ⇧"],[data-key="Tab ↹"]{min-width:90px}.keyboard-key.key[data-key="Shift ⇧"]{color:#333}.virtual-keyboard.full [data-key=Enter]{min-width:95px}.virtual-keyboard.full [data-key="Shift ⇧"]{min-width:92px}.virtual-keyboard.full [data-key=" "]{min-width:563.8px}.virtual-keyboard.full .concat-keys[data-key="0"]{min-width:102px}.virtual-keyboard.full{min-width:1000px}.virtual-keyboard.Scnum,.virtual-keyboard.numpad{max-width:300px}.hidden{display:none!important}[data-key="Tab ↹"],[data-key=Backspace]{min-width:80px}[data-key="Shift ⇧"]{min-width:100px}[data-key=" "]{min-width:670px} 
+`;
+
+export function injectCSS() { 
+    const style = document.createElement('style');
+    style.textContent = css;
+    document.head.appendChild(style);
+}