@fui-org/fui-cli 1.3.1 → 2.0.0

package/skills/fui-skill/references/INDEX.md

@@ -1,144 +1,112 @@
-# FUI Skill — Reference Router (INDEX)
-
-> File này sở hữu: **bảng định tuyến tình huống / component / từ khóa → file reference cần load**. Không chứa nội dung kỹ thuật — mọi quy tắc đều nằm ở file đích. *(Tier A — luôn nạp cùng `skill_get`.)*
-
-**Bản đồ tra cứu: tình huống / component / từ khóa → file cần load.** Đây là file luôn được nạp cùng `skill_get`. Trước khi xử lý bất kỳ việc gì, tra bảng dưới để biết cần `skill_reference_get({ refs: [...] })` file nào — **đừng dựa vào trí nhớ, hãy load đúng file**.
-
-> Cách dùng: `skill_reference_get({ refs: ["references/<tên-file>.md"] })`. Có thể load nhiều file một lần.
-
----
-
-## Luôn có sẵn (Tier A — đã nạp cùng skill_get)
-
-| File | Nội dung |
-|---|---|
-| `controls-patterns.md` | Action engine (**§QUY TẮC NỀN: một `{}` = một lệnh; nhiều lệnh tuần tự = mảng `[{…},{…}]`**), value resolution, key notation, layout grid — **nền tảng** |
-| `module-structure.md` | Cấu trúc file module/project, layout rules |
-| `INDEX.md` | (file này) — bản đồ router |
-
----
-
-## Hiểu nền tảng / cấu tạo FUI (đọc sớm)
-
-| Tình huống | Load file |
-|---|---|
-| Cấu tạo FUI, phân cấp Project→Module (import/component/set trộn thế nào), runtime, vueData/v_Set | `platform-architecture.md` |
-| 4 thành phần module.json (data/watch/controls/set) — vai trò, cấu hình, tương tác | `module-json-anatomy.md` |
-| **`HTMLOnly: true`** — server KHÔNG nhúng sẵn thư viện nào (Vue/Vuetify/jQuery/lodash/MDI/`projectdefaultstyle.css` đều vắng); cần gì phải tự khai trong chính module, và `script-map.md` KHÔNG áp dụng | `module-structure.md` §HTMLOnly=true: KHÔNG có thư viện nào được nhúng sẵn (Tier A, đã nạp sẵn) |
-
-## Thiết kế UI / chọn component
-
-| Tình huống | Load file |
-|---|---|
-| **Layout controls — class/prop/style ĐƯỢC DÙNG (đừng tự thêm style)** | `controls-styling-vocabulary.md` |
-| Bắt đầu thiết kế UI, chọn component nào | `component-quickref.md` |
-| Khai báo `data[]` — ba loại phần tử, thứ tự state → named action → auto-startup | `module-data-patterns.md` (value resolution + key lồng nhau: `controls-patterns.md` §0/§1, Tier A) |
-| Pattern UI thực tế (data/watch/toolbar/filter/permission) | `ui-patterns.md` |
-| **Hàng nhiều control / canh phải nhóm nút** — chuẩn `shrink` cho mọi cột trừ `v-spacer`; `w` px | `controls-patterns.md` (Tier A, đã nạp sẵn) |
-| **f-table** — **hiển thị dữ liệu dạng datatable** (list/CRUD qua form dialog, cả readonly lẫn có `:update-api`) + điều khiển trong ô: t-check/t-button/t-select/t-menu, ctrl-update, show-select, chip-group | `ui-table-cell-patterns.md` |
-| Bảng dữ liệu chuyên sâu (mọi props, header types, auto-headers khi bỏ `:headers`, **tổng cột `sum-format`** — object=hàng tổng trong bảng / string=dòng text dưới bảng, readonly table) | `component-table.md` |
-| **f-sheet** — **nhập liệu trực tiếp trên bảng kiểu Excel** (sửa ô tại chỗ, dán từ Excel, không qua dialog) — component có sẵn (nền tảng AG Grid), KHÔNG tự viết bảng nhập liệu bằng `uc-*.vue`; import, props, columns, wiring API | `fsheet.md` |
-| Dialog / form popup (hidden-container, mở dialog với row, checkbox-list) | `ui-dialog-patterns.md` |
-| Mở sub-window & trao đổi dữ liệu (`openWindow`, `#PARENT`/`#Win`) | `ui-crosswindow-patterns.md` |
-| Layout: page-container, master-detail, v-switch, date init, dynamic label | `ui-layout-patterns.md` |
-| Input controls (f-date, f-time, f-search, f-radiobox, text-field...) | `components-input.md` |
-| Display components (f-label, f-title, f-box, f-header, chip, badge...) | `components-display.md` |
-| Dialog components (f-dialog, v-dialog chi tiết) | `components-dialog.md` |
-| Custom Vue component (`uc-*.vue`) — scope, props/events, **ưu tiên class Vuetify có sẵn (cấm _injectStyle)**, dialog chuẩn hoá, tận dụng ajaxCALL/confirm/showMessage | `component-design.md` |
-| **Kiểm chứng `uc-*.vue` trong không gian riêng** (`component_preview`) + luật push component cấp project trước khi render module | `component-design.md` |
-| **Tra component project-scope đã có** trước khi tạo mới — quy ước `{projectId}/COMPONENTS.md` + vòng tích luỹ | `component-design.md` §1a |
-| Template/ví dụ tham chiếu nhanh | `ui-templates.md` + `examples/` |
-| **User gửi ảnh chụp màn hình giao diện** vào chat, hoặc đọc screenshot từ `renderUI` — đánh giá lỗi hiển thị, màu sắc, padding/margin, căn chỉnh, vị trí nút | `ui-screenshot-review.md` |
-
-## Biểu đồ / báo cáo / dashboard
-
-| Tình huống | Load file |
-|---|---|
-| Dùng f-echart (nền tảng Apache ECharts) — import, props, config, theme, DataView, `grid` padding, `boundaryGap`, lỗi | `components-echart.md` |
-| Chọn/vẽ loại chart cụ thể + pattern module.json | `echart-templates.md` |
-| Xuất PDF (f-pdfmake) | `pdfmake.md` |
-
-## API / Stored Procedure / tAPI
-
-| Tình huống | Load file |
-|---|---|
-| Đặt tên SP, params, URL, response format, error, wiring | `tapi-reference.md` |
-| **API trả 200 nhưng dữ liệu rỗng/sai**, hoặc sắp đổi/xoá tham số của một SP đã có module gọi — ghép tham số tAPI khoan dung (thiếu → `NULL`, thừa → bỏ qua, **không bao giờ báo lỗi**) | `tapi-reference.md` §2 |
-| **Đọc HTTP header trong SP** (`User-Agent`, `Cookie`, `X-Forwarded-For`, IP client, thiết bị/trình duyệt) — họ `@sys_header_*`, mỗi dấu `-` đổi thành `_` | `tapi-reference.md` §2 |
-| Kiểm tra quyền trong SP (5 pattern, `@sys_SystemRight`, `getSystemRight`) | `tapi-permission-patterns.md` |
-| Upload/download/xem file qua SP (`spAPIFILE_`, `fileContent`, `tblFileData`) | `tapi-file-api.md` |
-| Hàm SQL CLR: httpCall, sendMail, ImageResize, FileReader, RegexMatch... | `sql-clr-functions.md` |
-
-## Phân quyền người dùng
-
-| Tình huống | Load file |
-|---|---|
-| Khái niệm `SystemRight` (cấp bậc) vs `FunctionRight` (quyền theo chức năng), `v-if`/menu `right`, và 8 tool quản lý định nghĩa quyền (`right_system_list/new/update/delete`, `right_function_list/new/update/delete`) | `permission-system.md` |
-| **Sắp gác một control/menu/SP bằng mã quyền** — mã đó có tồn tại thật không, tạo thế nào | `permission-system.md` (§"mã quyền phải TỒN TẠI trước khi đem gác") |
-| Kiểm tra quyền trong thân SP (5 pattern SQL) | `tapi-permission-patterns.md` |
+# FUI Reference Router (INDEX)
 
-## Database
+Routing only; rules live in target files. Printed by `fui skill get` with SKILL.md. Before any task, find the row and load the file — never rely on memory.
 
-| Tình huống | Load file |
-|---|---|
-| **Database CHƯA tồn tại** — tạo DB SQL Server mới, hai loại tài khoản SQL, đăng ký alias tAPI vào `acc` | `project-provisioning.md` |
-| **Sắp chạy `CREATE DATABASE` / `CREATE LOGIN`** — kiểm quyền cấp máy chủ trước (`sysadmin`, hoặc `CREATE ANY DATABASE` + `ALTER ANY LOGIN`); thiếu quyền thì từ chối chứ đừng chạy thử | `project-provisioning.md` §Bước 0 |
-| Kết nối DB, dbToken, schema, workflow SP | `db-workflow.md` |
-| **Project gọi nhiều database** (module.json có `"API": "/{alias}/…"` với nhiều alias khác nhau) — mỗi alias một `db_connect`, tham số `db` chọn kết nối, tool trả MENU khi nhập nhằng | `db-workflow.md` (§1, §4) |
-| **SSO xuyên domain** — userToken cùng domain cha dùng được ngay, không cần hỏi lại hay xác minh | `db-workflow.md` §6a |
-| **Linked Server** — SP qua ranh giới linked server, quy ước đặt tên `spIO_IN_` / `spIO_OUT_` | `db-workflow.md` §8a |
-| Quy tắc thiết kế bảng (đặt tên, PK/FK, cột audit) | `db-table-design.md` |
-
-## Quy trình / thiết kế hệ thống
-
-| Tình huống | Load file |
-|---|---|
-| **"Tạo dự án mới" / "tạo DB + project FUI mới"** — dựng hạ tầng từ số 0: CREATE DATABASE, tài khoản ứng dụng vs dev, alias `acc`, `project_new`, cấp quyền quản trị. Làm TRƯỚC `system-design.md` | `project-provisioning.md` |
-| **Cấp/thu hồi quyền SỬA PROJECT trong IDE FUI** cho một lập trình viên (`UserRight`, 5 tool `project_user_*`) — khác hẳn quyền người dùng cuối ở `permission-system.md` | `project-provisioning.md` (§Bước 6) |
-| **Thiết kế cả app nhiều module từ mô tả** (phân rã, schema-first, menu, quyền) | `system-design.md` |
-| Tạo một module fullstack (UI + API) — quy trình 6 bước UI-first | `fullstack-workflow.md` |
-| Cấu hình project.json: menu, điều hướng, phân quyền, domain | `project-config.md` |
-
-## Scripting / kỹ thuật nâng cao
-
-| Tình huống | Load file |
-|---|---|
-| **Cần chạy nhiều lệnh có thứ tự** (reset state → reload → báo toast) trong `CALLBACK`/`:action`/`watch`/`THEN` | `controls-patterns.md` §QUY TẮC NỀN (Tier A, đã nạp sẵn) |
-| Watcher patterns (v_old, deep-watch, cascading) | `watcher-patterns.md` |
-| Kỹ thuật nâng cao (EXE, MAP, expression phức tạp) | `advanced-techniques.md` |
-| **Trang trắng / app rỗng dù 0 JS error, 0 Vue warn**, hoặc cần đặt logic phức tạp vào `:attr` `:option` `:config` | `advanced-techniques.md` §1 + chạy `module_validate` |
-| **`… is not defined` lúc render**, hoặc một `EXE`/`FUN` "chạy xong mà không làm gì" | `advanced-techniques.md` §2 (hàm phải có thật trong `script.js` — nhớ `module_publish_script`). ⚠️ `module_validate` KHÔNG bắt được ca này, phải `module_simulate({renderUI:true})` |
-| Hàm tiện ích FUI có sẵn (openWindow, ajaxCALL, jsonToExcel, groupBy...) | `default-function.md` |
-| **Thư viện đã bundled sẵn** (jQuery, lodash, moment, numeral, toast, jquery-confirm) — biết trước khi định thêm CDN. ⚠️ Chỉ đúng với `HTMLOnly=false` | `script-map.md` §0 |
-| Bản đồ script FUI (defaultfunction.js, component.js...) | `script-map.md` |
-| FUI project bootstrapper (fastproject) | `fastproject.md` |
-| Coding standards | `coding-standards.md` |
-| Real-time / SignalR (webSocketJoinGroup, webSocket_Send) | `websocket-realtime.md` |
-
-## Vận hành / publish / deploy
-
-| Tình huống | Load file |
-|---|---|
-| **"new session" / "phiên mới" / "cửa sổ mới"** — mở thêm một phiên Claude Code CLI ở cửa sổ terminal riêng (lấy workspace root động, KHÔNG hard-code đường dẫn) | `new-session.md` |
-| Mức độ an toàn của từng MCP tool (R/M, Safe/Confirm/Destructive), strict mode, `db_sp_verify`, error log | `tools-registry.md` |
-| Checklist definition-of-done trước khi publish (kèm bước `module_validate` + `module_outline` + `module_simulate` + `db_sp_verify` tĩnh) | `verification.md` |
-| **UI hỏng mà chưa biết vì sao — chọn tầng kiểm chứng nào cho rẻ nhất** (ma trận triệu chứng → tầng; đọc TRƯỚC khi chạy `renderUI`, và đọc lại khi đã render ≥2 lượt mà chưa khá hơn) | `verification.md` §Chọn tầng kiểm chứng |
-
----
+Load: `fui skill ref references/a.md references/b.md` (several at once OK).
 
-## Design system
+## Tier A (load first via `fui skill ref`)
+
+- `controls-patterns.md` — foundation: action engine (§CORE RULE: one `{}` = one command; sequential commands = array `[{…},{…}]`), value resolution, key notation, layout grid
+- `module-structure.md` — module/project files, layout rules
+- `INDEX.md` — this router
+
+## Foundations (read early)
+
+- FUI anatomy, Project→Module hierarchy (import/component/set merge), runtime, vueData/v_Set → `platform-architecture.md`
+- module.json's 4 parts (data/watch/controls/set) → `module-json-anatomy.md`
+- `HTMLOnly: true`: server embeds NO library (Vue/Vuetify/jQuery/lodash/MDI/`projectdefaultstyle.css` absent); declare all in the module; `script-map.md` does NOT apply → `module-structure.md` §HTMLOnly=true: KHÔNG có thư viện nào được nhúng sẵn
+
+## UI / components
+
+- Allowed control class/prop/style (never invent styles) → `controls-styling-vocabulary.md`
+- Area with its own scrollbar / user wants a restyled scrollbar → built-in class `fpScrollbar`, NEVER hand-write `::-webkit-scrollbar`; put it only on the element that actually scrolls, NOT nested → `controls-styling-vocabulary.md` §Scrollbar
+- Start UI, pick component → `component-quickref.md`
+- `data[]`: three element kinds, order state → named action → auto-startup → `module-data-patterns.md` (value resolution, nested keys: `controls-patterns.md` §0/§1)
+- Real patterns (data/watch/toolbar/filter/permission) → `ui-patterns.md`
+- Multi-control row / right-aligned buttons: `shrink` on every column except `v-spacer`; `w` in px → `controls-patterns.md`
+- f-table: datatable display (list/CRUD via form dialog, readonly or `:update-api`) + cell controls t-check/t-button/t-select/t-menu, ctrl-update, show-select, chip-group → `ui-table-cell-patterns.md`
+- Table deep-dive: all props, header types, auto-headers without `:headers`, `sum-format` (object = total row in table / string = text line below), readonly, **Excel export button `excel`** (`true` = raw data / `"UI"` = rows and columns as displayed: filtered, sorted, header names and column count, but values stay raw and unformatted) → `component-table.md`
+- f-sheet: Excel-style in-place entry (paste from Excel, no dialog), built-in (AG Grid); NEVER hand-build an entry grid in `uc-*.vue`; import, props, columns, API wiring → `fsheet.md`
+- Popup form (hidden-container, open with row, checkbox-list) → `ui-dialog-patterns.md`
+- Sub-window data exchange (`openWindow`, `#PARENT`/`#Win`) → `ui-crosswindow-patterns.md`
+- page-container, master-detail, v-switch, date init, dynamic label → `ui-layout-patterns.md`
+- Inputs (f-date, f-time, f-search, f-radiobox, text-field…) → `components-input.md`
+- Display (f-label, f-title, f-box, f-header, chip, badge…) → `components-display.md`
+- f-dialog, v-dialog → `components-dialog.md`
+- `uc-*.vue`: scope, props/events, built-in Vuetify classes (no `_injectStyle`), standard dialog, reuse ajaxCALL/confirm/showMessage → `component-design.md`
+- Isolated `uc-*.vue` check (`fui component preview`); push project-level components before rendering the module → `component-design.md`
+- Check existing project-scope components before creating: `{projectId}/COMPONENTS.md` + accumulation loop → `component-design.md` §1a
+- Templates → `ui-templates.md` + `examples/`
+- UI screenshot (from user or `--render`): display bugs, colors, padding/margin, alignment, button placement → `ui-screenshot-review.md`
+
+## Charts / reports
 
-**Hai chế độ tách bạch — xác định TRƯỚC khi viết controls. Chủ sở hữu: `design-modes.md`.**
+- f-echart (Apache ECharts): import, props, config, theme, DataView, `grid` padding, `boundaryGap`, errors → `components-echart.md`
+- Specific chart type + module.json pattern → `echart-templates.md`
+- PDF (f-pdfmake) → `pdfmake.md`
 
-| Chế độ | Khi nào | Nguồn thẩm mỹ |
-|---|---|---|
-| **App-mode** (mặc định) | Phần mềm quản lý: CRUD, form, danh sách, dashboard nội bộ | **DUY NHẤT** `design_read("fui")` + `controls-styling-vocabulary.md` — CẤM brand DESIGN.md, CẤM style tự chế |
-| **Web-mode** | Landing page / trang giới thiệu / công khai (thường `HTMLOnly: true`) | `design_list` → `design_read("<brand>")` theo tone/ngành; CSS tự do trong header.html |
+## API / SP / tAPI
+
+- SP naming, params, URL, response, errors, wiring → `tapi-reference.md`
+- 200 but empty/wrong data, or changing/removing params of an SP a module calls: lenient binding (missing → `NULL`, extra → ignored, never errors) → `tapi-reference.md` §2
+- HTTP headers in SP (`User-Agent`, `Cookie`, `X-Forwarded-For`, client IP, device/browser): `@sys_header_*`, each `-` → `_` → `tapi-reference.md` §2
+- SP permission checks (5 patterns, `@sys_SystemRight`, `getSystemRight`) → `tapi-permission-patterns.md`
+- File upload/download/view (`spAPIFILE_`, `fileContent`, `tblFileData`) → `tapi-file-api.md`
+- SQL CLR: httpCall, sendMail, ImageResize, FileReader, RegexMatch… → `sql-clr-functions.md`
+
+## User permissions
+
+- `SystemRight` (level) vs `FunctionRight` (per function), `v-if`/menu `right`, `fui right system|function list/new/update/delete` (8 commands) → `permission-system.md`
+- Guarding control/menu/SP with a right code — it must exist; how to create → `permission-system.md` (§"mã quyền phải TỒN TẠI trước khi đem gác")
+- SQL permission checks in SP body → `tapi-permission-patterns.md`
+
+## Database
+
+- DB doesn't exist: new SQL Server DB, two SQL account types, tAPI alias in `acc` → `project-provisioning.md`
+- Before `CREATE DATABASE` / `CREATE LOGIN`: check server rights (`sysadmin`, or `CREATE ANY DATABASE` + `ALTER ANY LOGIN`); if missing, refuse, no trial run → `project-provisioning.md` §Step 0
+- Connection, dbToken, schema, SP workflow → `db-workflow.md`
+- Multiple DBs / an alias repeated across zones: `connectionName` names a readable folder, `apiName` is stored separately, `--db` picks the connection → `db-workflow.md` (§1, §4)
+- Cross-domain SSO: userToken of same parent domain works as-is; don't re-ask/verify → `db-workflow.md` §6a
+- Linked Server SPs, naming `spIO_IN_` / `spIO_OUT_` → `db-workflow.md` §8a
+- Table design (naming, PK/FK, audit columns) → `db-table-design.md`
+
+## Process / system design
+
+- New project / new DB + FUI project from zero: CREATE DATABASE, app vs dev accounts, `acc` alias, `fui project new`, admin grant; do BEFORE `system-design.md` → `project-provisioning.md`
+- Grant/revoke IDE project-edit rights for a developer (`UserRight`, `fui user search/list/add/set/remove`); not end-user rights (`permission-system.md`) → `project-provisioning.md` (§Step 6)
+- Multi-module app from a description (decomposition, schema-first, menu, rights) → `system-design.md`
+- One fullstack module, 6-step UI-first → `fullstack-workflow.md`
+- project.json: menu, navigation, permissions, domain → `project-config.md`
+
+## Scripting / advanced
+
+- Ordered commands (reset → reload → toast) in `CALLBACK`/`:action`/`watch`/`THEN` → `controls-patterns.md` §CORE RULE
+- v_old, deep-watch, cascading → `watcher-patterns.md`
+- EXE, MAP, complex expressions → `advanced-techniques.md`
+- Blank page with 0 JS errors and 0 Vue warns, or complex logic in `:attr` `:option` `:config` → `advanced-techniques.md` §1 + `fui module validate`
+- `… is not defined` at render, or `EXE`/`FUN` doing nothing → `advanced-techniques.md` §2 (function must exist in `script.js`; `fui module publish script`). ⚠️ `fui module validate` misses this; use `fui module simulate --render`
+- Built-in utilities (openWindow, ajaxCALL, jsonToExcel, groupBy…) → `default-function.md`
+- Bundled libs (jQuery, lodash, moment, numeral, toast, jquery-confirm) — check before adding a CDN; ⚠️ `HTMLOnly=false` only → `script-map.md` §0
+- Script map (defaultfunction.js, component.js…) → `script-map.md`
+- fastproject bootstrapper → `fastproject.md`
+- Coding standards → `coding-standards.md`
+- SignalR (webSocketJoinGroup, webSocket_Send) → `websocket-realtime.md`
+
+## Operations / publish
+
+- "new session" / "phiên mới" / "cửa sổ mới": open another Claude Code CLI in its own terminal window (workspace root resolved dynamically, NEVER hard-coded) → `new-session.md`
+- Hand work / instructions to another running Claude session (coordinating several sessions, a multi-AI workflow, parallelizing work per module) — `ListAgents`/`SendMessage` → `new-session.md` §6
+- Per-command safety (R/M, Safe/Confirm/Destructive), strict mode, `fui sp verify`, error log → `tools-registry.md`
+- Pre-publish definition-of-done (`fui module validate` + `fui module outline` + `fui module simulate` + static `fui sp verify`) → `verification.md`
+- UI broken, cause unknown — cheapest verification layer (symptom → layer; read BEFORE `--render`, reread after ≥2 renders without progress) → `verification.md` §Chọn tầng kiểm chứng
+
+## Design system
 
-| Tình huống | Load file |
-|---|---|
-| Chọn App-mode hay Web-mode, giới hạn `border-radius`, vòng tích luỹ `{projectId}/DESIGN.md` | `design-modes.md` |
-| Anatomy dialog/form/bảng màu chuẩn App-mode | tool `design_read("fui")` (không qua `skill_reference_get`) |
+Pick the mode BEFORE writing controls. Owner: `design-modes.md`.
 
-- `{projectId}/DESIGN.md` (nếu có) **ghi đè** quy tắc cùng chủ đề của chế độ đang dùng — kiểm tra trước khi thiết kế.
-- User góp ý UI → ghi quy tắc vào `{projectId}/DESIGN.md` (vòng tích luỹ — `design-modes.md` §3).
+- App-mode (default): CRUD, forms, lists, internal dashboards. Source: ONLY `fui design read fui` + `controls-styling-vocabulary.md`; NO brand DESIGN.md, NO custom styles.
+- Web-mode: landing/intro/public pages (usually `HTMLOnly: true`). Source: `fui design list` → `fui design read <brand>` by tone/industry; free CSS in header.html.
+- Mode choice, `border-radius` limits, `{projectId}/DESIGN.md` loop → `design-modes.md`
+- App-mode dialog/form/palette anatomy → `fui design read fui` (not `fui skill ref`)
+- `{projectId}/DESIGN.md`, if present, overrides same-topic rules of the active mode; check before designing.
+- User UI feedback → record rule in `{projectId}/DESIGN.md` (`design-modes.md` §3).

package/skills/fui-skill/references/advanced-techniques.md

@@ -1,57 +1,60 @@
 # Advanced FUI Techniques
 
-> File này sở hữu: **kỹ thuật nâng cao: `EXE`, `MAP`, expression phức tạp, luật expression thuần cho `:attr`, luật hàm gọi trong `EXE`/`FUN` phải tồn tại thật**. Action engine cơ bản xem [controls-patterns.md](controls-patterns.md).
-
-This document captures advanced patterns and techniques for FUI development, extracted from real-world implementations.
+> Owns: **advanced techniques: `EXE`, `MAP`, complex expressions, pure-expression rule for `:attr`, rule that functions called in `EXE`/`FUN` must really exist**. Basic action engine: [controls-patterns.md](controls-patterns.md).
 
 ---
 
-## 1. `:attr` CHỈ NHẬN EXPRESSION THUẦN — không bao giờ nhét statement
+## 1. `:attr` takes a PURE EXPRESSION — never statements
 
-**Luật cứng.** Mọi giá trị binding trong `module.json` — `:option`, `:config`, `:items`, `:headers`, `:style`, và mọi `v-bind:*` — đi **thẳng vào template compiler của Vue**, nơi chỉ chấp nhận **một biểu thức**. Tuyệt đối không được chứa:
+**Hard rule.** Every binding value in `module.json` — `:option`, `:config`, `:items`, `:headers`, `:style`, every `v-bind:*` — goes **straight to Vue's template compiler**, which accepts **one expression**. Never include:
 
-- `function(){ ... }` hay IIFE `(function(){...})()`
+- `function(){ ... }` or IIFE `(function(){...})()`
 - `return`
 - `var` / `let` / `const`
-- dấu `;` nối nhiều câu lệnh
+- `;` joining statements
+
+### Why it is worse than it looks
 
-### Vì sao nghiêm trọng hơn vẻ ngoài của nó
+A statement in `:attr` breaks template compilation and Vue **swallows the error**: **blank page, 0 JS errors, 0 `[Vue warn]`**, no stack trace — found only after many `fui module simulate --render` rounds. That is why `fui module validate` reports it as an **error**, not a warning.
 
-Statement trong `:attr` làm **compile template hỏng**, và Vue **nuốt lỗi đó**: kết quả là **trang trắng với 0 JS error, 0 `[Vue warn]`**. Không có stack trace, không có dòng nào để lần — chỉ mò ra được sau nhiều vòng `module_simulate({renderUI:true})`. Đây là lý do nó là **error** trong `module_validate` chứ không phải warning.
+> Unlike `data[]` / `IN` / `{{ }}`, which go through FUI's `getVueData()` (see [controls-patterns.md](controls-patterns.md) §0 Value Resolution) with their own rules, `:attr` does **not**.
 
-> Khác hẳn `data[]` / `IN` / `{{ }}`: những chỗ đó đi qua `getVueData()` của FUI (xem [controls-patterns.md](controls-patterns.md) §0 Value Resolution) và có luật riêng. `:attr` **không** đi qua đó.
+### Allowed in `:attr`
 
-### Được phép trong `:attr`
+| Form                               | Example                                                 |
+| ---------------------------------- | ------------------------------------------------------- |
+| Object / array literal             | `":config": "{ height: 300, legend: { show: true } }"`  |
+| Ternary                            | `":color": "ok ? 'primary' : 'warning'"`                |
+| Arrow `.map` / `.filter` chains    | `":items": "ds.filter(x => x.Active).map(x => x.Name)"` |
+| Property access / vueData variable | `":option": "optThe"`                                   |
 
-| Dạng | Ví dụ |
-|---|---|
-| Object / array literal | `":config": "{ height: 300, legend: { show: true } }"` |
-| Ternary | `":color": "ok ? 'primary' : 'warning'"` |
-| Chuỗi arrow `.map` / `.filter` | `":items": "ds.filter(x => x.Active).map(x => x.Name)"` |
-| Truy cập thuộc tính / biến vueData | `":option": "optThe"` |
+### Complex logic → `script.js` + `EXE`
 
-### Logic phức tạp → chuyển sang `script.js` + `EXE`
+Multi-step transforms, temp variables, loops, complex conditions → **not in `:attr`**:
 
-Nhiều bước biến đổi, biến trung gian, vòng lặp, điều kiện phức tạp → **đừng đặt trong `:attr`**. Bốn bước:
+1. Write a plain function in `script.js`: `function tenHam(){ ... }`
+2. It **assigns directly to `vueData.xxx`** (does not `return` a value for JSON)
+3. Call it via `EXE` — usually in the data-loading action's `CALLBACK`: `"EXE": "tenHam()"`
+4. `:attr` in `module.json` only points at the variable: `":option": "optThe"`
 
-1. Viết một hàm thường trong `script.js`: `function tenHam(){ ... }`
-2. Hàm **gán thẳng vào `vueData.xxx`** (không `return` giá trị cho JSON đọc)
-3. Gọi hàm qua `EXE` — thường trong `CALLBACK` của action nạp dữ liệu: `"EXE": "tenHam()"`
-4. `:attr` trong `module.json` chỉ trỏ tới biến đó: `":option": "optThe"`
+❌ **Wrong** — IIFE in `:attr`:
 
-❌ **Sai** — IIFE trong `:attr`:
 ```json
 ":option": "(function(){ var src = vueData.ds.filter(r => r.id===1); return { series:[{data: src}] }; })();"
 ```
 
-✅ **Đúng**:
+✅ **Right**:
+
 ```javascript
 // script.js
 function buildChart() {
-    var src = vueData.ds.filter(function (r) { return r.id === 1; });
-    vueData.optThe = { series: [{ data: src }] };
+  var src = vueData.ds.filter(function (r) {
+    return r.id === 1;
+  });
+  vueData.optThe = { series: [{ data: src }] };
 }
 ```
+
 ```json
 // module.json — action nạp dữ liệu
 "CALLBACK": { "EXE": "buildChart()" },
@@ -59,102 +62,107 @@ function buildChart() {
 ":option": "optThe"
 ```
 
-`:option` khai báo trong `data[]` là `{}` để lần render đầu không vỡ; `buildChart()` gán bản thật sau khi API trả về.
+Declare `:option`'s variable as `{}` in `data[]` so the first render doesn't break; `buildChart()` assigns the real value after the API returns.
 
-### Chẩn đoán trang trắng khi "0 JS error, 0 Vue warn"
+### Diagnosing a blank page with "0 JS error, 0 Vue warn"
 
-Triệu chứng đó **không phải lỗi runtime** — nghi **compile template trong `:attr`** trước tiên, đừng đi tìm trong `script.js` hay action engine.
+Not a runtime error — suspect **`:attr` template compilation** first, not `script.js` or the action engine.
 
-Cách khoanh vùng nhanh: tạm thay biểu thức nghi ngờ bằng một giá trị tĩnh đơn giản (`":option": "{}"` hoặc bỏ hẳn attr đó) rồi render lại. **Trang hiện lại ⇒ chính biểu thức đó là thủ phạm.** Lặp lại cho từng `:attr` khả nghi cho tới khi khoanh đúng một cái.
+Isolate: replace a suspect expression with a simple static value (`":option": "{}"` or remove the attr) and re-render. **Page comes back ⇒ that expression is the culprit.** Repeat per suspect `:attr` until one remains.
 
-Chạy `module_validate` trước khi render sẽ bắt được hầu hết các ca này ở dạng error, không cần mò.
+Running `fui module validate` before rendering catches most of these as errors.
 
 ---
 
-## 2. Hàm gọi trong `EXE` / `FUN` phải TỒN TẠI THẬT trong `script.js`
+## 2. Functions called in `EXE` / `FUN` must REALLY EXIST
 
-**Luật cứng.** `"EXE": "buildChart()"` và `"FUN": "buildChart"` chỉ chạy được nếu `buildChart` là một hàm **toàn cục có thật** lúc runtime — nghĩa là khai trong `{moduleDir}/script.js`, trong một file import `.js`, hoặc là hàm sẵn có của nền tảng ([default-function.md](default-function.md), [script-map.md](script-map.md)).
+**Hard rule.** `"EXE": "buildChart()"` and `"FUN": "buildChart"` work only if `buildChart` is a **real global function** at runtime — declared in `{moduleDir}/script.js`, in an imported `.js` file, or a platform built-in ([default-function.md](default-function.md), [script-map.md](script-map.md)).
 
-Đây là mặt kia của §1: §1 bảo *"logic phức tạp thì đẩy sang `script.js` rồi gọi qua `EXE`"* — và bước đẩy đó **rất hay bị quên nửa sau**. Module.json được sửa, `EXE` được viết, `module_publish_json` chạy xong; `script.js` thì không ai viết và `module_publish_script` không ai gọi.
+This is the flip side of §1: moving logic to `script.js` and calling via `EXE` **often loses its second half**. `module.json` is edited, `EXE` written, `fui module publish json` run — but nobody writes `script.js` or runs `fui module publish script`.
 
-### Vì sao không có gì báo cho bạn biết
+### Why nothing tells you
 
-Hai lệnh, hai kiểu hỏng, **cả hai đều không nói tên hàm ở chỗ dễ thấy**:
+Two commands, two failure modes, **neither shows the function name prominently**:
 
-| Lệnh | Cơ chế | Biểu hiện khi hàm thiếu |
-|---|---|---|
-| `EXE` | Chạy qua `templateCompiled(\`<% … %>\`)` — tức lodash `_.template`. Do lỗi toán tử phẩy ở `fastproject-3.0.js:490`, **object dữ liệu không bao giờ được truyền vào**, nên định danh trần trong chuỗi EXE phân giải thẳng vào **global** | `ReferenceError: buildChart is not defined` — chỉ lộ ra ở `module_simulate({renderUI:true})`, và ở đó nó chỉ là **"1 JS error"** trong một report dài |
-| `FUN` | `runFunction()` tra `window[obj.FUN]`, không thấy thì `console.log("Func:", …, "not found")` rồi **đi tiếp** | **Hỏng hoàn toàn im lặng.** Không error, không `[Vue warn]`, action vẫn "chạy xong" — chỉ là không làm gì cả |
+| Command | Mechanism                                                                                                                                                                                               | Symptom when missing                                                                                                                  |
+| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `EXE`   | Runs through `templateCompiled(\`<% … %>\`)`— lodash`_.template`. A comma-operator bug at `fastproject-3.0.js:490` means **the data object is never passed**, so bare identifiers resolve to **global** | `ReferenceError: buildChart is not defined` — shows only in `fui module simulate --render`, as just **"1 JS error"** in a long report |
+| `FUN`   | `runFunction()` looks up `window[obj.FUN]`; if absent, `console.log("Func:", …, "not found")` and **continues**                                                                                         | **Completely silent.** No error, no `[Vue warn]`, the action "finishes" and does nothing                                              |
 
-Giá thật đã đo trong log: một module tốn **36 lượt `renderUI` liên tiếp trong 5 ngày** vì đúng lớp lỗi này (`buildKPI8Columns is not defined`).
+Measured cost: one module burned **36 consecutive `--render` runs over 5 days** on this bug class (`buildKPI8Columns is not defined`).
 
-### Tầng bắt được: **`module_simulate({ renderUI: true })`** — và chỉ tầng đó
+### The only layer that catches it: **`fui module simulate --render`**
 
-`module_validate` **KHÔNG** kiểm việc này: nó không đọc `script.js`. (Đã từng có một luật tĩnh làm việc đó, đã gỡ — để không báo oan, luật phải biết trước **mọi** hàm toàn cục của nền tảng, và danh sách đó không bao giờ nuôi đủ; mỗi tên bỏ sót là một lần chặn publish một module chạy được.) `module_simulate` ở chế độ vm cũng không phải tầng bắt được — nó không nạp `script.js` vào sandbox nên báo ReferenceError cho **mọi** module dùng hàm `script.js`, kể cả module đúng.
+`fui module validate` does **NOT** check this: it does not read `script.js`. (A static rule once did, and was removed — to avoid false positives it had to know **every** platform global, a list never complete; each missing name blocked publishing a working module.) `fui module simulate` in vm mode doesn't catch it either — it doesn't load `script.js` into the sandbox, so it reports ReferenceError for **every** module using `script.js` functions, even correct ones.
 
-Nên đường kiểm chứng là **renderUI**: trình duyệt thật ném `ReferenceError: buildChart is not defined`, và từ nay **mọi JS error đều làm tool trả `isError`** (không riêng lỗi lúc init — lỗi phát sinh khi bấm nút cũng tính). Câu lỗi nằm trong khối `═══ CHẨN ĐOÁN ═══` ở **đầu** report, dòng `[MODULE]`.
+So verify with **`--render`**: the real browser throws `ReferenceError: buildChart is not defined`, and **every JS error now makes the result an error (`isError`)** — not only init errors; errors from button clicks count too. The message is in the `═══ CHẨN ĐOÁN ═══` block at the **top** of the report, line `[MODULE]`.
 
-⚠️ **Vế `FUN` thì renderUI cũng không bắt được** — `runFunction` không thấy hàm thì `console.log` rồi đi tiếp, không ném gì cả. Với `FUN` phải **tự soát tên hàm** đối chiếu `script.js`; triệu chứng duy nhất là "action chạy xong mà không có gì xảy ra".
+⚠️ **`--render` does not catch the `FUN` case** — `runFunction` just `console.log`s and continues, throwing nothing. For `FUN`, **check function names against `script.js` yourself**; the only symptom is "action finishes, nothing happens".
 
-### Cách sửa
+### Fix
 
-1. Viết hàm trong `script.js`: `function buildChart(){ … vueData.optThe = …; }`
-2. **`module_publish_script`** — bước hay bị quên nhất. `module_publish_json` **không** đẩy `script.js`.
-3. Gõ nhầm tên thì sửa tên, đừng thêm hàm rỗng cho hết lỗi.
+1. Write the function in `script.js`: `function buildChart(){ … vueData.optThe = …; }`
+2. **`fui module publish script`** — the most-forgotten step. `fui module publish json` does **not** push `script.js`.
+3. Typo → fix the name; never add an empty function to silence the error.
 
 ---
 
 ## 3. Advanced Logic & Scripting
 
-FUI's JSON-based logic has limitations. Use `script.js` for complex operations.
+JSON logic is limited; use `script.js` for complex operations.
+
+### Computed properties workaround
 
-### Computed Properties Workaround
-FUI `module.json` does not natively support computed properties. 
-**Solution:** Define calculation functions in `script.js` and call them directly in `module.json`.
+`module.json` has no native computed properties. Define calculation functions in `script.js` and call them from `module.json`.
 
 **script.js**:
+
 ```javascript
 function getTongTien() {
-    return vueData.items.reduce((sum, item) => sum + (item.amount || 0), 0);
+  return vueData.items.reduce((sum, item) => sum + (item.amount || 0), 0);
 }
 ```
 
 **module.json**:
+
 ```json
 {
   "innerHTML": "Total: {{getTongTien().toLocaleString()}} VNĐ"
 }
 ```
 
-### Complex Validation
-Avoid writing long logic strings in JSON. Move validation logic to `script.js`.
+### Complex validation
+
+Don't write long logic strings in JSON; move validation to `script.js`.
 
 **script.js**:
+
 ```javascript
 function validateStep1() {
-    const d = vueData;
-    if (!d.name || !d.email) {
-        alert("Missing required fields!");
-        return false;
-    }
-    return true;
+  const d = vueData;
+  if (!d.name || !d.email) {
+    alert("Missing required fields!");
+    return false;
+  }
+  return true;
 }
 
 function nextStep() {
-    if (vueData.step === 1 && !validateStep1()) return;
-    vueData.step++;
+  if (vueData.step === 1 && !validateStep1()) return;
+  vueData.step++;
 }
 ```
 
 **module.json**:
+
 ```json
 "v-on:click": "nextStep()"
 ```
 
-### Action Binding
-You can bind direct JS functions to events instead of using the `CALL` action protocol if needed for simple UI logic.
+### Action binding
+
+For simple UI logic you may bind JS functions to events directly instead of the `CALL` action protocol.
 
 ```json
 "v-on:click": "prevBuoc()"
 ```
-