@fui-org/fui-cli 1.3.1 → 2.0.0

package/skills/fui-skill/references/ui-screenshot-review.md

@@ -1,94 +1,95 @@
-# Review giao diện qua ảnh chụp màn hình
+# UI review from screenshots
 
-> File này sở hữu: **cách đọc và đánh giá ảnh chụp giao diện (user gửi hoặc từ `renderUI`)**.
+> Owns: **reading and assessing UI screenshots (user-sent or from `--render`)**.
 
-Áp dụng khi có **ảnh giao diện** để đánh giá, từ một trong hai nguồn:
+Sources: (1) **user screenshot in chat** ("why is it ugly", "make it nicer", or an image + bug description); (2) **`fui module simulate --render`** — `render.png` (inline), `render-full.png`, `render-dialog.jpg`.
 
-1. **User gửi ảnh chụp màn hình vào chat** — "xem giao diện này", "sao nhìn xấu vậy", "sửa lại cho đẹp", hoặc chỉ gửi ảnh kèm mô tả lỗi.
-2. **Screenshot từ `module_simulate({ renderUI: true })`** — `render.png` (inline), `render-full.png`, `render-dialog.jpg`.
+Act as design QA: scan with the checklist; map every finding to a **concrete code cause** (controls[i] in module.json, class/style, CSS in header.html) + fix. No vague "doesn't look good".
 
-Nguyên tắc cốt lõi: **nhìn ảnh như một designer QA** — quét có hệ thống theo checklist bên dưới, và mỗi phát hiện phải map về **nguyên nhân cụ thể trong code** (controls[i] nào trong module.json, class/style nào, CSS nào trong header.html) kèm fix đề xuất. Đừng chỉ mô tả cảm tính "nhìn chưa đẹp".
-
-**BẮT BUỘC — phát hiện xong là phải SỬA, không phải chỉ ghi nhận.** Checklist A–D bên dưới không phải danh sách tham khảo: nhìn thấy chữ dính/chồng lấn (khoảng hở quá ít), control lệch hàng/không thẳng, khoảng trắng dư thừa bất thường giữa các control — đây là lỗi thẩm mỹ **phải xử lý trong cùng lượt**, y hệt một lỗi hiển thị cứng. "Đã ghi nhận vào báo cáo" không phải là "đã xong việc". Chỉ dừng lại hỏi user khi bản thân không chắc ý đồ thiết kế (vd không rõ hai khối có nên tách hàng hay không) — còn lại thì tự sửa rồi render lại đối chiếu (bước 4 dưới đây).
+**MANDATORY — FIX findings, don't just report them.** Stuck/overlapping text (too little gap), misaligned controls, abnormal whitespace between controls are bugs **to fix in the same turn**, like hard rendering bugs. "Noted in the report" ≠ done. Ask the user only when design intent is unclear (e.g. should two blocks be on separate rows); otherwise fix and re-render (step 4).
 
 ---
 
-## Quy trình
+## Workflow
 
-1. **Xác định bối cảnh** trước khi phán:
-   - App-mode (CRUD/quản lý — chuẩn thẩm mỹ `design_read("fui")`) hay Web-mode (landing — theo brand DESIGN.md đã chọn)?
-   - Desktop hay mobile? (ảnh hẹp/dọc → đánh giá theo chuẩn responsive)
-   - Có module.json tương ứng trong workspace không? (có → đối chiếu ảnh ↔ controls để chỉ đúng vị trí sửa; không → nhận xét trên ảnh + xin module.json nếu cần sửa)
-2. **Quét ảnh theo checklist A→D** (dưới) — ghi nhận từng phát hiện.
-3. **Báo cáo dạng bảng**: `Phát hiện | Mức độ (lỗi/cần sửa/gợi ý) | Vị trí trên ảnh | Nguyên nhân khả dĩ | Fix đề xuất`.
-4. **Tự sửa → render lại đối chiếu** (bắt buộc cho mọi phát hiện ở mục A/B, không chỉ lỗi cứng): nếu có workspace + Playwright, sửa module.json rồi `module_simulate({ renderUI: true })` (cùng viewport/device với ảnh gốc nếu đoán được) và so sánh screenshot mới với ảnh user gửi — lặp cho tới khi sạch. `renderUI` tự phát hiện text dính/chồng lấn (đối chiếu bounding-rect, xem mục A) và in vào DOM AUDIT kèm dòng "PHẢI sửa, không được bỏ qua" — thấy dòng đó thì sửa ngay trong lượt này, đừng để nguyên rồi báo cáo lại cho user quyết.
+1. **Establish context** first:
+   - App-mode (CRUD/admin — aesthetic standard `fui design read fui`) or Web-mode (landing — chosen brand DESIGN.md)?
+   - Desktop or mobile? (narrow/portrait image → judge by responsive standards)
+   - module.json in workspace? Yes → cross-check image ↔ controls to pinpoint the fix; no → comment on the image, ask for module.json if a fix is needed
+2. **Scan with checklist A→D**, record each finding.
+3. **Report as a table**: `Finding | Severity (bug/should fix/suggestion) | Location in image | Likely cause | Proposed fix`.
+4. **Fix → re-render → compare** (required for every A/B finding): with workspace + Playwright, edit module.json, run `fui module simulate --render` (same viewport/device as the original if guessable), compare with the user's image; repeat until clean. `--render` auto-detects stuck/overlapping text (bounding rects, see A) and prints it in DOM AUDIT with "PHẢI sửa, không được bỏ qua" — fix it this turn; don't hand it to the user.
 
-Ảnh mờ/cắt/không đủ thông tin → hỏi user chụp lại vùng cụ thể, đừng đoán bừa.
+Blurry/cropped/insufficient image → ask the user to recapture the specific area; don't guess.
 
 ---
 
-## Checklist quét ảnh
+## Scan checklist
 
-### A. Lỗi hiển thị cứng (bug — phải sửa)
+### A. Hard rendering bugs (must fix)
 
-- Vùng trống bất thường: component không render (app rỗng, card trống, chart trắng/0-size)
-- Text lỗi lộ ra ngoài: `undefined`, `NaN`, `[object Object]`, message exception, key thay vì value
-- Tràn ngang: thanh cuộn ngang xuất hiện, phần tử bị cắt mép phải
-- Chữ/phần tử đè lên nhau, hoặc dính sát nhau tới mức đọc như liền một chữ (khoảng hở quá ít); label bị cắt cụt không chủ ý (truncate `...` ở chỗ không nên). `renderUI` dò được phần lớn ca này tự động (đối chiếu bounding-rect của các phần tử mang text, dòng `⚠ text dính/chồng lấn` trong DOM AUDIT) — nhưng đó chỉ là lưới an toàn, mắt vẫn phải tự quét thêm vì heuristic bỏ sót các ca không phải text thuần (icon chồng nút, ảnh chồng card...)
-- Ảnh vỡ (khung ảnh trống/icon broken), icon thiếu (ô vuông tofu — thường do font mdi chưa load hoặc sai tên icon)
-- Loading spinner đứng mãi (v_Loading không về false — thường API treo/lỗi init)
+- Abnormal empty area: component didn't render (empty app, blank card, white/0-size chart)
+- Leaked error text: `undefined`, `NaN`, `[object Object]`, exception messages, keys instead of values
+- Horizontal overflow: horizontal scrollbar, elements clipped at the right edge
+- Overlapping text/elements, or so close they read as one word; unintended truncation (`...`). `--render` catches most (line `⚠ text dính/chồng lấn` in DOM AUDIT) — only a safety net; still scan by eye, the heuristic misses non-text cases (icon over button, image over card...)
+- Broken image (empty frame/broken icon), missing icon (tofu square — usually mdi font not loaded or wrong icon name)
+- Spinner forever (v_Loading never returns to false — usually a hung API/init error)
 
-### B. Bố cục, căn chỉnh, khoảng cách
+### B. Layout, alignment, spacing
 
-- **Thẳng hàng**: field cùng row thẳng baseline, cùng chiều cao (`dense`/`outlined` đồng bộ); các card/khối cùng hàng cùng chiều cao
-- **Căn trái/phải đúng ngữ nghĩa**: text căn trái; **số/tiền tệ trong bảng căn phải** (`t-num`); tiêu đề cột khớp hướng căn của data
-- **Vị trí nút chuẩn**: nút hành động chính của trang ở toolbar bên phải; trong dialog nút chính (Lưu/Đồng ý) nằm **phải** của `v-card-actions` (có `v-spacer` đẩy); không có nút "Đóng" thừa (D7)
-- **Hàng toolbar — nút phình / hở khoảng đều nhau**: triệu chứng đặc trưng của cột thiếu `shrink`. Nút rộng hơn hẳn chữ bên trong, các nút cách nhau những khoảng **bằng nhau**, và nhóm nút cuối **không sát mép phải** dù đã có `v-spacer` ⇒ các cột đó vẫn `flex-grow: 1` nên được chia phần trống y như spacer. Chuẩn: **mọi cột `"col": "shrink"`, trừ đúng `v-spacer`** — kể cả cột `w` rỗng ([controls-patterns.md](controls-patterns.md) §Hàng nhiều control). `module_validate` bắt được ca này trước khi phải nhìn ảnh
-- **Khoảng cách nhất quán**: padding/margin theo nhịp Vuetify (bội 4px — pa-2/ma-2...); không có khoảng hở to bất thường giữa các khối, không có khối dính sát mép màn hình
-- **Bảng data**: cuộn CHỈ trong bảng (bảng chính khai `":height": -16`), trang không có 2 thanh cuộn dọc lồng nhau, header bảng không trôi mất khi cuộn (D9)
-- **Cân đối grid**: các cột trong row có tỷ lệ hợp lý (Σw ≤ 12), không có cột bị bóp quá hẹp làm nội dung xuống dòng xấu
+- **Alignment**: fields in a row share baseline and height (consistent `dense`/`outlined`); cards/blocks in a row share height
+- **Semantic alignment**: text left; **numbers/currency in tables right** (`t-num`); column header matches data alignment
+- **Button placement**: page primary action in the toolbar on the right; in a dialog the primary button (Lưu/Đồng ý) sits **right** in `v-card-actions` (pushed by `v-spacer`); no redundant "Đóng" button (D7)
+- **Toolbar row — bloated buttons / equal gaps** = columns missing `shrink`: buttons much wider than their text, **equal** gaps, trailing group **not flush right** despite `v-spacer` ⇒ columns still `flex-grow: 1`, sharing free space like the spacer. Standard: **every column `"col": "shrink"` except `v-spacer`** — including empty-`w` columns ([controls-patterns.md](controls-patterns.md) §Toolbar row). `fui module validate` catches this before any screenshot
+- **Consistent spacing**: Vuetify rhythm (multiples of 4px — pa-2/ma-2...); no abnormally large gaps between blocks, no blocks touching the screen edge
+- **Data tables**: scroll ONLY inside the table (main table declares `":height": -16`), no two nested vertical page scrollbars, table header stays visible on scroll (D9)
+- **Grid balance**: sensible column ratios in a row (Σw ≤ 12), no column squeezed so narrow content wraps badly
 
-### C. Màu sắc & phân cấp thị giác (App-mode đối chiếu `design_read("fui")`)
+### C. Color & visual hierarchy (App-mode vs `fui design read fui`)
 
-- Đối chiếu bộ quy tắc D1–D9 của validator: toolbar dialog **cùng màu nền** thân (không color/dark); nút xóa màu **warning cam** (không đỏ/error); width dialog thuộc bộ 400/550/600/650/800
-- Một màn hình chỉ 1–2 màu nhấn; không tô màu tùy hứng vào card/nút phụ
-- Contrast đủ đọc (chữ xám nhạt trên nền trắng, chữ trên nền màu — nghi ngờ thì báo)
-- Trạng thái (chip/badge) dùng màu ngữ nghĩa nhất quán: success/warning/error cùng nghĩa ở mọi nơi
+- Validator rules D1–D9: dialog toolbar **same background** as body (no color/dark); delete button **warning orange** (not red/error); dialog width in 400/550/600/650/800
+- 1–2 accent colors per screen; no arbitrary color on cards/secondary buttons
+- Readable contrast (light grey on white, text on colored backgrounds — report if doubtful)
+- Status (chip/badge) semantic colors consistent: success/warning/error mean the same everywhere
 
-### D. Mật độ & responsive
+### D. Density & responsive
 
-- Mức `dense`/gọn đồng bộ toàn màn (không chỗ dày chỗ thưa)
-- Ảnh mobile: cột tự xuống dòng đúng, nút không tràn/không quá bé để bấm, font đọc được, bảng có phương án mobile (`mobile-breakpoint`)
-- `viewport-fit=cover` (mặc định của FUI): nội dung sát mép trên/dưới ở màn có notch → cần safe-area padding
+- Consistent `dense`/compact level across the screen (no dense-here, sparse-there)
+- Mobile image: columns wrap correctly, buttons don't overflow and aren't too small to tap, readable font, tables have a mobile plan (`mobile-breakpoint`)
+- `viewport-fit=cover` (FUI default): content at top/bottom edges on notched screens → needs safe-area padding
 
 ---
 
-## Map triệu chứng → nguyên nhân thường gặp
+## Symptom → common cause
 
-| Triệu chứng trên ảnh | Nguyên nhân hay gặp | Fix |
-|---|---|---|
-| Trang có thanh cuộn dọc, bảng dài vô tận | f-table/f-sheet không khai `:height` → tự giãn theo số dòng | Thêm `":height": -16` (tự đo `rect.top`, fill tới đáy) |
-| Bảng hụt/tràn một khoảng cố định | `:height` cũ tính tay `"$( window ).height()-N"` không khớp toolbar thật | Thay bằng `":height": -16` |
-| Field trong form so le chiều cao | Trộn field có/không `dense`, có/không `hide-details` | Đồng bộ `outlined dense hide-details` cả form |
-| Số trong bảng căn trái | Cột thiếu `el: "t-num"` / align | Xem `component-table.md` |
-| Chart trắng | Container 0-height lúc chart init | Cho container `:height` cụ thể; renderUI audit "canvas 0-size" xác nhận |
-| Icon ô vuông | Sai tên `mdi-*` hoặc font chưa load | Kiểm tra tên icon; import materialdesignicons |
-| Dialog tràn màn hình / bé tẹo | width không thuộc bộ chuẩn | Bộ width 400/550/600/650/800 (D3) |
-| Nút chính lệch trái trong dialog | Thiếu `v-spacer` trong v-card-actions | Thêm v-spacer trước nút chính |
-| Khối dính mép màn hình | Thiếu page-container / pa-* | Xem `ui-layout-patterns.md` |
+| Symptom                                   | Common cause                                                                          | Fix                                                                                |
+| ----------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| Page has vertical scroll, endless table   | f-table/f-sheet without `:height` → grows with row count                              | Add `":height": -16` (measures `rect.top`, fills to bottom)                        |
+| Table short/overflowing by a fixed amount | Old hand-computed `:height` `"$( window ).height()-N"` doesn't match the real toolbar | Replace with `":height": -16`                                                      |
+| Form fields of uneven height              | Mixed with/without `dense`, `hide-details`                                            | Use `outlined dense hide-details` across the form                                  |
+| Numbers left-aligned in table             | Column missing `el: "t-num"` / align                                                  | See `component-table.md`                                                           |
+| Blank chart                               | Container 0-height at chart init                                                      | Give the container a concrete `:height`; `--render` audit "canvas 0-size" confirms |
+| Square icon                               | Wrong `mdi-*` name or font not loaded                                                 | Check icon name; import materialdesignicons                                        |
+| Dialog overflowing / tiny                 | Non-standard width                                                                    | Widths 400/550/600/650/800 (D3)                                                    |
+| Primary button left in dialog             | Missing `v-spacer` in v-card-actions                                                  | Add v-spacer before the primary button                                             |
+| Block touching screen edge                | Missing page-container / pa-*                                                         | See `ui-layout-patterns.md`                                                        |
 
 ---
 
-## Meta viewport mặc định của FUI (ảnh hưởng UI)
+## FUI default meta viewport (affects UI)
 
-Trang FUI mặc định đã có sẵn trong `<head>` (KHÔNG lặp lại trong header.html):
+FUI pages already include in `<head>` (do NOT repeat in header.html):
 
 ```html
-<meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>
+<meta charset="UTF-8" />
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+/>
 ```
 
-Hệ quả khi đánh giá/thiết kế:
-- `user-scalable=no, maximum-scale=1` — user **không pinch-zoom được** → font/nút phải đủ lớn ngay từ đầu trên mobile, không trông chờ zoom.
-- `width=device-width, initial-scale=1` — layout theo đúng CSS pixel của thiết bị; breakpoint Vuetify hoạt động chuẩn.
-- `viewport-fit=cover` — trang tràn vào vùng notch/home-indicator trên iOS → nội dung sát mép trên/dưới cần `env(safe-area-inset-*)` padding khi làm fullscreen/HTMLOnly.
+Consequences:
+
+- `user-scalable=no, maximum-scale=1` — **no pinch-zoom** → fonts/buttons must be large enough on mobile from the start.
+- `width=device-width, initial-scale=1` — layout in true device CSS pixels; Vuetify breakpoints work normally.
+- `viewport-fit=cover` — page extends into iOS notch/home-indicator → content at top/bottom edges needs `env(safe-area-inset-*)` padding for fullscreen/HTMLOnly.

package/skills/fui-skill/references/ui-table-cell-patterns.md

@@ -1,14 +1,14 @@
 # FUI Table Cell Patterns — f-table & in-cell controls
 
-> File này sở hữu: **điều khiển trong ô `f-table` (`t-*`), `ctrl-update`, show-select, chip-group, chọn `t-button` vs `t-menu`**. Props bảng xem [component-table.md](component-table.md).
+> Owns: **in-cell `f-table` controls (`t-*`), `ctrl-update`, show-select, chip-group, `t-button` vs `t-menu`**. Table props: [component-table.md](component-table.md).
 
-Các pattern cho `f-table` và điều khiển ngay trong ô bảng (`t-check`, `t-button`, `t-select`, `t-menu`, `ctrl-update`, `show-select`, `v-chip-group`). Rút ra từ project **security-manager**.
+Patterns for `f-table` and in-cell controls (`t-check`, `t-button`, `t-select`, `t-menu`, `ctrl-update`, `show-select`, `v-chip-group`), from project **security-manager**.
 
-> Xem thêm: [ui-patterns.md](ui-patterns.md) (data/watch/toolbar), [ui-dialog-patterns.md](ui-dialog-patterns.md), [component-table.md](component-table.md).
+> See also: [ui-patterns.md](ui-patterns.md) (data/watch/toolbar), [ui-dialog-patterns.md](ui-dialog-patterns.md), [component-table.md](component-table.md).
 
 ---
 
-## 1. f-table Cơ Bản với Fixed Header
+## 1. Basic f-table with fixed header
 
 ```json
 {
@@ -23,33 +23,33 @@ Các pattern cho `f-table` và điều khiển ngay trong ô bảng (`t-check`,
     ":item-class": "item => item.ChuaKichHoat>0 ? 'danger' : ''",
     ":headers": [
       { "align": "center", "text": "UserID", "value": "UserID" },
-      { "text": "Username",  "value": "UserName" },
-      { "text": "Fullname",  "value": "FullName" }
+      { "text": "Username", "value": "UserName" },
+      { "text": "Fullname", "value": "FullName" }
     ]
   },
   "w": 12
 }
 ```
 
-**Kỹ thuật:**
-- **QUY TẮC chiều cao bảng (lint D9)**: bảng data chính của module khai `":height": -16` — f-table tự **đo vị trí thật** của bảng sau khi layout (`getBoundingClientRect().top`) rồi fill tới đáy màn hình chừa 16px, và tự bật `fixed-header`. Cuộn data chỉ cuộn **trong bảng**, header không trôi, trang không có 2 thanh cuộn lồng nhau. Tự cập nhật khi resize cửa sổ và khi `items` đổi.
+- **Table height RULE (lint D9)**: the module's main data table declares `":height": -16` — f-table **measures its real position** after layout (`getBoundingClientRect().top`), fills to the screen bottom leaving 16px, and enables `fixed-header`. Data scrolls **inside the table** only, header stays put, no nested page scrollbars. Updates on window resize and when `items` changes.
 
-  | `:height` | Hành vi |
-  |---|---|
-  | *(bỏ trống)* | Tự giãn theo số dòng — bảng ngắn/lookup chủ ý; bảng chính thì sai (cả trang sẽ cuộn) |
-  | `<= 0` | Fill tới đáy, chừa `abs(height)` px — **chuẩn cho bảng chính** |
-  | `> 0` | px cố định — **bảng trong dialog** (vd `":height": 360`) |
+  | `:height`   | Behavior                                                                                              |
+  | ----------- | ----------------------------------------------------------------------------------------------------- |
+  | _(omitted)_ | Grows with row count — intentional short/lookup tables; wrong for the main table (whole page scrolls) |
+  | `<= 0`      | Fill to bottom leaving `abs(height)` px — **standard for main table**                                 |
+  | `> 0`       | Fixed px — **table inside a dialog** (e.g. `":height": 360`)                                          |
 
-  Cùng ba chế độ này áp cho `f-sheet` — xem [fsheet.md](fsheet.md) §Chiều cao.
+  Same three modes apply to `f-sheet` — see [fsheet.md](fsheet.md) §Height.
 
-  ⚠ Pattern cũ `":height": "$( window ).height()-285"` **không dùng nữa** — nó bắt bạn tự đoán tổng chiều cao toolbar/filter/menu, sai là hụt hoặc tràn. Biểu thức trả số **dương** nên vẫn chạy như px cố định (không vỡ), nhưng mất khả năng tự đo; lint D9 cảnh báo để bạn thay bằng `-16`.
-- `:item-class`: highlight row theo điều kiện — `"item => item.Active==0 ? 'danger' : ''"`
+  ⚠ Old pattern `":height": "$( window ).height()-285"` is **deprecated** — it forces guessing total toolbar/filter/menu height; wrong guess = short or overflowing. It returns a **positive** number so it still works as fixed px (doesn't break) but loses auto-measure; lint D9 warns so you replace it with `-16`.
+
+- `:item-class`: conditional row highlight — `"item => item.Active==0 ? 'danger' : ''"`
 
 ---
 
-## 2. t-check — Toggle trong Table Cell
+## 2. t-check — toggle in cell
 
-Dùng trong `headers` để render checkbox/icon toggle, kích hoạt API khi click.
+In `headers`, renders a checkbox/icon toggle that fires an API on click.
 
 ```json
 {
@@ -71,9 +71,9 @@ Dùng trong `headers` để render checkbox/icon toggle, kích hoạt API khi cl
 
 ---
 
-## 3. t-button — Button trong Table Cell
+## 3. t-button — button in cell
 
-Dùng khi cần button/icon với action trong cell. Hỗ trợ icon động.
+Button/icon with an action in a cell; supports dynamic icons.
 
 ```json
 {
@@ -96,9 +96,9 @@ Dùng khi cần button/icon với action trong cell. Hỗ trợ icon động.
 
 ---
 
-## 4. t-select — Dropdown Inline trong Table Cell
+## 4. t-select — inline dropdown in cell
 
-Dùng để edit field ngay trong bảng, trigger API khi chọn.
+Edit a field in the table; fires an API on selection.
 
 ```json
 {
@@ -129,11 +129,11 @@ Dùng để edit field ngay trong bảng, trigger API khi chọn.
 
 ---
 
-## 5. t-menu — Context Menu trong Table (menuChucNang Pattern)
+## 5. t-menu — context menu in table (menuChucNang)
 
-Định nghĩa menu items trong `data[]`, ref qua `t-menu` trong headers.
+Define menu items in `data[]`, reference via `t-menu` in headers.
 
-**Bước 1 — Định nghĩa `menuChucNang` trong `data[]`:**
+**Step 1 — `menuChucNang` in `data[]`:**
 
 ```json
 {
@@ -146,9 +146,9 @@ Dùng để edit field ngay trong bảng, trigger API khi chọn.
         {
           "addNew": 0,
           "dongChon": "item",
-          "sUserID":    "item.UserID",
-          "sUserName":  "item.UserName",
-          "sLastName":  "item.LastName",
+          "sUserID": "item.UserID",
+          "sUserName": "item.UserName",
+          "sLastName": "item.LastName",
           "sFirstName": "item.FirstName"
         },
         { "dlUserInfo": true }
@@ -160,16 +160,16 @@ Dùng để edit field ngay trong bảng, trigger API khi chọn.
       "text": "User Permission",
       "action": [
         {
-          "dongChon":   "item",
-          "sUserID":    "item.UserID",
-          "sFullName":  "item.FullName"
+          "dongChon": "item",
+          "sUserID": "item.UserID",
+          "sFullName": "item.FullName"
         },
         {
           "FUN": "openWindow",
           "IN": {
-            "id":    "`WinPer",
+            "id": "`WinPer",
             "title": "`User Permission",
-            "url":   "`/UserPermission"
+            "url": "`/UserPermission"
           }
         }
       ]
@@ -178,7 +178,7 @@ Dùng để edit field ngay trong bảng, trigger API khi chọn.
 }
 ```
 
-**Bước 2 — Dùng `t-menu` trong `headers`:**
+**Step 2 — `t-menu` in `headers`:**
 
 ```json
 {
@@ -191,16 +191,15 @@ Dùng để edit field ngay trong bảng, trigger API khi chọn.
 }
 ```
 
-**Pattern xử lý:**
-- `"dongChon": "item"` — lưu bản ghi hiện tại vào `dongChon`
-- Các field khác `"sUserID": "item.UserID"` — copy field từ item vào state
-- `{ "dlXxx": true }` — mở dialog sau khi state đã sẵn sàng
+- `"dongChon": "item"` — stores the current record in `dongChon`
+- `"sUserID": "item.UserID"` etc. — copy item fields into state
+- `{ "dlXxx": true }` — open the dialog after state is ready
 
 ---
 
-## 6. ctrl-update CRUD Pattern
+## 6. ctrl-update CRUD
 
-CRUD trực tiếp trong bảng — không cần viết dialog thủ công.
+CRUD directly in the table — no manual dialog.
 
 ```json
 {
@@ -209,17 +208,19 @@ CRUD trực tiếp trong bảng — không cần viết dialog thủ công.
     ":items": "dsFunctionRight",
     "item-key": "FunctionID",
     ":headers": [
-      { "text": "Code",   "value": "FunctionCode" },
-      { "text": "Name",   "value": "FunctionName" },
+      { "text": "Code", "value": "FunctionCode" },
+      { "text": "Name", "value": "FunctionName" },
       { "text": "Update", "value": "ctrl-update" }
     ],
     ":update-form": [
       {
-        "el": "v-text-field", "w": 12,
+        "el": "v-text-field",
+        "w": 12,
         "attr": { "v-model": "FunctionCode", "label": "Function Code", ":required": true }
       },
       {
-        "el": "v-text-field", "w": 12,
+        "el": "v-text-field",
+        "w": 12,
         "attr": { "v-model": "FunctionName", "label": "Function Name" }
       }
     ],
@@ -231,28 +232,29 @@ CRUD trực tiếp trong bảng — không cần viết dialog thủ công.
       },
       "edit": {
         "API": "/SM_Function_Update",
-        "IN": { "FunctionID": "item.FunctionID", "FunctionCode": "item.FunctionCode", "FunctionName": "item.FunctionName" },
+        "IN": {
+          "FunctionID": "item.FunctionID",
+          "FunctionCode": "item.FunctionCode",
+          "FunctionName": "item.FunctionName"
+        },
         "CALLBACK": { "CALL": "getFunctionRight" }
       },
       "delete": {
         "CONFIRM": "Bạn có chắc muốn xóa quyền này không?",
         "API": "/SM_Function_Delete",
         "IN": { "FunctionID": "item.FunctionID" },
-        "CALLBACK": [
-          { "MESS": "Xóa thành công" },
-          { "CALL": "getFunctionRight" }
-        ]
+        "CALLBACK": [{ "MESS": "Xóa thành công" }, { "CALL": "getFunctionRight" }]
       }
     }
   }
 }
 ```
 
-**Khi nào dùng ctrl-update:** Khi form edit đơn giản (2-5 fields) và không cần layout phức tạp.
+Use ctrl-update for simple edit forms (2–5 fields) with no complex layout.
 
 ---
 
-## 7. f-table với show-select (Multi-select)
+## 7. f-table with show-select (multi-select)
 
 ```json
 {
@@ -270,14 +272,14 @@ CRUD trực tiếp trong bảng — không cần viết dialog thủ công.
 }
 ```
 
-- `v-model`: nhận array các item được chọn
-- `:update-api.default-item`: inject default field vào mỗi item khi load (ở đây `xAA: []` cho chip-group)
+- `v-model`: array of selected items
+- `:update-api.default-item`: injects default fields into each item on load (here `xAA: []` for chip-group)
 
 ---
 
-## 8. v-chip-group trong Table Cell
+## 8. v-chip-group in cell
 
-Hiển thị danh sách tags trong cell, click để mở dialog.
+Tag list in a cell; click opens a dialog.
 
 ```json
 {
@@ -308,9 +310,9 @@ Hiển thị danh sách tags trong cell, click để mở dialog.
 
 ---
 
-## Khi nào dùng `t-button` vs `t-menu`
+## `t-button` vs `t-menu`
 
-- **`t-button`**: hành động duy nhất là xem/load dữ liệu liên quan → 1 click trực tiếp
-- **`t-menu`**: có nhiều hành động **hoặc** hành động thay đổi trạng thái (Kích hoạt, Chốt điểm, Xóa...)
+- **`t-button`**: the only action is viewing/loading related data → one direct click
+- **`t-menu`**: several actions **or** a state-changing action (Kích hoạt, Chốt điểm, Xóa...)
 
-> Không bọc "Xem chi tiết" trong `t-menu` — thêm 1 click thừa. Dùng `t-button` thay. Xem thêm Master-Detail trong [ui-layout-patterns.md](ui-layout-patterns.md).
+> Don't wrap "Xem chi tiết" in `t-menu` — adds a wasted click; use `t-button`. See Master-Detail in [ui-layout-patterns.md](ui-layout-patterns.md).

package/skills/fui-skill/references/ui-templates.md

@@ -1,29 +1,22 @@
-# UI Templates — thư mục `examples/`
+# UI Templates — `examples/`
 
-> File này sở hữu: **mô tả 4 file mẫu trong `examples/` và cách dùng lại chúng**. Quy tắc viết
-> `controls`/action xem [controls-patterns.md](controls-patterns.md); pattern f-table chi tiết xem
-> [component-table.md](component-table.md).
+> Owns: **the 4 sample files in `examples/` and how to reuse them**. `controls`/action rules: [controls-patterns.md](controls-patterns.md); detailed f-table patterns: [component-table.md](component-table.md).
 
-`examples/` chứa **file tham chiếu thật** — không phải template rỗng để copy nguyên khối. Đọc để lấy
-đúng cú pháp/pattern cho tình huống đang làm, rồi viết lại theo nghiệp vụ thực tế.
+`examples/` holds **real reference files**, not blank templates to copy whole. Read them for correct syntax/patterns, then rewrite for the actual business case.
 
-## Các file có sẵn
+## Files
 
-| File | Dùng khi |
-|---|---|
-| `component.vue` | Custom Vue component mẫu (`uc-*`) — cấu trúc chuẩn `<template>` + `<script>`, không `name:`, không `components:{}`, không `<style>` |
-| `module-patterns.json` | **Tham chiếu module hoàn chỉnh** — data/watch/controls kết hợp: menuChucNang, TypeLoad, addNew flag dialog, nested IF/THEN/ELSE, bulk action, openWindow+button+ctrlhotkey, `_.find`, pushRouter, f-menu inline, row-prop-object |
-| `f-table-patterns.json` | **Tham chiếu f-table chuyên sâu** — tất cả props, mọi loại header (`t-check`/`t-select`/`t-button`/`t-link`/`t-menu`/`v-chip-group`/`v-icon`/divider), `ctrl-update` đầy đủ, f-table trong dialog, default-item-only |
-| `project-patterns.json` | **Tham chiếu `project.json`** — cấu trúc đầy đủ project config: menuLeft/menu/menuStyle/menuComponent/domainSetting, `right` theo SystemRight+FunctionRight, quan hệ với `set` của module.json (override title/menu/apiDomain theo từng trang) |
+| File                    | Use when                                                                                                                                                                                                                   |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `component.vue`         | Sample custom Vue component (`uc-*`) — standard `<template>` + `<script>`, no `name:`, no `components:{}`, no `<style>`                                                                                                    |
+| `module-patterns.json`  | **Full module reference** — data/watch/controls combined: menuChucNang, TypeLoad, addNew flag dialog, nested IF/THEN/ELSE, bulk action, openWindow+button+ctrlhotkey, `_.find`, pushRouter, inline f-menu, row-prop-object |
+| `f-table-patterns.json` | **In-depth f-table reference** — all props, every header type (`t-check`/`t-select`/`t-button`/`t-link`/`t-menu`/`v-chip-group`/`v-icon`/divider), full `ctrl-update`, f-table in a dialog, default-item-only              |
+| `project-patterns.json` | **`project.json` reference** — full project config: menuLeft/menu/menuStyle/menuComponent/domainSetting, `right` by SystemRight+FunctionRight, relation to module.json `set` (per-page override of title/menu/apiDomain)   |
 
-## Cách dùng
+## How to use
 
-1. Xác định tình huống → mở file tham chiếu tương ứng ở trên.
-2. Lấy **đúng đoạn pattern cần dùng** (một action, một header, một khối dialog) — không copy cả file.
-3. Thay API bằng endpoint thật, đổi tên field/label theo nghiệp vụ.
-4. Ghép vào `data` / `controls` / `watch` sẵn có của module.
-5. Chạy `module_validate` rồi `module_outline` trước khi publish.
-
-**Không có filesystem access (SSE/remote)?** Đọc file mẫu qua `skill_reference_get`, sửa nội dung,
-rồi stage bằng `module_stage_json` / `component_stage` trước khi gọi tool publish
-(xem [tools-registry.md](tools-registry.md)).
+1. Identify the case → open the matching file above.
+2. Take **only the pattern needed** (one action, one header, one dialog block) — never the whole file.
+3. Replace APIs with real endpoints; rename fields/labels for the business case.
+4. Merge into the module's existing `data` / `controls` / `watch`.
+5. Run `fui module validate` then `fui module outline` before publishing.