@cyberskill/design 1.2.0 → 1.3.9

package/llms.txt

@@ -1,20 +1,23 @@
 # CyberSkill Design System
 
-> HTML-first, Vietnamese-first design system, LAUNCHED **v1.1.0**; current **v1.1.1**. Immutable anchors: Umber #45210E · Ochre #F4BA17. Four independent axes — Theme (light · dark · system) × Element (Ngũ Hành, 15 variants) × Language (EN · VI) × Style (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default). It ships 106 components / 122 exports, 84 copyable templates (EN·VN for emails + team/legal/finance; client/media collateral EN-first), and tokens in CSS + JSON + ESM + W3C DTCG + native mirrors. This file is the agent/tool front door: it maps each audience to the format it should consume. npm package name is **`@cyberskill/design`** (not `@cyberskill/react`). Release signal: tip SHA + [docs/release-notes.md](docs/release-notes.md) — VERSION **1.1.1**, no CHANGELOG.
+> HTML-first, Vietnamese-first design system, LAUNCHED **v1.1.0**; current **v1.3.9**. Immutable anchors: Umber #45210E · Ochre #F4BA17. Four independent axes — Theme (light · dark · system) × Element (Ngũ Hành, 15 variants) × Language (EN · VI) × Style (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default). It ships 106 components / 122 exports, 84 copyable templates (EN·VN for emails + team/legal/finance; client/media collateral EN-first), and tokens in CSS + JSON + ESM + W3C DTCG + native mirrors. This file is the agent/tool front door: it maps each **capability** to the format it should consume. npm package name is **`@cyberskill/design`** (not `@cyberskill/react`). Release signal: tip SHA + [docs/release-notes.md](docs/release-notes.md) — VERSION **1.3.9**, no CHANGELOG.
 
-The portable contract covers browser and bundler entry points: `styles.css` · `_esm/cs.mjs` legacy · `_ds_bundle.js` · tokens work without a build step; `_esm/react.mjs` is bundler-native JSX (Next/Vite must transpile — not a bare-browser import). The DC layer (`templates/**/*.dc.html`) is **Claude Design / authoring-environment-only**. **Google Stitch must not treat `*.dc.html` as source of truth** — use `DESIGN.md`, DTCG, `styles.css`, kitchen-sink, and `.cs-*` static HTML instead. Dual path: [docs/consuming.md](docs/consuming.md). The full non-negotiables list lives in `CONTRIBUTING.md` and `docs/conventions.md`.
+The portable contract covers browser and bundler entry points: `styles.css` · `_esm/cs.mjs` legacy · `_ds_bundle.js` · tokens work without a build step; `_esm/react.mjs` is bundler-native JSX (Next/Vite must transpile — not a bare-browser import). The DC layer (`templates/**/*.dc.html`) needs a **Design Components compiler**. **Google Stitch must not treat `*.dc.html` as source of truth** — use `DESIGN.md`, DTCG, `styles.css`, kitchen-sink, and `.cs-*` static HTML instead. Dual path: [docs/consuming.md](docs/consuming.md). The full non-negotiables list lives in `CONTRIBUTING.md` and `docs/doctrine.md`. Operator docs are published on the Storybook **Docs** sidebar at `design.cyberskill.world`.
 
 ## Consume by audience
 
-- **Claude Code** → [SKILL.md](SKILL.md) first, then [README.md](README.md): compose with `styles.css` + bundler `_esm/react.mjs` / legacy `_esm/cs.mjs` / `_ds_bundle.js` (prefix resolve). Optional DC templates only when the session has the compiler. Gates/`_audit/` need a full clone.
-- **Google Stitch** → [DESIGN.md](DESIGN.md) first, then this file + [tokens/tokens.dtcg.json](tokens/tokens.dtcg.json): generate **static** UI. Do **not** open or rewrite `templates/**/*.dc.html` as if they were plain HTML.
+- **DC-capable authoring** (compiler present — e.g. Claude Design, Claude Code with a full clone) → [SKILL.md](SKILL.md) first, then [README.md](README.md): compose with `styles.css` + bundler `_esm/react.mjs` / legacy `_esm/cs.mjs` / `_ds_bundle.js` (prefix resolve). Optional DC templates only when the session has the compiler. Gates/`_audit/` need a full clone.
+- **Static / open-spec** (e.g. Google Stitch) → [DESIGN.md](DESIGN.md) first, then this file + [tokens/tokens.dtcg.json](tokens/tokens.dtcg.json): generate **static** UI. Do **not** open or rewrite `templates/**/*.dc.html` as if they were plain HTML.
+- **Designers** → Storybook at `design.cyberskill.world` (`/` / `npm run storybook`): Foundations, Components, Docs, axis toolbar.
+- **Implementers (npm / Next / Vite)** → [docs/consuming.md](docs/consuming.md) + default `@cyberskill/design` React entry.
+- **Maintainers** → [docs/doctrine.md](docs/doctrine.md) + [docs/quality-gates.md](docs/quality-gates.md).
 - [styles.css](styles.css): any web / framework / email (Vue, Svelte, plain HTML, React) — link this one file for every `--cs-*` token, the `.cs-*` component classes, and the Liquid Glass surfaces. Framework-agnostic, no build step.
 - [_esm/react.mjs](_esm/react.mjs): **default** npm entry — `import { Button, … } from "@cyberskill/design"` (React peer; Next/Vite transpile). Also `@cyberskill/design/react`.
 - [_esm/cs.mjs](_esm/cs.mjs): browser / no-build legacy — `import { Button, … } from "@cyberskill/design/legacy"` (self-ensures React; still link `styles.css`). **Not for Next/SSR.**
 - [_ds_bundle.js](_ds_bundle.js): React (production) — `styles.css` + `<script src="_ds_bundle.js">`, then resolve the bundle global by prefix (its `_<projectId>` suffix is compiler-assigned and changes on re-import): `const CS = window[Object.keys(window).find(k => /^CyberSkillDesignSystem_/.test(k))]; const { Button, … } = CS`. Proven green by `_audit/consumer-smoke-test.html`. (Templates load via `ds-base.js`, which publishes a stable `window.CyberSkillDS` alias for the same reason.)
 - [tokens/tokens.json](tokens/tokens.json): design tools / native / token pipelines / other agents (Figma, Google Stitch, Style Dictionary) — every token grouped by category, plus theme/element override maps; also [tokens/tokens.js](tokens/tokens.js) (ESM) and [tokens/tokens.dtcg.json](tokens/tokens.dtcg.json) (**W3C DTCG** format for Tokens Studio for Figma / Style Dictionary). This is the canonical cross-tool contract.
 - [DESIGN.md](DESIGN.md): agents/tools that read a root DESIGN.md (Google Stitch open-spec style) — **this repo's** generated file with the brand doctrine, every token value (light + dark), and the component/template inventory. Generated from the DTCG source by `npm run build:design-md`; the `design-md-parity` gate pins it — do not hand-edit.
-- [templates/](templates/): Design Components (`templates/**/*.dc.html`) + the compiler (tweaks, `x-import`, `@dsCard` cards) for **Claude Design** only. Stitch and other non-DC tools: [templates/kitchen-sink.html](templates/kitchen-sink.html) + `.cs-*` / [examples/static-hello/](examples/static-hello/) — **not** `*.dc.html`.
+- [templates/](templates/): Design Components (`templates/**/*.dc.html`) + the compiler (tweaks, `x-import`, `@dsCard` cards) for **DC-capable authoring** only. Stitch and other non-DC tools: [templates/kitchen-sink.html](templates/kitchen-sink.html) + `.cs-*` / [examples/static-hello/](examples/static-hello/) — **not** `*.dc.html`.
 
 ## Key files
 
@@ -28,7 +31,7 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 - [templates/](templates/): 84 copyable starting points (`.dc.html`); `email-safe/` send-ready emails; `kitchen-sink.html`; `playground.html`
 - [guidelines/](guidelines/): specimen cards + `atomic-view.html` (portable component grid) — host product surface is Storybook at `/`
 - [examples/static-hello/](examples/static-hello/): zero-install static consumer (Stitch / plain HTML)
-- [examples/npm-hello/](examples/npm-hello/): first registry **browser** consumer — `@cyberskill/design@1.1.1` legacy entry (Lumi · Hỏa · plasma); Status Hub teams swap to `thuy`; Next/SSR apps use default `@cyberskill/design` React entry instead
+- [examples/npm-hello/](examples/npm-hello/): first registry **browser** consumer — `@cyberskill/design@1.3.9` legacy entry (Lumi · Hỏa · plasma); Status Hub teams swap to `thuy`; Next/SSR apps use default `@cyberskill/design` React entry instead
 - [examples/native/](examples/native/): SwiftUI / Compose / Flutter sample apps + store scaffolds — Compose is **Android Studio**-first (no committed `gradlew`; see `examples/native/README.md`)
 - [ui_kits/](ui_kits/): product recreations — status-hub · website · deck
 - [fonts/](fonts/): self-hosted Be Vietnam Pro (UI) + Space Grotesk (opt-in display, `--cs-font-family-display`) + JetBrains Mono woff2
@@ -37,12 +40,15 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 - [DESIGN.md](DESIGN.md): generated open-spec surface (doctrine + tokens + inventory) for Stitch-style consumers — pinned to DTCG by the design-md-parity gate
 - [SKILL.md](SKILL.md): agent entry — hard rules + fast orientation
 - [CONTRIBUTING.md](CONTRIBUTING.md): one-page onboarding for extending the system
-- [VERSION](VERSION): pinned 1.1.1 (matches [package.json](package.json))
+- [docs/doctrine.md](docs/doctrine.md): expansion rule, verification depth, immutables
+- [VERSION](VERSION): pinned 1.3.9 (matches [package.json](package.json))
 
 ## Docs — consumers
 
-- [docs/consuming.md](docs/consuming.md): adopting & upgrading, Claude Code vs Stitch dual path, package name `@cyberskill/design`; first registry install at [examples/npm-hello/](examples/npm-hello/) (Lumi · Hỏa · plasma); native mirrors at [examples/native/](examples/native/) (SwiftUI / Compose / Flutter samples)
-- [docs/release-notes.md](docs/release-notes.md): curated product highlights (not a changelog) — includes `@cyberskill/design@1.1.1` Trusted Publishing / grant pointer
+Published on Storybook **Docs** (`design.cyberskill.world`) and in [docs/viewer.html](docs/viewer.html) (EN|VI).
+
+- [docs/consuming.md](docs/consuming.md): adopting & upgrading, DC-capable vs static dual path, package name `@cyberskill/design`; first registry install at [examples/npm-hello/](examples/npm-hello/) (Lumi · Hỏa · plasma); native mirrors at [examples/native/](examples/native/) (SwiftUI / Compose / Flutter samples)
+- [docs/release-notes.md](docs/release-notes.md): curated product highlights (not a changelog) — includes `@cyberskill/design@1.3.9` Trusted Publishing / grant pointer
 - [docs/consumer-grant.md](docs/consumer-grant.md): written npm grant (CyberSkill portfolio; UNLICENSED)
 - [docs/conventions.md](docs/conventions.md): authoring rules (naming grammar, the four axes)
 - [docs/design-styles.md](docs/design-styles.md): the live styling axes and the fixed liquid-glass treatment
@@ -51,13 +57,14 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 - [docs/template-schema-v2.md](docs/template-schema-v2.md): typed content-slot spec for templates
 - [docs/deploy.md](docs/deploy.md): deploying the live site (Vercel / VPS / any static host)
 - [docs/live-hub.md](docs/live-hub.md): Storybook at `/` is the product surface; surface map
-- [docs/storybook.md](docs/storybook.md): host Storybook product surface at `/`
+- [docs/storybook.md](docs/storybook.md): host Storybook product surface at `/` — Docs sidebar is the published reading surface for operator docs
 - [docs/figma.md](docs/figma.md): Figma / Tokens Studio import recipe
 - [docs/vi/](docs/vi/): Vietnamese mirror of every operator-facing `docs/*.md`
 - [docs/viewer.html](docs/viewer.html): reader UI (EN|VI toggle for `docs/*.md`)
 
 ## Docs — maintainers
 
+- [docs/doctrine.md](docs/doctrine.md): expansion, verification, immutables
 - [docs/decisions.md](docs/decisions.md): recorded owner decisions + open maintainer tasks
 - [docs/ci-cd.md](docs/ci-cd.md): CI/CD automation — workflow, headless gate runner, provenance pre-check
 - [docs/quality-gates.md](docs/quality-gates.md): benchmark reference — every quality gate, its assertion, pass criterion, where it runs
@@ -66,7 +73,7 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 
 ## Non-negotiables
 
-- [CONTRIBUTING.md](CONTRIBUTING.md): the full non-negotiables list (with `docs/conventions.md`)
+- [CONTRIBUTING.md](CONTRIBUTING.md): the full non-negotiables list (with `docs/doctrine.md` and `docs/conventions.md`)
 - [tokens/colors.css](tokens/colors.css): immutable Umber/Ochre anchors · one accent per surface
 - [base/a11y.css](base/a11y.css): APCA Lc ≥ 75 body text · ≥44px touch targets · 3px ochre focus ring · honour `prefers-reduced-motion`/`prefers-contrast`
 - [docs/conventions.md](docs/conventions.md): Vietnamese-first bilingual — every UI string ships an EN + VN pair, diacritics preserved

package/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@cyberskill/design",
-  "version": "1.2.0",
+  "version": "1.3.9",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/cyberskill-official/design-system.git"
+    "url": "git+https://github.com/cyberskill-official/design.git"
   },
   "module": "_esm/react.mjs",
   "types": "_esm/react.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "./_ds_bundle.js",
+    "./_esm/cs.mjs",
+    "./image-slot.js",
+    "./ui_kits/**/*.js",
+    "./ui_kits/**/*.jsx"
+  ],
   "exports": {
     ".": {
       "types": "./_esm/react.d.ts",
@@ -23,6 +31,7 @@
     "./legacy": {
       "import": "./_esm/cs.mjs"
     },
+    "./components/*": "./components/*",
     "./styles.css": "./styles.css",
     "./tokens/*": "./tokens/*",
     "./_ds_bundle.js": "./_ds_bundle.js",
@@ -46,14 +55,18 @@
     "_ds_manifest.json",
     "llms.txt",
     "SKILL.md",
-    "docs/",
+    "docs/*.md",
+    "docs/vi/",
+    "docs/viewer.html",
     "components/",
     "templates/",
     "guidelines/",
     "ui_kits/",
+    "_vendor/",
     "DESIGN.md",
     "VERSION",
-    "dist/styles.min.css"
+    "dist/styles.min.css",
+    "THIRD-PARTY-NOTICES.md"
   ],
   "keywords": [
     "design-system",
@@ -68,12 +81,12 @@
     "build:bundle": "node scripts/build-bundle.mjs",
     "build:react-entry": "node scripts/generate-react-entry.mjs",
     "build:design-md": "node scripts/generate-design-md.mjs",
-    "prepublishOnly": "npm run build:bundle && npm run build:react-entry && node scripts/generate-design-md.mjs --check",
+    "prepublishOnly": "npm run build:bundle && npm run build:react-entry && npm run build:styles && node scripts/generate-design-md.mjs --check && node scripts/flatten-styles.mjs --check && node scripts/generate-contrast-report.mjs --check && npm run version:stamp:check",
     "code-connect:generate": "node _audit/ci/generate-code-connect.mjs",
     "code-connect:dry-run": "node _audit/ci/code-connect-publish.mjs --dry-run",
     "npm:pack-dry-run": "node _audit/ci/npm-publish.mjs --dry-run",
     "native:store-dry-run": "node _audit/ci/native-store-dry-run.mjs --dry-run",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --host 127.0.0.1",
     "build:storybook": "storybook build -o storybook-static && node scripts/stamp-storybook-freshness.mjs",
     "build:site": "npm run build:storybook && node scripts/vercel-static-output.mjs",
     "verify:serve": "python3 -m http.server 8765 --bind 127.0.0.1",
@@ -82,7 +95,7 @@
     "test:nav-model": "node _audit/ci/test-nav-model.mjs",
     "test:ui-contracts": "node _audit/ci/test-health-tokens-contract.mjs",
     "test:form-paths": "node _audit/ci/test-form-paths.mjs",
-    "test:unit": "node _audit/ci/test-nav-model.mjs && node _audit/ci/test-health-tokens-contract.mjs && node _audit/ci/test-form-paths.mjs && node _audit/ci/test-storybook-contract.mjs && node _audit/ci/test-axe-coverage.mjs && node _audit/ci/test-figma-push-helpers.mjs && node _audit/ci/test-native-samples.mjs && node _audit/ci/test-code-connect.mjs && node _audit/ci/test-subtree-consume.mjs && node _audit/ci/test-react-entry.mjs && node _audit/ci/test-element-packs.mjs && node _audit/ci/test-i18n-builtins.mjs && node _audit/ci/test-storybook-freshness.mjs",
+    "test:unit": "node _audit/ci/test-nav-model.mjs && node _audit/ci/test-health-tokens-contract.mjs && node _audit/ci/test-docs-consistency.mjs && node _audit/ci/test-base-hex-allowlist.mjs && node _audit/ci/test-form-paths.mjs && node _audit/ci/test-storybook-contract.mjs && node _audit/ci/test-axe-coverage.mjs && node _audit/ci/test-figma-push-helpers.mjs && node _audit/ci/test-native-samples.mjs && node _audit/ci/test-code-connect.mjs && node _audit/ci/test-npm-publish.mjs && node _audit/ci/test-subtree-consume.mjs && node _audit/ci/test-react-entry.mjs && node _audit/ci/test-element-packs.mjs && node _audit/ci/test-i18n-builtins.mjs && node _audit/ci/test-format-currency.mjs && node _audit/ci/check-manifest-coverage.mjs && node _audit/ci/ci-verdict.mjs --selftest && node _audit/ci/test-pack-hygiene.mjs && npm run version:stamp:check && node _audit/ci/test-docs-lang-parity.mjs && node _audit/ci/test-docs-storybook-coverage.mjs && node _audit/ci/test-docs-link-check.mjs && node _audit/ci/test-email-safe.mjs && node _audit/ci/test-prop-parity.mjs",
     "test:audit-probe": "node _audit/ci/audit-probe-suite.mjs",
     "test:element-packs": "node _audit/ci/test-element-packs.mjs",
     "test:react-entry": "node _audit/ci/test-react-entry.mjs",
@@ -93,13 +106,20 @@
     "test:figma-helpers": "node _audit/ci/test-figma-push-helpers.mjs",
     "test:code-connect": "node _audit/ci/test-code-connect.mjs",
     "test:native-samples": "node _audit/ci/test-native-samples.mjs",
+    "test:storybook-freshness": "node _audit/ci/test-storybook-freshness.mjs",
+    "test:manifest-coverage": "node _audit/ci/check-manifest-coverage.mjs",
+    "test:pack-hygiene": "node _audit/ci/test-pack-hygiene.mjs",
     "tokens:elements": "node scripts/generate-element-packs.mjs",
     "tokens:contrast": "node scripts/generate-contrast-report.mjs",
     "build:styles": "node scripts/flatten-styles.mjs",
     "version:check": "node scripts/ds-version.mjs --check",
     "version:selftest": "node scripts/ds-version.mjs --selftest",
     "version:stamp": "node scripts/stamp-release-version.mjs",
-    "version:stamp:apply": "node scripts/stamp-release-version.mjs --apply"
+    "version:stamp:apply": "node scripts/stamp-release-version.mjs --apply",
+    "version:stamp:check": "node scripts/stamp-release-version.mjs --check",
+    "sbom": "npx --yes @cyclonedx/cyclonedx-npm@3.1.0 --output-file bom.cdx.json --output-reproducible --spec-version 1.5",
+    "test:docs-lang-parity": "node _audit/ci/test-docs-lang-parity.mjs",
+    "test:email-safe": "node _audit/ci/test-email-safe.mjs"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.4.9",

package/templates/app-shell/AppShell.dc.html

@@ -13,7 +13,7 @@
 <script src="./ds-base.js"></script>
 </helmet>
 <div data-theme="{{ rootTheme }}" lang="{{ langAttr }}" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" style="display:grid;grid-template-columns:248px 1fr;min-height:100vh;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-page)">
-  <a class="cs-skip" href="#main" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden">Skip to content</a>
+  <a class="cs-skip" href="#main" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden">{{ skipLabel }}</a>
   <nav class="cs-sidebar" aria-label="{{ navLabel }}">
     <div style="display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--cs-color-text-primary);padding:6px 12px 14px">
       <x-import component-from-global-scope="CyberSkillDS.Logo" size="28" hint-size="28px,28px"></x-import>CyberSkill
@@ -64,8 +64,8 @@ class Component extends DCLogic {
     const EL = {"Thổ · studio":["tho",""],"Thổ · clay":["tho","clay"],"Thổ · sand":["tho","sand"],"Hỏa · ember":["hoa",""],"Hỏa · lava":["hoa","lava"],"Hỏa · plasma":["hoa","plasma"],"Thủy · river":["thuy",""],"Thủy · ocean":["thuy","ocean"],"Thủy · mist":["thuy","mist"],"Mộc · leaf":["moc",""],"Mộc · bamboo":["moc","bamboo"],"Mộc · forest":["moc","forest"],"Kim · champagne":["kim",""],"Kim · steel":["kim","steel"],"Kim · titanium":["kim","titanium"]};
     const [elAttr, vaAttr] = EL[this.props.element] || EL["Thổ · studio"];
 const vn = this.props.language === "Tiếng Việt";
-    const en = { navLabel:"Workspace", nav1:"Overview", nav2:"Projects", nav3:"Releases", nav4:"Team", nav5:"Settings", searchPh:"Search projects…", newBtn:"New project", h1:"Overview", sub:"Every wish in flight, at a glance.", s1:"Projects", s2:"In progress", s3:"Shipped", s4:"Avg progress", s4d:"+6 this week", tblCap:"Projects", cKey:"Key", cName:"Project", cSquad:"Squad", cProg:"Progress", cStatus:"Status", stInprog:"In progress", stBlocked:"Blocked" };
-    const vi = { navLabel:"Không gian", nav1:"Tổng quan", nav2:"Dự án", nav3:"Phát hành", nav4:"Đội ngũ", nav5:"Cài đặt", searchPh:"Tìm dự án…", newBtn:"Dự án mới", h1:"Tổng quan", sub:"Mọi điều ước đang chạy, trong một cái nhìn.", s1:"Dự án", s2:"Đang làm", s3:"Đã ra mắt", s4:"Tiến độ TB", s4d:"+6 tuần này", tblCap:"Dự án", cKey:"Mã", cName:"Dự án", cSquad:"Nhóm", cProg:"Tiến độ", cStatus:"Trạng thái", stInprog:"Đang làm", stBlocked:"Bị chặn" };
+    const en = { skipLabel:"Skip to content", navLabel:"Workspace", nav1:"Overview", nav2:"Projects", nav3:"Releases", nav4:"Team", nav5:"Settings", searchPh:"Search projects…", newBtn:"New project", h1:"Overview", sub:"Every wish in flight, at a glance.", s1:"Projects", s2:"In progress", s3:"Shipped", s4:"Avg progress", s4d:"+6 this week", tblCap:"Projects", cKey:"Key", cName:"Project", cSquad:"Squad", cProg:"Progress", cStatus:"Status", stInprog:"In progress", stBlocked:"Blocked" };
+    const vi = { skipLabel:"Bỏ qua nội dung", navLabel:"Không gian", nav1:"Tổng quan", nav2:"Dự án", nav3:"Phát hành", nav4:"Đội ngũ", nav5:"Cài đặt", searchPh:"Tìm dự án…", newBtn:"Dự án mới", h1:"Tổng quan", sub:"Mọi điều ước đang chạy, trong một cái nhìn.", s1:"Dự án", s2:"Đang làm", s3:"Đã ra mắt", s4:"Tiến độ TB", s4d:"+6 tuần này", tblCap:"Dự án", cKey:"Mã", cName:"Dự án", cSquad:"Nhóm", cProg:"Tiến độ", cStatus:"Trạng thái", stInprog:"Đang làm", stBlocked:"Bị chặn" };
     const t = vn ? vi : en;
     return Object.assign({ langAttr: (this.props.language ?? "English") === "Tiếng Việt" ? "vi" : "en", elAttr, vaAttr, rootTheme: this.props.theme === "dark" ? "dark" : "",
       cols: [ { key: "key", header: t.cKey }, { key: "name", header: t.cName }, { key: "squad", header: t.cSquad }, { key: "pct", header: t.cProg, render: (r) => r.pct + "%" }, { key: "status", header: t.cStatus } ],

package/templates/app-shell/content-schema.json

@@ -2,6 +2,13 @@
   "$schemaVersion": "2.0",
   "template": "app-shell",
   "slots": [
+    {
+      "id": "skipLabel",
+      "type": "text",
+      "label": "Skip-to-content link label",
+      "maxLength": 40,
+      "required": true
+    },
     {
       "id": "navLabel",
       "type": "text",

package/templates/article/Article.dc.html

@@ -13,7 +13,7 @@
 <script src="./ds-base.js"></script>
 </helmet>
 <div data-theme="{{ rootTheme }}" lang="{{ langAttr }}" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" style="font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-page);min-height:100vh">
-  <a class="cs-skip" href="#main" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden">Skip to content</a>
+  <a class="cs-skip" href="#main" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden">{{ skipLabel }}</a>
   <main id="main">
   <article style="max-width:720px;margin:0 auto;padding:56px 28px 80px">
     <div style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-accent)">{{ eyebrow }}</div>
@@ -49,14 +49,14 @@ class Component extends DCLogic {
     const [elAttr, vaAttr] = EL[this.props.element] || EL["Thổ · studio"];
 const vn = this.props.language === "Tiếng Việt";
     const code = '<div class="cs-glass-card">\n  <h3>Design System v1.6</h3>\n</div>';
-    const en = {
+    const en = { skipLabel:"Skip to content",
       eyebrow:"Engineering · Design systems", h1:"Liquid Glass, now bound to components", meta:"18 Jul 2026 · 6 min read", badge:"New", authorTeam:"Platform",
       lede:"Five glass materials over the immutable Umber and Ochre anchors — and now they are one class away on any surface. Here's how the bindings work, and when to reach for each.",
       p1:"Liquid Glass is CyberSkill's default surface treatment: translucent, refractive layers that let warm gold light show through. The material scalars live in tokens; this release wires them to real components so a card, a nav, or a modal can opt in with a single class.",
       h2:"When to reach for glass", p2:"Keep dense content on solid surfaces. Reserve glass for nav, cards over imagery, and modals — always after an APCA check against the backdrop.",
       alertTitle:"Rule of thumb", alertBody:"If text sits directly on a busy photo, step up one glass tier or drop to a solid surface.",
       p3:"That's the whole surface. Everything paints from the same anchors — warm, honest, and Vietnamese-first by default."};
-    const vi = {
+    const vi = { skipLabel:"Bỏ qua nội dung",
       eyebrow:"Kỹ thuật · Design system", h1:"Liquid Glass, nay gắn vào component", meta:"18/07/2026 · đọc 6 phút", badge:"Mới", authorTeam:"Nền tảng",
       lede:"Năm vật liệu kính trên hai màu neo bất biến Umber và Ochre — và giờ chỉ cách một class trên mọi bề mặt. Đây là cách các liên kết hoạt động, và khi nào nên dùng từng loại.",
       p1:"Liquid Glass là lớp bề mặt mặc định của CyberSkill: những lớp mờ, khúc xạ, để ánh vàng ấm hiện qua. Hệ số vật liệu nằm trong token; bản phát hành này gắn chúng vào component thật, để một card, một nav hay một modal có thể bật lên chỉ bằng một class.",

package/templates/article/content-schema.json

@@ -2,6 +2,13 @@
   "$schemaVersion": "2.0",
   "template": "article",
   "slots": [
+    {
+      "id": "skipLabel",
+      "type": "text",
+      "label": "Skip-to-content link label",
+      "maxLength": 40,
+      "required": true
+    },
     {
       "id": "eyebrow",
       "type": "text",

package/templates/auth/Auth.dc.html

@@ -8,7 +8,7 @@
 </head>
 <body>
 <x-dc>
-<!-- @template name="Sign in" description="CyberSkill split sign-in — umber brand panel + form built from TextField, Switch, and Button. Bilingual (English · Tiếng Việt)." -->
+<!-- @template name="Sign in" description="CyberSkill split sign-in — umber brand panel + form built from TextField, Switch, Button, and Alert. formState tweak: default | loading | error | invalid. Bilingual (English · Tiếng Việt)." -->
 <helmet>
 <script src="./ds-base.js"></script>
 </helmet>
@@ -25,7 +25,7 @@
   }
 </style>
 <div class="cs-auth-shell" data-theme="{{ rootTheme }}" lang="{{ langAttr }}" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}">
-  <a class="cs-skip" href="#main" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden">Skip to content</a>
+  <a class="cs-skip" href="#main" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden">{{ skipLabel }}</a>
   <main id="main">
   <sc-if value="{{ showBrand }}" hint-placeholder-val="{{ true }}">
     <div class="cs-auth-brand">
@@ -34,7 +34,7 @@
       <div style="position:relative;z-index:1;display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px">
         <x-import component-from-global-scope="CyberSkillDS.Logo" size="40" hint-size="40px,40px"></x-import>CyberSkill
       </div>
-      <h2 style="position:relative;z-index:1;font-size:40px;font-weight:800;letter-spacing:-0.02em;line-height:1.08;color:var(--cs-accent-bright);margin:auto 0 8px">{{ brandH }}</h2>
+      <p style="position:relative;z-index:1;font-size:40px;font-weight:800;letter-spacing:-0.02em;line-height:1.08;color:var(--cs-accent-bright);margin:auto 0 8px">{{ brandH }}</p>
       <p style="position:relative;z-index:1;font-size:17px;opacity:0.9;margin:0;max-width:420px">{{ brandP }}</p>
     </div>
   </sc-if>
@@ -43,10 +43,13 @@
       <h1 style="font-size:30px;font-weight:800;letter-spacing:-0.02em;margin:0 0 4px">{{ title }}</h1>
       <p style="color:var(--cs-color-text-muted);margin:0 0 28px">{{ sub }}</p>
       <div style="display:grid;gap:16px">
-        <x-import component-from-global-scope="CyberSkillDS.TextField" label="{{ emailL }}" type="email" placeholder="you@cyberskill.world" hint-size="100%,74px"></x-import>
+        <sc-if value="{{ showError }}" hint-placeholder-val="{{ false }}">
+          <x-import component-from-global-scope="CyberSkillDS.Alert" variant="danger" title="{{ errTitle }}" hint-size="100%,64px">{{ errBody }}</x-import>
+        </sc-if>
+        <x-import component-from-global-scope="CyberSkillDS.TextField" label="{{ emailL }}" type="email" placeholder="you@cyberskill.world" error="{{ emailError }}" hint-size="100%,74px"></x-import>
         <x-import component-from-global-scope="CyberSkillDS.TextField" label="{{ pwL }}" type="password" placeholder="••••••••" hint-size="100%,74px"></x-import>
         <x-import component-from-global-scope="CyberSkillDS.Switch" label="{{ rememberL }}" checked="{{ false }}" hint-size="140px,26px"></x-import>
-        <x-import component-from-global-scope="CyberSkillDS.Button" variant="primary" full-width="{{ true }}" hint-size="100%,44px">{{ signInBtn }}</x-import>
+        <x-import component-from-global-scope="CyberSkillDS.Button" variant="primary" full-width="{{ true }}" loading="{{ isLoading }}" hint-size="100%,44px">{{ signInBtn }}</x-import>
         <x-import component-from-global-scope="CyberSkillDS.Button" variant="ghost" full-width="{{ true }}" hint-size="100%,44px">{{ lumiBtn }}</x-import>
       </div>
       <p style="text-align:center;font-size:13px;color:var(--cs-color-text-muted);margin-top:16px">{{ newHere }} <a href="#">{{ askAccess }}</a></p>
@@ -60,16 +63,29 @@
   &quot;language&quot;: {&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;English&quot;,&quot;Tiếng Việt&quot;],&quot;default&quot;:&quot;English&quot;,&quot;tsType&quot;:&quot;\&quot;English\&quot; | \&quot;Tiếng Việt\&quot;&quot;,&quot;section&quot;:&quot;Content&quot;},
   &quot;element&quot;: {&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;Thổ · studio&quot;,&quot;Thổ · clay&quot;,&quot;Thổ · sand&quot;,&quot;Hỏa · ember&quot;,&quot;Hỏa · lava&quot;,&quot;Hỏa · plasma&quot;,&quot;Thủy · river&quot;,&quot;Thủy · ocean&quot;,&quot;Thủy · mist&quot;,&quot;Mộc · leaf&quot;,&quot;Mộc · bamboo&quot;,&quot;Mộc · forest&quot;,&quot;Kim · champagne&quot;,&quot;Kim · steel&quot;,&quot;Kim · titanium&quot;],&quot;default&quot;:&quot;Thổ · studio&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Element (Ngũ Hành)&quot;},
   &quot;theme&quot;: {&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;\&quot;light\&quot; | \&quot;dark\&quot;&quot;,&quot;section&quot;:&quot;Theme&quot;},
-  &quot;showBrandPanel&quot;: {&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Layout&quot;}
+  &quot;showBrandPanel&quot;: {&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Layout&quot;},
+  &quot;formState&quot;: {&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;default&quot;,&quot;loading&quot;,&quot;error&quot;,&quot;invalid&quot;],&quot;default&quot;:&quot;default&quot;,&quot;tsType&quot;:&quot;\&quot;default\&quot; | \&quot;loading\&quot; | \&quot;error\&quot; | \&quot;invalid\&quot;&quot;,&quot;section&quot;:&quot;Form states&quot;}
 }">
 class Component extends DCLogic {
   renderVals() {
     const EL = {"Thổ · studio":["tho",""],"Thổ · clay":["tho","clay"],"Thổ · sand":["tho","sand"],"Hỏa · ember":["hoa",""],"Hỏa · lava":["hoa","lava"],"Hỏa · plasma":["hoa","plasma"],"Thủy · river":["thuy",""],"Thủy · ocean":["thuy","ocean"],"Thủy · mist":["thuy","mist"],"Mộc · leaf":["moc",""],"Mộc · bamboo":["moc","bamboo"],"Mộc · forest":["moc","forest"],"Kim · champagne":["kim",""],"Kim · steel":["kim","steel"],"Kim · titanium":["kim","titanium"]};
     const [elAttr, vaAttr] = EL[this.props.element] || EL["Thổ · studio"];
-const vn = this.props.language === "Tiếng Việt";
-    const en = { brandH:"Turn Your Will Into Real", brandP:"Sign in to your workspace — one page, three lenses across every wish in flight.", title:"Sign in", sub:"Welcome back. Sign in to continue.", emailL:"Work email", pwL:"Password", rememberL:"Remember me", signInBtn:"Sign in", lumiBtn:"✦ Talk to Lumi instead", newHere:"New here?", askAccess:"Ask for access", resetHint:"Forgot password?", resetLink:"Email your workspace admin to reset." };
-    const vi = { brandH:"Hiện Thực Hoá Ý Chí", brandP:"Đăng nhập vào không gian làm việc — một trang, ba lăng kính cho mọi điều ước đang chạy.", title:"Đăng nhập", sub:"Mừng bạn quay lại. Đăng nhập để tiếp tục.", emailL:"Email công việc", pwL:"Mật khẩu", rememberL:"Ghi nhớ đăng nhập", signInBtn:"Đăng nhập", lumiBtn:"✦ Trò chuyện với Lumi", newHere:"Lần đầu?", askAccess:"Xin quyền truy cập", resetHint:"Quên mật khẩu?", resetLink:"Gửi email cho quản trị không gian làm việc để đặt lại." };
-    return Object.assign({ langAttr: (this.props.language ?? "English") === "Tiếng Việt" ? "vi" : "en", elAttr, vaAttr, rootTheme: this.props.theme === "dark" ? "dark" : "", showBrand: this.props.showBrandPanel ?? true }, vn ? vi : en);
+    const vn = this.props.language === "Tiếng Việt";
+    const state = this.props.formState || "default";
+    const en = { skipLabel:"Skip to content", brandH:"Turn Your Will Into Real", brandP:"Sign in to your workspace — one page, three lenses across every wish in flight.", title:"Sign in", sub:"Welcome back. Sign in to continue.", emailL:"Work email", pwL:"Password", rememberL:"Remember me", signInBtn: state === "loading" ? "Signing in…" : "Sign in", lumiBtn:"✦ Talk to Lumi instead", newHere:"New here?", askAccess:"Ask for access", resetHint:"Forgot password?", resetLink:"Email your workspace admin to reset.", errTitle:"Sign-in failed", errBody:"Check your email and password, then try again.", emailErr:"Enter a valid work email." };
+    const vi = { skipLabel:"Bỏ qua nội dung", brandH:"Hiện Thực Hoá Ý Chí", brandP:"Đăng nhập vào không gian làm việc — một trang, ba lăng kính cho mọi điều ước đang chạy.", title:"Đăng nhập", sub:"Mừng bạn quay lại. Đăng nhập để tiếp tục.", emailL:"Email công việc", pwL:"Mật khẩu", rememberL:"Ghi nhớ đăng nhập", signInBtn: state === "loading" ? "Đang đăng nhập…" : "Đăng nhập", lumiBtn:"✦ Trò chuyện với Lumi", newHere:"Lần đầu?", askAccess:"Xin quyền truy cập", resetHint:"Quên mật khẩu?", resetLink:"Gửi email cho quản trị không gian làm việc để đặt lại.", errTitle:"Đăng nhập thất bại", errBody:"Kiểm tra email và mật khẩu, rồi thử lại.", emailErr:"Nhập email công việc hợp lệ." };
+    const copy = vn ? vi : en;
+    return Object.assign({
+      langAttr: (this.props.language ?? "English") === "Tiếng Việt" ? "vi" : "en",
+      elAttr, vaAttr,
+      rootTheme: this.props.theme === "dark" ? "dark" : "",
+      showBrand: this.props.showBrandPanel ?? true,
+      showError: state === "error",
+      isLoading: state === "loading",
+      emailError: state === "invalid" ? copy.emailErr : "",
+      errTitle: copy.errTitle,
+      errBody: copy.errBody
+    }, copy);
   }
 }
 </script>

package/templates/auth/content-schema.json

@@ -2,6 +2,13 @@
   "$schemaVersion": "2.0",
   "template": "auth",
   "slots": [
+    {
+      "id": "skipLabel",
+      "type": "text",
+      "label": "Skip-to-content link label",
+      "maxLength": 40,
+      "required": true
+    },
     {
       "id": "brandH",
       "type": "text",
@@ -81,6 +88,24 @@
       "type": "text",
       "label": "Password-reset action link",
       "maxLength": 64
+    },
+    {
+      "id": "errTitle",
+      "type": "text",
+      "label": "Sign-in error alert title (error/invalid states)",
+      "maxLength": 40
+    },
+    {
+      "id": "errBody",
+      "type": "text",
+      "label": "Sign-in error alert body",
+      "maxLength": 120
+    },
+    {
+      "id": "emailError",
+      "type": "text",
+      "label": "Email field validation error (invalid state)",
+      "maxLength": 64
     }
   ]
 }

package/templates/dashboard/Dashboard.dc.html

@@ -13,7 +13,7 @@
 <script src="./ds-base.js"></script>
 </helmet>
 <div data-theme="{{ rootTheme }}" lang="{{ langAttr }}" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" style="font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-page);min-height:100vh">
-  <a class="cs-skip" href="#main" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden">Skip to content</a>
+  <a class="cs-skip" href="#main" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden">{{ skipLabel }}</a>
   <main id="main">
   <header style="background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);border-bottom:3px solid var(--cs-accent)">
     <div style="max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 28px;flex-wrap:wrap">
@@ -23,7 +23,7 @@
         </span>
         <div>
           <h1 style="margin:0;font-size:22px;letter-spacing:0.2px">Status Hub</h1>
-          <p style="margin:2px 0 0;font-size:13px;opacity:0.8">{{ tagline }}</p>
+          <p style="margin:2px 0 0;font-size:13px;color:var(--cs-accent-on-strong)">{{ tagline }}</p>
         </div>
       </div>
       <span>
@@ -105,8 +105,8 @@ class Component extends DCLogic {
     const [elAttr, vaAttr] = EL[this.props.element] || EL["Thổ · studio"];
     const lens = this.lens;
 const vn = this.props.language === "Tiếng Việt";
-    const en = { tagline:"Portfolio · one page, three lenses", newBtn:"New project", s1:"Projects", s2:"In progress", s3:"Shipped", s4:"Avg progress", s4d:"+6 this week", boardL:"Board", tableL:"Table", c1:"Liquid Glass component bindings + 15 element packs.", c2:"Bilingual storytelling landing; lead capture live.", c3:"BRAIN memory store + human-in-the-loop gates.", stInprog:"In progress", stBlocked:"Blocked", tblCap:"Projects", cKey:"Key", cName:"Project", cSquad:"Squad", cProg:"Progress", cStatus:"Status" };
-    const vi = { tagline:"Danh mục · một trang, ba lăng kính", newBtn:"Dự án mới", s1:"Dự án", s2:"Đang làm", s3:"Đã ra mắt", s4:"Tiến độ TB", s4d:"+6 tuần này", boardL:"Bảng", tableL:"Danh sách", c1:"Gắn component Liquid Glass + 15 element pack.", c2:"Landing kể chuyện song ngữ; thu lead đã chạy.", c3:"Kho ký ức BRAIN + cổng có con người kiểm duyệt.", stInprog:"Đang làm", stBlocked:"Bị chặn", tblCap:"Dự án", cKey:"Mã", cName:"Dự án", cSquad:"Nhóm", cProg:"Tiến độ", cStatus:"Trạng thái" };
+    const en = { skipLabel:"Skip to content", tagline:"Portfolio · one page, three lenses", newBtn:"New project", s1:"Projects", s2:"In progress", s3:"Shipped", s4:"Avg progress", s4d:"+6 this week", boardL:"Board", tableL:"Table", c1:"Liquid Glass component bindings + 15 element packs.", c2:"Bilingual storytelling landing; lead capture live.", c3:"BRAIN memory store + human-in-the-loop gates.", stInprog:"In progress", stBlocked:"Blocked", tblCap:"Projects", cKey:"Key", cName:"Project", cSquad:"Squad", cProg:"Progress", cStatus:"Status" };
+    const vi = { skipLabel:"Bỏ qua nội dung", tagline:"Danh mục · một trang, ba lăng kính", newBtn:"Dự án mới", s1:"Dự án", s2:"Đang làm", s3:"Đã ra mắt", s4:"Tiến độ TB", s4d:"+6 tuần này", boardL:"Bảng", tableL:"Danh sách", c1:"Gắn component Liquid Glass + 15 element pack.", c2:"Landing kể chuyện song ngữ; thu lead đã chạy.", c3:"Kho ký ức BRAIN + cổng có con người kiểm duyệt.", stInprog:"Đang làm", stBlocked:"Bị chặn", tblCap:"Dự án", cKey:"Mã", cName:"Dự án", cSquad:"Nhóm", cProg:"Tiến độ", cStatus:"Trạng thái" };
     const t = vn ? vi : en;
     return Object.assign({ langAttr: (this.props.language ?? "English") === "Tiếng Việt" ? "vi" : "en", elAttr, vaAttr, rootTheme: this.props.theme === "dark" ? "dark" : "", lens, isBoard: lens === "board", isTable: lens === "table",
       tabs: [{ value: "board", label: t.boardL }, { value: "table", label: t.tableL, count: 3 }],

package/templates/dashboard/content-schema.json

@@ -2,6 +2,13 @@
   "$schemaVersion": "2.0",
   "template": "dashboard",
   "slots": [
+    {
+      "id": "skipLabel",
+      "type": "text",
+      "label": "Skip-to-content link label",
+      "maxLength": 40,
+      "required": true
+    },
     {
       "id": "tagline",
       "type": "text",

package/templates/delivery-change-note/DeliveryChangeNote.dc.html

@@ -60,7 +60,7 @@ class Component extends DCLogic {
 const vn = this.props.language === "Tiếng Việt";
     const en = {
       eyebrow:"Change note · under SOW-2026-014", h1:"Add A/B experiment kit to the checkout scope",
-      altTitle:"Văn bản thay đổi phạm vi",
+      altTitle:"Scope amendment note",
       intro:"Per the MSA, changes happen in writing, signed by both parties. This note states the change, why, and exactly what it does to scope, fee, and timeline — nothing else in the SOW moves.",
       changeH:"The change", changeP:"Add the optional A/B kit from quote QT-2026-0088: experiment framework on the new checkout plus the first two tests (copy variants; shipping-threshold banner).",
       whyH:"Why now", whyP:"The canary shows recoverable drop-off at the shipping step. Testing while the team is in the code is cheaper than a second engagement later. Honest trade-off: it adds a week to M3.",
@@ -70,7 +70,7 @@ const vn = this.props.language === "Tiếng Việt";
       sigMeta:"Name / title / date", clientName:"[Client Ltd]", rTimeB:"31 Oct 2026", rTimeA:"07 Nov 2026", partyA:"CyberSkill Co., Ltd"};
     const vi = {
       eyebrow:"Văn bản thay đổi · theo SOW-2026-014", h1:"Bổ sung bộ thử nghiệm A/B vào phạm vi thanh toán",
-      altTitle:"Change note · scope amendment",
+      altTitle:"Văn bản thay đổi phạm vi",
       intro:"Theo Hợp đồng khung (MSA), mọi thay đổi được lập bằng văn bản, có chữ ký hai bên. Văn bản này nêu thay đổi, lý do, và tác động chính xác đến phạm vi, phí và tiến độ — không điều nào khác trong SOW thay đổi.",
       changeH:"Nội dung thay đổi", changeP:"Bổ sung bộ A/B tùy chọn từ báo giá QT-2026-0088: khung thử nghiệm trên trang thanh toán mới cùng hai test đầu tiên (biến thể nội dung; banner ngưỡng phí vận chuyển).",
       whyH:"Vì sao lúc này", whyP:"Bản canary cho thấy tỷ lệ rớt có thể thu hồi ở bước vận chuyển. Thử nghiệm khi đội còn trong mã nguồn rẻ hơn một đợt hợp tác thứ hai về sau. Đánh đổi thành thật: thêm một tuần vào M3.",

package/templates/delivery-runbook/DeliveryRunbook.dc.html

@@ -65,7 +65,7 @@ class Component extends DCLogic {
     const [elAttr, vaAttr] = EL[this.props.element] || EL["Thổ · studio"];
 const vn = this.props.language === "Tiếng Việt";
     const en = {
-      eyebrow:"Handover · SOW-2026-014", h1:"Checkout & ops console — run it yourself", altTitle:"Sổ tay vận hành & bàn giao",
+      eyebrow:"Handover · SOW-2026-014", h1:"Checkout & ops console — run it yourself", altTitle:"Operations runbook & handover",
       intro:"Everything your team needs to own the system: what it is, where it runs, how to deploy, what watches it, and who to call. Built to last means you don't need us — and we're one message away if you do.",
       ovH:"System overview", ovP1:"Next.js storefront checkout (behind flag ", ovP2:") → pricing service (cache TTL 300s) → payment provider. Ops console reads the orders API with support-role auth. Recovery emails run on a nightly job.",
       envH:"Environments", thEnv:"Env", thFrom:"Deploys from", envProd:"Production", envProdFrom:"main · tagged release", envStg:"Staging", envStgFrom:"main · every merge", envSb:"Support sandbox", envSbFrom:"weekly snapshot",
@@ -75,7 +75,7 @@ const vn = this.props.language === "Tiếng Việt";
       contactsL:"Contacts", contactsBody:"Your on-call rota (primary) · CyberSkill: minh@cyberskill.world · escalation: vu@cyberskill.world · we reply within one business day",
       handedBy:"Handed over — CyberSkill Co., Ltd", acceptedBy:"Accepted — [Client Ltd]", sigMeta:"Name / title / date"};
     const vi = {
-      eyebrow:"Bàn giao · SOW-2026-014", h1:"Thanh toán & ops console — tự vận hành", altTitle:"Runbook & handover",
+      eyebrow:"Bàn giao · SOW-2026-014", h1:"Thanh toán & ops console — tự vận hành", altTitle:"Sổ tay vận hành & bàn giao",
       intro:"Tất cả những gì đội bạn cần để làm chủ hệ thống: nó là gì, chạy ở đâu, triển khai thế nào, ai giám sát, và gọi ai. Làm để bền lâu nghĩa là bạn không cần đến chúng tôi — và chúng tôi luôn cách một tin nhắn nếu cần.",
       ovH:"Tổng quan hệ thống", ovP1:"Trang thanh toán Next.js (sau cờ ", ovP2:") → dịch vụ định giá (cache TTL 300s) → nhà cung cấp thanh toán. Ops console đọc API đơn hàng với quyền support. Email khôi phục chạy theo tác vụ hằng đêm.",
       envH:"Môi trường", thEnv:"Môi trường", thFrom:"Triển khai từ", envProd:"Production", envProdFrom:"main · bản gắn thẻ", envStg:"Staging", envStgFrom:"main · mỗi lần merge", envSb:"Sandbox hỗ trợ", envSbFrom:"ảnh chụp hằng tuần",

package/templates/email-safe/email-announcement.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<html lang="vi" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -77,7 +77,7 @@
         <tr>
           <td class="px" bgcolor="#fbf4e9" style="background:#fbf4e9;padding:22px 32px;border-top:1px solid #e7d9c6;">
             <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#6e5a4c;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
-            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;">Unsubscribe / Huỷ đăng ký</a> · <a href="https://cyberskill.world/preferences" style="color:#6E3B0E;">Preferences / Tuỳ chọn</a></p>
+            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
           </td>
         </tr>
       </table>

package/templates/email-safe/email-dunning.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<html lang="vi" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -22,7 +22,7 @@
       <span style="font-family:Arial,Helvetica,sans-serif;font-size:19px;font-weight:bold;color:#ffffff;">CyberSkill</span>
     </td></tr>
     <!-- English -->
-    <tr><td class="px card" bgcolor="#ffffff" style="background:#ffffff;padding:32px 32px 4px;">
+    <tr><td class="px card" lang="en" bgcolor="#ffffff" style="background:#ffffff;padding:32px 32px 4px;">
       <p style="margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">A gentle nudge</p>
       <h1 class="ink" style="margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:25px;line-height:1.25;font-weight:bold;color:#45210E;">Invoice INV-2026-0142 is 7 days past due</h1>
       <p class="ink" style="margin:0 0 18px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#3d2c1e;">These things slip, no drama. If it's already on its way, thank you — please ignore this. If something about the invoice needs a look, just reply.</p>

package/templates/email-safe/email-investor.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<html lang="vi" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -77,7 +77,7 @@
         <tr>
           <td class="px" bgcolor="#fbf4e9" style="background:#fbf4e9;padding:22px 32px;border-top:1px solid #e7d9c6;">
             <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#6e5a4c;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
-            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;">Unsubscribe / Huỷ đăng ký</a> · <a href="https://cyberskill.world/preferences" style="color:#6E3B0E;">Preferences / Tuỳ chọn</a></p>
+            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
           </td>
         </tr>
       </table>

package/templates/email-safe/email-launch.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<html lang="vi" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -77,7 +77,7 @@
         <tr>
           <td class="px" bgcolor="#fbf4e9" style="background:#fbf4e9;padding:22px 32px;border-top:1px solid #e7d9c6;">
             <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#6e5a4c;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
-            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;">Unsubscribe / Huỷ đăng ký</a> · <a href="https://cyberskill.world/preferences" style="color:#6E3B0E;">Preferences / Tuỳ chọn</a></p>
+            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
           </td>
         </tr>
       </table>