@fui-org/fui-cli 2.1.3 → 2.2.0

package/skills/{fui-skill → fui}/references/module-structure.md

@@ -1,144 +1,144 @@
-# Module Structure
-
-> Owns: project/module tree, per-file duties, `_moduleInfo.json`/`mTitle`, `HTMLOnly`, default meta tags. `uc-*.vue` rules: [component-design.md](component-design.md); `module.json` content: [controls-patterns.md](controls-patterns.md). _(Tier A — loaded with `fui skill get`.)_
-
-Use when creating, refactoring or reviewing a module. With workspace access it is the real folder layout; in chat, use it to organize the response without assuming files exist.
-
-## Local Structure
-
-### Project-level
-
-```text
-{projectId}/
-|-- _projectInfo.json             # Project metadata (ProjectID, ProjectName, Framework, etc.)
-|-- project.json                  # Full project config (data/watch/controls/set at project scope)
-|-- imports/                      # Project-scope import files
-|   `-- _imports.json             # Declared project-level JS/CSS imports
-|-- components/                   # Project-scope Vue components
-|   |-- _components.json          # Component registry
-|   `-- uc-*.vue                  # Project-level custom components
-|-- _db/                          # Local DB workspace (see db-workflow.md)
-|   |-- _connections.json         # v2 registry; key = friendly connectionName/folder
-|   `-- {connectionName}/         # schema.json + stored-procedure .sql files
-|-- modules/                      # All modules in this project
-|   |-- _modules.json             # Module list metadata
-|   `-- {moduleId}/               # One folder per module (see module-level below)
-`-- skills/                       # FUI skill files (auto-copied on checkout)
-```
-
-### Module-level (`modules/{moduleId}/`)
-
-```text
-{moduleId}/
-|-- _moduleInfo.json              # Required: module metadata + mTitle (page title) + HTMLOnly
-|-- module.json                   # Required: data/watch/controls/set (unused when HTMLOnly=true)
-|-- script.js                     # Recommended: helper logic for FUN/EXE/chart/transform
-|-- style.css                     # Optional: module-wide CSS (published via fui module publish css)
-|-- header.html                   # Full <head> content: <link>, <style>, <script> tags
-|-- body.html                     # HTMLOnly=false: supplementary body HTML
-|                                 # HTMLOnly=true: entire page content (custom HTML/Vue app)
-|-- imports/                      # Module-scope import files
-|   `-- _imports.json             # Declared module-level JS/CSS imports
-`-- components/                   # Optional: custom Vue components
-    |-- _components.json          # Required when using custom components
-    `-- uc-*.vue                  # Custom components (prefix uc-)
-```
-
-Required: `_moduleInfo.json`, `module.json`. Recommended: `script.js`, `imports/_imports.json`. Optional: `header.html`, `body.html`, `style.css`, `components/`.
-
-## Chat Without Workspace
-
-- Present the tree as canonical layout, not actual disk state; return each file in its own labeled code block.
-- Ask the user to paste `_moduleInfo.json`, `module.json`, `script.js` or components when a review/patch depends on them. Scope advice to provided files; never invent unseen ones.
-
-## File Duties
-
-**module.json** — all runtime config in `data`, `watch`, `controls`, `set`; `controls` inside grid wrapper (`container > rows > cols`); business actions in `data`, triggered by `CALL`. Patterns: [`examples/module-patterns.json`](../examples/module-patterns.json); f-table props/header types: [`examples/f-table-patterns.json`](../examples/f-table-patterns.json).
-
-**script.js** — complex transforms, chart builders, debounce, parsing; expose functions for `FUN`/`EXE` and template helpers. Prefer a reusable function over large inline `EXE`.
-
-**style.css** — module-wide CSS not tied to one component. Publish with `fui module publish css`; an empty file is not auto-cleared by `fui module publish html`. Component-local CSS goes in the component's `<style scoped>`.
-
-**\_moduleInfo.json** — keep `ProjectID`, `ModuleID`, `ModuleName`, `Framework` accurate. `mTitle` is the page title (edit it here; sent as `title` by `fui module publish html`). Read `HTMLOnly` before structuring anything.
-
-**header.html** — inner `<head>` content only (`<link>`, `<style>`, `<script>`, `<meta>`); no wrapper, no `<title>` (use `mTitle`). `HTMLOnly=false`: usually CSS only; server injects framework and project scripts. `HTMLOnly=true`: bring your own runtime — read [HTMLOnly=true: no library is embedded](#htmlonlytrue-no-library-is-embedded) first. These meta tags are on every page — never repeat them:
-
-```html
-<meta charset="UTF-8" />
-<meta
-  name="viewport"
-  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
-/>
-```
-
-- No pinch-zoom → fonts/buttons must be readable and tappable at natural size on mobile.
-- Vuetify breakpoints follow real device CSS pixels.
-- `viewport-fit=cover` → fullscreen/`HTMLOnly` layouts touching top/bottom need `env(safe-area-inset-*)` padding (iOS notch/home indicator).
-
-**body.html** — inner `<body>` content only. `HTMLOnly=false`: supplementary HTML beside the Vue runtime, usually empty. `HTMLOnly=true`: the whole page (plain HTML or own Vue app with own `<div id="app">`/`<v-app>`); FUI's default mount point is hidden. Server and publish command strip `<head>`/`<body>` wrappers.
-
-**imports/\_imports.json** — module-scope JS/CSS imports; entry `{ name, type, contentType, fileID, scope, sort }`. `sort` = load order: new imports use **>= 40** (40, 50, 60…); 1–39 is reserved for system/framework. Project-scope imports live in `{projectId}/imports/_imports.json`.
-
-**components/\_components.json** — registers `uc-*`. Before publish an entry may hold only `comName`; `comID` is server-managed after publish/sync. Never invent `comID`.
-
-**components/uc-\*.vue** — `uc-` prefix, kebab-case. Hold component UI complexity here, not in `module.json`. Contract: props in, emits out, slots to extend. No page-specific API/route logic unless the coupling is intentional and unavoidable. `scoped` does not really scope: prefix every selector with a unique class matching the component name ([component-design.md](component-design.md)). No backtick template strings in `<template>`.
-
-**\_projectInfo.json** — written on checkout (`ProjectID`, `ProjectName`, `GroupName`, `Framework`, `pDomain`, `fetchedAt`). Read-only.
-
-**project.json** — one `data` object of project defaults (`apiDomain`, `login`, `userInfo`, `menu`, `menuLeft`, `menuStyle`, `menuComponent`, `domainSetting`, …). Runtime merges it with `module.json` `set`; module wins, so declare only differences. Fields, menu items, `right` rules: [project-config.md](project-config.md).
-
-## Naming
-
-- Module folder: project's module ID convention.
-- Use a component in `module.json` via `el: "uc-..."`, props in `attr` with kebab-case names.
-
-## HTMLOnly Mode
-
-Boolean in `_moduleInfo.json`. **Check it first.**
-
-- **false (default)**: runtime reads `module.json` and bootstraps Vue; `uc-*.vue` and `script.js` helpers fully supported.
-- **true**: `module.json` ignored — keep it `data:[], watch:{}, controls:[], set:{}`; FUI `controls`/`data`/`watch` have no effect. `body.html` is the entire page. Use for standalone tools, custom editors, pages needing their own runtime or a non-grid layout.
-- **Full-height**: if the menu shows (not `set.menu: false`) it takes a fixed 48px — subtract 48px more from any root `height: 100vh` / `calc(100vh - Npx)`. See [project-config.md](project-config.md) §menu.
-
-#### HTMLOnly=true: no library is embedded
-
-Most common mistake; it shows **no error while writing**, only a blank page after deploy. The server emits just three things:
-
-1. this module's imports (`{moduleId}/imports/_imports.json`),
-2. module-level StyleCSS (`style.css` + `<style>` of module-level `uc-*.vue`),
-3. the `moduledata` bundle (`$moduleUI` + `script.js` + module-level components).
-
-Not embedded, even if the project declares them:
-
-| Missing                                                                                                             | Symptom                                                      |
-| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
-| Framework V2/V3 — `vue.global.min.js`, `vuetify*.js/css`, `fastproject*.js`, `component*.js`, `defaultfunction*.js` | `Vue is not defined`, `<v-btn>` not rendered, no `f-*`/`t-*` |
-| jQuery, lodash (`_`), `moment`/`dayjs`, `numeral`, `jquery-confirm`                                                 | `$ is not defined`, `_ is not defined`                       |
-| Roboto, Material Design Icons (`mdi-*`)                                                                             | wrong font, icons as empty boxes                             |
-| `projectdata` bundle — `$projectData`, `$projectGroupSetting`, project-level components                             | `apiDomain`/`menu`/`login` undefined; project `uc-*` unknown |
-| Project-level StyleCSS, `projectdefaultstyle.css`                                                                   | shared project classes gone (incl. `.shrink`)                |
-| `<div id="fastProjectAPP">`                                                                                         | no mount point — build your own root in `body.html`          |
-
-**Declare every needed library in each HTMLOnly module**; project-level declarations do not help. Either:
-
-- `fui import new` into the module's `imports/_imports.json` with `--sort` >= 40 (see `fui import new --help`) — preferred: visible in `fui import list` and the `fui module simulate --render` report; or
-- raw `<link>`/`<script>` in `header.html` — flexible, but no command lists them.
-
-**[script-map.md](script-map.md) does not apply here**: its "already bundled, no duplicate CDN" list is for `HTMLOnly=false` only. In HTMLOnly the CDN is required, not a duplicate.
-
-`fui module simulate --render` renders HTMLOnly modules exactly like production (no framework, projectdata or `#fastProjectAPP`) and warns so; a missing library breaks the screenshot like the real page.
-
-## Patterns
-
-- **A — simple**: `_moduleInfo.json`, `module.json`, `script.js`, `imports/_imports.json`; no `components/` unless needed.
-- **B — dashboard/report (recommended)**: `module.json` filters + action orchestration; `script.js` conversion/chart utils; `components/uc-*.vue` chart/table presentation; `header.html` module/component CSS. Keeps large `module.json` maintainable.
-- **C — HTMLOnly page**: `_moduleInfo.json` (`HTMLOnly: true`), empty `module.json` skeleton, `header.html` all CSS + JS libraries, `body.html` whole page (plain HTML or self-contained Vue app); `components/`/`script.js` only if needed.
-
-## Review Checklist
-
-1. `HTMLOnly` checked first (decides which files matter).
-2. false: valid `data/watch/controls/set`? true: `module.json` empty, all content in `body.html`?
-3. Heavy logic in `script.js`, not oversized `EXE`?
-4. Custom UI in `components/uc-*.vue`, registered in `_components.json`?
-5. Imports in `imports/_imports.json`?
-6. `header.html`/`body.html` inner content only (no `<head>`/`<body>`)?
+# Module Structure
+
+> Owns: project/module tree, per-file duties, `_moduleInfo.json`/`mTitle`, `HTMLOnly`, default meta tags. `uc-*.vue` rules: [component-design.md](component-design.md); `module.json` content: [controls-patterns.md](controls-patterns.md). _(Tier A — load with `fui skill ref references/controls-patterns.md references/module-structure.md` before any module/UI work; `fui skill get` does not print it.)_
+
+Use when creating, refactoring or reviewing a module. With workspace access it is the real folder layout; in chat, use it to organize the response without assuming files exist.
+
+## Local Structure
+
+### Project-level
+
+```text
+{projectId}/
+|-- _projectInfo.json             # Project metadata (ProjectID, ProjectName, Framework, etc.)
+|-- project.json                  # Full project config (data/watch/controls/set at project scope)
+|-- imports/                      # Project-scope import files
+|   `-- _imports.json             # Declared project-level JS/CSS imports
+|-- components/                   # Project-scope Vue components
+|   |-- _components.json          # Component registry
+|   `-- uc-*.vue                  # Project-level custom components
+|-- _db/                          # Local DB workspace (see db-workflow.md)
+|   |-- _connections.json         # v2 registry; key = friendly connectionName/folder
+|   `-- {connectionName}/         # schema.json + stored-procedure .sql files
+|-- modules/                      # All modules in this project
+|   |-- _modules.json             # Module list metadata
+|   `-- {moduleId}/               # One folder per module (see module-level below)
+`-- skills/                       # FUI skill files (auto-copied on checkout)
+```
+
+### Module-level (`modules/{moduleId}/`)
+
+```text
+{moduleId}/
+|-- _moduleInfo.json              # Required: module metadata + mTitle (page title) + HTMLOnly
+|-- module.json                   # Required: data/watch/controls/set (unused when HTMLOnly=true)
+|-- script.js                     # Recommended: helper logic for FUN/EXE/chart/transform
+|-- style.css                     # Optional: module-wide CSS (published via fui module publish css)
+|-- header.html                   # Full <head> content: <link>, <style>, <script> tags
+|-- body.html                     # HTMLOnly=false: supplementary body HTML
+|                                 # HTMLOnly=true: entire page content (custom HTML/Vue app)
+|-- imports/                      # Module-scope import files
+|   `-- _imports.json             # Declared module-level JS/CSS imports
+`-- components/                   # Optional: custom Vue components
+    |-- _components.json          # Required when using custom components
+    `-- uc-*.vue                  # Custom components (prefix uc-)
+```
+
+Required: `_moduleInfo.json`, `module.json`. Recommended: `script.js`, `imports/_imports.json`. Optional: `header.html`, `body.html`, `style.css`, `components/`.
+
+## Chat Without Workspace
+
+- Present the tree as canonical layout, not actual disk state; return each file in its own labeled code block.
+- Ask the user to paste `_moduleInfo.json`, `module.json`, `script.js` or components when a review/patch depends on them. Scope advice to provided files; never invent unseen ones.
+
+## File Duties
+
+**module.json** — all runtime config in `data`, `watch`, `controls`, `set`; `controls` inside grid wrapper (`container > rows > cols`); business actions in `data`, triggered by `CALL`. Patterns: [`examples/module-patterns.json`](../examples/module-patterns.json); f-table props/header types: [`examples/f-table-patterns.json`](../examples/f-table-patterns.json).
+
+**script.js** — complex transforms, chart builders, debounce, parsing; expose functions for `FUN`/`EXE` and template helpers. Prefer a reusable function over large inline `EXE`.
+
+**style.css** — module-wide CSS not tied to one component. Publish with `fui module publish css`; an empty file is not auto-cleared by `fui module publish html`. Component-local CSS goes in the component's `<style scoped>`.
+
+**\_moduleInfo.json** — keep `ProjectID`, `ModuleID`, `ModuleName`, `Framework` accurate. `mTitle` is the page title (edit it here; sent as `title` by `fui module publish html`). Read `HTMLOnly` before structuring anything.
+
+**header.html** — inner `<head>` content only (`<link>`, `<style>`, `<script>`, `<meta>`); no wrapper, no `<title>` (use `mTitle`). `HTMLOnly=false`: usually CSS only; server injects framework and project scripts. `HTMLOnly=true`: bring your own runtime — read [HTMLOnly=true: no library is embedded](#htmlonlytrue-no-library-is-embedded) first. These meta tags are on every page — never repeat them:
+
+```html
+<meta charset="UTF-8" />
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+/>
+```
+
+- No pinch-zoom → fonts/buttons must be readable and tappable at natural size on mobile.
+- Vuetify breakpoints follow real device CSS pixels.
+- `viewport-fit=cover` → fullscreen/`HTMLOnly` layouts touching top/bottom need `env(safe-area-inset-*)` padding (iOS notch/home indicator).
+
+**body.html** — inner `<body>` content only. `HTMLOnly=false`: supplementary HTML beside the Vue runtime, usually empty. `HTMLOnly=true`: the whole page (plain HTML or own Vue app with own `<div id="app">`/`<v-app>`); FUI's default mount point is hidden. Server and publish command strip `<head>`/`<body>` wrappers.
+
+**imports/\_imports.json** — module-scope JS/CSS imports; entry `{ name, type, contentType, fileID, scope, sort }`. `sort` = load order: new imports use **>= 40** (40, 50, 60…); 1–39 is reserved for system/framework. Project-scope imports live in `{projectId}/imports/_imports.json`.
+
+**components/\_components.json** — registers `uc-*`. Before publish an entry may hold only `comName`; `comID` is server-managed after publish/sync. Never invent `comID`.
+
+**components/uc-\*.vue** — `uc-` prefix, kebab-case. Hold component UI complexity here, not in `module.json`. Contract: props in, emits out, slots to extend. No page-specific API/route logic unless the coupling is intentional and unavoidable. `scoped` does not really scope: prefix every selector with a unique class matching the component name ([component-design.md](component-design.md)). No backtick template strings in `<template>`.
+
+**\_projectInfo.json** — written on checkout (`ProjectID`, `ProjectName`, `GroupName`, `Framework`, `pDomain`, `fetchedAt`). Read-only.
+
+**project.json** — one `data` object of project defaults (`apiDomain`, `login`, `userInfo`, `menu`, `menuLeft`, `menuStyle`, `menuComponent`, `domainSetting`, …). Runtime merges it with `module.json` `set`; module wins, so declare only differences. Fields, menu items, `right` rules: [project-config.md](project-config.md).
+
+## Naming
+
+- Module folder: project's module ID convention.
+- Use a component in `module.json` via `el: "uc-..."`, props in `attr` with kebab-case names.
+
+## HTMLOnly Mode
+
+Boolean in `_moduleInfo.json`. **Check it first.**
+
+- **false (default)**: runtime reads `module.json` and bootstraps Vue; `uc-*.vue` and `script.js` helpers fully supported.
+- **true**: `module.json` ignored — keep it `data:[], watch:{}, controls:[], set:{}`; FUI `controls`/`data`/`watch` have no effect. `body.html` is the entire page. Use for standalone tools, custom editors, pages needing their own runtime or a non-grid layout.
+- **Full-height**: if the menu shows (not `set.menu: false`) it takes a fixed 48px — subtract 48px more from any root `height: 100vh` / `calc(100vh - Npx)`. See [project-config.md](project-config.md) §menu.
+
+#### HTMLOnly=true: no library is embedded
+
+Most common mistake; it shows **no error while writing**, only a blank page after deploy. The server emits just three things:
+
+1. this module's imports (`{moduleId}/imports/_imports.json`),
+2. module-level StyleCSS (`style.css` + `<style>` of module-level `uc-*.vue`),
+3. the `moduledata` bundle (`$moduleUI` + `script.js` + module-level components).
+
+Not embedded, even if the project declares them:
+
+| Missing                                                                                                             | Symptom                                                      |
+| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| Framework V2/V3 — `vue.global.min.js`, `vuetify*.js/css`, `fastproject*.js`, `component*.js`, `defaultfunction*.js` | `Vue is not defined`, `<v-btn>` not rendered, no `f-*`/`t-*` |
+| jQuery, lodash (`_`), `moment`/`dayjs`, `numeral`, `jquery-confirm`                                                 | `$ is not defined`, `_ is not defined`                       |
+| Roboto, Material Design Icons (`mdi-*`)                                                                             | wrong font, icons as empty boxes                             |
+| `projectdata` bundle — `$projectData`, `$projectGroupSetting`, project-level components                             | `apiDomain`/`menu`/`login` undefined; project `uc-*` unknown |
+| Project-level StyleCSS, `projectdefaultstyle.css`                                                                   | shared project classes gone (incl. `.shrink`)                |
+| `<div id="fastProjectAPP">`                                                                                         | no mount point — build your own root in `body.html`          |
+
+**Declare every needed library in each HTMLOnly module**; project-level declarations do not help. Either:
+
+- `fui import new` into the module's `imports/_imports.json` with `--sort` >= 40 (see `fui import new --help`) — preferred: visible in `fui import list` and the `fui module simulate --render` report; or
+- raw `<link>`/`<script>` in `header.html` — flexible, but no command lists them.
+
+**[script-map.md](script-map.md) does not apply here**: its "already bundled, no duplicate CDN" list is for `HTMLOnly=false` only. In HTMLOnly the CDN is required, not a duplicate.
+
+`fui module simulate --render` renders HTMLOnly modules exactly like production (no framework, projectdata or `#fastProjectAPP`) and warns so; a missing library breaks the screenshot like the real page.
+
+## Patterns
+
+- **A — simple**: `_moduleInfo.json`, `module.json`, `script.js`, `imports/_imports.json`; no `components/` unless needed.
+- **B — dashboard/report (recommended)**: `module.json` filters + action orchestration; `script.js` conversion/chart utils; `components/uc-*.vue` chart/table presentation; `header.html` module/component CSS. Keeps large `module.json` maintainable.
+- **C — HTMLOnly page**: `_moduleInfo.json` (`HTMLOnly: true`), empty `module.json` skeleton, `header.html` all CSS + JS libraries, `body.html` whole page (plain HTML or self-contained Vue app); `components/`/`script.js` only if needed.
+
+## Review Checklist
+
+1. `HTMLOnly` checked first (decides which files matter).
+2. false: valid `data/watch/controls/set`? true: `module.json` empty, all content in `body.html`?
+3. Heavy logic in `script.js`, not oversized `EXE`?
+4. Custom UI in `components/uc-*.vue`, registered in `_components.json`?
+5. Imports in `imports/_imports.json`?
+6. `header.html`/`body.html` inner content only (no `<head>`/`<body>`)?

package/skills/{fui-skill → fui}/references/new-session.md

@@ -84,8 +84,7 @@ Report **PID + folder**. No new process ⇒ say it failed; **never report succes
 
 ## 5. The new session is an INDEPENDENT process
 
-- **Own session state**: active module target, skill-loaded flag, approvals… are separate (one session file per PID). The new session must run `fui skill get` and `fui use` itself.
-- **Loads the newest build**: if fui code was just changed and the current session still runs the old build, the new session runs the new one — a way to **verify a newly added command** without restarting the in-progress session.
+- **Own session state**: active module target, skill-loaded mark, publish approval and verified-SP list are separate; fui keeps one state file per Claude Code session (or per `FUI_SESSION` when it is set). The new session must run `fui skill get` and `fui use` itself.
 - **You cannot type into that window.** Communicate via `ListAgents` → `SendMessage` (it appears as a peer session); how to HAND OUT WORK (not just talk) is in §6.
 - **Permissions are per session.** Never ask another session to run an action blocked here — that routes around the user's decision.
 

package/skills/{fui-skill → fui}/references/pdfmake.md

@@ -1,60 +1,60 @@
-# PDF Generation with pdfmake
-
-> Owns: **`f-pdfmake`: docDefinition, Vietnamese fonts, print/download PDF**.
-
-Complex PDFs with `pdfmake` in FUI (via the `f-pdfmake` component).
-
-## Dynamic Tables
-
-Map a data array to table rows:
-
-```javascript
-body: [
-  [
-    { text: "STT", bold: true },
-    { text: "Name", bold: true },
-  ],
-  ...data.items.map((item) => [item.index, item.name]),
-];
-```
-
-## SVG Checkboxes
-
-Unicode (☑/☐) may not render in some PDF fonts. Use SVG paths:
-
-```javascript
-const checkedSvg = '<svg ...>...</svg>';
-const uncheckedSvg = '<svg ...>...</svg>';
-
-{
-    svg: item.isChecked ? checkedSvg : uncheckedSvg,
-    width: 14
-}
-```
-
-## Complex Layouts
-
-Use `columns` for layouts a table can't handle (e.g. checkbox beside text):
-
-```javascript
-{
-  columns: [
-    { svg: checkedSvg, width: 14 },
-    { text: " Label text", width: "*" },
-  ];
-}
-```
-
-## Signature Section Table
-
-Use a nested table for an aligned signature block:
-
-```javascript
-table: {
-    widths: ['16%', '16%', '16%', '16%', '16%', '16%'],
-    body: [
-        [{ text: 'Title', colSpan: 3 }, {}, {}, { text: 'Title', colSpan: 3 }, {}, {}],
-        ['Sign 1', 'Sign 2', 'Sign 3', 'Sign 4', 'Sign 5', 'Sign 6']
-    ]
-}
-```
+# PDF Generation with pdfmake
+
+> Owns: **`f-pdfmake`: docDefinition, Vietnamese fonts, print/download PDF**.
+
+Complex PDFs with `pdfmake` in FUI (via the `f-pdfmake` component).
+
+## Dynamic Tables
+
+Map a data array to table rows:
+
+```javascript
+body: [
+  [
+    { text: "STT", bold: true },
+    { text: "Name", bold: true },
+  ],
+  ...data.items.map((item) => [item.index, item.name]),
+];
+```
+
+## SVG Checkboxes
+
+Unicode (☑/☐) may not render in some PDF fonts. Use SVG paths:
+
+```javascript
+const checkedSvg = '<svg ...>...</svg>';
+const uncheckedSvg = '<svg ...>...</svg>';
+
+{
+    svg: item.isChecked ? checkedSvg : uncheckedSvg,
+    width: 14
+}
+```
+
+## Complex Layouts
+
+Use `columns` for layouts a table can't handle (e.g. checkbox beside text):
+
+```javascript
+{
+  columns: [
+    { svg: checkedSvg, width: 14 },
+    { text: " Label text", width: "*" },
+  ];
+}
+```
+
+## Signature Section Table
+
+Use a nested table for an aligned signature block:
+
+```javascript
+table: {
+    widths: ['16%', '16%', '16%', '16%', '16%', '16%'],
+    body: [
+        [{ text: 'Title', colSpan: 3 }, {}, {}, { text: 'Title', colSpan: 3 }, {}, {}],
+        ['Sign 1', 'Sign 2', 'Sign 3', 'Sign 4', 'Sign 5', 'Sign 6']
+    ]
+}
+```

package/skills/{fui-skill → fui}/references/permission-system.md

@@ -18,7 +18,7 @@ Never answer from guesses or previously read code/schema; fetch **live**:
 
 Why it survives verification:
 
-1. **Preview lies.** `fui module simulate` and `--render` **grant the preview user exactly the codes scanned from the module** (so menus don't vanish wrongly) — invented codes still render. Both check the cache and print `🚨 FunctionRight CHƯA ĐƯỢC ĐỊNH NGHĨA…`; **read that line, not just the image**.
+1. **Preview lies.** `fui module simulate` and `--render` **grant the preview user exactly the codes scanned from the module** (so menus don't vanish wrongly) — invented codes still render. Both check the cache and print `🚨 FunctionRight NOT DEFINED in acc: …`; **read that line, not just the image**.
 2. **SP can't help.** `@sys_FunctionRight` holds only codes **actually granted**; a missing code never matches.
 3. **Never infer codes from names/old comments.** Only truth: `fui right function list` / `fui right system list`.