flexgui 1.0.0__py3-none-any.whl

flexgui/designer.py

@@ -0,0 +1,1974 @@
+# -*- coding: utf-8 -*-
+"""
+FlexGUI Studio — trình thiết kế trực quan, đồ họa nền tối hiện đại.
+
+Bố cục (kiểu Figma/VS Code):
+
+    ┌──────────────────────────────────────────────────────────────┐
+    │ ◈ FlexGUI Studio · myapp    [Mới][Mở][Lưu] [↶ ↷] [▦ Lưới]     │
+    │                             [Triggers] [Xuất .py] [▲ Build] [▶│
+    ├──────┬───────────────────────────────────────────┬────────────┤
+    │      │   ╔════════════════════════════════╗      │ CỬA SỔ /   │
+    │ PAL  │   ║  ⬜ myapp            ─ □ ✕  ║      │ THÀNH PHẦN │
+    │ ETTE │   ║────────────────────────────────║      │ (thuộc tính)│
+    │ TE   │   ║   vùng thiết kế (kéo thả)      ║      │            │
+    │      │   ╚════════════════════════════════╝      │ [Trigger]  │
+    ├──────┴───────────────────────────────────────────┴────────────┤
+    │ ● Sẵn sàng · X: 12 Y: 34 · Chọn: Button #2 · Lưới 10px        │
+    └──────────────────────────────────────────────────────────────┘
+
+Thiết kế vẽ bằng CANVAS ITEM (không phải widget thật) — kéo thả
+mượt tuyệt đối, KHÔNG TÀN ẢNH, resize 8 núm, multi-select quét vùng,
+snap lưới, undo/redo, mini VS Code cho trigger, xem trước, build .exe.
+"""
+
+import copy
+import heapq
+import json
+import os
+import re
+import traceback
+from pathlib import Path
+
+import tkinter as tk
+import tkinter.font as tkfont
+from tkinter import ttk, messagebox, filedialog, colorchooser, simpledialog
+
+from . import registry as _reg
+from .theme import MAU, MAU_APP, font_ui, font_mono, vien_bo, mau_luoi
+from .editor import TrinhSoanThao
+from .widgets import _tao_tu_du_lieu
+from .app import App
+from .triggers import nap_trigger, SUKIEN_CHINH
+from . import builder
+
+# ==============================================================================
+# HẰNG SỐ BỐ CỤC
+# ==============================================================================
+LE = 36                 # khoảng trống quanh cửa sổ thiết kế (canvas)
+H_TIEU_DE = 36          # chiều cao thanh tiêu đề giả của cửa sổ thiết kế
+KICH_THUOC_MAC_DINH = {  # kích thước px mặc định khi thả mới
+    "label": (None, 26),
+    "button": (140, 40),
+    "input": (220, 34),
+    "checkbox": (170, 28),
+    "text": (300, 150),
+}
+CHU_MAC_DINH = {
+    "label": "Nhãn mới",
+    "button": "Nút bấm",
+    "input": "",
+    "checkbox": "Lựa chọn",
+    "text": "",
+}
+TEN_HIEN_THI = {
+    "label": "Label", "button": "Button", "input": "Input",
+    "checkbox": "Checkbox", "text": "Text",
+}
+CAC_NUT_BAM = ["nw", "n", "ne", "e", "se", "s", "sw", "w"]   # 8 núm resize
+
+MUC_CHEN = [            # snippet cho drawer trigger
+    ("Đếm số lần bấm nút",
+     "so_lan = 0\n\n"
+     "def on_button_1_click():\n"
+     "    global so_lan\n"
+     "    so_lan += 1\n"
+     "    label[1].set_text(f\"Đã bấm {so_lan} lần\")\n"),
+    ("Đổi màu + cỡ chữ",
+     "def on_button_1_click():\n"
+     "    label[1].color = '#d63384'\n"
+     "    label[1].font_size = 16\n"
+     "    label[1].refresh()\n"),
+    ("Hiện / ẩn widget",
+     "def on_checkbox_2_toggle():\n"
+     "    if checkbox[2].checked:\n"
+     "        text[3].show()\n"
+     "    else:\n"
+     "        text[3].hide()\n"),
+    ("Nhập rồi Enter",
+     "def on_input_1_enter():\n"
+     "    ten = input[1].text.strip()\n"
+     "    if ten:\n"
+     "        label[1].set_text(\"Xin chào \" + ten)\n"
+     "        input[1].clear()\n"),
+    ("Đồng hồ mỗi giây",
+     "from datetime import datetime\n\n"
+     "@every(1000)\n"
+     "def dong_ho():\n"
+     "    label[1].set_text(datetime.now().strftime(\"%H:%M:%S\"))\n"),
+    ("Trigger điều kiện",
+     "@when(lambda: checkbox[2].checked and input[1].text == \"admin\")\n"
+     "def khi_du():\n"
+     "    alert(\"Đăng nhập hợp lệ!\")\n"),
+    ("import thư viện ngoài",
+     "import random\n\n"
+     "def on_button_1_click():\n"
+     "    label[1].set_text(\"Số may mắn: \" + str(random.randint(1, 99)))\n"),
+    ("Lệnh app (refresh…)",
+     "def on_button_1_click():\n"
+     "    set_title(\"Tiêu đề mới\")\n"
+     "    set_bg(\"#fff8e1\")\n"
+     "    refresh()\n"),
+]
+
+
+# ==============================================================================
+# Nút phẳng (toolbar) — hover, kiểu accent, kiểu toggle
+# ==============================================================================
+class NutPhang(tk.Label):
+    """Nút phẳng kiểu VS Code — Label + hiệu ứng hover + click."""
+
+    def __init__(self, cha, chu, lenh=None, accent=False, toggle=False,
+                 rong=None, co=9, dam=False):
+        self._trang_thai_bat = False
+        self._lenh = lenh
+        self._toggle = toggle
+        self._accent = accent
+        try:
+            nen_cha = cha.cget("bg")
+        except Exception:
+            nen_cha = MAU["nen"]
+        kw = dict(
+            bg=MAU["gt"] if accent else nen_cha,
+            fg=MAU["chu_sang"] if accent else MAU["chu"],
+            font=font_ui(co, dam), padx=12, pady=6, cursor="hand2")
+        if rong:
+            kw["width"] = rong
+        super().__init__(cha, **kw)
+        self.bind("<Enter>", self._hover)
+        self.bind("<Leave>", self._roi)
+        self.bind("<Button-1>", self._bam)
+
+    # ---------------------------------------------------------------- trạng thái
+    def dat_bat(self, bat):
+        """Bật/tắt trạng thái toggle (nút đang được kích hoạt)."""
+        self._trang_thai_bat = bool(bat)
+        self._ve()
+
+    def dat_chu(self, chu):
+        self.config(text=chu)
+
+    def dat_lenh(self, lenh):
+        self._lenh = lenh
+
+    # ---------------------------------------------------------------- hiệu ứng
+    def _hover(self, _e=None):
+        if self._accent:
+            self.config(bg=MAU["gt_nghi"])
+        elif self._trang_thai_bat:
+            self.config(bg="#094771")
+        else:
+            self.config(bg=MAU["nen_hover"])
+
+    def _roi(self, _e=None):
+        self._ve()
+
+    def _ve(self):
+        if self._accent:
+            self.config(bg=MAU["gt"])
+        elif self._trang_thai_bat:
+            self.config(bg="#094771", fg=MAU["chu_sang"])
+        else:
+            self.config(bg=self.master.cget("bg"), fg=MAU["chu"])
+
+    def _bam(self, _e=None):
+        if self._toggle:
+            self._trang_thai_bat = not self._trang_thai_bat
+            self._ve()
+        if self._lenh:
+            self._lenh()
+
+
+# ==============================================================================
+# STUDIO
+# ==============================================================================
+class Studio:
+    """Trình thiết kế trực quan FlexGUI (mọi thứ vẽ trên canvas — mượt)."""
+
+    def __init__(self, duong_dan=None, thiet_ke_ban_dau=None):
+        self.duong_dan = Path(duong_dan) if duong_dan else None
+        self.duong_json = None
+        self.duong_triggers = None
+        if self.duong_dan is not None:
+            from . import runtime as _rt
+            self.duong_json = _rt.duong_dan_json(self.duong_dan)
+            self.duong_triggers = _rt.duong_dan_triggers(self.duong_dan)
+
+        # ---- dữ liệu thiết kế ----
+        self.design = thiet_ke_ban_dau or self._doc_json() or self._thiet_ke_moi()
+        self.chon = []                    # các id đang chọn (cuối = chính)
+        self.undo_ds = []                 # chồng undo (ảnh chụp)
+        self.redo_ds = []                 # chồng redo
+        self.ban_dau_undo = None          # ảnh chụp trước khi sửa liên tục
+        self.dirty = False
+
+        # ---- quản lý ID (tái sử dụng như runtime) ----
+        ids = [c["id"] for c in self.design["components"]]
+        self._id_tiep_theo = (max(ids) + 1) if ids else 1
+        self._id_tu_do = []
+
+        # ---- cấu hình lưới ----
+        self.luoi_bat = True
+        self.buoc_luoi = 10
+
+        # ---- trạng thái chuột ----
+        self._trang_thai = None            # None/keo/bam/quet
+        self._nhan_x = self._nhan_y = 0
+        self._goc = {}                     # id -> (x, y) lúc bắt đầu kéo
+        self._goc_kich_thuoc = None        # (x, y, w, h) lúc bắt đầu resize
+        self._dda_x = self._dda_y = 0      # tổng dịch đã áp cho canvas.move
+        self._quet_hcn = None              # item vùng quét
+        self._chon_truoc_quet = ()
+        self._hover_id = None
+        self._them_dem = 0                 # so le khi thêm liên tiếp
+
+        self._xay_dung_giao_dien()
+        self._gan_phim()
+
+    # ================================================================== KHỞI TẠO
+    def _xay_dung_giao_dien(self):
+        self.root = tk.Tk()
+        self.root.title("FlexGUI Studio")
+        self.root.geometry("1280x780")
+        self.root.minsize(1024, 640)
+        self.root.configure(bg=MAU["nen"])
+        self._dinh_vi_giua_man_hinh()
+
+        self._tao_thanh_cong_cu()
+        self._tao_than()
+        self._tao_thanh_trang_thai()
+        self._tao_drawer_trigger(an=True)
+
+        self.root.protocol("WM_DELETE_WINDOW", self._khi_dong)
+        self._ve_lai()
+        self._lam_moi_bang_thuoc_tinh()
+        # Focus canvas để phím tắt hoạt động ngay
+        self.ban_ve.focus_set()
+
+    def _dinh_vi_giua_man_hinh(self):
+        """Căn Studio ra giữa màn hình."""
+        x = (self.root.winfo_screenwidth() - 1280) // 2
+        y = (self.root.winfo_screenheight() - 780) // 2
+        self.root.geometry(f"+{max(x, 0)}+{max(y, 0)}")
+
+    # ------------------------------------------------------------- thanh công cụ
+    def _tao_thanh_cong_cu(self):
+        bar = tk.Frame(self.root, bg=MAU["nen"], pady=6, padx=8)
+        bar.pack(fill="x", side="top")
+
+        tk.Label(bar, text="◈", fg=MAU["gt"], bg=MAU["nen"],
+                 font=font_ui(15)).pack(side="left")
+        tk.Label(bar, text="FlexGUI Studio", fg=MAU["chu_sang"],
+                 bg=MAU["nen"], font=font_ui(10, True)).pack(side="left",
+                                                             padx=(4, 2))
+        ten = self.duong_dan.name if self.duong_dan else "chưa lưu"
+        self.nhan_ten_file = tk.Label(bar, text="·  " + ten, fg=MAU["chu_mo"],
+                                      bg=MAU["nen"], font=font_ui(9))
+        self.nhan_ten_file.pack(side="left")
+
+        tk.Frame(bar, bg=MAU["vien"], width=1).pack(side="left", fill="y",
+                                                   padx=8, pady=2)
+        NutPhang(bar, "Mới", self._moi, rong=4).pack(side="left", padx=1)
+        NutPhang(bar, "Mở…", self._mo_file, rong=4).pack(side="left", padx=1)
+        NutPhang(bar, "Lưu", lambda: self._luu_toan_bo(True), rong=4,
+                 dam=True).pack(side="left", padx=1)
+        NutPhang(bar, "↶", self._hoan_tac, rong=2).pack(side="left", padx=1)
+        NutPhang(bar, "↷", self._lam_lai, rong=2).pack(side="left", padx=1)
+
+        tk.Frame(bar, bg=MAU["vien"], width=1).pack(side="left", fill="y",
+                                                   padx=8, pady=2)
+        self.nut_luoi = NutPhang(bar, "▦ Lưới 10px", None, toggle=True,
+                                  rong=9)
+        self.nut_luoi.dat_lenh(self._doi_luoi)
+        self.nut_luoi.pack(side="left", padx=1)
+        self.nut_luoi.dat_bat(True)
+
+        # ---- bên phải ----
+        self.nut_drawer = NutPhang(bar, "⌨ Triggers", self._dao_drawer,
+                                   toggle=True, rong=10)
+        self.nut_drawer.pack(side="right", padx=1)
+        NutPhang(bar, "▲ Xuất .py", self._xuat_py, rong=9).pack(
+            side="right", padx=1)
+        self.nut_build = NutPhang(bar, "📦 Build .exe", self._build_exe,
+                                  rong=9)
+        self.nut_build.pack(side="right", padx=1)
+        NutPhang(bar, "▶  Xem trước", self._xem_truoc, accent=True,
+                 rong=10).pack(side="right", padx=(1, 8))
+        NutPhang(bar, "?", self._mo_tro_giup, rong=2).pack(side="right",
+                                                           padx=1)
+
+    # ------------------------------------------------------------- thân chính
+    def _tao_than(self):
+        self.than = tk.Frame(self.root, bg=MAU["nen"])
+        self.than.pack(fill="both", expand=True)
+        self._tao_palette()
+        self._tao_vung_ve()
+        self._tao_bang_thuoc_tinh()
+
+    def _tao_palette(self):
+        """Bảng thành phần bên trái — gợi ý + nhấp để thêm vào giữa."""
+        pl = tk.Frame(self.than, bg=MAU["nen_panel"], width=86, padx=6,
+                      pady=8)
+        pl.pack(side="left", fill="y")
+        pl.pack_propagate(False)
+        tk.Label(pl, text="THÀNH PHẦN", fg=MAU["chu_mo"], bg=MAU["nen_panel"],
+                 font=font_ui(7, True)).pack(pady=(2, 8))
+        for loai in ("label", "button", "input", "checkbox", "text"):
+            self._o_palette(pl, loai)
+        tk.Label(pl, text="Nhấp để thêm\nvào giữa", fg="#6e6e6e",
+                 bg=MAU["nen_panel"], font=font_ui(7),
+                 justify="center").pack(side="bottom", pady=8)
+
+    def _o_palette(self, cha, loai):
+        """Một ô palette: vẽ mock nhỏ + tên — hover sáng, click thêm."""
+        khung = tk.Frame(cha, bg=MAU["nen_panel"], cursor="hand2")
+        khung.pack(pady=3, ipadx=2, ipady=2)
+        cv = tk.Canvas(khung, width=64, height=40, bg="#ffffff",
+                       highlightthickness=1, highlightbackground=MAU["vien"])
+        cv.pack()
+        self._ve_icon(cv, loai)
+        tk.Label(khung, text=TEN_HIEN_THI[loai], fg=MAU["chu_mo"],
+                 bg=MAU["nen_panel"], font=font_ui(7)).pack(pady=(1, 0))
+        cv.bind("<Button-1>", lambda e, l=loai: self._them(l))
+        cv.bind("<Enter>", lambda e: cv.config(
+            highlightbackground=MAU["gt"]))
+        cv.bind("<Leave>", lambda e: cv.config(
+            highlightbackground=MAU["vien"]))
+
+    def _ve_icon(self, cv, loai):
+        """Vẽ icon mô phỏng cho ô palette."""
+        f = font_ui(8)
+        if loai == "label":
+            cv.create_text(32, 20, text="Aa", fill="#1f2430", font=f)
+        elif loai == "button":
+            vien_bo(cv, 10, 11, 54, 29, 6, fill=MAU_APP["gt_mac_dinh"],
+                    outline="")
+            cv.create_text(32, 20, text="OK", fill="#fff", font=f)
+        elif loai == "input":
+            vien_bo(cv, 8, 13, 56, 27, 5, fill="#ffffff",
+                    outline=MAU_APP["khung"])
+            cv.create_text(14, 20, anchor="w", text="…", fill="#9aa1ab",
+                           font=f)
+        elif loai == "checkbox":
+            cv.create_rectangle(11, 12, 23, 24, fill="#ffffff",
+                                outline="#8a919c")
+            cv.create_line(14, 19, 17, 22, 20, 13, fill=MAU_APP["gt_mac_dinh"],
+                           width=2, capstyle="round", joinstyle="round")
+            cv.create_text(29, 18, anchor="w", text="✓", fill="#1f2430",
+                           font=f)
+        else:  # text
+            cv.create_rectangle(9, 8, 55, 32, fill="#ffffff",
+                                outline=MAU_APP["khung"])
+            for i, y in enumerate((14, 19, 24)):
+                cv.create_rectangle(14, y, 14 + (34 if i < 2 else 22), y + 2,
+                                    fill="#e4e8ee", outline="")
+
+    def _tao_vung_ve(self):
+        """Vùng canvas trung tâm (cuộn được khi cửa sổ thiết kế to)."""
+        vung = tk.Frame(self.than, bg=MAU["nen_den"])
+        vung.pack(side="left", fill="both", expand=True)
+
+        self.ban_ve = tk.Canvas(vung, bg=MAU["nen_den"], highlightthickness=0,
+                                cursor="arrow")
+        self.ban_ve.pack(side="left", fill="both", expand=True)
+
+        # Thanh cuộn tối màu
+        self._dinh_dang_ttk()
+        sb_y = ttk.Scrollbar(vung, orient="vertical",
+                             command=self.ban_ve.yview)
+        sb_y.pack(side="right", fill="y")
+        sb_x = ttk.Scrollbar(vung, orient="horizontal",
+                             command=self.ban_ve.xview)
+        sb_x.pack(side="bottom", fill="x")
+        self.ban_ve.configure(xscrollcommand=sb_x.set,
+                              yscrollcommand=sb_y.set)
+
+        # ---- các item THƯỜNG TRỰC (không tạo/hủy khi kéo → hết tàn ảnh) ----
+        self._vien_chon = self.ban_ve.create_rectangle(
+            0, 0, 0, 0, outline=MAU["vien_chon"], width=2, state="hidden")
+        self._ds_bam = {}
+        for ten in CAC_NUT_BAM:
+            self._ds_bam[ten] = self.ban_ve.create_rectangle(
+                0, 0, 0, 0, fill=MAU["nen_handle"],
+                outline=MAU["vien_chon"], width=1, state="hidden")
+        self._vien_hover = self.ban_ve.create_rectangle(
+            0, 0, 0, 0, outline=MAU["vien_hover"], state="hidden")
+        self._quet_hcn = self.ban_ve.create_rectangle(
+            0, 0, 0, 0, fill=MAU["gt"], stipple="gray50",
+            outline=MAU["gt"], state="hidden")
+        # viên thuốc tọa độ khi kéo
+        self._toa_do_nen = self.ban_ve.create_rectangle(
+            0, 0, 0, 0, fill="#111418", outline=MAU["gt"], state="hidden")
+        self._toa_do_chu = self.ban_ve.create_text(
+            0, 0, text="", fill=MAU["chu_sang"], font=font_ui(8),
+            state="hidden")
+
+        # ---- gắn sự kiện chuột ----
+        cv = self.ban_ve
+        cv.bind("<Button-1>", self._nhan)
+        cv.bind("<B1-Motion>", self._keo)
+        cv.bind("<ButtonRelease-1>", self._tha)
+        cv.bind("<Double-Button-1>", self._nhan_kp)
+        cv.bind("<Button-3>", self._menu_phai)
+        cv.bind("<Motion>", self._di_chuot)
+        cv.bind("<Leave>", lambda e: self._an_toa_do_chuot())
+        cv.bind("<Button-1>", lambda e: cv.focus_set(), add="+")
+        # cuộn bằng con lăn (bỏ qua khi đang gõ trong editor ô nhập)
+        def _lan_doc(e):
+            w = self.root.focus_get()
+            if w is not None and w.winfo_class() in ("Text", "Entry",
+                                                     "TSpinbox", "TEntry"):
+                return
+            self.ban_ve.yview_scroll(-int(e.delta / 120) * 3, "units")
+
+        def _lan_ngang(e):
+            w = self.root.focus_get()
+            if w is not None and w.winfo_class() in ("Text", "Entry",
+                                                     "TSpinbox", "TEntry"):
+                return
+            self.ban_ve.xview_scroll(-int(e.delta / 120) * 3, "units")
+
+        cv.bind_all("<MouseWheel>", _lan_doc)
+        cv.bind_all("<Shift-MouseWheel>", _lan_ngang)
+
+    def _dinh_dang_ttk(self):
+        """Áp style tối cho widget ttk (scrollbar, progressbar...)."""
+        self._phong = ttk.Style()
+        try:
+            self._phong.theme_use("clam")
+        except Exception:
+            pass
+        self._phong.configure("Vertical.TScrollbar",
+                              background=MAU["vien"],
+                              troughcolor=MAU["nen_den"],
+                              bordercolor=MAU["nen_den"],
+                              arrowcolor=MAU["chu_mo"],
+                              arrowsize=11)
+        self._phong.configure("Horizontal.TScrollbar",
+                              background=MAU["vien"],
+                              troughcolor=MAU["nen_den"],
+                              bordercolor=MAU["nen_den"],
+                              arrowcolor=MAU["chu_mo"],
+                              arrowsize=11)
+
+    # ------------------------------------------------------------- bảng thuộc tính
+    def _tao_bang_thuoc_tinh(self):
+        """Panel phải: thuộc tính cửa sổ HOẶC thành phần đang chọn."""
+        self.bang = tk.Frame(self.than, bg=MAU["nen_panel"], width=272)
+        self.bang.pack(side="right", fill="y")
+        self.bang.pack_propagate(False)
+        self.noi_bang = tk.Frame(self.bang, bg=MAU["nen_panel"])
+        self.noi_bang.pack(fill="both", expand=True, padx=10, pady=8)
+
+    def _tao_thanh_trang_thai(self):
+        sb = tk.Frame(self.root, bg="#007acc", pady=3, padx=8)
+        sb.pack(fill="x", side="bottom")
+        f = font_ui(8)
+        self.nhan_trang_thai = tk.Label(sb, text="● Sẵn sàng", bg="#007acc",
+                                        fg="#ffffff", font=f)
+        self.nhan_trang_thai.pack(side="left")
+        self.nhan_toa_do = tk.Label(sb, text="", bg="#007acc", fg="#e8f2fa",
+                                    font=f)
+        self.nhan_toa_do.pack(side="left", padx=16)
+        self.nhan_chon = tk.Label(sb, text="", bg="#007acc", fg="#e8f2fa",
+                                  font=f)
+        self.nhan_chon.pack(side="left")
+        self.nhan_thong_tin = tk.Label(
+            sb, text="Ctrl+S Lưu · F5 Xem trước · Del Xóa · Ctrl+Z Hoàn tác",
+            bg="#007acc", fg="#cfe3f5", font=f)
+        self.nhan_thong_tin.pack(side="right")
+
+    # ------------------------------------------------------------- drawer trigger
+    def _tao_drawer_trigger(self, an=True):
+        """Ngăn kéo dưới cùng: mini VS Code cho myapp.triggers.py."""
+        self.drawer = tk.Frame(self.root, bg=MAU["nen_panel"], height=320)
+        self.drawer.pack_propagate(False)
+
+        dau = tk.Frame(self.drawer, bg="#2d2d2d", padx=8, pady=3)
+        dau.pack(fill="x")
+        self.nhan_tab = tk.Label(
+            dau, text="  ⌨  " + self._ten_triggers() + "  •  Python  •  UTF-8",
+            bg="#2d2d2d", fg=MAU["chu_sang"], font=font_ui(8),
+            anchor="w")
+        self.nhan_tab.pack(side="left")
+        NutPhang(dau, "✕", self._an_drawer, rong=2, co=8).pack(
+            side="right")
+        NutPhang(dau, "Chèn mẫu ▾", self._chen_mau, rong=9, co=8).pack(
+            side="right", padx=4)
+        NutPhang(dau, "💾 Áp dụng & Lưu", lambda: self._ghi_triggers(True),
+                 rong=14, co=8).pack(side="right", padx=4)
+
+        self.editor = TrinhSoanThao(self.drawer)
+        self.editor.pack(fill="both", expand=True, padx=8, pady=(0, 8))
+        self._doc_triggers()
+
+        # Ctrl+S trong editor cũng lưu
+        self.editor.o.bind("<Control-s>",
+                           lambda e: (self._luu_toan_bo(True), "break")[1])
+
+    def _ten_triggers(self):
+        if self.duong_triggers:
+            return self.duong_triggers.name
+        return "triggers.py"
+
+    # ================================================================== VÒNG ĐỜI
+    def chay(self):
+        """Vào mainloop của Studio."""
+        self.root.mainloop()
+
+    def _khi_dong(self):
+        """Đóng Studio — nhắc lưu nếu còn thay đổi."""
+        if self.dirty:
+            dap = messagebox.askyesnocancel(
+                "Thoát FlexGUI Studio",
+                "Thiết kế chưa lưu. Lưu trước khi thoát?")
+            if dap is None:
+                return
+            if dap and not self._luu_toan_bo(im_lang=True):
+                return
+        try:
+            self.root.destroy()
+        except Exception:
+            pass
+
+    # ==================================================================
+    # DỮ LIỆU THIẾT KẾ
+    # ==================================================================
+    def _thiet_ke_moi(self):
+        """Thiết kế trống — giao diện trắng mặc định 860×560."""
+        return {
+            "window": {"title": "Ứng dụng FlexGUI", "width": 860,
+                       "height": 560, "bg": MAU_APP["nen_mac_dinh"]},
+            "components": [],
+        }
+
+    def _doc_json(self):
+        """Nạp myapp.flexgui.json (nếu có)."""
+        if self.duong_json and Path(self.duong_json).exists():
+            try:
+                with open(self.duong_json, "r", encoding="utf-8") as f:
+                    return json.load(f)
+            except Exception:
+                messagebox.showwarning(
+                    "Không đọc được file thiết kế",
+                    f"{self.duong_json}\n\nMở một thiết kế trống mới.")
+        return None
+
+    def _danh_sach(self):
+        return self.design["components"]
+
+    def _comp(self, cid):
+        for d in self._danh_sach():
+            if d["id"] == cid:
+                return d
+        return None
+
+    def _xin_id(self):
+        """ID mới — tái sử dụng ID nhỏ nhất vừa bị xóa (như runtime)."""
+        if self._id_tu_do:
+            return heapq.heappop(self._id_tu_do)
+        self._id_tiep_theo += 1
+        return self._id_tiep_theo - 1
+
+    def _moi(self):
+        """Thiết kế mới (hỏi trước khi xóa)."""
+        if self.dirty:
+            if not messagebox.askyesno(
+                    "Thiết kế mới", "Bỏ thay đổi chưa lưu và tạo mới?"):
+                return
+        self.design = self._thiet_ke_moi()
+        self._id_tiep_theo, self._id_tu_do = 1, []
+        self.chon = []
+        self.undo_ds.clear()
+        self.redo_ds.clear()
+        self.dirty = False
+        self._ve_lai()
+        self._lam_moi_bang_thuoc_tinh()
+
+    def _mo_file(self):
+        """Mở file .flexgui.json khác."""
+        duong = filedialog.askopenfilename(
+            title="Mở thiết kế FlexGUI",
+            filetypes=[("Thiết kế FlexGUI", "*.flexgui.json"),
+                       ("Tất cả", "*.*")])
+        if not duong:
+            return
+        try:
+            with open(duong, "r", encoding="utf-8") as f:
+                self.design = json.load(f)
+        except Exception:
+            messagebox.showerror("Lỗi", "Không đọc được file:\n"
+                                 + traceback.format_exc())
+            return
+        self.duong_json = Path(duong)
+        # file trigger đi kèm: cùng tên, đuôi .triggers.py
+        self.duong_triggers = self.duong_json.parent / (
+            self.duong_json.name[:-len(".flexgui.json")] + ".triggers.py")
+        ids = [c["id"] for c in self._danh_sach()]
+        self._id_tiep_theo = (max(ids) + 1) if ids else 1
+        self._id_tu_do = []
+        self.chon = []
+        self.undo_ds.clear()
+        self.redo_ds.clear()
+        self.dirty = False
+        self.nhan_ten_file.config(text="·  " + self.duong_json.name)
+        self.nhan_tab.config(text="  ⌨  " + self._ten_triggers()
+                             + "  •  Python  •  UTF-8")
+        self._doc_triggers()
+        self._ve_lai()
+        self._lam_moi_bang_thuoc_tinh()
+
+    # ==================================================================
+    # HỆ TOẠ ĐỘ: canvas <-> thiết kế
+    # ==================================================================
+    def _khung(self):
+        """Kích thước vùng client của cửa sổ thiết kế."""
+        return self.design["window"].get("width", 860), \
+            self.design["window"].get("height", 560)
+
+    def _goc_client(self):
+        """Góc trái-trên vùng client TRÊN CANVAS."""
+        return LE, LE + H_TIEU_DE
+
+    def _sang_canvas(self, x, y):
+        gx, gy = self._goc_client()
+        return gx + x, gy + y
+
+    def _sang_thiet_ke(self, cx, cy):
+        gx, gy = self._goc_client()
+        return cx - gx, cy - gy
+
+    def _snap(self, v):
+        if self.luoi_bat:
+            return int(round(v / self.buoc_luoi) * self.buoc_luoi)
+        return int(v)
+
+    # ==================================================================
+    # VẼ
+    # ==================================================================
+    def _ve_lai(self):
+        """Vẽ lại toàn bộ (khung cửa sổ + lưới + mọi thành phần)."""
+        cv = self.ban_ve
+        cv.delete("cua_so", "luoi", "comp", "goi_y")
+        self._ve_cua_so()
+        self._ve_luoi()
+        for d in self._danh_sach():
+            self._ve_comp(d)
+        if not self._danh_sach():
+            self._ve_goi_y()
+        self._cap_nhat_vien_chon()
+        self._cap_nhat_trang_thai()
+
+    def _ve_cua_so(self):
+        """Khung cửa sổ giả: bóng đổ + thanh tiêu đề + nút cửa sổ."""
+        cv = self.ban_ve
+        w, h = self._khung()
+        nen = self.design["window"].get("bg") or MAU_APP["nen_mac_dinh"]
+        tieu_de = self.design["window"].get("title", "FlexGUI")
+        x0, y0 = LE, LE
+        x1, y1 = LE + w, LE + H_TIEU_DE + h
+        # bóng đổ 2 lớp
+        cv.create_rectangle(x0 + 7, y0 + 7, x1 + 7, y1 + 7,
+                            fill=MAU["soi_bong_1"], outline="", tags="cua_so")
+        cv.create_rectangle(x0 + 3, y0 + 3, x1 + 3, y1 + 3,
+                            fill=MAU["soi_bong_2"], outline="", tags="cua_so")
+        # thân
+        cv.create_rectangle(x0, y0, x1, y1, fill=nen,
+                            outline=MAU["khung_so"], tags="cua_so")
+        # thanh tiêu đề
+        cv.create_rectangle(x0, y0, x1, y0 + H_TIEU_DE,
+                            fill=MAU["thanh_tieu_de"], outline="",
+                            tags="cua_so")
+        cv.create_line(x0, y0 + H_TIEU_DE, x1, y0 + H_TIEU_DE,
+                       fill="#e3e6ea", tags="cua_so")
+        vien_bo(cv, x0 + 12, y0 + 9, x0 + 24, y0 + 21, 4,
+                fill=MAU_APP["gt_mac_dinh"], outline="", tags="cua_so")
+        cv.create_text(x0 + 18, y0 + 15, text="◈", fill="#ffffff",
+                       font=font_ui(8, True), tags="cua_so")
+        cv.create_text(x0 + 34, y0 + H_TIEU_DE / 2, text=tieu_de,
+                       anchor="w", fill="#3b4048", font=font_ui(9, True),
+                       tags="cua_so")
+        # nút cửa sổ (Windows style)
+        for i, chu in enumerate(("—", "☐", "✕")):
+            nx = x1 - 96 + i * 32
+            cv.create_rectangle(nx, y0, nx + 32, y0 + H_TIEU_DE,
+                                fill=MAU["thanh_tieu_de"], outline="",
+                                tags="cua_so")
+            cv.create_text(nx + 16, y0 + H_TIEU_DE / 2, text=chu,
+                           fill="#8a919c", font=font_ui(8), tags="cua_so")
+        # vùng cuộn theo kích thước cửa sổ
+        cv.configure(scrollregion=(0, 0, x1 + LE, y1 + LE))
+        # cuộn về gốc
+        cv.xview_moveto(0)
+        cv.yview_moveto(0)
+
+    def _ve_luoi(self):
+        """Lưới điểm gián đoạn trong vùng client (màu tương phản nền)."""
+        cv = self.ban_ve
+        w, h = self._khung()
+        gx, gy = self._goc_client()
+        mau = mau_luoi(self.design["window"].get("bg")
+                       or MAU_APP["nen_mac_dinh"])
+        buoc = self.buoc_luoi
+        x = gx + buoc
+        while x < gx + w:
+            cv.create_line(x, gy, x, gy + h, fill=mau, tags="luoi")
+            x += buoc * 2                     # giãn đôi → nhìn nhẹ hơn
+        y = gy + buoc
+        while y < gy + h:
+            cv.create_line(gx, y, gx + w, y, fill=mau, tags="luoi")
+            y += buoc * 2
+
+    def _ve_goi_y(self):
+        """Gợi ý giữa vùng trống khi chưa có thành phần nào."""
+        cv = self.ban_ve
+        w, h = self._khung()
+        gx, gy = self._goc_client()
+        cv.create_text(
+            gx + w / 2, gy + h / 2 - 12,
+            text="Giao diện trống — nhấp một thành phần ở bảng bên trái\n"
+                 "để thêm vào đây (kéo thả, snap lưới, resize 8 núm)",
+            fill="#aeb4bf", font=font_ui(11), justify="center",
+            tags="goi_y")
+
+    def _doi_luoi(self):
+        """Bật/tắt lưới + snap (nút ▦ trên toolbar)."""
+        self.luoi_bat = not self.luoi_bat
+        self.nut_luoi.dat_bat(self.luoi_bat)
+        if self.luoi_bat:
+            self._ve_lai()
+        else:
+            self.ban_ve.delete("luoi")
+            self._cap_nhat_trang_thai(
+                "● Tắt lưới — kéo thả hoàn toàn tự do")
+
+    def _ve_comp(self, d):
+        """Vẽ MỘT thành phần theo đúng loại (đồ họa mô phỏng hiện đại)."""
+        cv = self.ban_ve
+        X, Y = self._sang_canvas(d["x"], d["y"])
+        w, h = d.get("w") or 100, d.get("h") or 30
+        tag = ("comp", f"c{d['id']}")
+        nen_cua_so = self.design["window"].get("bg") or \
+            MAU_APP["nen_mac_dinh"]
+        co = d.get("font_size") or 10
+        mau_chu = d.get("color") or "#1f2430"
+
+        # hit-rect trong suốt (đón chuột) — luôn nằm dưới cùng của comp
+        cv.create_rectangle(X, Y, X + w, Y + h, fill=nen_cua_so,
+                            outline="", tags=tag)
+
+        if d["loai"] == "label":
+            cv.create_text(X, Y + h / 2, anchor="w", text=d.get("text") or "",
+                           fill=mau_chu, font=font_ui(co), tags=tag)
+
+        elif d["loai"] == "button":
+            mau_nen = d.get("bg") or MAU_APP["gt_mac_dinh"]
+            vien_bo(cv, X, Y, X + w, Y + h, 8, fill=mau_nen, outline="",
+                    tags=tag)
+            cv.create_text(X + w / 2, Y + h / 2, text=d.get("text") or "",
+                           fill="#ffffff" if not d.get("color") else mau_chu,
+                           font=font_ui(co), tags=tag)
+
+        elif d["loai"] == "input":
+            vien_bo(cv, X, Y, X + w, Y + h, 6, fill=d.get("bg") or "#ffffff",
+                    outline=d.get("bg") or MAU_APP["khung"], tags=tag)
+            chu = (d.get("text") or "").strip()
+            cv.create_text(X + 8, Y + h / 2, anchor="w",
+                           text=chu or "Ô nhập…",
+                           fill=mau_chu if chu else "#b8bec8",
+                           font=font_ui(co), tags=tag)
+
+        elif d["loai"] == "checkbox":
+            c = 16
+            cy = Y + (h - c) / 2
+            cv.create_rectangle(X, cy, X + c, cy + c, fill="#ffffff",
+                                outline="#8a919c", tags=tag)
+            if d.get("checked"):
+                cv.create_rectangle(X + 2, cy + 2, X + c - 2, cy + c - 2,
+                                    fill=MAU_APP["gt_mac_dinh"], outline="",
+                                    tags=tag)
+                cv.create_line(X + 4, cy + 8, X + 7, cy + 11, X + 12,
+                               cy + 4, fill="#ffffff", width=2,
+                               capstyle="round", joinstyle="round",
+                               tags=tag)
+            cv.create_text(X + c + 8, Y + h / 2, anchor="w",
+                           text=d.get("text") or "", fill=mau_chu,
+                           font=font_ui(co), tags=tag)
+
+        elif d["loai"] == "text":
+            cv.create_rectangle(X, Y, X + w, Y + h,
+                                fill=d.get("bg") or "#ffffff",
+                                outline=MAU_APP["khung"], tags=tag)
+            # thanh cuộn giả bên phải
+            cv.create_rectangle(X + w - 8, Y + 3, X + w - 3, Y + h - 3,
+                                fill="#eef1f5", outline="", tags=tag)
+            noi_dung = (d.get("text") or "").strip()
+            if noi_dung:
+                for i, dong in enumerate(noi_dung.split("\n")[:3]):
+                    cv.create_text(X + 8, Y + 8 + i * 16, anchor="w",
+                                   text=dong[:40], fill=mau_chu,
+                                   font=font_ui(co), tags=tag)
+            else:
+                for i in range(3):
+                    cv.create_rectangle(X + 8, Y + 10 + i * 16,
+                                        X + 8 + (w - 34 if i < 2 else 20),
+                                        Y + 14 + i * 16,
+                                        fill="#e4e8ee", outline="", tags=tag)
+
+        # huy hiệu trạng thái đặc biệt
+        if not d.get("visible", True):
+            cv.create_rectangle(X, Y, X + w, Y + h, fill="#5b21b6",
+                                stipple="gray25", outline="#8b5cf6",
+                                dash=(4, 3), tags=tag)
+            vien_bo(cv, X + w - 44, Y + 4, X + w - 4, Y + 20, 5,
+                    fill="#8b5cf6", outline="", tags=tag)
+            cv.create_text(X + w - 24, Y + 12, text="ẨN", fill="#ffffff",
+                           font=font_ui(7, True), tags=tag)
+        if not d.get("enabled", True):
+            vien_bo(cv, X + 4, Y + h - 20, X + 40, Y + h - 4, 5,
+                    fill="#6b7280", outline="", tags=tag)
+            cv.create_text(X + 22, Y + h - 12, text="KHOÁ", fill="#ffffff",
+                           font=font_ui(7, True), tags=tag)
+
+    def _ve_comp_tu_dong(self, cid):
+        """Vẽ lại 1 comp, giữ đúng thứ tự chồng lớp."""
+        d = self._comp(cid)
+        if not d:
+            return
+        self.ban_ve.delete(f"c{cid}")
+        self._ve_comp(d)
+        # nâng lại các comp nằm TRÊN nó trong z-order
+        ds = self._danh_sach()
+        vi_tri = next(i for i, c in enumerate(ds) if c["id"] == cid)
+        for c in ds[vi_tri + 1:]:
+            self.ban_ve.tag_raise(f"c{c['id']}")
+
+    # ----------------------------------------------------- viền chọn + núm
+    def _cap_nhat_vien_chon(self):
+        """Cập nhật viền chọn + 8 núm resize (chỉ coords — không tạo mới)."""
+        cv = self.ban_ve
+        cv.delete("vien_phu")
+        if not self.chon:
+            cv.itemconfigure(self._vien_chon, state="hidden")
+            for it in self._ds_bam.values():
+                cv.itemconfigure(it, state="hidden")
+            return
+        chinh = self._comp(self.chon[-1])
+        if chinh is None:
+            cv.itemconfigure(self._vien_chon, state="hidden")
+            return
+        # viền phụ cho các comp chọn thêm (trừ comp chính)
+        for cid in self.chon[:-1]:
+            d = self._comp(cid)
+            if d:
+                a, b = self._sang_canvas(d["x"], d["y"])
+                r = cv.create_rectangle(
+                    a - 1, b - 1, a + (d.get("w") or 100) + 1,
+                    b + (d.get("h") or 30) + 1,
+                    outline=MAU["vien_chon"], width=1, tags="vien_phu")
+                cv.tag_lower(r, self._vien_chon)
+        X, Y = self._sang_canvas(chinh["x"], chinh["y"])
+        w, h = chinh.get("w") or 100, chinh.get("h") or 30
+        cv.coords(self._vien_chon, X - 1, Y - 1, X + w + 1, Y + h + 1)
+        cv.itemconfigure(self._vien_chon, state="normal")
+        cv.tag_raise(self._vien_chon)
+        self._dat_bam(X, Y, w, h)
+        self._cap_nhat_chon_trang_thai()
+
+    def _dat_bam(self, X, Y, w, h):
+        """Đặt 8 núm quanh hình chữ nhật (canvas coords)."""
+        cv = self.ban_ve
+        r = 4        # nửa kích thước núm
+        vi_tri = {
+            "nw": (X, Y), "n": (X + w / 2, Y), "ne": (X + w, Y),
+            "e": (X + w, Y + h / 2), "se": (X + w, Y + h),
+            "s": (X + w / 2, Y + h), "sw": (X, Y + h), "w": (X, Y + h / 2),
+        }
+        for ten, (x, y) in vi_tri.items():
+            it = self._ds_bam[ten]
+            cv.coords(it, x - r, y - r, x + r, y + r)
+            cv.itemconfigure(it, state="normal")
+            cv.tag_raise(it)
+
+    def _an_bam(self):
+        for it in self._ds_bam.values():
+            self.ban_ve.itemconfigure(it, state="hidden")
+
+    # ----------------------------------------------------- trạng thái / toast
+    def _cap_nhat_trang_thai(self, chu=None):
+        if chu is not None:
+            self.nhan_trang_thai.config(text=chu)
+        self.nhan_thong_tin.config(
+            text=f"{len(self._danh_sach())} thành phần · Lưới "
+                 f"{'Bật' if self.luoi_bat else 'Tắt'} {self.buoc_luoi}px")
+
+    def _cap_nhat_chon_trang_thai(self):
+        if not self.chon:
+            self.nhan_chon.config(text="")
+            return
+        if len(self.chon) == 1:
+            d = self._comp(self.chon[0])
+            self.nhan_chon.config(
+                text=f"Đang chọn: {TEN_HIEN_THI[d['loai']]} #{d['id']}")
+        else:
+            self.nhan_chon.config(text=f"Đang chọn: {len(self.chon)} thành phần")
+
+    def _toast(self, chu, mau="#2d2d30"):
+        """Thông báo nổi dưới đáy canvas (tự ẩn sau 2 giây)."""
+        if getattr(self, "_toast_phu", None) is not None:
+            try:
+                self._toast_phu.destroy()
+            except Exception:
+                pass
+        phu = tk.Frame(self.ban_ve, bg=mau, highlightthickness=1,
+                       highlightbackground=MAU["vien"])
+        tk.Label(phu, text=chu, bg=mau, fg=MAU["chu_sang"],
+                 font=font_ui(9), padx=14, pady=6).pack()
+        phu.place(relx=0.5, rely=1.0, y=-46, anchor="s")
+        self._toast_phu = phu
+        self.root.after(2000, lambda: phu.destroy()
+                        if phu.winfo_exists() else None)
+
+    # ==================================================================
+    # TƯƠNG TÁC CHUỘT
+    # ==================================================================
+    def _tim_comp_tai(self, x, y):
+        """Comp chứa điểm canvas (x, y) — duyệt từ trên xuống."""
+        for d in reversed(self._danh_sach()):
+            a, b = self._sang_canvas(d["x"], d["y"])
+            if a <= x <= a + (d.get("w") or 100) and \
+                    b <= y <= b + (d.get("h") or 30):
+                return d
+        return None
+
+    def _bam_tai(self, x, y):
+        """Tên núm resize tại điểm (nếu có) — đếm cả vùng đệm 6px."""
+        if not self.chon:
+            return None
+        chinh = self._comp(self.chon[-1])
+        if not chinh:
+            return None
+        X, Y = self._sang_canvas(chinh["x"], chinh["y"])
+        w, h = chinh.get("w") or 100, chinh.get("h") or 30
+        tam = {"nw": (X, Y), "n": (X + w / 2, Y), "ne": (X + w, Y),
+               "e": (X + w, Y + h / 2), "se": (X + w, Y + h),
+               "s": (X + w / 2, Y + h), "sw": (X, Y + h), "w": (X, Y + h / 2)}
+        for ten, (cx, cy) in tam.items():
+            if abs(x - cx) <= 7 and abs(y - cy) <= 7:
+                return ten
+        return None
+
+    def _nhan(self, e):
+        """Nhấn chuột trái: chọn / bắt đầu kéo / resize / quét vùng."""
+        cv = self.ban_ve
+        cv.focus_set()
+        self._nhan_x, self._nhan_y = e.x, e.y
+        self._dda_x = self._dda_y = 0
+
+        bam = self._bam_tai(e.x, e.y)
+        if bam:
+            self._trang_thai = "bam"
+            chinh = self._comp(self.chon[-1])
+            self._goc_kich_thuoc = (chinh["x"], chinh["y"],
+                                    chinh.get("w") or 100,
+                                    chinh.get("h") or 30)
+            self._bam_ten = bam
+            self._chup_truoc_khi_sua()        # undo resize = hình gốc
+            cv.configure(cursor="fleur")
+            return
+
+        d = self._tim_comp_tai(e.x, e.y)
+        if d is not None:
+            them = e.state & 0x0004          # Ctrl
+            them_hoac = e.state & 0x0001      # Shift
+            if them or them_hoac:
+                if d["id"] in self.chon:
+                    self.chon.remove(d["id"])
+                else:
+                    self.chon.append(d["id"])
+            else:
+                if d["id"] in self.chon:
+                    self.chon.remove(d["id"])
+                self.chon.append(d["id"])
+            self._cap_nhat_vien_chon()
+            # bắt đầu kéo cả cụm
+            self._trang_thai = "keo"
+            self._goc = {cid: (self._comp(cid)["x"], self._comp(cid)["y"])
+                         for cid in self.chon}
+            self._chup_truoc_khi_sua()
+            cv.configure(cursor="fleur")
+            return
+
+        # vùng trống → quét vùng chọn
+        if not (e.state & (0x0004 | 0x0001)):
+            self.chon = []
+            self._cap_nhat_vien_chon()
+        self._chon_truoc_quet = tuple(self.chon)
+        self._trang_thai = "quet"
+        cv.itemconfigure(self._quet_hcn, state="normal")
+        cv.coords(self._quet_hcn, e.x, e.y, e.x, e.y)
+        cv.configure(cursor="crosshair")
+
+    def _keo(self, e):
+        """Kéo chuột: di chuyển cụm / resize / quét vùng."""
+        cv = self.ban_ve
+        self._chuot_x, self._chuot_y = e.x, e.y
+        if self._trang_thai == "keo":
+            dx = e.x - self._nhan_x
+            dy = e.y - self._nhan_y
+            if not self.chon:
+                return
+            chinh = self._comp(self.chon[-1])
+            gx, gy = self._goc.get(chinh["id"], (chinh["x"], chinh["y"]))
+            nx = self._snap(gx + dx)
+            ny = self._snap(gy + dy)
+            ddx, ddy = nx - gx, ny - gy
+            for cid in self.chon:
+                d = self._comp(cid)
+                ox, oy = self._goc.get(cid, (d["x"], d["y"]))
+                d["x"], d["y"] = ox + ddx, oy + ddy
+                # di chuyển item canvas MƯỢT (không vẽ lại → hết tàn ảnh)
+                cv.move(f"c{cid}", ddx - self._dda_x, ddy - self._dda_y)
+            self._dda_x, self._dda_y = ddx, ddy
+            self._cap_nhat_vien_chon()
+            self._hien_toa_do(nx, ny)
+            self.dirty = True
+
+        elif self._trang_thai == "bam":
+            self._keo_bam(e)
+
+        elif self._trang_thai == "quet":
+            cv.coords(self._quet_hcn, self._nhan_x, self._nhan_y,
+                      e.x, e.y)
+            x0, x1 = sorted((self._nhan_x, e.x))
+            y0, y1 = sorted((self._nhan_y, e.y))
+            self.chon = list(self._chon_truoc_quet)
+            for d in self._danh_sach():
+                a, b = self._sang_canvas(d["x"], d["y"])
+                if a <= x1 and a + (d.get("w") or 100) >= x0 and \
+                        b <= y1 and b + (d.get("h") or 30) >= y0:
+                    if d["id"] not in self.chon:
+                        self.chon.append(d["id"])
+            self._cap_nhat_vien_chon()
+
+    def _keo_bam(self, e):
+        """Kéo núm resize — tính từ hình gốc, snap biên, cỡ tối thiểu."""
+        cv = self.ban_ve
+        self._chuot_x, self._chuot_y = e.x, e.y
+        cid = self.chon[-1]
+        d = self._comp(cid)
+        gx, gy, gw, gh = self._goc_kich_thuoc
+        dx = e.x - self._nhan_x
+        dy = e.y - self._nhan_y
+        ten = self._bam_ten
+        x, y, w, h = gx, gy, gw, gh
+
+        if "e" in ten:
+            w = self._snap(gx + gw + dx) - gx
+        if "s" in ten:
+            h = self._snap(gy + gh + dy) - gy
+        if "w" in ten:
+            x_moi = self._snap(gx + dx)
+            w = gx + gw - x_moi
+            x = x_moi
+        if "n" in ten:
+            y_moi = self._snap(gy + dy)
+            h = gy + gh - y_moi
+            y = y_moi
+        w = max(16, w)
+        h = max(14, h)
+        d.update(x=x, y=y, w=w, h=h)
+        self._ve_comp_tu_dong(cid)
+        self._cap_nhat_vien_chon()
+        self._hien_toa_do(x, y, w, h)
+        self.dirty = True
+
+    def _tha(self, e):
+        """Nhả chuột: kết thúc kéo/resize/quét."""
+        cv = self.ban_ve
+        if self._trang_thai in ("keo", "bam"):
+            self._day_undo()
+            self._lam_moi_bang_thuoc_tinh()
+        elif self._trang_thai == "quet":
+            self._cap_nhat_vien_chon()
+        self._trang_thai = None
+        self._an_toa_do()
+        cv.itemconfigure(self._quet_hcn, state="hidden")
+        cv.configure(cursor="arrow")
+
+    def _di_chuot(self, e):
+        """Rê chuột: viền hover + tọa độ trên thanh trạng thái."""
+        dx, dy = self._sang_thiet_ke(e.x, e.y)
+        w, h = self._khung()
+        self.nhan_toa_do.config(
+            text=f"X: {min(max(dx, 0), w)}  Y: {min(max(dy, 0), h)}")
+        if self._trang_thai:
+            return
+        cv = self.ban_ve
+        bam = self._bam_tai(e.x, e.y)
+        if bam:
+            cv.configure(cursor="fleur")
+            cv.itemconfigure(self._vien_hover, state="hidden")
+            return
+        d = self._tim_comp_tai(e.x, e.y)
+        if d is not None and d["id"] not in self.chon:
+            X, Y = self._sang_canvas(d["x"], d["y"])
+            cv.coords(self._vien_hover, X - 1, Y - 1,
+                      X + (d.get("w") or 100) + 1,
+                      Y + (d.get("h") or 30) + 1)
+            cv.itemconfigure(self._vien_hover, state="normal")
+            cv.configure(cursor="hand2")
+            self._hover_id = d["id"]
+        else:
+            cv.itemconfigure(self._vien_hover, state="hidden")
+            cv.configure(cursor="arrow")
+            self._hover_id = None
+
+    def _an_toa_do_chuot(self):
+        self.nhan_toa_do.config(text="")
+
+    # ----------------------------------------------------- viên thuốc tọa độ
+    def _hien_toa_do(self, x, y, w=None, h=None):
+        """Viên thuốc tọa độ bay theo con trỏ khi kéo/resize."""
+        cv = self.ban_ve
+        chu = (f"x: {x}  y: {y}" if w is None
+               else f"x: {x}  y: {y}  w: {w}  h: {h}")
+        try:
+            f = tkfont.Font(font=font_ui(8))
+            rong = f.measure(chu)
+        except Exception:
+            rong = 9 * len(chu)
+        mx = getattr(self, "_chuot_x", 0)
+        my = getattr(self, "_chuot_y", 0)
+        cx = min(max(mx + 18, LE + 4), max(LE + 4, cv.winfo_width() - rong - 40))
+        cy = max(6, my - 44)
+        cv.coords(self._toa_do_nen, cx, cy, cx + rong + 18, cy + 22)
+        cv.coords(self._toa_do_chu, cx + 9, cy + 11)
+        cv.itemconfigure(self._toa_do_chu, text=chu, state="normal")
+        cv.itemconfigure(self._toa_do_nen, state="normal")
+        cv.tag_raise(self._toa_do_nen)
+        cv.tag_raise(self._toa_do_chu)
+
+    def _an_toa_do(self):
+        self.ban_ve.itemconfigure(self._toa_do_chu, state="hidden")
+        self.ban_ve.itemconfigure(self._toa_do_nen, state="hidden")
+
+    # ==================================================================
+    # THAO TÁC: THÊM / XÓA / NHÂN BẢN / Z-ORDER
+    # ==================================================================
+    def _them(self, loai, x=None, y=None):
+        """Thêm thành phần mới (nhấp palette → giữa, so le mỗi lần)."""
+        anh_truoc = self._chup()               # ảnh TRƯỚC khi thêm (undo)
+        w, h = KICH_THUOC_MAC_DINH[loai]
+        chu = CHU_MAC_DINH[loai]
+        if loai == "label" and w is None:      # đo rộng theo chữ
+            try:
+                f = tkfont.Font(font=font_ui(10))
+                w = f.measure(chu) + 8
+            except Exception:
+                w = 80
+        if x is None or y is None:
+            kw, kh = self._khung()
+            x = (kw - (w or 100)) // 2 + (self._them_dem % 6) * 14
+            y = (kh - (h or 26)) // 2 + (self._them_dem % 6) * 14
+            self._them_dem += 1
+        d = {"loai": loai, "id": self._xin_id(),
+             "x": self._snap(x), "y": self._snap(y),
+             "w": w or 100, "h": h or 26, "text": chu,
+             "color": None, "bg": None, "font_size": None,
+             "visible": True, "enabled": True,
+             "checked": False if loai == "checkbox" else None}
+        self._danh_sach().append(d)
+        self.chon = [d["id"]]
+        self._ve_lai()
+        self._lam_moi_bang_thuoc_tinh()
+        self._day_undo(anh_truoc)
+        self.dirty = True
+        self._cap_nhat_trang_thai(
+            f"● Đã thêm {TEN_HIEN_THI[loai]} #{d['id']}")
+
+    def _xoa_dang_chon(self):
+        """Xóa các thành phần đang chọn — ID trả về pool TÁI SỬ DỤNG."""
+        if not self.chon:
+            return
+        anh_truoc = self._chup()               # ảnh TRƯỚC khi xóa (undo)
+        ds = self._danh_sach()
+        da_xoa = [d for d in ds if d["id"] in self.chon]
+        self.design["components"] = [d for d in ds
+                                     if d["id"] not in self.chon]
+        for d in da_xoa:
+            heapq.heappush(self._id_tu_do, d["id"])   # trả ID về pool
+        ten = ", ".join(f"{TEN_HIEN_THI[d['loai']]}#{d['id']}"
+                        for d in da_xoa)
+        self.chon = []
+        self._ve_lai()
+        self._lam_moi_bang_thuoc_tinh()
+        self._day_undo(anh_truoc)
+        self.dirty = True
+        self._cap_nhat_trang_thai(f"● Đã xóa: {ten}")
+        if da_xoa:
+            self._toast(f"Đã xóa {len(da_xoa)} thành phần — "
+                       f"thành phần mới sẽ nhận lại ID vừa xóa")
+
+    def _nhan_ban(self):
+        """Nhân bản các thành phần đang chọn (ID mới, lệch +14px)."""
+        if not self.chon:
+            return
+        anh_truoc = self._chup()
+        ds = self._danh_sach()
+        moi = []
+        for cid in self.chon:
+            goc = self._comp(cid)
+            if not goc:
+                continue
+            d = copy.deepcopy(goc)
+            d["id"] = self._xin_id()
+            d["x"] += 14
+            d["y"] += 14
+            ds.append(d)
+            moi.append(d["id"])
+        self.chon = moi
+        self._ve_lai()
+        self._lam_moi_bang_thuoc_tinh()
+        self._day_undo(anh_truoc)
+        self.dirty = True
+
+    def _doi_z(self, lenh):
+        """Đổi thứ tự chồng lớp: len / xuong / tren / duoi."""
+        if not self.chon:
+            return
+        anh_truoc = self._chup()
+        ds = self._danh_sach()
+        chinh = self._comp(self.chon[-1])
+        if not chinh:
+            return
+        i = ds.index(chinh)
+        ds.pop(i)
+        if lenh == "len":
+            ds.insert(min(i + 1, len(ds)), chinh)
+        elif lenh == "xuong":
+            ds.insert(max(i - 1, 0), chinh)
+        elif lenh == "tren":
+            ds.append(chinh)
+        else:
+            ds.insert(0, chinh)
+        self._ve_lai()
+        self._day_undo(anh_truoc)
+        self.dirty = True
+
+    # ==================================================================
+    # UNDO / REDO (ảnh chụp thiết kế)
+    # ==================================================================
+    def _chup(self):
+        return copy.deepcopy(
+            {"window": self.design["window"],
+             "components": self.design["components"]})
+
+    def _chup_truoc_khi_sua(self):
+        """Lưu ảnh trước khi sửa liên tục (kéo nhiều bước = 1 undo)."""
+        if self.ban_dau_undo is None:
+            self.ban_dau_undo = self._chup()
+
+    def _day_undo(self, anh=None):
+        """Đưa ảnh TRƯỚC KHI SỬA vào chồng undo — gọi khi thao tác xong.
+
+        Ưu tiên ảnh truyền vào, rồi đến ban_dau_undo (kéo/sửa liên tục),
+        cuối cùng là ảnh hiện tại (fallback an toàn).
+        """
+        if anh is None and self.ban_dau_undo is not None:
+            anh, self.ban_dau_undo = self.ban_dau_undo, None
+        if anh is None:
+            anh = self._chup()
+        self.undo_ds.append(anh)
+        if len(self.undo_ds) > 80:
+            self.undo_ds.pop(0)
+        self.redo_ds.clear()
+
+    def _phuc_hoi(self, anh):
+        self.design["window"] = copy.deepcopy(anh["window"])
+        self.design["components"] = copy.deepcopy(anh["components"])
+        ids = [c["id"] for c in self.design["components"]]
+        self._id_tiep_theo = (max(ids) + 1) if ids else 1
+        self._id_tu_do = []
+        self.chon = [cid for cid in self.chon if cid in ids]
+        self._ve_lai()
+        self._lam_moi_bang_thuoc_tinh()
+        self.dirty = True
+
+    def _hoan_tac(self):
+        if not self.undo_ds:
+            self._toast("Không còn gì để hoàn tác")
+            return
+        self.redo_ds.append(self._chup())
+        self._phuc_hoi(self.undo_ds.pop())
+        self._cap_nhat_trang_thai("● Đã hoàn tác")
+
+    def _lam_lai(self):
+        if not self.redo_ds:
+            self._toast("Không còn gì để làm lại")
+            return
+        self.undo_ds.append(self._chup())
+        self._phuc_hoi(self.redo_ds.pop())
+        self._cap_nhat_trang_thai("● Đã làm lại")
+
+    # ==================================================================
+    # BẢNG THUỘC TÍNH (phải)
+    # ==================================================================
+    def _lam_moi_bang_thuoc_tinh(self):
+        """Vẽ lại panel phải theo trạng thái chọn."""
+        for w in self.noi_bang.winfo_children():
+            w.destroy()
+        if self.chon:
+            self._bang_thanh_phan()
+        else:
+            self._bang_cua_so()
+
+    def _tieu_de_bang(self, chu):
+        tk.Label(self.noi_bang, text=chu, fg=MAU["chu_mo"],
+                 bg=MAU["nen_panel"], font=font_ui(7, True),
+                 anchor="w").pack(fill="x", pady=(10, 4))
+
+    def _hang(self, nhan, widget):
+        """Một hàng: nhãn trái + control phải."""
+        f = tk.Frame(self.noi_bang, bg=MAU["nen_panel"])
+        f.pack(fill="x", pady=2)
+        tk.Label(f, text=nhan, fg=MAU["chu"], bg=MAU["nen_panel"],
+                 font=font_ui(8), width=9, anchor="w").pack(side="left")
+        widget.pack(side="left", fill="x", expand=True)
+        return f
+
+    def _o_nhap(self, gia_tri, lenh, chi_so=False, rong=8):
+        """Entry tối màu — commit khi rời ô hoặc Enter."""
+        o = tk.Entry(self.noi_bang, bg="#3c3c3c", fg=MAU["chu_sang"],
+                     insertbackground=MAU["chu_sang"], relief="flat",
+                     highlightthickness=1, font=font_ui(8),
+                     highlightbackground=MAU["vien"],
+                     highlightcolor=MAU["gt"])
+        o.insert(0, str(gia_tri if gia_tri is not None else ""))
+        o.pack_propagate(False)
+
+        def _cam_ket(_e=None):
+            v = o.get().strip()
+            if chi_so:
+                try:
+                    v = int(float(v))
+                except ValueError:
+                    return
+            lenh(v)
+        o.bind("<Return>", _cam_ket)
+        o.bind("<FocusOut>", _cam_ket)
+        return o
+
+    def _o_mau(self, mau_hien_tai, lenh):
+        """Swatch màu + click chọn + chuột phải đặt lại mặc định."""
+        f = tk.Frame(self.noi_bang, bg=MAU["nen_panel"])
+        sw = tk.Label(f, width=3, height=1, bd=0, cursor="hand2",
+                      bg=mau_hien_tai or "#3c3c3c",
+                      highlightthickness=1,
+                      highlightbackground=MAU["vien"])
+
+        def _chon():
+            m = colorchooser.askcolor(parent=self.root)[1]
+            if m:
+                sw.config(bg=m)
+                lenh(m)
+
+        def _dat_lai(_e=None):
+            sw.config(bg="#3c3c3c")
+            lenh(None)
+        sw.bind("<Button-1>", lambda e: _chon())
+        sw.bind("<Button-3>", _dat_lai)
+        sw.pack(side="left")
+        tk.Label(f, text="chuột phải = mặc định", fg=MAU["chu_mo"],
+                 bg=MAU["nen_panel"], font=font_ui(7)).pack(side="left",
+                                                            padx=6)
+        return f
+
+    # ----------------------------------------------------- bảng cửa sổ
+    def _bang_cua_so(self):
+        win = self.design["window"]
+        self._tieu_de_bang("CỬA SỔ ỨNG DỤNG")
+
+        def _dat(k, ep_kieu=None):
+            def f(v):
+                self._chup_truoc_khi_sua()
+                if ep_kieu:
+                    try:
+                        v = ep_kieu(v)
+                    except (TypeError, ValueError):
+                        return
+                win[k] = v
+                self.dirty = True
+                if k in ("width", "height", "bg"):
+                    self._ve_lai()
+                elif k == "title":
+                    self._ve_lai()
+            return f
+
+        self._hang("Tiêu đề",
+                   self._o_nhap(win.get("title", ""), _dat("title")))
+        self._hang("Rộng (px)",
+                   self._o_nhap(win.get("width", 860), _dat("width", int),
+                                chi_so=True))
+        self._hang("Cao (px)",
+                   self._o_nhap(win.get("height", 560), _dat("height", int),
+                                chi_so=True))
+        self._hang("Màu nền",
+                   self._o_mau(win.get("bg"), _dat("bg")))
+        self._tieu_de_bang("GỢI Ý")
+        tk.Label(self.noi_bang,
+                 text="Chọn một thành phần để sửa thuộc tính.\n"
+                      "Vùng trống: quét chuột để chọn nhiều.\n"
+                      "Double-click thành phần: sửa chữ nhanh.",
+                 fg=MAU["chu_mo"], bg=MAU["nen_panel"], font=font_ui(8),
+                 justify="left", anchor="w", wraplength=236).pack(
+            fill="x", pady=(2, 0))
+
+    # ----------------------------------------------------- bảng thành phần
+    def _bang_thanh_phan(self):
+        chinh = self._comp(self.chon[-1])
+        if chinh is None:
+            return
+        loai = chinh["loai"]
+        self._tieu_de_bang(
+            f"{TEN_HIEN_THI[loai].upper()}  #{chinh['id']}"
+            + (f"   + {len(self.chon) - 1} khác" if len(self.chon) > 1 else ""))
+
+        def _dat(k, ep_kieu=None, ve_lai=True):
+            def f(v):
+                self._chup_truoc_khi_sua()
+                if ep_kieu:
+                    try:
+                        v = ep_kieu(v)
+                    except (TypeError, ValueError):
+                        return
+                if k == "text" and v == "":
+                    v = ""
+                chinh[k] = v
+                self.dirty = True
+                if ve_lai:
+                    self._ve_comp_tu_dong(chinh["id"])
+                    self._cap_nhat_vien_chon()
+                self._chup_ve_cuoi_hang()
+            return f
+
+        # các trường theo loại
+        if loai in ("label", "button", "checkbox"):
+            self._hang("Chữ", self._o_nhap(chinh.get("text") or "",
+                                            _dat("text")))
+        elif loai == "input":
+            self._hang("Giá trị đầu", self._o_nhap(chinh.get("text") or "",
+                                                   _dat("text")))
+        elif loai == "text":
+            o = tk.Text(self.noi_bang, height=3, bd=0, bg="#3c3c3c",
+                        fg=MAU["chu_sang"], insertbackground=MAU["chu_sang"],
+                        font=font_ui(8), relief="flat", padx=6, pady=4,
+                        highlightthickness=1,
+                        highlightbackground=MAU["vien"])
+            o.insert("1.0", chinh.get("text") or "")
+
+            def _cam(_e=None):
+                _dat("text")(o.get("1.0", "end-1c"))
+            o.bind("<FocusOut>", _cam)
+            self._hang("Nội dung", o)
+
+        self._hang("X", self._o_nhap(chinh["x"], _dat("x", int),
+                                      chi_so=True))
+        self._hang("Y", self._o_nhap(chinh["y"], _dat("y", int),
+                                     chi_so=True))
+        self._hang("Rộng", self._o_nhap(chinh.get("w") or 100,
+                                        _dat("w", int), chi_so=True))
+        self._hang("Cao", self._o_nhap(chinh.get("h") or 30,
+                                       _dat("h", int), chi_so=True))
+        self._hang("Màu chữ", self._o_mau(chinh.get("color"),
+                                          _dat("color")))
+        self._hang("Màu nền", self._o_mau(chinh.get("bg"), _dat("bg")))
+        self._hang("Cỡ chữ", self._o_nhap(chinh.get("font_size") or 10,
+                                          _dat("font_size", int),
+                                          chi_so=True))
+
+        # ô kiểm
+        if loai == "checkbox":
+            self._o_kiem(
+                "Đang chọn (checked)", chinh.get("checked"),
+                lambda: _dat("checked", bool)(not chinh.get("checked")))
+        self._o_kiem(
+            "Hiện khi chạy (visible)", chinh.get("visible", True),
+            lambda: _dat("visible", bool)(
+                not chinh.get("visible", True)))
+        self._o_kiem(
+            "Kích hoạt (enabled)", chinh.get("enabled", True),
+            lambda: _dat("enabled", bool)(
+                not chinh.get("enabled", True)))
+
+        # nút tiện dụng
+        duoi = tk.Frame(self.noi_bang, bg=MAU["nen_panel"])
+        duoi.pack(fill="x", pady=(10, 0))
+        NutPhang(duoi, "⌨ Sửa trigger", lambda: self._sua_trigger(),
+                 co=8).pack(side="left")
+        NutPhang(duoi, "⧉ Nhân bản", self._nhan_ban, co=8).pack(
+            side="left", padx=4)
+        NutPhang(duoi, "🗑 Xóa", self._xoa_dang_chon, co=8).pack(
+            side="left", padx=4)
+
+    def _o_kiem(self, nhan, gia_tri, lenh):
+        """Một ô kiểm (Checkbutton) tối màu trong bảng thuộc tính."""
+        f = tk.Frame(self.noi_bang, bg=MAU["nen_panel"])
+        f.pack(fill="x", pady=2)
+        ck = tk.Checkbutton(f, text=nhan,
+                            variable=tk.BooleanVar(value=bool(gia_tri)),
+                            bg=MAU["nen_panel"], fg=MAU["chu"],
+                            activebackground=MAU["nen_panel"],
+                            selectcolor="#2d2d30", font=font_ui(8),
+                            anchor="w", command=lenh)
+        ck.pack(side="left")
+
+    def _chup_ve_cuoi_hang(self):
+        """Hẹn đẩy undo 700ms sau lần sửa cuối (gộp thao tác liên tục)."""
+        if getattr(self, "_hen_undo_cuoi", None):
+            try:
+                self.root.after_cancel(self._hen_undo_cuoi)
+            except Exception:
+                pass
+        self._hen_undo_cuoi = self.root.after(700, self._ket_thuc_sua)
+
+    def _ket_thuc_sua(self):
+        self._hen_undo_cuoi = None
+        self._day_undo()
+
+    # ==================================================================
+    # TRIGGER — file .triggers.py dùng chung (Studio + VS Code)
+    # ==================================================================
+    def _mau_triggers(self):
+        """Nội dung mẫu khi file trigger chưa tồn tại."""
+        ten = (self.duong_triggers.name if self.duong_triggers
+               else "triggers.py")
+        return (
+            "# " + "=" * 70 + "\n"
+            f"#  {ten} — trigger cho ứng dụng\n"
+            "#  File này DÙNG CHUNG: sửa ở FlexGUI Studio HOẶC VS Code.\n"
+            "#  (label/button/input/checkbox/text đã có sẵn — không cần "
+            "import)\n"
+            "# " + "=" * 70 + "\n"
+            "\n"
+            "def on_start():\n"
+            '    """Chạy 1 lần khi app mở."""\n'
+            "    pass\n"
+            "\n"
+        )
+
+    def _doc_triggers(self):
+        """Nạp file trigger vào editor (file cũ hoặc mẫu mới)."""
+        if self.duong_triggers and Path(self.duong_triggers).exists():
+            try:
+                self.editor.dat(
+                    Path(self.duong_triggers).read_text(encoding="utf-8"))
+                return
+            except Exception:
+                pass
+        self.editor.dat(self._mau_triggers())
+
+    def _bo_sung_skeleton(self):
+        """Thêm sườn hàm trigger cho thành phần chưa có — giữ code cũ."""
+        nguon = self.editor.lay()
+        cac_dong = [nguon]
+        for d in self._danh_sach():
+            su_kien = SUKIEN_CHINH.get(d["loai"], "click")
+            ten = f"on_{d['loai']}_{d['id']}_{su_kien}"
+            if re.search(rf"^\s*def\s+{ten}\s*\(", nguon, re.M):
+                continue
+            if su_kien == "toggle":
+                mo_ta = f"{TEN_HIEN_THI[d['loai']]} #{d['id']} được tick/bỏ tick"
+            elif su_kien == "enter":
+                mo_ta = f"nhấn Enter trong Input #{d['id']}"
+            elif su_kien == "change":
+                mo_ta = f"gõ chữ trong Text #{d['id']}"
+            else:
+                mo_ta = f"{TEN_HIEN_THI[d['loai']]} #{d['id']} được nhấn"
+            cac_dong.append(
+                f"\n\ndef {ten}():\n"
+                f'    """Chạy khi {mo_ta}."""\n'
+                f"    pass\n")
+        if len(cac_dong) > 1:
+            self.editor.dat("".join(cac_dong), dat_con_tro=True)
+
+    def _ghi_triggers(self, bao=False):
+        """Ghi buffer editor ra file .triggers.py (kèm skeleton)."""
+        if not self.duong_triggers:
+            # chưa gắn file app — hỏi nơi lưu chung với JSON
+            if not self._hoi_duong_luu():
+                return False
+        self._bo_sung_skeleton()
+        try:
+            Path(self.duong_triggers).write_text(self.editor.lay(),
+                                                 encoding="utf-8")
+            if bao:
+                self._toast("✓ Đã lưu " + self._ten_triggers(),
+                            "#173f2f")
+            return True
+        except Exception:
+            messagebox.showerror("Không lưu được trigger",
+                                 traceback.format_exc())
+            return False
+
+    def _sua_trigger(self, cid=None):
+        """Mở drawer trigger, nhảy tới hàm của thành phần đang chọn."""
+        self._mo_drawer()
+        d = self._comp(cid if cid is not None
+                       else (self.chon[-1] if self.chon else None))
+        if not d:
+            return
+        su_kien = SUKIEN_CHINH.get(d["loai"], "click")
+        ten = f"on_{d['loai']}_{d['id']}_{su_kien}"
+        if self.editor.tim_ham(ten) is None:
+            self._bo_sung_skeleton()
+        dong = self.editor.tim_ham(ten)
+        if dong:
+            self.editor.den_dong(dong)
+
+    def _dao_drawer(self):
+        """Bật/tắt ngăn kéo trigger dưới cùng."""
+        if self.drawer.winfo_ismapped():
+            self._an_drawer()
+        else:
+            self._mo_drawer()
+
+    def _mo_drawer(self):
+        if not self.drawer.winfo_ismapped():
+            self.drawer.pack(fill="x", side="bottom")
+            self.nut_drawer.dat_bat(True)
+        self.editor.o.focus_set()
+        try:
+            self.editor.o.mark_set("insert", "insert")
+        except Exception:
+            pass
+
+    def _an_drawer(self):
+        self.drawer.pack_forget()
+        self.nut_drawer.dat_bat(False)
+        self.ban_ve.focus_set()
+
+    def _chen_mau(self):
+        """Menu chèn snippet code mẫu tại vị trí con trỏ editor."""
+        menu = tk.Menu(self.root, tearoff=0, bg=MAU["nen_nut"],
+                       fg=MAU["chu"], activebackground=MAU["gt"],
+                       activeforeground="#ffffff", bd=0)
+        for ten, code in MUC_CHEN:
+            menu.add_command(
+                label=ten,
+                command=lambda c=code: self._chen_code(c))
+        menu.tk_popup(self.root.winfo_pointerx(), self.root.winfo_pointery())
+
+    def _chen_code(self, code):
+        self._mo_drawer()
+        try:
+            self.editor.o.insert("insert", code)
+            self.editor._lam_moi_sau()
+        except Exception:
+            pass
+
+    # ==================================================================
+    # LƯU / XEM TRƯỚC / XUẤT / BUILD
+    # ==================================================================
+    def _hoi_duong_luu(self):
+        """Hỏi nơi lưu khi chưa có file (chưa gắn với file .py nào)."""
+        duong = filedialog.asksaveasfilename(
+            title="Lưu thiết kế FlexGUI",
+            defaultextension=".flexgui.json",
+            filetypes=[("Thiết kế FlexGUI", "*.flexgui.json")])
+        if not duong:
+            return False
+        self.duong_json = Path(duong)
+        self.duong_triggers = self.duong_json.parent / (
+            self.duong_json.name[:-len(".flexgui.json")] + ".triggers.py")
+        self.nhan_ten_file.config(text="·  " + self.duong_json.name)
+        self.nhan_tab.config(text="  ⌨  " + self._ten_triggers()
+                             + "  •  Python  •  UTF-8")
+        return True
+
+    def _luu_toan_bo(self, bao=False, im_lang=False):
+        """Ctrl+S — lưu thiết kế (.json) + trigger (.triggers.py)."""
+        if not self.duong_json and not self._hoi_duong_luu():
+            return False
+        self._bo_sung_skeleton()
+        try:
+            Path(self.duong_json).write_text(
+                json.dumps(self.design, ensure_ascii=False, indent=1),
+                encoding="utf-8")
+            Path(self.duong_triggers).write_text(self.editor.lay(),
+                                                 encoding="utf-8")
+        except Exception:
+            if not im_lang:
+                messagebox.showerror("Không lưu được",
+                                     traceback.format_exc())
+            return False
+        self.dirty = False
+        if bao:
+            self._toast(f"✓ Đã lưu {self.duong_json.name}", "#173f2f")
+            self._cap_nhat_trang_thai("● Đã lưu")
+        return True
+
+    def _xem_truoc(self):
+        """F5 — chạy thử THẬT thiết kế hiện tại (không cần lưu file)."""
+        if _reg._app_hien_tai() is not None:
+            messagebox.showinfo("Đang mở",
+                                "Hãy đóng cửa sổ xem trước hiện tại trước.")
+            return
+        thiet_ke = copy.deepcopy(self.design)
+        win = thiet_ke["window"]
+        try:
+            app = App(win.get("title", "Xem trước"), win.get("width", 860),
+                      win.get("height", 560), bg=win.get("bg"),
+                      goc=self.root)
+            for d in thiet_ke["components"]:
+                _tao_tu_du_lieu(app, d)
+            loi = nap_trigger(app, self.editor.lay(),
+                              ten_file=str(self.duong_triggers or "<triggers>"))
+            if loi:
+                chi_tiet = "\n\n".join(f"— {b} —\n{t}" for b, t in loi)
+                messagebox.showwarning(
+                    "Trigger có lỗi (vẫn xem trước được)",
+                    "Một số đoạn trigger không chạy được:\n\n" + chi_tiet,
+                    parent=self.root)
+            app.run(chay_mainloop=False)
+            self._cap_nhat_trang_thai("● Đang xem trước…")
+        except Exception:
+            _reg._dat_app(None)
+            messagebox.showerror("Lỗi xem trước", traceback.format_exc(),
+                                 parent=self.root)
+
+    def _ten_sach(self):
+        """Tên an toàn cho file build (ASCII)."""
+        ten = (self.duong_json.stem if self.duong_json
+               else (self.duong_dan.stem if self.duong_dan else "ung_dung"))
+        ten = ten[:-len(".flexgui")] if ten.endswith(".flexgui") else ten
+        re.sub(r"[^A-Za-z0-9_-]+", "_", ten)
+        return re.sub(r"[^A-Za-z0-9_-]+", "_", ten) or "ung_dung"
+
+    def _duong_file_dung(self):
+        """Thư mục + file .py gộp dùng chung cho xuất/build."""
+        if not self.duong_json and not self._hoi_duong_luu():
+            return None
+        thu_muc = self.duong_json.parent / "flexgui_build"
+        thu_muc.mkdir(exist_ok=True)
+        return thu_muc / (self._ten_sach() + ".py")
+
+    def _xuat_py(self):
+        """Xuất MỘT file .py tự chạy (nhúng thiết kế + trigger)."""
+        if not self._luu_toan_bo(im_lang=True):
+            return
+        duong = self._duong_file_dung()
+        if not duong:
+            return
+        try:
+            builder.xuat_file_dung(duong, self.design, self.editor.lay())
+            self._toast(f"✓ Đã xuất {duong.name} (thư mục flexgui_build)")
+            messagebox.showinfo(
+                "Đã xuất file chạy đơn",
+                f"Đã tạo:\n{duong}\n\nChạy bằng:  python {duong.name}\n"
+                f"Cần đã cài:  pip install flexgui", parent=self.root)
+        except Exception:
+            messagebox.showerror("Lỗi xuất file", traceback.format_exc(),
+                                 parent=self.root)
+
+    def _build_exe(self):
+        """Build .exe bằng PyInstaller (chỉ khi user bấm nút)."""
+        if not self._luu_toan_bo(im_lang=True):
+            return
+        duong = self._duong_file_dung()
+        if not duong:
+            return
+        try:
+            builder.xuat_file_dung(duong, self.design, self.editor.lay())
+            self._dong_goi = builder.TrinhDongGoi(self.root,
+                                                  self._ten_sach())
+            self._dong_goi.chay(duong)
+        except Exception:
+            messagebox.showerror("Lỗi build", traceback.format_exc(),
+                                 parent=self.root)
+
+    # ==================================================================
+    # MENU CHUỘT PHẢI / DOUBLE-CLICK / TRỢ GIÚP
+    # ==================================================================
+    def _nhan_kp(self, e):
+        """Double-click: sửa chữ nhanh thành phần."""
+        d = self._tim_comp_tai(e.x, e.y)
+        if not d:
+            return
+        self.chon = [d["id"]]
+        self._cap_nhat_vien_chon()
+        self._lam_moi_bang_thuoc_tinh()
+        if d["loai"] in ("label", "button", "checkbox", "input", "text"):
+            moi = simpledialog.askstring(
+                "Sửa nhanh nội dung",
+                "Nội dung mới cho "
+                f"{TEN_HIEN_THI[d['loai']]} #{d['id']}:",
+                initialvalue=d.get("text") or "", parent=self.root)
+            if moi is not None:
+                self._chup_truoc_khi_sua()
+                d["text"] = moi
+                self._ve_comp_tu_dong(d["id"])
+                self._ket_thuc_sua()
+                self.dirty = True
+
+    def _menu_phai(self, e):
+        menu = tk.Menu(self.root, tearoff=0, bg=MAU["nen_nut"],
+                       fg=MAU["chu"], activebackground=MAU["gt"],
+                       activeforeground="#ffffff", bd=0,
+                       font=font_ui(9))
+        d = self._tim_comp_tai(e.x, e.y)
+        if d is not None:
+            if d["id"] not in self.chon:
+                self.chon = [d["id"]]
+                self._cap_nhat_vien_chon()
+            menu.add_command(label=f"Sửa chữ… (double-click)",
+                             command=lambda: self._nhan_kp(e))
+            menu.add_command(label="Sửa trigger…", command=self._sua_trigger)
+            menu.add_command(label="Nhân bản  (Ctrl+D)",
+                             command=self._nhan_ban)
+            menu.add_separator()
+            menu.add_command(label="Đưa lên một lớp",
+                             command=lambda: self._doi_z("len"))
+            menu.add_command(label="Đưa xuống một lớp",
+                             command=lambda: self._doi_z("xuong"))
+            menu.add_command(label="Nằm trên cùng",
+                             command=lambda: self._doi_z("tren"))
+            menu.add_command(label="Nằm dưới cùng",
+                             command=lambda: self._doi_z("duoi"))
+            menu.add_separator()
+            menu.add_command(label="Xóa  (Delete)",
+                             command=self._xoa_dang_chon)
+        else:
+            menu.add_command(label="Chọn hết  (Ctrl+A)",
+                             command=lambda: self._chon_het())
+        try:
+            menu.tk_popup(e.x_root, e.y_root)
+        finally:
+            menu.grab_release()
+
+    def _chon_het(self):
+        self.chon = [d["id"] for d in self._danh_sach()]
+        self._cap_nhat_vien_chon()
+
+    def _mo_tro_giup(self):
+        """F1 — bảng phím tắt + hướng dẫn nhanh."""
+        hop = tk.Toplevel(self.root)
+        hop.title("FlexGUI Studio — Trợ giúp")
+        hop.configure(bg=MAU["nen_panel"])
+        hop.geometry("640x560")
+        hop.transient(self.root)
+        noi_dung = (
+            ("PHÍM TẮT", ""),
+            ("Ctrl+S", "Lưu thiết kế (.flexgui.json + .triggers.py)"),
+            ("F5", "Xem trước — chạy thử app thật (kéo được, trigger chạy)"),
+            ("Delete / Backspace", "Xóa các thành phần đang chọn"),
+            ("Ctrl+Z / Ctrl+Y", "Hoàn tác / Làm lại"),
+            ("Ctrl+D", "Nhân bản thành phần đang chọn"),
+            ("Ctrl+A", "Chọn hết"),
+            ("Mũi tên (+Shift)", "Dịch 1px (Shift = 10px, tự snap lưới)"),
+            ("Escape", "Bỏ chọn hết"),
+            ("", ""),
+            ("TƯƠNG TÁC", ""),
+            ("Kéo", "Di chuyển — giữ Ctrl/Shift + click để chọn nhiều, "
+                    "quét vùng chuột trên nền trống"),
+            ("8 núm xanh", "Resize — viền + góc, tự snap lưới 10px"),
+            ("Double-click", "Sửa chữ nhanh"),
+            ("Chuột phải", "Menu: z-order, nhân bản, xóa, trigger"),
+            ("", ""),
+            ("QUY TRÌNH XUẤT BẢN", ""),
+            ("1.", "flexgui.setup() trong file .py → chạy → Studio mở"),
+            ("2.", "Kéo thả, chỉnh thuộc tính, viết trigger (nút Triggers)"),
+            ("3.", "Xuất .py (1 file tự chạy) hoặc Build .exe (PyInstaller)"),
+            ("4.", "Chạy thật: flexgui.run(__file__) thay cho setup()"),
+        )
+        f = font_mono(9)
+        for i, (a, b) in enumerate(noi_dung):
+            mau = MAU["chu_sang"] if b == "" else MAU["chu"]
+            trong = MAU["chu"] if b == "" else MAU["chu_mo"]
+            tk.Label(hop, text=a, fg=mau, bg=MAU["nen_panel"], font=f,
+                     width=20, anchor="w").grid(row=i, column=0,
+                                                 sticky="nw", padx=(16, 0),
+                                                 pady=1)
+            tk.Label(hop, text=b, fg=trong, bg=MAU["nen_panel"], font=f,
+                     anchor="w", justify="left", wraplength=420).grid(
+                row=i, column=1, sticky="nw", padx=(0, 16), pady=1)
+        NutPhang(hop, "Đã hiểu", hop.destroy, rong=10).grid(
+            row=len(noi_dung) + 1, column=0, columnspan=2, pady=14)
+
+    # ==================================================================
+    # PHÍM TẮT (an toàn bộ gõ — bỏ qua khi đang gõ trong ô nhập)
+    # ==================================================================
+    def _gan_phim(self):
+        self.root.bind("<KeyPress>", self._nhan_phim)
+        self.root.bind("<Control-s>", self._phim_luu)
+        self.root.bind("<F5>", self._phim_xem_truoc)
+        self.editor.o.bind("<Control-s>", self._phim_luu)
+
+    def _phim_luu(self, _e=None):
+        self._luu_toan_bo(True)
+        return "break"
+
+    def _phim_xem_truoc(self, _e=None):
+        self._xem_truoc()
+        return "break"
+
+    @staticmethod
+    def _dang_go_van_ban(w):
+        """True khi focus đang trong ô nhập/editor — không chặn phím của IME."""
+        return w is not None and w.winfo_class() in (
+            "Text", "Entry", "TSpinbox", "TEntry", "TCombobox")
+
+    def _nhan_phim(self, e):
+        # Đang gõ trong ô nhập / editor → KHÔNG can thiệp (bảo vệ IME)
+        if self._dang_go_van_ban(self.root.focus_get()):
+            return
+        ks = e.keysym.lower()
+
+        if ks in ("delete", "backspace"):
+            self._xoa_dang_chon()
+            return "break"
+        if ks == "escape":
+            self.chon = []
+            self._cap_nhat_vien_chon()
+            self._lam_moi_bang_thuoc_tinh()
+            return
+        if ks in ("left", "right", "up", "down"):
+            self._di_chuyen_bang_phim(ks, e)
+            return "break"
+        if not (e.state & 0x0004):
+            return
+        # ---- tổ hợp Ctrl+... ----
+        if ks == "a":
+            self._chon_het()
+            return "break"
+        if ks == "z":
+            self._hoan_tac()
+            return "break"
+        if ks == "y":
+            self._lam_lai()
+            return "break"
+        if ks == "d":
+            self._nhan_ban()
+            return "break"
+        if ks == "s":
+            self._luu_toan_bo(True)
+            return "break"
+
+    def _di_chuyen_bang_phim(self, ks, e):
+        """Mũi tên: 1px, Shift = 10px — KHÔNG snap (giữ nguyên độ chính xác)."""
+        if not self.chon:
+            return
+        buoc = 10 if (e.state & 0x0001) else 1
+        d = {"left": (-buoc, 0), "right": (buoc, 0),
+             "up": (0, -buoc), "down": (0, buoc)}[ks]
+        self._chup_truoc_khi_sua()
+        for cid in self.chon:
+            c = self._comp(cid)
+            if c:
+                c["x"] += d[0]
+                c["y"] += d[1]
+                self._ve_comp_tu_dong(cid)      # vẽ lại đúng vị trí mới
+        self._cap_nhat_vien_chon()
+        self.dirty = True
+        self._chup_ve_cuoi_hang()
+