@cyberskill/design 1.1.1 → 1.3.8

package/templates/marketing-campaign-brief/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/marketing-campaign-brief/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/marketing-case-study/MarketingCaseStudy.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Marketing · Case study · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="omelette-owns-print" content="1">
@@ -16,7 +17,7 @@
 </helmet>
 <div lang="{{ langAttr }}" 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-color-text-primary)">
   <div class="cs-sheet" style="max-width:816px;margin:0 auto;background:#fff;border:1px solid var(--cs-color-border-default);border-radius:12px;box-shadow:var(--cs-shadow-md);overflow:hidden">
-    <div style="position:relative;overflow:hidden;background:var(--cs-accent-strong);color:#fff;padding:40px 56px 36px">
+    <div style="position:relative;overflow:hidden;background:var(--cs-color-brand-umber);color:#FFFDF8;padding:40px 56px 36px">
       <image-slot id="cs-case-hero" shape="rect" placeholder="Drop a result or product image" style="position:absolute;inset:0;z-index:0"></image-slot>
       <div class="cs-aurora-wash" style="position:absolute;inset:0;opacity:0.45;z-index:1;pointer-events:none"></div>
       <div style="position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(42,26,13,0.86),rgba(42,26,13,0.52) 60%,rgba(42,26,13,0.34))"></div>
@@ -42,8 +43,8 @@
       <sc-if value="{{ showQuote }}" hint-placeholder-val="{{ true }}">
       <blockquote class="cs-avoid" style="margin:0 0 24px;background:var(--cs-color-surface-raised);border-left:4px solid var(--cs-accent);border-radius:var(--cs-radius-md);padding:16px 20px;font-size:14px;line-height:1.65;font-style:italic">{{ quote }}<br><span style="font-style:normal;font-size:12px;color:var(--cs-color-text-muted)">— {{ quoteWho }}</span></blockquote>
       </sc-if>
-      <div class="cs-avoid" style="display:flex;align-items:center;gap:20px;background:var(--cs-accent-strong);border-radius:12px;padding:18px 24px">
-        <div style="flex:1;color:#fff"><div style="font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-accent-bright);font-weight:700;margin-bottom:2px">{{ ctaKicker }}</div><div style="font-size:13.5px;line-height:1.55">{{ ctaBody }}</div></div>
+      <div class="cs-avoid" style="display:flex;align-items:center;gap:20px;background:var(--cs-color-brand-umber);border-radius:12px;padding:18px 24px">
+        <div style="flex:1;color:#FFFDF8"><div style="font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-accent-bright);font-weight:700;margin-bottom:2px">{{ ctaKicker }}</div><div style="font-size:13.5px;line-height:1.55">{{ ctaBody }}</div></div>
         <span style="display:inline-block;background:var(--cs-accent-bright);color:var(--cs-accent-on);font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:var(--cs-radius-full);white-space:nowrap">{{ ctaBtn }}</span>
       </div>
     </div>
@@ -68,7 +69,7 @@ class Component extends DCLogic {
       quote:"\u201cWe described the outcome in two sentences. Twelve weeks later it was live — and it still runs itself.\u201d", quoteWho:"Product lead, Retailer A",
       ctaKicker:"Have a wish like this?", ctaBody:"Tell us the outcome in a sentence. We reply within one business day.", ctaBtn:"Make a wish →"};
     const vi = {
-      kicker:"Case study", stat1:"Đơn hoàn tất", stat2:"Thời gian thanh toán", stat3v:"12 tuần", stat3:"Từ điều ước đến ra mắt",
+      kicker:"Nghiên cứu tình huống", stat1:"Đơn hoàn tất", stat2:"Thời gian thanh toán", stat3v:"12 tuần", stat3:"Từ điều ước đến ra mắt",
       h1:"Điều ước", p1:"Cứ ba người mua thì một bỏ giỏ ở bước thanh toán, và bộ phận hỗ trợ không thấy vì sao. Yêu cầu, gói trong một câu: một trang thanh toán cứ thế chạy — và một console để vận hành mỗi ngày.",
       h2:"Cách chúng tôi định hình", p2:"Một cặp senior dựng lại thanh toán sau một feature flag và kiểm chứng trên 10% lưu lượng trước khi cắt chuyển. Ops console ra song song, nên hỗ trợ thấy được đơn hàng từ tuần thứ ba. Đánh đổi thành thật, nói trước: giữ nguyên nhà cung cấp thanh toán và dồn ngân sách vào nơi phễu rò rỉ.",
       h3:"Điều còn lại", p3:"Email khôi phục nay kéo về một phần năm số giỏ bị bỏ. Console xử lý hoàn tiền mà không cần đến kỹ thuật. Tài liệu, runbook và analytics được bàn giao gọn gàng — làm để chạy được, làm để bền lâu.",

package/templates/marketing-case-study/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/marketing-case-study/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/marketing-launch/MarketingLaunch.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Marketing · Launch announcement · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="./support.js"></script>
@@ -13,10 +14,10 @@
 </helmet>
 <div data-theme="{{ rootTheme }}" 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:640px;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);text-align:center;padding:44px 32px 40px">
+    <div style="position:relative;overflow:hidden;background:var(--cs-color-brand-umber);text-align:center;padding:44px 32px 40px">
       <div class="cs-aurora-wash" style="position:absolute;inset:0;opacity:0.5"></div>
       <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,17,8,0.25),rgba(26,17,8,0.82))"></div>
-      <div style="position:relative;z-index:1;color:#fff">
+      <div style="position:relative;z-index:1;color:#FFFDF8">
         <div style="display:inline-flex;align-items:center;gap:10px;margin-bottom:20px"><x-import component-from-global-scope="CyberSkillDS.Logo" size="30" hint-size="30px,30px"></x-import><span style="font-weight:800;font-size:16px">CyberSkill</span></div>
         <sc-if value="{{ isEN }}" hint-placeholder-val="{{ true }}">
         <div style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--cs-accent-bright)">Now live</div>
@@ -39,7 +40,7 @@
         <div style="display:flex;gap:14px;align-items:flex-start"><span style="flex:none;width:38px;height:38px;border-radius:10px;background:var(--cs-accent-tint);color:var(--cs-color-text-accent);display:grid;place-items:center;font-weight:800">✓</span><div><div style="font-weight:700;font-size:16px">Handed to real people</div><div style="font-size:14px;color:var(--cs-color-text-muted);line-height:1.5">A clear wish goes to the team — human in the loop.</div></div></div>
       </div>
       <div style="text-align:center;margin-bottom:24px">
-        <a href="#" style="display:inline-block;background:var(--cs-accent-strong);color:var(--cs-accent-on);font-weight:700;font-size:16px;text-decoration:none;padding:15px 32px;border-radius:var(--cs-radius-full)">Talk to Lumi →</a>
+        <a href="#" style="display:inline-block;background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);font-weight:700;font-size:16px;text-decoration:none;padding:15px 32px;border-radius:var(--cs-radius-full)">Talk to Lumi →</a>
       </div>
       <blockquote style="margin:0;background:var(--cs-color-surface-raised);border-left:4px solid var(--cs-accent);border-radius:var(--cs-radius-md);padding:16px 20px;font-size:15px;line-height:1.6;font-style:italic">“We described a checkout in two sentences. Two weeks later it shipped.”<br /><span style="font-style:normal;font-size:13px;color:var(--cs-color-text-muted)">— Product lead, Retailer A</span></blockquote>
       </sc-if>
@@ -51,7 +52,7 @@
         <div style="display:flex;gap:14px;align-items:flex-start"><span style="flex:none;width:38px;height:38px;border-radius:10px;background:var(--cs-accent-tint);color:var(--cs-color-text-accent);display:grid;place-items:center;font-weight:800">✓</span><div><div style="font-weight:700;font-size:16px">Trao cho người thật</div><div style="font-size:14px;color:var(--cs-color-text-muted);line-height:1.6">Điều ước rõ ràng đến tay đội ngũ — luôn có con người trong vòng lặp.</div></div></div>
       </div>
       <div style="text-align:center;margin-bottom:24px">
-        <a href="#" style="display:inline-block;background:var(--cs-accent-strong);color:var(--cs-accent-on);font-weight:700;font-size:16px;text-decoration:none;padding:15px 32px;border-radius:var(--cs-radius-full)">Trò chuyện với Lumi →</a>
+        <a href="#" style="display:inline-block;background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);font-weight:700;font-size:16px;text-decoration:none;padding:15px 32px;border-radius:var(--cs-radius-full)">Trò chuyện với Lumi →</a>
       </div>
       <blockquote style="margin:0;background:var(--cs-color-surface-raised);border-left:4px solid var(--cs-accent);border-radius:var(--cs-radius-md);padding:16px 20px;font-size:15px;line-height:1.65;font-style:italic">“Chúng tôi mô tả trang thanh toán trong hai câu. Hai tuần sau nó đã chạy.”<br /><span style="font-style:normal;font-size:13px;color:var(--cs-color-text-muted)">— Trưởng sản phẩm, Retailer A</span></blockquote>
       </div></sc-if>

package/templates/marketing-launch/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/marketing-launch/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/marketing-newsletter/MarketingNewsletter.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Marketing · Newsletter · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="./support.js"></script>
@@ -13,15 +14,15 @@
 </helmet>
 <div data-theme="{{ rootTheme }}" 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:640px;margin:0 auto;background:var(--cs-color-surface-panel);border-radius:16px;overflow:hidden;box-shadow:var(--cs-shadow-sm)">
-    <div style="background:var(--cs-accent-strong);padding:22px 32px;display:flex;align-items:center;gap:12px">
+    <div style="background:var(--cs-color-brand-umber);padding:22px 32px;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="color:#fff;font-weight:800;font-size:16px">The Lamp</span>
-      <span style="margin-left:auto;text-align:right;color:#fff;font-size:13px;font-family:var(--cs-font-family-mono)"><sc-if value="{{ isEN }}" hint-placeholder-val="{{ true }}"><span style="display:block">Issue 12 · Jul</span></sc-if><sc-if value="{{ isVN }}"><span lang="vi" style="display:block">Số 12 · Th7</span></sc-if></span>
+      <span style="color:#FFFDF8;font-weight:800;font-size:16px">The Lamp</span>
+      <span style="margin-left:auto;text-align:right;color:#FFFDF8;font-size:13px;font-family:var(--cs-font-family-mono)"><sc-if value="{{ isEN }}" hint-placeholder-val="{{ true }}"><span style="display:block">Issue 12 · July 2026</span></sc-if><sc-if value="{{ isVN }}"><span lang="vi" style="display:block">Số 12 · Tháng 7 2026</span></sc-if></span>
     </div>
-    <div style="position:relative;overflow:hidden;background:var(--cs-accent-strong)">
+    <div style="position:relative;overflow:hidden;background:var(--cs-color-brand-umber)">
       <div class="cs-aurora-wash" style="position:absolute;inset:0;opacity:0.5"></div>
       <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,17,8,0.25),rgba(26,17,8,0.8))"></div>
-      <div style="position:relative;z-index:1;padding:32px;color:#fff">
+      <div style="position:relative;z-index:1;padding:32px;color:#FFFDF8">
         <sc-if value="{{ isEN }}" hint-placeholder-val="{{ true }}">
           <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-accent-bright)">This month</div>
           <h1 style="font-size:26px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;margin:8px 0 8px">Liquid Glass, now in every build</h1>
@@ -37,7 +38,7 @@
     </div>
     <div style="padding:28px 32px">
       <sc-if value="{{ isEN }}" hint-placeholder-val="{{ true }}">
-      <a href="#" style="display:inline-block;background:var(--cs-accent-strong);color:var(--cs-accent-on);font-weight:700;font-size:15px;text-decoration:none;padding:12px 22px;border-radius:var(--cs-radius-full);margin-bottom:26px">Read the story →</a>
+      <a href="#" style="display:inline-block;background:var(--cs-color-brand-umber);color:#FFFDF8;font-weight:700;font-size:15px;text-decoration:none;padding:12px 22px;border-radius:var(--cs-radius-full);margin-bottom:26px">Read the story →</a>
       <div style="border-top:1px solid var(--cs-color-border-default);padding-top:20px;margin-bottom:20px">
         <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--cs-color-text-accent);margin-bottom:6px">Field notes</div>
         <h2 style="font-size:19px;font-weight:700;margin:0 0 6px">How we grant a wish in four steps</h2>
@@ -53,7 +54,7 @@
       </sc-if>
       <sc-if value="{{ isVN }}"><div lang="vi" style="display:contents">
       <sc-if value="{{ isBoth }}"><div style="border-top:1px solid var(--cs-color-border-default);margin:0 0 20px"></div></sc-if>
-      <a href="#" style="display:inline-block;background:var(--cs-accent-strong);color:var(--cs-accent-on);font-weight:700;font-size:15px;text-decoration:none;padding:12px 22px;border-radius:var(--cs-radius-full);margin-bottom:26px">Đọc câu chuyện →</a>
+      <a href="#" style="display:inline-block;background:var(--cs-color-brand-umber);color:#FFFDF8;font-weight:700;font-size:15px;text-decoration:none;padding:12px 22px;border-radius:var(--cs-radius-full);margin-bottom:26px">Đọc câu chuyện →</a>
       <div style="border-top:1px solid var(--cs-color-border-default);padding-top:20px;margin-bottom:20px">
         <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--cs-color-text-accent);margin-bottom:6px">Ghi chú thực địa</div>
         <h2 style="font-size:19px;font-weight:700;margin:0 0 6px">Cách chúng tôi thực hiện một điều ước trong bốn bước</h2>
@@ -68,17 +69,17 @@
       </div>
       </div></sc-if>
     </div>
-    <div style="background:var(--cs-accent-strong);color:#fff;padding:24px 32px;text-align:center">
+    <div style="background:var(--cs-color-brand-umber);color:#FFFDF8;padding:24px 32px;text-align:center">
       <sc-if value="{{ isEN }}" hint-placeholder-val="{{ true }}">
-        <div style="font-size:17px;font-weight:700;color:var(--cs-accent-bright);margin-bottom:4px">Have a wish of your own?</div>
+        <div style="font-size:17px;font-weight:700;color:#FFFDF8;margin-bottom:4px">Have a wish of your own?</div>
         <p style="font-size:14px;opacity:0.85;margin:0 0 14px">Tell us the outcome in a sentence. We reply within one business day.</p>
-        <a href="#" style="display:inline-block;background:var(--cs-accent-strong);color:var(--cs-accent-on);font-weight:700;font-size:14px;text-decoration:none;padding:11px 22px;border-radius:var(--cs-radius-full)">Make a wish</a>
+        <a href="#" style="display:inline-block;background:var(--cs-color-brand-umber);color:#FFFDF8;font-weight:700;font-size:14px;text-decoration:none;padding:11px 22px;border-radius:var(--cs-radius-full)">Make a wish</a>
       </sc-if>
       <sc-if value="{{ isVN }}"><div lang="vi" style="display:contents">
         <sc-if value="{{ isBoth }}"><div style="height:1px;background:rgba(255,255,255,0.18);margin:0 auto 16px;max-width:200px"></div></sc-if>
         <div style="font-size:17px;font-weight:700;color:var(--cs-accent-bright);margin-bottom:4px">Bạn có điều ước của riêng mình?</div>
         <p style="font-size:14px;opacity:0.85;margin:0 0 14px">Kể cho chúng tôi kết quả bạn muốn trong một câu. Chúng tôi trả lời trong vòng một ngày làm việc.</p>
-        <a href="#" style="display:inline-block;background:var(--cs-accent-strong);color:var(--cs-accent-on);font-weight:700;font-size:14px;text-decoration:none;padding:11px 22px;border-radius:var(--cs-radius-full)">Gửi điều ước</a>
+        <a href="#" style="display:inline-block;background:var(--cs-color-brand-umber);color:#FFFDF8;font-weight:700;font-size:14px;text-decoration:none;padding:11px 22px;border-radius:var(--cs-radius-full)">Gửi điều ước</a>
       </div></sc-if>
     </div>
     <div style="padding:16px 32px;background:var(--cs-color-surface-raised);font-size:12px;color:var(--cs-color-text-muted);text-align:center">

package/templates/marketing-newsletter/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/marketing-newsletter/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() {