@cyberskill/design 1.1.1 → 1.2.0

package/base/responsive.css

@@ -13,6 +13,16 @@
 /* 1 — Media and embeds never blow out a column */
 img, svg, video, canvas { max-width: 100%; height: auto; }
 
+/* G1 / CDS-RESP-001 — container-query migration (compatibility layer).
+ * Opt-in hosts mark a sizing context with `.cs-cq`. Children can use
+ * `@container (max-width: …)` without waiting for a full layout rewrite.
+ * Media queries above remain the default until packs generate CQ variants. */
+.cs-cq { container-type: inline-size; container-name: cs; }
+@container cs (max-width: 640px) {
+  .cs-cq-stack { display: flex !important; flex-direction: column !important; }
+  .cs-cq-stack > * { min-inline-size: 0; max-inline-size: 100%; }
+}
+
 /* 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) {
@@ -126,3 +136,18 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
   main > * { min-width: 0; }
   .cs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 }
+
+/* ---- 320 reflow (UX-003 / WCAG 1.4.10) ---- */
+@media (max-width: 360px) {
+  .cs-tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
+  .cs-pagination { flex-wrap: wrap; max-inline-size: 100%; }
+  .cs-pagination button { min-inline-size: 32px; }
+  .cs-otp { gap: 4px; }
+  .cs-otp__box { inline-size: 36px; block-size: 40px; font-size: var(--cs-font-size-base); }
+  .cs-dl { grid-template-columns: 1fr; }
+  .cs-field { min-inline-size: 0; }
+  .cs-field__control { min-inline-size: 0; }
+  .card, button.card, article.case { min-width: 0 !important; }
+  [style*="minmax(320px"] { grid-template-columns: 1fr !important; }
+  [style*="grid-template-columns: 248px 1fr"] { grid-template-columns: 1fr !important; }
+}

package/base/shell.css

@@ -16,7 +16,7 @@
 .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__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: var(--cs-font-size-sm); 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); }
@@ -53,3 +53,9 @@
 .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; }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] .cs-nav-item.is-active { color: var(--cs-color-brand-ochre); }
+  [data-theme="system"] .cs-nav-item.is-active .cs-nav-item__icon { color: var(--cs-color-brand-ochre); }
+}

package/components/_i18n/i18n.js

@@ -31,7 +31,19 @@ export function makeT(component, lang) { return (key) => tr(component, key, lang
 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]);
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    setLang(resolveLang(propLang, el));
+    if (!el || propLang) return undefined;
+    // Re-resolve when an ancestor [lang] changes (template Language axis / __dcSetProps).
+    const obs = new MutationObserver(() => setLang(resolveLang(propLang, el)));
+    let node = el.parentElement;
+    while (node) {
+      obs.observe(node, { attributes: true, attributeFilter: ["lang"] });
+      node = node.parentElement;
+    }
+    return () => obs.disconnect();
+  }, [propLang]);
   return [ref, lang];
 }
 

package/components/_i18n/strings.js

@@ -1,4 +1,4 @@
-/* CyberSkill — central bilingual string registry (v3 Batch 0/1).
+/* CyberSkill — central bilingual string registry (v3 Batch 0/1/2).
  * 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`
@@ -77,8 +77,8 @@ export const strings = {
     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" },
+    en: { empty: "No records", selectAll: "Select all rows", selectRow: "Select row", pin: "Pin this column", pinNamed: "Pin column {name}" },
+    vi: { empty: "Không có bản ghi", selectAll: "Chọn tất cả", selectRow: "Chọn dòng", pin: "Ghim cột này", pinNamed: "Ghim cột {name}" },
   },
   Splitter: {
     en: { label: "Resize panes" },
@@ -188,4 +188,53 @@ export const strings = {
     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" },
   },
+
+  Switch: {
+    en: { on: "On", off: "Off" },
+    vi: { on: "Bật", off: "Tắt" },
+  },
+  Tabs: {
+    en: { list: "Tabs" },
+    vi: { list: "Tab" },
+  },
+  EmptyState: {
+    en: { title: "Nothing here yet", action: "Get started" },
+    vi: { title: "Chưa có gì ở đây", action: "Bắt đầu" },
+  },
+  Alert: {
+    en: { dismiss: "Dismiss" },
+    vi: { dismiss: "Đóng" },
+  },
+  Select: {
+    en: { placeholder: "Select…" },
+    vi: { placeholder: "Chọn…" },
+  },
+  Slider: {
+    en: { label: "Slider" },
+    vi: { label: "Thanh trượt" },
+  },
+  Steps: {
+    en: { label: "Steps" },
+    vi: { label: "Các bước" },
+  },
+  Toggle: {
+    en: { pressed: "Pressed", unpressed: "Not pressed" },
+    vi: { pressed: "Đang bật", unpressed: "Chưa bật" },
+  },
+  Menu: {
+    en: { menu: "Menu" },
+    vi: { menu: "Trình đơn" },
+  },
+  ContextMenu: {
+    en: { menu: "Context menu" },
+    vi: { menu: "Trình đơn ngữ cảnh" },
+  },
+  Tooltip: {
+    en: { label: "Tooltip" },
+    vi: { label: "Chú thích" },
+  },
+  ProgressBar: {
+    en: { label: "Progress" },
+    vi: { label: "Tiến độ" },
+  },
 };

package/components/ai/ConfidenceMeter.jsx

@@ -15,12 +15,14 @@ const TONE = {
  */
 export function ConfidenceMeter({ value, level, segments = 5, label, lang, className }) {
   let tone, filled;
+  const segs = Math.max(1, Number(segments) || 5);
   if (value != null) {
-    tone = value < 0.4 ? "low" : value < 0.75 ? "medium" : "high";
-    filled = Math.max(1, Math.round(value * segments));
+    const v = Math.max(0, Math.min(1, Number(value) || 0));
+    tone = v < 0.4 ? "low" : v < 0.75 ? "medium" : "high";
+    filled = Math.max(0, Math.min(segs, Math.round(v * segs)));
   } else {
-    tone = level || "medium";
-    filled = Math.round((TONE[tone].fill / 5) * segments);
+    tone = TONE[level] ? level : "medium";
+    filled = Math.max(0, Math.min(segs, Math.round((TONE[tone].fill / 5) * segs)));
   }
   const meta = TONE[tone];
   const [ref, L] = useLang(lang);
@@ -33,8 +35,8 @@ export function ConfidenceMeter({ value, level, segments = 5, label, lang, class
         <span>{lbl}</span>
         <span className="cs-confidence__level" style={{ color: meta.color }}>{levelText}</span>
       </div>
-      <div className="cs-confidence__track" role="meter" aria-valuemin={0} aria-valuemax={segments} aria-valuenow={filled} aria-label={lbl + ": " + levelText}>
-        {Array.from({ length: segments }).map((_, i) => (
+      <div className="cs-confidence__track" role="meter" aria-valuemin={0} aria-valuemax={segs} aria-valuenow={filled} aria-label={lbl + ": " + levelText}>
+        {Array.from({ length: segs }).map((_, i) => (
           <span key={i} className="cs-confidence__seg" style={i < filled ? { background: meta.color } : undefined} />
         ))}
       </div>

package/components/data/Watermark.jsx

@@ -1,13 +1,21 @@
 import React from "react";
 import { cx } from "../_utils/cx.js";
 
-/** CyberSkill Watermark — repeats rotated text behind children (draft/confidential marking). */
+/** CyberSkill Watermark — repeats rotated text behind children (draft/confidential marking).
+ * Fill colour is read from --cs-color-text-primary at render time (data-URIs cannot resolve CSS vars). */
 export function Watermark({ text = "CyberSkill", opacity = 0.09, gap = 140, rotate = -22, children, className }) {
+  const host = React.useRef(null);
+  const [fill, setFill] = React.useState("#45210E");
+  React.useLayoutEffect(() => {
+    if (!host.current || typeof getComputedStyle === "undefined") return;
+    const c = getComputedStyle(host.current).getPropertyValue("--cs-color-text-primary").trim();
+    if (c) setFill(c);
+  }, []);
   const svg = encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${gap}" height="${gap}"><text x="50%" y="50%" font-family="Be Vietnam Pro, sans-serif" font-size="14" font-weight="700" fill="#45210E" fill-opacity="${opacity}" text-anchor="middle" transform="rotate(${rotate} ${gap / 2} ${gap / 2})">${String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;")}</text></svg>`
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${gap}" height="${gap}"><text x="50%" y="50%" font-family="Be Vietnam Pro, sans-serif" font-size="14" font-weight="700" fill="${fill}" fill-opacity="${opacity}" text-anchor="middle" transform="rotate(${rotate} ${gap / 2} ${gap / 2})">${String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;")}</text></svg>`
   );
   return (
-    <div className={cx("cs-watermark", className)} style={{ position: "relative" }}>
+    <div ref={host} className={cx("cs-watermark", className)} style={{ position: "relative" }}>
       {children}
       <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", backgroundImage: `url("data:image/svg+xml,${svg}")` }} />
     </div>

package/components/datatable/DataGrid.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
+import { Icon } from "../icon/Icon.jsx";
 import { cx } from "../_utils/cx.js";
 
 /**
@@ -114,7 +115,15 @@ export function DataGrid({
                   </button>
                 ) : c.header}
                 {persistKey ? (
-                  <button type="button" className="cs-datagrid__pin" title="Pin column first" onClick={() => pinColumn(c.key)} aria-label={"Pin " + c.key}>⟂</button>
+                  <button
+                    type="button"
+                    className="cs-datagrid__pin"
+                    title={t("pin")}
+                    onClick={() => pinColumn(c.key)}
+                    aria-label={t("pinNamed").replace("{name}", String(c.header != null ? c.header : c.key))}
+                  >
+                    <Icon name="pin" size="sm" />
+                  </button>
                 ) : null}
               </th>
             ))}

package/components/dialog/Dialog.jsx

@@ -2,27 +2,12 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { Icon } from "../icon/Icon.jsx";
 import { cx } from "../_utils/cx.js";
-
-const FOCUSABLE = [
-  'a[href]',
-  'area[href]',
-  'button:not([disabled])',
-  'input:not([disabled]):not([type="hidden"])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  'audio[controls]',
-  'video[controls]',
-  'summary',
-  'iframe',
-  '[contenteditable]:not([contenteditable="false"])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(",");
+import { useOverlayLayer } from "../overlays/OverlayManager.jsx";
 
 /**
  * CyberSkill Dialog — modal overlay + panel. aria-modal, labelled by title and
  * described by its body, scrim click closes. Body scroll is locked while open
- * (prior overflow restored on close/unmount). Compose actions in the footer
- * with Buttons.
+ * via the overlay manager (nested-safe). Compose actions in the footer with Buttons.
  */
 export function Dialog({
   open,
@@ -40,34 +25,17 @@ export function Dialog({
   const bodyId = children == null ? undefined : baseId + "-body";
   const [ref, L] = useLang(lang);
   const panel = React.useRef(null);
-  const closeRef = React.useRef(onClose); closeRef.current = onClose;
-  React.useEffect(() => {
-    if (!open) return;
-    const prev = document.activeElement;
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const focusables = () => (panel.current ? [...panel.current.querySelectorAll(FOCUSABLE)] : []);
-    const first = focusables()[0];
-    (first || panel.current) && (first || panel.current).focus();
-    const k = (e) => {
-      if (e.key === "Escape") { closeRef.current && closeRef.current(); return; }
-      if (e.key !== "Tab" || !panel.current) return;
-      const f = focusables();
-      if (!f.length) { e.preventDefault(); panel.current.focus(); return; }
-      const a = f[0], z = f[f.length - 1];
-      const active = document.activeElement;
-      const inside = panel.current.contains(active);
-      // Wrap at either edge; if focus somehow escaped the panel, pull it back in.
-      if (e.shiftKey && (!inside || active === a)) { e.preventDefault(); z.focus(); }
-      else if (!e.shiftKey && (!inside || active === z)) { e.preventDefault(); a.focus(); }
-    };
-    document.addEventListener("keydown", k);
-    return () => {
-      document.removeEventListener("keydown", k);
-      document.body.style.overflow = prevOverflow;
-      if (prev && prev.focus) prev.focus();
-    };
-  }, [open]);
+  const closeRef = React.useRef(onClose);
+  closeRef.current = onClose;
+
+  useOverlayLayer({
+    open: !!open,
+    kind: "modal",
+    trapFocus: true,
+    onEscape: () => closeRef.current && closeRef.current(),
+    panelRef: panel,
+  });
+
   const cl = closeLabel != null ? closeLabel : makeT("Dialog", L)("close");
   if (!open) return null;
   return (

package/components/feedback/ProgressBar.jsx

@@ -3,10 +3,12 @@ import { cx } from "../_utils/cx.js";
 
 /** CyberSkill ProgressBar — determinate progress. variant: ochre (default) | umber | success. */
 export function ProgressBar({ value = 0, max = 100, variant, label, className }) {
-  const pct = Math.max(0, Math.min(100, (value / max) * 100));
+  const safeMax = max > 0 ? max : 100;
+  const clamped = Math.max(0, Math.min(safeMax, Number(value) || 0));
+  const pct = Math.max(0, Math.min(100, (clamped / safeMax) * 100));
   return (
     <div className={cx("cs-progress", variant && `cs-progress--${variant}`, className)}
-      role="progressbar" aria-valuenow={Math.round(value)} aria-valuemin={0} aria-valuemax={max} aria-label={label}>
+      role="progressbar" aria-valuenow={Math.round(clamped)} aria-valuemin={0} aria-valuemax={safeMax} aria-label={label}>
       <span className="cs-progress__fill" style={{ inlineSize: pct + "%", width: pct + "%" }} />
     </div>
   );

package/components/forms/Cascader.jsx

@@ -15,11 +15,52 @@ export function Cascader({ nodes = [], value = [], onChange, placeholder, label,
   React.useEffect(() => {
     if (!open) return;
     const d = (e) => { if (wrap.current && !wrap.current.contains(e.target)) setOpen(false); };
-    const k = (e) => { if (e.key === "Escape") setOpen(false); };
+    const k = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        const field = wrap.current && wrap.current.querySelector(".cs-treeselect__field");
+        field && field.focus && field.focus();
+        return;
+      }
+      if (!wrap.current) return;
+      const opts = [...wrap.current.querySelectorAll('[role="option"]')];
+      if (!opts.length) return;
+      const active = document.activeElement;
+      const idx = opts.indexOf(active);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        (opts[idx < 0 ? 0 : Math.min(opts.length - 1, idx + 1)] || opts[0]).focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        (opts[idx < 0 ? opts.length - 1 : Math.max(0, idx - 1)] || opts[0]).focus();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        opts[0].focus();
+      } else if (e.key === "End") {
+        e.preventDefault();
+        opts[opts.length - 1].focus();
+      } else if (e.key === "ArrowRight" && idx >= 0) {
+        // Expand into children by activating the selected option when it has a chevron.
+        active.click && active.click();
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (path.length) {
+          const next = path.slice(0, -1);
+          setPath(next);
+        } else {
+          setOpen(false);
+          const field = wrap.current.querySelector(".cs-treeselect__field");
+          field && field.focus && field.focus();
+        }
+      }
+    };
     document.addEventListener("mousedown", d);
     document.addEventListener("keydown", k);
-    return () => { document.removeEventListener("mousedown", d); document.removeEventListener("keydown", k); };
-  }, [open]);
+    return () => {
+      document.removeEventListener("mousedown", d);
+      document.removeEventListener("keydown", k);
+    };
+  }, [open, path]);
   const cols = [];
   let level = nodes;
   for (let i = 0; level && level.length; i++) {
@@ -31,7 +72,22 @@ export function Cascader({ nodes = [], value = [], onChange, placeholder, label,
   { let lv = nodes; for (const k of value) { const n = (lv || []).find((x) => x.key === k); if (!n) break; labels.push(n.label); lv = n.children; } }
   return (
     <div ref={(el) => { wrap.current = el; ref.current = el; }} className={cx("cs-cascader", className)}>
-      <button type="button" id={fieldId} className="cs-treeselect__field" disabled={disabled} aria-haspopup="listbox" aria-expanded={open} aria-label={label} onClick={() => setOpen((o) => !o)}>
+      <button
+        type="button"
+        id={fieldId}
+        className="cs-treeselect__field"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={label}
+        onClick={() => setOpen((o) => !o)}
+        onKeyDown={(e) => {
+          if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        }}
+      >
         <span className={labels.length ? undefined : "ph"}>{labels.length ? labels.join(" / ") : ph}</span><span aria-hidden="true">▾</span>
       </button>
       {open ? (
@@ -41,12 +97,19 @@ export function Cascader({ nodes = [], value = [], onChange, placeholder, label,
               {col.map((n) => (
                 // role="none" — the <li> wrapper must not sit between listbox and option.
                 <li key={n.key} role="none">
-                  <button type="button" role="option" aria-selected={path[i] === n.key} className={cx("cs-cascader__opt", path[i] === n.key && "on")}
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={path[i] === n.key}
+                    className={cx("cs-cascader__opt", path[i] === n.key && "on")}
+                    // Keep options in the focusable set for arrow models (E3).
+                    data-cs-focusable=""
                     onClick={() => {
                       const next = [...path.slice(0, i), n.key];
                       setPath(next);
                       if (!(n.children && n.children.length)) { onChange && onChange(next); setOpen(false); }
-                    }}>
+                    }}
+                  >
                     {n.label}{n.children && n.children.length ? <span aria-hidden="true"> ›</span> : null}
                   </button>
                 </li>

package/components/forms/Editor.jsx

@@ -2,13 +2,39 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
+/** Strip script/style/event-handler markup before injecting HTML (CDS-SEC-001). */
+function sanitizeHtml(html) {
+  if (html == null || html === "") return "";
+  if (typeof document === "undefined") {
+    return String(html)
+      .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "")
+      .replace(/on\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+      .replace(/javascript:/gi, "");
+  }
+  const tpl = document.createElement("template");
+  tpl.innerHTML = String(html);
+  tpl.content.querySelectorAll("script,style,iframe,object,embed,link").forEach((n) => n.remove());
+  tpl.content.querySelectorAll("*").forEach((n) => {
+    [...n.attributes].forEach((a) => {
+      if (/^on/i.test(a.name) || /javascript:/i.test(a.value)) n.removeAttribute(a.name);
+    });
+  });
+  return tpl.innerHTML;
+}
+
 /** CyberSkill Editor — light rich-text (contentEditable): bold · italic · bullet list. onChange(html). */
 export function Editor({ defaultValue = "", onChange, minHeight = 120, lang, className }) {
   const box = React.useRef(null);
+  const seeded = React.useRef(false);
   const [ref, L] = useLang(lang);
   const t = makeT("Editor", L);
   const cmd = (c) => { document.execCommand(c); box.current && box.current.focus(); emit(); };
   const emit = () => { onChange && box.current && onChange(box.current.innerHTML); };
+  React.useLayoutEffect(() => {
+    if (!box.current || seeded.current) return;
+    box.current.innerHTML = sanitizeHtml(defaultValue);
+    seeded.current = true;
+  }, [defaultValue]);
   const B = ({ c, label, children }) => (
     <button type="button" className="cs-toolbar__btn" aria-label={label} onMouseDown={(e) => { e.preventDefault(); cmd(c); }}>{children}</button>
   );
@@ -19,8 +45,17 @@ export function Editor({ defaultValue = "", onChange, minHeight = 120, lang, cla
         <B c="italic" label={t("italic")}><i>I</i></B>
         <B c="insertUnorderedList" label={t("list")}>≔</B>
       </div>
-      <div ref={box} className="cs-editor__area" contentEditable suppressContentEditableWarning role="textbox" aria-multiline="true" aria-label={t("area")}
-        style={{ minHeight }} onInput={emit} dangerouslySetInnerHTML={{ __html: defaultValue }} />
+      <div
+        ref={box}
+        className="cs-editor__area"
+        contentEditable
+        suppressContentEditableWarning
+        role="textbox"
+        aria-multiline="true"
+        aria-label={t("area")}
+        style={{ minHeight }}
+        onInput={emit}
+      />
     </div>
   );
 }

package/components/forms/FileUpload.jsx

@@ -2,28 +2,42 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
-/** CyberSkill FileUpload — click-or-drag dropzone. Calls onFiles(File[]) on select/drop. */
+/** CyberSkill FileUpload — click-or-drag dropzone. Calls onFiles(File[]) on select/drop.
+ * Uses a single labeled <input type="file"> (no nested interactive) for axe name/role. */
 export function FileUpload({ title, hint, accept, multiple = false, onFiles, icon, lang, className }) {
   const [drag, setDrag] = React.useState(false);
+  const inputRef = React.useRef(null);
   const pick = (files) => { if (files && files.length && onFiles) onFiles(Array.from(files)); };
   const [ref, L] = useLang(lang);
   const t = makeT("FileUpload", L);
   const tt = title != null ? title : t("title");
   const hh = hint != null ? hint : t("hint");
+  const id = React.useId();
   return (
-    <label
+    <div
       ref={ref}
       className={cx("cs-dropzone", drag && "is-dragging", className)}
       onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
       onDragLeave={() => setDrag(false)}
       onDrop={(e) => { e.preventDefault(); setDrag(false); pick(e.dataTransfer.files); }}
+      onClick={() => inputRef.current && inputRef.current.click()}
     >
-      <span className="cs-dropzone__icon">
-        {icon ?? <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 16V4M7 9l5-5 5 5" /><path d="M5 16v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3" /></svg>}
+      <span className="cs-dropzone__icon" aria-hidden="true">
+        {icon ?? <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 16V4M7 9l5-5 5 5" /><path d="M5 16v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3" /></svg>}
       </span>
-      <span className="cs-dropzone__title">{tt}</span>
-      <span className="cs-dropzone__hint">{hh}</span>
-      <input type="file" accept={accept} multiple={multiple} style={{ display: "none" }} onChange={(e) => pick(e.target.files)} />
-    </label>
+      <label className="cs-dropzone__title" htmlFor={id}>{tt}</label>
+      <span className="cs-dropzone__hint" id={id + "-hint"}>{hh}</span>
+      <input
+        id={id}
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        className="cs-sr-only"
+        aria-describedby={id + "-hint"}
+        onChange={(e) => pick(e.target.files)}
+        onClick={(e) => e.stopPropagation()}
+      />
+    </div>
   );
 }

package/components/forms/Switch.jsx

@@ -1,12 +1,26 @@
 import React from "react";
 import { cx } from "../_utils/cx.js";
 
+let warnedNameless = false;
+
 /** CyberSkill Switch — accessible toggle (role="switch"); Umber on, Ochre knob-track in dark. */
 // `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <input>.
-export function Switch({ label, disabled = false, className, children, ...props }) {
+export function Switch({ label, disabled = false, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+  const named = !!(label || ariaLabel || ariaLabelledby);
+  if (!named && !warnedNameless && typeof console !== "undefined" && console.warn) {
+    warnedNameless = true;
+    console.warn("CyberSkill Switch: render with label, aria-label, or aria-labelledby.");
+  }
   return (
     <label className={cx("cs-switch", disabled && "is-disabled", className)}>
-      <input type="checkbox" role="switch" disabled={disabled} {...props} />
+      <input
+        type="checkbox"
+        role="switch"
+        disabled={disabled}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
+        {...props}
+      />
       <span className="cs-switch__track" aria-hidden="true" />
       {label ? <span className="cs-switch__label">{label}</span> : null}
     </label>

package/components/forms/TimePicker.jsx

@@ -7,8 +7,10 @@ const CLOCK = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke
 export function TimePicker({ value = "09:00", onChange, step = 30, label, disabled = false, lang, className }) {
   const [ref, L] = useLang(lang);
   const t = makeT("TimePicker", L);
+  const stepMin = Number(step);
+  const safeStep = Number.isFinite(stepMin) && stepMin > 0 ? stepMin : 30;
   const opts = [];
-  for (let m = 0; m < 24 * 60; m += step) {
+  for (let m = 0; m < 24 * 60; m += safeStep) {
     opts.push(String(Math.floor(m / 60)).padStart(2, "0") + ":" + String(m % 60).padStart(2, "0"));
   }
   return (

package/components/icon/Icon.jsx

@@ -49,6 +49,7 @@ export const CS_ICONS = {
   copy: { viewBox: "0 0 24 24", els: [["rect", { x: 8, y: 8, width: 12, height: 12, rx: 2 }], ["path", { d: "M4 16V6a2 2 0 0 1 2-2h10" }]] },
   info: { viewBox: "0 0 24 24", els: [["circle", { cx: 12, cy: 12, r: 9 }], ["path", { d: "M12 11v5M12 7.75v.01" }]] },
   "alert-triangle": { viewBox: "0 0 24 24", els: [["path", { d: "M12 3.5l9 16H3z" }], ["path", { d: "M12 10v4M12 17.5v.01" }]] },
+  pin: { viewBox: "0 0 24 24", els: [["path", { d: "M12 21v-7" }], ["path", { d: "M8.5 3.5h7l-1.2 6.5h2.7L12 14.5 6.999 10h2.7z" }]] },
 };
 
 export function Icon({ name, size = "md", label, className, strokeWidth = 1.75, ...props }) {

package/components/navigation/CommandPalette.jsx

@@ -1,23 +1,38 @@
 import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
+import { useOverlayLayer } from "../overlays/OverlayManager.jsx";
 
 /** CyberSkill CommandPalette — ⌘K overlay with search + grouped actions. Controlled via open/onClose. */
 export function CommandPalette({ open, onClose, placeholder, groups = [], lang, className }) {
   const [q, setQ] = React.useState("");
-  React.useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open]);
+  const panel = React.useRef(null);
+  const closeRef = React.useRef(onClose);
+  closeRef.current = onClose;
+
+  useOverlayLayer({
+    open: !!open,
+    kind: "modal",
+    trapFocus: true,
+    preferFocusSelector: ".cs-cmdk__search input",
+    onEscape: () => closeRef.current && closeRef.current(),
+    panelRef: panel,
+  });
+
   const [ref, L] = useLang(lang);
   const t = makeT("CommandPalette", L);
   const ph = placeholder != null ? placeholder : t("placeholder");
   if (!open) return null;
   const needle = q.trim().toLowerCase();
   return (
-    <div ref={ref} className="cs-cmdk-scrim" onClick={onClose}>
+    <div
+      ref={(el) => {
+        ref.current = el;
+        panel.current = el;
+      }}
+      className="cs-cmdk-scrim"
+      onClick={onClose}
+    >
       <div className={cx("cs-cmdk", className)} role="dialog" aria-modal="true" aria-label={t("aria")} onClick={(e) => e.stopPropagation()}>
         <div className="cs-cmdk__search">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></svg>