@cyberskill/design 1.1.1 → 1.2.0

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() {

package/templates/marketing-page/MarketingPage.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Marketing page · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="./support.js"></script>
@@ -13,6 +14,8 @@
 <script src="../../image-slot.js"></script>
 </helmet>
 <div data-theme="{{ rootTheme }}" lang="{{ langAttr }}" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" style="font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-page);min-height:100vh">
+  <a class="cs-skip" href="#main" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden">Skip to content</a>
+  <main id="main">
   <header style="position:sticky;top:0;z-index:50;display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;padding:14px 32px;background:color-mix(in oklab,var(--cs-color-surface-panel) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--cs-color-border-default)">
     <div style="display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--cs-color-text-primary);letter-spacing:-0.01em">
       <x-import component-from-global-scope="CyberSkillDS.Logo" size="32" hint-size="32px,32px"></x-import>
@@ -28,17 +31,17 @@
     </div>
   </header>
 
-  <section style="position:relative;overflow:hidden;background:var(--cs-accent-strong);color:#fff;padding:84px 32px 96px">
+  <section style="position:relative;overflow:hidden;background:var(--cs-color-brand-umber);color:#FFFDF8;padding:84px 32px 96px">
     <image-slot id="cs-mktg-hero" shape="rect" placeholder="Drop a hero image (optional)" style="position:absolute;inset:0"></image-slot>
     <div class="cs-aurora-wash" style="position:absolute;inset:0;opacity:0.55;pointer-events:none"></div>
     <div style="position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(42,26,13,0.62),rgba(42,26,13,0.42))"></div>
     <div style="position:relative;z-index:1;max-width:1080px;margin:0 auto">
-      <div class="cs-rise-in" style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:#fff">{{ heroKicker }}</div>
+      <div class="cs-rise-in" style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:#FFFDF8">{{ heroKicker }}</div>
       <h1 class="cs-rise-in cs-rise-in--2" style="font-size:clamp(40px,6vw,64px);font-weight:800;letter-spacing:-0.02em;line-height:1.05;color:var(--cs-accent-bright);margin:14px 0 4px">{{ heroH }}</h1>
       <div class="cs-rise-in cs-rise-in--3" style="font-size:20px;font-weight:600;opacity:0.9;margin-bottom:18px">{{ heroSub }}</div>
       <p class="cs-rise-in cs-rise-in--4" style="font-size:18px;line-height:1.55;max-width:600px;opacity:0.95">{{ heroP }}</p>
       <div style="max-width:600px;margin-top:26px">
-        <x-import component-from-global-scope="CyberSkillDS.PromptInput" placeholder="{{ promptPh }}" send-label="{{ promptSend }}" hint-size="100%,120px"></x-import>
+        <x-import component-from-global-scope="CyberSkillDS.PromptInput" placeholder="{{ promptPh }}" send-label="{{ promptSend }}" lang="{{ langAttr }}" hint-size="100%,120px"></x-import>
       </div>
     </div>
   </section>
@@ -66,7 +69,7 @@
   </section>
 
   <section id="process" style="padding:0 32px 80px">
-    <div style="max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:linear-gradient(120deg,var(--cs-accent-strong) 35%,color-mix(in oklab,var(--cs-accent-grad-b) 26%,var(--cs-accent-strong)));color:#fff;border-radius:var(--cs-radius-lg);padding:40px 36px">
+    <div style="max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:linear-gradient(120deg,var(--cs-accent-strong) 35%,color-mix(in oklab,var(--cs-accent-grad-b) 26%,var(--cs-accent-strong)));color:var(--cs-accent-on-strong);border-radius:var(--cs-radius-lg);padding:40px 36px">
       <div>
         <h2 style="color:var(--cs-accent-bright);font-size:28px;font-weight:800;margin:0 0 6px;letter-spacing:-0.01em">{{ ctaH }}</h2>
         <p style="margin:0;opacity:0.9;max-width:520px">{{ ctaP }}</p>
@@ -77,9 +80,9 @@
     </div>
   </section>
 
-  <footer style="background:var(--cs-accent-strong);color:rgba(255,255,255,0.82);padding:40px 32px">
+  <footer style="background:var(--cs-color-brand-umber);color:#FFFDF8;padding:40px 32px">
     <div style="max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center">
-      <div style="display:flex;align-items:center;gap:10px;color:#fff;font-weight:800">
+      <div style="display:flex;align-items:center;gap:10px;color:#FFFDF8;font-weight:800">
         <x-import component-from-global-scope="CyberSkillDS.Logo" size="28" decorative="{{ true }}" hint-size="28px,28px"></x-import>
         CyberSkill
       </div>
@@ -88,13 +91,13 @@
   </footer>
 
   <sc-if value="{{ showLauncher }}" hint-placeholder-val="{{ true }}">
-    <button onClick="{{ openChat }}" style="position:fixed;right:22px;bottom:22px;z-index:200;background:var(--cs-accent-strong);color:var(--cs-accent-on);border:0;border-radius:var(--cs-radius-full);height:54px;padding:0 22px;font-family:var(--cs-font-family-ui);font-weight:700;font-size:15px;cursor:pointer;box-shadow:var(--cs-shadow-lg)">✦ {{ talkBtn }}</button>
+    <button onClick="{{ openChat }}" style="position:fixed;right:22px;bottom:22px;z-index:200;background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);border:0;border-radius:var(--cs-radius-full);height:54px;padding:0 22px;font-family:var(--cs-font-family-ui);font-weight:700;font-size:15px;cursor:pointer;box-shadow:var(--cs-shadow-lg)">✦ {{ talkBtn }}</button>
   </sc-if>
 
   <sc-if value="{{ chatOpen }}">
     <div style="position:fixed;right:22px;bottom:22px;z-index:201;width:360px;max-width:calc(100vw - 44px);border-radius:var(--cs-radius-lg);overflow:hidden;box-shadow:var(--cs-shadow-xl);display:flex;flex-direction:column;max-height:min(560px,84vh)">
-      <div style="background:var(--cs-accent-strong);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px">
-        <span style="width:30px;height:30px;border-radius:50%;background:var(--cs-accent-strong);color:var(--cs-accent-on);display:grid;place-items:center;font-weight:800">✦</span>
+      <div style="background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);padding:14px 16px;display:flex;align-items:center;gap:10px">
+        <span style="width:30px;height:30px;border-radius:50%;background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);display:grid;place-items:center;font-weight:800">✦</span>
         <b style="font-size:14px">Lumi · {{ genieLabel }}</b>
         <button onClick="{{ closeChat }}" aria-label="Close" style="margin-left:auto;background:transparent;border:0;color:rgba(255,255,255,0.8);cursor:pointer;font-size:18px">✕</button>
       </div>
@@ -102,10 +105,11 @@
         <x-import component-from-global-scope="CyberSkillDS.ChatMessage" role="lumi" hint-size="100%,60px">{{ chatHello }}</x-import>
       </div>
       <div style="background:var(--cs-color-surface-panel);padding:0 12px 12px">
-        <x-import component-from-global-scope="CyberSkillDS.PromptInput" placeholder="{{ chatPh }}" send-label="{{ chatSend }}" hint-size="100%,110px"></x-import>
+        <x-import component-from-global-scope="CyberSkillDS.PromptInput" placeholder="{{ chatPh }}" send-label="{{ chatSend }}" lang="{{ langAttr }}" hint-size="100%,110px"></x-import>
       </div>
     </div>
   </sc-if>
+</main>
 </div>
 </x-dc>
 <script type="text/x-dc" data-dc-script data-props="{
@@ -123,7 +127,8 @@ const vn = this.props.language === "Tiếng Việt";
     const en = { navServices:"Services", navProcess:"Process", navContact:"Contact", talkBtn:"Talk to Lumi", heroKicker:"A Saigon studio · since 2020", heroH:"Turn Your Will Into Real", heroSub:"Hiện Thực Hoá Ý Chí", heroP:"Tell us a wish in a sentence. Lumi shares plain advice, then hands it to a real team who build software your people actually run — built to ship, built to last.", promptPh:"Make a wish… a faster checkout, an app, a tool", promptSend:"Make a wish", svcKicker:"Services", svcH:"What we build", svcP:"Three focused practices. One team that answers for the result.", c1h:"Web & mobile apps", c1p:"Product apps your customers reach for — fast, accessible, bilingual by default.", c2h:"Internal systems & automation", c2p:"The tools your team runs on: dashboards, workflows, and the automation behind them.", c3h:"Built to last", c3p:"Shipped software that keeps running — tested, documented, handed over cleanly.", ctaH:"Ready to make a wish?", ctaP:"Send a short note. We reply within one business day.", chatHello:"Hello, I’m Lumi. Tell me a wish, and I’ll share plain advice before asking for anything.", chatPh:"Type your wish…", chatSend:"Send", footer:"© 2026 CyberSkill · Saigon · Turn Your Will Into Real", genieLabel:"golden genie" };
     const vi = { navServices:"Dịch vụ", navProcess:"Quy trình", navContact:"Liên hệ", talkBtn:"Trò chuyện với Lumi", heroKicker:"Studio Sài Gòn · từ 2020", heroH:"Hiện Thực Hoá Ý Chí", heroSub:"Turn Your Will Into Real", heroP:"Kể cho chúng tôi một điều ước trong một câu. Lumi chia sẻ lời khuyên thẳng thắn, rồi trao cho một đội ngũ thật xây phần mềm mà người của bạn thực sự vận hành — làm để chạy được, làm để bền lâu.", promptPh:"Gửi điều ước… thanh toán nhanh hơn, một app, một công cụ", promptSend:"Gửi điều ước", svcKicker:"Dịch vụ", svcH:"Chúng tôi xây gì", svcP:"Ba mảng tập trung. Một đội ngũ chịu trách nhiệm về kết quả.", c1h:"Ứng dụng web & di động", c1p:"Sản phẩm khách hàng muốn dùng — nhanh, dễ tiếp cận, song ngữ mặc định.", c2h:"Hệ thống nội bộ & tự động hoá", c2p:"Công cụ đội bạn vận hành: dashboard, luồng công việc, và tự động hoá phía sau.", c3h:"Làm để bền lâu", c3p:"Phần mềm đã ra mắt vẫn chạy đều — kiểm thử, tài liệu, bàn giao gọn gàng.", ctaH:"Sẵn sàng gửi điều ước?", ctaP:"Gửi một ghi chú ngắn. Chúng tôi phản hồi trong một ngày làm việc.", chatHello:"Xin chào, tôi là Lumi. Kể cho tôi một điều ước, tôi sẽ chia sẻ lời khuyên thẳng thắn trước khi hỏi bất cứ điều gì.", chatPh:"Nhập điều ước của bạn…", chatSend:"Gửi", footer:"© 2026 CyberSkill · Sài Gòn · Hiện Thực Hoá Ý Chí", genieLabel:"thần đèn vàng" };
     return Object.assign({ langAttr: (this.props.language ?? "English") === "Tiếng Việt" ? "vi" : "en", elAttr, vaAttr, rootTheme: this.props.theme === "dark" ? "dark" : "",
-      showLauncher: (this.props.showChat ?? true) && !this.state.chatOpen, chatOpen: this.state.chatOpen,
+      /* FAB omitted — header Talk to Lumi is the single secondary CTA (UX-016). */
+      showLauncher: false, chatOpen: this.state.chatOpen,
       openChat: () => this.setState({ chatOpen: true }), closeChat: () => this.setState({ chatOpen: false })}, vn ? vi : en);
   }
 }

package/templates/marketing-page/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-page/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-press-release/MarketingPressRelease.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Marketing · Press release · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="omelette-owns-print" content="1">