@cyberskill/design 1.1.1 → 1.2.0

package/templates/vn-exit-handover/ds-base.js

@@ -1,9 +1,10 @@
 // Loads this design system into the template. In a consuming project, point
 // base at the bound DS folder relative to this file (e.g. '_ds/<folder>' at
 // the project root, '../_ds/<folder>' one level down) — one line to edit.
+// Artifact head standard (UX-002 / B1): ensure <html lang> + <title> from @template.
 (() => {
   const base = '../..';
-  for (const p of ['styles.css']) {
+  for (const p of ['dist/styles.min.css']) {
     const l = document.createElement('link');
     l.rel = 'stylesheet'; l.href = base + '/' + p;
     document.head.appendChild(l);
@@ -20,4 +21,35 @@
   };
   s.onerror = () => console.error('ds-base.js: failed to load ' + s.src + ' — if this is a consuming project, point the base line in ds-base.js at the bound _ds/<folder> tree relative to this page (e.g. _ds/<folder> at the project root, ../_ds/<folder> one level down); in a fresh design system this can just mean the bundle is not compiled yet');
   document.head.appendChild(s);
+
+  const syncLang = () => {
+    try {
+      const a = document.querySelector('[lang]');
+      const v = a && a.getAttribute('lang');
+      // Ignore unresolved DC holes like {{ langAttr }}
+      if (v && v.indexOf('{{') === -1) document.documentElement.setAttribute('lang', v);
+      else if (!document.documentElement.getAttribute('lang')) document.documentElement.setAttribute('lang', 'en');
+    } catch (e) { /* authoring host may sandbox */ }
+  };
+  const ensureHead = () => {
+    try {
+      if (!document.title || !document.title.trim()) {
+        const src = document.documentElement.innerHTML;
+        const m = src.match(/@template\s+name="([^"]+)"/);
+        if (m) document.title = m[1] + ' · CyberSkill';
+      }
+      syncLang();
+      const obs = new MutationObserver(syncLang);
+      obs.observe(document.body || document.documentElement, {
+        attributes: true,
+        attributeFilter: ['lang'],
+        subtree: true,
+      });
+    } catch (e) { /* authoring host may sandbox */ }
+  };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureHead);
+  } else {
+    ensureHead();
+  }
 })();

package/templates/vn-exit-handover/support.js

@@ -1070,16 +1070,15 @@
   }
 
   // src/cdn.ts
-  var REACT_URL = "https://unpkg.com/umd-react@19.2.8/dist/react.production.min.js";
-  var REACT_SRI = "sha384-/nh8CKeV7Pk42Gpda6L4DM1JtZ2bwPOi+eh9O7+a1Y22UkGs8+mw3aW1shQ9FV30";
-  var REACT_DOM_URL = "https://unpkg.com/umd-react@19.2.8/dist/react-dom.production.min.js";
-  var REACT_DOM_SRI = "sha384-rhLCB72qrpcezgY2QW0panvW9IeO32m94nvuDVRD/iEGHXoUbjtijL6Xi/Z5/mzu";
-  var BABEL_URL = "https://unpkg.com/@babel/standalone@7.29.0/babel.min.js";
-  var BABEL_SRI = "sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y";
-  function cdnScriptFor(url, sri) {
+  var REACT_LOCAL = "../../_vendor/react/react.production.min.js";
+  var REACT_DOM_LOCAL = "../../_vendor/react/react-dom.production.min.js";
+  var BABEL_LOCAL = "../../_vendor/babel/babel.min.js";
+  // Product surfaces are offline-first (UX-026 / D4): no third-party script origins.
+  // Host editors may still remap via window.__resources[localPath].
+  function localScriptFor(path) {
     const res = window.__resources;
-    const v = res ? res[url] : void 0;
-    return typeof v === "string" && v ? { src: v } : { src: url, integrity: sri };
+    const v = res ? res[path] : void 0;
+    return typeof v === "string" && v ? v : path;
   }
 
   // src/external.ts
@@ -1106,16 +1105,12 @@
     function ensureBabel() {
       if (window.Babel) return Promise.resolve();
       if (babelLoading) return babelLoading;
-      const babel = cdnScriptFor(BABEL_URL, BABEL_SRI);
+      const src = localScriptFor(BABEL_LOCAL);
       babelLoading = new Promise((res, rej) => {
         const s = document.createElement("script");
-        s.src = babel.src;
-        if (babel.integrity) {
-          s.integrity = babel.integrity;
-          s.crossOrigin = "anonymous";
-        }
+        s.src = src;
         s.onload = () => res();
-        s.onerror = rej;
+        s.onerror = () => rej(new Error("failed to load local Babel: " + src));
         document.head.appendChild(s);
       });
       return babelLoading;
@@ -1768,11 +1763,9 @@
   function loadReactUmd() {
     const w = window;
     if (w.React && w.ReactDOM) return Promise.resolve();
-    const react = cdnScriptFor(REACT_URL, REACT_SRI);
-    const reactDom = cdnScriptFor(REACT_DOM_URL, REACT_DOM_SRI);
     return Promise.all([
-      loadScript(react.src, react.integrity),
-      loadScript(reactDom.src, reactDom.integrity)
+      loadScript(localScriptFor(REACT_LOCAL)),
+      loadScript(localScriptFor(REACT_DOM_LOCAL))
     ]).then(() => void 0);
   }
   function init() {

package/templates/vn-foreign-employee-pack/VnForeignEmployeePack.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>HR Suite · Hồ sơ lao động người nước ngoài — Foreign Employee Work Permit Pack · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="omelette-owns-print" content="1">
@@ -13,79 +14,79 @@
 <script src="./ds-base.js"></script>
 <style>@page{size:A4;margin:23mm 20mm 20mm 20mm}@media print{html,body{background:#fff!important}.cs-desk{background:#fff!important;padding:0!important;min-height:0!important}.cs-sheet{box-shadow:none!important;border:none!important;max-width:none!important;border-radius:0!important;padding:0!important}.cs-avoid{break-inside:avoid}}</style>
 </helmet>
-<div lang="vi" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" class="cs-desk" style="background:#efe6d8;min-height:100vh;padding:40px 16px;font-family:var(--cs-font-family-ui);color:#1A1614">
+<div lang="vi" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" class="cs-desk" style="background:#efe6d8;min-height:100vh;padding:40px 16px;font-family:var(--cs-font-family-ui);color:var(--cs-doc-ink)">
   <div class="cs-sheet" style="max-width:794px;margin:0 auto;background:#fff;border:1px solid var(--cs-color-border-default);border-radius:12px;box-shadow:var(--cs-shadow-md);padding:56px 60px;text-align:left">
     <div style="display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--cs-color-text-muted);padding-bottom:6px;border-bottom:1px solid var(--cs-color-border-default);margin-bottom:14px">
       <x-import component-from-global-scope="CyberSkillDS.Logo" size="18" hint-size="18px,18px"></x-import>
-      <b style="color:var(--cs-color-brand-umber)">CyberSkill</b><span>· Hồ sơ lao động người nước ngoài</span><span style="margin-left:auto;font-family:var(--cs-font-family-mono)">Số/No. <span style="background:#FDE68A;padding:0 3px">.....</span>/2026/HSNN-CYBERSKILL</span>
+      <b style="color:var(--cs-color-brand-umber)">CyberSkill</b><span>· Hồ sơ lao động người nước ngoài</span><span style="margin-left:auto;font-family:var(--cs-font-family-mono)">Số/No. <span style="background:var(--cs-doc-fill);padding:0 3px">.....</span>/2026/HSNN-CYBERSKILL</span>
     </div>
     <div class="cs-avoid" style="display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-bottom:18px">
-      <div><div style="font-weight:800;font-size:11.5px;line-height:1.45">CÔNG TY CỔ PHẦN TƯ VẤN VÀ PHÁT TRIỂN GIẢI PHÁP PHẦN MỀM CYBERSKILL</div><div style="font-size:10px;color:#3F4C55;font-style:italic;line-height:1.45;margin-top:2px">CYBERSKILL SOFTWARE SOLUTIONS CONSULTANCY AND DEVELOPMENT JOINT STOCK COMPANY</div><div style="font-size:10.5px;margin-top:4px">Hiện Thực Hoá Ý Chí · <span style="color:#3F4C55;font-style:italic">Turn Your Will Into Real</span></div></div>
-      <div style="text-align:center"><div style="font-weight:800;font-size:11.5px;line-height:1.5">CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM</div><div style="font-weight:700;font-size:11px">Độc lập – Tự do – Hạnh phúc</div><div style="letter-spacing:0.1em;font-size:10px;margin:1px 0">———————————</div><div style="font-size:9.5px;color:#3F4C55;font-style:italic;line-height:1.4">The Socialist Republic of Vietnam · Independence – Freedom – Happiness</div></div>
+      <div><div style="font-weight:800;font-size:11.5px;line-height:1.45">CÔNG TY CỔ PHẦN TƯ VẤN VÀ PHÁT TRIỂN GIẢI PHÁP PHẦN MỀM CYBERSKILL</div><div style="font-size:10px;color:var(--cs-doc-slate);font-style:italic;line-height:1.45;margin-top:2px">CYBERSKILL SOFTWARE SOLUTIONS CONSULTANCY AND DEVELOPMENT JOINT STOCK COMPANY</div><div style="font-size:10.5px;margin-top:4px">Hiện Thực Hoá Ý Chí · <span style="color:var(--cs-doc-slate);font-style:italic">Turn Your Will Into Real</span></div></div>
+      <div style="text-align:center"><div style="font-weight:800;font-size:11.5px;line-height:1.5">CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM</div><div style="font-weight:700;font-size:11px">Độc lập – Tự do – Hạnh phúc</div><div style="letter-spacing:0.1em;font-size:10px;margin:1px 0">———————————</div><div style="font-size:9.5px;color:var(--cs-doc-slate);font-style:italic;line-height:1.4">The Socialist Republic of Vietnam · Independence – Freedom – Happiness</div></div>
     </div>
     <div class="cs-avoid" style="text-align:center;margin-bottom:14px">
       <h1 style="font-size:24px;font-weight:800;color:var(--cs-color-brand-umber);letter-spacing:-0.01em;margin:0 0 3px;line-height:1.25">HỒ SƠ LAO ĐỘNG NGƯỜI NƯỚC NGOÀI</h1>
-      <div style="font-size:14px;color:#3F4C55;font-style:italic">Foreign Employee Work Permit Pack</div>
-      <div style="font-size:12.5px;margin-top:8px">Số / No.: <span style="background:#FDE68A;padding:0 3px">......</span>/2026/HSNN-CYBERSKILL</div>
-      <div style="font-size:12px;margin-top:2px">Phiên bản / Version 1.0 · Hiệu lực từ / Effective from: <span style="background:#FDE68A;padding:0 3px">......</span> / <span style="background:#FDE68A;padding:0 3px">......</span> / <span style="background:#FDE68A;padding:0 3px">......</span></div>
+      <div style="font-size:14px;color:var(--cs-doc-slate);font-style:italic">Foreign Employee Work Permit Pack</div>
+      <div style="font-size:12.5px;margin-top:8px">Số / No.: <span style="background:var(--cs-doc-fill);padding:0 3px">......</span>/2026/HSNN-CYBERSKILL</div>
+      <div style="font-size:12px;margin-top:2px">Phiên bản / Version 1.0 · Hiệu lực từ / Effective from: <span style="background:var(--cs-doc-fill);padding:0 3px">......</span> / <span style="background:var(--cs-doc-fill);padding:0 3px">......</span> / <span style="background:var(--cs-doc-fill);padding:0 3px">......</span></div>
       <div style="color:var(--cs-accent);font-size:13px;letter-spacing:0.5em;margin-top:10px">◆ ◆ ◆</div>
     </div>
     <p style="font-size:13.5px;line-height:1.5;margin:0 0 1px">Hồ sơ này áp dụng khi Công ty tuyển dụng người lao động nước ngoài. Căn cứ Bộ luật Lao động (Điều 151 đến Điều 158) và Nghị định số 152/2020/NĐ-CP (sửa đổi bởi Nghị định 70/2023/NĐ-CP).</p>
-    <p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0 0 8px">This pack applies when the Company hires a foreign national. Pursuant to the Labor Code (Articles 151 to 158) and Decree No. 152/2020/ND-CP (as amended by Decree 70/2023/ND-CP).</p>
+    <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">This pack applies when the Company hires a foreign national. Pursuant to the Labor Code (Articles 151 to 158) and Decree No. 152/2020/ND-CP (as amended by Decree 70/2023/ND-CP).</p>
     <div class="cs-avoid" style="background:#FBF4E9;border:1px solid var(--cs-color-border-default);border-radius:8px;padding:9px 13px;margin-bottom:16px">
       <p style="font-size:12px;line-height:1.45;margin:0 0 1px"><b>Ghi chú soạn thảo:</b> Người nước ngoài làm việc tại Việt Nam mà không có giấy phép lao động sẽ bị trục xuất, và Công ty bị phạt tiền. Hợp đồng lao động KHÔNG được ký trước khi có giấy phép lao động.</p>
-      <p style="font-size:11px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0"><b>Drafting note:</b> A foreign national working in Vietnam without a work permit is deported and the Company is fined. The labor contract must NOT be signed before the work permit is issued.</p>
+      <p style="font-size:11px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0"><b>Drafting note:</b> A foreign national working in Vietnam without a work permit is deported and the Company is fined. The labor contract must NOT be signed before the work permit is issued.</p>
     </div>
 
-    <h2 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 1 · TRÌNH TỰ, THEO ĐÚNG THỨ TỰ <span style="font-weight:400;font-size:11.5px;color:#3F4C55;font-style:italic">Article 1 · The sequence, in order</span></h2>
+    <h2 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 1 · TRÌNH TỰ, THEO ĐÚNG THỨ TỰ <span style="font-weight:400;font-size:11.5px;color:var(--cs-doc-slate);font-style:italic">Article 1 · The sequence, in order</span></h2>
     <table class="cs-avoid" style="width:100%;border-collapse:collapse;font-size:12px;margin:0 0 18px">
-      <thead><tr style="background:var(--cs-color-brand-umber);color:#fff"><th style="text-align:left;padding:5px 9px;font-size:10px;width:38px">Bước <i style="font-weight:400">Step</i></th><th style="text-align:left;padding:5px 9px;font-size:10px">Nội dung <i style="font-weight:400">What happens</i></th><th style="text-align:left;padding:5px 9px;font-size:10px;width:150px">Thời hạn <i style="font-weight:400">Timing</i></th></tr></thead>
+      <thead><tr style="background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse,#fff)"><th style="text-align:left;padding:5px 9px;font-size:10px;width:38px">Bước <i style="font-weight:400">Step</i></th><th style="text-align:left;padding:5px 9px;font-size:10px">Nội dung <i style="font-weight:400">What happens</i></th><th style="text-align:left;padding:5px 9px;font-size:10px;width:150px">Thời hạn <i style="font-weight:400">Timing</i></th></tr></thead>
       <tbody>
         <sc-for list="{{ steps }}" as="s" hint-placeholder-count="6">
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">{{ s.n }}</td><td style="padding:6px 9px"><span>{{ s.vi }}</span><div style="color:#3F4C55;font-style:italic;font-size:11px">{{ s.en }}</div></td><td style="padding:6px 9px"><span>{{ s.tvi }}</span><div style="color:#3F4C55;font-style:italic;font-size:11px">{{ s.ten }}</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">{{ s.n }}</td><td style="padding:6px 9px"><span>{{ s.vi }}</span><div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">{{ s.en }}</div></td><td style="padding:6px 9px"><span>{{ s.tvi }}</span><div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">{{ s.ten }}</div></td></tr>
         </sc-for>
       </tbody>
     </table>
 
-    <h2 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 2 · DANH MỤC HỒ SƠ XIN GIẤY PHÉP LAO ĐỘNG <span style="font-weight:400;font-size:11.5px;color:#3F4C55;font-style:italic">Article 2 · Work permit application checklist</span></h2>
+    <h2 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 2 · DANH MỤC HỒ SƠ XIN GIẤY PHÉP LAO ĐỘNG <span style="font-weight:400;font-size:11.5px;color:var(--cs-doc-slate);font-style:italic">Article 2 · Work permit application checklist</span></h2>
     <div style="display:grid;gap:6px;margin-bottom:8px">
       <sc-for list="{{ checklist }}" as="c" hint-placeholder-count="8">
-      <div style="display:flex;gap:9px;align-items:flex-start"><span style="font-size:14px;line-height:1.3">☐</span><div><div style="font-size:13px;line-height:1.4">{{ c.vi }}</div><div style="font-size:11.5px;line-height:1.35;color:#3F4C55;font-style:italic">{{ c.en }}</div></div></div>
+      <div style="display:flex;gap:9px;align-items:flex-start"><span style="font-size:14px;line-height:1.3">☐</span><div><div style="font-size:13px;line-height:1.4">{{ c.vi }}</div><div style="font-size:11.5px;line-height:1.35;color:var(--cs-doc-slate);font-style:italic">{{ c.en }}</div></div></div>
       </sc-for>
     </div>
     <div class="cs-avoid" style="background:#FBF4E9;border:1px solid var(--cs-color-border-default);border-radius:8px;padding:9px 13px;margin-bottom:18px">
       <p style="font-size:12px;line-height:1.45;margin:0 0 1px"><b>Ghi chú soạn thảo:</b> Mọi giấy tờ do nước ngoài cấp phải được hợp pháp hóa lãnh sự và dịch công chứng sang tiếng Việt. Đây là bước tốn thời gian nhất — bắt đầu sớm.</p>
-      <p style="font-size:11px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0"><b>Drafting note:</b> Every foreign-issued document must be consular-legalized and translated into Vietnamese by a certified translator. This is the slowest step — start it early.</p>
+      <p style="font-size:11px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0"><b>Drafting note:</b> Every foreign-issued document must be consular-legalized and translated into Vietnamese by a certified translator. This is the slowest step — start it early.</p>
     </div>
 
-    <h2 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 6px">ĐIỀU 3 · TRƯỜNG HỢP MIỄN GIẤY PHÉP LAO ĐỘNG <span style="font-weight:400;font-size:11.5px;color:#3F4C55;font-style:italic">Article 3 · Work permit exemptions</span></h2>
+    <h2 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 6px">ĐIỀU 3 · TRƯỜNG HỢP MIỄN GIẤY PHÉP LAO ĐỘNG <span style="font-weight:400;font-size:11.5px;color:var(--cs-doc-slate);font-style:italic">Article 3 · Work permit exemptions</span></h2>
     <p style="font-size:13px;line-height:1.5;margin:0 0 1px">Một số trường hợp được miễn giấy phép lao động, nhưng vẫn phải làm thủ tục XÁC NHẬN MIỄN với Sở Lao động - Thương binh và Xã hội ít nhất 10 ngày trước ngày bắt đầu làm việc. Miễn giấy phép KHÔNG có nghĩa là miễn thủ tục.</p>
-    <p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0 0 8px">Some cases are exempt from the work permit, but an EXEMPTION CONFIRMATION must still be obtained from the provincial labour department at least 10 days before the start date. Exempt does not mean no paperwork.</p>
+    <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">Some cases are exempt from the work permit, but an EXEMPTION CONFIRMATION must still be obtained from the provincial labour department at least 10 days before the start date. Exempt does not mean no paperwork.</p>
     <div style="display:grid;gap:6px;margin-bottom:18px">
       <sc-for list="{{ exemptions }}" as="e" hint-placeholder-count="5">
-      <div style="display:flex;gap:9px;align-items:flex-start"><span style="font-size:14px;line-height:1.3">☐</span><div><div style="font-size:13px;line-height:1.4">{{ e.vi }}</div><div style="font-size:11.5px;line-height:1.35;color:#3F4C55;font-style:italic">{{ e.en }}</div></div></div>
+      <div style="display:flex;gap:9px;align-items:flex-start"><span style="font-size:14px;line-height:1.3">☐</span><div><div style="font-size:13px;line-height:1.4">{{ e.vi }}</div><div style="font-size:11.5px;line-height:1.35;color:var(--cs-doc-slate);font-style:italic">{{ e.en }}</div></div></div>
       </sc-for>
     </div>
 
-    <h2 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 6px">ĐIỀU 4 · SAU KHI ĐƯỢC CẤP PHÉP <span style="font-weight:400;font-size:11.5px;color:#3F4C55;font-style:italic">Article 4 · After the permit is issued</span></h2>
+    <h2 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 6px">ĐIỀU 4 · SAU KHI ĐƯỢC CẤP PHÉP <span style="font-weight:400;font-size:11.5px;color:var(--cs-doc-slate);font-style:italic">Article 4 · After the permit is issued</span></h2>
     <div style="display:grid;gap:5px;margin-bottom:16px">
-      <div><p style="font-size:13px;line-height:1.5;margin:0">a) Thời hạn hợp đồng lao động không được vượt quá thời hạn của giấy phép lao động (Điều 151 khoản 2).</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:1px 0 0">a) The term of the labor contract may not exceed the term of the work permit (Article 151.2).</p></div>
-      <div><p style="font-size:13px;line-height:1.5;margin:0">b) Người lao động nước ngoài tham gia bảo hiểm xã hội bắt buộc theo quy định hiện hành.</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:1px 0 0">b) A foreign employee participates in compulsory social insurance as currently required.</p></div>
-      <div><p style="font-size:13px;line-height:1.5;margin:0">c) Gia hạn giấy phép lao động phải nộp hồ sơ trong khoảng từ 45 đến 05 ngày trước ngày giấy phép hết hạn. Chỉ được gia hạn MỘT lần.</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:1px 0 0">c) A renewal must be filed between 45 and 05 days before the permit expires. It may be renewed ONCE only.</p></div>
-      <div><p style="font-size:13px;line-height:1.5;margin:0">d) Sau khi hết thời hạn gia hạn, phải xin cấp giấy phép lao động mới.</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:1px 0 0">d) Once the renewal expires, a fresh work permit must be applied for.</p></div>
-      <div><p style="font-size:13px;line-height:1.5;margin:0">e) Ghi nhận người lao động nước ngoài vào Sổ quản lý lao động.</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:1px 0 0">e) Record the foreign employee in the Labour Management Book.</p></div>
+      <div><p style="font-size:13px;line-height:1.5;margin:0">a) Thời hạn hợp đồng lao động không được vượt quá thời hạn của giấy phép lao động (Điều 151 khoản 2).</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">a) The term of the labor contract may not exceed the term of the work permit (Article 151.2).</p></div>
+      <div><p style="font-size:13px;line-height:1.5;margin:0">b) Người lao động nước ngoài tham gia bảo hiểm xã hội bắt buộc theo quy định hiện hành.</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">b) A foreign employee participates in compulsory social insurance as currently required.</p></div>
+      <div><p style="font-size:13px;line-height:1.5;margin:0">c) Gia hạn giấy phép lao động phải nộp hồ sơ trong khoảng từ 45 đến 05 ngày trước ngày giấy phép hết hạn. Chỉ được gia hạn MỘT lần.</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">c) A renewal must be filed between 45 and 05 days before the permit expires. It may be renewed ONCE only.</p></div>
+      <div><p style="font-size:13px;line-height:1.5;margin:0">d) Sau khi hết thời hạn gia hạn, phải xin cấp giấy phép lao động mới.</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">d) Once the renewal expires, a fresh work permit must be applied for.</p></div>
+      <div><p style="font-size:13px;line-height:1.5;margin:0">e) Ghi nhận người lao động nước ngoài vào Sổ quản lý lao động.</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">e) Record the foreign employee in the Labour Management Book.</p></div>
     </div>
 
     <div class="cs-avoid">
-      <p style="font-size:13px;line-height:1.5;margin:0 0 1px">Thành phố Hồ Chí Minh, ngày <span style="background:#FDE68A;padding:0 3px">......</span> tháng <span style="background:#FDE68A;padding:0 3px">......</span> năm <span style="background:#FDE68A;padding:0 3px">......</span></p>
-      <p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0 0 14px">Ho Chi Minh City, <span style="background:#FDE68A;padding:0 3px">......</span> / <span style="background:#FDE68A;padding:0 3px">......</span> / <span style="background:#FDE68A;padding:0 3px">......</span></p>
+      <p style="font-size:13px;line-height:1.5;margin:0 0 1px">Thành phố Hồ Chí Minh, ngày <span style="background:var(--cs-doc-fill);padding:0 3px">......</span> tháng <span style="background:var(--cs-doc-fill);padding:0 3px">......</span> năm <span style="background:var(--cs-doc-fill);padding:0 3px">......</span></p>
+      <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 14px">Ho Chi Minh City, <span style="background:var(--cs-doc-fill);padding:0 3px">......</span> / <span style="background:var(--cs-doc-fill);padding:0 3px">......</span> / <span style="background:var(--cs-doc-fill);padding:0 3px">......</span></p>
       <div style="display:grid;grid-template-columns:1fr 1fr;gap:44px">
-        <div style="text-align:center"><div style="font-weight:700;font-size:12.5px">NGƯỜI LAO ĐỘNG NƯỚC NGOÀI</div><div style="font-size:11px;color:#3F4C55;font-style:italic">The foreign employee</div><div style="font-size:10.5px;margin-top:1px">(Ký, ghi rõ họ tên / <i style="color:#3F4C55">Sign and state full name</i>)</div><div style="height:60px"></div><div style="border-top:1px solid #1A1614;width:70%;margin:0 auto"></div></div>
-        <div style="text-align:center"><div style="font-weight:700;font-size:12.5px">NGƯỜI SỬ DỤNG LAO ĐỘNG</div><div style="font-size:11px;color:#3F4C55;font-style:italic">The Employer</div><div style="font-size:10.5px;margin-top:1px">(Ký, ghi rõ họ tên và đóng dấu / <i style="color:#3F4C55">Sign, state full name, and affix seal</i>)</div><div style="height:60px"></div><div style="border-top:1px solid #1A1614;width:70%;margin:0 auto"></div></div>
+        <div style="text-align:center"><div style="font-weight:700;font-size:12.5px">NGƯỜI LAO ĐỘNG NƯỚC NGOÀI</div><div style="font-size:11px;color:var(--cs-doc-slate);font-style:italic">The foreign employee</div><div style="font-size:10.5px;margin-top:1px">(Ký, ghi rõ họ tên / <i style="color:var(--cs-doc-slate)">Sign and state full name</i>)</div><div style="height:60px"></div><div style="border-top:1px solid var(--cs-doc-ink);width:70%;margin:0 auto"></div></div>
+        <div style="text-align:center"><div style="font-weight:700;font-size:12.5px">NGƯỜI SỬ DỤNG LAO ĐỘNG</div><div style="font-size:11px;color:var(--cs-doc-slate);font-style:italic">The Employer</div><div style="font-size:10.5px;margin-top:1px">(Ký, ghi rõ họ tên và đóng dấu / <i style="color:var(--cs-doc-slate)">Sign, state full name, and affix seal</i>)</div><div style="height:60px"></div><div style="border-top:1px solid var(--cs-doc-ink);width:70%;margin:0 auto"></div></div>
       </div>
     </div>
 
-    <div style="border-top:1px solid var(--cs-color-border-default);padding-top:8px;margin-top:20px;display:flex;gap:10px;font-size:10.5px;color:var(--cs-color-text-muted);flex-wrap:wrap">Hiện Thực Hoá Ý Chí · <i style="color:#3F4C55">Turn Your Will Into Real</i><span>·</span>MST: 0316475200<span>·</span>info@cyberskill.world<span>·</span>(+84) 906 878 091<span style="margin-left:auto">Trang / Page 1</span></div>
+    <div style="border-top:1px solid var(--cs-color-border-default);padding-top:8px;margin-top:20px;display:flex;gap:10px;font-size:10.5px;color:var(--cs-color-text-muted);flex-wrap:wrap">Hiện Thực Hoá Ý Chí · <i style="color:var(--cs-doc-slate)">Turn Your Will Into Real</i><span>·</span>MST: 0316475200<span>·</span>info@cyberskill.world<span>·</span>(+84) 906 878 091<span style="margin-left:auto">Trang / Page 1</span></div>
   </div>
 </div>
 </x-dc>

package/templates/vn-foreign-employee-pack/ds-base.js

@@ -1,9 +1,10 @@
 // Loads this design system into the template. In a consuming project, point
 // base at the bound DS folder relative to this file (e.g. '_ds/<folder>' at
 // the project root, '../_ds/<folder>' one level down) — one line to edit.
+// Artifact head standard (UX-002 / B1): ensure <html lang> + <title> from @template.
 (() => {
   const base = '../..';
-  for (const p of ['styles.css']) {
+  for (const p of ['dist/styles.min.css']) {
     const l = document.createElement('link');
     l.rel = 'stylesheet'; l.href = base + '/' + p;
     document.head.appendChild(l);
@@ -20,4 +21,35 @@
   };
   s.onerror = () => console.error('ds-base.js: failed to load ' + s.src + ' — if this is a consuming project, point the base line in ds-base.js at the bound _ds/<folder> tree relative to this page (e.g. _ds/<folder> at the project root, ../_ds/<folder> one level down); in a fresh design system this can just mean the bundle is not compiled yet');
   document.head.appendChild(s);
+
+  const syncLang = () => {
+    try {
+      const a = document.querySelector('[lang]');
+      const v = a && a.getAttribute('lang');
+      // Ignore unresolved DC holes like {{ langAttr }}
+      if (v && v.indexOf('{{') === -1) document.documentElement.setAttribute('lang', v);
+      else if (!document.documentElement.getAttribute('lang')) document.documentElement.setAttribute('lang', 'en');
+    } catch (e) { /* authoring host may sandbox */ }
+  };
+  const ensureHead = () => {
+    try {
+      if (!document.title || !document.title.trim()) {
+        const src = document.documentElement.innerHTML;
+        const m = src.match(/@template\s+name="([^"]+)"/);
+        if (m) document.title = m[1] + ' · CyberSkill';
+      }
+      syncLang();
+      const obs = new MutationObserver(syncLang);
+      obs.observe(document.body || document.documentElement, {
+        attributes: true,
+        attributeFilter: ['lang'],
+        subtree: true,
+      });
+    } catch (e) { /* authoring host may sandbox */ }
+  };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureHead);
+  } else {
+    ensureHead();
+  }
 })();

package/templates/vn-foreign-employee-pack/support.js

@@ -1070,16 +1070,15 @@
   }
 
   // src/cdn.ts
-  var REACT_URL = "https://unpkg.com/umd-react@19.2.8/dist/react.production.min.js";
-  var REACT_SRI = "sha384-/nh8CKeV7Pk42Gpda6L4DM1JtZ2bwPOi+eh9O7+a1Y22UkGs8+mw3aW1shQ9FV30";
-  var REACT_DOM_URL = "https://unpkg.com/umd-react@19.2.8/dist/react-dom.production.min.js";
-  var REACT_DOM_SRI = "sha384-rhLCB72qrpcezgY2QW0panvW9IeO32m94nvuDVRD/iEGHXoUbjtijL6Xi/Z5/mzu";
-  var BABEL_URL = "https://unpkg.com/@babel/standalone@7.29.0/babel.min.js";
-  var BABEL_SRI = "sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y";
-  function cdnScriptFor(url, sri) {
+  var REACT_LOCAL = "../../_vendor/react/react.production.min.js";
+  var REACT_DOM_LOCAL = "../../_vendor/react/react-dom.production.min.js";
+  var BABEL_LOCAL = "../../_vendor/babel/babel.min.js";
+  // Product surfaces are offline-first (UX-026 / D4): no third-party script origins.
+  // Host editors may still remap via window.__resources[localPath].
+  function localScriptFor(path) {
     const res = window.__resources;
-    const v = res ? res[url] : void 0;
-    return typeof v === "string" && v ? { src: v } : { src: url, integrity: sri };
+    const v = res ? res[path] : void 0;
+    return typeof v === "string" && v ? v : path;
   }
 
   // src/external.ts
@@ -1106,16 +1105,12 @@
     function ensureBabel() {
       if (window.Babel) return Promise.resolve();
       if (babelLoading) return babelLoading;
-      const babel = cdnScriptFor(BABEL_URL, BABEL_SRI);
+      const src = localScriptFor(BABEL_LOCAL);
       babelLoading = new Promise((res, rej) => {
         const s = document.createElement("script");
-        s.src = babel.src;
-        if (babel.integrity) {
-          s.integrity = babel.integrity;
-          s.crossOrigin = "anonymous";
-        }
+        s.src = src;
         s.onload = () => res();
-        s.onerror = rej;
+        s.onerror = () => rej(new Error("failed to load local Babel: " + src));
         document.head.appendChild(s);
       });
       return babelLoading;
@@ -1768,11 +1763,9 @@
   function loadReactUmd() {
     const w = window;
     if (w.React && w.ReactDOM) return Promise.resolve();
-    const react = cdnScriptFor(REACT_URL, REACT_SRI);
-    const reactDom = cdnScriptFor(REACT_DOM_URL, REACT_DOM_SRI);
     return Promise.all([
-      loadScript(react.src, react.integrity),
-      loadScript(reactDom.src, reactDom.integrity)
+      loadScript(localScriptFor(REACT_LOCAL)),
+      loadScript(localScriptFor(REACT_DOM_LOCAL))
     ]).then(() => void 0);
   }
   function init() {