@cyberskill/design 1.1.0 → 1.2.0

package/templates/tech-retro/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/tech-retro/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/tech-rfc/TechRfc.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Tech · RFC / design doc · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="./support.js"></script>
@@ -13,7 +14,7 @@
 </helmet>
 <div data-theme="{{ rootTheme }}" lang="{{ langAttr }}" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" style="background:var(--cs-color-surface-raised);min-height:100vh;padding:40px 16px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)">
   <div style="max-width:820px;margin:0 auto;background:var(--cs-color-surface-panel);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);box-shadow:var(--cs-shadow-sm);overflow:hidden">
-    <header style="background:var(--cs-accent-strong);color:#fff;padding:26px 48px;display:flex;align-items:center;gap:12px">
+    <header style="background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);padding:26px 48px;display:flex;align-items:center;gap:12px">
       <x-import component-from-global-scope="CyberSkillDS.Logo" size="28" hint-size="28px,28px"></x-import>
       <span style="font-weight:800;font-size:16px">CyberSkill · RFC</span>
       <span style="margin-left:auto"><x-import component-from-global-scope="CyberSkillDS.Badge" variant="ochre" hint-size="90px,22px">{{ badge }}</x-import></span>

package/templates/tech-rfc/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/tech-rfc/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-appointment-transfer/VnAppointmentTransfer.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>HR Suite · Quyết định bổ nhiệm / điều chuyển — Appointment & Transfer Decision · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="omelette-owns-print" content="1">
@@ -13,76 +14,76 @@
 <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>· Quyết định bổ nhiệm / điều chuyển</span><span style="margin-left:auto;font-family:var(--cs-font-family-mono)">Số/No. <span style="background:#FDE68A;padding:0 3px">.....</span>/2026/QĐBN-CYBERSKILL</span>
+      <b style="color:var(--cs-color-brand-umber)">CyberSkill</b><span>· Quyết định bổ nhiệm / điều chuyển</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/QĐBN-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:23px;font-weight:800;color:var(--cs-color-brand-umber);letter-spacing:-0.01em;margin:0 0 3px;line-height:1.25">QUYẾT ĐỊNH BỔ NHIỆM / ĐIỀU CHUYỂN</h1>
-      <div style="font-size:13.5px;color:#3F4C55;font-style:italic">Appointment / Transfer Decision</div>
-      <div style="font-size:12.5px;margin-top:8px">Số / No.: <span style="background:#FDE68A;padding:0 3px">......</span>/2026/QĐBN-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:13.5px;color:var(--cs-doc-slate);font-style:italic">Appointment / Transfer Decision</div>
+      <div style="font-size:12.5px;margin-top:8px">Số / No.: <span style="background:var(--cs-doc-fill);padding:0 3px">......</span>/2026/QĐBN-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:13px;line-height:1.5;margin:0 0 1px">Căn cứ Bộ luật Lao động số 45/2019/QH14; căn cứ Điều lệ và cơ cấu tổ chức của Công ty; căn cứ nhu cầu công việc và năng lực của người lao động,</p>
-    <p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0 0 6px">Pursuant to the Labor Code No. 45/2019/QH14; pursuant to the Company's charter and organizational structure; and on the basis of business need and the employee's capability,</p>
+    <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">Pursuant to the Labor Code No. 45/2019/QH14; pursuant to the Company's charter and organizational structure; and on the basis of business need and the employee's capability,</p>
     <p style="font-size:13px;font-weight:700;line-height:1.5;margin:0 0 1px">TỔNG GIÁM ĐỐC QUYẾT ĐỊNH:</p>
-    <p style="font-size:12px;font-weight:700;line-height:1.4;color:#3F4C55;font-style:italic;margin:0 0 12px">THE CHIEF EXECUTIVE OFFICER DECIDES:</p>
+    <p style="font-size:12px;font-weight:700;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 12px">THE CHIEF EXECUTIVE OFFICER DECIDES:</p>
 
-    <h2 class="cs-avoid" style="font-size:12.5px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 6px">ĐIỀU 1 · LOẠI QUYẾT ĐỊNH <span style="font-weight:400;font-size:11px;color:#3F4C55;font-style:italic">Article 1 · Type of decision</span></h2>
+    <h2 class="cs-avoid" style="font-size:12.5px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 6px">ĐIỀU 1 · LOẠI QUYẾT ĐỊNH <span style="font-weight:400;font-size:11px;color:var(--cs-doc-slate);font-style:italic">Article 1 · Type of decision</span></h2>
     <div style="display:grid;gap:6px;margin-bottom:8px">
-      <div><p style="font-size:13px;line-height:1.45;margin:0">☐ Bổ nhiệm (thăng chức, giao thêm chức vụ quản lý)</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:1px 0 0">☐ Appointment (promotion, or taking on a management role)</p></div>
-      <div><p style="font-size:13px;line-height:1.45;margin:0">☐ Điều chuyển thường xuyên (thay đổi vị trí lâu dài — cần Phụ lục sửa đổi HĐLĐ)</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:1px 0 0">☐ Permanent transfer (a lasting change of role — requires a Labor Contract Amendment Appendix)</p></div>
-      <div><p style="font-size:13px;line-height:1.45;margin:0">☐ Điều chuyển tạm thời theo Điều 29 Bộ luật Lao động (tối đa 60 ngày làm việc cộng dồn trong 01 năm, báo trước ít nhất 03 ngày làm việc)</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:1px 0 0">☐ Temporary reassignment under Article 29 of the Labor Code (maximum 60 cumulative working days in a year, on at least 03 working days' notice)</p></div>
-      <div><p style="font-size:13px;line-height:1.45;margin:0">☐ Miễn nhiệm / thôi giữ chức vụ</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:1px 0 0">☐ Removal from a position</p></div>
+      <div><p style="font-size:13px;line-height:1.45;margin:0">☐ Bổ nhiệm (thăng chức, giao thêm chức vụ quản lý)</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">☐ Appointment (promotion, or taking on a management role)</p></div>
+      <div><p style="font-size:13px;line-height:1.45;margin:0">☐ Điều chuyển thường xuyên (thay đổi vị trí lâu dài — cần Phụ lục sửa đổi HĐLĐ)</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">☐ Permanent transfer (a lasting change of role — requires a Labor Contract Amendment Appendix)</p></div>
+      <div><p style="font-size:13px;line-height:1.45;margin:0">☐ Điều chuyển tạm thời theo Điều 29 Bộ luật Lao động (tối đa 60 ngày làm việc cộng dồn trong 01 năm, báo trước ít nhất 03 ngày làm việc)</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">☐ Temporary reassignment under Article 29 of the Labor Code (maximum 60 cumulative working days in a year, on at least 03 working days' notice)</p></div>
+      <div><p style="font-size:13px;line-height:1.45;margin:0">☐ Miễn nhiệm / thôi giữ chức vụ</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">☐ Removal from a position</p></div>
     </div>
     <div class="cs-avoid" style="background:#FBF4E9;border:1px solid var(--cs-color-border-default);border-radius:8px;padding:9px 13px;margin-bottom:14px">
       <p style="font-size:12px;line-height:1.45;margin:0 0 1px"><b>Ghi chú soạn thảo:</b> Điều chuyển THƯỜNG XUYÊN là thay đổi hợp đồng lao động: phải có sự đồng ý của người lao động và phải ký Phụ lục sửa đổi HĐLĐ. Điều chuyển TẠM THỜI theo Điều 29 thì không cần đồng ý, nhưng bị giới hạn 60 ngày và phải báo trước.</p>
-      <p style="font-size:11px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0"><b>Drafting note:</b> A PERMANENT transfer changes the labor contract: it needs the employee's agreement and a signed Amendment Appendix. A TEMPORARY reassignment under Article 29 does not need agreement, but is capped at 60 days and requires notice.</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 PERMANENT transfer changes the labor contract: it needs the employee's agreement and a signed Amendment Appendix. A TEMPORARY reassignment under Article 29 does not need agreement, but is capped at 60 days and requires notice.</p>
     </div>
 
-    <h2 class="cs-avoid" style="font-size:12.5px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 6px">ĐIỀU 2 · NGƯỜI LAO ĐỘNG <span style="font-weight:400;font-size:11px;color:#3F4C55;font-style:italic">Article 2 · The employee</span></h2>
+    <h2 class="cs-avoid" style="font-size:12.5px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 6px">ĐIỀU 2 · NGƯỜI LAO ĐỘNG <span style="font-weight:400;font-size:11px;color:var(--cs-doc-slate);font-style:italic">Article 2 · The employee</span></h2>
     <table class="cs-avoid" style="width:100%;border-collapse:collapse;font-size:12px;margin:0 0 14px">
-      <thead><tr style="background:var(--cs-color-brand-umber);color:#fff"><th style="text-align:left;padding:5px 9px;font-size:10px;width:170px">Nội dung <i style="font-weight:400">Item</i></th><th style="text-align:left;padding:5px 9px;font-size:10px">Hiện tại <i style="font-weight:400">Current</i></th><th style="text-align:left;padding:5px 9px;font-size:10px">Sau quyết định <i style="font-weight:400">After</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:170px">Nội dung <i style="font-weight:400">Item</i></th><th style="text-align:left;padding:5px 9px;font-size:10px">Hiện tại <i style="font-weight:400">Current</i></th><th style="text-align:left;padding:5px 9px;font-size:10px">Sau quyết định <i style="font-weight:400">After</i></th></tr></thead>
       <tbody>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Họ và tên<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Full name</div></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td><td style="padding:6px 9px">—</td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Chức danh<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Position</div></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Bộ phận<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Department</div></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Quản lý trực tiếp<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Line manager</div></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Bậc lương (P1)<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Salary grade (P1)</div></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td></tr>
-        <tr><td style="padding:6px 9px;font-weight:600">Mức lương P1 (VNĐ/tháng)<div style="color:#3F4C55;font-style:italic;font-size:10.5px">P1 salary (VND/month)</div></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td><td style="padding:6px 9px"><span style="background:#FDE68A;padding:0 3px">..................</span></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Họ và tên<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Full name</div></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td><td style="padding:6px 9px">—</td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Chức danh<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Position</div></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Bộ phận<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Department</div></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Quản lý trực tiếp<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Line manager</div></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Bậc lương (P1)<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Salary grade (P1)</div></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td></tr>
+        <tr><td style="padding:6px 9px;font-weight:600">Mức lương P1 (VNĐ/tháng)<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">P1 salary (VND/month)</div></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td><td style="padding:6px 9px"><span style="background:var(--cs-doc-fill);padding:0 3px">..................</span></td></tr>
       </tbody>
     </table>
 
-    <h2 class="cs-avoid" style="font-size:12.5px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 5px">ĐIỀU 3 · HIỆU LỰC <span style="font-weight:400;font-size:11px;color:#3F4C55;font-style:italic">Article 3 · Effect</span></h2>
+    <h2 class="cs-avoid" style="font-size:12.5px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 5px">ĐIỀU 3 · HIỆU LỰC <span style="font-weight:400;font-size:11px;color:var(--cs-doc-slate);font-style:italic">Article 3 · Effect</span></h2>
     <div style="display:grid;gap:8px;margin-bottom:14px">
-      <div><p style="font-size:13px;line-height:1.5;margin:0 0 1px">3.1. Quyết định có hiệu lực kể từ ngày <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">3.1. This Decision takes effect on <span style="background:#FDE68A;padding:0 3px">...... / ...... / ......</span>.</p></div>
-      <div><p style="font-size:13px;line-height:1.5;margin:0 0 1px">3.2. Đối với điều chuyển tạm thời: thời hạn từ <span style="background:#FDE68A;padding:0 3px">.../.../...</span> đến <span style="background:#FDE68A;padding:0 3px">.../.../...</span> (tối đa 60 ngày làm việc cộng dồn trong 01 năm). Tiền lương trả theo công việc mới; nếu thấp hơn thì giữ nguyên mức cũ trong 30 ngày làm việc, sau đó ít nhất bằng 85% mức cũ và không thấp hơn lương tối thiểu vùng (Điều 29 khoản 3).</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0">3.2. For a temporary reassignment: from <span style="background:#FDE68A;padding:0 3px">.../.../...</span> to <span style="background:#FDE68A;padding:0 3px">.../.../...</span> (maximum 60 cumulative working days in a year). Pay is at the rate for the new work; where that is lower, the previous rate is kept for 30 working days, and thereafter is at least 85% of it and not below the regional minimum wage (Article 29.3).</p></div>
-      <div><p style="font-size:13px;line-height:1.5;margin:0 0 1px">3.3. Đối với bổ nhiệm hoặc điều chuyển thường xuyên: Phụ lục sửa đổi HĐLĐ số <span style="background:#FDE68A;padding:0 3px">..................</span> được ký kèm theo Quyết định này.</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0">3.3. For an appointment or a permanent transfer: Labor Contract Amendment Appendix no. <span style="background:#FDE68A;padding:0 3px">..................</span> is signed together with this Decision.</p></div>
-      <div><p style="font-size:13px;line-height:1.5;margin:0 0 1px">3.4. Bản mô tả công việc mới được ban hành kèm theo và người lao động ký xác nhận.</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0">3.4. A new Job Description is issued with this Decision and acknowledged by the employee.</p></div>
+      <div><p style="font-size:13px;line-height:1.5;margin:0 0 1px">3.1. Quyết định có hiệu lực kể từ ngày <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">3.1. This Decision takes effect on <span style="background:var(--cs-doc-fill);padding:0 3px">...... / ...... / ......</span>.</p></div>
+      <div><p style="font-size:13px;line-height:1.5;margin:0 0 1px">3.2. Đối với điều chuyển tạm thời: thời hạn từ <span style="background:var(--cs-doc-fill);padding:0 3px">.../.../...</span> đến <span style="background:var(--cs-doc-fill);padding:0 3px">.../.../...</span> (tối đa 60 ngày làm việc cộng dồn trong 01 năm). Tiền lương trả theo công việc mới; nếu thấp hơn thì giữ nguyên mức cũ trong 30 ngày làm việc, sau đó ít nhất bằng 85% mức cũ và không thấp hơn lương tối thiểu vùng (Điều 29 khoản 3).</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0">3.2. For a temporary reassignment: from <span style="background:var(--cs-doc-fill);padding:0 3px">.../.../...</span> to <span style="background:var(--cs-doc-fill);padding:0 3px">.../.../...</span> (maximum 60 cumulative working days in a year). Pay is at the rate for the new work; where that is lower, the previous rate is kept for 30 working days, and thereafter is at least 85% of it and not below the regional minimum wage (Article 29.3).</p></div>
+      <div><p style="font-size:13px;line-height:1.5;margin:0 0 1px">3.3. Đối với bổ nhiệm hoặc điều chuyển thường xuyên: Phụ lục sửa đổi HĐLĐ số <span style="background:var(--cs-doc-fill);padding:0 3px">..................</span> được ký kèm theo Quyết định này.</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0">3.3. For an appointment or a permanent transfer: Labor Contract Amendment Appendix no. <span style="background:var(--cs-doc-fill);padding:0 3px">..................</span> is signed together with this Decision.</p></div>
+      <div><p style="font-size:13px;line-height:1.5;margin:0 0 1px">3.4. Bản mô tả công việc mới được ban hành kèm theo và người lao động ký xác nhận.</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0">3.4. A new Job Description is issued with this Decision and acknowledged by the employee.</p></div>
     </div>
 
     <div class="cs-avoid" style="background:var(--cs-color-surface-raised);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>Nơi nhận:</b> Người lao động; quản lý trực tiếp cũ và mới; bộ phận nhân sự; lưu hồ sơ.</p>
-      <p style="font-size:11px;line-height:1.4;color:#3F4C55;font-style:italic;margin:0"><b>Recipients:</b> The employee; the outgoing and incoming line managers; HR; the personnel file.</p>
+      <p style="font-size:11px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0"><b>Recipients:</b> The employee; the outgoing and incoming line managers; HR; the personnel file.</p>
     </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 (đã nhận và đồng ý)</div><div style="font-size:11px;color:#3F4C55;font-style:italic">The Employee (received and agreed)</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">TỔNG GIÁM ĐỐC</div><div style="font-size:11px;color:#3F4C55;font-style:italic">Chief Executive Officer</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, 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 (đã nhận và đồng ý)</div><div style="font-size:11px;color:var(--cs-doc-slate);font-style:italic">The Employee (received and agreed)</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">TỔNG GIÁM ĐỐC</div><div style="font-size:11px;color:var(--cs-doc-slate);font-style:italic">Chief Executive Officer</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, 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-appointment-transfer/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-appointment-transfer/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() {