@cyberskill/design 1.3.11 → 1.4.0

package/_esm/cs.mjs

@@ -1,4 +1,4 @@
-// CyberSkill Design System — ESM entry point (GENERATED from _ds_manifest.json at v1.3.11).
+// CyberSkill Design System — ESM entry point (GENERATED from _ds_manifest.json at v1.4.0).
 // No build step: import this module directly in a browser. It ensures React 19.2.8 via umd-react
 // (official React 19 dropped UMD; pinned + SRI; skipped when window.React already exists), side-loads
 // ../_ds_bundle.js once, resolves the compiler-assigned namespace BY PREFIX (never a hardcoded suffix),
@@ -32,7 +32,7 @@ if (!found()) await ensureScript("../_ds_bundle.js");
 export const CS = g[found()];
 if (!CS) throw new Error("cs.js: bundle loaded but no CyberSkillDesignSystem_* namespace found");
 export default CS;
-export const VERSION = "1.3.11";
+export const VERSION = "1.4.0";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;

package/docs/contrast-report.md

@@ -1,6 +1,6 @@
 # Contrast report — elemental pairings (APCA)
 
-Generated · sweep at VERSION 1.3.11.
+Generated · sweep at VERSION 1.4.0.
 
 Published on Storybook **Docs** at `design.cyberskill.world`.
 

package/docs/conventions.md

@@ -32,13 +32,13 @@ Style’s sole pack today is **liquid-glass**. Immutable under all axes: Umber/O
 
 **New component** — `Name.jsx` + `Name.d.ts` + `Name.prompt.md` in `components/<group>/`; add to the group's card html (resolve the bundle namespace **by prefix** — `const CS = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]` — never a hardcoded `…_<projectId>` suffix); add to readme's group line. Consume tokens only; no hex literals except inside `tokens/`.
 
-**Responsive** — reflow is global (`base/responsive.css`, loaded last): media never overflows, print docs relax padding, `.cs-sheet` tables scroll, `.cs-sidebar` collapses, inline fixed-column grids collapse (3+→2 tablet, →1 phone), unbreakable long tokens (write-on `______` lines, long URLs/IDs) get `overflow-wrap: anywhere` on doc surfaces so they can't prop a phone column open, the app-shell shell grid collapses to one column with `main{min-width:0}`+`.cs-table-wrap` scroll, and fixed-geometry export canvases (`class="cs-canvas-desk"`: decks, social) **always** `overflow-x:auto` so a slide wider than the window scrolls inside the desk rather than pushing the page wide. **Width stops must match the token scale** in `tokens/spacing.css` (`xs` · `phone` 360 · `sm` 640 · `md` 768 · `lg` 1024 · `xl` 1280 · `2xl` 1536) — `docs-consistency` fails off-scale `@media`/`@container` widths in `base/` (FIND-007). Verified whole-set at 390 by `_audit/responsive-overflow.html` (all 84 = 0 document overflow). **Two hard gotchas:** (1) the DC runtime compiles inline `style="…"` into React objects, so the rendered attribute is *spaced* — any `[style*=…]` responsive selector must match `grid-template-columns: repeat(4, 1fr)` (colon-space, comma-space), never the authored no-space form; (2) a global CSS rule can only override a property the template sets **inline** via an **attribute** selector (`[style*="grid-template-columns: 248px 1fr"]`) — a **class** selector loses to the inline style. Prefer fixing overflow in the template source (add `min-width:0`, `flex-wrap:wrap` inline) over fighting inline from the stylesheet.
+**Responsive** — reflow is global (`base/responsive.css`, loaded last): media never overflows, print docs relax padding, `.cs-sheet` tables scroll, `.cs-sidebar` collapses, inline fixed-column grids collapse (3+→2 tablet, →1 phone), unbreakable long tokens (write-on `______` lines, long URLs/IDs) get `overflow-wrap: anywhere` on doc surfaces so they can't prop a phone column open, the app-shell shell grid collapses to one column with `main{min-width:0}`+`.cs-table-wrap` scroll, and fixed-geometry export canvases (`class="cs-canvas-desk"`: decks, social) **always** `overflow-x:auto` so a slide wider than the window scrolls inside the desk rather than pushing the page wide. **Width stops must match the token scale** in `tokens/spacing.css` (`xs` · `phone` 360 · `sm` 640 · `md` 768 · `lg` 1024 · `xl` 1280 · `2xl` 1536) — `docs-consistency` fails off-scale `@media`/`@container` widths in `base/` (FIND-007). Verified whole-set at 390 by `_audit/responsive-overflow.html` (all 85 = 0 document overflow). **Two hard gotchas:** (1) the DC runtime compiles inline `style="…"` into React objects, so the rendered attribute is *spaced* — any `[style*=…]` responsive selector must match `grid-template-columns: repeat(4, 1fr)` (colon-space, comma-space), never the authored no-space form; (2) a global CSS rule can only override a property the template sets **inline** via an **attribute** selector (`[style*="grid-template-columns: 248px 1fr"]`) — a **class** selector loses to the inline style. Prefer fixing overflow in the template source (add `min-width:0`, `flex-wrap:wrap` inline) over fighting inline from the stylesheet.
 
 **New template** — `templates/<slug>/<Slug>.dc.html` with `<!-- @template name description -->` first; `ds-base.js` stays single-entry (`styles.css` only — the one-line rebind was validated end-to-end Jul 2026 from a deeper path; the test scaffold has since been removed) and publishes the id-independent `window.CyberSkillDS` alias on bundle load, so mount DS components via `component-from-global-scope="CyberSkillDS.…"` — **never** a hardcoded `CyberSkillDesignSystem_<projectId>` suffix (it changes on re-import; enforced by `_audit/namespace-portability.html`); inline styles only; 1–3 tweaks (never plain copy/color — in-place editing covers those); printable docs add the `@page` + `.cs-desk`/`.cs-sheet` print block and carry **no dark tweak** (print is light-only).
 
 **New element variant** — stay inside the element's oklch envelope; set the 10 `--cs-accent-*` contract tokens (incl. `--cs-accent-on-strong` ≥4.5:1 on `-strong`) plus `--cs-color-text-accent`/`--cs-color-link` (APCA-check both); the aurora wash inherits from the element via `.cs-aurora-wash` (override the class rule only if the variant truly needs its own image); gradient partner (`grad-b`) must follow Tương sinh.
 
-**Ship check** — run the compiler check until clean, then run `_audit/docs-consistency.html` **and** `_audit/namespace-portability.html` (both must be green). VERSION **1.3.11** (auto-bumps on `main`).
+**Ship check** — run the compiler check until clean, then run `_audit/docs-consistency.html` **and** `_audit/namespace-portability.html` (both must be green). VERSION **1.4.0** (auto-bumps on `main`).
 
 ## Decision log (owner-approved)
 
@@ -116,7 +116,7 @@ Vietnamese is the primary language; the type system is built for it — verified
 
 ## Whole-set state audits — language · theme · responsive (each its own pass, Jul 2026)
 
-Owner doctrine: language, theme, and responsive each get their OWN whole-set pass; one clean state is not evidence for another. All three are now race-free, manifest-driven, **all-84** pass/fail gates built on the same pattern — a **fresh single-navigation iframe per template** (reusing one iframe across `src` swaps races the `@import`ed CSS and yields false results), state forced via `__dcSetProps`, settle, then measure:
+Owner doctrine: language, theme, and responsive each get their OWN whole-set pass; one clean state is not evidence for another. All three are now race-free, manifest-driven, **all-85** pass/fail gates built on the same pattern — a **fresh single-navigation iframe per template** (reusing one iframe across `src` swaps races the `@import`ed CSS and yields false results), state forced via `__dcSetProps`, settle, then measure:
 - **Language** — `_audit/language-overflow.html` — forces `Tiếng Việt`; 0 VN overflow/clip @390; also asserts VN actually applied on every template.
 
 - **Theme** — `_audit/theme-overflow.html` — forces dark; hard gate = dark-applies + 0 dark overflow @390 + 0 open solid-bg leaf-text contrast fails outside `REVIEWED_OK`.

package/docs/decisions.md

@@ -25,9 +25,10 @@ Stay on the current Figma plan. Variables REST API is Enterprise-only — write
 **Owner choice: Storybook is the single live hub** (Jul 2026)
 
 - Operators use Storybook at `/` for Theme × Element × Language × Style and component control matrices.
+- Public IA follows the atomic browse path: Foundations → Components → **Templates** → **Pages** (Atoms/Molecules/Organisms remain in CSF + Atomic View; Templates/Pages are first-class sidebar groups, including the full VN A4 / HR Suite).
 - No separate Live View page exists in the tree.
 - Legacy `/dashboard`, `/dashboard/`, `/dashboard.html`, `/dashboard/:path*`, `/playground`, `/playground/`, `/playground/:path*` redirect to `/`.
-- Portable Atomic View and other static HTML remain for zero-build gates and consumers; they are not the site product entry.
+- Portable Atomic View and other static HTML remain for zero-build gates and consumers; Atomic View is also linked from **Templates → Gallery**.
 - Surface map: `docs/live-hub.md`.
 
 ## 5. Dual token JSON sources

package/docs/hr-suite-sources.md

@@ -0,0 +1,91 @@
+# HR Suite sources (DOCX ↔ templates)
+
+Published on Storybook **Docs** at `design.cyberskill.world`.
+
+## Decision
+
+**Canonical live instruments are Design Components** under `templates/vn-*/*.dc.html` (plus `doc-suite-index`, `doc-style-guide`, `doc-templates`). Google Drive / Word (`.docx` / `.dotx`) are **source provenance**, not the Storybook product surface.
+
+Do **not** commit large binary Word files into this design-system package. Optional local unpack for diffing:
+
+```bash
+# scraps/ is gitignored
+mkdir -p scraps/hr-suite-docx
+unzip -O UTF-8 /path/to/Templates.zip -d scraps/hr-suite-docx
+```
+
+If you keep a long-lived local copy outside git, use any path you like — the mapping table below is the contract.
+
+## Inventory (Templates.zip, Jul 2026)
+
+| Count | Kind |
+|---|---|
+| 40 | `.docx` instruments / guides |
+| 1 | `.dotx` presentation shell |
+| **41** | **total in zip** |
+
+All **37** Employment Suite `templates/vn-*` folders from the zip map 1:1 to a zip `.docx`. Four zip “0.” reference files map to `doc-*` templates. An **additional** commercial framework (not in that zip) lives at `templates/vn-framework-agreement` — see below.
+
+## Mapping
+
+| Zip file (English title) | Repo path |
+|---|---|
+| CyberSkill Document Style Guide | `templates/doc-style-guide` |
+| CyberSkill Document Template (`.dotx`) | `templates/doc-templates` |
+| Employment Suite Usage Guide | `templates/doc-suite-index` (usage section) |
+| HR Document Suite Index | `templates/doc-suite-index` |
+| Labor Contract | `templates/vn-labor-contract` |
+| Exit-Handover Agreement | `templates/vn-exit-handover` |
+| NDNCA & IP | `templates/vn-ndnca-ip` |
+| Phantom Stock Agreement | `templates/vn-phantom-stock` |
+| Total Rewards & Career Path Appendix | `templates/vn-total-rewards-appendix` |
+| Labor Contract Amendment Appendix | `templates/vn-contract-amendment` |
+| Appointment & Transfer Decision | `templates/vn-appointment-transfer` |
+| Probation Contract | `templates/vn-probation-contract` |
+| Internal Labor Regulations | `templates/vn-internal-labor-regulations` |
+| Decision on Termination | `templates/vn-termination-decision` |
+| Disciplinary Schedule (Annex to ILR) | `templates/vn-disciplinary-schedule` |
+| Training & Service Commitment Agreement | `templates/vn-training-commitment` |
+| Internship Agreement | `templates/vn-internship-agreement` |
+| Employment Offer Letter | `templates/vn-offer-letter` |
+| Personal Data Consent (PDPL) | `templates/vn-pdpl-consent` |
+| Foreign Employee Work Permit Pack | `templates/vn-foreign-employee-pack` |
+| Independent Contractor Agreement | `templates/vn-contractor-agreement` |
+| Employee Request Form | `templates/vn-employee-request` |
+| Job Description | `templates/vn-job-description` |
+| Acknowledgement of Receipt | `templates/vn-receipt-acknowledgement` |
+| Labour Management Book | `templates/vn-labour-management-book` |
+| Performance Review Form | `templates/vn-performance-review-form` |
+| Onboarding Checklist | `templates/vn-onboarding-checklist` |
+| Mutual NDA | `templates/vn-mutual-nda` |
+| Statement of Work | `templates/vn-sow-appendix` |
+| Disciplinary Case File | `templates/vn-disciplinary-case-file` |
+| Certificate of Employment | `templates/vn-certificate-of-employment` |
+| Resignation Letter | `templates/vn-resignation-letter` |
+| Travel & Expense Policy | `templates/vn-travel-expense-policy` |
+| Grassroots Democracy Regulation | `templates/vn-grassroots-democracy` |
+| Salary Scale and Payroll Table | `templates/vn-salary-scale` |
+| Remote & Hybrid Work Policy | `templates/vn-remote-work-policy` |
+| Code of Conduct | `templates/vn-code-of-conduct` |
+| Compensation & Reward Regulation | `templates/vn-compensation-regulation` |
+| Personal Data Protection Policy | `templates/vn-data-protection-policy` |
+| Information Security & Acceptable Use Policy | `templates/vn-infosec-policy` |
+| Performance Evaluation Regulation | `templates/vn-performance-evaluation-regulation` |
+
+### Outside Templates.zip (added Aug 2026)
+
+| Source | Repo path | Taxonomy |
+|---|---|---|
+| `Hợp đồng Nguyên Tắc - CyberSkill - Ban QLDA Bình Quới.docx` (Downloads) | `templates/vn-framework-agreement` | **Commercial** software-services framework (not employment lifecycle). Uses the same VN A4 bilingual skin (`vn-*`) and appears under **Templates → HR** via the `HR Suite ·` catalog name; suite index lists it under Legal/client-facing. Adapted DOCX (gitignored): `scraps/hr-suite-docx/Templates/9. Hợp đồng Nguyên Tắc - Framework Agreement (Software Services).docx` |
+
+## Browse on Storybook
+
+- **Templates → Gallery → Atomic gallery** — full Atomic View Templates tier
+- **Templates → HR** — every HR Suite / HR ops instrument iframe
+- **Templates → Documents** — suite index / style guide / document template
+
+## Sync status (Aug 2026)
+
+Zip dated **2026-07-11**. Repo already holds converted `.dc.html` for every mapped instrument. This change **documents** the Drive/DOCX ↔ `vn-*` map and promotes Templates in Storybook; it does **not** re-import DOCX body text into DC templates. Re-sync only when counsel or ops confirm Word content drifted from the DC tree — then update the matching `templates/vn-*/` folder and regenerate Storybook CSF if names change (`node scripts/generate-template-stories.mjs`).
+
+Counsel review remains required before real-world use (client-supplied instruments; see README / SKILL).

package/docs/live-hub.md

@@ -8,34 +8,39 @@ Published on Storybook **Docs** at `design.cyberskill.world`.
 
 ## Sidebar IA
 
+Atomic browse order on the product site: **Foundations → Components → Templates → Pages** (Atoms / Molecules / Organisms live inside Atomic View and CSF Components; Templates and Pages are first-class sidebar groups).
+
 | Group | Role |
 |---|---|
-| **Docs** | Published operator docs: **Start** (Introduction, README, SKILL, Contributing, llms, Library) · **Guides** (consuming, grant, deploy, schema, conventions, styles, products, Figma, contrast, storybook, live-hub, release runbook, benchmark, …) · **Maintainers** (doctrine, decisions, CI/CD, quality gates, sync). Curated MDX plus one sidebar entry per tracked page. EN·VI via the Documentation Library (`/docs/viewer.html`) |
+| **Docs** | Published operator docs: **Start** (Introduction, README, SKILL, Contributing, llms, Library) · **Guides** (consuming, grant, deploy, schema, conventions, styles, products, Figma, contrast, storybook, live-hub, HR Suite sources, release runbook, benchmark, …) · **Maintainers** (doctrine, decisions, CI/CD, quality gates, sync). Curated MDX plus one sidebar entry per tracked page. EN·VI via the Documentation Library (`/docs/viewer.html`) |
 | **Foundations** | Colors, typography, spacing, elevation, motion, elements |
 | **Components** | Full CSF library |
+| **Templates** | Public starting points: **Gallery** (Atomic View → Templates tier, kitchen-sink, playground) plus every `_ds_manifest.json` template grouped like Atomic View (Product · Board · … · **HR** Suite · Documents). Includes all 38 `vn-*` A4 instruments (Employment Suite + commercial framework) |
+| **Pages** | UI kits — Status Hub, Marketing site, Slide deck |
 | **Release Notes** | Curated product prose (**no CHANGELOG.md**) |
 | **Status** | Full-bleed embed of `_audit/run.html` (auto-run on first load; **Re-run** on demand) |
 | **A11y / I18n** | Accessibility + bilingual specimens |
-| **Maintainer** | Portable HTML iframes for gates (Atomic View buried here — not a public top-level entry) |
+| **Maintainer** | Portable HTML iframes for gates and demos (Motion, kit mirrors, template demos, RTL, Atomic View for gates) |
 
 ## Surfaces
 
 | Surface | Role |
 |---|---|
-| **Storybook** (`/`) | Host product surface: Theme × Element × Language × Style toolbar, Docs/Foundations/Components/Release Notes/Status, and Maintainer/* iframes into portable HTML |
-| **Atomic View** (`guidelines/atomic-view.html`) | Portable zero-build component grid for gates and clone-and-open browsing — not the public product entry |
-| **Other guidelines / templates** | Portable specimens; opened from Storybook Maintainer/* when exploring Motion, Status Hub / Website / Deck indexes, kitchen-sink, etc. |
+| **Storybook** (`/`) | Host product surface: Theme × Element × Language × Style toolbar, Docs/Foundations/Components/**Templates**/**Pages**/Release Notes/Status, and Maintainer/* iframes into portable HTML |
+| **Atomic View** (`guidelines/atomic-view.html`) | Portable zero-build atomic browser (Atoms → Molecules → Organisms → Templates → Pages). Public via **Templates → Gallery → Atomic gallery**; also under Maintainer for gates / clone-and-open |
+| **Other guidelines / templates** | Portable specimens; opened from Storybook Templates/*, Pages/*, or Maintainer/* |
 | **Legacy `/dashboard`, `/dashboard/`, `/dashboard.html`, `/dashboard/:path*`, `/playground`, `/playground/`, `/playground/:path*`** | Redirect to `/` (stubs + Vercel redirects) |
 
-## Surface map (Maintainer/* stories)
+## Surface map (public + Maintainer)
 
 | Storybook entry | Portable HTML |
 |---|---|
 | Components/* CSF | React sources under `components/` |
+| Templates/Gallery → Atomic gallery | `guidelines/atomic-view.html#tier-templates` |
+| Templates/{Category}/* | `templates/**/*.dc.html` via `_ds_manifest.json` (regen: `node scripts/generate-template-stories.mjs`) |
+| Pages → Status Hub / Marketing site / Slide deck | `ui_kits/status-hub|website|deck/index.html` |
 | Maintainer/Surfaces → Motion | `guidelines/motion.html` |
-| Maintainer/Surfaces → Status Hub | `ui_kits/status-hub/index.html` |
-| Maintainer/Surfaces → Website | `ui_kits/website/index.html` |
-| Maintainer/Surfaces → Deck | `ui_kits/deck/index.html` |
+| Maintainer/Surfaces → Status Hub / Website / Deck | same UI kits (maintainer mirrors) |
 | Maintainer/Surfaces → Template Playground | `templates/playground.html` |
 | Maintainer/Surfaces → Kitchen Sink | `templates/kitchen-sink.html` |
 | Maintainer/Surfaces → Image Slots | `templates/image-slots-demo.html` |
@@ -60,3 +65,5 @@ Consumers still link `styles.css` / `_ds_bundle.js` / ESM / templates. **Do not*
 npm run storybook          # product Storybook at http://localhost:6006
 npm run build:site         # packages Storybook at .vercel-static/ (site root `/`)
 ```
+
+Open **Templates → Gallery → Atomic gallery** or **Templates → HR → …** for the Employment Suite.

package/docs/quality-gates.md

@@ -41,9 +41,9 @@ Benchmark principles (WCAG · APCA · OKLCH · DTCG · CDS doctrine + style expa
 | A11y interactions | `_audit/a11y-gate.html` | Focus management (Dialog/Drawer trap + restore + Escape), roving tabindex, combobox `aria-activedescendant`, Mentions APG + Sortable move buttons (hard-fail), role/label contracts, plus open-state Esc/focus for Cascader · TreeSelect · Tour · HoverCard · ContextMenu | All keyboard/ARIA assertions pass (`__a11y`) | Hard | Fast board CI |
 | A11y CSSOM | `_audit/a11y-harness.html` | Every interactive `.cs-*` control meets its documented touch-target floor under coarse pointer; focus-ring, reduced-motion, and contrast rules proven in source CSS | 0 floor violations, all source proofs found (`__a11ycss`) | Hard | Fast board CI |
 | Template schema v2 | `_audit/template-schema-test.html` | Every `content-schema.json` sidecar validates against the JSON Schema, every declared slot id resolves to a real `{{ hole }}` in its template, and every template exposing an authorable **content** hole ships a sidecar (axis/control-flow and boolean tweak holes excluded — see `docs/template-schema-v2.md`) | 0 invalid sidecars, 0 dangling slot ids, 0 hole-driven templates without a sidecar (`__schemav2`) | Hard | Fast board CI |
-| Support runtime identity | `_audit/support-runtime-identity.html` | All `templates/*/support.js` copies (one per template, 84) are byte-identical: sha-256 via SubtleCrypto, exactly one unique hash, copy count == manifest template count | 1 unique hash, count match (`__supportid`) | Hard | Fast board CI |
+| Support runtime identity | `_audit/support-runtime-identity.html` | All `templates/*/support.js` copies (one per template, 85) are byte-identical: sha-256 via SubtleCrypto, exactly one unique hash, copy count == manifest template count | 1 unique hash, count match (`__supportid`) | Hard | Fast board CI |
 | Bilingual parity | `_audit/bilingual-parity.html` | Every component in `components/_i18n/strings.js` has en + vi tables with equal key sets and no empty values | 0 missing/extra keys, 0 empty values (`__bilingual`) | Hard | Fast board CI + merge blocker |
-| Template language parity | `_audit/template-lang-parity.html` | Static source scan of all 84 `.dc.html`: en/vi hole-map key sets identical and non-empty (21 map templates); `sc-if` `isEN`/`isVN` branches paired (24 branch templates); every `language`-tweak template has a bilingual mechanism; EN-leak lexicon (Unsubscribe · View in browser · Preferences · All rights reserved · Manage subscription · Sent with) never appears outside `isEN` guards / the `en` map. VN-first stacked instruments (37 `vn-*` + 3 `doc-*`) are leak-exempt by design — both languages always render | 0 key drifts, 0 unpaired branches, 0 leaks (`__langparity`) | Hard | Fast board CI |
+| Template language parity | `_audit/template-lang-parity.html` | Static source scan of all 85 `.dc.html`: en/vi hole-map key sets identical and non-empty (21 map templates); `sc-if` `isEN`/`isVN` branches paired (24 branch templates); every `language`-tweak template has a bilingual mechanism; EN-leak lexicon (Unsubscribe · View in browser · Preferences · All rights reserved · Manage subscription · Sent with) never appears outside `isEN` guards / the `en` map. VN-first stacked instruments (38 `vn-*` + 3 `doc-*`) are leak-exempt by design — both languages always render | 0 key drifts, 0 unpaired branches, 0 leaks (`__langparity`) | Hard | Fast board CI |
 | APCA dark packs | `_audit/apca-dark-preview.html` | All 15 element×variant packs hold their APCA targets in dark (bright-as-text ≥ 75, accent UI ≥ 60, ink-on-accent ≥ 75, ink-on-tint ≥ 75) | 0 current failures (`__apcaPreview.currentFail === 0`) | Hard | Fast board CI |
 | Element geometry | `_audit/element-geometry.html` | Soft/middle/deep intensity sync across five elements; variant distinctness; light↔dark hue identity; Thổ middle pins logo ochre; packs generated from seeds | `__elementgeometry.pass` | Hard | Fast board CI |
 | Style contract | `_audit/style-contract.html` | Style axis allowlist: sole pack `liquid-glass` (absent ≡ default); `styles.css` imports `tokens/styles.css`; `--cs-style-pack` resolves; no unknown `data-cs-style` in scanned sources | `__stylecontract.pass` | Hard | Fast board CI |
@@ -57,7 +57,7 @@ Benchmark principles (WCAG · APCA · OKLCH · DTCG · CDS doctrine + style expa
 
 | Gate | File | What it asserts | Pass criterion | Type | Where it runs |
 |---|---|---|---|---|---|
-| Responsive overflow | `_audit/responsive-overflow.html` | Every template (84) + 3 UI kits render at 390 px without horizontal document overflow | 0 overflowing surfaces (`__overflow`) | Hard | Whole-set CI (every PR + nightly) |
+| Responsive overflow | `_audit/responsive-overflow.html` | Every template (85) + 3 UI kits render at 390 px without horizontal document overflow | 0 overflowing surfaces (`__overflow`) | Hard | Whole-set CI (every PR + nightly) |
 | Language overflow | `_audit/language-overflow.html` | Same set forced to Tiếng Việt: VN applies, no overflow, no clipped text in fixed/nowrap boxes, and known EN built-in strings (PromptInput hint, FileUpload, DataGrid pin, …) do not leak | 0 over/clip/EN-leak (`__language`) | Hard | Whole-set CI (every PR + nightly) |
 | Theme overflow | `_audit/theme-overflow.html` | Same set forced dark: dark applies, no document overflow, and no reproducible solid-bg leaf-text WCAG fails outside `REVIEWED_OK` | Dark applied + 0 overflow + 0 open contrast (`__theme`) | Hard (allowlisted near-misses only) | Whole-set CI (every PR + nightly) |
 

package/docs/release-notes.md

@@ -1,6 +1,6 @@
 # Release Notes
 
-Curated product highlights for operators. This is **not** a git log and **not** a `CHANGELOG.md` — the design system does not maintain a changelog file. VERSION **1.3.11** (auto-bumps on push to `main` from Conventional Commits; owner may still force a bump). Technical continuity is the repo tip; product-facing continuity is this page (mirrored in Storybook **Release Notes**). Published on Storybook **Docs** at `design.cyberskill.world`.
+Curated product highlights for operators. This is **not** a git log and **not** a `CHANGELOG.md` — the design system does not maintain a changelog file. VERSION **1.4.0** (auto-bumps on push to `main` from Conventional Commits; owner may still force a bump). Technical continuity is the repo tip; product-facing continuity is this page (mirrored in Storybook **Release Notes**). Published on Storybook **Docs** at `design.cyberskill.world`.
 
 ## Release — `@cyberskill/design@1.3.10`
 

package/docs/storybook.md

@@ -21,7 +21,9 @@ Storybook **10** is the **product site** for operators on `design.cyberskill.wor
   - `FullMatrix` when ≥1 of {size enums, variant enums, state keys} exist — the size × variant × key-state product via shared helpers in `stories/lib/matrix.jsx`
 - Toolbar globals: Theme (light · dark · **system**) × Element × Language × Style (same axes as templates / Atomic View). Element lists **all 15** Ngũ Hành packs (`tokens.elements` / template EL maps / Storybook toolbar) — not a subset. Style’s sole pack is **liquid-glass**.
 - **Docs/** published operator documentation — nested **Start / Guides / Maintainers**, curated MDX for high-traffic pages, one sidebar story per tracked markdown page, and a Documentation Library iframe of `/docs/viewer.html` (EN·VI). Canonical prose remains `docs/*.md`; Storybook is the live reading surface. **Release Notes/** curated product prose (**no CHANGELOG.md**); **Status/** embeds `_audit/run.html` full-bleed
-- **Maintainer/** stories for portable HTML surfaces (Motion, templates, kitchen-sink, AI cluster, RTL; Atomic View buried for gates)
+- **Templates/** public starting points — Gallery (Atomic View Templates tier + kitchen-sink/playground) and every manifest template under Atomic View categories (including **HR** / `vn-*`). Regen CSF with `node scripts/generate-template-stories.mjs` after template renames
+- **Pages/** public UI kits (Status Hub, Marketing site, Slide deck)
+- **Maintainer/** stories for portable HTML surfaces (Motion, kit mirrors, template demos, AI cluster, RTL; Atomic View for gates)
 - Same `styles.css` as production
 - Addons: `@storybook/addon-docs` + `@storybook/addon-a11y` (essentials folded into core in SB10)
 
@@ -29,6 +31,7 @@ Storybook **10** is the **product site** for operators on `design.cyberskill.wor
 
 - `.storybook/main.js` — ESM Storybook 10 config, Vite + `@cs` → `components/` alias, **`base: '/'`** for domain-root assets
 - `.storybook/manager-head.html` — OG / canonical meta for the production `/` surface
+- `.storybook/preview.jsx` — `storySort` order: Docs · Foundations · Components · **Templates** · **Pages** · A11y · I18n · Release Notes · Status · Maintainer
 - Autodocs via `tags: ['autodocs']` on CSF meta (no `docs.autodocs` in main)
 
 ## What consumers still use (unchanged)
@@ -50,8 +53,9 @@ npm run storybook
 npm run build:storybook    # → storybook-static/ (base `/`)
 npm run build:site         # packages Storybook at .vercel-static/ root
 npm run test:storybook-contract
+node scripts/generate-template-stories.mjs   # refresh Templates/{Category} CSF from manifest
 ```
 
 ## Map
 
-Portable HTML surfaces iframed from Maintainer/* are listed in `docs/live-hub.md`. Status embeds `_audit/run.html` (auto-run on first load; **Re-run** on demand).
+Public Templates/Pages and Maintainer iframes are listed in `docs/live-hub.md`. HR Suite Word originals mapping: `docs/hr-suite-sources.md`. Status embeds `_audit/run.html` (auto-run on first load; **Re-run** on demand).

package/docs/vi/contrast-report.md

@@ -1,6 +1,6 @@
 # Báo cáo contrast — cặp elemental (APCA)
 
-Tạo · quét tại VERSION 1.3.11.
+Tạo · quét tại VERSION 1.4.0.
 
 Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 

package/docs/vi/conventions.md

@@ -32,13 +32,13 @@ Pack Style duy nhất hiện nay là **liquid-glass**. Bất biến dưới mọ
 
 **Component mới** — `Name.jsx` + `Name.d.ts` + `Name.prompt.md` trong `components/<group>/`; thêm vào card html của nhóm (resolve namespace bundle **theo prefix** — `const CS = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]` — không bao giờ hậu tố `…_<projectId>` hardcode); thêm vào dòng nhóm của readme. Chỉ consume token; không hex literal trừ trong `tokens/`.
 
-**Responsive** — reflow là global (`base/responsive.css`, load cuối): media không overflow, print docs nới padding, bảng `.cs-sheet` scroll, `.cs-sidebar` thu gọn, lưới cột cố định inline thu (3+→2 tablet, →1 phone), token dài không gãy (dòng write-on `______`, URL/ID dài) nhận `overflow-wrap: anywhere` trên bề mặt doc để không chống cột phone mở, shell grid app-shell thu một cột với `main{min-width:0}`+`.cs-table-wrap` scroll, và canvas export hình học cố định (`class="cs-canvas-desk"`: decks, social) **luôn** `overflow-x:auto` để slide rộng hơn cửa sổ scroll trong desk thay vì đẩy trang rộng. Đã verify whole-set ở 390 bởi `_audit/responsive-overflow.html` (cả 84 = 0 document overflow). **Hai gotcha cứng:** (1) DC runtime compile `style="…"` inline thành object React, nên attribute render *có khoảng* — mọi selector responsive `[style*=…]` phải khớp `grid-template-columns: repeat(4, 1fr)` (colon-space, comma-space), không bao giờ dạng không-space lúc author; (2) rule CSS global chỉ override property template đặt **inline** qua selector **attribute** (`[style*="grid-template-columns: 248px 1fr"]`) — selector **class** thua inline style. Ưu tiên sửa overflow trong source template (thêm `min-width:0`, `flex-wrap:wrap` inline) hơn đấu inline từ stylesheet.
+**Responsive** — reflow là global (`base/responsive.css`, load cuối): media không overflow, print docs nới padding, bảng `.cs-sheet` scroll, `.cs-sidebar` thu gọn, lưới cột cố định inline thu (3+→2 tablet, →1 phone), token dài không gãy (dòng write-on `______`, URL/ID dài) nhận `overflow-wrap: anywhere` trên bề mặt doc để không chống cột phone mở, shell grid app-shell thu một cột với `main{min-width:0}`+`.cs-table-wrap` scroll, và canvas export hình học cố định (`class="cs-canvas-desk"`: decks, social) **luôn** `overflow-x:auto` để slide rộng hơn cửa sổ scroll trong desk thay vì đẩy trang rộng. Đã verify whole-set ở 390 bởi `_audit/responsive-overflow.html` (cả 85 = 0 document overflow). **Hai gotcha cứng:** (1) DC runtime compile `style="…"` inline thành object React, nên attribute render *có khoảng* — mọi selector responsive `[style*=…]` phải khớp `grid-template-columns: repeat(4, 1fr)` (colon-space, comma-space), không bao giờ dạng không-space lúc author; (2) rule CSS global chỉ override property template đặt **inline** qua selector **attribute** (`[style*="grid-template-columns: 248px 1fr"]`) — selector **class** thua inline style. Ưu tiên sửa overflow trong source template (thêm `min-width:0`, `flex-wrap:wrap` inline) hơn đấu inline từ stylesheet.
 
 **Template mới** — `templates/<slug>/<Slug>.dc.html` với `<!-- @template name description -->` đầu tiên; `ds-base.js` giữ single-entry (`styles.css` thôi — rebind một dòng đã validate end-to-end Th7 2026 từ path sâu hơn; scaffold test đã gỡ) và publish alias độc lập-id `window.CyberSkillDS` lúc bundle load, nên mount DS component qua `component-from-global-scope="CyberSkillDS.…"` — **không bao giờ** hậu tố `CyberSkillDesignSystem_<projectId>` hardcode (đổi khi re-import; enforce bởi `_audit/namespace-portability.html`); chỉ inline styles; 1–3 tweaks (không plain copy/color — in-place editing phủ những cái đó); printable docs thêm khối print `@page` + `.cs-desk`/`.cs-sheet` và **không** mang dark tweak (print chỉ light).
 
 **Element variant mới** — ở trong envelope oklch của element; đặt 10 token hợp đồng `--cs-accent-*` (gồm `--cs-accent-on-strong` ≥4.5:1 trên `-strong`) cộng `--cs-color-text-accent`/`--cs-color-link` (APCA-check cả hai); aurora wash kế thừa từ element qua `.cs-aurora-wash` (chỉ override class rule nếu variant thật sự cần ảnh riêng); đối tác gradient (`grad-b`) phải theo Tương sinh.
 
-**Ship check** — chạy compiler check đến sạch, rồi chạy `_audit/docs-consistency.html` **và** `_audit/namespace-portability.html` (cả hai phải xanh). VERSION **1.3.11** (auto-bump trên `main`).
+**Ship check** — chạy compiler check đến sạch, rồi chạy `_audit/docs-consistency.html` **và** `_audit/namespace-portability.html` (cả hai phải xanh). VERSION **1.4.0** (auto-bump trên `main`).
 
 ## Decision log (owner duyệt)
 
@@ -116,7 +116,7 @@ Tiếng Việt là ngôn ngữ chính; hệ chữ xây cho nó — đã verify,
 
 ## Whole-set state audits — language · theme · responsive (mỗi cái một pass riêng, Th7 2026)
 
-Doctrine owner: language, theme, và responsive mỗi cái có pass whole-set RIÊNG; một state sạch không phải bằng chứng cho state khác. Cả ba giờ race-free, manifest-driven, gate pass/fail **all-84** trên cùng pattern — **fresh single-navigation iframe mỗi template** (tái dùng một iframe qua `src` swap race CSS `@import` và cho kết quả sai), state ép qua `__dcSetProps`, settle, rồi đo:
+Doctrine owner: language, theme, và responsive mỗi cái có pass whole-set RIÊNG; một state sạch không phải bằng chứng cho state khác. Cả ba giờ race-free, manifest-driven, gate pass/fail **all-85** trên cùng pattern — **fresh single-navigation iframe mỗi template** (tái dùng một iframe qua `src` swap race CSS `@import` và cho kết quả sai), state ép qua `__dcSetProps`, settle, rồi đo:
 - **Language** — `_audit/language-overflow.html` — ép `Tiếng Việt`; 0 VN overflow/clip @390; cũng assert VN thật sự áp dụng trên mọi template.
 
 - **Theme** — `_audit/theme-overflow.html` — ép dark; hard gate = dark-applies + 0 dark overflow @390 + 0 fail contrast leaf-text solid-bg mở ngoài `REVIEWED_OK`.

package/docs/vi/decisions.md

@@ -25,9 +25,10 @@ Giữ plan Figma hiện tại. Variables REST API chỉ Enterprise — job ghi *
 **Lựa chọn owner: Storybook là live hub duy nhất** (Th7 2026)
 
 - Operator dùng Storybook tại `/` cho Theme × Element × Language × Style và ma trận điều khiển component.
+- IA công khai theo đường duyệt atomic: Foundations → Components → **Templates** → **Pages** (Atoms/Molecules/Organisms vẫn trong CSF + Atomic View; Templates/Pages là nhóm sidebar hạng nhất, gồm cả bộ VN A4 / HR Suite).
 - Không có trang Live View riêng trong tree.
 - Legacy `/dashboard`, `/dashboard/`, `/dashboard.html`, `/dashboard/:path*`, `/playground`, `/playground/`, `/playground/:path*` redirect về `/`.
-- Atomic View portable và HTML tĩnh khác vẫn phục vụ gate zero-build và consumer; chúng không phải entry sản phẩm của site.
+- Atomic View portable và HTML tĩnh khác vẫn phục vụ gate zero-build và consumer; Atomic View cũng được nối từ **Templates → Gallery**.
 - Bản đồ bề mặt: `docs/live-hub.md`.
 
 ## 5. Hai nguồn token JSON

package/docs/vi/hr-suite-sources.md

@@ -0,0 +1,47 @@
+# Nguồn HR Suite (DOCX ↔ templates)
+
+Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
+
+## Quyết định
+
+**Instrument sống canonical là Design Component** dưới `templates/vn-*/*.dc.html` (cộng `doc-suite-index`, `doc-style-guide`, `doc-templates`). Google Drive / Word (`.docx` / `.dotx`) là **provenance nguồn**, không phải bề mặt sản phẩm Storybook.
+
+**Không** commit file Word binary lớn vào package design system. Giải nén local tùy chọn để diff:
+
+```bash
+# scraps/ đã gitignore
+mkdir -p scraps/hr-suite-docx
+unzip -O UTF-8 /path/to/Templates.zip -d scraps/hr-suite-docx
+```
+
+## Inventory (Templates.zip, Th7 2026)
+
+| Số | Loại |
+|---|---|
+| 40 | `.docx` instrument / hướng dẫn |
+| 1 | `.dotx` shell trình bày |
+| **41** | **tổng trong zip** |
+
+Cả **37** thư mục Employment Suite `templates/vn-*` từ zip map 1:1 với một `.docx`. Bốn file “0.” tham chiếu map tới template `doc-*`. Thêm **một** hợp đồng nguyên tắc thương mại (không nằm trong zip) tại `templates/vn-framework-agreement`.
+
+## Mapping
+
+Bảng đầy đủ (tiêu đề EN → path repo) nằm ở bản EN: `docs/hr-suite-sources.md`. Tóm tắt: mọi hợp đồng / chính sách / form Employment Suite trong zip khớp một `templates/vn-*`; index + style guide + usage guide khớp `templates/doc-*`.
+
+### Ngoài Templates.zip (thêm Th8 2026)
+
+| Nguồn | Path repo | Phân loại |
+|---|---|---|
+| `Hợp đồng Nguyên Tắc - CyberSkill - Ban QLDA Bình Quới.docx` (Downloads) | `templates/vn-framework-agreement` | **Thương mại** — khung cung cấp dịch vụ & tài khoản phần mềm (không phải vòng đời lao động). Cùng skin VN A4 (`vn-*`), hiện dưới **Templates → HR** nhờ tên catalog `HR Suite ·`; mục lục suite đặt ở Legal/client-facing. DOCX đã adapt (gitignore): `scraps/hr-suite-docx/Templates/9. Hợp đồng Nguyên Tắc - Framework Agreement (Software Services).docx` |
+
+## Duyệt trên Storybook
+
+- **Templates → Gallery → Atomic gallery** — tier Templates của Atomic View
+- **Templates → HR** — mọi instrument HR Suite / HR ops
+- **Templates → Documents** — suite index / style guide / document template
+
+## Trạng thái sync (Th8 2026)
+
+Zip ngày **2026-07-11**. Repo đã có `.dc.html` đã chuyển cho mọi instrument đã map. Thay đổi này **ghi nhận** map Drive/DOCX ↔ `vn-*` và đưa Templates lên Storybook; **không** re-import nội dung DOCX vào DC. Chỉ sync lại khi counsel/ops xác nhận Word lệch so với cây DC — rồi sửa `templates/vn-*/` tương ứng và regen CSF Storybook nếu đổi tên (`node scripts/generate-template-stories.mjs`).
+
+Vẫn cần counsel review trước khi dùng thật (instrument do client cung cấp; xem README / SKILL).

package/docs/vi/live-hub.md

@@ -4,38 +4,43 @@ Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 ## Quyết định
 
-**Storybook là live interactive hub duy nhất** cho operator trên `design.cyberskill.world`. Không có trang Live View riêng và không còn shell dashboard HTML làm sản phẩm. Production **`/`** là Storybook.
+**Storybook là live hub tương tác duy nhất** cho operator trên `design.cyberskill.world`. Không có trang Live View riêng và không có shell dashboard HTML sản phẩm riêng. Production **`/`** là Storybook.
 
 ## Sidebar IA
 
+Thứ tự duyệt atomic trên site sản phẩm: **Foundations → Components → Templates → Pages** (Atoms / Molecules / Organisms nằm trong Atomic View và CSF Components; Templates và Pages là nhóm sidebar hạng nhất).
+
 | Nhóm | Vai trò |
 |---|---|
-| **Docs** | Docs operator đã xuất bản: **Start** (Introduction, README, SKILL, Contributing, llms, Library) · **Guides** (consuming, grant, deploy, schema, conventions, styles, products, Figma, contrast, storybook, live-hub, runbook phát hành, benchmark, …) · **Maintainers** (học thuyết, decisions, CI/CD, quality gates, sync). MDX curated cộng một mục sidebar mỗi trang tracked. EN·VI qua Thư viện tài liệu (`/docs/viewer.html`) |
-| **Foundations** | Colors, typography, spacing, elevation, motion, elements |
+| **Docs** | Docs operator đã xuất bản: **Start** (Introduction, README, SKILL, Contributing, llms, Library) · **Guides** (consuming, grant, deploy, schema, conventions, styles, products, Figma, contrast, storybook, live-hub, nguồn HR Suite, runbook phát hành, benchmark, …) · **Maintainers** (học thuyết, decisions, CI/CD, quality gates, sync). MDX curated cộng một mục sidebar mỗi trang tracked. EN·VI qua Thư viện tài liệu (`/docs/viewer.html`) |
+| **Foundations** | Màu, chữ, spacing, elevation, motion, elements |
 | **Components** | Thư viện CSF đầy đủ |
+| **Templates** | Điểm bắt đầu công khai: **Gallery** (Atomic View → tier Templates, kitchen-sink, playground) cộng mọi template `_ds_manifest.json` nhóm như Atomic View (Product · Board · … · **HR** Suite · Documents). Gồm cả 38 instrument `vn-*` A4 (Employment Suite + hợp đồng nguyên tắc thương mại) |
+| **Pages** | UI kit — Status Hub, Marketing site, Slide deck |
 | **Release Notes** | Prose sản phẩm curated (**không CHANGELOG.md**) |
-| **Status** | Nhúng full-bleed `_audit/run.html` (auto-run lần đầu; **Re-run** khi cần) |
+| **Status** | Embed full-bleed `_audit/run.html` (tự chạy lần đầu; **Re-run** khi cần) |
 | **A11y / I18n** | Specimen a11y + song ngữ |
-| **Maintainer** | Iframe HTML portable cho gates (Atomic View chôn ở đây — không phải entry công khai top-level) |
+| **Maintainer** | Iframe HTML portable cho gates và demo (Motion, mirror kit, demo template, RTL, Atomic View cho gates) |
 
 ## Bề mặt
 
 | Bề mặt | Vai trò |
 |---|---|
-| **Storybook** (`/`) | Bề mặt sản phẩm host: toolbar Theme × Element × Language × Style, Docs/Foundations/Components/Release Notes/Status, và Maintainer/* iframe vào HTML portable |
-| **Atomic View** (`guidelines/atomic-view.html`) | Lưới component zero-build portable cho gates và duyệt clone-and-open — không phải entry sản phẩm công khai |
-| **Guidelines / templates khác** | Specimen portable; mở từ Storybook Maintainer/* khi khám phá Motion, index Status Hub / Website / Deck, kitchen-sink, v.v. |
-| **Legacy `/dashboard`, `/dashboard/`, `/dashboard.html`, `/dashboard/:path*`, `/playground`, `/playground/`, `/playground/:path*`** | Redirect về `/` (stub + redirect Vercel) |
+| **Storybook** (`/`) | Bề mặt sản phẩm host: toolbar Theme × Element × Language × Style, Docs/Foundations/Components/**Templates**/**Pages**/Release Notes/Status, và Maintainer/* iframe vào HTML portable |
+| **Atomic View** (`guidelines/atomic-view.html`) | Trình duyệt atomic zero-build portable (Atoms → Molecules → Organisms → Templates → Pages). Công khai qua **Templates → Gallery → Atomic gallery**; cũng dưới Maintainer cho gates / clone-and-open |
+| **Guidelines / templates khác** | Specimen portable; mở từ Storybook Templates/*, Pages/*, hoặc Maintainer/* |
+| **Legacy `/dashboard`, `/dashboard/`, `/dashboard.html`, `/dashboard/:path*`, `/playground`, `/playground/`, `/playground/:path*`** | Redirect về `/` (stub + Vercel redirects) |
 
-## Bản đồ bề mặt (story Maintainer/*)
+## Bản đồ bề mặt (công khai + Maintainer)
 
-| Storybook entry | Portable HTML |
+| Entry Storybook | HTML portable |
 |---|---|
 | Components/* CSF | Nguồn React dưới `components/` |
+| Templates/Gallery → Atomic gallery | `guidelines/atomic-view.html#tier-templates` |
+| Templates/{Category}/* | `templates/**/*.dc.html` qua `_ds_manifest.json` (regen: `node scripts/generate-template-stories.mjs`) |
+| Pages → Status Hub / Marketing site / Slide deck | `ui_kits/status-hub|website|deck/index.html` |
 | Maintainer/Surfaces → Motion | `guidelines/motion.html` |
-| Maintainer/Surfaces → Status Hub | `ui_kits/status-hub/index.html` |
-| Maintainer/Surfaces → Website | `ui_kits/website/index.html` |
-| Maintainer/Surfaces → Deck | `ui_kits/deck/index.html` |
+| Maintainer/Surfaces → Status Hub / Website / Deck | cùng UI kit (mirror maintainer) |
 | Maintainer/Surfaces → Template Playground | `templates/playground.html` |
 | Maintainer/Surfaces → Kitchen Sink | `templates/kitchen-sink.html` |
 | Maintainer/Surfaces → Image Slots | `templates/image-slots-demo.html` |
@@ -46,9 +51,9 @@ Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 ## Hành vi Status
 
-- Mở Status load `_audit/run.html`, **auto-run** bảng gate nhanh một lần.
-- Storybook có thể giữ iframe cache khi điều hướng đi rồi về — **không** tự chạy lại im lặng.
-- Dùng nút **Re-run** trên board để chạy lại (mỗi gate iframe được cache-bust).
+- Mở Status tải `_audit/run.html`, **tự chạy** board nhanh một lần.
+- Storybook có thể giữ iframe cache khi điều hướng đi rồi về — **không** tự chạy lại gates.
+- Dùng nút **Re-run** trên board để pass mới (mỗi iframe gate được cache-bust).
 
 ## Consumer portable (không đổi)
 
@@ -60,3 +65,5 @@ Consumer vẫn link `styles.css` / `_ds_bundle.js` / ESM / templates. **Không**
 npm run storybook          # Storybook sản phẩm tại http://localhost:6006
 npm run build:site         # đóng gói Storybook tại .vercel-static/ (root `/`)
 ```
+
+Mở **Templates → Gallery → Atomic gallery** hoặc **Templates → HR → …** cho Employment Suite.

package/docs/vi/quality-gates.md

@@ -41,9 +41,9 @@ Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở r
 | A11y interactions | `_audit/a11y-gate.html` | Focus trap/restore, roving, Mentions APG + Sortable buttons (hard-fail), role/label, open-state Esc | Mọi assert keyboard/ARIA pass (`__a11y`) | Hard | Fast board CI |
 | A11y CSSOM | `_audit/a11y-harness.html` | Mọi control `.cs-*` tương tác đạt floor touch-target đã ghi dưới coarse pointer; focus-ring, reduced-motion, và contrast rule chứng minh trong source CSS | 0 vi phạm floor, mọi source proof tìm thấy (`__a11ycss`) | Hard | Fast board CI |
 | Template schema v2 | `_audit/template-schema-test.html` | Mọi sidecar `content-schema.json` validate theo JSON Schema, mọi slot id khai báo resolve tới `{{ hole }}` thật trong template, và mọi template lộ **content** hole author được đều có sidecar (hole trục/control-flow và tweak boolean được loại trừ — xem `docs/template-schema-v2.md`) | 0 sidecar invalid, 0 slot id treo, 0 template hole-driven thiếu sidecar (`__schemav2`) | Hard | Fast board CI |
-| Support runtime identity | `_audit/support-runtime-identity.html` | Mọi bản `templates/*/support.js` (một mỗi template, 84) byte-identical: sha-256 qua SubtleCrypto, đúng một hash duy nhất, số bản == số template manifest | 1 hash duy nhất, count khớp (`__supportid`) | Hard | Fast board CI |
+| Support runtime identity | `_audit/support-runtime-identity.html` | Mọi bản `templates/*/support.js` (một mỗi template, 85) byte-identical: sha-256 qua SubtleCrypto, đúng một hash duy nhất, số bản == số template manifest | 1 hash duy nhất, count khớp (`__supportid`) | Hard | Fast board CI |
 | Bilingual parity | `_audit/bilingual-parity.html` | Mọi component trong `components/_i18n/strings.js` có bảng en + vi với key set bằng nhau và không giá trị rỗng | 0 key thiếu/thừa, 0 giá trị rỗng (`__bilingual`) | Hard | Fast board CI + merge blocker |
-| Template language parity | `_audit/template-lang-parity.html` | Quét source tĩnh cả 84 `.dc.html`: en/vi hole-map key set giống và không rỗng (21 map template); nhánh `sc-if` `isEN`/`isVN` cặp (24 branch template); mọi template có language-tweak có cơ chế bilingual; lexicon EN-leak (Unsubscribe · View in browser · Preferences · All rights reserved · Manage subscription · Sent with) không bao giờ xuất hiện ngoài guard `isEN` / map `en`. Instrument VN-first stacked (37 `vn-*` + 3 `doc-*`) miễn leak theo thiết kế — cả hai ngôn ngữ luôn render | 0 key drift, 0 nhánh không cặp, 0 leak (`__langparity`) | Hard | Fast board CI |
+| Template language parity | `_audit/template-lang-parity.html` | Quét source tĩnh cả 85 `.dc.html`: en/vi hole-map key set giống và không rỗng (21 map template); nhánh `sc-if` `isEN`/`isVN` cặp (24 branch template); mọi template có language-tweak có cơ chế bilingual; lexicon EN-leak (Unsubscribe · View in browser · Preferences · All rights reserved · Manage subscription · Sent with) không bao giờ xuất hiện ngoài guard `isEN` / map `en`. Instrument VN-first stacked (38 `vn-*` + 3 `doc-*`) miễn leak theo thiết kế — cả hai ngôn ngữ luôn render | 0 key drift, 0 nhánh không cặp, 0 leak (`__langparity`) | Hard | Fast board CI |
 | APCA dark packs | `_audit/apca-dark-preview.html` | Cả 15 pack element×variant giữ mục tiêu APCA ở dark (bright-as-text ≥ 75, accent UI ≥ 60, ink-on-accent ≥ 75, ink-on-tint ≥ 75) | 0 fail hiện tại (`__apcaPreview.currentFail === 0`) | Hard | Fast board CI |
 | Element geometry | `_audit/element-geometry.html` | Sync cường độ soft/middle/deep giữa năm element; tách variant; khóa hue light↔dark; Thổ middle ghim ochre logo; pack generate từ seed | `__elementgeometry.pass` | Hard | Fast board CI |
 | Style contract | `_audit/style-contract.html` | Allowlist trục Style: sole pack `liquid-glass` (vắng ≡ mặc định); `styles.css` import `tokens/styles.css`; `--cs-style-pack` resolve; không `data-cs-style` lạ | `__stylecontract.pass` | Hard | Fast board CI |
@@ -57,7 +57,7 @@ Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở r
 
 | Gate | File | Assert gì | Tiêu chí pass | Loại | Chạy ở đâu |
 |---|---|---|---|---|---|
-| Responsive overflow | `_audit/responsive-overflow.html` | Mọi template (84) + 3 UI kit render ở 390 px không horizontal document overflow | 0 bề mặt overflow (`__overflow`) | Hard | Whole-set CI (mọi PR + nightly) |
+| Responsive overflow | `_audit/responsive-overflow.html` | Mọi template (85) + 3 UI kit render ở 390 px không horizontal document overflow | 0 bề mặt overflow (`__overflow`) | Hard | Whole-set CI (mọi PR + nightly) |
 | Language overflow | `_audit/language-overflow.html` | Cùng set ép Tiếng Việt: VN áp dụng, không overflow, không clip chữ trong hộp fixed/nowrap, và chuỗi EN built-in đã biết (hint PromptInput, FileUpload, pin DataGrid, …) không rò | 0 over/clip/EN-leak (`__language`) | Hard | Whole-set CI (mọi PR + nightly) |
 | Theme overflow | `_audit/theme-overflow.html` | Cùng set ép dark: dark áp dụng, không document overflow, và không fail WCAG leaf-text solid-bg tái lập được ngoài `REVIEWED_OK` | Dark áp dụng + 0 overflow + 0 contrast mở (`__theme`) | Hard (chỉ near-miss allowlist) | Whole-set CI (mọi PR + nightly) |
 

package/docs/vi/release-notes.md

@@ -1,6 +1,6 @@
 # Ghi chú phát hành
 
-Điểm nổi bật sản phẩm cho operator — **không** phải git log và **không** phải `CHANGELOG.md`. Hệ thống thiết kế không maintain file changelog. VERSION **1.3.11** (auto-bump khi push lên `main` từ Conventional Commits; owner vẫn có thể force bump). Chân lý kỹ thuật là tip repo; chân lý hướng sản phẩm là trang này (đồng bộ Storybook **Release Notes**). Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
+Điểm nổi bật sản phẩm cho operator — **không** phải git log và **không** phải `CHANGELOG.md`. Hệ thống thiết kế không maintain file changelog. VERSION **1.4.0** (auto-bump khi push lên `main` từ Conventional Commits; owner vẫn có thể force bump). Chân lý kỹ thuật là tip repo; chân lý hướng sản phẩm là trang này (đồng bộ Storybook **Release Notes**). Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 ## Release — `@cyberskill/design@1.3.10`
 

package/docs/vi/storybook.md

@@ -1,6 +1,6 @@
 # Storybook — bề mặt sản phẩm tại `/` (host)
 
-Storybook **10** là **site sản phẩm** cho operator trên `design.cyberskill.world` (`/`). Nó vẫn **không** thuộc hợp đồng consumer portable. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
+Storybook **10** là **site sản phẩm** cho operator trên `design.cyberskill.world` (`/`). Vẫn **không** thuộc hợp đồng consumer portable. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 ## URL
 
@@ -14,44 +14,48 @@ Storybook **10** là **site sản phẩm** cho operator trên `design.cyberskill
 ## Nội dung
 
 - CSF component đầy đủ với **Default + ma trận điều khiển sâu** (`Matrix` / `AllVariants`)
-- **CSF bar (exhaustive khi các trục tồn tại):**
-  - `AllSizes` khi `argTypes.size` tồn tại (token ramp hoặc size số đại diện)
-  - `States` (hoặc subsection Matrix) phủ `disabled` / `loading` / `error` / `busy` khi các argTypes đó tồn tại
-  - Mọi option enum `size` / `variant` rời rạc được mount trong story họ matrix
-  - `FullMatrix` khi ≥1 trong {size enums, variant enums, state keys} tồn tại — tích size × variant × key-state qua helper chung `stories/lib/matrix.jsx`
-- Toolbar globals: Theme (light · dark · **system**) × Element × Language × Style (cùng trục với template / Atomic View). Element liệt kê **đủ 15** pack Ngũ Hành (`tokens.elements` / EL map template / Storybook toolbar) — không phải tập con. Pack Style duy nhất là **liquid-glass**.
-- **Docs/** tài liệu operator đã xuất bản — lồng **Start / Guides / Maintainers**, MDX curated cho trang traffic cao, một story sidebar mỗi trang markdown tracked, và iframe Thư viện tài liệu `/docs/viewer.html` (EN·VI). Prose chuẩn vẫn là `docs/*.md`; Storybook là bề mặt đọc sống. **Release Notes/** prose sản phẩm curated (**không CHANGELOG.md**); **Status/** nhúng `_audit/run.html` full-bleed
-- Story **Maintainer/** cho bề mặt HTML portable (Motion, templates, kitchen-sink, AI cluster, RTL; Atomic View chôn cho gates)
-- Cùng `styles.css` như production
-- Addon: `@storybook/addon-docs` + `@storybook/addon-a11y` (essentials gộp vào core ở SB10)
+- **CSF bar (exhaustive khi có trục):**
+  - `AllSizes` khi có `argTypes.size`
+  - `States` (hoặc subsection Matrix) cho `disabled` / `loading` / `error` / `busy` khi có argTypes
+  - Mọi option enum `size` / `variant` gắn trong story họ matrix
+  - `FullMatrix` khi ≥1 trong {size enums, variant enums, state keys} — tích size × variant × key-state qua helper `stories/lib/matrix.jsx`
+- Toolbar globals: Theme (light · dark · **system**) × Element × Language × Style (cùng trục với templates / Atomic View). Element liệt kê **đủ 15** pack Ngũ Hành. Style chỉ có **liquid-glass**.
+- **Docs/** tài liệu operator đã xuất bản — **Start / Guides / Maintainers**, MDX curated, một story sidebar mỗi trang markdown tracked, và iframe Thư viện tài liệu `/docs/viewer.html` (EN·VI). Prose canonical vẫn `docs/*.md`. **Release Notes/** prose curated (**không CHANGELOG.md**); **Status/** embed `_audit/run.html` full-bleed
+- **Templates/** điểm bắt đầu công khai — Gallery (tier Templates của Atomic View + kitchen-sink/playground) và mọi template manifest theo category Atomic View (gồm **HR** / `vn-*`). Regen CSF bằng `node scripts/generate-template-stories.mjs` sau khi đổi tên template
+- **Pages/** UI kit công khai (Status Hub, Marketing site, Slide deck)
+- **Maintainer/** story cho HTML portable (Motion, mirror kit, demo template, AI cluster, RTL; Atomic View cho gates)
+- Cùng `styles.css` production
+- Addon: `@storybook/addon-docs` + `@storybook/addon-a11y`
 
 ## Config
 
-- `.storybook/main.js` — config Storybook 10 ESM, Vite + alias `@cs` → `components/`, **`base: '/'`** cho asset tại domain root
-- `.storybook/manager-head.html` — meta OG / canonical cho bề mặt production `/`
-- Autodocs qua `tags: ['autodocs']` trên CSF meta (không `docs.autodocs` trong main)
+- `.storybook/main.js` — ESM Storybook 10, Vite + alias `@cs` → `components/`, **`base: '/'`**
+- `.storybook/manager-head.html` — meta OG / canonical cho `/` production
+- `.storybook/preview.jsx` — thứ tự `storySort`: Docs · Foundations · Components · **Templates** · **Pages** · A11y · I18n · Release Notes · Status · Maintainer
+- Autodocs qua `tags: ['autodocs']` trên CSF meta
 
 ## Consumer vẫn dùng (không đổi)
 
-| Audience | Consume |
+| Đối tượng | Tiêu thụ |
 |---|---|
-| Static / bất kỳ framework | `styles.css` + `.cs-*` |
+| Static / mọi framework | `styles.css` + `.cs-*` |
 | React production | `styles.css` + `_ds_bundle.js` |
-| ESM (bundler) | `_esm/react.mjs` (mặc định / `@cyberskill/design/react`) |
-| ESM (browser legacy) | `_esm/cs.mjs` (`@cyberskill/design/legacy`) |
+| ESM (bundler) | `_esm/react.mjs` |
+| ESM (browser legacy) | `_esm/cs.mjs` |
 | Tokens | `tokens/*` |
-| DC-capable authoring | `templates/**/*.dc.html` |
+| Authoring DC | `templates/**/*.dc.html` |
 
 ## Lệnh
 
 ```bash
 npm install
 npm run storybook
-npm run build:storybook    # → storybook-static/ (base `/`)
-npm run build:site         # đóng gói Storybook tại root .vercel-static/
+npm run build:storybook
+npm run build:site
 npm run test:storybook-contract
+node scripts/generate-template-stories.mjs
 ```
 
 ## Bản đồ
 
-Bề mặt HTML portable iframe từ Maintainer/* được liệt kê trong `docs/live-hub.md`. Status nhúng `_audit/run.html` (auto-run lần đầu; **Re-run** khi cần).
+Templates/Pages công khai và iframe Maintainer nằm trong `docs/live-hub.md`. Map Word gốc HR Suite: `docs/hr-suite-sources.md`. Status embed `_audit/run.html`.