@cyberskill/design 1.2.0 → 1.3.9

package/docs/vi/quality-gates.md

@@ -1,10 +1,10 @@
 # Quality gates — tài liệu chuẩn benchmark
 
-Mọi quality gate deterministic trong hệ thống, nó assert gì, tiêu chí pass, hard hay advisory, và chạy ở đâu.
+Mọi quality gate deterministic trong hệ thống, nó assert gì, tiêu chí pass, hard hay advisory, và chạy ở đâu. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
-**Gate chạy ở đâu.** *Fast board CI* = job `fast-gates` trong `.github/workflows/design-system-gates.yml`, serve repo và điều khiển `_audit/run.html` headless qua `_audit/ci/run-gates.mjs` (mọi push/PR + nightly + thủ công) — hàng board mới được nhận tự động. Hai gate thêm chạy standalone như *merge blocker* (job `docs-consistency-blocker`, qua `_audit/ci/run-single-gate.mjs`). *Whole-set CI* = job `whole-set-audits` (mọi push/PR + nightly — quyết định B của owner). *Unit test* = `npm run test:unit` trong job `unit-tests` (Node thuần, không trình duyệt). *Node pre-checks* = job `node-prechecks` (authority không trình duyệt: bundle freshness, DESIGN.md freshness) cộng job `token-provenance`. Mọi browser gate publish verdict global (`window.__*`) mà headless runner đọc.
+**Gate chạy ở đâu.** *Fast board CI* = job `fast-gates` trong `.github/workflows/design-system-gates.yml`, serve repo và điều khiển `_audit/run.html` headless qua `_audit/ci/run-gates.mjs` (mọi push/PR + nightly + thủ công) — hàng board mới được nhận tự động. Hai gate thêm chạy standalone như *merge blocker* (job `docs-consistency-blocker`, qua `_audit/ci/run-single-gate.mjs`). *Whole-set CI* = job `whole-set-audits` (mọi push/PR + nightly — quyết định B của owner). *Unit test* = `npm run test:unit` trong job `unit-tests` (Node thuần, không trình duyệt). *Node pre-checks* = job `node-prechecks` (authority không trình duyệt: bundle freshness, DESIGN.md freshness, styles.min.css + contrast-report freshness, manifest coverage) cộng job `token-provenance`. *Storybook CI* = job `storybook-build` (`build:storybook` + freshness `--require`). Mọi browser gate publish verdict global (`window.__*`) mà headless runner đọc.
 
-## Fast board — 39 gates trong `_audit/run.html`
+## Fast board — 42 gates trong `_audit/run.html`
 
 Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở rộng style): [`docs/vi/benchmark-rubric.md`](benchmark-rubric.md).
 
@@ -13,8 +13,11 @@ Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở r
 | Contrast guard | `_audit/contrast-guard.html` | Không base rule sơn umber trên bề mặt themeable mà thiếu dark override; mọi cặp text×surface semantic ghi điểm light và dark | 0 rule không shield và 0 cặp fail (`__contrastguard`) | Hard | Fast board CI |
 | Axes guard | `_audit/axis-guard.html` | Không live source đưa lại bề mặt sản phẩm Expression/Density đã nghỉ | 0 hit trên source index bởi manifest (`__axisguard`) | Hard | Fast board CI |
 | Manifest CSS paths | `_audit/manifest-css-guard.html` | Mọi entry `globalCssPaths` của `_ds_manifest.json` tồn tại như raw CSS; mọi `@import` của `styles.css` được liệt kê | 0 thiếu / 0 chưa liệt kê (`__cssguard`) | Hard | Fast board CI |
-| Docs consistency | `_audit/docs-consistency.html` | Mọi claim đếm trong README/SKILL/llms.txt khớp compiler manifest; claim số card trong prose audit (`_audit/index` / README / namespace-portability) khớp `manifest.cards`; `VERSION` semver và `package.json` khớp (LAUNCH 1.1.0; auto-bump trên main); không tham chiếu changelog-file; blacklist stale-phrase (suite/pack count đã gỡ trong audit Th7 2026) sạch trên README/SKILL/llms + `docs/*.md` (ghi chú lịch sử dưới `_audit/archive/` không được quét); `DESIGN.md` tồn tại với front-matter version = `VERSION`; routing agent trung thực — Claude path cite `_esm/cs.mjs` + bundle prefix; Stitch path cấm `*.dc.html` làm SoT; tên package `@cyberskill/design` | 0 claim lệch, 0 blacklist hit, VERSION sync + stamp + routing nguyên (`__docs`) | Hard | Fast board CI + merge blocker |
+| Docs consistency | `_audit/docs-consistency.html` | Mọi claim đếm trong README/SKILL/llms.txt khớp compiler manifest; claim số card trong prose audit (`_audit/index` / README / namespace-portability) khớp `manifest.cards`; `VERSION` semver và `package.json` khớp (LAUNCH 1.1.0; auto-bump trên main); không tham chiếu changelog-file; blacklist stale-phrase sạch trên README/SKILL/llms + `docs/*.md`; `DESIGN.md` stamp = `VERSION`; routing agent trung thực; doctrine↔source — 10 role accent (gồm `on-strong`), depth scale đủ, default lang `vi`, breakpoint CSS↔JSON, fallback depth trong `base/` | 0 claim lệch + doctrine parity (`__docs`) | Hard | Fast board CI + merge blocker |
+| Asset-weight budget | `_audit/asset-weight-budget.html` | WebP aurora elemental (`assets/aurora-{tho,hoa,thuy,moc,kim}.webp`) dưới trần hồi quy (≤300 KB/file, ≤1.2 MB cả bộ); PNG aurora legacy thì fail; CSS wash không được trỏ JPEG Thổ | Cả năm dưới trần (`__assetweight`) | Hard | Fast board CI (+ Node twin `test-docs-consistency.mjs`) |
 | Docs language parity | `_audit/docs-lang-parity.html` | Mọi EN `docs/*.md` hướng operator có counterpart `docs/vi/`; VI không phải stub trống/TODO (≥40% độ dài EN); blacklist stale-phrase sạch trên cả EN và VI (ghi chú lịch sử dưới `_audit/archive/` không được theo dõi) | 0 cặp thiếu, 0 stub, 0 blacklist hit (`__docslangparity`) | Hard | Fast board CI |
+| Docs Storybook coverage | `_audit/docs-storybook-coverage.html` | HTML sống: catalog đã xuất bản + `/docs/**` + viewer + file entrance; title `index.json` Storybook khi có (không fetch `.storybook/` / `stories/` chưa xuất bản). Node twin: nguồn CSF/MDX + `staticDirs` | 0 trang / mục viewer thiếu (`__docssbcoverage`) | Hard | Fast board CI + unit twin |
+| Docs link check | `_audit/docs-link-check.html` | HTML sống: markdown đã xuất bản + link viewer resolve; không path đã nghỉ. Node twin còn quét `href`/`src` MDX chưa xuất bản | 0 link trong-repo gãy (`__docslinkcheck`) | Hard | Fast board CI + unit twin |
 | DESIGN.md parity | `_audit/design-md-parity.html` | Root `DESIGN.md` (open-spec Stitch) byte-equals regeneration trong trình duyệt từ `tokens.dtcg.json` + `_ds_manifest.json` + `VERSION` qua `scripts/design-md-lib.mjs` dùng chung; từng hàng token được re-check riêng (số hàng in kèm verdict) | Byte-identical + 0 hàng drift (`__designmd`) | Hard | Fast board CI |
 | Version stamp | `_audit/version-stamp.html` | `package.json`, meta `tokens.json`/`tokens.js`, DTCG `$extensions`, `provenance.json` release + dtcgStamp, front matter `DESIGN.md`, và `_esm/cs.mjs` `export const VERSION` đều bằng `VERSION` (pin theo file; LAUNCH 1.1.0) | Cả 9 stamp bằng nhau (`__versionstamp`) | Hard | Fast board CI |
 | Namespace portability | `_audit/namespace-portability.html` | Không source index bởi manifest hardcode hậu tố bundle project-id của compiler | 0 hậu tố hardcode (`__nsguard`) | Hard | Fast board CI |
@@ -35,7 +38,7 @@ Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở r
 | Package exports integrity | `_audit/package-exports-integrity.html` | Mọi entry `files` của `package.json` và mọi target `module`/`types`/`style`/`exports` tồn tại; mọi target entry-point được `files` phủ (pack-safe); dual entry — `_esm/react.mjs` (mặc định / `./react`, React peer) + `_esm/cs.mjs` (`./legacy`) — hình ESM và re-export ⊆ export lộ trong header bundle | 0 thiếu / chưa phủ / lạ (`__pkgexports`) | Hard | Fast board CI |
 | Component children | `_audit/component-children-test.html` | Component void-element (Checkbox, Radio, Switch, SearchField, NumberField, Slider, Divider, TextField) mount với child lạc mà không throw React #137 | 0 throw (`__result.anyThrew === false`) | Hard | Fast board CI |
 | Component behavior | `_audit/component-behavior-test.html` | 79 assert tương tác thật — mọi public primary có hợp đồng tương tác người dùng (overlay, form, AI gate, shell, media/copy) cộng toast trên dialog; primary chỉ hiển thị loại trừ theo thiết kế | 79/79 assert pass (`__behavior`) | Hard | Fast board CI |
-| A11y interactions | `_audit/a11y-gate.html` | Focus management (Dialog/Drawer trap + restore + Escape), roving tabindex, combobox `aria-activedescendant`, hợp đồng role/label, cộng Esc/focus open-state cho Cascader · TreeSelect · Tour · HoverCard · ContextMenu | Mọi assert keyboard/ARIA pass (`__a11y`) | Hard | Fast board CI |
+| 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 |
@@ -65,13 +68,19 @@ Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở r
 | Token provenance | `_audit/ci/check-token-provenance.mjs` | `tokens/native/` + `tokens/provenance.json` khóa với `tokens/tokens.dtcg.json` (cùng authority drift sha-256 như gate token-pipeline) | Exit 0 khi hash khớp | Hard | CI job `token-provenance` |
 | Bundle freshness (authority) | `_audit/ci/check-bundle-freshness.mjs` | `_ds_bundle.js` đã commit được build từ component source hiện tại — khám phá source đầy đủ (đi `components/`, `ui_kits/`, root sources), nên file mới/xóa cũng bị bắt, hàng trình duyệt không làm được | Exit 0, 0 source drift/mới/xóa | Hard | CI job `node-prechecks` |
 | DESIGN.md freshness | `scripts/generate-design-md.mjs --check` | Root `DESIGN.md` byte-equals regeneration mới từ DTCG + manifest + `VERSION` | Exit 0 khi byte khớp | Hard | CI job `node-prechecks` |
+| styles.min.css freshness | `scripts/flatten-styles.mjs --check` | `dist/styles.min.css` đã commit byte-equals flatten `styles.css` + tokens/base (FIND-026) | Exit 0 khi byte khớp | Hard | CI job `node-prechecks` |
+| contrast-report freshness | `scripts/generate-contrast-report.mjs --check` | Báo cáo contrast EN + VI khớp regeneration từ element packs (FIND-026) | Exit 0 khi byte khớp | Hard | CI job `node-prechecks` |
+| Manifest coverage | `_audit/ci/check-manifest-coverage.mjs` | `templates/` + `.card.html` + startingPoints khớp `_ds_manifest.json` (allowlist: `_vendor`, `schema`, `email-safe`) | Exit 0 | Hard | CI `node-prechecks` + unit |
+| Storybook build + freshness | `npm run build:storybook` + `test-storybook-freshness.mjs --require` | Storybook build trong CI; stamp khớp `stories/` + `.storybook/` (FIND-074 / FIND-075) | Exit 0 | Hard | CI job `storybook-build` |
 
-## Unit tests — `npm run test:unit` (13)
+## Unit tests — `npm run test:unit`
 
 | Test | File | Assert gì | Tiêu chí pass | Loại | Chạy ở đâu |
 |---|---|---|---|---|---|
 | Nav model | `_audit/ci/test-nav-model.mjs` | Logic classify/group của `guidelines/nav-model.js` đã ship hành xử đúng (chạy module thật) | Mọi assert pass (exit 0) | Hard | Unit test |
 | Health/Tokens UI contract | `_audit/ci/test-health-tokens-contract.mjs` | Hợp đồng cấu trúc của entry HTML Health + Tokens giữ | Mọi assert pass (exit 0) | Hard | Unit test |
+| Docs Storybook coverage (Node twin) | `_audit/ci/test-docs-storybook-coverage.mjs` | Docs tracked + entrance + doctrine mỗi cái có title story Storybook và path viewer; `staticDirs` gồm `docs/` | Exit 0 | Hard | Unit test |
+| Docs link check (Node twin) | `_audit/ci/test-docs-link-check.mjs` | Link tương đối trong-repo của tập xuất bản bắt buộc resolve; path đã nghỉ không là href sống | Exit 0 | Hard | Unit test |
 | Form paths | `_audit/ci/test-form-paths.mjs` | Helper Form path hành xử đúng (chạy `Form.jsx` đã ship qua dynamic import) | Mọi assert pass (exit 0) | Hard | Unit test |
 | Storybook contract | `_audit/ci/test-storybook-contract.mjs` | Live hub chỉ là Storybook; SB10 ESM main + addon-docs/a11y; CSF đủ cho mọi public primary; Matrix/AllVariants + AllSizes khi có `argTypes.size`; States/Matrix phủ disabled/loading/error/busy; mọi enum size/variant rời rạc được mount; FullMatrix bắt buộc khi ≥1 trục trong {size, variant, state} tồn tại (≥28 primary đủ điều kiện) | Mọi assert pass (exit 0) | Hard | Unit test |
 | Axe coverage | `_audit/ci/test-axe-coverage.mjs` | `NAMES` fixture ≡ `listPublicComponents()`; axe-smoke nạp fixture khoá inventory | Mọi assert pass (exit 0) | Hard | Unit test |
@@ -82,9 +91,11 @@ Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở r
 | React entry | `_audit/ci/test-react-entry.mjs` | Dual package exports (`.` / `./react` → `_esm/react.mjs`, `./legacy` → `_esm/cs.mjs`); `package.json` version = `VERSION`; peerDeps React; react.mjs không CDN/bundle bridge và re-export khớp header bundle; `generate-react-entry --check` xanh | Mọi assert pass (exit 0) | Hard | Unit test |
 | Element packs | `_audit/ci/test-element-packs.mjs` | `tokens/elements.css` + mirror JSON/JS/DTCG byte-equal regeneration từ `tokens/element-seeds.json` | `generate-element-packs --check` exit 0 | Hard | Unit test |
 | i18n builtins + doc/font residuals | `_audit/ci/test-i18n-builtins.mjs` | Không literal EN UI cứng ngoài registry; 0 hex doc-palette trong templates; 0 font-size px thô trong `base/` | Exit 0 | Hard | Unit test |
-| Storybook static freshness | `_audit/ci/test-storybook-freshness.mjs` | Khi có `storybook-static/`, `.cs-freshness.json` `sourceHash` khớp `stories/` + `.storybook/` (UX-030). Không có cây static thì bỏ qua. | Exit 0 | Hard | Unit test |
+| Manifest coverage | `_audit/ci/check-manifest-coverage.mjs` | Disk templates/cards/startingPoints ⊆ manifest (`email-safe` allowlist) | Exit 0 | Hard | Unit test |
+| Pack hygiene | `_audit/ci/test-pack-hygiene.mjs` | Tarball loại `docs/tasks|audits|plans|status`; gồm notices + fonts + `_vendor/` (FIND-064) | Exit 0 | Hard | Unit test |
+| CI verdict selftest | `_audit/ci/ci-verdict.mjs --selftest` | Helper annotation soft-skip vs success (FIND-095) | Exit 0 | Hard | Unit test |
 
-Suite `test:unit` được nối vào CI workflow như một phần của hardening Th7 2026 (trước đó chỉ chạy local).
+Suite `test:unit` được nối vào CI workflow như một phần của hardening Th7 2026 (trước đó chỉ chạy local). Storybook freshness chạy trong `storybook-build` với `--require` (không skip trong CI).
 
 ## Audit probe suite — `npm run test:audit-probe`
 
@@ -92,20 +103,20 @@ Entry thúc đẩy cho proxy audit UX (`_audit/ci/audit-probe-suite.mjs`): suite
 
 ## Job sync / phân phối (soft-skip)
 
-Soft-skip nghĩa là job exit 0 kèm report khi secret/plan/API không hoàn tất write thật — **không** có nghĩa Code Connect hay Figma Variables đang live. npm CI publish dùng Trusted Publishing; soft-skip là trung thực auth/conflict. Coi việc maintainer còn lại trong `docs/decisions.md` là danh sách mở (Code Connect hoãn; grant consumer tại `docs/consumer-grant.md`). Storybook `FullMatrix` bắt buộc cho mọi public primary có ≥1 trong {size enums, variant enums, state keys} — helper chung tại `stories/lib/matrix.jsx`.
+Soft-skip nghĩa là job exit 0 kèm report khi secret/plan/API không hoàn tất write thật — **không** có nghĩa Code Connect hay Figma Variables đang live. Soft-skip ghi `$GITHUB_STEP_SUMMARY` và annotation CI riêng (`::error::` trên schedule/main, `::warning::` nơi khác) nên không bao giờ xanh im lặng giống live success (FIND-095). npm CI publish dùng Trusted Publishing; soft-skip chỉ **already-published** và `missing_secrets` thật sự ngoài GHA — auth/404/402 trên GHA release fail closed (xem `docs/release-runbook.md`). Coi việc maintainer còn lại trong `docs/decisions.md` là danh sách mở (Code Connect hoãn; grant consumer tại `docs/consumer-grant.md`). Storybook `FullMatrix` bắt buộc cho mọi public primary có ≥1 trong {size enums, variant enums, state keys} — helper chung tại `stories/lib/matrix.jsx`.
 
 | Job | Script / workflow | Assert gì | Soft-skip khi | Chạy ở đâu |
 |---|---|---|---|---|
 | Figma Variables | `_audit/ci/push-figma-variables.mjs` + job `figma-variables-push` | Secret mở được file; write Variables tùy chọn | Soft-skip khi thiếu secret (cùng trung thực với Code Connect) hoặc non-Enterprise / thiếu scope `file_variables:*` / API **403** sau khi secret đã có. Soft-skip ≠ sync live | Push `main` + thủ công |
 | Code Connect | `_audit/ci/code-connect-publish.mjs` + job `code-connect` | Config + 105 mapping; publish tùy chọn | Thiếu `FIGMA_TOKEN`/`FIGMA_FILE_KEY` hoặc API 403/404/429 | PR + `main` + thủ công |
-| npm publish | `_audit/ci/npm-publish.mjs` + `npm-publish.yml` | `files`/`exports` pack-safe; `npm publish` qua OIDC Trusted Publishing (package disallow tokens) | Auth / 403 / 404 / EOTP / conflict phiên bản | `workflow_dispatch` / tag `v*` |
+| npm publish | `_audit/ci/npm-publish.mjs` + `npm-publish.yml` | `files`/`exports` pack-safe (gồm `_vendor/`); `npm publish` qua OIDC Trusted Publishing (package disallow tokens); sau publish `npm view` version **và** `dist-tags.latest === VERSION` (FIND-094) | Soft-skip: `already_published` / `missing_secrets` ngoài GHA. **Fail trên GHA release:** ENEEDAUTH / 404 / 402 / 403 / EOTP / thiếu trên registry hoặc `latest` sai | `workflow_dispatch` / tag `v*` |
 | Native store | `_audit/ci/native-store-dry-run.mjs` + `native-store.yml` | Scaffold Fastlane + metadata; kiểm secret signed-release | Thiếu `ASC_*` / `PLAY_SERVICE_ACCOUNT_JSON` (submit luôn tắt) | PR + `main` (paths) + thủ công |
 
-## Registry consumer smoke (hard)
+## Registry consumer smoke (fail-closed)
 
 | Job | Script / workflow | Assert gì | Tiêu chí pass | Chạy ở đâu |
 |---|---|---|---|---|
-| npm-hello smoke | `examples/npm-hello` + job `npm-hello-smoke` | Install registry public `@cyberskill/design@VERSION` resolve đúng tên package + exports (`npm install` + `npm run smoke`; pack proof local nếu VERSION chưa trên registry) | Exit 0 (**hard fail** khi đã publish; soft-skip pack proof nếu VERSION chưa trên registry) | Push/PR path-filtered + nightly + thủ công |
+| npm-hello smoke | `examples/npm-hello` + job `npm-hello-smoke` | Install registry public `@cyberskill/design@$VERSION` resolve đúng tên package + exports (`npm install` + `npm run smoke`) | Exit 0 chỉ khi VERSION có trên registry (**fail-closed**, FIND-087). Pack proof local chỉ khi fork đặt `NPM_HELLO_ALLOW_LOCAL_PACK=true` | Push/PR path-filtered + nightly + thủ công |
 
 ## Hardening Th7 2026 — đã giao
 

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. Phiên bản **đã LAUNCH ở 1.1.0**; **pin theo `VERSION`** (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**).
+Đ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. Phiên bản **đã LAUNCH ở 1.1.0**; **pin theo `VERSION`** (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`.
 
 ## Patch — `@cyberskill/design@1.1.1`
 

package/docs/vi/release-runbook.md

@@ -0,0 +1,78 @@
+# Runbook phát hành (chuẩn)
+
+Một trang về cách một bản phát hành diễn ra và cách biết nó đã thành công. Gộp các vùng 21/23. Chi tiết liên quan: `docs/ci-cd.md`, `docs/deploy.md`, `docs/decisions.md` §7 / §13. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
+
+## Kích hoạt
+
+| Đường | Khi nào |
+|------|------|
+| **Tự động** | Push lên `main` với Conventional Commits → `version.yml` bump `VERSION`, stamp artifact, commit `chore(release): X.Y.Z`, tag `vX.Y.Z` |
+| **Ép** | Trailer `Release-As: X.Y.Z` trên commit, hoặc `workflow_dispatch` trên `version.yml` với một level |
+| **Publish thủ công** | `workflow_dispatch` trên `npm-publish.yml` (cũng chạy trên tag `v*`) |
+
+Không bao giờ push/deploy/merge nếu không có chỉ thị operator tường minh khi vận hành như agent.
+
+## Những gì chạy (happy path)
+
+```
+main push (feat/fix/…)
+  → version.yml  (bump VERSION + stamp + bundle + tag vX.Y.Z)
+  → npm-publish.yml  (OIDC Trusted Publishing; sau publish kiểm version + dist-tags.latest)
+  → Vercel (host)  (build:site → .vercel-static; headers từ vercel.json)
+  → sbom.yml trên tag  (artifact CycloneDX)
+```
+
+Scorecard chạy theo lịch tuần + push `main` (`.github/workflows/scorecard.yml`).
+
+## Tín hiệu thành công
+
+1. GitHub Actions: `version` xanh; `npm-publish` xanh (**không** soft-skip) với registry presence **và** `dist-tags.latest === VERSION` (FIND-094).
+2. `npm view @cyberskill/design version` **và** `npm view @cyberskill/design dist-tags.latest` đều bằng root `VERSION`.
+3. `npm-hello-smoke` xanh trên tip (cài registry fail-closed của VERSION đó — FIND-087).
+4. Production: `/` là Storybook; `/VERSION` là semver thuần; bảng nhanh `/_audit/run.html` xanh.
+5. Artifact: `cyclonedx-sbom` trên lần chạy tag; Scorecard SARIF trên Security / Actions artifacts.
+6. Health sau deploy trong `docs/deploy.md`.
+
+## Tag lịch sử chưa publish (không backfill)
+
+| Tag | Trạng thái | Hành động operator |
+|-----|--------|-----------------|
+| `v1.2.1` | Tag git lịch sử; **không** publish lên npm như `latest` | Để unpublished |
+| `v1.3.0` | Tag git lịch sử; **không** publish lên npm như `latest` | Để unpublished |
+| `v1.3.1` (tip hiện tại) | **Mục tiêu publish** khi operator chỉ thị | Chỉ publish **`1.3.1`** làm `dist-tags.latest` |
+
+**Không** publish `1.2.1` hay `1.3.0` để đóng lệch registry — đóng FIND-102 bằng cách publish **chỉ `1.3.1`** (có cổng operator). npm `latest` có thể vẫn đọc `1.2.0` cho tới khi publish đó land.
+
+## Thất bại / phục hồi
+
+| Triệu chứng | Hành động |
+|---------|--------|
+| `npm-publish` 403 / EOTP / ENEEDAUTH / 404 / 402 trên tag hoặc `workflow_dispatch` | **Fail-closed.** Sửa Trusted Publisher binding cho repo **`cyberskill-official/design`** (FIND-088) / 2FA / OIDC; chạy lại trên tag. Soft-skip **không** được báo success cho các lỗi này. |
+| Soft-skip `already_published` | No-op kỳ vọng — xác nhận registry; đừng coi là success nếu bạn định phát hành bản mới. |
+| Soft-skip `missing_secrets` | Chỉ kỳ vọng **ngoài** GitHub Actions (local). Trên GHA release đây là hard fail. |
+| `version.yml` push soft-warn | Đặt `PUSH_TOKEN` hoặc cho Actions push qua branch protection (xem `docs/ci-cd.md`). |
+| `npm-hello-smoke` đỏ (VERSION thiếu trên registry) | Kỳ vọng cho tới khi publish land (FIND-087). Theo **Sự cố: bản phát hành chưa publish** bên dưới — không đặt `NPM_HELLO_ALLOW_LOCAL_PACK` trên repo chuẩn. |
+| Nightly `design-system-gates` đỏ | GitHub thông báo subscriber workflow mặc định; xem “Cảnh báo job lịch” bên dưới. Chạy lại `workflow_dispatch`. |
+| Deploy Vercel một phần | Chạy lại deploy; theo protocol Health; không bịa claim header live nếu chưa `curl -sSI`. |
+
+## Sự cố: bản phát hành chưa publish (FIND-100 / FIND-101 / FIND-107)
+
+Dùng khi git/`VERSION`/site đi trước npm `dist-tags.latest` (ví dụ tip `1.3.1`, registry vẫn `1.2.0`).
+
+1. **Xác nhận lệch** — `cat VERSION`; `npm view @cyberskill/design version`; `npm view @cyberskill/design dist-tags.latest`; ghi nhận tag git `v1.2.1` / `v1.3.0` / `v1.3.1` là lịch sử vs mục tiêu publish.
+2. **Không** coi soft-skip xanh của `npm-publish` (hay proof pack local xanh của `npm-hello`) là bằng chứng VERSION đã public — smoke fail-closed; lỗi auth publish hard-fail trên GHA.
+3. **Sửa Trusted Publisher** nếu cần — cấu hình npm package phải liệt kê org/repo **`cyberskill-official/design`**, workflow **`npm-publish.yml`**, và đúng environment (FIND-088). Classic `NPM_TOKEN` bị cấm. CI dùng userconfig OIDC sạch (không `_authToken` rỗng từ `actions/setup-node`) để Trusted Publishing đổi token OIDC GitHub.
+4. **Publish có cổng operator** — chỉ sau chỉ thị tường minh: chạy lại `npm-publish.yml` trên tag **`v1.3.1`** (hoặc `workflow_dispatch` tại tip đó). Mục tiêu publish là **chỉ `1.3.1`**; không backfill `1.2.1` / `1.3.0`.
+5. **Xác minh** — `npm view @cyberskill/design@1.3.1 version` và `dist-tags.latest` đều `1.3.1`; chạy lại `npm-hello-smoke` (hoặc chờ lần gates kế) tới xanh.
+6. **Rollback / deprecate (nếu bản xấu đã lên `latest`)** — `npm deprecate @cyberskill/design@<bad> "…"` và/hoặc `npm dist-tag add @cyberskill/design@<good> latest`. npm thường không cho unpublish bản public gần đây — ưu tiên deprecate + retag `latest`. Rollback site/Vercel độc lập (`docs/deploy.md`).
+
+## Cảnh báo job lịch (area 27)
+
+- Cron nightly `0 3 * * *` trên `design-system-gates.yml`.
+- Khi schedule fail, job `notify-schedule-failure` (`needs` mọi job lịch — FIND-108) emit annotation lỗi Actions và fail khi `contains(needs.*.result, 'failure')`, kích hoạt **email native GitHub khi workflow fail** tới watcher repo / actor cuối theo Settings → Notifications.
+- Tuỳ chọn: thêm biến/secret Actions cho Slack webhook sau; không bắt buộc để CI xanh.
+- Operator nên theo dõi badge Actions trong `docs/ci-cd.md` và bật thông báo “Actions” cho workflow fail.
+
+## Product vs CyberOS
+
+Xem `docs/decisions.md` §13. Gói npm và cây portable là sản phẩm; `.cyberos/` chỉ là orchestration.

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.
+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`.
 
 ## URL
 
@@ -20,7 +20,7 @@ Storybook **10** là **site sản phẩm** cho operator trên `design.cyberskill
   - 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/** hướng dẫn MDX công khai; **Release Notes/** prose sản phẩm curated (**không CHANGELOG.md**); **Status/** nhúng `_audit/run.html` full-bleed
+- **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)
@@ -40,7 +40,7 @@ Storybook **10** là **site sản phẩm** cho operator trên `design.cyberskill
 | ESM (bundler) | `_esm/react.mjs` (mặc định / `@cyberskill/design/react`) |
 | ESM (browser legacy) | `_esm/cs.mjs` (`@cyberskill/design/legacy`) |
 | Tokens | `tokens/*` |
-| Claude Design | `templates/**/*.dc.html` |
+| DC-capable authoring | `templates/**/*.dc.html` |
 
 ## Lệnh
 

package/docs/vi/sync.md

@@ -1,10 +1,10 @@
-# Repo ↔ Claude Design — round-trip fidelity & đồng bộ hai chiều
+# Repo ↔ môi trường authoring — round-trip fidelity & đồng bộ hai chiều
 
-Repo GitHub (`cyberskill-official/design-system`) là **nguồn chân lý**. Session Claude Design là filesystem project tạm — tài liệu này nói cách chúng giữ sync mà không mất việc.
+Repo GitHub (`cyberskill-official/design`) là **nguồn chân lý**. Session compiler (ví dụ Claude Design) là filesystem project tạm — tài liệu này nói cách chúng giữ sync mà không mất việc. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 ## Repo có khôi phục nguyên hệ thống không?
 
-**Trong session Claude Design — có.** Mọi thứ định nghĩa hệ thống là file text/asset thuần và round-trip lossless:
+**Trong session compiler DC-capable — có.** Mọi thứ định nghĩa hệ thống là file text/asset thuần và round-trip lossless:
 - `styles.css` + `tokens/` + `base/` (mọi CSS + `tokens.json`/`tokens.js`)
 - `components/**` (`.jsx` + `.d.ts` + `.prompt.md` + `*.card.html`)
 - `templates/**/*.dc.html` (+ `ds-base.js`, `support.js`)
@@ -13,15 +13,15 @@ Repo GitHub (`cyberskill-official/design-system`) là **nguồn chân lý**. Ses
 - **`_esm/react.mjs`** — entry React bundler-native (export package mặc định; React peer). Regenerated qua `npm run build:react-entry`.
 - **`_esm/cs.mjs`** — entry ESM browser / no-build legacy (`@cyberskill/design/legacy`). Tiền tố underscore **không** nghĩa là build artifact hay gitignored ở đây (chỉ `uploads/`, `scraps/`, `_audit/exports/` là — xem Hygiene bên dưới); `_esm/` là source, cùng tầng với `templates/` hoặc `docs/`. Một lần port trước đã bỏ nó đúng vì giả định đó và làm gãy ESM smoke gate — nếu bạn port/copy cây này bằng tay, **explicit include mọi thư mục top-level danh sách này đặt tên**, đừng suy từ tiền tố `_`.
 
-- `README.md`, `CONTRIBUTING.md`, `SKILL.md`, `CLAUDE.md`, `VERSION`, `DESIGN.md` (open-spec surface generate — commit, chỉ regen qua `npm run build:design-md`, khóa bởi gate `design-md-parity`)
+- `README.md`, `CONTRIBUTING.md`, `SKILL.md`, `docs/doctrine.md`, shim host (`CLAUDE.md`), `VERSION`, `DESIGN.md` (open-spec surface generate — commit, chỉ regen qua `npm run build:design-md`, khóa bởi gate `design-md-parity`)
 
-Kéo chúng vào project mới (xem bên dưới) và compiler nhận lại như design system — nó khóa vào `styles.css`, cặp `.d.ts`/`.jsx`, HTML `@dsCard`, và `templates/`. File **derived** (`_ds_bundle.js`, `_ds_manifest.json`, `_adherence.oxlintrc.json`) được regenerate mỗi turn từ source, nên không cần tin từ repo — chúng rebuild.
+Kéo chúng vào project mới (xem bên dưới) và compiler nhận lại như design system — nó khóa vào `styles.css`, cặp `.d.ts`/`.jsx`, HTML `@dsCard`, và `templates/`. Artifact compile đã commit (`_ds_bundle.js`, `_ds_manifest.json`, `_adherence.oxlintrc.json`, `dist/styles.min.css`, `DESIGN.md`) là một phần hợp đồng consumer — giữ trong cây và regenerate bằng npm script đã ghi, đừng coi chúng là disposable.
 
-**Ở agent khác (Google Stitch, LLM tool generic) — một phần.** Chúng tiêu thụ được lớp **portable** — `tokens/tokens.json` + `tokens.js`, raw CSS, component `.jsx`, fonts, và Markdown docs — nhưng **không** hiểu format Design-Component `.dc.html` hay compiler điều khiển nó. Vậy agent non-Claude-Design nhận tokens, styles, và source component như file, không phải hành vi DC/tweak/compile live. Hướng những tool đó vào root **`DESIGN.md`** trước (open-spec kiểu Stitch generate: doctrine + mọi giá trị token + inventory, regen từ DTCG qua `npm run build:design-md` và khóa bởi gate `design-md-parity`), rồi `tokens.json` / `tokens.dtcg.json` và CSS cho hợp đồng máy; coi `.dc.html` + compiler là native Claude Design.
+**Ở agent khác (Google Stitch, LLM tool generic) — một phần.** Chúng tiêu thụ được lớp **portable** — `tokens/tokens.json` + `tokens.js`, raw CSS, component `.jsx`, fonts, và Markdown docs — nhưng **không** hiểu format Design-Component `.dc.html` hay compiler điều khiển nó. Vậy agent không-compiler nhận tokens, styles, và source component như file, không phải hành vi DC/tweak/compile live. Hướng những tool đó vào root **`DESIGN.md`** trước (open-spec kiểu Stitch generate: doctrine + mọi giá trị token + inventory, regen từ DTCG qua `npm run build:design-md` và khóa bởi gate `design-md-parity`), rồi `tokens.json` / `tokens.dtcg.json` và CSS cho hợp đồng máy; coi `.dc.html` + compiler là native DC.
 
 ## Đồng bộ hai chiều (repo = nguồn chân lý)
 
-Claude Design có thể **đọc/copy từ** GitHub nhưng **không push tới** nó. Vậy sync là *pull tự động, push thủ công*:
+Session compiler có thể **đọc/copy từ** GitHub nhưng thường **không push tới** nó. Vậy sync là *pull tự động, push thủ công*:
 **Bắt đầu session — pull (tin cậy, tự động):** bảo agent load repo. Nó copy cây vào project mới (đường `github_copy_files`), compiler validate, và bạn tiếp từ chân lý đã commit — không bao giờ từ project state cũ. Luôn bắt đầu đây; đừng resume từ project nửa nhớ.
 
 **Kết thúc session — push (thủ công, review):** tải project, rồi từ clone:

package/docs/vi/template-schema-v2.md

@@ -1,6 +1,6 @@
 # Template content-schema v2 — content slot có kiểu
 
-Metadata thuần additive, opt-in: sidecar `templates/<slug>/content-schema.json` cạnh `.dc.html` của template, khai báo **kiểu** của mỗi `{{ hole }}` đã có trong template — để agent hoặc pipeline điền/validate nội dung khách thật theo chương trình mà không parse HTML hay đoán.
+Metadata thuần additive, opt-in: sidecar `templates/<slug>/content-schema.json` cạnh `.dc.html` của template, khai báo **kiểu** của mỗi `{{ hole }}` đã có trong template — để agent hoặc pipeline điền/validate nội dung khách thật theo chương trình mà không parse HTML hay đoán. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 **Không cần đổi markup template.** `id` của slot là tên hole đã dùng trong `.dc.html` (ví dụ `{{ heroH }}`) và đã bind trong `renderVals()` của logic class — schema chỉ mô tả nó.
 

package/docs/viewer.html

@@ -43,12 +43,23 @@
   article hr{border:0;border-top:1px dashed var(--cs-color-border-default);margin:20px 0}
   article a{color:var(--cs-color-link)}article a:hover{color:var(--cs-color-link-hover)}
   #err{color:#B42318;font-family:var(--cs-font-family-mono);font-size:13px}
+  html.embed body{grid-template-columns:1fr}
+  html.embed aside{display:none}
+  html.embed main{padding:24px 32px}
   @media (max-width:640px){
     body{grid-template-columns:1fr}
     aside{border-inline-end:0;border-block-end:1px solid var(--cs-color-border-default);max-height:38vh}
     main{padding:18px 16px}
+    html.embed main{padding:18px 16px}
   }
-</style></head>
+</style>
+<script>
+(function(){
+  var q=new URLSearchParams(location.search);
+  if(q.get('embed')==='1'||q.get('chrome')==='0') document.documentElement.classList.add('embed');
+})();
+</script>
+</head>
 <body>
 <aside id="nav"><h1>CyberSkill Docs</h1>
 <div class="langtog" role="group" aria-label="Doc language"><button type="button" id="lang-en" data-lang="en">EN</button><button type="button" id="lang-vi" data-lang="vi">VI</button></div>
@@ -58,13 +69,13 @@
 <script>
 const DOCS_EN=[
  ['Start',[['README.md','README'],['SKILL.md','SKILL (agent rules)'],['llms.txt','llms.txt'],['CONTRIBUTING.md','Contributing']]],
- ['Guides',[['docs/consuming.md','Consuming & upgrading (incl. AI-agent quick path)'],['docs/consumer-grant.md','Consumer grant (npm · UNLICENSED)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template content-schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Release Notes'],['docs/storybook.md','Storybook (product at /)'],['docs/live-hub.md','Live hub (Storybook at /)'],['docs/design-styles.md','Design styles'],['docs/benchmark-rubric.md','Benchmark rubric'],['docs/products.md','Products'],['docs/contrast-report.md','Contrast report'],['docs/figma.md','Figma']]],
- ['Maintainers',[['docs/decisions.md','Decisions'],['docs/ci-cd.md','CI/CD automation'],['docs/quality-gates.md','Quality gates'],['docs/sync.md','Git sync & hygiene']]]
+ ['Guides',[['docs/consuming.md','Consuming & upgrading'],['docs/consumer-grant.md','Consumer grant (npm · UNLICENSED)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template content-schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Release Notes'],['docs/release-runbook.md','Release runbook'],['docs/storybook.md','Storybook (product at /)'],['docs/live-hub.md','Live hub (Storybook at /)'],['docs/design-styles.md','Design styles'],['docs/benchmark-rubric.md','Benchmark rubric'],['docs/products.md','Products'],['docs/contrast-report.md','Contrast report'],['docs/figma.md','Figma']]],
+ ['Maintainers',[['docs/doctrine.md','Doctrine'],['docs/decisions.md','Decisions'],['docs/ci-cd.md','CI/CD automation'],['docs/quality-gates.md','Quality gates'],['docs/sync.md','Git sync & hygiene']]]
 ];
 const DOCS_VI=[
  ['Bắt đầu',[['README.md','README (EN)'],['SKILL.md','SKILL (EN)'],['llms.txt','llms.txt (EN)'],['CONTRIBUTING.md','Contributing (EN)']]],
- ['Hướng dẫn',[['docs/consuming.md','Tiêu thụ & nâng cấp'],['docs/consumer-grant.md','Grant consumer (npm · UNLICENSED)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Ghi chú phát hành'],['docs/storybook.md','Storybook (sản phẩm tại /)'],['docs/live-hub.md','Live hub (Storybook tại /)'],['docs/design-styles.md','Phong cách'],['docs/benchmark-rubric.md','Rubric benchmark'],['docs/products.md','Sản phẩm'],['docs/contrast-report.md','Báo cáo contrast'],['docs/figma.md','Figma']]],
- ['Maintainer',[['docs/decisions.md','Quyết định'],['docs/ci-cd.md','CI/CD'],['docs/quality-gates.md','Quality gates'],['docs/sync.md','Đồng bộ Git']]]
+ ['Hướng dẫn',[['docs/consuming.md','Tiêu thụ & nâng cấp'],['docs/consumer-grant.md','Grant consumer (npm · UNLICENSED)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Ghi chú phát hành'],['docs/release-runbook.md','Runbook phát hành'],['docs/storybook.md','Storybook (sản phẩm tại /)'],['docs/live-hub.md','Live hub (Storybook tại /)'],['docs/design-styles.md','Phong cách'],['docs/benchmark-rubric.md','Rubric benchmark'],['docs/products.md','Sản phẩm'],['docs/contrast-report.md','Báo cáo contrast'],['docs/figma.md','Figma']]],
+ ['Maintainer',[['docs/doctrine.md','Học thuyết'],['docs/decisions.md','Quyết định'],['docs/ci-cd.md','CI/CD'],['docs/quality-gates.md','Quality gates'],['docs/sync.md','Đồng bộ Git']]]
 ];
 let lang=(localStorage.getItem('cs-docs-lang')==='vi')?'vi':'en';
 function DOCS(){ return lang==='vi'?DOCS_VI:DOCS_EN; }

package/fonts/OFL.txt

@@ -0,0 +1,98 @@
+Copyright notices for Font Software redistributed in fonts/:
+
+Copyright 2021 The Be Vietnam Pro Project Authors (https://github.com/bettergui/BeVietnamPro),
+
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/guidelines/atomic-view.html

@@ -136,7 +136,7 @@ function AlertDialogD({L}){ const [on,setOn]=useState(false); const V=L==="vi";
 function DialogDemo({title,startOpen=false}){ const [on,setOn]=useState(!!startOpen); return <div><Button size="sm" onClick={()=>setOn(true)}>Open dialog</Button><Dialog open={on} title={title} onClose={()=>setOn(false)} actions={<><Button variant="secondary" onClick={()=>setOn(false)}>Not now</Button><Button onClick={()=>setOn(false)}>Send wish</Button></>}>A real person on the team replies within one business day.</Dialog></div>; }
 function DrawerDemo({title,L,startOpen=false}){ const [on,setOn]=useState(!!startOpen); const V=L==="vi"; return <div><Button size="sm" variant="secondary" onClick={()=>setOn(true)}>{V?"Mở ngăn kéo":"Open drawer"}</Button><Drawer open={on} onClose={()=>setOn(false)} title={title} actions={has(Button)?<Button size="sm">{V?"Mở dự án":"Open project"}</Button>:null}>{has(Badge)&&<Badge variant="ochre">{V?"Đang làm":"In progress"}</Badge>}<p style={{color:"var(--cs-color-text-muted)",fontSize:13}}>{V?"Liên kết component Liquid Glass + 15 gói Ngũ Hành.":"Liquid Glass component bindings + 15 element packs."}</p></Drawer></div>; }
 function GridD({L}){ const [sel,setSel]=useState(["CDS"]); const V=L==="vi"; return has(DataGrid)?<DataGrid selectable selected={sel} onSelect={setSel} rowKey="key" height={220} columns={[{key:"key",header:V?"Mã":"Key",sortable:true},{key:"name",header:V?"Dự án":"Project",sortable:true},{key:"pct",header:V?"Tiến độ":"Progress",sortable:true,render:(r)=>r.pct+"%"}]} rows={[{key:"CDS",name:"Design System",pct:72},{key:"GENIE",name:"Lumi Genie",pct:58},{key:"SITE",name:"cyberskill.world",pct:84}]}/>:<Miss n="DataGrid"/>; }
-function SortD({L}){ const [it,setIt]=useState(L==="vi"?[{key:"a",label:"Ước một điều"},{key:"b",label:"Định hình"},{key:"c",label:"Xây để ra mắt"}]:[{key:"a",label:"Make a wish"},{key:"b",label:"Shape it"},{key:"c",label:"Build to ship"}]); return has(Sortable)?<Sortable items={it} onChange={setIt}/>:<Miss n="Sortable"/>; }
+function SortD({L}){ const [it,setIt]=useState(L==="vi"?[{key:"a",label:"Ước một điều"},{key:"b",label:"Định hình"},{key:"c",label:"Xây để ra mắt"}]:[{key:"a",label:"Make a wish"},{key:"b",label:"Shape it"},{key:"c",label:"Build to ship"}]); return has(Sortable)?<Sortable lang={L} items={it} onChange={setIt}/>:<Miss n="Sortable"/>; }
 function TreeSelD({L}){ const [k,setK]=useState("ds"); return has(TreeSelect)?<TreeSelect value={k} onChange={setK} nodes={L==="vi"?[{key:"p",label:"Nền tảng",children:[{key:"ds",label:"Design System"},{key:"tok",label:"Token Pipeline"}]},{key:"ai",label:"AI",children:[{key:"lumi",label:"Lumi Genie"}]}]:[{key:"p",label:"Platform",children:[{key:"ds",label:"Design System"},{key:"tok",label:"Token Pipeline"}]},{key:"ai",label:"AI",children:[{key:"lumi",label:"Lumi Genie"}]}]}/>:<Miss n="TreeSelect"/>; }
 function CascD({L}){ const [p,setP]=useState(["hcm","d1"]); return has(Cascader)?<Cascader value={p} onChange={setP} nodes={[{key:"hcm",label:"TP.HCM",children:[{key:"d1",label:L==="vi"?"Quận 1":"District 1"},{key:"d3",label:L==="vi"?"Quận 3":"District 3"}]},{key:"hn",label:L==="vi"?"Hà Nội":"Hanoi",children:[{key:"hk",label:L==="vi"?"Hoàn Kiếm":"Hoan Kiem"}]}]}/>:<Miss n="Cascader"/>; }
 function TransD({L}){ const [v,setV]=useState(["web"]); return has(Transfer)?<Transfer value={v} onChange={setV} items={L==="vi"?[{key:"web",label:"Ứng dụng web"},{key:"mob",label:"Ứng dụng di động"},{key:"auto",label:"Tự động hóa"},{key:"ds",label:"Design system"}]:[{key:"web",label:"Web apps"},{key:"mob",label:"Mobile apps"},{key:"auto",label:"Automation"},{key:"ds",label:"Design systems"}]}/>:<Miss n="Transfer"/>; }
@@ -270,7 +270,7 @@ const STORIES = [
   { tier:"Organism", name:"TreeSelect", grp:"Forms", render:(L)=> <div style={{minHeight:260}}><TreeSelD L={L}/></div> },
   { tier:"Organism", name:"Cascader", grp:"Forms", render:(L)=> <div style={{minHeight:240}}><CascD L={L}/></div> },
   { tier:"Organism", name:"Transfer", grp:"Forms", render:(L)=> <TransD L={L}/> },
-  { tier:"Molecule", name:"Mentions", grp:"Forms", render:(L)=> has(Mentions)?<Mentions users={["anle","baovu","lumi"]} defaultValue={L==="vi"?"Cảm ơn @":"Thanks @"} rows={2}/>:<Miss n="Mentions"/> },
+  { tier:"Molecule", name:"Mentions", grp:"Forms", render:(L)=> has(Mentions)?<Mentions lang={L} users={["anle","baovu","lumi"]} defaultValue={L==="vi"?"Cảm ơn @":"Thanks @"} rows={2}/>:<Miss n="Mentions"/> },
   { tier:"Organism", name:"Form + FormField", grp:"Forms", render:(L)=> has(Form,FormField,Button)?<div style={{maxWidth:420}}><Form onSubmit={()=>{}} errors={{email:L==="vi"?"Nhập email hợp lệ.":"Enter a valid email."}}><FormField label={L==="vi"?"Email công việc":"Work email"} required error={L==="vi"?"Nhập email hợp lệ.":"Enter a valid email."}><input name="email" className="cs-field__control" defaultValue="not-an-email"/></FormField><FormField label={L==="vi"?"Công ty":"Company"} hint={L==="vi"?"Không bắt buộc":"Optional"}><input name="company" className="cs-field__control"/></FormField><Button type="submit" size="sm">{L==="vi"?"Gửi":"Send"}</Button></Form></div>:<Miss n="Form"/> },
   { tier:"Organism", name:"Tree", grp:"Data", render:(L)=> has(Tree)?<div style={{maxWidth:340}}><Tree defaultOpen nodes={L==="vi"?[{key:"p",label:"Nền tảng",children:[{key:"ds",label:"Design System"},{key:"tok",label:"Token Pipeline"}]},{key:"ai",label:"AI",children:[{key:"lumi",label:"Lumi Genie"}]}]:[{key:"p",label:"Platform",children:[{key:"ds",label:"Design System"},{key:"tok",label:"Token Pipeline"}]},{key:"ai",label:"AI",children:[{key:"lumi",label:"Lumi Genie"}]}]}/></div>:<Miss n="Tree"/> },
   { tier:"Molecule", name:"Watermark", grp:"Data", render:(L)=> has(Watermark)?<Watermark text={L==="vi"?"BẢN NHÁP":"DRAFT"}><div style={{border:"1px solid var(--cs-color-border-default)",borderRadius:"var(--cs-radius-md)",padding:"30px 22px",maxWidth:420}}>{L==="vi"?"Nội dung tài liệu được đánh dấu bản nháp.":"Document content marked as a draft."}</div></Watermark>:<Miss n="Watermark"/> },

package/guidelines/brand-imagery.html

@@ -4,7 +4,7 @@
 <link rel="stylesheet" href="../styles.css" />
 <style>
   body { margin: 0; font-family: var(--cs-font-family-ui); }
-  .stage { position: relative; min-height: 260px; background-image: url("../assets/aurora-gold.jpg"); background-size: cover; background-position: center; overflow: hidden; }
+  .stage { position: relative; min-height: 260px; background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; overflow: hidden; }
   .lumi { position: absolute; right: 34px; bottom: -6px; height: 250px; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
   .copy { position: absolute; left: 26px; top: 24px; max-width: 340px; color: #fff; }
   .k { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-brand-ochre); }

package/guidelines/elements-variants.html

@@ -39,11 +39,11 @@ a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-link-hover)}
     <div class="v"><span class="sw" style="background:#AEE2ED"></span><div><div class="vn">mist</div><div class="vx">#AEE2ED</div></div></div></div>
 </div>
 <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px">
-  <div class="wash"><img src="../assets/aurora-moc.png" alt="Mộc aurora wash"><span class="wl">Mộc</span></div>
-  <div class="wash"><img src="../assets/aurora-hoa.png" alt="Hỏa aurora wash"><span class="wl">Hỏa</span></div>
-  <div class="wash"><img src="../assets/aurora-gold.jpg" alt="Thổ aurora wash (official gold)"><span class="wl">Thổ · official</span></div>
-  <div class="wash"><img src="../assets/aurora-kim.png" alt="Kim aurora wash"><span class="wl">Kim</span></div>
-  <div class="wash"><img src="../assets/aurora-thuy.png" alt="Thủy aurora wash"><span class="wl">Thủy</span></div>
+  <div class="wash"><img src="../assets/aurora-moc.webp" alt="Mộc aurora wash"><span class="wl">Mộc</span></div>
+  <div class="wash"><img src="../assets/aurora-hoa.webp" alt="Hỏa aurora wash"><span class="wl">Hỏa</span></div>
+  <div class="wash"><img src="../assets/aurora-tho.webp" alt="Thổ aurora wash (official gold)"><span class="wl">Thổ · official</span></div>
+  <div class="wash"><img src="../assets/aurora-kim.webp" alt="Kim aurora wash"><span class="wl">Kim</span></div>
+  <div class="wash"><img src="../assets/aurora-thuy.webp" alt="Thủy aurora wash"><span class="wl">Thủy</span></div>
 </div>
 <footer style="display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--cs-color-text-muted);align-items:center"><b style="color:var(--cs-color-text-primary)">Rules</b><span>Slots soft · middle · deep share intensity across elements — same 9-token contract (generated)</span><span>·</span><span>Washes apply via .cs-aurora-wash</span><span>·</span><span><b style="color:var(--cs-color-text-primary)">Lumi stays golden</b> — only the environment re-tints</span></footer>
 </body></html>

package/guidelines/spacing-breakpoints.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Spacing" viewport="700x150" name="Breakpoints" subtitle="Mobile-first · sm → 2xl" -->
+<!-- @dsCard group="Spacing" viewport="700x150" name="Breakpoints" subtitle="Mobile-first · phone → 2xl" -->
 <!DOCTYPE html>
 <html lang="en"><head><meta charset="utf-8" />
 <link rel="stylesheet" href="../styles.css" />
@@ -11,6 +11,7 @@
 </style></head>
 <body>
 <div class="row">
+  <div class="bp"><div class="n">phone</div><div class="v">360</div></div>
   <div class="bp"><div class="n">sm</div><div class="v">640</div></div>
   <div class="bp"><div class="n">md</div><div class="v">768</div></div>
   <div class="bp"><div class="n">lg</div><div class="v">1024</div></div>

package/guidelines/surfaces-glass.html

@@ -4,7 +4,7 @@
 <link rel="stylesheet" href="../styles.css" />
 <style>
   body { margin: 0; padding: 0; font-family: var(--cs-font-family-ui); }
-  .stage { position: relative; min-height: 230px; background-image: url("../assets/aurora-gold.jpg"); background-size: cover; background-position: center; padding: 22px 24px; display: flex; gap: 14px; align-items: center; }
+  .stage { position: relative; min-height: 230px; background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; padding: 22px 24px; display: flex; gap: 14px; align-items: center; }
   .m { flex: 1; border-radius: var(--cs-radius-lg); padding: 16px 14px; min-height: 128px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--cs-color-text-primary); }
   .nm { font-weight: 700; font-size: 14px; }
   .d { font-size: 12px; color: var(--cs-color-text-muted); margin-top: 3px; }