@cyberskill/design 1.3.10 → 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.10).
+// 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.10";
+export const VERSION = "1.4.0";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;

package/docs/benchmark-rubric.md

@@ -23,7 +23,7 @@ Self-audit checklist for evolving CyberSkill Design System — external standard
 | One element per surface; Tương sinh gradients only | products registry · conventions |
 | Product→element registry locked; UI kits Thổ-faithful | [`docs/products.md`](products.md) |
 | Expansion Rule completeness + `_audit/run.html` green + docs EN·VI parity | `docs/doctrine.md` · docs-consistency · docs-lang-parity · docs-storybook-coverage |
-| VERSION tracks file (auto-bump on main; first LAUNCH was 1.1.0) | version-stamp · docs-consistency |
+| VERSION tracks file (auto-bump on main) | version-stamp · docs-consistency |
 | Element packs from seeds only (30 sets) | `element-geometry` · `tokens:elements` |
 
 ## Style expansion checklist (`data-cs-style`)

package/docs/consuming.md

@@ -19,7 +19,7 @@ You are installing, linking, or upgrading the system in another product. Maintai
 
 **Stitch DC rule:** Stitch (and any non-DC tool) must **not** consume `*.dc.html` as source of truth. Use static export patterns, `templates/kitchen-sink.html`, `examples/static-hello/`, and `.cs-*` classes from `styles.css`.
 
-**Release signal:** **pin tracks `VERSION`** (auto-bump on `main`; first LAUNCH was **1.1.0**; no CHANGELOG). Treat the **git tip SHA** as technical truth; read curated product highlights in `docs/release-notes.md`.
+**Release signal:** `VERSION` (auto-bump on `main`; no CHANGELOG). Treat the **git tip SHA** as technical truth; read curated product highlights in `docs/release-notes.md`.
 
 ## Quick path for AI agents (DC-capable authoring, or driving one)
 
@@ -42,7 +42,7 @@ You are installing, linking, or upgrading the system in another product. Maintai
 
 ## Adopt via npm (optional)
 
-The package is publishable (`private: false`; version equals root `VERSION`). License remains **UNLICENSED** — installing from the registry does **not** grant redistribution rights by itself. **LAUNCH was `@cyberskill/design@1.1.0`; pin follows `VERSION` thereafter** (auto-bump on `main` creates tag `vX.Y.Z`, which fires `npm-publish.yml`). CI publishes via **npm Trusted Publishing (OIDC)** (no long-lived publish token; package Publishing access **disallows tokens**). Approved use is recorded in **`docs/consumer-grant.md`** (CyberSkill portfolio products from `docs/products.md`). See `docs/decisions.md` and `docs/ci-cd.md`.
+The package is publishable (`private: false`; version equals root `VERSION`). License remains **UNLICENSED** — installing from the registry does **not** grant redistribution rights by itself. **Package version equals root `VERSION`** (auto-bump on `main` creates tag `vX.Y.Z`, which fires `npm-publish.yml`). CI publishes via **npm Trusted Publishing (OIDC)** (no long-lived publish token; package Publishing access **disallows tokens**). Approved use is recorded in **`docs/consumer-grant.md`** (CyberSkill portfolio products from `docs/products.md`). See `docs/decisions.md` and `docs/ci-cd.md`.
 
 **Consumer grant (owner policy — not a secret).** Written and in force at `docs/consumer-grant.md` (+ `docs/vi/consumer-grant.md`). External teams need a dated stanza appended there; redistribution outside granted products needs a further written grant.
 

package/docs/contrast-report.md

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

package/docs/conventions.md

@@ -4,7 +4,7 @@ For humans and agents *extending this system*. (Consumers: read `SKILL.md`.) Exp
 
 ## The expansion rule
 
-**When anything grows, everything updates in the same change.** A new element/variant, icon, component, token role, language, or template pattern must propagate to: tokens/source → specimen cards (guidelines + the component group card) **and related guideline pages** → component contract trio (`.jsx` + `.d.ts` + `.prompt.md`) → **all** templates (tweak enums and maps) → Storybook toolbar / Atomic View → docs (README counts, SKILL, **and every related document the change touches** — kit READMEs, registry, contrast report regenerated after token changes). **`VERSION` auto-bumps on push to `main`** (Conventional Commits); owner may still force a bump. **Do not maintain a changelog** — pin tracks `VERSION` (auto-bump on `main`; first LAUNCH was **1.1.0**). Continuity is git history plus curated **Release Notes** (`docs/release-notes.md` / Storybook). Gate every expansion with the compiler check **and a grep for the old enum/list** — nothing ships half-propagated. Documented scope boundaries (doctrine, not gaps): UI-kit pages stay pixel-faithful Thổ recreations (axes demoed in Storybook toolbar and Atomic View); every template is bilingual EN·VN and English-default (client/media collateral stays English-primary), and language variants render **fully separated** — see the decision log.
+**When anything grows, everything updates in the same change.** A new element/variant, icon, component, token role, language, or template pattern must propagate to: tokens/source → specimen cards (guidelines + the component group card) **and related guideline pages** → component contract trio (`.jsx` + `.d.ts` + `.prompt.md`) → **all** templates (tweak enums and maps) → Storybook toolbar / Atomic View → docs (README counts, SKILL, **and every related document the change touches** — kit READMEs, registry, contrast report regenerated after token changes). **`VERSION` auto-bumps on push to `main`** (Conventional Commits); owner may still force a bump. **Do not maintain a changelog** — `VERSION` (auto-bump on `main`). Continuity is git history plus curated **Release Notes** (`docs/release-notes.md` / Storybook). Gate every expansion with the compiler check **and a grep for the old enum/list** — nothing ships half-propagated. Documented scope boundaries (doctrine, not gaps): UI-kit pages stay pixel-faithful Thổ recreations (axes demoed in Storybook toolbar and Atomic View); every template is bilingual EN·VN and English-default (client/media collateral stays English-primary), and language variants render **fully separated** — see the decision log.
 
 ## The four axes
 
@@ -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). Pin tracks `VERSION` (auto-bump on `main`; first LAUNCH was **1.1.0**).
+**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
@@ -50,7 +51,7 @@ Stay on the current Figma plan. Variables REST API is Enterprise-only — write
 
 ## 7. npm publish — live via Trusted Publishing (OIDC)
 
-**Status: LAUNCHED `@cyberskill/design@1.1.0`; pin tracks `VERSION` (auto-bump on main since Aug 2026); CI publish uses npm Trusted Publishing; tokens disallowed** (Jul 2026; LAUNCH 2026-07-27)
+**Status: LAUNCHED `@cyberskill/design@1.1.0`; thereafter `VERSION` auto-bumps on main (since Aug 2026); CI publish uses npm Trusted Publishing; tokens disallowed** (Jul 2026; LAUNCH 2026-07-27)
 
 - `package.json` is `private: false`; package name **`@cyberskill/design`** (`publishConfig.access: public`); `repository.url` matches this GitHub repo for provenance.
 - Workflow `.github/workflows/npm-publish.yml`: `id-token: write` + GitHub-hosted runner; **no** `NPM_TOKEN` / `NODE_AUTH_TOKEN` on the publish step (OIDC). npm Trusted Publisher must list workflow filename **`npm-publish.yml`** for `cyberskill-official/design` (FIND-088). Soft-skip only for expected no-ops (`already_published` / EPUBLISHCONFLICT, and true non-GHA `missing_secrets`). On GHA tag / `workflow_dispatch`, **ENEEDAUTH** / **404** / **402** / **403** / **EOTP** fail the job; a successful publish is gated by post-publish `npm view @cyberskill/design@VERSION` **and** `dist-tags.latest === VERSION` (FIND-020 / FIND-094).
@@ -77,7 +78,7 @@ Recorded Jul 2026 — unlock defaults (updated as operator steps land):
 
 - **Figma Variables** — stay Tokens Studio / non-Enterprise (decision §3). Soft-skip on Variables REST remains honest.
 - **Code Connect** — **skipped while on Figma free**; revisit only after Org + published library + real `nodeId`s (decision §6). Soft-skip ≠ publish.
-- **npm** — **LAUNCH `@cyberskill/design@1.1.0`**; pin tracks `VERSION` (auto-bump on `main` → tag `v*` → Trusted Publishing); CI uses **Trusted Publishing (OIDC)** via `npm-publish.yml`; npmjs **disallow tokens**; consumer grant in force at `docs/consumer-grant.md` (decision §7). Default package entry is bundler-native `_esm/react.mjs` (React peer); browser path is `@cyberskill/design/legacy` → `_esm/cs.mjs` (decision §10).
+- **npm** — **LAUNCH `@cyberskill/design@1.1.0`**; thereafter `VERSION` auto-bumps on `main` → tag `v*` → Trusted Publishing; CI uses **Trusted Publishing (OIDC)** via `npm-publish.yml`; npmjs **disallow tokens**; consumer grant in force at `docs/consumer-grant.md` (decision §7). Default package entry is bundler-native `_esm/react.mjs` (React peer); browser path is `@cyberskill/design/legacy` → `_esm/cs.mjs` (decision §10).
 
 ## 10. Bundler-native React export (Next / SSR)
 

package/docs/doctrine.md

@@ -20,7 +20,7 @@ When **anything** in this system grows, update **every deliverable in the same c
 2. Specimen cards (guidelines plus the component group card) **and any related guideline pages**.
 3. **All** templates (tweak enums, EL/EX maps, swept accents).
 4. UI kits — Thổ-faithful kit pages; axis demos via Storybook toolbar and Atomic View (Identity Lab is retired).
-5. Docs: README (counts follow the compiler), `SKILL.md`, this file, `docs/conventions.md`, **and every related document the change touches** (kit READMEs, `docs/products.md`, `docs/contrast-report.md` regeneration after token changes). Publish the same pages through Storybook Docs (see `docs/storybook.md`). **`VERSION` auto-bumps on push to `main`** from Conventional Commits (`.github/workflows/version.yml` → tag `v*` → `npm-publish.yml`); the owner may still force a bump via `Release-As:` / `workflow_dispatch`. **Do not maintain a changelog file** — pin tracks `VERSION` (auto-bump on `main`; first LAUNCH was **1.1.0**). Continuity is git history plus curated Release Notes.
+5. Docs: README (counts follow the compiler), `SKILL.md`, this file, `docs/conventions.md`, **and every related document the change touches** (kit READMEs, `docs/products.md`, `docs/contrast-report.md` regeneration after token changes). Publish the same pages through Storybook Docs (see `docs/storybook.md`). **`VERSION` auto-bumps on push to `main`** from Conventional Commits (`.github/workflows/version.yml` → tag `v*` → `npm-publish.yml`); the owner may still force a bump via `Release-As:` / `workflow_dispatch`. **Do not maintain a changelog file** — `VERSION` (auto-bump on `main`). Continuity is git history plus curated Release Notes.
 6. Browsable and health surfaces: a new or changed component gets an Atomic View story in `guidelines/atomic-view.html` (plus a live playground if it has tweakable props — `_audit/story-coverage.html` enforces the story) and behavior coverage in `_audit/component-behavior-test.html` if interactive; any new axis, tool, or tab is wired into `_audit/index.html` and Storybook **Status** (full-bleed `_audit/run.html` — `dashboard.html` is redirect-only); the matching deterministic gate is added or updated (`contrast-guard` for new colour rules, `token-contract` plus the contrast matrix for tokens, `story-coverage` for components, `docs-storybook-coverage` for published docs).
 
 **Gate:** `check_design_system` clean (compiler sessions only) **plus** `_audit/run.html` (all fast gates) green **plus** `docs-consistency` green **plus** a grep for the old enum or list to prove nothing was left behind. On a portable clone, the equivalent is the fast board plus `npm run test:unit`.

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

@@ -13,13 +13,13 @@ Benchmark principles (WCAG · APCA · OKLCH · DTCG · CDS doctrine + style expa
 | Contrast guard | `_audit/contrast-guard.html` | No base rule paints umber on a themeable surface without a dark override; every semantic text×surface pair scores in light and dark | 0 unshielded rules and 0 failing pairs (`__contrastguard`) | Hard | Fast board CI |
 | Axes guard | `_audit/axis-guard.html` | No live source reintroduces the retired Expression/Density product surface | 0 hits across manifest-indexed sources (`__axisguard`) | Hard | Fast board CI |
 | Manifest CSS paths | `_audit/manifest-css-guard.html` | Every `_ds_manifest.json` `globalCssPaths` entry exists as raw CSS; every `styles.css` `@import` is listed | 0 missing / 0 unlisted (`__cssguard`) | Hard | Fast board CI |
-| Docs consistency | `_audit/docs-consistency.html` | Every count claim in README/SKILL/llms.txt matches the compiler manifest; audit prose card-count claims (`_audit/index` / README / namespace-portability) match `manifest.cards`; `VERSION` is semver and `package.json` matches it (pin tracks file; auto-bump on main; first LAUNCH was 1.1.0); no changelog-file reference; stale-phrase blacklist (the retired suite/pack counts the Jul 2026 audit removed) clean across README/SKILL/llms + `docs/*.md` (historical notes under `_audit/archive/` are not scanned); `DESIGN.md` exists with front-matter version = `VERSION`; agent routing honesty — SKILL/llms cite `_esm/cs.mjs` + bundle prefix; Stitch path forbids `*.dc.html` as SoT; package name `@cyberskill/design`; doctrine↔source parity — 10 accent roles incl. `on-strong`, full depth scale, default lang `vi` vs `i18n.js`, breakpoint CSS↔JSON, `base/` depth fallbacks vs `elevation.css` | 0 mismatched claims, 0 blacklist hits, VERSION sync + stamp + routing + doctrine parity intact (`__docs`) | Hard | Fast board CI + merge blocker |
+| Docs consistency | `_audit/docs-consistency.html` | Every count claim in README/SKILL/llms.txt matches the compiler manifest; audit prose card-count claims (`_audit/index` / README / namespace-portability) match `manifest.cards`; `VERSION` is semver and `package.json` matches it (auto-bumps on main); no changelog-file reference; stale-phrase blacklist (the retired suite/pack counts the Jul 2026 audit removed) clean across README/SKILL/llms + `docs/*.md` (historical notes under `_audit/archive/` are not scanned); `DESIGN.md` exists with front-matter version = `VERSION`; agent routing honesty — SKILL/llms cite `_esm/cs.mjs` + bundle prefix; Stitch path forbids `*.dc.html` as SoT; package name `@cyberskill/design`; doctrine↔source parity — 10 accent roles incl. `on-strong`, full depth scale, default lang `vi` vs `i18n.js`, breakpoint CSS↔JSON, `base/` depth fallbacks vs `elevation.css` | 0 mismatched claims, 0 blacklist hits, VERSION sync + stamp + routing + doctrine parity intact (`__docs`) | Hard | Fast board CI + merge blocker |
 | Asset-weight budget | `_audit/asset-weight-budget.html` | Elemental aurora WebPs (`assets/aurora-{tho,hoa,thuy,moc,kim}.webp`) stay under regression ceilings (≤300 KB each, ≤1.2 MB set); legacy aurora PNGs fail; wash CSS must not point at the Thổ JPEG | All five present under ceilings (`__assetweight`) | Hard | Fast board CI (+ Node twin in `test-docs-consistency.mjs`) |
 | Docs language parity | `_audit/docs-lang-parity.html` | Every operator-facing EN `docs/*.md` has a `docs/vi/` counterpart; VI is not an empty/TODO stub (≥40% EN length); stale-phrase blacklist clean on both EN and VI (historical notes under `_audit/archive/` are not tracked) | 0 missing pairs, 0 stubs, 0 blacklist hits (`__docslangparity`) | Hard | Fast board CI |
 | Docs Storybook coverage | `_audit/docs-storybook-coverage.html` | Live HTML: published catalog + `/docs/**` + viewer + entrance files; Storybook `index.json` titles when present (never unpublished `.storybook/` / `stories/`). Node twin: CSF/MDX source + `staticDirs` | 0 missing published pages / viewer entries (`__docssbcoverage`) | Hard | Fast board CI + unit twin |
 | Docs link check | `_audit/docs-link-check.html` | Live HTML: published markdown + viewer links resolve; no retired paths. Node twin also scans unpublished MDX `href`/`src` | 0 broken in-repo links (`__docslinkcheck`) | Hard | Fast board CI + unit twin |
 | DESIGN.md parity | `_audit/design-md-parity.html` | The root `DESIGN.md` (Stitch open-spec surface) byte-equals an in-browser regeneration from `tokens.dtcg.json` + `_ds_manifest.json` + `VERSION` via the shared `scripts/design-md-lib.mjs`; every token row re-checked individually (the count is printed with the verdict) | Byte-identical + 0 drifted rows (`__designmd`) | Hard | Fast board CI |
-| Version stamp | `_audit/version-stamp.html` | `package.json`, `tokens.json`/`tokens.js` metas, DTCG `$extensions`, `provenance.json` release + dtcgStamp, `DESIGN.md` front matter, and `_esm/cs.mjs` `export const VERSION` all equal `VERSION` (pin tracks file; auto-bump on main; first LAUNCH was 1.1.0) | All 9 stamps equal (`__versionstamp`) | Hard | Fast board CI |
+| Version stamp | `_audit/version-stamp.html` | `package.json`, `tokens.json`/`tokens.js` metas, DTCG `$extensions`, `provenance.json` release + dtcgStamp, `DESIGN.md` front matter, and `_esm/cs.mjs` `export const VERSION` all equal `VERSION` (auto-bumps on main) | All 9 stamps equal (`__versionstamp`) | Hard | Fast board CI |
 | Namespace portability | `_audit/namespace-portability.html` | No manifest-indexed source hardcodes the compiler's project-id bundle suffix | 0 hardcoded suffixes (`__nsguard`) | Hard | Fast board CI |
 | Artifact head | `_audit/artifact-head.html` | Every template artifact exposes a non-empty `<title>` and `<html lang>` (via `ds-base` / compiler head standard) | 0 missing title/lang (`__artifacthead`) | Hard | Fast board CI |
 | Overflow @320 | `_audit/responsive-overflow-320.html` | WCAG 1.4.10 reflow width: templates + kits at 320px without horizontal document overflow | 0 overflowing surfaces (`__overflow320`) | Hard | Fast board CI |
@@ -34,16 +34,16 @@ Benchmark principles (WCAG · APCA · OKLCH · DTCG · CDS doctrine + style expa
 | Story coverage | `_audit/story-coverage.html` | Every primary bundle export has an Atomic View story; tweakable primaries in `PLAYGROUND_REQUIRED` must also ship `controls` + `renderC` playgrounds | 0 missing stories + 0 missing playgrounds (`__storycov`) | Hard | Fast board CI |
 | Consumer smoke test | `_audit/consumer-smoke-test.html` | The external consumer path works: `styles.css` + `_ds_bundle.js` mount real components and brand tokens reach a rendered Button | Mount + token assertions all pass (`__smoke`) | Hard | Fast board CI |
 | Bundle freshness | `_audit/bundle-freshness.html` | Every source recorded in the `_ds_bundle.js` header re-hashes to the header's sha-256 (browser replication of `ci/check-bundle-freshness.mjs`; the Node script stays the CI authority and additionally discovers new files); manifest component sources ⊆ header | 0 drifted / missing sources (`__bundlefresh`) | Hard | Fast board CI (+ Node authority in `node-prechecks`) |
-| ESM smoke test | `_audit/esm-smoke-test.html` | `_esm/cs.mjs` imports without a build, re-exports every manifest component, `VERSION` equals the root `VERSION` pin, and a mounted Button receives brand tokens | Export/manifest parity + VERSION pin + token check (`__esm`) | Hard | Fast board CI |
+| ESM smoke test | `_audit/esm-smoke-test.html` | `_esm/cs.mjs` imports without a build, re-exports every manifest component, `VERSION` equals root `VERSION`, and a mounted Button receives brand tokens | Export/manifest parity + VERSION match + token check (`__esm`) | Hard | Fast board CI |
 | Package exports integrity | `_audit/package-exports-integrity.html` | Every `package.json` `files` entry and every `module`/`types`/`style`/`exports` target exists; every entry-point target is covered by `files` (pack-safe); dual entries — `_esm/react.mjs` (default / `./react`, React peer) + `_esm/cs.mjs` (`./legacy`) — are ESM-shaped and their re-exports ⊆ the bundle header's exposed exports | 0 missing / uncovered / unknown (`__pkgexports`) | Hard | Fast board CI |
 | Component children | `_audit/component-children-test.html` | Void-element components (Checkbox, Radio, Switch, SearchField, NumberField, Slider, Divider, TextField) mount with stray children without throwing React #137 | 0 throws (`__result.anyThrew === false`) | Hard | Fast board CI |
 | Component behavior | `_audit/component-behavior-test.html` | 79 real interaction assertions — every interactive public primary with a user-driven contract (overlays, forms, AI gates, shell chrome, media/copy) plus toast-over-dialog depth; display-only primaries excluded by design | 79/79 assertions pass (`__behavior`) | Hard | Fast board CI |
 | 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,10 @@
 # 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. **Current pin tracks `VERSION`** (auto-bump on push to `main` from Conventional Commits; owner may still force a bump). First LAUNCH was **1.1.0**. 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`
+
+Docs publication follow-through: single VERSION wording on operator surfaces (no separate “pin” / LAUNCH dual lead-in). Historical Release / Patch / LAUNCH sections below stay as dated archive.
 
 ## Release — `@cyberskill/design@1.3.9`
 

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/sync.md

@@ -39,7 +39,7 @@ The PR diff is the safety net — it shows exactly what changed since the last c
 ## Hygiene that keeps round-trips clean
 - **`.gitignore`** the transient (`uploads/`, `scraps/`, `_audit/exports/`); commit everything else, **including `_esm/`** (see above — it is source, not a build artifact, despite the `_` prefix). The compiled `_ds_bundle.js`, `_ds_manifest.json`, and `_adherence.oxlintrc.json` are **committed consumer artifacts** — they ship in the npm package so consumers with no build step can load the system. Do not gitignore them. Regenerate via `npm run build:bundle` after source changes; the bundle-freshness gate fails on drift.
 
-- **`VERSION` pin tracks the file** (auto-bump on push to `main` via `.github/workflows/version.yml` → tag `v*` → `npm-publish.yml`; first LAUNCH was **1.1.0**; owner may still force a bump). Do not maintain a changelog file. Continuity is the git history; open maintainer tasks live in `docs/decisions.md`.
+- **`VERSION`** (auto-bump on push to `main` via `.github/workflows/version.yml` → tag `v*` → `npm-publish.yml`; owner may still force a bump). Do not maintain a changelog file. Continuity is the git history; open maintainer tasks live in `docs/decisions.md`.
 
 - **One source of truth at a time.** Don't edit the repo and a Claude Design project in parallel and push both — pull, work, push, in that order, so the repo is always the merge point.
 

package/docs/vi/benchmark-rubric.md

@@ -23,7 +23,7 @@ Checklist tự kiểm khi tiến hóa CyberSkill Design System — chuẩn bên
 | Một element mỗi bề mặt; gradient chỉ Tương sinh | Registry products · conventions |
 | Registry product→element khóa; UI kit trung thành Thổ | [`docs/vi/products.md`](products.md) |
 | Expansion Rule đủ + `_audit/run.html` xanh + docs EN·VI parity | `docs/doctrine.md` · docs-consistency · docs-lang-parity · docs-storybook-coverage |
-| VERSION theo file (auto-bump trên main; LAUNCH đầu tiên là 1.1.0) | version-stamp · docs-consistency |
+| VERSION theo file (auto-bump trên main) | version-stamp · docs-consistency |
 | Pack Element chỉ từ seed (30 bộ) | `element-geometry` · `tokens:elements` |
 
 ## Checklist mở rộng style (`data-cs-style`)

package/docs/vi/consuming.md

@@ -19,7 +19,7 @@ Bạn đang cài, liên kết, hoặc nâng cấp hệ thống trong sản phẩ
 
 **Quy tắc DC cho Stitch:** Stitch (và mọi tool non-DC) **không** được tiêu thụ `*.dc.html` như nguồn chân lý. Dùng pattern export tĩnh, `templates/kitchen-sink.html`, `examples/static-hello/`, và class `.cs-*` từ `styles.css`.
 
-**Tín hiệu release:** **pin theo `VERSION`** (auto-bump trên `main`; LAUNCH đầu tiên là **1.1.0**; không CHANGELOG). Coi **git tip SHA** là chân lý kỹ thuật; đọc điểm nổi bật sản phẩm curated trong `docs/release-notes.md`.
+**Tín hiệu release:** **theo `VERSION`** (auto-bump trên `main`; không CHANGELOG). Coi **git tip SHA** là chân lý kỹ thuật; đọc điểm nổi bật sản phẩm curated trong `docs/release-notes.md`.
 
 ## Đường nhanh cho AI agent (DC-capable authoring, hoặc điều khiển một agent)
 
@@ -42,7 +42,7 @@ Bạn đang cài, liên kết, hoặc nâng cấp hệ thống trong sản phẩ
 
 ## Adopt qua npm (tùy chọn)
 
-Package có thể publish (`private: false`; phiên bản = root `VERSION`). License vẫn **UNLICENSED** — cài từ registry **không** tự cấp quyền redistribution. **LAUNCH là `@cyberskill/design@1.1.0`; sau đó pin theo `VERSION`** (auto-bump trên `main` tạo tag `vX.Y.Z`, kích hoạt `npm-publish.yml`). CI publish qua **npm Trusted Publishing (OIDC)** (không token publish dài hạn; Publishing access package **disallow tokens**). Dùng đã duyệt ghi tại **`docs/consumer-grant.md`** (sản phẩm portfolio CyberSkill từ `docs/products.md`). Xem `docs/decisions.md` và `docs/ci-cd.md`.
+Package có thể publish (`private: false`; phiên bản = root `VERSION`). License vẫn **UNLICENSED** — cài từ registry **không** tự cấp quyền redistribution. **Phiên bản package = root `VERSION`** (auto-bump trên `main` tạo tag `vX.Y.Z`, kích hoạt `npm-publish.yml`). CI publish qua **npm Trusted Publishing (OIDC)** (không token publish dài hạn; Publishing access package **disallow tokens**). Dùng đã duyệt ghi tại **`docs/consumer-grant.md`** (sản phẩm portfolio CyberSkill từ `docs/products.md`). Xem `docs/decisions.md` và `docs/ci-cd.md`.
 
 **Grant consumer (chính sách owner — không phải secret).** Đã viết và có hiệu lực tại `docs/consumer-grant.md` (+ `docs/vi/consumer-grant.md`). Team bên ngoài cần stanza có ngày thêm vào đó; redistribution ngoài sản phẩm đã grant cần grant viết thêm.
 

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.10.
+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

@@ -4,7 +4,7 @@ Cho người và agent *mở rộng hệ thống này*. (Consumer: đọc `SKILL
 
 ## Quy tắc expansion
 
-**Khi bất kỳ thứ gì lớn lên, mọi thứ cập nhật trong cùng một change.** Element/variant, icon, component, token role, ngôn ngữ, hoặc pattern template mới phải lan tới: tokens/source → specimen cards (guidelines + card nhóm component) **và trang guideline liên quan** → bộ ba hợp đồng component (`.jsx` + `.d.ts` + `.prompt.md`) → **mọi** template (tweak enum và map) → Storybook toolbar / Atomic View → docs (đếm README, SKILL, **và mọi tài liệu liên quan change chạm** — kit README, registry, contrast report regen sau đổi token). **`VERSION` auto-bump khi push lên `main`** (Conventional Commits); owner vẫn có thể force bump. **Không maintain file changelog** — pin theo `VERSION` (auto-bump trên `main`; LAUNCH đầu tiên là **1.1.0**). Continuity là git history cộng **Release Notes** curated (`docs/release-notes.md` / Storybook). Gate mọi expansion bằng compiler check **và grep enum/list cũ** — không ship nửa lan. Ranh giới phạm vi đã ghi (doctrine, không phải lỗ): trang UI-kit giữ tái tạo Thổ pixel-faithful (trục demo ở Storybook toolbar và Atomic View); mọi template bilingual EN·VN và mặc định tiếng Anh (collateral client/media giữ English-primary), và biến thể ngôn ngữ render **tách hoàn toàn** — xem decision log.
+**Khi bất kỳ thứ gì lớn lên, mọi thứ cập nhật trong cùng một change.** Element/variant, icon, component, token role, ngôn ngữ, hoặc pattern template mới phải lan tới: tokens/source → specimen cards (guidelines + card nhóm component) **và trang guideline liên quan** → bộ ba hợp đồng component (`.jsx` + `.d.ts` + `.prompt.md`) → **mọi** template (tweak enum và map) → Storybook toolbar / Atomic View → docs (đếm README, SKILL, **và mọi tài liệu liên quan change chạm** — kit README, registry, contrast report regen sau đổi token). **`VERSION` auto-bump khi push lên `main`** (Conventional Commits); owner vẫn có thể force bump. **Không maintain file changelog** — theo `VERSION` (auto-bump trên `main`). Continuity là git history cộng **Release Notes** curated (`docs/release-notes.md` / Storybook). Gate mọi expansion bằng compiler check **và grep enum/list cũ** — không ship nửa lan. Ranh giới phạm vi đã ghi (doctrine, không phải lỗ): trang UI-kit giữ tái tạo Thổ pixel-faithful (trục demo ở Storybook toolbar và Atomic View); mọi template bilingual EN·VN và mặc định tiếng Anh (collateral client/media giữ English-primary), và biến thể ngôn ngữ render **tách hoàn toàn** — xem decision log.
 
 ## Bốn trục
 
@@ -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). Pin theo `VERSION` (auto-bump trên `main`; LAUNCH đầu tiên là **1.1.0**).
+**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
@@ -50,7 +51,7 @@ Giữ plan Figma hiện tại. Variables REST API chỉ Enterprise — job ghi *
 
 ## 7. npm publish — live qua Trusted Publishing (OIDC)
 
-**Trạng thái: LAUNCH `@cyberskill/design@1.1.0`; pin theo `VERSION` (auto-bump trên main từ Th8 2026); CI publish dùng npm Trusted Publishing; token bị cấm** (Th7 2026; LAUNCH 2026-07-27)
+**Trạng thái: LAUNCH `@cyberskill/design@1.1.0`; sau đó `VERSION` auto-bump trên main (từ Th8 2026); CI publish dùng npm Trusted Publishing; token bị cấm** (Th7 2026; LAUNCH 2026-07-27)
 
 - `package.json` là `private: false`; tên package **`@cyberskill/design`** (`publishConfig.access: public`); `repository.url` khớp repo GitHub này cho provenance.
 - Workflow `.github/workflows/npm-publish.yml`: `id-token: write` + runner GitHub-hosted; **không** đặt `NPM_TOKEN` / `NODE_AUTH_TOKEN` trên bước publish (OIDC). Trusted Publisher trên npm phải liệt kê filename workflow **`npm-publish.yml`** cho `cyberskill-official/design` (FIND-088). Soft-skip chỉ no-op mong đợi (`already_published` / EPUBLISHCONFLICT, và `missing_secrets` thật sự ngoài GHA). Trên GHA tag / `workflow_dispatch`, **ENEEDAUTH** / **404** / **402** / **403** / **EOTP** fail job; publish thành công được khóa bởi `npm view @cyberskill/design@VERSION` **và** `dist-tags.latest === VERSION` (FIND-020 / FIND-094).
@@ -77,7 +78,7 @@ Ghi nhận Th7 2026 — mặc định mở khóa (cập nhật khi bước vận
 
 - **Figma Variables** — giữ Tokens Studio / non-Enterprise (quyết định §3). Soft-skip Variables REST vẫn trung thực.
 - **Code Connect** — **bỏ qua khi còn Figma free**; chỉ xem lại sau Org + library đã publish + `nodeId` thật (quyết định §6). Soft-skip ≠ publish.
-- **npm** — **LAUNCH `@cyberskill/design@1.1.0`**; pin theo `VERSION` (auto-bump trên `main` → tag `v*` → Trusted Publishing); CI dùng **Trusted Publishing (OIDC)** qua `npm-publish.yml`; npmjs **disallow tokens**; grant consumer có hiệu lực tại `docs/consumer-grant.md` (quyết định §7). Entry package mặc định là bundler-native `_esm/react.mjs` (React peer); đường browser là `@cyberskill/design/legacy` → `_esm/cs.mjs` (quyết định §10).
+- **npm** — **LAUNCH `@cyberskill/design@1.1.0`**; sau đó `VERSION` auto-bump trên `main` → tag `v*` → Trusted Publishing; CI dùng **Trusted Publishing (OIDC)** qua `npm-publish.yml`; npmjs **disallow tokens**; grant consumer có hiệu lực tại `docs/consumer-grant.md` (quyết định §7). Entry package mặc định là bundler-native `_esm/react.mjs` (React peer); đường browser là `@cyberskill/design/legacy` → `_esm/cs.mjs` (quyết định §10).
 
 ## 10. Export React bundler-native (Next / SSR)
 

package/docs/vi/doctrine.md

@@ -20,7 +20,7 @@ Khi **bất kỳ thứ gì** trong hệ thống này lớn lên, cập nhật **
 2. Thẻ mẫu (guidelines cộng thẻ nhóm component) **và mọi trang guideline liên quan**.
 3. **Tất cả** template (enum tweak, bản đồ EL/EX, accent đã quét).
 4. UI kit — trang kit trung thành Thổ; demo trục qua thanh công cụ Storybook và Atomic View (Identity Lab đã nghỉ).
-5. Docs: README (số đếm theo compiler), `SKILL.md`, file này, `docs/conventions.md`, **và mọi tài liệu liên quan mà thay đổi chạm tới** (README kit, `docs/products.md`, tái sinh `docs/contrast-report.md` sau khi đổi token). Xuất bản cùng các trang đó qua Storybook Docs (xem `docs/storybook.md`). **`VERSION` tự tăng khi đẩy lên `main`** từ Conventional Commits (`.github/workflows/version.yml` → tag `v*` → `npm-publish.yml`); chủ sở hữu vẫn có thể ép bump qua `Release-As:` / `workflow_dispatch`. **Không duy trì file changelog** — pin theo `VERSION` (auto-bump trên `main`; LAUNCH đầu tiên là **1.1.0**). Tính liên tục là lịch sử git cộng Release Notes đã chọn lọc.
+5. Docs: README (số đếm theo compiler), `SKILL.md`, file này, `docs/conventions.md`, **và mọi tài liệu liên quan mà thay đổi chạm tới** (README kit, `docs/products.md`, tái sinh `docs/contrast-report.md` sau khi đổi token). Xuất bản cùng các trang đó qua Storybook Docs (xem `docs/storybook.md`). **`VERSION` tự tăng khi đẩy lên `main`** từ Conventional Commits (`.github/workflows/version.yml` → tag `v*` → `npm-publish.yml`); chủ sở hữu vẫn có thể ép bump qua `Release-As:` / `workflow_dispatch`. **Không duy trì file changelog** — theo `VERSION` (auto-bump trên `main`). Tính liên tục là lịch sử git cộng Release Notes đã chọn lọc.
 6. Bề mặt duyệt và sức khỏe: component mới hoặc đổi được một story Atomic View trong `guidelines/atomic-view.html` (cộng playground sống nếu có prop chỉnh được — `_audit/story-coverage.html` bắt story) và phủ hành vi trong `_audit/component-behavior-test.html` nếu tương tác; mọi trục, công cụ, hoặc tab mới được nối vào `_audit/index.html` và Storybook **Status** (`_audit/run.html` full-bleed — `dashboard.html` chỉ redirect); gate xác định tương ứng được thêm hoặc cập nhật (`contrast-guard` cho quy tắc màu mới, `token-contract` cộng ma trận contrast cho token, `story-coverage` cho component, `docs-storybook-coverage` cho docs đã xuất bản).
 
 **Gate:** `check_design_system` sạch (chỉ phiên compiler) **cộng** `_audit/run.html` (mọi gate nhanh) xanh **cộng** `docs-consistency` xanh **cộng** grep enum hoặc danh sách cũ để chứng minh không bỏ sót. Trên clone portable, tương đương là bảng nhanh cộng `npm run test:unit`.