@cyberskill/design 1.1.1 → 1.3.8

package/templates/bod-resolution/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/bod-resolution/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/culture-event-invite/CultureEventInvite.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Culture · Event invite · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="./support.js"></script>
@@ -14,7 +15,7 @@
 </helmet>
 <div lang="{{ langAttr }}" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" style="background:#efe6d8;padding:32px 16px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);min-height:100vh">
   <div style="max-width:600px;margin:0 auto;background:var(--cs-color-surface-panel);border-radius:16px;overflow:hidden;box-shadow:var(--cs-shadow-sm)">
-    <div style="position:relative;overflow:hidden;background:var(--cs-accent-strong);padding:34px 32px;text-align:center;color:#fff">
+    <div style="position:relative;overflow:hidden;background:var(--cs-accent-strong);padding:34px 32px;text-align:center;color:var(--cs-accent-on-strong)">
       <image-slot id="cs-culture-hero" shape="rect" placeholder="Drop an event photo" style="position:absolute;inset:0"></image-slot>
       <div class="cs-aurora-wash" style="position:absolute;inset:0;opacity:0.5;pointer-events:none"></div>
       <div style="position:absolute;inset:0;pointer-events:none;background:rgba(42,26,13,0.5)"></div>

package/templates/culture-event-invite/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/culture-event-invite/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/dashboard/Dashboard.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Dashboard · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="./support.js"></script>
@@ -12,7 +13,9 @@
 <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">
-  <header style="background:var(--cs-accent-strong);color:#fff;border-bottom:3px solid var(--cs-accent)">
+  <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">
       <div style="display:flex;align-items:center;gap:14px">
         <span style="width:42px;height:42px;border-radius:12px;background:var(--cs-accent-bright);display:grid;place-items:center;overflow:hidden">
@@ -20,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>
@@ -42,7 +45,7 @@
     </div>
 
     <sc-if value="{{ isBoard }}" hint-placeholder-val="{{ true }}">
-      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px">
+      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:18px">
         <div style="background:var(--cs-color-surface-panel);border:1px solid var(--cs-accent);border-radius:var(--cs-radius-lg);padding:18px">
           <div style="display:flex;align-items:baseline;justify-content:space-between;gap:8px">
             <h3 style="margin:0;font-size:15px"><span style="font-family:var(--cs-font-family-mono);color:var(--cs-color-text-accent);font-weight:700">CDS</span> · Design System v1.6</h3>
@@ -85,6 +88,7 @@
       </div>
     </sc-if>
   </div>
+</main>
 </div>
 </x-dc>
 <script type="text/x-dc" data-dc-script data-props="{
@@ -101,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/dashboard/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/dashboard/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/delivery-change-note/DeliveryChangeNote.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Delivery · Change note · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="omelette-owns-print" content="1">
@@ -59,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.",
@@ -69,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-change-note/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/delivery-change-note/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/delivery-kickoff/DeliveryKickoff.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Delivery · Kickoff doc · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="omelette-owns-print" content="1">
@@ -48,7 +49,7 @@
     <h2 class="cs-avoid" style="font-size:14px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">{{ risksH }}</h2>
     <p style="font-size:13px;line-height:1.7;margin:0 0 22px;color:var(--cs-color-text-muted)">{{ risksP }}</p>
     <div class="cs-avoid" style="display:flex;align-items:center;gap:20px;background:var(--cs-accent-strong);border-radius:12px;padding:16px 22px">
-      <div style="flex:1;color:#fff;font-size:13px;line-height:1.55"><b style="color:var(--cs-accent-bright)">{{ linksL }}</b> {{ linksBody }}</div>
+      <div style="flex:1;color:var(--cs-accent-on-strong);font-size:13px;line-height:1.55"><b style="color:var(--cs-accent-on-strong)">{{ linksL }}</b> {{ linksBody }}</div>
     </div>
   </div>
 </div>

package/templates/delivery-kickoff/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();
+  }
 })();