js_lis 2.0.8 → 3.0.1

package/VirtualKeyboard.js

@@ -1,6 +1,188 @@
 import { layouts } from "./layouts.js";
-import { injectCSS } from "./style/kbstyle.js";
+import { getCSS, injectCSS } from "./style/kbstyle.js";
 
+//AES-GCM ผ่าน WeakMap
+class SecureBufferStore {
+  constructor() {
+    this._store = new WeakMap();
+  }
+
+  //สร้างกุญแจเข้ารหัส
+  async _getEntry(inputEl) {
+    if (!this._store.has(inputEl)) {
+      const key = await crypto.subtle.generateKey(
+        { name: "AES-GCM", length: 256 },
+        false, // ไม่ export ออก
+        ["encrypt", "decrypt"]
+      );
+      const iv = crypto.getRandomValues(new Uint8Array(12));
+      const ciphertext = await crypto.subtle.encrypt(
+        { name: "AES-GCM", iv },
+        key,
+        new TextEncoder().encode("")
+      );
+      this._store.set(inputEl, { key, iv, ciphertext });
+    }
+    return this._store.get(inputEl);
+  }
+
+  //ถอดรหัสชั่วคราว
+  async read(inputEl) {
+    if (!this._store.has(inputEl)) return "";
+    const { key, iv, ciphertext } = this._store.get(inputEl);
+    try {
+      const plain = await crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, ciphertext);
+      return new TextDecoder().decode(plain);
+    } catch {
+      return "";
+    }
+  }
+
+  //เข้ารหัสใหม่
+  async write(inputEl, plaintext) {
+    const entry = await this._getEntry(inputEl);
+    const iv    = crypto.getRandomValues(new Uint8Array(12));
+    const ciphertext = await crypto.subtle.encrypt(
+      { name: "AES-GCM", iv },
+      entry.key,
+      new TextEncoder().encode(plaintext)
+    );
+    entry.iv         = iv;
+    entry.ciphertext = ciphertext;
+  }
+
+  //ค่าเริ่มต้นให้กับ Input
+  async init(inputEl, initialPlaintext) {
+    if (!this._store.has(inputEl)) {
+      await this._getEntry(inputEl);
+    }
+    await this.write(inputEl, initialPlaintext);
+  }
+
+  has(inputEl) { return this._store.has(inputEl); }
+  delete(inputEl) { this._store.delete(inputEl); }
+}
+
+//จัดการการพิมพ์
+class IMEReconciliationEngine {
+  constructor() {
+    this._sessions = new Map();
+  }
+
+  //เริ่มต้น
+  start(inputEl, cursorStart, cursorEnd) {
+    this._sessions.set(inputEl, {
+      active: true,
+      compositionText: "",
+      anchorStart: cursorStart,
+      anchorEnd: cursorEnd,
+      lastDisplayLen: 0,
+    });
+  }
+
+  isActive(inputEl) {
+    return this._sessions.get(inputEl)?.active ?? false;
+  }
+
+  //อัปเดตตอนพิมพ์
+  update(inputEl, newCompositionText) {
+    const s = this._sessions.get(inputEl);
+    if (!s) return null;
+    const prev = s.compositionText;
+    s.compositionText = newCompositionText;
+    s.lastDisplayLen = newCompositionText.length;
+    return {
+      replaceStart: s.anchorStart,
+      replaceEnd: s.anchorStart + prev.length,
+      insertText: newCompositionText,
+    };
+  }
+
+  //จบและส่งข้อความ
+  end(inputEl, finalText) {
+    const s = this._sessions.get(inputEl);
+    if (!s) return null;
+    const op = {
+      replaceStart: s.anchorStart,
+      replaceEnd: s.anchorStart + s.compositionText.length,
+      insertText: finalText,
+    };
+    this._sessions.delete(inputEl);
+    return op;
+  }
+
+  //ยกเลิกการพิมพ์
+  abort(inputEl) {
+    const s = this._sessions.get(inputEl);
+    if (!s) return null;
+    const op = {
+      replaceStart: s.anchorStart,
+      replaceEnd: s.anchorStart + s.compositionText.length,
+      insertText: "",
+    };
+    this._sessions.delete(inputEl);
+    return op;
+  }
+}
+
+//ป้องกันดักอ่าน Clipboard
+class AntiClipboardSniff {
+  constructor() {
+    this._copyListeners = [];
+    this._pasteListeners = [];
+    this._active = false;
+  }
+
+  // 
+  install(getIsVKActive) {
+    if (this._active) return;
+    this._active = true;
+    this._getIsVKActive = getIsVKActive;
+
+    this._onCopy = (e) => {
+      if (!this._getIsVKActive()) return;
+      e.stopImmediatePropagation();
+    };
+    this._onCut = (e) => {
+      if (!this._getIsVKActive()) return;
+      e.stopImmediatePropagation();
+    };
+
+    document.addEventListener("copy", this._onCopy, { capture: true });
+    document.addEventListener("cut", this._onCut, { capture: true });
+
+    //block การใช้คำสั่ง JS ของหน้าเว็บ
+    const _origExecCommand = document.execCommand.bind(document);
+    document.execCommand = (cmd, ...args) => {
+      if (
+        this._getIsVKActive() &&
+        (cmd === "copy" || cmd === "cut" || cmd === "insertText")
+      ) {
+        return false; 
+      }
+      return _origExecCommand(cmd, ...args);
+    };
+  }
+
+  uninstall() {
+    if (!this._active) return;
+    document.removeEventListener("copy", this._onCopy, { capture: true });
+    document.removeEventListener("cut", this._onCut, { capture: true });
+    this._active = false;
+  }
+
+  //อ่านค่า Clipboard ผ่าน API
+  async securePaste() {
+    try {
+      if (navigator.clipboard?.readText) {
+        return await navigator.clipboard.readText();
+      }
+    } catch {}
+    return null;
+  }
+}
+
+//VirtualKeyboard
 export class VirtualKeyboard {
   constructor() {
     this.currentLayout = "full";
@@ -14,317 +196,449 @@ export class VirtualKeyboard {
     this.shiftActive = false;
     this.capsLockActive = false;
     this.isScrambled = false;
-    this.isVirtualKeyboardActive = false; 
+    this.isVirtualKeyboardActive = false;
+    this.isInternalUpdate = false;
+
+    this.maskChar = "•";
+
+    this._secureStore = new SecureBufferStore();
+    this._imeEngine = new IMEReconciliationEngine();
+    this._antiClip = new AntiClipboardSniff();
+
+    this._shadowRoot = null;
+    this._shadowHost = null;
+
+    this._boundDrag = this.drag.bind(this);
+    this._boundStopDrag = this.stopDrag.bind(this);
+    this._listenersInitialized = false;
 
-    this.inputPlaintextBuffers = new WeakMap();
-    
     this.initialize();
   }
 
   async initialize() {
     try {
-      injectCSS();
+      this._antiClip.install(() => this.isVirtualKeyboardActive);
+      this._mountShadowDOM();
       this.render();
-      this.initializeInputListeners();
-      console.log("VirtualKeyboard initialized successfully.");
-    } catch (error) {
-      console.error("Error initializing VirtualKeyboard:", error);
+      if (!this._listenersInitialized) {
+        this.initializeInputListeners();
+        this._listenersInitialized = true;
+      }
+      console.log("VirtualKeyboard (secure) initialized.");
+    } catch (err) {
+      console.error("VirtualKeyboard init error:", err);
     }
   }
 
+  //ป้องกัน CSS/JS ภายนอกเข้าถึง
+  _mountShadowDOM() {
+    this._shadowHost = document.createElement("div");
+    this._shadowHost.id = "vk-shadow-host";
+    this.container.appendChild(this._shadowHost);
+
+    this._shadowRoot = this._shadowHost.attachShadow({ mode: "closed" });
+
+    const styleEl = document.createElement("style");
+    styleEl.textContent = this._getShadowStyles();
+    this._shadowRoot.appendChild(styleEl);
+
+    const inner = document.createElement("div");
+    inner.id = "keyboard-shadow-inner";
+    this._shadowRoot.appendChild(inner);
+  }
+
+  _getShadowStyles() {
+    return getCSS();
+  }
+
+  _q(selector) {
+    return this._shadowRoot?.querySelector(selector) ?? null;
+  }
+
+  _qAll(selector) {
+    return this._shadowRoot?.querySelectorAll(selector) ?? [];
+  }
+
   getLayoutName(layout) {
-    switch (layout) {
-      case "full":
-        return "Full Keyboard";
-      case "en":
-        return "English Keyboard";
-      case "th":
-        return "Thai keyboard";
-      case "numpad":
-        return "Numpad Keyboard";
-      case "symbols":
-        return "Symbols Keyboard";
-      case "full-layouts":
-        return "Full English + Numpad";
-      default:
-        return "Unknown Layout";
+    const names = {
+      full: "Full Keyboard", en: "English Keyboard", th: "Thai keyboard",
+      numpad: "Numpad Keyboard", symbols: "Symbols Keyboard",
+      "full-layouts": "Full English + Numpad",
+    };
+    return names[layout] ?? "Unknown Layout";
+  }
+
+  _isPasswordField(el) {
+    return el?.type === "password";
+  }
+
+  async getCurrentBuffer() {
+    if (!this.currentInput) return "";
+    return this._secureStore.read(this.currentInput);
+  }
+
+  async getBufferForInput(inputEl) {
+    if (!inputEl) return "";
+    return this._secureStore.read(inputEl);
+  }
+
+  async setCurrentBuffer(plaintext) {
+    if (!this.currentInput) return;
+    await this._secureStore.write(this.currentInput, plaintext);
+  }
+
+  //อัปเดตค่าที่แสดงใน Input
+  async updateDisplayedValue(preserveCursor = true) {
+    if (!this.currentInput || this.isInternalUpdate) return;
+
+    const buffer = await this.getCurrentBuffer();
+    const isPassword = this._isPasswordField(this.currentInput);
+
+    const start = preserveCursor ? this.currentInput.selectionStart : null;
+    const end = preserveCursor ? this.currentInput.selectionEnd : null;
+
+    this.isInternalUpdate = true;
+
+    this.currentInput.value = isPassword
+      ? this.maskChar.repeat(buffer.length)
+      : buffer;
+
+    if (preserveCursor && start !== null) {
+      this.currentInput.setSelectionRange(start, end);
     }
+
+    this.isInternalUpdate = false;
   }
 
+  //ตั้งค่า listeners สำหรับการโฟกัส, IME, clipboard
   initializeInputListeners() {
     document.addEventListener("click", (e) => {
-      const target = e.target;
-      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-        const clickCursorPos = target.selectionStart;
-        this.setCurrentInput(target, !this.isVirtualKeyboardActive);
+      const t = e.target;
+      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+        const pos = t.selectionStart;
+        this.setCurrentInput(t, !this.isVirtualKeyboardActive);
         setTimeout(() => {
-          if (target.selectionStart !== clickCursorPos) {
-            target.setSelectionRange(clickCursorPos, clickCursorPos);
-          }
+          if (t.selectionStart !== pos) t.setSelectionRange(pos, pos);
         }, 10);
       }
     });
 
     document.addEventListener("focus", (e) => {
-        const target = e.target;
-        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-          this.setCurrentInput(target, !this.isVirtualKeyboardActive);
-        }
-      },
-      true
-    );
+      const t = e.target;
+      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+        this.setCurrentInput(t, !this.isVirtualKeyboardActive);
+      }
+    }, true);
+
+    document.addEventListener("blur", (e) => {
+      const t = e.target;
+      if (
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA") &&
+        this._imeEngine.isActive(t)
+      ) {
+        this._imeAbortAsync(t);
+      }
+    }, true);
 
-    //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) {
-        if (!this.isVirtualKeyboardActive) {
-          this.handleRealKeyboardInput(target, e);
-        }
+    //IME Reconciliation
+    document.addEventListener("compositionstart", (e) => {
+      const t = e.target;
+      if ((t.tagName === "INPUT" || t.tagName === "TEXTAREA") && t === this.currentInput) {
+        this._imeEngine.start(t, t.selectionStart, t.selectionEnd);
+      }
+    });
+
+    document.addEventListener("compositionupdate", (e) => {
+      const t = e.target;
+      if (
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA") &&
+        t === this.currentInput &&
+        this._imeEngine.isActive(t)
+      ) {
+        this._imeUpdateAsync(t, e.data ?? "");
+      }
+    });
+
+    document.addEventListener("compositionend", (e) => {
+      const t = e.target;
+      if (
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA") &&
+        t === this.currentInput &&
+        this._imeEngine.isActive(t)
+      ) {
+        this._imeEndAsync(t, e.data ?? "");
       }
     });
 
-    // Add real keyboard keydown listener for proper character tracking
+    //คีย์บอร์ดจริง
     document.addEventListener("keydown", (e) => {
-      const target = e.target;
-      if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
-        // Reset the virtual keyboard flag when real keyboard is used
-        if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.code)) {
-          this.isVirtualKeyboardActive = false;
-        }
-        
-        // Handle real keyboard input
+      const t = e.target;
+      if ((t.tagName === "INPUT" || t.tagName === "TEXTAREA") && t === this.currentInput) {
+        if (this._imeEngine.isActive(t)) return;
+
+        const navKeys = ["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"];
+        if (!navKeys.includes(e.code)) this.isVirtualKeyboardActive = false;
+
         if (!this.isVirtualKeyboardActive) {
-          this.handleRealKeyboardKeydown(target, e);
-        }
-        
-        // Handle arrow keys for all input types
-        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.code)) {
-          setTimeout(() => {
-            target.focus();
-          }, 0);
+          this.handleRealKeyboardKeydown(t, e);
         }
+
+        if (navKeys.includes(e.code)) setTimeout(() => t.focus(), 0);
       }
     });
 
-    const toggle = document.getElementById("toggle");
-    if (toggle) {
-      toggle.addEventListener("click", this.toggle.bind(this));
-    }
+    document.addEventListener("input", (e) => {
+      const t = e.target;
+      if (
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA") &&
+        t === this.currentInput &&
+        !this.isVirtualKeyboardActive &&
+        !this.isInternalUpdate
+      ) {
+        this._handleRealKeyboardInputAsync(t, e);
+      }
+    });
+
+    document.addEventListener("paste", async (e) => {
+      const t = e.target;
+      if (
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA") &&
+        t === this.currentInput
+      ) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        let pasteText = await this._antiClip.securePaste();
+        if (pasteText === null) {
+          pasteText = (e.clipboardData || window.clipboardData)?.getData("text") ?? "";
+        }
+        if (!pasteText) return;
+
+        const start = t.selectionStart;
+        const end = t.selectionEnd;
+        const buffer = await this.getCurrentBuffer();
+        await this.setCurrentBuffer(buffer.slice(0, start) + pasteText + buffer.slice(end));
+        await this.updateDisplayedValue(false);
+
+        const newCursor = start + pasteText.length;
+        setTimeout(() => { t.setSelectionRange(newCursor, newCursor); t.focus(); }, 0);
+
+        this.isInternalUpdate = true;
+        t.dispatchEvent(new Event("input", { bubbles: true }));
+        this.isInternalUpdate = false;
+      }
+    }, { capture: true });
+
+    document.addEventListener("cut", async (e) => {
+      const t = e.target;
+      if (
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA") &&
+        t === this.currentInput
+      ) {
+        const start = t.selectionStart;
+        const end = t.selectionEnd;
+        if (start === end) return;
+
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        const buffer = await this.getCurrentBuffer();
+        const selected = buffer.slice(start, end);
+
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(selected);
+          } else {
+            e.clipboardData?.setData("text/plain", selected);
+          }
+        } catch {}
+
+        await this.setCurrentBuffer(buffer.slice(0, start) + buffer.slice(end));
+        await this.updateDisplayedValue(false);
+
+        setTimeout(() => { t.setSelectionRange(start, start); t.focus(); }, 0);
+
+        this.isInternalUpdate = true;
+        t.dispatchEvent(new Event("input", { bubbles: true }));
+        this.isInternalUpdate = false;
+      }
+    }, { capture: true });
+
+    document.getElementById("toggle")
+      ?.addEventListener("click", this.toggle.bind(this));
+  }
+
+  //จัดการ IME แบบ Async
+  async _imeUpdateAsync(inputEl, compositionText) {
+    const op = this._imeEngine.update(inputEl, compositionText);
+    if (!op) return;
+
+    const buffer = await this.getBufferForInput(inputEl);
+    const newBuf = buffer.slice(0, op.replaceStart) + op.insertText + buffer.slice(op.replaceEnd);
+    await this._secureStore.write(inputEl, newBuf);
+
+    const newCursor = op.replaceStart + op.insertText.length;
+    this.isInternalUpdate = true;
+    inputEl.value = this._isPasswordField(inputEl)
+      ? this.maskChar.repeat(newBuf.length)
+      : newBuf;
+    inputEl.setSelectionRange(newCursor, newCursor);
+    this.isInternalUpdate = false;
+  }
+
+  async _imeEndAsync(inputEl, finalText) {
+    const op = this._imeEngine.end(inputEl, finalText);
+    if (!op) return;
+
+    const buffer = await this.getBufferForInput(inputEl);
+    const newBuf = buffer.slice(0, op.replaceStart) + op.insertText + buffer.slice(op.replaceEnd);
+    await this._secureStore.write(inputEl, newBuf);
+
+    const newCursor = op.replaceStart + op.insertText.length;
+    this.isInternalUpdate = true;
+    inputEl.value = this._isPasswordField(inputEl)
+      ? this.maskChar.repeat(newBuf.length)
+      : newBuf;
+    inputEl.setSelectionRange(newCursor, newCursor);
+    this.isInternalUpdate = false;
+  }
+
+  async _imeAbortAsync(inputEl) {
+    const op = this._imeEngine.abort(inputEl);
+    if (!op) return;
+
+    const buffer = await this.getBufferForInput(inputEl);
+    const newBuf = buffer.slice(0, op.replaceStart) + buffer.slice(op.replaceEnd);
+    await this._secureStore.write(inputEl, newBuf);
+
+    this.isInternalUpdate = true;
+    inputEl.value = this._isPasswordField(inputEl)
+      ? this.maskChar.repeat(newBuf.length)
+      : newBuf;
+    inputEl.setSelectionRange(op.replaceStart, op.replaceStart);
+    this.isInternalUpdate = false;
   }
 
+  //setCurrentInput
   setCurrentInput(inputElement, moveToEnd = true) {
-    if (this.currentInput) {
-      this.currentInput.classList.remove("keyboard-active");
-    }
+    if (this.currentInput) this.currentInput.classList.remove("keyboard-active");
 
     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;
-      let initial = "";
-      try {
-        if (ds && window.VKCrypto && typeof window.VKCrypto.decrypt === "function") {
-          initial = window.VKCrypto.decrypt(ds) || "";
-        } else {
-          initial = this.currentInput.value || "";
-        }
-      } catch (_) {
-        initial = this.currentInput.value || "";
+
+    const initBuffer = async () => {
+      if (!this._secureStore.has(this.currentInput)) {
+        const initial = this._isPasswordField(this.currentInput)
+          ? ""
+          : (this.currentInput.value || "");
+        await this._secureStore.init(this.currentInput, initial);
       }
-      this.inputPlaintextBuffers.set(this.currentInput, initial);
-      this.updateDomEncrypted(this.currentInput, initial);
-    }
-    // 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);
-    }
+      await this.updateDisplayedValue(false);
+      if (moveToEnd) {
+        const len = this.currentInput.value.length;
+        this.currentInput.setSelectionRange(len, len);
+      }
+    };
+    initBuffer();
   }
 
-  // [1]
+  //render shadow DOM
   render() {
+    const inner = this._shadowRoot?.getElementById("keyboard-shadow-inner");
+    if (!inner) return;
+
     const keyboard = document.createElement("div");
     keyboard.className = `virtual-keyboard ${this.currentLayout}`;
     keyboard.style.display = this.isVisible ? "block" : "none";
     keyboard.id = "keyboard";
 
-    const controlsContainer = document.createElement("div");
-    controlsContainer.className = "controls";
-    controlsContainer.style.display = "flex";
-    controlsContainer.style.justifyContent = "center";
-    controlsContainer.style.alignItems = "center";
-    controlsContainer.style.marginBottom = "10px";
-
-    const layoutSelector = document.createElement("select");
-    layoutSelector.id = "layout-selector";
-    layoutSelector.setAttribute("aria-label", "Select keyboard layout"); // ✅ เพิ่มบรรทัดนี้
-    layoutSelector.onchange = (e) => this.changeLayout(e.target.value);
-
-    const layouts = ["full", "en", "th", "numpad", "symbols"];
-    layouts.forEach((layout) => {
-      const option = document.createElement("option");
-      option.value = layout;
-      option.innerText = this.getLayoutName(layout);
-      layoutSelector.appendChild(option);
+    const controls = document.createElement("div");
+    controls.className = "controls";
+    Object.assign(controls.style, {
+      display: "flex", justifyContent: "center",
+      alignItems: "center", marginBottom: "10px",
     });
-    layoutSelector.value = this.currentLayout;
-    controlsContainer.appendChild(layoutSelector);
-
-
-    keyboard.appendChild(controlsContainer);
-
-    const layout = this.layouts[this.currentLayout];
-
-    layout.forEach((row) => {
-      const rowElement = document.createElement("div");
-      rowElement.className = "keyboard-row";
-
-      row.forEach((key, index) => {
-        const keyElement = document.createElement("button");
-        keyElement.className = "keyboard-key key";
-        keyElement.textContent = key;
-        keyElement.type = "button";
-
-        keyElement.dataset.key = key;
-
-        if (index >= row.length - 4) {
-          keyElement.classList.add("concat-keys");
-        }
-
-        if (key === " ") {
-          keyElement.className += " space";
-          keyElement.innerHTML = 'ฺ';
-        }
 
+    const sel = document.createElement("select");
+    sel.id = "layout-selector";
+    sel.setAttribute("aria-label", "Select keyboard layout");
+    sel.onchange = (e) => this.changeLayout(e.target.value);
+    ["full","en","th","numpad","symbols"].forEach((l) => {
+      const o = document.createElement("option");
+      o.value = l; o.innerText = this.getLayoutName(l);
+      sel.appendChild(o);
+    });
+    sel.value = this.currentLayout;
+    controls.appendChild(sel);
+    keyboard.appendChild(controls);
+
+    // Keys
+    this.layouts[this.currentLayout].forEach((row) => {
+      const rowEl = document.createElement("div");
+      rowEl.className = "keyboard-row";
+      row.forEach((key, i) => {
+        const btn = document.createElement("button");
+        btn.className = "keyboard-key key";
+        btn.textContent = key;
+        btn.type = "button";
+        btn.dataset.key = key;
+        btn.setAttribute("aria-label",
+          key === " " ? "spacebar" :
+          (key === "backspace" || key === "Backspace") ? "backspace" : key
+        );
+        if (i >= row.length - 4) btn.classList.add("concat-keys");
+        if (key === " ") { btn.className += " spacebar"; btn.innerHTML = ""; }
         if (key === "backspace" || key === "Backspace") {
-          keyElement.className += " backspacew";
-          keyElement.innerHTML = '<i class="fa fa-backspace"></i>ฺ';
+          btn.className += " backspacew";
+          btn.innerHTML = '⌫';
         }
+        if (key === "Caps 🄰" && this.capsLockActive) btn.classList.add("active","bg-gray-400");
+        if (key === "Shift ⇧" && this.shiftActive) btn.classList.add("active","bg-gray-400");
 
-        keyElement.onclick = (e) => {
+        btn.onclick = (e) => {
           e.preventDefault();
-          const keyPressed = keyElement.dataset.key || keyElement.textContent;
-          if (keyPressed) {
-            this.handleKeyPress(keyPressed);
-          } else {
-            console.error("The key element does not have a valid key value.");
-          }
+          const k = btn.dataset.key || btn.textContent;
+          if (k) this.handleKeyPress(k);
         };
-
-        rowElement.appendChild(keyElement);
+        rowEl.appendChild(btn);
       });
-
-      keyboard.appendChild(rowElement);
+      keyboard.appendChild(rowEl);
     });
 
-    this.container.innerHTML = "";
-    this.container.appendChild(keyboard);
-
-    keyboard.addEventListener("mousedown", (event) => this.startDrag(event));
+    inner.innerHTML = "";
+    inner.appendChild(keyboard);
+    keyboard.addEventListener("mousedown", (ev) => this.startDrag(ev));
   }
 
-  // [2]
+  //handleKeyPress
+
   async handleKeyPress(keyPressed) {
-    if (!this.currentInput) return;
-    
-    // Set flag to indicate virtual keyboard is active
-    this.isVirtualKeyboardActive = true;
-    
-    const start = this.currentInput.selectionStart;
-    const end = this.currentInput.selectionEnd;
-    const buffer = this.getCurrentBuffer();
+    if (!this.currentInput || !keyPressed) return;
 
-    const isCapsActive = this.capsLockActive;
-    const isShiftActive = this.shiftActive;
+    if (this._imeEngine.isActive(this.currentInput)) return;
 
-    const convertToCorrectCase = (char) => {
-      if (isCapsActive || isShiftActive) {
-        return char.toUpperCase();
-      }
-      return char.toLowerCase();
-    };
+    this.isVirtualKeyboardActive = true;
 
-    if (!keyPressed) {
-      this.isVirtualKeyboardActive = false;
-      return console.error("Invalid key pressed.");
-    }
+    const start = this.currentInput.selectionStart;
+    const end = this.currentInput.selectionEnd;
+    const buffer = await this.getCurrentBuffer();
+    const isCaps = this.capsLockActive;
+    const isShift = this.shiftActive;
 
+    //scramble
     if (keyPressed === "scr" || keyPressed === "scrambled") {
-      if (this.currentLayout === "en") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } else {
-          this.scrambleEnglishKeys();
-        }
-        this.isScrambled = !this.isScrambled;
-        document
-          .querySelectorAll('.key[data-key="scrambled"]')
-          .forEach((key) => {
-            key.classList.toggle("active", this.isScrambled);
-          });
-      }
-
-      if (this.currentLayout === "th") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } else {
-          this.scrambleThaiKeys();
-        }
-        this.isScrambled = !this.isScrambled;
-        document
-          .querySelectorAll('.key[data-key="scrambled"]')
-          .forEach((key) => {
-            key.classList.toggle("active", this.isScrambled);
-          });
-      }
-
-      if (this.currentLayout === "numpad") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } else {
-          this.scrambleKeyboard();
-        }
-        this.isScrambled = !this.isScrambled;
-        document.querySelectorAll('.key[data-key="scr"]').forEach((key) => {
-          key.classList.toggle("active", this.isScrambled);
-        });
-      }
-
-      if (this.currentLayout === "symbols") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } else {
-          this.scrambleSymbols();
-        }
-        this.isScrambled = !this.isScrambled;
-        document.querySelectorAll('.key[data-key="scr"]').forEach((key) => {
-          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);
-          });
-      }
+      const h = {
+        en: () => this.isScrambled ? this.unscrambleKeys() : this.scrambleEnglishKeys(),
+        th: () => this.isScrambled ? this.unscrambleKeys() : this.scrambleThaiKeys(),
+        numpad: () => this.isScrambled ? this.unscrambleKeys() : this.scrambleKeyboard(),
+        symbols: () => this.isScrambled ? this.unscrambleKeys() : this.scrambleSymbols(),
+        full: () => this.isScrambled ? this.unscrambleKeys() : this.scrambleFullLayoutKeys(),
+      };
+      h[this.currentLayout]?.();
+      this.isScrambled = !this.isScrambled;
+      this._qAll('.key[data-key="scr"],.key[data-key="scrambled"]')
+        .forEach((k) => k.classList.toggle("active", this.isScrambled));
       this.isVirtualKeyboardActive = false;
       return;
     }
@@ -333,551 +647,333 @@ export class VirtualKeyboard {
       case "HOME":
         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 bufferLengthEnd = this.getCurrentBuffer().length;
-        this.currentInput.setSelectionRange(bufferLengthEnd, bufferLengthEnd);
+        setTimeout(() => { this.currentInput.setSelectionRange(0, 0); this.currentInput.focus(); }, 5);
+        this.isVirtualKeyboardActive = false; return;
+
+      case "END": {
+        const len = buffer.length;
+        this.currentInput.setSelectionRange(len, len);
         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);
-          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);
-          const newCursorPos = start;
-          this.updateDisplayedValue(false);
-          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
-        }
-        break;
+        setTimeout(() => { this.currentInput.setSelectionRange(len, len); this.currentInput.focus(); }, 5);
+        this.isVirtualKeyboardActive = false; return;
+      }
 
-      case "DEL⌦":
-        if (start === end && start < buffer.length) {
-          const newBuffer = buffer.slice(0, start) + buffer.slice(end + 1);
-          this.setCurrentBuffer(newBuffer);
-          const newCursorPos = start;
-          this.updateDisplayedValue(false);
-          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
-        } else {
-          const newBuffer = buffer.slice(0, start) + buffer.slice(end);
-          this.setCurrentBuffer(newBuffer);
-          const newCursorPos = start;
-          this.updateDisplayedValue(false);
-          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
-        }
+      case "Backspace": case "backspace": {
+        let nb = buffer, np = start;
+        if (start === end && start > 0) { nb = buffer.slice(0, start - 1) + buffer.slice(end); np = start - 1; }
+        else if (start !== end) { nb = buffer.slice(0, start) + buffer.slice(end); np = start; }
+        await this.setCurrentBuffer(nb);
+        await this.updateDisplayedValue(false);
+        this.currentInput.setSelectionRange(np, np);
         break;
+      }
 
-      case "Space":
-        await this.insertText(" ");
+      case "DEL⌦": {
+        let nb = buffer;
+        if (start === end && start < buffer.length) nb = buffer.slice(0, start) + buffer.slice(end + 1);
+        else if (start !== end) nb = buffer.slice(0, start) + buffer.slice(end);
+        await this.setCurrentBuffer(nb);
+        await this.updateDisplayedValue(false);
+        this.currentInput.setSelectionRange(start, start);
         break;
+      }
 
-      case "Tab ↹":
-        await this.insertText("\t");
-        break;
+      case "Space": await this._insertText(" "); break;
+      case "Tab ↹": await this._insertText("\t"); break;
 
       case "Enter":
         if (this.currentInput.tagName === "TEXTAREA") {
-          const newBuffer = buffer.slice(0, start) + "\n" + buffer.slice(end);
-          this.setCurrentBuffer(newBuffer);
-          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(
-              'input[type="submit"], button[type="submit"], button[type="button"], button[onclick]'
-            );
-            if (submitButton) submitButton.click(); else this.currentInput.form.submit();
-          } else {
-            const newBuffer = buffer + "\n";
-            this.setCurrentBuffer(newBuffer);
-            this.updateDisplayedValue(false);
-          }
+          const nb = buffer.slice(0, start) + "\n" + buffer.slice(end);
+          await this.setCurrentBuffer(nb);
+          await this.updateDisplayedValue(false);
+          this.currentInput.setSelectionRange(start + 1, start + 1);
+        } else if (this.currentInput.form) {
+          const submit = this.currentInput.form.querySelector(
+            'input[type="submit"],button[type="submit"],button[type="button"],button[onclick]'
+          );
+          if (submit) submit.click(); else this.currentInput.form.submit();
         }
         break;
 
-      case "Caps 🄰":
-        this.toggleCapsLock();
-        break;
+      case "Caps 🄰": this.toggleCapsLock(); break;
+      case "Shift ⇧": this.toggleShift(); break;
 
-      case "Shift ⇧":
-        this.toggleShift();
-        break;
-
-      case "←":
-        const leftNewPos = Math.max(0, start - 1);
-        this.currentInput.setSelectionRange(leftNewPos, leftNewPos);
-        break;
-
-      case "→":
-        const bufferLength = this.getCurrentBuffer().length;
-        const rightNewPos = Math.min(bufferLength, start + 1);
-        this.currentInput.setSelectionRange(rightNewPos, rightNewPos);
-        break;
+      case "←": {
+        const p = Math.max(0, start - 1);
+        this.currentInput.setSelectionRange(p, p);
+        this.isVirtualKeyboardActive = false; return;
+      }
+      case "→": {
+        const p = Math.min(buffer.length, start + 1);
+        this.currentInput.setSelectionRange(p, p);
+        this.isVirtualKeyboardActive = false; return;
+      }
 
-      case "↑":
-      case "↓":
-        // 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));
+      case "↑": case "↓": {
+        const text = buffer;
+        const lines = text.substring(0, start).split("\n");
+        const li = lines.length - 1;
+        const col = start - text.lastIndexOf("\n", start - 1) - 1;
+        if (keyPressed === "↑" && li > 0) {
+          const prevLen = lines[li - 1].length;
+          const np = start - lines[li].length - 1 - Math.max(0, col - prevLen);
+          this.currentInput.setSelectionRange(Math.max(0, np), Math.max(0, np));
         } 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);
+          const rem = text.substring(start);
+          const nl  = rem.indexOf("\n");
+          if (nl !== -1) {
+            const afterNL = rem.substring(nl + 1);
+            const nextEnd = afterNL.indexOf("\n");
+            const nextLen = nextEnd === -1 ? afterNL.length : nextEnd;
+            const np = start + nl + 1 + Math.min(col, nextLen);
+            this.currentInput.setSelectionRange(np, np);
           }
-          // 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;
+        this.isVirtualKeyboardActive = false; return;
+      }
 
-      default:
-        const textvalue = await convertToCorrectCase(keyPressed);
-        await this.insertText(textvalue);
+      default: {
+        const ch = (isCaps || isShift) ? keyPressed.toUpperCase() : keyPressed.toLowerCase();
+        await this._insertText(ch);
+        break;
+      }
     }
 
-    if (isShiftActive && !isCapsActive) this.toggleShift();
+    if (isShift && !isCaps) this.toggleShift();
 
     this.currentInput.focus();
-
     setTimeout(() => {
-      this.currentInput.focus();
-      const cursorPos = this.currentInput.selectionStart;
-      this.currentInput.setSelectionRange(cursorPos, cursorPos);
+      this.isVirtualKeyboardActive = false;
+      if (this.currentInput) {
+        const p = this.currentInput.selectionStart;
+        this.currentInput.setSelectionRange(p, p);
+        this.currentInput.focus();
+      }
     }, 0);
-    
-    this.currentInput.focus();
-    const event = new Event("input", { bubbles: true });
-    this.currentInput.dispatchEvent(event);
-    
-    // Reset the flag after virtual keyboard operation is complete
-    this.isVirtualKeyboardActive = false;
+
+    this.isInternalUpdate = true;
+    this.currentInput.dispatchEvent(new Event("input", { bubbles: true }));
+    this.isInternalUpdate = false;
   }
 
-  // [3]
-  async insertText(text) {
+  //แทรกข้อความลงในตำแหน่ง Cursor และเข้ารหัสเก็บใน Store
+  async _insertText(text) {
+    if (!this.currentInput) return;
     const start = this.currentInput.selectionStart;
     const end = this.currentInput.selectionEnd;
-    const textvalue = text; 
+    const buffer = await this.getCurrentBuffer();
+    const newBuf = buffer.slice(0, start) + text + buffer.slice(end);
+    await this.setCurrentBuffer(newBuf);
 
-    const buffer = this.getCurrentBuffer();
-    const newBuffer = buffer.slice(0, start) + textvalue + buffer.slice(end);
-    this.setCurrentBuffer(newBuffer);
-    
-    const newCursorPos = start + textvalue.length;
-    
-    this.updateDisplayedValue(false);
-    
-    this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
-  }
+    this.isInternalUpdate = true;
+    await this.updateDisplayedValue(false);
+    this.isInternalUpdate = false;
 
-  // Helper: get current plaintext buffer for active input
-  getCurrentBuffer() {
-    if (!this.currentInput) return "";
-    return this.inputPlaintextBuffers.get(this.currentInput) || "";
+    const np = start + text.length;
+    this.currentInput.setSelectionRange(np, np);
   }
 
-  // Helper: set buffer and update encrypted dataset
-  setCurrentBuffer(newBuffer) {
-    if (!this.currentInput) return;
-    this.inputPlaintextBuffers.set(this.currentInput, newBuffer);
-    this.updateDomEncrypted(this.currentInput, newBuffer);
-  }
-
-  // Helper: reflect masked value in the visible input/textarea
-  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 keydown events to track actual input before masking
-  handleRealKeyboardKeydown(input, event) {
+  //บันทึกลง Store (ป้องกันการเก็บ plaintext ใน .value)
+  async handleRealKeyboardKeydown(input, event) {
     if (!input) return;
-    
     const key = event.key;
     const start = input.selectionStart;
     const end = input.selectionEnd;
-    const buffer = this.getCurrentBuffer();
-    
-    // Skip modifier keys and special keys
-    if (event.ctrlKey || event.altKey || event.metaKey || 
-        ['Shift', 'Control', 'Alt', 'Meta', 'CapsLock', 'Tab', 'Escape', 
-         'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End',
-         'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12'].includes(key)) {
+    const buffer = await this.getBufferForInput(input);
+
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      if ((event.ctrlKey || event.metaKey) && key === "a") return;
       return;
     }
-    
-    let newBuffer = buffer;
-    
-    if (key === 'Backspace') {
-      if (start === end && start > 0) {
-        // Single character deletion
-        newBuffer = buffer.slice(0, start - 1) + buffer.slice(start);
-      } else if (start !== end) {
-        // Range deletion
-        newBuffer = buffer.slice(0, start) + buffer.slice(end);
-      }
-      
-      // Prevent default and update manually
-      event.preventDefault();
-      this.setCurrentBuffer(newBuffer);
-      this.updateDisplayedValue(false);
-      
-      // Set cursor position
-      const newCursorPos = start === end ? Math.max(0, start - 1) : start;
-      setTimeout(() => {
-        input.setSelectionRange(newCursorPos, newCursorPos);
-        input.focus();
-      }, 0);
-      
-    } else if (key === 'Delete') {
-      if (start === end && start < buffer.length) {
-        // Single character deletion forward
-        newBuffer = buffer.slice(0, start) + buffer.slice(start + 1);
-      } else if (start !== end) {
-        // Range deletion
-        newBuffer = buffer.slice(0, start) + buffer.slice(end);
-      }
-      
-      // Prevent default and update manually
-      event.preventDefault();
-      this.setCurrentBuffer(newBuffer);
-      this.updateDisplayedValue(false);
-      
-      // Set cursor position
-      setTimeout(() => {
-        input.setSelectionRange(start, start);
-        input.focus();
-      }, 0);
-      
-    } else if (key === 'Enter') {
-      if (input.tagName === 'TEXTAREA') {
-        newBuffer = buffer.slice(0, start) + '\n' + buffer.slice(end);
-        
-        // Prevent default and update manually
-        event.preventDefault();
-        this.setCurrentBuffer(newBuffer);
-        this.updateDisplayedValue(false);
-        
-        // Set cursor position
-        const newCursorPos = start + 1;
-        setTimeout(() => {
-          input.setSelectionRange(newCursorPos, newCursorPos);
-          input.focus();
-        }, 0);
-      }
-      // For input fields, let the default behavior handle form submission
-      
+
+    const ignored = [
+      "Shift","Control","Alt","Meta","CapsLock","Tab","Escape",
+      "ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End",
+      "F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12",
+    ];
+    if (ignored.includes(key)) return;
+
+    let newBuf = buffer, newCursor = start;
+
+    if (key === "Backspace") {
+      if (start === end && start > 0) { newBuf = buffer.slice(0, start - 1) + buffer.slice(start); newCursor = start - 1; }
+      else if (start !== end) { newBuf = buffer.slice(0, start) + buffer.slice(end); }
+    } else if (key === "Delete") {
+      if (start === end && start < buffer.length) newBuf = buffer.slice(0, start) + buffer.slice(start + 1);
+      else if (start !== end) newBuf = buffer.slice(0, start) + buffer.slice(end);
+      newCursor = start;
+    } else if (key === "Enter" && input.tagName === "TEXTAREA") {
+      newBuf = buffer.slice(0, start) + "\n" + buffer.slice(end);
+      newCursor = start + 1;
     } else if (key.length === 1) {
-      // Regular character input
-      newBuffer = buffer.slice(0, start) + key + buffer.slice(end);
-      
-      // Prevent default and update manually
-      event.preventDefault();
-      this.setCurrentBuffer(newBuffer);
-      this.updateDisplayedValue(false);
-      
-      // Set cursor position
-      const newCursorPos = start + key.length;
-      setTimeout(() => {
-        input.setSelectionRange(newCursorPos, newCursorPos);
-        input.focus();
-      }, 0);
-    }
-  }
+      newBuf = buffer.slice(0, start) + key + buffer.slice(end);
+      newCursor = start + 1;
+    } else { return; }
 
-  // Handle real keyboard input and encrypt it (simplified version)
-  handleRealKeyboardInput(input, event) {
-    if (!input) return;
-    
-    // For most cases, the keydown handler already took care of updating the buffer
-    // This method now just ensures the encryption is up to date
-    const currentBuffer = this.getCurrentBuffer();
-    this.updateDomEncrypted(input, currentBuffer);
-  }
+    event.preventDefault();
+    await this._secureStore.write(input, newBuf);
 
-  // Helper: encrypt and store ciphertext in DOM attribute
-  updateDomEncrypted(input, plaintext) {
-    try {
-      const crypto = window.VKCrypto;
-  
-      if (crypto && typeof crypto.encrypt === "function") {
-        const cipher = plaintext.length ? crypto.encrypt(plaintext) : "";
-        input.dataset.encrypted = cipher;
-      } else {
-        // No encryption function available — don't store anything
-        console.warn("Encryption unavailable. Not storing plaintext.");
-        input.dataset.encrypted = "";
-      }
-  
-    } catch (err) {
-      console.error("Failed to encrypt input:", err);
-      input.dataset.encrypted = "";
-    }
-  }
+    this.isInternalUpdate = true;
+    input.value = this._isPasswordField(input)
+      ? this.maskChar.repeat(newBuf.length)
+      : newBuf;
+    this.isInternalUpdate = false;
 
-  // [4]
-  unscrambleKeys() {
-    this.keys = this.originalKeys;
-    this.render();
+    setTimeout(() => { input.setSelectionRange(newCursor, newCursor); input.focus(); }, 0);
   }
 
-  // [5]
-  toggleCapsLock() {
-    this.capsLockActive = !this.capsLockActive;
-
-    document.querySelectorAll('.key[data-key="Caps 🄰"]').forEach((key) => {
-      key.classList.toggle("active", this.capsLockActive);
-      key.classList.toggle("bg-gray-400", this.capsLockActive);
-    });
-
-    document.querySelectorAll(".key").forEach((key) => {
-      const isLetter = key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key);
-
-      if (isLetter) {
-        key.textContent = this.capsLockActive
-          ? key.dataset.key.toUpperCase()
-          : key.dataset.key.toLowerCase();
+  async _handleRealKeyboardInputAsync(input, event) {
+    if (!input || !event || this.isInternalUpdate) return;
+    // Autocomplete / browser autofill (not going through keydown)
+    if (event.inputType?.startsWith("insertReplacementText")) {
+      if (!this._isPasswordField(input)) {
+        await this._secureStore.write(input, input.value);
       }
-      this.updateKeyContent(key, this.capsLockActive);
-    });
+    }
   }
-  updateKeyContent(key, capsLockActive) {
-    const currentChar = key.textContent.trim();
 
-    const layouts = {
-      th: this.ThaiAlphabetShift,
-      en: this.EngAlphabetShift,
-      enSc: this.EngAlphabetShift,
-      full: this.FullAlphabetShift,
-    };
-    const layout = layouts[this.currentLayout];
+  //scramble
 
-    if (!layout) return;
+  unscrambleKeys() { this.render(); }
 
-    if (capsLockActive && layout[currentChar]) {
-      key.textContent = layout[currentChar];
-      key.dataset.key = layout[currentChar];
-    } else if (!capsLockActive && Object.values(layout).includes(currentChar)) {
-      const originalKey = Object.keys(layout).find((k) => layout[k] === currentChar);
-      if (originalKey) {
-        key.textContent = originalKey;
-        key.dataset.key = originalKey;
-      }
+  shuffleArray(arr) {
+    for (let i = arr.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [arr[i], arr[j]] = [arr[j], arr[i]];
     }
   }
 
-  // [6]
-  toggleShift() {
-    if (this.capsLockActive) {
-      return this.toggleCapsLock();
-    }
-
-    this.shiftActive = !this.shiftActive;
-    document.querySelectorAll('.key[data-key="Shift ⇧"]').forEach((key) => {
-      key.classList.toggle("active", this.shiftActive);
-      key.classList.toggle("bg-gray-400", this.shiftActive);
-    });
-  
-    document.querySelectorAll(".key").forEach((key) => {
-      const isLetter = key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key);
-  
-      if (isLetter) {
-        key.textContent = this.shiftActive
-          ? key.dataset.key.toUpperCase()
-          : key.dataset.key.toLowerCase();
-      }
-      this.updateKeyContent(key, this.shiftActive);
+  _scramble(selector, chars) {
+    this._qAll(selector).forEach((k, i) => {
+      if (i < chars.length) { k.textContent = chars[i]; k.dataset.key = chars[i]; }
     });
   }
-  updateKeyContent(key, shiftActive) {
-    const currentChar = key.textContent.trim();
-  
-    const layouts = {
-      th: this.ThaiAlphabetShift,
-      en: this.EngAlphabetShift,
-      enSc: this.EngAlphabetShift,
-      full: this.FullAlphabetShift,
-    };
-    const layout = layouts[this.currentLayout];
-  
-    if (!layout) return;
-  
-    if (shiftActive && layout[currentChar]) {
-      key.textContent = layout[currentChar];
-      key.dataset.key = layout[currentChar];
-    } else if (!shiftActive && Object.values(layout).includes(currentChar)) {
-      const originalKey = Object.keys(layout).find((k) => layout[k] === currentChar);
-      if (originalKey) {
-        key.textContent = originalKey;
-        key.dataset.key = originalKey;
-      }
-    }
+
+  scrambleKeyboard() {
+    const c = "1234567890-=+%/*.()".split(""); this.shuffleArray(c);
+    this._scramble(".key:not([data-key='std']):not([data-key='scr']):not([data-key='backspace']):not([data-key='Backspace'])", c);
+  }
+  scrambleEnglishKeys() {
+    const c = "abcdefghijklmnopqrstuvwxyz/.,';\\][`1234567890-=".split(""); this.shuffleArray(c);
+    this._scramble(".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 ↹'])", c);
+  }
+  scrambleThaiKeys() {
+    const c = '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split(""); this.shuffleArray(c);
+    this._scramble(".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 ↹'])", c);
+  }
+  scrambleSymbols() {
+    const c = "@#$%^&*()_+~`{}|\\:'<>?/[]±§¶!€£¥¢©®™℅‰†".split(""); this.shuffleArray(c);
+    this._scramble(".key:not([data-key='std']):not([data-key='scr']):not([data-key='backspace']):not([data-key='Backspace'])", c);
+  }
+  scrambleFullLayoutKeys() {
+    const c = "abcdefghijklmnopqrstuvwxyz1234567890;'\\/][`,.-=".split(""); this.shuffleArray(c);
+    this._scramble(".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 ↹'])", c);
   }
 
-  // [7]
-  EngAlphabetShift = { "`": "~", 1: "!", 2: "@", 3: "#", 4: "$", 5: "%", 6: "^", 7: "&", 8: "*", 9: "(", 0: ")", "-": "_", "=": "+", "[": "{", "]": "}", "\\": "|", ";": ":", "'": '"', ",": "<", ".": ">", "/": "?", };
-  ThaiAlphabetShift = { _: "%", ๅ: "+", "/": "๑", "-": "๒", ภ: "๓", ถ: "๔", "ุ": "ู", "ึ": "฿", ค: "๕", ต: "๖", จ: "๗", ข: "๘", ช: "๙", ๆ: "๐", ไ: '"', ำ: "ฎ", พ: "ฑ", ะ: "ธ", "ั": "ํ", "ี": "๋", ร: "ณ", น: "ฯ", ย: "ญ", บ: "ฐ", ล: ",", ฃ: "ฅ", ฟ: "ฤ", ห: "ฆ", ก: "ฏ", ด: "โ", เ: "ฌ", "้": "็", "่": "๋", า: "ษ", ส: "ศ", ว: "ซ", ง: ".", ผ: "(", ป: ")", แ: "ฉ", อ: "ฮ", "ิ": "ฺ", "ื": "์", ท: "?", ม: "ฒ", ใ: "ฬ", ฝ: "ฦ"};
-  FullAlphabetShift = { "[": "{", "]": "}", "\\": "|", ";": ":", "'": '"', ",": "<", ".": ">", "/": "?", };
+  //caps/shift
+  _updateAllKeyContent(isActive) {
+  const layoutMap = {
+    th: this.ThaiAlphabetShift,
+    en: this.EngAlphabetShift,
+    full: this.FullAlphabetShift
+  };
 
-  // [8]
-  toggle() {
-    this.isVisible = !this.isVisible;
-    this.render();
-  }
+  const layout = layoutMap[this.currentLayout];
 
-  // [9]
-  changeLayout(layout) {
-    this.currentLayout = layout;
-    this.render();
-  }
+  this._qAll(".key").forEach((key) => {
+    const dk = key.dataset.originalKey || key.dataset.key;
+    if (!dk) return;
 
-  // [10]
-  shuffleArray(array) {
-    for (let i = array.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [array[i], array[j]] = [array[j], array[i]];
+    key.dataset.originalKey = dk;
+
+    if (this.currentLayout === "full" && key.classList.contains("concat-keys")) {
+      return;
     }
-  }
 
-  // [11]
-  scrambleKeyboard() {
-    const keys = document.querySelectorAll(
-      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
-    );
-    const numbers = "1234567890-=+%/*.()".split("");
-    this.shuffleArray(numbers);
-    keys.forEach((key, index) => {
-      key.textContent = numbers[index];
-      key.dataset.key = numbers[index];
-    });
-  }
+    if (dk.length === 1 && /[a-zA-Z]/.test(dk)) {
+      key.textContent = isActive ? dk.toUpperCase() : dk.toLowerCase();
+    }
 
-  // [12]
-  scrambleEnglishKeys() {
-    const keys = document.querySelectorAll(
-      ".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);
-    keys.forEach((key, index) => {
-      key.textContent = englishAlphabet[index];
-      key.dataset.key = englishAlphabet[index];
-    });
-  }
+    if (!layout) return;
 
-  // [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=' ']):not([data-key='Tab ↹'])"
-    );
-    const ThaiAlphabet = '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split("");
-    this.shuffleArray(ThaiAlphabet);
-    keys.forEach((key, index) => {
-      key.textContent = ThaiAlphabet[index];
-      key.dataset.key = ThaiAlphabet[index]; 
+    const cur = key.textContent.trim();
+
+    if (isActive && layout[cur]) {
+      key.textContent = layout[cur];
+      key.dataset.key = layout[cur];
+    } else if (!isActive) {
+      const orig = Object.keys(layout).find((k) => layout[k] === cur);
+      if (orig) {
+        key.textContent = orig;
+        key.dataset.key = orig;
+      }
+    }
+  });
+}
+
+  toggleCapsLock() {
+    this.capsLockActive = !this.capsLockActive;
+    this._qAll('.key[data-key="Caps 🄰"]').forEach((k) => {
+      k.classList.toggle("active", this.capsLockActive);
+      k.classList.toggle("bg-gray-400", this.capsLockActive);
     });
+    this._updateAllKeyContent(this.capsLockActive);
   }
 
-  // []
-  scrambleSymbols() {
-    const keys = document.querySelectorAll(
-      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
-    );
-    const numbers = "@#$%^&*()_+~`{}|\\:'<>?/[]±§¶!€£¥¢©®™℅‰†".split("");
-    this.shuffleArray(numbers);
-    keys.forEach((key, index) => {
-      key.textContent = numbers[index];
-      key.dataset.key = numbers[index];
+  toggleShift() {
+    if (this.capsLockActive) return this.toggleCapsLock();
+    this.shiftActive = !this.shiftActive;
+    this._qAll('.key[data-key="Shift ⇧"]').forEach((k) => {
+      k.classList.toggle("active", this.shiftActive);
+      k.classList.toggle("bg-gray-400", this.shiftActive);
     });
+    this._updateAllKeyContent(this.shiftActive);
   }
 
+  //shift maps
+  EngAlphabetShift = {
+    "`":"~","1":"!","2":"@","3":"#","4":"$","5":"%","6":"^","7":"&","8":"*",
+    "9":"(","0":")","-":"_","=":"+","[":"{","]":"}","\\":"|",";":":","'":'"',",":"<",".":">","/":"?",
+  };
+  ThaiAlphabetShift = {
+    _:"%",ๅ:"+","/":"๑","-":"๒",ภ:"๓",ถ:"๔","ุ":"ู","ึ":"฿",ค:"๕",ต:"๖",จ:"๗",ข:"๘",ช:"๙",ๆ:"๐",ไ:'"',
+    ำ:"ฎ",พ:"ฑ",ะ:"ธ","ั":"ํ","ี":"๋",ร:"ณ",น:"ฯ",ย:"ญ",บ:"ฐ",ล:",",ฃ:"ฅ",ฟ:"ฤ",ห:"ฆ",ก:"ฏ",ด:"โ",เ:"ฌ",
+    "้":"็","่":"๋",า:"ษ",ส:"ศ",ว:"ซ",ง:".",ผ:"(",ป:")",แ:"ฉ",อ:"ฮ","ิ":"ฺ","ื":"์",ท:"?",ม:"ฒ",ใ:"ฬ",ฝ:"ฦ",
+  };
+  FullAlphabetShift = {
+    "`":"~","1":"!","2":"@","3":"#","4":"$","5":"%","6":"^","7":"&","8":"*",
+    "9":"(","0":")","-":"_","=":"+","[":"{","]":"}","\\":"|",";":":","'":'"',",":"<",".":">","/":"?",
+  };
+
+  //layout
+  toggle() { this.isVisible = !this.isVisible; this.render(); }
 
-  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];
-      }
-    });
+  changeLayout(layout) {
+    this.currentLayout = layout;
+    this.isScrambled = false; this.shiftActive = false; this.capsLockActive = false;
+    this.render();
   }
 
-  // [14] จัดการการลากคีย์บอร์ด
+  //drag
   startDrag(event) {
     this.isDragging = true;
-    this.offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
-    this.offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
-
-    document.addEventListener("mousemove", this.drag.bind(this)); 
-    document.addEventListener("mouseup", () => {
-      this.isDragging = false;
-      document.removeEventListener("mousemove", this.drag.bind(this));
-    });
+    const kb = this._q("#keyboard");
+    this.offsetX = event.clientX - (kb?.offsetLeft ?? 0);
+    this.offsetY = event.clientY - (kb?.offsetTop  ?? 0);
+    document.addEventListener("mousemove", this._boundDrag);
+    document.addEventListener("mouseup", this._boundStopDrag);
+  }
+  stopDrag() {
+    this.isDragging = false;
+    document.removeEventListener("mousemove", this._boundDrag);
+    document.removeEventListener("mouseup", this._boundStopDrag);
   }
-
-  // [15]
   drag(event) {
-    if (this.isDragging) {
-      const keyboard = document.getElementById("keyboard");
-      keyboard.style.left = `${event.clientX - this.offsetX}px`;
-      keyboard.style.top = `${event.clientY - this.offsetY}px`;
-    }
+    if (!this.isDragging) return;
+    const kb = this._q("#keyboard");
+    if (!kb) return;
+    kb.style.left = `${event.clientX - this.offsetX}px`;
+    kb.style.top = `${event.clientY - this.offsetY}px`;
   }
 }