@cyberskill/design 1.1.1 → 1.2.0

package/templates/hr-pip/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/hr-pip/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/kitchen-sink.html

@@ -47,7 +47,7 @@
   <div class="grid2">
     <label class="cs-field"><span class="cs-field__label">Text field</span><input class="cs-field__control" placeholder="Nguyễn Hoàng An"></label>
     <label class="cs-field is-invalid"><span class="cs-field__label">With error</span><input class="cs-field__control" value="bad@"><span class="cs-field__error" role="alert">Enter a valid email</span></label>
-    <div class="cs-select cs-field"><span class="cs-field__label">Select</span><select class="cs-field__control"><option>Thổ · studio</option><option>Hỏa · ember</option></select><span class="cs-select__chevron">▾</span></div>
+    <label class="cs-select cs-field"><span class="cs-field__label">Select</span><select class="cs-field__control" name="element" aria-label="Element"><option>Thổ · studio</option><option>Hỏa · ember</option></select><span class="cs-select__chevron">▾</span></label>
     <label class="cs-field"><span class="cs-field__label">Textarea</span><textarea class="cs-field__control" rows="2">A faster checkout.</textarea></label>
   </div>
   <div class="row" style="margin-top:12px"><span class="lbl">Toggles</span>
@@ -58,8 +58,8 @@
   </div>
   <div class="row"><span class="lbl">Controls</span>
     <div class="cs-search" style="width:220px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg><input placeholder="Search"></div>
-    <div class="cs-stepper"><button>−</button><input value="3"><button>+</button></div>
-    <input type="range" class="cs-slider" value="60" style="width:160px">
+    <div class="cs-stepper" role="group" aria-label="Quantity"><button type="button" aria-label="Decrease">−</button><input value="3" aria-label="Quantity"><button type="button" aria-label="Increase">+</button></div>
+    <input type="range" class="cs-slider" value="60" style="width:160px" aria-label="Progress">
   </div>
 </section>
 
@@ -108,7 +108,12 @@
 </section>
 
 <section id="nav"><h2>Navigation</h2>
-  <div class="cs-tabs" style="margin-bottom:14px"><button class="cs-tab" aria-selected="true">Overview</button><button class="cs-tab">Projects<span class="cs-tab__count">6</span></button><button class="cs-tab">Team</button></div>
+  <div class="cs-tabs" role="tablist" aria-label="Sections" style="margin-bottom:14px">
+    <button type="button" class="cs-tab" role="tab" id="ks-tab-overview" aria-selected="true" aria-controls="ks-panel-overview" tabindex="0">Overview</button>
+    <button type="button" class="cs-tab" role="tab" id="ks-tab-projects" aria-selected="false" aria-controls="ks-panel-projects" tabindex="-1">Projects<span class="cs-tab__count">6</span></button>
+    <button type="button" class="cs-tab" role="tab" id="ks-tab-team" aria-selected="false" aria-controls="ks-panel-team" tabindex="-1">Team</button>
+  </div>
+  <div id="ks-panel-overview" role="tabpanel" aria-labelledby="ks-tab-overview"></div>
   <nav class="cs-breadcrumb" style="margin-bottom:14px"><ul style="list-style:none;margin:0;padding:0;display:flex;gap:8px"><li><a href="#">Status Hub</a></li><li class="cs-breadcrumb__sep">/</li><li><a href="#">Platform</a></li><li class="cs-breadcrumb__sep">/</li><li class="cs-breadcrumb__current">Design System</li></ul></nav>
   <div class="row"><nav class="cs-pagination"><button>‹</button><button aria-current="page">1</button><button>2</button><button>3</button><span class="cs-pagination__ellipsis">…</span><button>9</button><button>›</button></nav></div>
   <div class="cs-menu__list" style="position:static;max-width:220px;margin-top:12px"><button class="cs-menu__item">Open project</button><button class="cs-menu__item">Duplicate</button><div class="cs-menu__sep"></div><button class="cs-menu__item cs-menu__item--danger">Delete</button></div>

package/templates/legal-msa/LegalMsa.dc.html

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

package/templates/legal-msa/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/legal-msa/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/legal-sow/LegalSow.dc.html

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

package/templates/legal-sow/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/legal-sow/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-campaign-brief/MarketingCampaignBrief.dc.html

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

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>

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();
+  }
 })();