@cyberskill/design 1.0.0

package/ui_kits/status-hub/StatusHub.jsx

@@ -0,0 +1,270 @@
+const { useState, useMemo } = React;
+
+const ICON = {
+  search: "M11 4a7 7 0 1 0 4.2 12.6L20 21l1.4-1.4-4.4-4.4A7 7 0 0 0 11 4zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10z",
+  close: "M6 6l12 12M18 6L6 18",
+  sun: null, moon: null,
+};
+function Glyph({ d, size = 18 }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={d} /></svg>;
+}
+function SearchGlyph() {
+  return <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={ICON.search} /></svg>;
+}
+function ThemeGlyph({ dark }) {
+  return dark
+    ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"/></svg>
+    : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"/></svg>;
+}
+
+/* Bilingual UI copy — kit fully EN⇄VN (owner decision, Jul 2026).
+ * Mock-data VN variants live in data.js (window.SH_VI). */
+const T = {
+  en: {
+    sub: "CyberSkill · one page, three lenses · Hiện Thực Hoá Ý Chí",
+    updated: "Updated", portfolio: "Portfolio",
+    projects: "Projects", inprog: "In progress", shipped: "Shipped", blocked: "Blocked", planned: "Planned", avg: "Avg progress",
+    velocity: "Velocity · tasks shipped / week", perShipped: " shipped",
+    nowTitle: "Now shipping",
+    search: "Search projects…", view: "View", lenses: { board: "Board", table: "Table", releases: "Releases" },
+    status: "Status", all: "All", of: "of",
+    key: "Key", project: "Project", squad: "Squad", owner: "Owner", progress: "Progress",
+    thisWeek: "This week", tasks: "Tasks", risk: "Risk", close: "Close",
+    langBtn: "VN", theme: "Toggle theme",
+  },
+  vi: {
+    sub: "CyberSkill · một trang, ba lăng kính · Hiện Thực Hoá Ý Chí",
+    updated: "Cập nhật", portfolio: "Danh mục",
+    projects: "Dự án", inprog: "Đang làm", shipped: "Đã ra mắt", blocked: "Bị chặn", planned: "Dự kiến", avg: "Tiến độ TB",
+    velocity: "Tốc độ · task giao / tuần", perShipped: " đã giao",
+    nowTitle: "Đang ra mắt",
+    search: "Tìm dự án…", view: "Chế độ xem", lenses: { board: "Bảng công việc", table: "Bảng dữ liệu", releases: "Phát hành" },
+    status: "Trạng thái", all: "Tất cả", of: "trên",
+    key: "Mã", project: "Dự án", squad: "Nhóm", owner: "Phụ trách", progress: "Tiến độ",
+    thisWeek: "Tuần này", tasks: "Công việc", risk: "Rủi ro", close: "Đóng",
+    langBtn: "EN", theme: "Đổi giao diện",
+  },
+};
+const statusLabels = (t) => ({ done: t.shipped, active: t.inprog, hold: t.blocked, todo: t.planned });
+
+function Segments({ seg, className }) {
+  return (
+    <div className={className}>
+      {seg.done > 0 && <i className="seg-done" style={{ width: seg.done + "%" }} />}
+      {seg.active > 0 && <i className="seg-active" style={{ width: seg.active + "%" }} />}
+      {seg.hold > 0 && <i className="seg-hold" style={{ width: seg.hold + "%" }} />}
+      {seg.todo > 0 && <i className="seg-todo" style={{ width: seg.todo + "%" }} />}
+    </div>
+  );
+}
+
+function Drawer({ p, onClose, t }) {
+  if (!p) return null;
+  const SL = statusLabels(t);
+  return (
+    <>
+      <div className="scrim" onClick={onClose} />
+      <aside className="drawer" role="dialog" aria-modal="true" aria-label={p.name}>
+        <div className="dw-h">
+          <div className="row">
+            <span className="mono muted" style={{ fontWeight: 700 }}>{p.key}</span>
+            <span className={"pill " + p.status}>{SL[p.status]}</span>
+            <button className="dw-x" onClick={onClose} aria-label={t.close}><Glyph d={ICON.close} size={20} /></button>
+          </div>
+          <h2>{p.name}</h2>
+        </div>
+        <div className="dw-b">
+          <p className="muted" style={{ marginTop: 0 }}>{p.blurb}</p>
+          <dl className="meta">
+            <div><dt>{t.owner}</dt><dd>{p.owner}</dd></div>
+            <div><dt>{t.squad}</dt><dd>{p.squad}</dd></div>
+            <div><dt>{t.progress}</dt><dd>{p.pct}%</dd></div>
+            <div><dt>{t.updated}</dt><dd>{p.updated}</dd></div>
+          </dl>
+          <Segments seg={p.seg} className="minibar" />
+          <div className="sect">
+            <h3>{t.tasks}</h3>
+            <div className="task-chips">
+              {p.tasks.map((tk) => <span key={tk[0]} className={"chip " + tk[2]} title={tk[1]}>{tk[0]}</span>)}
+            </div>
+            <ul className="tasks">{p.tasks.map((tk) => <li key={tk[0]}>{tk[1]} — <span className="muted">{SL[tk[2]]}</span></li>)}</ul>
+          </div>
+          {p.risk ? <div className="sect"><h3>{t.risk}</h3><div className="risk">{p.risk}</div></div> : null}
+        </div>
+      </aside>
+    </>
+  );
+}
+
+function StatusHub() {
+  const D = window.SH_DATA;
+  const [dark, setDark] = useState(false);
+  const [lang, setLang] = useState("en");
+  const [lens, setLens] = useState("board");
+  const [q, setQ] = useState("");
+  const [facet, setFacet] = useState("all");
+  const [kpi, setKpi] = useState(null);
+  const [sel, setSel] = useState(null);
+
+  const t = T[lang];
+  const SL = statusLabels(t);
+  const VI = lang === "vi" ? (window.SH_VI || null) : null;
+  const loc = (p) => VI ? { ...p,
+    blurb: VI.blurbs[p.key] || p.blurb,
+    risk: (VI.risks[p.key] != null ? VI.risks[p.key] : p.risk),
+    owner: VI.owners[p.owner] || p.owner,
+    squad: VI.squads[p.squad] || p.squad,
+    updated: VI.updatedRel[p.updated] || p.updated,
+  } : p;
+
+  const counts = useMemo(() => {
+    const c = { active: 0, done: 0, hold: 0 };
+    D.projects.forEach((p) => { if (c[p.status] != null) c[p.status]++; });
+    const avg = Math.round(D.projects.reduce((a, p) => a + p.pct, 0) / D.projects.length);
+    return { total: D.projects.length, ...c, avg };
+  }, [D]);
+
+  const shown = useMemo(() => {
+    const needle = q.trim().toLowerCase();
+    const eff = kpi || (facet === "all" ? null : facet);
+    return D.projects.filter((p) => {
+      if (eff && p.status !== eff) return false;
+      if (!needle) return true;
+      return (p.name + " " + p.key + " " + p.blurb).toLowerCase().includes(needle);
+    });
+  }, [D, q, facet, kpi]);
+
+  const maxV = Math.max(...D.velocity.map((v) => v.n));
+  const toggleKpi = (k) => setKpi((cur) => (cur === k ? null : k));
+
+  return (
+    <div className="sh" lang={lang} data-theme={dark ? "dark" : undefined}>
+      <header className="hd">
+        <div className="hd-in">
+          <div className="hd-id">
+            <span className="hd-mark"><img src="../../assets/logo-mark.svg" alt="" /></span>
+            <div>
+              <h1>Status Hub</h1>
+              <p className="hd-sub">{t.sub}</p>
+            </div>
+          </div>
+          <div className="hd-side">
+            <p className="hd-meta">{t.updated}<br />{VI ? VI.updated : D.updated}</p>
+            <button className="btn ghost" onClick={() => setLang((l) => l === "en" ? "vi" : "en")} aria-label="Toggle language" style={{ fontWeight: 700, fontSize: 13 }}>{t.langBtn}</button>
+            <button className="btn ghost" onClick={() => setDark((v) => !v)} aria-label={t.theme}><ThemeGlyph dark={dark} /></button>
+          </div>
+        </div>
+      </header>
+
+      <div className="wrap">
+        <div className="deck">
+          <section className="panel">
+            <h2>{t.portfolio}</h2>
+            <div className="kpis">
+              <button className="kpi" data-on={kpi === null ? "1" : "0"} onClick={() => setKpi(null)}><b>{counts.total}</b><span>{t.projects}</span></button>
+              <button className="kpi" data-on={kpi === "active" ? "1" : "0"} onClick={() => toggleKpi("active")}><b>{counts.active}</b><span>{t.inprog}</span></button>
+              <button className="kpi" data-on={kpi === "done" ? "1" : "0"} onClick={() => toggleKpi("done")}><b>{counts.done}</b><span>{t.shipped}</span></button>
+              <button className="kpi" data-on={kpi === "hold" ? "1" : "0"} onClick={() => toggleKpi("hold")}><b>{counts.hold}</b><span>{t.blocked}</span></button>
+              <button className="kpi" onClick={() => setKpi(null)}><b>{counts.avg}%</b><span>{t.avg}</span></button>
+            </div>
+            <Segments seg={{ done: 60, active: 22, hold: 6, todo: 12 }} className="bar-seg" />
+            <div className="legend">
+              <span><i className="dot" style={{ background: "var(--cs-color-semantic-success)" }} />{t.shipped}</span>
+              <span><i className="dot" style={{ background: "var(--cs-color-brand-ochre)" }} />{t.inprog}</span>
+              <span><i className="dot" style={{ background: "var(--cs-color-semantic-danger)" }} />{t.blocked}</span>
+              <span><i className="dot" style={{ background: "var(--cs-status-todo)" }} />{t.planned}</span>
+            </div>
+          </section>
+          <section className="panel">
+            <h2>{t.velocity}</h2>
+            <div className="spark">
+              {D.velocity.map((v) => (
+                <a key={v.wk} title={v.n + t.perShipped}><b>{v.n}</b><i style={{ height: (v.n / maxV) * 72 + "px" }} /><span>{v.wk}</span></a>
+              ))}
+            </div>
+          </section>
+        </div>
+
+        <div className="now">
+          <h2>{t.nowTitle}</h2>
+          {lang === "vi"
+            ? <p><b>v1.6.0 — Liên kết Glass + gói Ngũ Hành v2.</b> Liên kết component <span className="mono">.cs-surface-*</span> (tùy chọn), trình kiểm 0 cảnh báo trên cả 15 gói, và kiểm tra lại APCA cho chế độ tối. Ra mắt tuần này.</p>
+            : <p><b>v1.6.0 — Glass bindings + element-pack v2.</b> Opt-in <span className="mono">.cs-surface-*</span> component bindings, a zero-warning verifier across all 15 packs, and a dark-mode APCA re-check. Ships this week.</p>}
+        </div>
+
+        <div className="bar">
+          <div className="bar-top">
+            <label className="srch"><SearchGlyph /><input placeholder={t.search} value={q} onChange={(e) => setQ(e.target.value)} /></label>
+            <div className="lenses" role="tablist" aria-label={t.view}>
+              {["board", "table", "releases"].map((l) => (
+                <button key={l} className="ln" role="tab" aria-selected={lens === l} onClick={() => setLens(l)}>{t.lenses[l]}</button>
+              ))}
+            </div>
+            <label className="facet">{t.status}
+              <select value={kpi || facet} onChange={(e) => { setFacet(e.target.value); setKpi(null); }}>
+                <option value="all">{t.all}</option><option value="active">{t.inprog}</option>
+                <option value="done">{t.shipped}</option><option value="hold">{t.blocked}</option>
+              </select>
+            </label>
+            <span className="cnt">{shown.length} {t.of} {D.projects.length}</span>
+          </div>
+        </div>
+
+        {lens === "board" && (
+          <div className="grid">
+            {shown.map((p0) => { const p = loc(p0); return (
+              <button className={"card" + (p.status === "active" ? " hot" : "")} key={p.key} onClick={() => setSel(p0)}>
+                <div className="card-h"><h3><span className="k mono">{p.key}</span> · {p.name}</h3><span className="pct">{p.pct}%</span></div>
+                <p>{p.blurb}</p>
+                <Segments seg={p.seg} className="minibar" />
+                <div className="task-chips">
+                  <span className={"pill " + p.status}>{SL[p.status]}</span>
+                  {p.tasks.slice(0, 3).map((tk) => <span key={tk[0]} className={"chip " + tk[2]}>{tk[0]}</span>)}
+                </div>
+              </button>
+            ); })}
+          </div>
+        )}
+
+        {lens === "table" && (
+          <div className="tbl-wrap">
+            <table className="tbl">
+              <thead><tr><th>{t.key}</th><th>{t.project}</th><th>{t.squad}</th><th>{t.owner}</th><th>{t.progress}</th><th>{t.status}</th></tr></thead>
+              <tbody>
+                {shown.map((p0) => { const p = loc(p0); return (
+                  <tr key={p.key} onClick={() => setSel(p0)}>
+                    <td className="mono" style={{ fontWeight: 700 }}>{p.key}</td>
+                    <td>{p.name}</td><td>{p.squad}</td><td>{p.owner}</td><td>{p.pct}%</td>
+                    <td><span className={"pill " + p.status}>{SL[p.status]}</span></td>
+                  </tr>
+                ); })}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {lens === "releases" && (
+          <div className="rels">
+            {D.releases.map((r) => (
+              <div className={"rel" + (r.now ? " now" : "")} key={r.ver}>
+                <div className="tick">{r.done ? "✓" : "→"}</div>
+                <div>
+                  <div className="rel-h"><b>{r.ver}</b><span className={"pill " + (r.now ? "active" : "done")}>{r.now ? t.thisWeek : t.shipped}</span><span className="muted">{VI ? (VI.relWhen[r.ver] || r.when) : r.when}</span></div>
+                  <div className="rel-sec"><h4>{VI ? (VI.relTitles[r.ver] || r.title) : r.title}</h4><ul>{(VI ? (VI.relItems[r.ver] || r.items) : r.items).map((it, i) => <li key={i}>{it}</li>)}</ul></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <p className="ft">{lang === "vi"
+          ? <>CyberSkill Status Hub — bản tái hiện UI kit của design system. Dựng trên token <span className="mono">styles.css</span>. Turn Your Will Into Real.</>
+          : <>CyberSkill Status Hub — a design-system UI kit recreation. Built on <span className="mono">styles.css</span> tokens. Turn Your Will Into Real.</>}</p>
+      </div>
+
+      <Drawer p={sel && loc(sel)} onClose={() => setSel(null)} t={t} />
+    </div>
+  );
+}
+
+window.StatusHub = StatusHub;

package/ui_kits/status-hub/data.js

@@ -0,0 +1,57 @@
+// CyberSkill Status Hub — sample data (fictional, on-brand). window.SH_DATA
+window.SH_DATA = {
+  updated: "18 Jul 2026, 13:20 ICT",
+  velocity: [
+    { wk: "W23", n: 4 }, { wk: "W24", n: 7 }, { wk: "W25", n: 5 },
+    { wk: "W26", n: 9 }, { wk: "W27", n: 6 }, { wk: "W28", n: 11 }, { wk: "W29", n: 8 },
+  ],
+  projects: [
+    { key: "CDS", name: "Design System v1.6", status: "active", pct: 72, blurb: "Liquid Glass component bindings + 15 element packs.",
+      seg: { done: 62, active: 20, hold: 4, todo: 14 }, owner: "Design Lead", updated: "2h ago", squad: "Platform",
+      tasks: [["TASK-DS-041","Glass surface bindings","done"],["TASK-DS-047","Element-pack verifier v2","active"],["TASK-DS-052","Dark-mode APCA re-check","active"],["TASK-DS-055","Figma variable sync","todo"]],
+      risk: "" },
+    { key: "GENIE", name: "Lumi Genie Chat", status: "active", pct: 58, blurb: "Keyless Claude proxy; scripted wish-capture flow.",
+      seg: { done: 48, active: 24, hold: 8, todo: 20 }, owner: "AI Lead", updated: "5h ago", squad: "AI",
+      tasks: [["TASK-CHAR-026","In-chat wish flow","done"],["TASK-CHAR-030","One-time mascot hint","active"],["TASK-CHAR-021","Golden-genie GLB","hold"]],
+      risk: "GLB art asset is a hard external dependency — commission not yet confirmed (TASK-CHAR-021)." },
+    { key: "SITE", name: "cyberskill.world", status: "active", pct: 84, blurb: "Bilingual storytelling landing; lead capture live.",
+      seg: { done: 78, active: 12, hold: 0, todo: 10 }, owner: "Web Lead", updated: "1h ago", squad: "Growth",
+      tasks: [["TASK-BIZ-003","Lead pipeline e2e","done"],["TASK-SEO-012","llms.txt route","done"],["TASK-CTA-020","Teardown funnel polish","active"]],
+      risk: "" },
+    { key: "OS", name: "CyberOS Agent Spine", status: "hold", pct: 41, blurb: "BRAIN memory store + HITL acceptance gates.",
+      seg: { done: 36, active: 8, hold: 30, todo: 26 }, owner: "Eng Lead", updated: "1d ago", squad: "Platform",
+      tasks: [["TASK-OS-018","Gate runner","done"],["TASK-OS-022","Memory compaction","hold"],["TASK-OS-025","Provenance ledger","hold"]],
+      risk: "Blocked on infra: provenance ledger needs the signing service (target Q1 2027)." },
+    { key: "AUDIT", name: "DS Audit Framework", status: "done", pct: 100, blurb: "125-criteria vendor-neutral audit; L3 tier held.",
+      seg: { done: 100, active: 0, hold: 0, todo: 0 }, owner: "DesignOps", updated: "3d ago", squad: "Platform",
+      tasks: [["TASK-AUD-009","Deterministic engine","done"],["TASK-AUD-011","No-regression CI gate","done"]],
+      risk: "" },
+    { key: "TOKENS", name: "Token Pipeline", status: "active", pct: 66, blurb: "DTCG → CSS/TS/Swift/Kotlin/Flutter/Figma.",
+      seg: { done: 58, active: 22, hold: 0, todo: 20 }, owner: "Eng Lead", updated: "6h ago", squad: "Platform",
+      tasks: [["TASK-TOK-014","Contrast grid export","done"],["TASK-TOK-019","Flutter target","active"],["TASK-TOK-021","Provenance JSON","todo"]],
+      risk: "" },
+  ],
+  releases: [
+    { ver: "v1.6.0", when: "This week", now: true, done: false, title: "Glass bindings + element-pack v2",
+      items: ["Opt-in .cs-surface-* component bindings", "Element-pack verifier v2 (0 warnings across 15)", "Dark-mode APCA re-check"] },
+    { ver: "v1.5.1", when: "04 Jul 2026", now: false, done: true, title: "15 element packs ship",
+      items: ["All 15 packs promoted to shipped", "Per-pack screenshot regression", "Gallery build script"] },
+    { ver: "v1.4.0", when: "13 Jun 2026", now: false, done: true, title: "Liquid Glass in code",
+      items: ["--cs-glass-* + --cs-depth-* scalars", "glass.css material layer", "Reduced-transparency fallbacks"] },
+    { ver: "v1.3.0", when: "14 May 2026", now: false, done: true, title: "Brand assets + Logo",
+      items: ["Official master mark ships", "React <Logo> from master artwork", "Light becomes default theme"] },
+  ],
+};
+
+// Vietnamese variants (kit fully EN⇄VN per owner decision, Jul 2026). window.SH_VI
+window.SH_VI = {
+  updated: "18/07/2026, 13:20 ICT",
+  blurbs: { CDS: "Liên kết component Liquid Glass + 15 gói Ngũ Hành.", GENIE: "Proxy Claude không cần khóa; luồng tiếp nhận điều ước theo kịch bản.", SITE: "Trang giới thiệu song ngữ kể chuyện; thu lead đang chạy.", OS: "Kho nhớ BRAIN + cổng nghiệm thu có con người.", AUDIT: "Bộ kiểm định trung lập 125 tiêu chí; giữ hạng L3.", TOKENS: "DTCG → CSS/TS/Swift/Kotlin/Flutter/Figma." },
+  risks: { GENIE: "Tài sản GLB là phụ thuộc ngoài khó — chưa chốt đặt hàng (TASK-CHAR-021).", OS: "Bị chặn bởi hạ tầng: sổ cái nguồn gốc cần dịch vụ ký số (mục tiêu Q1 2027)." },
+  owners: { "Design Lead": "Trưởng thiết kế", "AI Lead": "Trưởng AI", "Web Lead": "Trưởng web", "Eng Lead": "Trưởng kỹ thuật", "DesignOps": "DesignOps" },
+  squads: { Platform: "Nền tảng", AI: "AI", Growth: "Tăng trưởng" },
+  updatedRel: { "2h ago": "2 giờ trước", "5h ago": "5 giờ trước", "1h ago": "1 giờ trước", "1d ago": "1 ngày trước", "3d ago": "3 ngày trước", "6h ago": "6 giờ trước" },
+  relWhen: { "v1.6.0": "Tuần này", "v1.5.1": "04/07/2026", "v1.4.0": "13/06/2026", "v1.3.0": "14/05/2026" },
+  relTitles: { "v1.6.0": "Liên kết Glass + gói Ngũ Hành v2", "v1.5.1": "15 gói Ngũ Hành ra mắt", "v1.4.0": "Liquid Glass vào mã", "v1.3.0": "Tài sản thương hiệu + Logo" },
+  relItems: { "v1.6.0": ["Liên kết component .cs-surface-* (tùy chọn)", "Trình kiểm gói Ngũ Hành v2 (0 cảnh báo trên 15 gói)", "Kiểm tra lại APCA cho chế độ tối"], "v1.5.1": ["Cả 15 gói lên trạng thái đã ra mắt", "Regression ảnh chụp từng gói", "Script dựng gallery"], "v1.4.0": ["Scalar --cs-glass-* + --cs-depth-*", "Lớp chất liệu glass.css", "Fallback khi giảm độ trong suốt"], "v1.3.0": ["Master mark chính thức ra mắt", "<Logo> React từ artwork gốc", "Light thành theme mặc định"] },
+};

package/ui_kits/status-hub/identity-lab.html

@@ -0,0 +1,134 @@
+<!-- @dsCard group="Status Hub" viewport="1280x800" name="Identity Lab" subtitle="Live Theme × Element × Language on a product surface — click any pill" -->
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CyberSkill · Identity Lab</title>
+<link rel="stylesheet" href="../../styles.css">
+<style>
+body{margin:0;background:var(--cs-color-surface-raised);font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);min-height:100vh}
+.bar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:14px 28px;background:var(--cs-color-surface-panel);border-bottom:1px solid var(--cs-color-border-default);position:sticky;top:0;z-index:10}
+.lb{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;font-weight:800;color:var(--cs-color-text-muted);margin-right:2px}
+.pills{display:flex;gap:6px;flex-wrap:wrap}
+.pill{border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--cs-color-text-primary);cursor:pointer;min-height:30px}
+.pill:hover{background:var(--cs-color-surface-raised)}
+.pill.on{background:var(--cs-color-brand-umber);border-color:var(--cs-color-brand-umber);color:#fff}
+.pill:focus-visible{outline:3px solid var(--cs-color-accent-ochre);outline-offset:2px}
+a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-link-hover)}
+[data-theme="dark"] .pill.on{background:var(--cs-color-brand-ochre);border-color:var(--cs-color-brand-ochre);color:#1a1108}
+</style></head>
+<body>
+<div class="bar" id="axis-bar">
+  <span class="lb">Element</span>
+  <span class="pills" id="els">
+    <button class="pill on" data-el="" data-va="">Thổ · studio</button>
+    <button class="pill" data-el="tho" data-va="clay">Thổ · clay</button>
+    <button class="pill" data-el="tho" data-va="sand">Thổ · sand</button>
+    <button class="pill" data-el="hoa" data-va="">Hỏa</button>
+    <button class="pill" data-el="hoa" data-va="lava">Hỏa · lava</button>
+    <button class="pill" data-el="hoa" data-va="plasma">Hỏa · plasma</button>
+    <button class="pill" data-el="thuy" data-va="">Thủy</button>
+    <button class="pill" data-el="thuy" data-va="ocean">Thủy · ocean</button>
+    <button class="pill" data-el="thuy" data-va="mist">Thủy · mist</button>
+    <button class="pill" data-el="moc" data-va="">Mộc</button>
+    <button class="pill" data-el="moc" data-va="bamboo">Mộc · bamboo</button>
+    <button class="pill" data-el="moc" data-va="forest">Mộc · forest</button>
+    <button class="pill" data-el="kim" data-va="">Kim</button>
+    <button class="pill" data-el="kim" data-va="steel">Kim · steel</button>
+    <button class="pill" data-el="kim" data-va="titanium">Kim · titanium</button>
+  </span>
+  <span class="lb">Theme</span>
+  <span class="pills" id="themes">
+    <button class="pill on" data-theme="">light</button>
+    <button class="pill" data-theme="dark">dark</button>
+  </span>
+  <span class="lb">Language</span>
+  <span class="pills" id="langs">
+    <button class="pill on" data-lang="en">English</button>
+    <button class="pill" data-lang="vi">Tiếng Việt</button>
+  </span>
+</div>
+<div id="stage" style="max-width:1180px;margin:26px auto;padding:0 24px" lang="en">
+  <div style="position:relative;overflow:hidden;background:var(--cs-accent-strong);color:#fff;border-radius:var(--cs-radius-lg);box-shadow:var(--cs-shadow-md)">
+    <div class="cs-aurora-wash" style="position:absolute;inset:0;opacity:0.5;pointer-events:none"></div>
+    <div style="position:relative;display:flex;align-items:center;gap:14px;padding:20px 26px">
+      <span style="width:40px;height:40px;border-radius:var(--cs-radius-md);background:var(--cs-accent-bright);display:grid;place-items:center;color:var(--cs-accent-on);font-weight:800">✦</span>
+      <div>
+        <div style="font-weight:800;font-size:19px;letter-spacing:-0.01em" data-i18n="title">Status Hub</div>
+        <div style="font-size:12px;opacity:0.8" data-i18n="subtitle">Identity Lab · Theme × Element × Language</div>
+      </div>
+      <span style="margin-left:auto;display:inline-flex;align-items:center;background:var(--cs-accent-bright);color:var(--cs-accent-on);font-weight:700;font-size:13.5px;padding:0 18px;border-radius:var(--cs-component-button-radius);min-height:var(--cs-component-button-md-minHeight)" data-i18n="cta">New project</span>
+    </div>
+  </div>
+  <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0;padding:18px 20px;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)">
+    <div><div style="font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700" data-i18n="k1">Projects</div><div style="font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-top:3px">6</div></div>
+    <div><div style="font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700" data-i18n="k2">In progress</div><div style="font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-top:3px">4</div></div>
+    <div><div style="font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700" data-i18n="k3">Shipped</div><div style="font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-top:3px">1</div></div>
+    <div><div style="font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700" data-i18n="k4">Avg progress</div><div style="font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-top:3px;color:var(--cs-color-text-accent)">70%</div></div>
+  </div>
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
+    <div style="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);padding:18px 20px">
+      <div style="display:flex;justify-content:space-between;align-items:baseline;gap:10px"><b style="font-size:15px" data-i18n="cardTitle">Checkout rebuild</b><span style="font-size:12px;color:var(--cs-color-text-muted)">72%</span></div>
+      <p style="margin:6px 0 14px;font-size:13px;color:var(--cs-color-text-muted)" data-i18n="cardBody">Staging cutover on track for the milestone.</p>
+      <div style="height:8px;border-radius:999px;background:var(--cs-color-surface-raised);overflow:hidden"><span style="display:block;height:100%;width:72%;background:var(--cs-accent);border-radius:999px"></span></div>
+      <span style="display:inline-block;margin-top:14px;background:var(--cs-accent-tint);color:var(--cs-color-text-accent);font-weight:700;font-size:11.5px;padding:4px 10px;border-radius:999px" data-i18n="badge">In progress</span>
+    </div>
+    <div style="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);padding:18px 20px;display:flex;flex-direction:column;gap:10px">
+      <b style="font-size:15px" data-i18n="wishTitle">Make a wish</b>
+      <span style="border:1px solid var(--cs-component-textfield-border-default);border-radius:var(--cs-radius-md);background:var(--cs-color-surface-panel);padding:var(--cs-component-textfield-paddingY) var(--cs-component-textfield-paddingX);font-size:13.5px;color:var(--cs-color-text-muted);min-height:var(--cs-component-textfield-minHeight);box-sizing:border-box;display:flex;align-items:center" data-i18n="wishPh">A faster checkout, an app, a tool…</span>
+      <div style="display:flex;gap:10px;align-items:center">
+        <span style="display:inline-flex;align-items:center;background:var(--cs-component-button-primary-bg);color:var(--cs-component-button-primary-fg);font-weight:700;font-size:13.5px;padding:0 var(--cs-component-button-md-paddingX);border-radius:var(--cs-component-button-radius);min-height:var(--cs-component-button-md-minHeight);box-shadow:var(--cs-shadow-xs)" data-i18n="wishCta">Make a wish</span>
+        <a href="#" style="font-size:13.5px;font-weight:600" data-i18n="how">How it works</a>
+      </div>
+      <p style="margin:2px 0 0;font-size:12px;color:var(--cs-color-text-muted)" data-i18n="focus">Focus rings stay Ochre in every identity — try tabbing the pills above.</p>
+    </div>
+  </div>
+</div>
+<script>
+(function(){
+  var stage=document.getElementById('stage');
+  var I18N={
+    en:{title:'Status Hub',subtitle:'Identity Lab · Theme × Element × Language',cta:'New project',k1:'Projects',k2:'In progress',k3:'Shipped',k4:'Avg progress',cardTitle:'Checkout rebuild',cardBody:'Staging cutover on track for the milestone.',badge:'In progress',wishTitle:'Make a wish',wishPh:'A faster checkout, an app, a tool…',wishCta:'Make a wish',how:'How it works',focus:'Focus rings stay Ochre in every identity — try tabbing the pills above.'},
+    vi:{title:'Status Hub',subtitle:'Phòng lab nhận diện · Theme × Element × Language',cta:'Dự án mới',k1:'Dự án',k2:'Đang làm',k3:'Đã giao',k4:'Tiến độ TB',cardTitle:'Tái dựng checkout',cardBody:'Chuyển staging đúng milestone.',badge:'Đang làm',wishTitle:'Ước một điều',wishPh:'Checkout nhanh hơn, một app, một công cụ…',wishCta:'Ước ngay',how:'Cách hoạt động',focus:'Vòng focus luôn Ochre ở mọi nhận diện — thử Tab trên các pill phía trên.'}
+  };
+  function applyLang(lang){
+    var pack=I18N[lang]||I18N.en;
+    stage.setAttribute('lang', lang);
+    document.documentElement.setAttribute('lang', lang);
+    stage.querySelectorAll('[data-i18n]').forEach(function(el){
+      var k=el.getAttribute('data-i18n'); if(pack[k]!=null) el.textContent=pack[k];
+    });
+  }
+  function wire(rowId, apply){
+    var row=document.getElementById(rowId);
+    row.addEventListener('click',function(e){
+      var b=e.target.closest('.pill'); if(!b) return;
+      row.querySelectorAll('.pill').forEach(function(p){p.classList.remove('on')});
+      b.classList.add('on'); apply(b);
+    });
+  }
+  wire('els',function(b){
+    if(b.dataset.el){stage.setAttribute('data-cs-element',b.dataset.el);}else{stage.removeAttribute('data-cs-element');}
+    if(b.dataset.va){stage.setAttribute('data-cs-variant',b.dataset.va);}else{stage.removeAttribute('data-cs-variant');}
+  });
+  wire('themes',function(b){
+    if(b.dataset.theme){stage.setAttribute('data-theme',b.dataset.theme);document.documentElement.setAttribute('data-theme',b.dataset.theme);}
+    else{stage.removeAttribute('data-theme');document.documentElement.removeAttribute('data-theme');}
+  });
+  wire('langs',function(b){ applyLang(b.dataset.lang||'en'); });
+  // Parent frame (e.g. Storybook Live iframe host) can postMessage axes
+  window.addEventListener('message',function(ev){
+    var d=ev.data||{}; if(d.type!=='__cs_axes') return;
+    if(d.theme!==undefined){
+      if(d.theme){stage.setAttribute('data-theme',d.theme);document.documentElement.setAttribute('data-theme',d.theme);}
+      else{stage.removeAttribute('data-theme');document.documentElement.removeAttribute('data-theme');}
+      document.querySelectorAll('#themes .pill').forEach(function(p){p.classList.toggle('on',(p.dataset.theme||'')===(d.theme||''));});
+    }
+    if(d.element!==undefined){
+      if(d.element) stage.setAttribute('data-cs-element',d.element); else stage.removeAttribute('data-cs-element');
+      if(d.variant) stage.setAttribute('data-cs-variant',d.variant); else stage.removeAttribute('data-cs-variant');
+    }
+    if(d.lang) applyLang(d.lang);
+  });
+  window.__csApplyAxes=function(ax){ window.postMessage(Object.assign({type:'__cs_axes'},ax||{}), '*'); };
+})();
+</script>
+</body></html>

package/ui_kits/status-hub/index.html

@@ -0,0 +1,24 @@
+<!-- @dsCard group="Status Hub" viewport="1320x860" name="Status Hub — portfolio dashboard" subtitle="KPIs, board / table / releases lenses, detail drawer" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>CyberSkill · Status Hub</title>
+<link rel="icon" href="../../assets/favicon.svg" />
+<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="status.css" />
+<style>html,body{margin:0;background:var(--cs-color-surface-page);min-height:100vh}</style>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="data.js"></script>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel" src="StatusHub.jsx"></script>
+<script type="text/babel">
+  ReactDOM.createRoot(document.getElementById("root")).render(<StatusHub />);
+</script>
+</body>
+</html>

package/ui_kits/status-hub/login.html

@@ -0,0 +1,65 @@
+<!-- @dsCard group="Status Hub" viewport="1280x760" name="Status Hub — sign in" subtitle="Umber split login with brand panel + form controls" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>CyberSkill · Sign in</title>
+<link rel="icon" href="../../assets/favicon.svg" />
+<link rel="stylesheet" href="../../styles.css" />
+<style>
+  html, body { margin: 0; min-height: 100vh; }
+  .login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
+  .pane-brand { position: relative; overflow: hidden; background: var(--cs-color-brand-umber); color: #fff; padding: 56px 60px; display: flex; flex-direction: column; }
+  .pane-brand::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-gold.jpg"); background-size: cover; background-position: center; opacity: .42; }
+  .pane-brand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(26,17,8,.35), rgba(26,17,8,.8)); }
+  .pane-brand > * { position: relative; z-index: 1; }
+  .brand-lock { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 20px; }
+  .brand-lock img { width: 40px; height: 40px; }
+  .pane-brand h2 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: var(--cs-color-brand-ochre); margin: auto 0 8px; }
+  .pane-brand p { font-size: 17px; opacity: .9; margin: 0; max-width: 420px; }
+  .pane-form { display: grid; place-items: center; padding: 40px 24px; background: var(--cs-color-surface-page); }
+  .box { width: min(400px, 100%); }
+  .box h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
+  .box .sub { color: var(--cs-color-text-muted); margin: 0 0 28px; }
+  form { display: grid; gap: 16px; }
+  .rowbetween { display: flex; align-items: center; justify-content: space-between; }
+  .fine { text-align: center; font-size: 13px; color: var(--cs-color-text-muted); margin-top: 4px; }
+  @media (max-width: 820px) { .login { grid-template-columns: 1fr; } .pane-brand { display: none; } }
+</style>
+</head>
+<body>
+<div class="login">
+  <div class="pane-brand">
+    <div class="brand-lock"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</div>
+    <h2>Turn Your Will Into Real</h2>
+    <p>Sign in to the Status Hub — one page, three lenses across every wish in flight.</p>
+  </div>
+  <div class="pane-form">
+    <div class="box">
+      <h1>Sign in</h1>
+      <p class="sub">Welcome back. Đăng nhập để tiếp tục.</p>
+      <form onsubmit="return false">
+        <label class="cs-field"><span class="cs-field__label">Work email</span><input class="cs-field__control" type="email" placeholder="you@cyberskill.world" /></label>
+        <label class="cs-field"><span class="cs-field__label">Password</span><input class="cs-field__control" type="password" placeholder="••••••••" value="wishgranted" /></label>
+        <div class="rowbetween">
+          <label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span><span class="cs-switch__label">Remember me</span></label>
+          <a href="#">Forgot password?</a>
+        </div>
+        <button type="submit" class="cs-button cs-button--primary cs-button--full">Sign in</button>
+        <button type="button" class="cs-button cs-button--ghost cs-button--full">✦ Talk to Lumi instead</button>
+      </form>
+      <p class="fine">New here? <a href="#">Ask for access</a></p>
+    </div>
+  </div>
+</div>
+<button id="themeToggle" aria-label="Toggle theme" style="position:fixed;right:20px;bottom:20px;z-index:60;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);width:44px;height:44px;border-radius:999px;cursor:pointer;box-shadow:var(--cs-shadow-md)">☾</button>
+<script>
+  document.getElementById("themeToggle").addEventListener("click", function () {
+    var el = document.documentElement, dark = el.getAttribute("data-theme") === "dark";
+    el.setAttribute("data-theme", dark ? "light" : "dark");
+    this.textContent = dark ? "☾" : "☀";
+  });
+</script>
+</body>
+</html>