@cyberskill/design 1.0.0

package/base/interaction.css

@@ -0,0 +1,50 @@
+/* CyberSkill — interaction layer: hover depth, focus glow, entrance motion.
+ * Additive layer loaded LAST so it enhances base components without changing
+ * their structure. Everything degrades under prefers-reduced-motion. Anchors
+ * (Umber/Ochre) unchanged — this only adds warmth to elevation + interaction. */
+
+/* ---- 1. Warm hover depth — filled controls lift on a warm umber shadow ---- */
+.cs-button--primary, .cs-button--secondary, .cs-button--tertiary, .cs-button--danger {
+  transition: background var(--cs-duration-fast) var(--cs-ease-standard),
+    border-color var(--cs-duration-fast) var(--cs-ease-standard),
+    filter var(--cs-duration-fast) var(--cs-ease-standard),
+    box-shadow var(--cs-duration-base) var(--cs-ease-standard),
+    transform var(--cs-duration-fast) var(--cs-ease-standard);
+}
+.cs-button--primary:hover:not(.is-disabled),
+.cs-button--danger:hover:not(.is-disabled) {
+  box-shadow: 0 8px 20px rgba(69, 33, 14, 0.24);
+  transform: translateY(-1px);
+}
+.cs-button--primary:active:not(.is-disabled),
+.cs-button--danger:active:not(.is-disabled) {
+  transform: translateY(0);
+  box-shadow: var(--cs-shadow-xs);
+}
+
+/* ---- 2. Soft ochre focus glow — layered on the immutable 3px ring ---- */
+.cs-button:focus-visible,
+.cs-field__control:focus-visible,
+.cs-select select.cs-field__control:focus-visible,
+.cs-search:focus-within,
+.cs-ai-disclosure__badge:focus-visible,
+.cs-switch input:focus-visible + .cs-switch__track {
+  box-shadow: 0 0 0 5px color-mix(in oklab, var(--cs-color-accent-ochre) 26%, transparent);
+}
+
+/* ---- 3. Entrance motion utilities (opt-in) + a gentle Dialog entrance ---- */
+@keyframes cs-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cs-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
+@keyframes cs-pop-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
+.cs-fade-in { animation: cs-fade-in var(--cs-duration-slow) var(--cs-ease-entrance) both; }
+.cs-rise-in { animation: cs-rise-in var(--cs-duration-slow) var(--cs-ease-entrance) both; }
+.cs-rise-in--2 { animation-delay: 80ms; }
+.cs-rise-in--3 { animation-delay: 160ms; }
+.cs-rise-in--4 { animation-delay: 240ms; }
+.cs-dialog { animation: cs-pop-in var(--cs-duration-base) var(--cs-ease-entrance) both; }
+.cs-dialog__overlay { animation: cs-fade-in var(--cs-duration-base) var(--cs-ease-standard) both; }
+
+@media (prefers-reduced-motion: reduce) {
+  .cs-button--primary:hover, .cs-button--danger:hover { transform: none; }
+  .cs-fade-in, .cs-rise-in, .cs-dialog, .cs-dialog__overlay { animation: none; }
+}

package/base/navigation.css

@@ -0,0 +1,39 @@
+/* CyberSkill — navigation (.cs-*). */
+
+/* Tabs */
+.cs-tabs { display: flex; gap: 4px; border-block-end: 1px solid var(--cs-color-border-default); }
+.cs-tab { appearance: none; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); padding: 10px 14px; cursor: pointer; position: relative; border-block-end: 2px solid transparent; margin-block-end: -1px; display: inline-flex; align-items: center; gap: 7px; }
+.cs-tab:hover { color: var(--cs-color-text-primary); }
+.cs-tab[aria-selected="true"] { color: var(--cs-color-brand-umber); border-block-end-color: var(--cs-color-brand-ochre); }
+[data-theme="dark"] .cs-tab[aria-selected="true"] { color: var(--cs-color-brand-ochre); }
+.cs-tab:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: -3px; border-radius: var(--cs-radius-sm); }
+.cs-tab__count { font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-full); padding: 1px 7px; }
+
+/* Breadcrumb */
+.cs-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); }
+.cs-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
+.cs-breadcrumb a { color: var(--cs-color-text-muted); text-decoration: none; }
+.cs-breadcrumb a:hover { color: var(--cs-color-text-accent); }
+.cs-breadcrumb__sep { color: var(--cs-color-border-default); }
+.cs-breadcrumb__current { color: var(--cs-color-text-primary); font-weight: 600; }
+
+/* Pagination */
+.cs-pagination { display: inline-flex; align-items: center; gap: 4px; }
+.cs-pagination button { min-inline-size: 38px; block-size: 38px; padding: 0 10px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-md); font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); cursor: pointer; display: inline-grid; place-items: center; }
+.cs-pagination button:hover:not(:disabled) { border-color: var(--cs-color-brand-ochre); }
+.cs-pagination button[aria-current="page"] { background: var(--cs-color-brand-umber); color: var(--cs-color-text-inverse); border-color: transparent; }
+[data-theme="dark"] .cs-pagination button[aria-current="page"] { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
+.cs-pagination button:disabled { opacity: 0.45; cursor: not-allowed; }
+.cs-pagination__ellipsis { padding: 0 4px; color: var(--cs-color-text-muted); }
+
+/* Menu / Dropdown */
+.cs-menu { position: relative; display: inline-block; }
+.cs-menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 200px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; z-index: var(--cs-depth-toast); display: grid; gap: 2px; }
+.cs-menu__list--end { inset-inline-start: auto; inset-inline-end: 0; }
+.cs-menu__item { display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
+.cs-menu__item:hover { background: var(--cs-color-surface-raised); }
+.cs-menu__item:focus-visible { background: var(--cs-color-surface-raised); outline: 3px solid var(--cs-color-accent-ochre); outline-offset: -3px; }
+.cs-menu__item--danger { color: var(--cs-color-semantic-danger); }
+.cs-menu__item--danger:hover { background: color-mix(in oklab, var(--cs-color-semantic-danger) 10%, transparent); }
+.cs-menu__sep { block-size: 1px; background: var(--cs-color-border-default); margin: 4px 2px; }
+.cs-menu__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 6px 10px 2px; }

package/base/reset.css

@@ -0,0 +1,17 @@
+/* CyberSkill — minimal base reset. Products opt in by linking styles.css. */
+*, *::before, *::after { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  background: var(--cs-color-surface-page, #fffdf8);
+  color: var(--cs-color-text-primary, #45210e);
+  font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);
+  font-size: var(--cs-font-size-base, 1rem);
+  line-height: var(--cs-font-lineHeight-body, 1.5);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+:where(h1, h2, h3, h4, h5, h6) { line-height: var(--cs-font-lineHeight-heading, 1.35); text-wrap: balance; }
+:where(p) { text-wrap: pretty; }
+:where(code, pre, kbd, samp) { font-family: var(--cs-font-family-mono, ui-monospace, monospace); }
+:where(:focus-visible) { outline: 2px solid var(--cs-color-accent-ochre, #f4ba17); outline-offset: 2px; }

package/base/responsive.css

@@ -0,0 +1,128 @@
+/* CyberSkill — global responsive layer (loaded LAST so it can adapt any surface).
+ * The system is desktop-first but every artifact must read on tablet and phone.
+ * Strategy: (1) media never overflows; (2) the print-doc archetype (cs-desk /
+ * cs-sheet) relaxes its generous desktop padding on small screens; (3) shared class
+ * hooks (sidebar, tables) reflow; (4) inline fixed-column grids collapse; (5) wide
+ * fixed-pixel export canvases (decks, social) scroll to keep their exact geometry.
+ *
+ * NOTE on the [style*=…] selectors below: Design-Component templates compile inline
+ * `style="…"` into React style objects, so the RENDERED attribute is serialized with
+ * a space after the colon and after commas — e.g. `grid-template-columns: repeat(4, 1fr)`.
+ * Every substring selector here MUST match that spaced form, not the authored source. */
+
+/* 1 — Media and embeds never blow out a column */
+img, svg, video, canvas { max-width: 100%; height: auto; }
+
+/* 2 — Print-doc archetype: shrink desk + sheet chrome as the screen narrows.
+ * cs-desk is the grey backing; cs-sheet is the white page. */
+@media screen and (max-width: 900px) {
+  .cs-desk { padding: 24px 10px !important; }
+  .cs-sheet { padding: 40px 40px !important; }
+}
+@media screen and (max-width: 620px) {
+  .cs-desk { padding: 12px 6px !important; }
+  .cs-sheet { padding: 26px 20px !important; border-radius: 8px !important; }
+}
+@media screen and (max-width: 460px) {
+  .cs-sheet { padding: 20px 15px !important; }
+}
+
+/* 3 — Wide tables inside sheets/panels scroll horizontally instead of clipping */
+@media screen and (max-width: 760px) {
+  .cs-sheet table, .cs-table-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+}
+
+/* 4 — App shell: the sidebar + main is a fixed two-column inline grid on desktop.
+ * Collapse it to a stacked layout; the sidebar becomes a horizontal nav strip. */
+@media screen and (max-width: 760px) {
+  .cs-sidebar { position: static !important; width: auto !important; height: auto !important;
+    display: flex !important; flex-wrap: wrap !important; gap: 4px 10px !important;
+    align-items: center !important; border-inline-end: 0 !important;
+    border-block-end: 1px solid var(--cs-color-border-default) !important; }
+  .cs-sidebar__label { width: 100% !important; }
+}
+
+/* 5 — Fixed-pixel export canvases (16:9 decks, social 1080/1200 canvases) sit in a
+ * dark desk wrapper tagged .cs-canvas-desk. It is ALWAYS a horizontal scroll viewport,
+ * so a slide/canvas wider than the window scrolls INSIDE the desk instead of pushing
+ * the whole page wide — a 16:9 slide's content min-width can exceed the window a little
+ * even on a laptop (≈1280), which otherwise overflowed the document. The legible
+ * min-width floor for the inner track only applies once the window itself is narrow. */
+.cs-canvas-desk { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+@media screen and (max-width: 1120px) {
+  .cs-canvas-desk > * { min-width: 960px; }
+}
+
+/* 6 — Very wide section padding eases in on phones */
+@media screen and (max-width: 620px) {
+  section[style*="padding: 84px"], section[style*="padding: 80px"],
+  section[style*="padding: 72px"] { padding-inline: 22px !important; }
+}
+
+/* 7 — Inline fixed-column grids reflow on small screens. Templates set
+ * `grid-template-columns` inline, which beats external rules — so override with
+ * !important via substring selectors (spaced form, see the note above). Fluid
+ * repeat(auto-fit/auto-fill,…) grids are never matched (they read `repeat(a`).
+ * Tablet: 3+ cols → 2. Phone: everything → 1 (declared after, so it wins at the
+ * narrow width). Print is unaffected — the @page is wide, so these screen
+ * breakpoints never fire during print/export. */
+@media screen and (max-width: 900px) {
+  [style*="grid-template-columns: repeat(3"],
+  [style*="grid-template-columns: repeat(4"],
+  [style*="grid-template-columns: repeat(5"],
+  [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(2, 1fr) !important; }
+}
+@media screen and (max-width: 600px) {
+  [style*="grid-template-columns: repeat(2"],
+  [style*="grid-template-columns: repeat(3"],
+  [style*="grid-template-columns: repeat(4"],
+  [style*="grid-template-columns: repeat(5"],
+  [style*="grid-template-columns: repeat(6"],
+  [style*="grid-template-columns: 1fr 1fr"],
+  [style*="grid-template-columns: 1.15fr 1fr"],
+  [style*="grid-template-columns: 1fr 1.15fr"],
+  [style*="grid-template-columns: 2fr 1fr"],
+  [style*="grid-template-columns: 1fr 2fr"],
+  [style*="grid-template-columns: auto 1fr"] { grid-template-columns: 1fr !important; }
+}
+/* Decks & social canvases keep their authored columns — they scroll (see §5), so their
+ * internal grids must not collapse. Unscoped + higher specificity, so they win at every width. */
+.cs-canvas-desk [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
+.cs-canvas-desk [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(4, 1fr) !important; }
+
+/* 8 — Touch targets reach the 44px minimum on phones/tablets (the system's a11y
+ * floor). Base sidebar nav rows (39px) and the topbar search input (26px) are
+ * fine for mouse on desktop but too small to tap; grow them on small screens. */
+@media screen and (max-width: 760px) {
+  .cs-sidebar .cs-nav-item, .cs-nav-item { min-height: 44px; }
+  .cs-search { display: flex; align-items: center; min-height: 44px; }
+  .cs-search input, .cs-search select { min-height: 44px; }
+}
+
+/* 9 — Unbreakable long tokens force horizontal overflow on narrow screens.
+ * Write-on lines ("______"), long URLs, IDs, hashes, and account numbers have a
+ * min-content width that can exceed a phone column and push the page wider than the
+ * viewport (observed: the agenda / review / PIP fill-in lines overflowed at 390px).
+ * `overflow-wrap: anywhere` lets them break — and unlike `break-word` it ALSO shrinks
+ * the min-content contribution, so grid/flex tracks size down correctly instead of
+ * being propped open. It only breaks a token when it would otherwise overflow, so
+ * ordinary prose is untouched. Scoped to the print-doc wrapper; the print @page is
+ * wide, so this screen breakpoint never fires during export. */
+@media screen and (max-width: 760px) {
+  .cs-desk, .cs-sheet { overflow-wrap: anywhere; }
+}
+
+/* 10 — App-shell layout: sidebar + main is a fixed two-column INLINE grid
+ * (grid-template-columns: 248px 1fr). §4 restyles the .cs-sidebar itself, but the
+ * parent grid still reserved the 248px column, so on a phone the main column (and its
+ * DataTable) was squeezed and overflowed. Collapse the shell grid to one column with
+ * an attribute selector — the compiler serializes the inline value with spaces, and an
+ * attribute selector reliably overrides an inline grid-template-columns (a class
+ * selector does not). Then let the app-region grids shrink (min-width:0) and the data
+ * table scroll inside its panel instead of forcing the page wide. */
+@media screen and (max-width: 760px) {
+  [style*="grid-template-columns: 248px 1fr"] { grid-template-columns: 1fr !important; }
+  main { min-width: 0; }
+  main > * { min-width: 0; }
+  .cs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+}

package/base/shell.css

@@ -0,0 +1,55 @@
+/* CyberSkill — app shell + overlays wave 2 (.cs-*). */
+
+/* Sidebar + NavItem */
+.cs-sidebar { inline-size: 248px; background: var(--cs-color-surface-panel); border-inline-end: 1px solid var(--cs-color-border-default); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; }
+.cs-sidebar__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 12px 12px 4px; }
+.cs-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--cs-radius-md); color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); text-decoration: none; cursor: pointer; border: 0; background: transparent; inline-size: 100%; text-align: start; }
+.cs-nav-item:hover { background: var(--cs-color-surface-raised); }
+.cs-nav-item__icon { flex: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
+.cs-nav-item.is-active { background: color-mix(in oklab, var(--cs-color-brand-ochre) 22%, var(--cs-color-surface-panel)); color: var(--cs-color-brand-umber); }
+.cs-nav-item.is-active .cs-nav-item__icon { color: var(--cs-color-brand-umber); }
+[data-theme="dark"] .cs-nav-item.is-active { color: var(--cs-color-brand-ochre); }
+[data-theme="dark"] .cs-nav-item.is-active .cs-nav-item__icon { color: var(--cs-color-brand-ochre); }
+.cs-nav-item__trail { margin-inline-start: auto; }
+
+/* Steps */
+.cs-steps { display: flex; gap: 0; }
+.cs-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; padding-inline-end: 12px; }
+.cs-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 34px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--cs-color-border-default); }
+.cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: 13px; background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }
+.cs-step--done .cs-step__marker { background: var(--cs-color-brand-umber); color: #fff; border-color: transparent; }
+.cs-step--done:not(:last-child)::after { background: var(--cs-color-brand-umber); }
+.cs-step--active .cs-step__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-color-brand-ochre) 28%, transparent); }
+.cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
+.cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
+
+/* Popover */
+.cs-popover { position: relative; display: inline-block; }
+.cs-popover__panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px; z-index: var(--cs-depth-toast); }
+.cs-popover__panel--end { inset-inline-start: auto; inset-inline-end: 0; }
+
+/* Drawer */
+.cs-drawer-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); }
+.cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: -18px 0 48px rgba(31, 19, 11, 0.22); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }
+.cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: 18px 0 48px rgba(31, 19, 11, 0.22); animation-name: cs-drawer-in-left; }
+.cs-drawer__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }
+.cs-drawer__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; }
+.cs-drawer__close { margin-inline-start: auto; border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); display: grid; place-items: center; padding: 4px; }
+.cs-drawer__close:hover { color: var(--cs-color-semantic-danger); }
+.cs-drawer__body { flex: 1; overflow: auto; padding: 20px; }
+.cs-drawer__footer { padding: 14px 20px; border-block-start: 1px solid var(--cs-color-border-default); display: flex; gap: 10px; justify-content: flex-end; }
+@keyframes cs-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
+@keyframes cs-drawer-in-left { from { transform: translateX(-100%); } to { transform: none; } }
+@media (prefers-reduced-motion: reduce) { .cs-drawer { animation: none; } }
+
+/* CommandPalette */
+.cs-cmdk-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); display: grid; align-items: start; justify-items: center; padding-block-start: 12vh; }
+.cs-cmdk { inline-size: min(560px, 92vw); 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-xl); overflow: hidden; }
+.cs-cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--cs-color-border-default); }
+.cs-cmdk__search svg { color: var(--cs-color-text-muted); }
+.cs-cmdk__search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-md); color: var(--cs-color-text-primary); }
+.cs-cmdk__list { max-block-size: 340px; overflow: auto; padding: 8px; display: grid; gap: 2px; }
+.cs-cmdk__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 8px 10px 2px; }
+.cs-cmdk__item { display: flex; align-items: center; gap: 11px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 10px 12px; border-radius: var(--cs-radius-md); cursor: pointer; }
+.cs-cmdk__item:hover, .cs-cmdk__item[aria-selected="true"] { background: var(--cs-color-surface-raised); }
+.cs-cmdk__item .cs-kbd { margin-inline-start: auto; }

package/base/typography.css

@@ -0,0 +1,14 @@
+/* CyberSkill — typographic role utilities. Each bundles size + line-height +
+ * weight + tracking so consumers write intent (.cs-h1) not magic numbers.
+ * Built on the semantic aliases in tokens/typography.css. */
+.cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }
+.cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }
+.cs-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }
+.cs-h3 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h3); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); }
+.cs-h4 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h4); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-font-weight-semibold); }
+.cs-body-lg { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body-lg); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }
+.cs-body { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }
+.cs-secondary { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-secondary); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }
+.cs-caption { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-caption); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }
+.cs-eyebrow { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-eyebrow); font-weight: var(--cs-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-accent); }
+.cs-mono { font-family: var(--cs-font-family-mono); }

package/components/_i18n/i18n.js

@@ -0,0 +1,56 @@
+/* CyberSkill i18n — shared bilingual helper (v3 Batch 0).
+ * Vietnamese-first: default 'vi'. A component resolves its language from an explicit
+ * `lang` prop → nearest [lang] ancestor → document <html lang> → 'vi'. Built-in UI
+ * strings live in strings.js (EN + VI parity, enforced by _audit/bilingual-parity.html).
+ * Import from a component:  import { makeT, resolveLang, formatDate } from "../_i18n/i18n.js"; */
+import React from "react";
+import { strings as STRINGS } from "./strings.js";
+
+export function resolveLang(propLang, el) {
+  const norm = (l) => (!l ? null : String(l).toLowerCase().startsWith("vi") ? "vi" : "en");
+  let l = norm(propLang);
+  if (!l && el && el.closest) { const a = el.closest("[lang]"); if (a) l = norm(a.getAttribute("lang")); }
+  if (!l && typeof document !== "undefined") l = norm(document.documentElement.getAttribute("lang"));
+  return l || "vi";
+}
+
+export function tr(component, key, lang) {
+  const c = STRINGS[component] || {};
+  const table = c[lang] || c.vi || c.en || {};
+  if (table[key] != null) return table[key];
+  const en = c.en || {};
+  return en[key] != null ? en[key] : key;
+}
+
+/** Bind a component + language once: const t = makeT("Pagination", lang); t("next"). */
+export function makeT(component, lang) { return (key) => tr(component, key, lang); }
+
+/** React hook: attach the returned ref to the component root; resolves language from an
+ * explicit prop → nearest [lang] ancestor (e.g. a template's VN wrapper) → <html lang> → 'vi'.
+ * Corrects to the ancestor value in a layout effect (before paint). */
+export function useLang(propLang) {
+  const ref = React.useRef(null);
+  const [lang, setLang] = React.useState(() => resolveLang(propLang, null));
+  React.useLayoutEffect(() => { setLang(resolveLang(propLang, ref.current)); }, [propLang]);
+  return [ref, lang];
+}
+
+const VI_MONTHS = ["Tháng 1","Tháng 2","Tháng 3","Tháng 4","Tháng 5","Tháng 6","Tháng 7","Tháng 8","Tháng 9","Tháng 10","Tháng 11","Tháng 12"];
+
+/** VN date = DD/MM/YYYY; EN = 02 Jul 2026. */
+export function formatDate(d, lang) {
+  const dt = d instanceof Date ? d : new Date(d);
+  if (isNaN(dt.getTime())) return "";
+  if (lang === "vi") {
+    const p = (n) => String(n).padStart(2, "0");
+    return p(dt.getDate()) + "/" + p(dt.getMonth() + 1) + "/" + dt.getFullYear();
+  }
+  return dt.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
+}
+export function monthName(i, lang) { return lang === "vi" ? VI_MONTHS[i] : new Date(2000, i, 1).toLocaleDateString("en-US", { month: "long" }); }
+export function formatNumber(n, lang) { if (n == null || isNaN(n)) return ""; return new Intl.NumberFormat(lang === "vi" ? "vi-VN" : "en-US").format(n); }
+/** VN currency = "1.234.567 ₫"; EN = "$1,234,567". */
+export function formatCurrency(n, lang) {
+  if (n == null || isNaN(n)) return "";
+  return lang === "vi" ? new Intl.NumberFormat("vi-VN").format(n) + "\u00a0₫" : "$" + new Intl.NumberFormat("en-US").format(n);
+}

package/components/_i18n/strings.js

@@ -0,0 +1,187 @@
+/* CyberSkill — central bilingual string registry (v3 Batch 0/1).
+ * Every component with BUILT-IN UI text (text the consumer does NOT pass as a prop)
+ * registers its strings here, EN + VI. _audit/bilingual-parity.html enforces:
+ *   • each component has both `en` and `vi`
+ *   • identical key sets across en/vi (no missing/extra keys)
+ *   • no empty values
+ * Batch 1 wires each component to read these via i18n.js `makeT()` + `useLang()`,
+ * replacing hardcoded English. Export is lowercase so the DS compiler does NOT expose
+ * it on the component namespace. */
+export const strings = {
+  Pagination: {
+    en: { label: "Pagination", prev: "Previous page", next: "Next page" },
+    vi: { label: "Phân trang", prev: "Trang trước", next: "Trang sau" },
+  },
+  Breadcrumb: {
+    en: { label: "Breadcrumb" },
+    vi: { label: "Đường dẫn" },
+  },
+  CommandPalette: {
+    en: { placeholder: "Type a command or search…", empty: "No results found", aria: "Command palette", esc: "Esc" },
+    vi: { placeholder: "Nhập lệnh hoặc tìm kiếm…", empty: "Không tìm thấy kết quả", aria: "Bảng lệnh", esc: "Esc" },
+  },
+  SearchField: {
+    en: { placeholder: "Search…", clear: "Clear search" },
+    vi: { placeholder: "Tìm kiếm…", clear: "Xóa tìm kiếm" },
+  },
+  NumberField: {
+    en: { decrease: "Decrease", increase: "Increase" },
+    vi: { decrease: "Giảm", increase: "Tăng" },
+  },
+  FileUpload: {
+    en: { title: "Drop files here or browse", hint: "PNG, JPG, or PDF up to 10MB" },
+    vi: { title: "Kéo tệp vào đây hoặc chọn", hint: "PNG, JPG hoặc PDF, tối đa 10MB" },
+  },
+  Dialog: {
+    en: { close: "Close", confirm: "Confirm", cancel: "Cancel" },
+    vi: { close: "Đóng", confirm: "Xác nhận", cancel: "Hủy" },
+  },
+  Drawer: {
+    en: { close: "Close", panel: "Panel" },
+    vi: { close: "Đóng", panel: "Bảng" },
+  },
+  DataTable: {
+    en: { empty: "No records" },
+    vi: { empty: "Không có bản ghi" },
+  },
+  ConfidenceMeter: {
+    en: { label: "Confidence", low: "Low", medium: "Medium", high: "High" },
+    vi: { label: "Độ tin cậy", low: "Thấp", medium: "Trung bình", high: "Cao" },
+  },
+  Spinner: {
+    en: { label: "Loading" },
+    vi: { label: "Đang tải" },
+  },
+  Tag: {
+    en: { remove: "Remove" },
+    vi: { remove: "Gỡ bỏ" },
+  },
+  Toast: {
+    en: { notifications: "Notifications", dismiss: "Dismiss" },
+    vi: { notifications: "Thông báo", dismiss: "Đóng" },
+  },
+  TypingIndicator: {
+    en: { label: "Lumi is typing" },
+    vi: { label: "Lumi đang nhập" },
+  },
+  Editor: {
+    en: { toolbar: "Formatting", bold: "Bold", italic: "Italic", list: "Bullet list", area: "Rich text" },
+    vi: { toolbar: "Định dạng", bold: "Đậm", italic: "Nghiêng", list: "Danh sách", area: "Văn bản" },
+  },
+  Terminal: {
+    en: { input: "Terminal input" },
+    vi: { input: "Ô nhập lệnh" },
+  },
+  DataGrid: {
+    en: { empty: "No records", selectAll: "Select all rows", selectRow: "Select row" },
+    vi: { empty: "Không có bản ghi", selectAll: "Chọn tất cả", selectRow: "Chọn dòng" },
+  },
+  Splitter: {
+    en: { label: "Resize panes" },
+    vi: { label: "Đổi kích thước khung" },
+  },
+  HotKeys: {
+    en: { title: "Keyboard shortcuts", toggle: "Toggle this sheet" },
+    vi: { title: "Phím tắt", toggle: "Bật/tắt bảng này" },
+  },
+  ColorPicker: {
+    en: { label: "Color", hex: "Hex value" },
+    vi: { label: "Màu", hex: "Giá trị hex" },
+  },
+  Tour: {
+    en: { skip: "Skip", back: "Back", next: "Next", done: "Done" },
+    vi: { skip: "Bỏ qua", back: "Quay lại", next: "Tiếp", done: "Xong" },
+  },
+  TreeSelect: {
+    en: { placeholder: "Select…" },
+    vi: { placeholder: "Chọn…" },
+  },
+  Cascader: {
+    en: { placeholder: "Select…" },
+    vi: { placeholder: "Chọn…" },
+  },
+  Transfer: {
+    en: { source: "Available", target: "Selected", toTarget: "Move to selected", toSource: "Move to available" },
+    vi: { source: "Có sẵn", target: "Đã chọn", toTarget: "Chuyển sang đã chọn", toSource: "Chuyển về có sẵn" },
+  },
+  Mentions: {
+    en: { placeholder: "Add a note — @ to mention" },
+    vi: { placeholder: "Thêm ghi chú — gõ @ để nhắc tên" },
+  },
+  Form: {
+    en: { summary: "Please fix the following:", required: "required", requiredField: "This field is required" },
+    vi: { summary: "Vui lòng sửa các mục sau:", required: "bắt buộc", requiredField: "Trường này là bắt buộc" },
+  },
+  BackTop: {
+    en: { label: "Back to top" },
+    vi: { label: "Về đầu trang" },
+  },
+  Carousel: {
+    en: { prev: "Previous slide", next: "Next slide", slide: "Slide" },
+    vi: { prev: "Trang trước", next: "Trang sau", slide: "Trang" },
+  },
+  Comment: {
+    en: { reply: "Reply" },
+    vi: { reply: "Trả lời" },
+  },
+  Image: {
+    en: { preview: "Preview image", close: "Close" },
+    vi: { preview: "Xem ảnh", close: "Đóng" },
+  },
+  Toolbar: {
+    en: { more: "More actions" },
+    vi: { more: "Thao tác khác" },
+  },
+  Popconfirm: {
+    en: { ok: "OK", cancel: "Cancel" },
+    vi: { ok: "Đồng ý", cancel: "Hủy" },
+  },
+  Result: {
+    en: { success: "Done", error: "Something went wrong", warning: "Please check", info: "For your information" },
+    vi: { success: "Hoàn tất", error: "Đã có lỗi xảy ra", warning: "Vui lòng kiểm tra", info: "Thông tin" },
+  },
+  InlineEdit: {
+    en: { edit: "Edit", empty: "Add text" },
+    vi: { edit: "Sửa", empty: "Thêm nội dung" },
+  },
+  Calendar: {
+    en: { prev: "Previous month", next: "Next month" },
+    vi: { prev: "Tháng trước", next: "Tháng sau" },
+  },
+  DatePicker: {
+    en: { placeholder: "Select a date" },
+    vi: { placeholder: "Chọn ngày" },
+  },
+  TimePicker: {
+    en: { label: "Time" },
+    vi: { label: "Giờ" },
+  },
+  Combobox: {
+    en: { placeholder: "Select or type…", empty: "No matches" },
+    vi: { placeholder: "Chọn hoặc nhập…", empty: "Không có kết quả phù hợp" },
+  },
+  InputGroup: {
+    en: { clear: "Clear", show: "Show password", hide: "Hide password" },
+    vi: { clear: "Xóa", show: "Hiện mật khẩu", hide: "Ẩn mật khẩu" },
+  },
+  TagInput: {
+    en: { placeholder: "Add a tag…", remove: "Remove" },
+    vi: { placeholder: "Thêm thẻ…", remove: "Gỡ" },
+  },
+  Rating: {
+    en: { label: "Rating" },
+    vi: { label: "Đánh giá" },
+  },
+  InputOTP: {
+    en: { label: "One-time code" },
+    vi: { label: "Mã dùng một lần" },
+  },
+  PromptInput: {
+    en: { placeholder: "Type your wish…", send: "Send", hint: "Lumi replies, then hands clear wishes to a human." },
+    vi: { placeholder: "Nhập điều ước của bạn…", send: "Gửi", hint: "Lumi trả lời, rồi chuyển điều ước rõ ràng cho con người." },
+  },
+  HumanReviewGate: {
+    en: { aria: "Human review gate", risk: "review required", approve: "Approve", reject: "Reject", reviewer: "Reviewer" },
+    vi: { aria: "Cổng kiểm duyệt của con người", risk: "cần xem xét", approve: "Phê duyệt", reject: "Từ chối", reviewer: "Người duyệt" },
+  },
+};

package/components/_utils/cx.js

@@ -0,0 +1,4 @@
+/** Join truthy className fragments with a single space. */
+export function cx(...c) {
+  return c.filter(Boolean).join(" ");
+}

package/components/ai/AIDisclosureBadge.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type * as React from "react";
+
+/**
+ * AI-native disclosure pill (info-blue). Expands to explain what AI did and to
+ * list sources — an explainability path, never decoration. Ships localized copy
+ * (EN + VN) in production.
+ */
+export interface AIDisclosureBadgeProps {
+  label?: string;
+  details?: ReactNode;
+  sources?: string[];
+  className?: string;
+}
+
+export function AIDisclosureBadge(props: AIDisclosureBadgeProps): React.ReactElement;

package/components/ai/AIDisclosureBadge.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { AIDisclosureBadge } from './AIDisclosureBadge.jsx'
+
+/**
+ * Code Connect stub — AIDisclosureBadge
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(AIDisclosureBadge, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-2', {
+  example: () => <AIDisclosureBadge />,
+  imports: ["import { AIDisclosureBadge } from '@cyberskill/design'"],
+})

package/components/ai/AIDisclosureBadge.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/**
+ * CyberSkill AIDisclosureBadge — a pill that discloses AI involvement and, when
+ * expanded, explains what was generated and lists sources. Never decorative:
+ * this is an explainability affordance (info-blue), not a style flourish.
+ */
+export function AIDisclosureBadge({
+  label = "AI assisted",
+  details = "This content was generated or transformed with AI assistance.",
+  sources = [],
+  className,
+}) {
+  const [open, setOpen] = React.useState(false);
+  const panelId = React.useId();
+  const sourceList = (sources || []).filter(Boolean);
+  return (
+    <span className={cx("cs-ai-disclosure", className)}>
+      <button
+        type="button"
+        className="cs-ai-disclosure__badge"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {label}
+      </button>
+      {open ? (
+        <span id={panelId} role="status" className="cs-ai-disclosure__panel">
+          <span className="cs-ai-disclosure__details">{details}</span>
+          {sourceList.length ? (
+            <span className="cs-ai-disclosure__sources">Sources: {sourceList.join(", ")}</span>
+          ) : null}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/components/ai/AIDisclosureBadge.prompt.md

@@ -0,0 +1,9 @@
+**AIDisclosureBadge** — an info-blue pill that discloses AI involvement and expands to explain what was generated and cite sources. It is an accessibility/explainability affordance, not decoration; ship EN + VN copy.
+
+```jsx
+<AIDisclosureBadge
+  label="AI assisted"
+  details="Draft summary generated by Lumi, reviewed by the team."
+  sources={["release-notes.md", "task backlog"]}
+/>
+```