js_lis 3.0.0 → 3.1.0

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";
@@ -15,14 +197,19 @@ export class VirtualKeyboard {
     this.capsLockActive = false;
     this.isScrambled = false;
     this.isVirtualKeyboardActive = false;
+    this.isInternalUpdate = false;
+
+    this.maskChar = "•";
+
+    this._secureStore = new SecureBufferStore();
+    this._imeEngine = new IMEReconciliationEngine();
+    this._antiClip = new AntiClipboardSniff();
 
-    this.inputPlaintextBuffers = new WeakMap();
+    this._shadowRoot = null;
+    this._shadowHost = null;
 
-    // FIX BUG-2: เก็บ bound reference เพื่อให้ removeEventListener ทำงานได้
     this._boundDrag = this.drag.bind(this);
     this._boundStopDrag = this.stopDrag.bind(this);
-
-    // FIX WARN-3: เก็บ flag ว่า listeners ถูก add ไปแล้วหรือยัง
     this._listenersInitialized = false;
 
     this.initialize();
@@ -30,348 +217,428 @@ export class VirtualKeyboard {
 
   async initialize() {
     try {
-      injectCSS();
+      this._antiClip.install(() => this.isVirtualKeyboardActive);
+      this._mountShadowDOM();
       this.render();
-      // FIX WARN-3: เรียก initializeInputListeners ครั้งเดียวเท่านั้น
       if (!this._listenersInitialized) {
         this.initializeInputListeners();
         this._listenersInitialized = true;
       }
-      console.log("VirtualKeyboard initialized successfully.");
-    } catch (error) {
-      console.error("Error initializing VirtualKeyboard:", error);
+      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,
-    );
+    document.addEventListener("focus", (e) => {
+      const t = e.target;
+      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+        this.setCurrentInput(t, !this.isVirtualKeyboardActive);
+      }
+    }, true);
 
-    // FIX BUG-4: handle paste event เพื่อ sync buffer
-    document.addEventListener("paste", (e) => {
-      const target = e.target;
+    document.addEventListener("blur", (e) => {
+      const t = e.target;
       if (
-        (target.tagName === "INPUT" || target.tagName === "TEXTAREA") &&
-        target === this.currentInput &&
-        !this.isVirtualKeyboardActive
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA") &&
+        this._imeEngine.isActive(t)
       ) {
-        e.preventDefault();
-        const pasteText = (e.clipboardData || window.clipboardData).getData(
-          "text",
-        );
-        if (!pasteText) return;
-
-        const start = target.selectionStart;
-        const end = target.selectionEnd;
-        const buffer = this.getCurrentBuffer();
-        const newBuffer =
-          buffer.slice(0, start) + pasteText + buffer.slice(end);
-        this.setCurrentBuffer(newBuffer);
-        this.updateDisplayedValue(false);
-
-        const newCursorPos = start + pasteText.length;
-        setTimeout(() => {
-          target.setSelectionRange(newCursorPos, newCursorPos);
-          target.focus();
-        }, 0);
+        this._imeAbortAsync(t);
+      }
+    }, true);
 
-        const event = new Event("input", { bubbles: true });
-        target.dispatchEvent(event);
+    //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);
       }
     });
 
-    // FIX BUG-4: handle cut event เพื่อ sync buffer
-    document.addEventListener("cut", (e) => {
-      const target = e.target;
+    document.addEventListener("compositionupdate", (e) => {
+      const t = e.target;
       if (
-        (target.tagName === "INPUT" || target.tagName === "TEXTAREA") &&
-        target === this.currentInput &&
-        !this.isVirtualKeyboardActive
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA") &&
+        t === this.currentInput &&
+        this._imeEngine.isActive(t)
       ) {
-        const start = target.selectionStart;
-        const end = target.selectionEnd;
-        if (start === end) return;
+        this._imeUpdateAsync(t, e.data ?? "");
+      }
+    });
 
-        const buffer = this.getCurrentBuffer();
-        const selectedText = buffer.slice(start, end);
+    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 ?? "");
+      }
+    });
 
-        e.preventDefault();
-        e.clipboardData.setData("text/plain", selectedText);
+    //คีย์บอร์ดจริง
+    document.addEventListener("keydown", (e) => {
+      const t = e.target;
+      if ((t.tagName === "INPUT" || t.tagName === "TEXTAREA") && t === this.currentInput) {
+        if (this._imeEngine.isActive(t)) return;
 
-        const newBuffer = buffer.slice(0, start) + buffer.slice(end);
-        this.setCurrentBuffer(newBuffer);
-        this.updateDisplayedValue(false);
+        const navKeys = ["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"];
+        if (!navKeys.includes(e.code)) this.isVirtualKeyboardActive = false;
 
-        setTimeout(() => {
-          target.setSelectionRange(start, start);
-          target.focus();
-        }, 0);
+        if (!this.isVirtualKeyboardActive) {
+          this.handleRealKeyboardKeydown(t, e);
+        }
 
-        const event = new Event("input", { bubbles: true });
-        target.dispatchEvent(event);
+        if (navKeys.includes(e.code)) setTimeout(() => t.focus(), 0);
       }
     });
 
     document.addEventListener("input", (e) => {
-      const target = e.target;
+      const t = e.target;
       if (
-        (target.tagName === "INPUT" || target.tagName === "TEXTAREA") &&
-        target === this.currentInput
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA") &&
+        t === this.currentInput &&
+        !this.isVirtualKeyboardActive &&
+        !this.isInternalUpdate
       ) {
-        if (!this.isVirtualKeyboardActive) {
-          this.handleRealKeyboardInput(target, e);
-        }
+        this._handleRealKeyboardInputAsync(t, e);
       }
     });
 
-    document.addEventListener("keydown", (e) => {
-      const target = e.target;
+    document.addEventListener("paste", async (e) => {
+      const t = e.target;
       if (
-        (target.tagName === "INPUT" || target.tagName === "TEXTAREA") &&
-        target === this.currentInput
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA") &&
+        t === this.currentInput
       ) {
-        const navKeys = [
-          "ArrowLeft",
-          "ArrowRight",
-          "ArrowUp",
-          "ArrowDown",
-          "Home",
-          "End",
-        ];
-
-        if (!navKeys.includes(e.code)) {
-          this.isVirtualKeyboardActive = false;
-        }
+        e.preventDefault();
+        e.stopImmediatePropagation();
 
-        if (!this.isVirtualKeyboardActive) {
-          this.handleRealKeyboardKeydown(target, e);
+        let pasteText = await this._antiClip.securePaste();
+        if (pasteText === null) {
+          pasteText = (e.clipboardData || window.clipboardData)?.getData("text") ?? "";
         }
+        if (!pasteText) return;
 
-        if (navKeys.includes(e.code)) {
-          setTimeout(() => {
-            target.focus();
-          }, 0);
-        }
+        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 });
 
-    const toggle = document.getElementById("toggle");
-    if (toggle) {
-      toggle.addEventListener("click", this.toggle.bind(this));
-    }
+    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();
 
-    if (!this.inputPlaintextBuffers.has(this.currentInput)) {
-      const initial = this.currentInput.value || "";
-      this.inputPlaintextBuffers.set(this.currentInput, initial);
-    }
-    this.updateDisplayedValue();
-
-    if (moveToEnd) {
-      setTimeout(() => {
-        const length = this.currentInput.value.length;
-        this.currentInput.setSelectionRange(length, length);
-      }, 0);
-    }
+    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);
+      }
+      await this.updateDisplayedValue(false);
+      if (moveToEnd) {
+        const len = this.currentInput.value.length;
+        this.currentInput.setSelectionRange(len, len);
+      }
+    };
+    initBuffer();
   }
 
+  //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 availableLayouts = ["full", "en", "th", "numpad", "symbols"];
-    availableLayouts.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;
-
-        // FIX IMP-4: เพิ่ม aria-label บนทุก key
-        keyElement.setAttribute(
-          "aria-label",
-          key === " "
-            ? "spacebar"
-            : key === "backspace" || key === "Backspace"
-              ? "backspace"
-              : key,
-        );
-
-        if (index >= row.length - 4) {
-          keyElement.classList.add("concat-keys");
-        }
-
-        if (key === " ") {
-          keyElement.className += " spacebar";
-          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>';
-        }
-
-        // FIX WARN-2: restore active state หลัง re-render
-        if (key === "Caps 🄰" && this.capsLockActive) {
-          keyElement.classList.add("active", "bg-gray-400");
-        }
-        if (key === "Shift ⇧" && this.shiftActive) {
-          keyElement.classList.add("active", "bg-gray-400");
+          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);
-
-    // FIX BUG-2: ใช้ bound reference แทน bind() inline
-    keyboard.addEventListener("mousedown", (event) => this.startDrag(event));
+    inner.innerHTML = "";
+    inner.appendChild(keyboard);
+    keyboard.addEventListener("mousedown", (ev) => this.startDrag(ev));
   }
 
-  // FIX BUG-3 & WARN-5: เปลี่ยนเป็น sync, จัดการ isVirtualKeyboardActive อย่างถูกต้อง
-  handleKeyPress(keyPressed) {
-    if (!this.currentInput) return;
+  //handleKeyPress
+
+  async handleKeyPress(keyPressed) {
+    if (!this.currentInput || !keyPressed) return;
+
+    if (this._imeEngine.isActive(this.currentInput)) return;
 
     this.isVirtualKeyboardActive = true;
 
     const start = this.currentInput.selectionStart;
     const end = this.currentInput.selectionEnd;
-    const buffer = this.getCurrentBuffer();
-
-    const isCapsActive = this.capsLockActive;
-    const isShiftActive = this.shiftActive;
-
-    const convertToCorrectCase = (char) => {
-      if (isCapsActive || isShiftActive) return char.toUpperCase();
-      return char.toLowerCase();
-    };
-
-    if (!keyPressed) {
-      this.isVirtualKeyboardActive = false;
-      return console.error("Invalid key pressed.");
-    }
+    const buffer = await this.getCurrentBuffer();
+    const isCaps = this.capsLockActive;
+    const isShift = this.shiftActive;
 
+    //scramble
     if (keyPressed === "scr" || keyPressed === "scrambled") {
-      const layoutScrambleMap = {
-        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(),
+      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(),
       };
-
-      const handler = layoutScrambleMap[this.currentLayout];
-      if (handler) {
-        handler();
-        this.isScrambled = !this.isScrambled;
-        document
-          .querySelectorAll('.key[data-key="scr"], .key[data-key="scrambled"]')
-          .forEach((key) => {
-            key.classList.toggle("active", this.isScrambled);
-          });
-      }
-
+      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;
     }
@@ -380,645 +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);
-        this.isVirtualKeyboardActive = false;
-        return;
+        setTimeout(() => { this.currentInput.setSelectionRange(0, 0); this.currentInput.focus(); }, 5);
+        this.isVirtualKeyboardActive = false; return;
 
       case "END": {
-        const bufferLengthEnd = this.getCurrentBuffer().length;
-        this.currentInput.setSelectionRange(bufferLengthEnd, bufferLengthEnd);
+        const len = buffer.length;
+        this.currentInput.setSelectionRange(len, len);
         this.currentInput.focus();
-        setTimeout(() => {
-          this.currentInput.setSelectionRange(bufferLengthEnd, bufferLengthEnd);
-          this.currentInput.focus();
-        }, 5);
-        this.isVirtualKeyboardActive = false;
-        return;
+        setTimeout(() => { this.currentInput.setSelectionRange(len, len); this.currentInput.focus(); }, 5);
+        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 if (start !== end) {
-          const newBuffer = buffer.slice(0, start) + buffer.slice(end);
-          this.setCurrentBuffer(newBuffer);
-          this.updateDisplayedValue(false);
-          this.currentInput.setSelectionRange(start, start);
-        }
-        break;
-
-      case "DEL⌦":
-        if (start === end && start < buffer.length) {
-          const newBuffer = buffer.slice(0, start) + buffer.slice(end + 1);
-          this.setCurrentBuffer(newBuffer);
-          this.updateDisplayedValue(false);
-          this.currentInput.setSelectionRange(start, start);
-        } else if (start !== end) {
-          const newBuffer = buffer.slice(0, start) + buffer.slice(end);
-          this.setCurrentBuffer(newBuffer);
-          this.updateDisplayedValue(false);
-          this.currentInput.setSelectionRange(start, start);
-        }
+      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":
-        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 ↹":
-        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 "Shift ⇧":
-        this.toggleShift();
-        break;
+      case "Caps 🄰": this.toggleCapsLock(); break;
+      case "Shift ⇧": this.toggleShift(); break;
 
       case "←": {
-        const leftNewPos = Math.max(0, start - 1);
-        this.currentInput.setSelectionRange(leftNewPos, leftNewPos);
-        this.isVirtualKeyboardActive = false;
-        return;
+        const p = Math.max(0, start - 1);
+        this.currentInput.setSelectionRange(p, p);
+        this.isVirtualKeyboardActive = false; return;
       }
-
       case "→": {
-        const bufferLength = this.getCurrentBuffer().length;
-        const rightNewPos = Math.min(bufferLength, start + 1);
-        this.currentInput.setSelectionRange(rightNewPos, rightNewPos);
-        this.isVirtualKeyboardActive = false;
-        return;
+        const p = Math.min(buffer.length, start + 1);
+        this.currentInput.setSelectionRange(p, p);
+        this.isVirtualKeyboardActive = false; return;
       }
 
-      case "↑":
-      case "↓": {
-        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) {
-          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 === "↓") {
-          const remainingText = actualText.substring(start);
-          const nextLineBreak = remainingText.indexOf("\n");
-          if (nextLineBreak !== -1) {
-            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);
           }
         }
-
         this.currentInput.focus();
-        this.isVirtualKeyboardActive = false;
-        return;
+        this.isVirtualKeyboardActive = false; return;
       }
 
       default: {
-        const textvalue = convertToCorrectCase(keyPressed);
-        this.insertText(textvalue);
+        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();
-
-    // FIX BUG-3: reset flag หลัง setTimeout เพื่อป้องกัน real keyboard listener เข้ามาแทรก
     setTimeout(() => {
+      this.isVirtualKeyboardActive = false;
       if (this.currentInput) {
+        const p = this.currentInput.selectionStart;
+        this.currentInput.setSelectionRange(p, p);
         this.currentInput.focus();
-        const cursorPos = this.currentInput.selectionStart;
-        this.currentInput.setSelectionRange(cursorPos, cursorPos);
       }
-      this.isVirtualKeyboardActive = false;
     }, 0);
 
-    this.currentInput.focus();
-    const event = new Event("input", { bubbles: true });
-    this.currentInput.dispatchEvent(event);
+    this.isInternalUpdate = true;
+    this.currentInput.dispatchEvent(new Event("input", { bubbles: true }));
+    this.isInternalUpdate = false;
   }
 
-  insertText(text) {
+  //แทรกข้อความลงในตำแหน่ง Cursor และเข้ารหัสเก็บใน Store
+  async _insertText(text) {
+    if (!this.currentInput) return;
     const start = this.currentInput.selectionStart;
     const end = this.currentInput.selectionEnd;
+    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) + text + buffer.slice(end);
-    this.setCurrentBuffer(newBuffer);
-
-    const newCursorPos = start + text.length;
-    this.updateDisplayedValue(false);
-    this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
-  }
-
-  getCurrentBuffer() {
-    if (!this.currentInput) return "";
-    return this.inputPlaintextBuffers.get(this.currentInput) || "";
-  }
-
-  getBufferForInput(inputElement) {
-    if (!inputElement) return "";
-    const bufferedValue = this.inputPlaintextBuffers.get(inputElement);
-    if (typeof bufferedValue === "string") {
-      return bufferedValue;
-    }
-    return inputElement.value || "";
-  }
+    this.isInternalUpdate = true;
+    await this.updateDisplayedValue(false);
+    this.isInternalUpdate = false;
 
-  setCurrentBuffer(newBuffer) {
-    if (!this.currentInput) return;
-    this.inputPlaintextBuffers.set(this.currentInput, newBuffer);
-  }
-
-  updateDisplayedValue(preserveCursor = true) {
-    if (!this.currentInput) return;
-    const buffer = this.getCurrentBuffer();
-    const isPassword = this.currentInput.type === "password";
-    const maskChar = "•";
-
-    const currentStart = preserveCursor ? this.currentInput.selectionStart : 0;
-    const currentEnd = preserveCursor ? this.currentInput.selectionEnd : 0;
-
-    this.currentInput.value = isPassword
-      ? maskChar.repeat(buffer.length)
-      : buffer;
-
-    if (preserveCursor) {
-      this.currentInput.setSelectionRange(currentStart, currentEnd);
-    }
+    const np = start + text.length;
+    this.currentInput.setSelectionRange(np, np);
   }
 
-  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();
+    const buffer = await this.getBufferForInput(input);
 
     if (event.ctrlKey || event.altKey || event.metaKey) {
-      // FIX BUG-6: handle Ctrl+A
-      if ((event.ctrlKey || event.metaKey) && key === "a") {
-        // Allow default selection — no buffer change needed
-        return;
-      }
-      // FIX BUG-6: handle Ctrl+Z (undo) — best-effort: เราไม่เก็บ history จึง ignore
+      if ((event.ctrlKey || event.metaKey) && key === "a") return;
       return;
     }
 
-    if (
-      [
-        "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)
-    ) {
-      return;
-    }
+    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 newBuffer = buffer;
+    let newBuf = buffer, newCursor = start;
 
     if (key === "Backspace") {
-      if (start === end && start > 0) {
-        newBuffer = buffer.slice(0, start - 1) + buffer.slice(start);
-      } else if (start !== end) {
-        newBuffer = buffer.slice(0, start) + buffer.slice(end);
-      }
-
-      event.preventDefault();
-      this.setCurrentBuffer(newBuffer);
-      this.updateDisplayedValue(false);
-
-      const newCursorPos = start === end ? Math.max(0, start - 1) : start;
-      setTimeout(() => {
-        input.setSelectionRange(newCursorPos, newCursorPos);
-        input.focus();
-      }, 0);
+      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) {
-        newBuffer = buffer.slice(0, start) + buffer.slice(start + 1);
-      } else if (start !== end) {
-        newBuffer = buffer.slice(0, start) + buffer.slice(end);
-      }
+      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) {
+      newBuf = buffer.slice(0, start) + key + buffer.slice(end);
+      newCursor = start + 1;
+    } else { return; }
 
-      event.preventDefault();
-      this.setCurrentBuffer(newBuffer);
-      this.updateDisplayedValue(false);
+    event.preventDefault();
+    await this._secureStore.write(input, newBuf);
 
-      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);
+    this.isInternalUpdate = true;
+    input.value = this._isPasswordField(input)
+      ? this.maskChar.repeat(newBuf.length)
+      : newBuf;
+    this.isInternalUpdate = false;
 
-        event.preventDefault();
-        this.setCurrentBuffer(newBuffer);
-        this.updateDisplayedValue(false);
+    setTimeout(() => { input.setSelectionRange(newCursor, newCursor); input.focus(); }, 0);
+  }
 
-        const newCursorPos = start + 1;
-        setTimeout(() => {
-          input.setSelectionRange(newCursorPos, newCursorPos);
-          input.focus();
-        }, 0);
+  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);
       }
-    } else if (key.length === 1) {
-      newBuffer = buffer.slice(0, start) + key + buffer.slice(end);
-
-      event.preventDefault();
-      this.setCurrentBuffer(newBuffer);
-      this.updateDisplayedValue(false);
-
-      const newCursorPos = start + key.length;
-      setTimeout(() => {
-        input.setSelectionRange(newCursorPos, newCursorPos);
-        input.focus();
-      }, 0);
     }
   }
 
-  // FIX BUG-4: handleRealKeyboardInput ทำหน้าที่ sync buffer เมื่อ autocomplete / IME
-  handleRealKeyboardInput(input, event) {
-    if (!input || !event) return;
-
-    // กรณี autocomplete, IME composition, หรือ browser fill ที่ไม่ผ่าน keydown
-    // sync จาก actual value กลับมาใส่ buffer
-    if (
-      event.inputType &&
-      event.inputType.startsWith("insertReplacementText")
-    ) {
-      this.inputPlaintextBuffers.set(input, input.value);
-      return;
-    }
+  //scramble
+
+  unscrambleKeys() { this.render(); }
 
-    // IME composition end
-    if (
-      event.isComposing === false &&
-      event.inputType === "insertCompositionText"
-    ) {
-      this.inputPlaintextBuffers.set(input, input.value);
+  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]];
     }
   }
 
-  unscrambleKeys() {
-    this.render();
+  _scramble(selector, chars) {
+    this._qAll(selector).forEach((k, i) => {
+      if (i < chars.length) { k.textContent = chars[i]; k.dataset.key = chars[i]; }
+    });
   }
 
-  // FIX BUG-1: รวม toggleCapsLock และ toggleShift ให้มี updateKeyContent เดียว
-  // ลบเมธอด updateKeyContent ที่ซ้ำกันออก และใช้เมธอดเดียวที่รับ parameter
+  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);
+  }
+
+  //caps/shift
   _updateAllKeyContent(isActive) {
-    const layoutMap = {
-      th: this.ThaiAlphabetShift,
-      en: this.EngAlphabetShift,
-      full: this.FullAlphabetShift,
-    };
-    const layout = layoutMap[this.currentLayout];
-
-    document.querySelectorAll(".key").forEach((key) => {
-      const isLetter =
-        key.dataset.key &&
-        key.dataset.key.length === 1 &&
-        /[a-zA-Zก-๙]/.test(key.dataset.key);
-
-      if (isLetter) {
-        key.textContent = isActive
-          ? key.dataset.key.toUpperCase()
-          : key.dataset.key.toLowerCase();
-      }
+  const layoutMap = {
+    th: this.ThaiAlphabetShift,
+    en: this.EngAlphabetShift,
+    full: this.FullAlphabetShift
+  };
 
-      if (!layout) return;
+  const layout = layoutMap[this.currentLayout];
 
-      const currentChar = key.textContent.trim();
-      if (isActive && layout[currentChar]) {
-        key.textContent = layout[currentChar];
-        key.dataset.key = layout[currentChar];
-      } else if (!isActive && Object.values(layout).includes(currentChar)) {
-        const originalKey = Object.keys(layout).find(
-          (k) => layout[k] === currentChar,
-        );
-        if (originalKey) {
-          key.textContent = originalKey;
-          key.dataset.key = originalKey;
-        }
+  this._qAll(".key").forEach((key) => {
+    const dk = key.dataset.originalKey || key.dataset.key;
+    if (!dk) return;
+
+    key.dataset.originalKey = dk;
+
+    if (this.currentLayout === "full" && key.classList.contains("concat-keys")) {
+      return;
+    }
+
+    if (dk.length === 1 && /[a-zA-Z]/.test(dk)) {
+      key.textContent = isActive ? dk.toUpperCase() : dk.toLowerCase();
+    }
+
+    if (!layout) return;
+
+    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;
-
-    document.querySelectorAll('.key[data-key="Caps 🄰"]').forEach((key) => {
-      key.classList.toggle("active", this.capsLockActive);
-      key.classList.toggle("bg-gray-400", this.capsLockActive);
+    this._qAll('.key[data-key="Caps 🄰"]').forEach((k) => {
+      k.classList.toggle("active", this.capsLockActive);
+      k.classList.toggle("bg-gray-400", this.capsLockActive);
     });
-
-    // FIX BUG-1: ใช้ _updateAllKeyContent แทน updateKeyContent ที่ซ้ำกัน
     this._updateAllKeyContent(this.capsLockActive);
   }
 
   toggleShift() {
-    if (this.capsLockActive) {
-      return this.toggleCapsLock();
-    }
-
+    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);
+    this._qAll('.key[data-key="Shift ⇧"]').forEach((k) => {
+      k.classList.toggle("active", this.shiftActive);
+      k.classList.toggle("bg-gray-400", this.shiftActive);
     });
-
-    // FIX BUG-1: ใช้ _updateAllKeyContent แทน updateKeyContent ที่ซ้ำกัน
     this._updateAllKeyContent(this.shiftActive);
   }
 
+  //shift maps
   EngAlphabetShift = {
-    "`": "~",
-    1: "!",
-    2: "@",
-    3: "#",
-    4: "$",
-    5: "%",
-    6: "^",
-    7: "&",
-    8: "*",
-    9: "(",
-    0: ")",
-    "-": "_",
-    "=": "+",
-    "[": "{",
-    "]": "}",
-    "\\": "|",
-    ";": ":",
-    "'": '"',
-    ",": "<",
-    ".": ">",
-    "/": "?",
+    "`":"~","1":"!","2":"@","3":"#","4":"$","5":"%","6":"^","7":"&","8":"*",
+    "9":"(","0":")","-":"_","=":"+","[":"{","]":"}","\\":"|",";":":","'":'"',",":"<",".":">","/":"?",
   };
-
   ThaiAlphabetShift = {
-    _: "%",
-    ๅ: "+",
-    "/": "๑",
-    "-": "๒",
-    ภ: "๓",
-    ถ: "๔",
-    "ุ": "ู",
-    "ึ": "฿",
-    ค: "๕",
-    ต: "๖",
-    จ: "๗",
-    ข: "๘",
-    ช: "๙",
-    ๆ: "๐",
-    ไ: '"',
-    ำ: "ฎ",
-    พ: "ฑ",
-    ะ: "ธ",
-    "ั": "ํ",
-    "ี": "๋",
-    ร: "ณ",
-    น: "ฯ",
-    ย: "ญ",
-    บ: "ฐ",
-    ล: ",",
-    ฃ: "ฅ",
-    ฟ: "ฤ",
-    ห: "ฆ",
-    ก: "ฏ",
-    ด: "โ",
-    เ: "ฌ",
-    "้": "็",
-    "่": "๋",
-    า: "ษ",
-    ส: "ศ",
-    ว: "ซ",
-    ง: ".",
-    ผ: "(",
-    ป: ")",
-    แ: "ฉ",
-    อ: "ฮ",
-    "ิ": "ฺ",
-    "ื": "์",
-    ท: "?",
-    ม: "ฒ",
-    ใ: "ฬ",
-    ฝ: "ฦ",
+    _:"%",ๅ:"+","/":"๑","-":"๒",ภ:"๓",ถ:"๔","ุ":"ู","ึ":"฿",ค:"๕",ต:"๖",จ:"๗",ข:"๘",ช:"๙",ๆ:"๐",ไ:'"',
+    ำ:"ฎ",พ:"ฑ",ะ:"ธ","ั":"ํ","ี":"๋",ร:"ณ",น:"ฯ",ย:"ญ",บ:"ฐ",ล:",",ฃ:"ฅ",ฟ:"ฤ",ห:"ฆ",ก:"ฏ",ด:"โ",เ:"ฌ",
+    "้":"็","่":"๋",า:"ษ",ส:"ศ",ว:"ซ",ง:".",ผ:"(",ป:")",แ:"ฉ",อ:"ฮ","ิ":"ฺ","ื":"์",ท:"?",ม:"ฒ",ใ:"ฬ",ฝ:"ฦ",
   };
-
   FullAlphabetShift = {
-    "[": "{",
-    "]": "}",
-    "\\": "|",
-    ";": ":",
-    "'": '"',
-    ",": "<",
-    ".": ">",
-    "/": "?",
+    "`":"~","1":"!","2":"@","3":"#","4":"$","5":"%","6":"^","7":"&","8":"*",
+    "9":"(","0":")","-":"_","=":"+","[":"{","]":"}","\\":"|",";":":","'":'"',",":"<",".":">","/":"?",
   };
 
-  toggle() {
-    this.isVisible = !this.isVisible;
-    this.render();
-  }
+  //layout
+  toggle() { this.isVisible = !this.isVisible; this.render(); }
 
-  // FIX WARN-1: reset isScrambled และ shift/caps เมื่อเปลี่ยน layout
   changeLayout(layout) {
     this.currentLayout = layout;
-    this.isScrambled = false;
-    this.shiftActive = false;
-    this.capsLockActive = false;
+    this.isScrambled = false; this.shiftActive = false; this.capsLockActive = false;
     this.render();
   }
 
-  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]];
-    }
-  }
-
-  // FIX BUG-7: แก้ CSS selector — เพิ่มวงเล็บปิด ) และ fix data-key case
-  scrambleKeyboard() {
-    const keys = document.querySelectorAll(
-      ":not([data-key='std']):not([data-key='scr']).key:not([data-key='backspace']):not([data-key='Backspace'])",
-    );
-    const numbers = "1234567890-=+%/*.()".split("");
-    this.shuffleArray(numbers);
-    keys.forEach((key, index) => {
-      if (index < numbers.length) {
-        key.textContent = numbers[index];
-        key.dataset.key = numbers[index];
-      }
-    });
-  }
-
-  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) => {
-      if (index < englishAlphabet.length) {
-        key.textContent = englishAlphabet[index];
-        key.dataset.key = englishAlphabet[index];
-      }
-    });
-  }
-
-  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) => {
-      if (index < ThaiAlphabet.length) {
-        key.textContent = ThaiAlphabet[index];
-        key.dataset.key = ThaiAlphabet[index];
-      }
-    });
-  }
-
-  // FIX BUG-7: แก้ CSS selector ของ scrambleSymbols
-  scrambleSymbols() {
-    const keys = document.querySelectorAll(
-      ":not([data-key='std']):not([data-key='scr']).key:not([data-key='backspace']):not([data-key='Backspace'])",
-    );
-    const symbols = "@#$%^&*()_+~`{}|\\:'<>?/[]±§¶!€£¥¢©®™℅‰†".split("");
-    this.shuffleArray(symbols);
-    keys.forEach((key, index) => {
-      if (index < symbols.length) {
-        key.textContent = symbols[index];
-        key.dataset.key = symbols[index];
-      }
-    });
-  }
-
-  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];
-      }
-    });
-  }
-
-  // FIX BUG-2: เก็บ bound reference และ cleanup ให้ถูกต้อง
+  //drag
   startDrag(event) {
     this.isDragging = true;
-    this.offsetX =
-      event.clientX - document.getElementById("keyboard").offsetLeft;
-    this.offsetY =
-      event.clientY - document.getElementById("keyboard").offsetTop;
-
+    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);
   }
-
   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`;
   }
-}
+}