@fui-org/fui-cli 2.1.4 → 2.2.0

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

@@ -1,6 +1,6 @@
 # Controls Patterns & Logic
 
-> Owns: value resolution (backtick / `{{ }}` / JS eval), action engine (API/IN/OUT/CALLBACK/CONFIRM/MESS/CALL/IF/EXE), key notation, grid wrapper `container > rows > cols`, control object, layout rules. Classes/styles: [controls-styling-vocabulary.md](controls-styling-vocabulary.md); module.json overview: [module-json-anatomy.md](module-json-anatomy.md). _(Tier A — loaded with `fui skill get`.)_
+> Owns: value resolution (backtick / `{{ }}` / JS eval), action engine (API/IN/OUT/CALLBACK/CONFIRM/MESS/CALL/IF/EXE), key notation, grid wrapper `container > rows > cols`, control object, layout rules. Classes/styles: [controls-styling-vocabulary.md](controls-styling-vocabulary.md); module.json overview: [module-json-anatomy.md](module-json-anatomy.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.)_
 
 ---
 
@@ -65,7 +65,7 @@ Defaults auto-injected (`defaultControlAttr` in `scripts/component.js`) — decl
 
 `"val1"` = value of `val1`, not the string; literal needs ``"`val1"``.
 
-> ⚠️ **Not for `:attr`.** Bindings (`:option`, `:config`, any `v-bind:`) go straight to Vue's compiler: one pure expression; no `function(){}`/`var`/`return`/`;`. Violation ⇒ blank page, 0 JS error, 0 `[Vue warn]`. Rules + moving logic to `script.js` + `EXE`: [advanced-techniques.md](advanced-techniques.md) §1.
+> ⚠️ **Not for `:attr`.** Bindings (`:option`, `:config`, any `v-bind:`) go straight to Vue's compiler as `return (<value>)`: one expression. A `;` (even at the end) or a leading `var`/`return` ⇒ blank page; a function inside the expression is fine. Rules + moving logic to `script.js` + `EXE`: [advanced-techniques.md](advanced-techniques.md) §1.
 
 `{{ }}` takes any JS expression:
 

package/skills/{fui-skill → fui}/references/controls-styling-vocabulary.md

@@ -1,173 +1,173 @@
-# Controls Styling — Approved Layout Vocabulary (use only this)
-
-> Owns: **approved class/prop/style set for `controls` and `.vue`, and presentation priority order**. Aesthetic mode + `border-radius` limits: [design-modes.md](design-modes.md).
-
-**Rule #1: do NOT add `style` or `class` to "beautify" UI.** Use only the vocabulary below (extracted from 78 real `module.json` files across 5 projects: contest-score, security-manager, fp, lhu-test, lhu-lib). If the user didn't ask for a specific effect/spacing/color → **add nothing**. FUI layout (grid + Vuetify + project theme) is already consistent.
-
-> Stats: of 1,284 control objects only ~12% use `attr.style` (almost only for `width`), and **zero custom classes** — 100% standard Vuetify utilities. Common AI mistake: adding `style="padding/margin/border/box-shadow/border-radius/background"` and invented classes → **don't.**
-
----
-
-## Principles
-
-1. **Default: no style, no class.** Set only `el`, `attr` (v-model/label/:items/:action…), `w`, and `col` when splitting columns.
-2. Spacing/alignment → **Vuetify utility classes** from the tables below, NOT `style`.
-3. `style` only for **fixed `width`** of a filter field (`style: "width:200px"`) — never padding/margin/border/color/background.
-4. Color: component prop (`color="primary"`) or class `primary--text`/`error--text` — no `style="color:#..."`.
-5. **Never** add `border`, `border-radius`, `box-shadow`, `background`, `padding`, custom classes unless the user explicitly asks.
-6. **Compact padding — default `pa-2`** (or `pa-1`/`pa-0`). **NO large padding** (`pa-4`, `pa-6`, `pa-8`...) — wastes screen space. Margin likewise: prefer `-1`/`-2`, avoid `-6`/`-8`.
-7. **When the user _does_ ask for specific presentation — follow this priority**, moving down only when the previous level can't do it:
-   `component prop` (`color`, `outlined`, `dense`, `elevation`) → `Vuetify utility class` (`pa-*`, `ma-*`, `d-flex`, `text-*`, `primary--text`) → `mw-*` for width → custom class → inline `style` (**last**).
-
----
-
-## 1. Container / row `prop` (grid wrapper)
-
-Outer container and each row use only these tokens (by real frequency):
-
-| Token                                            | Purpose                                                               | Frequency |
-| ------------------------------------------------ | --------------------------------------------------------------------- | --------- |
-| `grid-list-md`                                   | Standard column gap (container)                                       | very high |
-| `fluid`                                          | Full-width container                                                  | high      |
-| `row`                                            | Marks a row                                                           | very high |
-| `align-center`                                   | **Vertically center** controls in a row, esp. different types/heights | high      |
-| `justify-center`                                 | Horizontal centering                                                  | very high |
-| `justify-left` / `justify-end` / `justify-start` | Left / right align                                                    | medium    |
-| `text-center` / `text-left`                      | Text align                                                            | medium    |
-| `mw-800` `mw-1000` `mw-1200` `mw-1400`           | **Limit content width** (FUI class) — centered form/data-entry pages  | medium    |
-| `hidden-container`                               | Wraps dialogs (v-dialog/f-dialog) — takes no layout space             | dialogs   |
-| `grid-list-lg`                                   | Wider gap than grid-list-md                                           | low       |
-| `pa-0` / `py-0`                                  | Remove container padding to touch edges                               | low       |
-| `page-container` / `page-navigation`             | Sticky filter-bar layout (see ui-layout-patterns.md)                  | rare      |
-
-> **Default formula**: container `"fluid grid-list-md"`, each row `"row"`. Rows mixing control types/heights: `"row wrap align-center"` for a shared vertical axis; `justify-center` is horizontal only. Form pages: add `mw-1000`/`mw-1200`.
-
-## 2. `col` (grid column wrapping a control)
-
-`col` only for width splitting or aligning/shrinking the column:
-
-| Token                                     | Purpose                                                                                                                                                   |
-| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `shrink`                                  | **Fixed-width filter field** (doesn't grow) — most common. **Required whenever `w` is px**; write `"class": "shrink"`, NOT `"shrink": true` (inert on V3) |
-| `text-end` / `text-start` / `text-center` | Align content in column                                                                                                                                   |
-| `pa-0`                                    | Remove column padding                                                                                                                                     |
-| `align-self-center`                       | Vertical centering                                                                                                                                        |
-
-Short string `"text-end"` or object `{ "class": "shrink" }`. Add `"v-if": "..."` to `col` to show/hide the whole column by right/condition.
-
-> Prefer `align-center` on the row to align the whole row. Use `align-self-center` on `col` only when a single control needs fixing. Never compensate vertical offset with margin or inline style.
-
-## 3. `attr.class` (on the control itself)
-
-Vuetify utility classes only:
-
-| Group                 | Tokens                                                                                                                                                                        |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Margin                | `mt-1 mt-2 mt-3` · `mb-1 mb-2 mb-4` · `my-2` · `ml-1 ml-2` · `mr-1 mr-2`                                                                                                      |
-| Padding               | `pa-0 pa-2` · `pt-3` · `py-1` — **avoid `pa-4/6/8`**                                                                                                                          |
-| Flex                  | `d-flex` · `flex-column` · `align-center` · `justify-center` · `justify-end` · `flex-grow-0` · `flex-wrap` · `flex-md-grow-0`                                                 |
-| Text                  | `text-center` · `text-left` · `text-right`                                                                                                                                    |
-| Size / weight         | `text-h6` · `subtitle-1` · `body-2` · `caption` · `font-weight-bold` · `font-weight-medium`                                                                                   |
-| Text color (V2)       | `primary--text` · `error--text` · `grey--text` · `white--text` — **FUI V2 (Vuetify 1.5) only** (`--text` suffix)                                                              |
-| Text color (V3)       | `text-primary` · `text-error` · `text-grey` · `text-white` — **Vuetify 3** `text-{color}`. Wrong version = no effect, no error                                                |
-| Background            | prop `color="primary"`, or Vuetify bg classes `primary` · `grey lighten-4`                                                                                                    |
-| Rounding              | `rounded` · `rounded-lg` · `rounded-0`                                                                                                                                        |
-| Shadow / flat         | prop `elevation="0"` / `flat` / `outlined` on `v-card`/`v-btn`                                                                                                                |
-| Breakpoint visibility | `d-none d-md-flex`...                                                                                                                                                         |
-| Size                  | component props (`max-width`, `width`, `dense`, `small`, `x-large`) — no `style="width:..."` unless fixed px needed. Icons: keep default size, **don't add `small`/`:small`** |
-| Scrollbar             | `fpScrollbar` — **the only class** for any area with its own scrollbar; see §Scrollbar right below                                                                            |
-
-### Scrollbar — always the built-in `fpScrollbar`
-
-`fpScrollbar` is predefined in the platform's `projectdefaultstyle.css` (V2 and V3): a thin bar, **hidden until hover**, fading in ~300ms on hover and out ~600ms on leave (thumb `rgba(0,0,0,.25)`, transparent track), working in Firefox and Chrome/Edge/Safari. The class sets `overflow-y: auto` itself. The width is the browser's `thin` (~10px on Chrome ≥121, which ignores `::-webkit-scrollbar` once `scrollbar-color` is set), not the 5px the webkit rule says. The left menu of `HeaderBar` (`.v-navigation-drawer__content`) **already has** this rule; add nothing there.
-
-**Default — the element that REALLY scrolls gets `fpScrollbar`**, without the user asking: a list box with `max-height`, a side panel, the content area of a card/dialog, a long tag/chip list...
-
-**Exactly ONE layer — never nest `fpScrollbar`.** Hovering the innermost area also `:hover`s every outer layer and runs their effect too ⇒ the bar shows late and drops frames (measured on a real project: 2 nested layers slowed show/hide from ~300/600ms to ~850/2000ms). Before adding it, ask:
-
-- Does this element **have a height limit and content that exceeds it**? If not, don't add it; a panel/splitter that only divides the layout (height follows content) is not a scroll area.
-- Does an ancestor already scroll (another `fpScrollbar`, **or `.v-navigation-drawer__content`**)? Then pick one layer: usually recompute the inner layer's height to fit (subtracting the tab bar/toolbar above) so the outer layer no longer overflows, and drop scrolling on the outer layer. An outer layer overflowing by a few dozen px means the inner height is miscalculated, not a reason to keep two scroll layers.
-
-```json
-{ "el": "div", "attr": { "class": "fpScrollbar", "style": "max-height: 400px" }, "innerHTML": [ ... ] }
-{ "el": "v-list", "attr": { "class": "fpScrollbar", "max-height": "300" }, "innerHTML": [ ... ] }
-```
-
-- The class only styles **the scrollbar**; the element still needs a height limit (`max-height`/`height`, preferably a component prop like `max-height` of `v-list`/`v-card`) to have anything to scroll. No need to add `overflow-y: auto`.
-- Same in `.vue`: `class="fpScrollbar"` on the scrolling element.
-
-**User asks to "redo / prettify / restyle the scrollbar"** → still `fpScrollbar`; **NEVER** hand-write `::-webkit-scrollbar`, `scrollbar-width`, `scrollbar-color`. Each module drawing its own style breaks consistency, and hand-made rules easily break the shared class's show/hide effect. Only when the user explicitly asks for **another color** (e.g. a scrollbar on a dark background) override it, and only the **color variable**, in `header.html`:
-
-```css
-/* dark background: translucent white thumb, keeps fpScrollbar's show/hide effect */
-.my-dark-panel.fpScrollbar:hover {
-  --fp-scrollbar: rgba(255, 255, 255, 0.3);
-}
-```
-
-The override does **not** touch `transition`. In particular, never add `scrollbar-color` to the transition: the color already goes through the `--fp-scrollbar` variable (which is transitioning), and transitioning `scrollbar-color` too restarts it every frame ⇒ the color changes in steps, 2-3 times slower.
-
-Do not use `fpScrollbar` for:
-
-- **`f-table`/`f-sheet`**: the table scrolls internally by `:height` (see [ui-table-cell-patterns.md](ui-table-cell-patterns.md)); putting it on an outer wrapper only adds a nested scrollbar.
-- **`HTMLOnly: true` modules**: they do not load `projectdefaultstyle.css`, so the class does not exist (see [module-structure.md](module-structure.md) §HTMLOnly=true). There, writing scrollbar CSS in the module is fine.
-
-### Icon size
-
-- Icons use the component/theme default size.
-- **Don't set `small` or `:small`** on `v-icon`, icon buttons, or buttons with icons just to look "compact".
-- Shrink only when the user explicitly asks or a specialised component/pattern prescribes it; then set the prop on exactly that component — don't shrink the whole button unintentionally.
-
-**Before adding a class → check the table above.** Define a custom class only for what Vuetify lacks: complex grid-template, animation, pseudo-element (`::before`), specific child selectors. Put it in `header.html`, clearly prefixed, **minimal count** — don't recreate card/badge/spacing Vuetify already has.
-
-> `flex-md-grow-0` + `col: { class: "shrink" }` + `style: "width:200px"` = **fixed-width filter field** — standard toolbar pattern ([ui-patterns.md](ui-patterns.md) §4). The only valid place for `style` (width only).
-
----
-
-## 4. Width: `w` (NOT style/class)
-
-| `w`                  | Meaning                                                                                |
-| -------------------- | -------------------------------------------------------------------------------------- |
-| `1`–`12`             | Grid columns (12 = full row)                                                           |
-| `>= 25` (e.g. `250`) | Fixed px width — **requires `col: { "class": "shrink" }`**, otherwise px has no effect |
-| `13`–`24`            | **Don't use** — dead zone: V2 yields px, V3 yields a non-existent class                |
-| `""` (empty)         | Size to content                                                                        |
-
-Always split columns with `w` — no `style="width:..%"`, no invented `col-6`.
-
-Measurements and reasons: [controls-patterns.md](controls-patterns.md) §Pixel `w`.
-
----
-
-## 5. RIGHT / WRONG
-
-```json
-// ✅ ĐÚNG — gọn, dùng w + prop chuẩn, không style thừa
-{ "el": "v-text-field", "w": 6, "attr": { "v-model": "hoTen", "label": "Họ tên" } }
-
-// ❌ SAI — style/class tự chế không cần thiết
-{ "el": "v-text-field", "w": 6, "attr": {
-    "v-model": "hoTen", "label": "Họ tên",
-    "style": "padding:8px; border:1px solid #ddd; border-radius:8px; margin-bottom:12px",
-    "class": "my-custom-input rounded-lg shadow" } }
-```
-
-```json
-// ✅ ĐÚNG — card mặc định của Vuetify, không tự style
-{ "el": "v-card", "attr": { "class": "pa-2" }, "innerHTML": [ ... ] }
-
-// ❌ SAI — tự vẽ lại card
-{ "el": "v-card", "attr": { "style": "background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.1); border-radius:16px; padding:24px" } }
-```
-
----
-
-## 6. When style/class IS allowed
-
-Only when the user **explicitly requests** specific presentation (e.g. "grey background for this block", "limit width to 800px", "this text red"). Even then:
-
-- Prop → Vuetify utility class → `mw-*` for width → `style` last.
-- `border-radius` on request: obey limits in [design-modes.md](design-modes.md) (large frame ≤12px, medium ≤8px, small ≤6px).
-- No `<style>` in `.vue`; CSS goes in `header.html`.
-
-> **About to type `style` or name a new class → stop and ask "did the user request this?". If not → drop it.**
+# Controls Styling — Approved Layout Vocabulary (use only this)
+
+> Owns: **approved class/prop/style set for `controls` and `.vue`, and presentation priority order**. Aesthetic mode + `border-radius` limits: [design-modes.md](design-modes.md).
+
+**Rule #1: do NOT add `style` or `class` to "beautify" UI.** Use only the vocabulary below (extracted from 78 real `module.json` files across 5 projects: contest-score, security-manager, fp, lhu-test, lhu-lib). If the user didn't ask for a specific effect/spacing/color → **add nothing**. FUI layout (grid + Vuetify + project theme) is already consistent.
+
+> Stats: of 1,284 control objects only ~12% use `attr.style` (almost only for `width`), and **zero custom classes** — 100% standard Vuetify utilities. Common AI mistake: adding `style="padding/margin/border/box-shadow/border-radius/background"` and invented classes → **don't.**
+
+---
+
+## Principles
+
+1. **Default: no style, no class.** Set only `el`, `attr` (v-model/label/:items/:action…), `w`, and `col` when splitting columns.
+2. Spacing/alignment → **Vuetify utility classes** from the tables below, NOT `style`.
+3. `style` only for **fixed `width`** of a filter field (`style: "width:200px"`) — never padding/margin/border/color/background.
+4. Color: component prop (`color="primary"`) or class `primary--text`/`error--text` — no `style="color:#..."`.
+5. **Never** add `border`, `border-radius`, `box-shadow`, `background`, `padding`, custom classes unless the user explicitly asks.
+6. **Compact padding — default `pa-2`** (or `pa-1`/`pa-0`). **NO large padding** (`pa-4`, `pa-6`, `pa-8`...) — wastes screen space. Margin likewise: prefer `-1`/`-2`, avoid `-6`/`-8`.
+7. **When the user _does_ ask for specific presentation — follow this priority**, moving down only when the previous level can't do it:
+   `component prop` (`color`, `outlined`, `dense`, `elevation`) → `Vuetify utility class` (`pa-*`, `ma-*`, `d-flex`, `text-*`, `primary--text`) → `mw-*` for width → custom class → inline `style` (**last**).
+
+---
+
+## 1. Container / row `prop` (grid wrapper)
+
+Outer container and each row use only these tokens (by real frequency):
+
+| Token                                            | Purpose                                                               | Frequency |
+| ------------------------------------------------ | --------------------------------------------------------------------- | --------- |
+| `grid-list-md`                                   | Standard column gap (container)                                       | very high |
+| `fluid`                                          | Full-width container                                                  | high      |
+| `row`                                            | Marks a row                                                           | very high |
+| `align-center`                                   | **Vertically center** controls in a row, esp. different types/heights | high      |
+| `justify-center`                                 | Horizontal centering                                                  | very high |
+| `justify-left` / `justify-end` / `justify-start` | Left / right align                                                    | medium    |
+| `text-center` / `text-left`                      | Text align                                                            | medium    |
+| `mw-800` `mw-1000` `mw-1200` `mw-1400`           | **Limit content width** (FUI class) — centered form/data-entry pages  | medium    |
+| `hidden-container`                               | Wraps dialogs (v-dialog/f-dialog) — takes no layout space             | dialogs   |
+| `grid-list-lg`                                   | Wider gap than grid-list-md                                           | low       |
+| `pa-0` / `py-0`                                  | Remove container padding to touch edges                               | low       |
+| `page-container` / `page-navigation`             | Sticky filter-bar layout (see ui-layout-patterns.md)                  | rare      |
+
+> **Default formula**: container `"fluid grid-list-md"`, each row `"row"`. Rows mixing control types/heights: `"row wrap align-center"` for a shared vertical axis; `justify-center` is horizontal only. Form pages: add `mw-1000`/`mw-1200`.
+
+## 2. `col` (grid column wrapping a control)
+
+`col` only for width splitting or aligning/shrinking the column:
+
+| Token                                     | Purpose                                                                                                                                                   |
+| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `shrink`                                  | **Fixed-width filter field** (doesn't grow) — most common. **Required whenever `w` is px**; write `"class": "shrink"`, NOT `"shrink": true` (inert on V3) |
+| `text-end` / `text-start` / `text-center` | Align content in column                                                                                                                                   |
+| `pa-0`                                    | Remove column padding                                                                                                                                     |
+| `align-self-center`                       | Vertical centering                                                                                                                                        |
+
+Short string `"text-end"` or object `{ "class": "shrink" }`. Add `"v-if": "..."` to `col` to show/hide the whole column by right/condition.
+
+> Prefer `align-center` on the row to align the whole row. Use `align-self-center` on `col` only when a single control needs fixing. Never compensate vertical offset with margin or inline style.
+
+## 3. `attr.class` (on the control itself)
+
+Vuetify utility classes only:
+
+| Group                 | Tokens                                                                                                                                                                        |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Margin                | `mt-1 mt-2 mt-3` · `mb-1 mb-2 mb-4` · `my-2` · `ml-1 ml-2` · `mr-1 mr-2`                                                                                                      |
+| Padding               | `pa-0 pa-2` · `pt-3` · `py-1` — **avoid `pa-4/6/8`**                                                                                                                          |
+| Flex                  | `d-flex` · `flex-column` · `align-center` · `justify-center` · `justify-end` · `flex-grow-0` · `flex-wrap` · `flex-md-grow-0`                                                 |
+| Text                  | `text-center` · `text-left` · `text-right`                                                                                                                                    |
+| Size / weight         | `text-h6` · `subtitle-1` · `body-2` · `caption` · `font-weight-bold` · `font-weight-medium`                                                                                   |
+| Text color (V2)       | `primary--text` · `error--text` · `grey--text` · `white--text` — **FUI V2 (Vuetify 1.5) only** (`--text` suffix)                                                              |
+| Text color (V3)       | `text-primary` · `text-error` · `text-grey` · `text-white` — **Vuetify 3** `text-{color}`. Wrong version = no effect, no error                                                |
+| Background            | prop `color="primary"`, or Vuetify bg classes `primary` · `grey lighten-4`                                                                                                    |
+| Rounding              | `rounded` · `rounded-lg` · `rounded-0`                                                                                                                                        |
+| Shadow / flat         | prop `elevation="0"` / `flat` / `outlined` on `v-card`/`v-btn`                                                                                                                |
+| Breakpoint visibility | `d-none d-md-flex`...                                                                                                                                                         |
+| Size                  | component props (`max-width`, `width`, `dense`, `small`, `x-large`) — no `style="width:..."` unless fixed px needed. Icons: keep default size, **don't add `small`/`:small`** |
+| Scrollbar             | `fpScrollbar` — **the only class** for any area with its own scrollbar; see §Scrollbar right below                                                                            |
+
+### Scrollbar — always the built-in `fpScrollbar`
+
+`fpScrollbar` is predefined in the platform's `projectdefaultstyle.css` (V2 and V3): a thin bar, **hidden until hover**, fading in ~300ms on hover and out ~600ms on leave (thumb `rgba(0,0,0,.25)`, transparent track), working in Firefox and Chrome/Edge/Safari. The class sets `overflow-y: auto` itself. The width is the browser's `thin` (~10px on Chrome ≥121, which ignores `::-webkit-scrollbar` once `scrollbar-color` is set), not the 5px the webkit rule says. The left menu of `HeaderBar` (`.v-navigation-drawer__content`) **already has** this rule; add nothing there.
+
+**Default — the element that REALLY scrolls gets `fpScrollbar`**, without the user asking: a list box with `max-height`, a side panel, the content area of a card/dialog, a long tag/chip list...
+
+**Exactly ONE layer — never nest `fpScrollbar`.** Hovering the innermost area also `:hover`s every outer layer and runs their effect too ⇒ the bar shows late and drops frames (measured on a real project: 2 nested layers slowed show/hide from ~300/600ms to ~850/2000ms). Before adding it, ask:
+
+- Does this element **have a height limit and content that exceeds it**? If not, don't add it; a panel/splitter that only divides the layout (height follows content) is not a scroll area.
+- Does an ancestor already scroll (another `fpScrollbar`, **or `.v-navigation-drawer__content`**)? Then pick one layer: usually recompute the inner layer's height to fit (subtracting the tab bar/toolbar above) so the outer layer no longer overflows, and drop scrolling on the outer layer. An outer layer overflowing by a few dozen px means the inner height is miscalculated, not a reason to keep two scroll layers.
+
+```json
+{ "el": "div", "attr": { "class": "fpScrollbar", "style": "max-height: 400px" }, "innerHTML": [ ... ] }
+{ "el": "v-list", "attr": { "class": "fpScrollbar", "max-height": "300" }, "innerHTML": [ ... ] }
+```
+
+- The class only styles **the scrollbar**; the element still needs a height limit (`max-height`/`height`, preferably a component prop like `max-height` of `v-list`/`v-card`) to have anything to scroll. No need to add `overflow-y: auto`.
+- Same in `.vue`: `class="fpScrollbar"` on the scrolling element.
+
+**User asks to "redo / prettify / restyle the scrollbar"** → still `fpScrollbar`; **NEVER** hand-write `::-webkit-scrollbar`, `scrollbar-width`, `scrollbar-color`. Each module drawing its own style breaks consistency, and hand-made rules easily break the shared class's show/hide effect. Only when the user explicitly asks for **another color** (e.g. a scrollbar on a dark background) override it, and only the **color variable**, in `header.html`:
+
+```css
+/* dark background: translucent white thumb, keeps fpScrollbar's show/hide effect */
+.my-dark-panel.fpScrollbar:hover {
+  --fp-scrollbar: rgba(255, 255, 255, 0.3);
+}
+```
+
+The override does **not** touch `transition`. In particular, never add `scrollbar-color` to the transition: the color already goes through the `--fp-scrollbar` variable (which is transitioning), and transitioning `scrollbar-color` too restarts it every frame ⇒ the color changes in steps, 2-3 times slower.
+
+Do not use `fpScrollbar` for:
+
+- **`f-table`/`f-sheet`**: the table scrolls internally by `:height` (see [ui-table-cell-patterns.md](ui-table-cell-patterns.md)); putting it on an outer wrapper only adds a nested scrollbar.
+- **`HTMLOnly: true` modules**: they do not load `projectdefaultstyle.css`, so the class does not exist (see [module-structure.md](module-structure.md) §HTMLOnly=true). There, writing scrollbar CSS in the module is fine.
+
+### Icon size
+
+- Icons use the component/theme default size.
+- **Don't set `small` or `:small`** on `v-icon`, icon buttons, or buttons with icons just to look "compact".
+- Shrink only when the user explicitly asks or a specialised component/pattern prescribes it; then set the prop on exactly that component — don't shrink the whole button unintentionally.
+
+**Before adding a class → check the table above.** Define a custom class only for what Vuetify lacks: complex grid-template, animation, pseudo-element (`::before`), specific child selectors. Put it in `header.html`, clearly prefixed, **minimal count** — don't recreate card/badge/spacing Vuetify already has.
+
+> `flex-md-grow-0` + `col: { class: "shrink" }` + `style: "width:200px"` = **fixed-width filter field** — standard toolbar pattern ([ui-patterns.md](ui-patterns.md) §4). The only valid place for `style` (width only).
+
+---
+
+## 4. Width: `w` (NOT style/class)
+
+| `w`                  | Meaning                                                                                |
+| -------------------- | -------------------------------------------------------------------------------------- |
+| `1`–`12`             | Grid columns (12 = full row)                                                           |
+| `>= 25` (e.g. `250`) | Fixed px width — **requires `col: { "class": "shrink" }`**, otherwise px has no effect |
+| `13`–`24`            | **Don't use** — dead zone: V2 yields px, V3 yields a non-existent class                |
+| `""` (empty)         | Size to content                                                                        |
+
+Always split columns with `w` — no `style="width:..%"`, no invented `col-6`.
+
+Measurements and reasons: [controls-patterns.md](controls-patterns.md) §Pixel `w`.
+
+---
+
+## 5. RIGHT / WRONG
+
+```json
+// ✅ ĐÚNG — gọn, dùng w + prop chuẩn, không style thừa
+{ "el": "v-text-field", "w": 6, "attr": { "v-model": "hoTen", "label": "Họ tên" } }
+
+// ❌ SAI — style/class tự chế không cần thiết
+{ "el": "v-text-field", "w": 6, "attr": {
+    "v-model": "hoTen", "label": "Họ tên",
+    "style": "padding:8px; border:1px solid #ddd; border-radius:8px; margin-bottom:12px",
+    "class": "my-custom-input rounded-lg shadow" } }
+```
+
+```json
+// ✅ ĐÚNG — card mặc định của Vuetify, không tự style
+{ "el": "v-card", "attr": { "class": "pa-2" }, "innerHTML": [ ... ] }
+
+// ❌ SAI — tự vẽ lại card
+{ "el": "v-card", "attr": { "style": "background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.1); border-radius:16px; padding:24px" } }
+```
+
+---
+
+## 6. When style/class IS allowed
+
+Only when the user **explicitly requests** specific presentation (e.g. "grey background for this block", "limit width to 800px", "this text red"). Even then:
+
+- Prop → Vuetify utility class → `mw-*` for width → `style` last.
+- `border-radius` on request: obey limits in [design-modes.md](design-modes.md) (large frame ≤12px, medium ≤8px, small ≤6px).
+- No `<style>` in `.vue`; CSS goes in `header.html`.
+
+> **About to type `style` or name a new class → stop and ask "did the user request this?". If not → drop it.**

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

@@ -72,9 +72,9 @@ Without `--sql-server`/`--database`, `fui db add` reads both from the connection
 
 **Naming:** pass `--name <connectionName>` for a specific name. Omitted, fui suggests `apiName` first; if taken, adds the zone from `apiDomain` (`docs` → `docs_lhbs`); still taken, adds the database and a number. Names take letters, digits, `.`, `_`, `-` and are lowercased. The same server + database added again keeps its existing name.
 
-**v1 compatibility, no silent moves:** an old record without `apiName` reads as `apiName = connectionName = key`. fui never renames old SQL folders. A new connection can take its own name, so an alias repeated across zones can sit next to the old record.
+**v1 compatibility, no folder moves:** an old record without `apiName` reads as `apiName = connectionName = key`, and the file is rewritten as version 2 the first time fui reads it (old file kept in `_history/`). fui never renames old SQL folders. A new connection can take its own name, so an alias repeated across zones can sit next to the old record.
 
-> **CRITICAL — `apiDomain` has two meanings:** `_connections.json` → bare host (`api.example3.vn`); `project.json` `data.apiDomain` → full base URL with apiName + trailing `/` (`https://tapi.example.vn/acc/`). Top bug: bare host + apiName without `/` → `tapi.lhu.edu.vnts` instead of `tapi.lhu.edu.vn/ts`. See [tapi-reference.md](tapi-reference.md) §3. Don't build URLs; copy the `Wiring URL` line from `fui sp verify`/`fui sp help`.
+> **CRITICAL — `apiDomain` has two meanings:** `_connections.json` → bare host (`api.example3.vn`); `project.json` `data.apiDomain` → full base URL with apiName + trailing `/` (`https://tapi.example.vn/acc/`). Top bug: bare host + apiName without `/` → `tapi.lhu.edu.vnts` instead of `tapi.lhu.edu.vn/ts`. See [tapi-reference.md](tapi-reference.md) §3. Don't build URLs; copy the `url (reference only, not called; copy verbatim)` line from `fui sp verify`/`fui sp help`.
 
 ## 2. Finding connection info
 
@@ -121,7 +121,7 @@ Never extract UID/PWD by hand (PowerShell etc.) — exposes credentials.
 
 ```
 1. fui project sync -p <projectId>   → local project.json (apiDomain source)
-2. fui use -p <projectId>            → project implied afterwards
+2. cd {workspace}/<projectId>        → project implied afterwards (or pass -p <projectId> each time)
 3. fui db alias list                 → aliases you may manage
 4. fui db add-by-name <apiName>      → lookup + token + test + save + schema (do NOT run fui schema pull after)
 5. Module uses other aliases? Repeat 4 per alias. Added connections do NOT become default (use --default).
@@ -151,7 +151,7 @@ Pass secrets only via stdin (`-`) or `--*-env VAR`.
 
 ## 4. `fui db add`
 
-- Saved to `{workspace}/{projectId}/_db/_connections.json` under `apiName`. projectId ≠ apiName; a project can have many apiNames — never derive one from the other.
+- Saved to `{workspace}/{projectId}/_db/_connections.json` under its connectionName (`--name`, suggested from `apiName` otherwise); `apiName` is a field of the record. projectId ≠ apiName; a project can have many apiNames — never derive one from the other.
 - **Mandatory:** projectId not stated, or alias's project unclear → ask _"Which project should this DB connection be saved to? (projectId)"_ before `fui db add`. Wrong project misplaces schema/SPs.
 
 ```
@@ -167,7 +167,7 @@ fui db add <apiName> -p <project> --token - --api-domain host [--name connection
 
 UID/PWD changed, Server/Database unchanged:
 
-1. `fui db list -p <projectId>` — confirm the connection has `sqlServer` and `database` (missing → full `fui db add` instead).
+1. `fui token decode --db <connectionName>` — confirm the stored token has a server and a database (missing → full `fui db add` instead). The password is never shown.
 2. `fui db token-rebuild --db <connectionName> --uid <login> --pwd -` — rebuilds, tests, saves.
 
 `--db` REQUIRED with >1 connection (overwrites credentials; wrong guess clobbers another DB's token).
@@ -240,15 +240,15 @@ Prints `📋 Archived orphaned local SP file(s)...` when archiving. Name match i
                                         Do NOT try URL variants.
 7. fui sp verify <name> [--params …]  → STATIC contract check (read or write API); calls NO endpoint.
                                         Reads real SP body → response shape, error contract, read/write,
-                                        apiMocks snippet for fui module simulate. REQUIRED before writing
-                                        apiMocks for an existing SP — never invent structure;
+                                        --mocks snippet for fui module simulate. REQUIRED before writing
+                                        --mocks for an existing SP — never invent structure;
                                         fui module simulate warns on unverified mocks matching real SPs.
 ```
 
 - `--db` omitted → inferred from SP name (schema + local `.sql` per connection). One match → silent; zero or several (same name in two DBs) → connection menu, pick and re-run, don't guess.
 - `fui sp save` for a brand-new SP can't infer: multi-connection projects must pass `--db` on first save.
 
-> `fui sp verify` reads the real body, not the name; hard error if unreadable. Write-API testing with `fui module simulate`: [tools-registry.md](tools-registry.md). Guards on `DROP`/`ALTER TABLE`, `DELETE`/`UPDATE` without `WHERE` are enforced in code, no bypass. Writes via `fui query`/`fui exec` need `--confirm-write`.
+> `fui sp verify` reads the real body, not the name; hard error if unreadable. Write-API testing with `fui module simulate`: [tools-registry.md](tools-registry.md). Guards on `DROP TABLE`/`DROP DATABASE`/`ALTER TABLE`, `xp_cmdshell`, `DELETE`/`UPDATE` without `WHERE` are enforced in code, no bypass. `sp deploy` also refuses a file that is not exactly one definition of the named object. Writes via `fui query`/`fui exec` need `--confirm-write`.
 
 **Rollback:** read `{workspace}/_history/{projectId}/_db/{connectionName}/{name}_{timestamp}.sql` → `fui sp save <name> -f <old file>` → `fui sp deploy <name>`.
 
@@ -272,7 +272,7 @@ EXEC XDATA23.Calendar2015.dbo.spIO_IN_DeleteMonHocInfo @MonHocID, @ErrorDKMH OUT
 
 ## 9. List connections
 
-`fui db list -p <projectId>` — every connection: connectionName (`db`), `apiName`, `apiDomain`, `sqlServer`, `database`, `_db/{connectionName}/`, dbToken/userToken present or not (never values), which is `default`. Run first when unsure which `--db` to use. Also lists `_db/` folders with no connection (leftovers, nothing reads them) — delete manually when sure.
+`fui db list -p <projectId>` — every connection: `db` (`project/connectionName`, also the `_db/{connectionName}/` folder), `engine`, `default` (`*`), `apiDomain`, `database`, `userToken` (yes/no, never the value), `apiName`. Run first when unsure which `--db` to use. Server and login of one connection: `fui token decode --db <connectionName>`. `_db/` folders with no connection are not listed; nothing reads them.
 
 ## 10. Cheat sheet