@cyberskill/design 1.1.1 → 1.3.8

package/components/forms/FileUpload.d.ts

@@ -9,6 +9,8 @@ export interface FileUploadProps {
   multiple?: boolean;
   onFiles?: (files: File[]) => void;
   icon?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function FileUpload(props: FileUploadProps): React.ReactElement;

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/Form.d.ts

@@ -13,7 +13,9 @@ export interface FormProps {
   errors?: Record<string, string | undefined>;
   /** name → rule or rule[]; validated on submit. */
   rules?: Record<string, FormRule | FormRule[]>;
-  /** name → async (value, values) => message | null; runs after sync rules pass. */
+  /** name → async (value, values) => message | null; runs after sync rules pass.
+   *  While awaiting, Form sets `is-pending` / `aria-busy`, disables controls via CSS,
+   *  and ignores duplicate submits. Context exposes `pending: boolean`. */
   asyncRules?: Record<string, (value: unknown, values: Record<string, unknown>) => Promise<string | null | undefined>>;
   /** Seed for controller-registered fields. */
   initialValues?: Record<string, unknown>;

package/components/forms/Form.jsx

@@ -55,6 +55,7 @@ export function Form({ onSubmit, errors = {}, rules, asyncRules, initialValues,
   const [values, setValues] = React.useState(() => initialValues || {});
   const [ruleErrors, setRuleErrors] = React.useState({});
   const [pending, setPending] = React.useState(false);
+  const pendingRef = React.useRef(false);
   const setValue = React.useCallback((name, v) => {
     setValues((s) => (String(name).includes(".") ? setPath(s, name, v) : { ...s, [name]: v }));
     setRuleErrors((e) => (e[name] ? { ...e, [name]: undefined } : e));
@@ -96,20 +97,27 @@ export function Form({ onSubmit, errors = {}, rules, asyncRules, initialValues,
   return (
     <Ctx.Provider value={ctx}>
       <form {...props} ref={ref} className={cx("cs-form", pending && "is-pending", className)} noValidate
+        aria-busy={pending || undefined}
         onSubmit={async (e) => {
           e.preventDefault();
+          // FIND-015 / FIND-044 — lock re-entry while async validation / submit runs.
+          if (pendingRef.current) return;
           const fd = new FormData(e.currentTarget);
           const v = {}; fd.forEach((val, k) => { v[k] = val; });
           Object.assign(v, values); // controller-registered fields are the source of truth
           const errs = runRules(v);
           if (Object.keys(errs).some((k) => errs[k])) { setRuleErrors(errs); return; }
+          pendingRef.current = true;
           setPending(true);
           try {
             const aerrs = await runAsyncRules(v);
             setRuleErrors(aerrs);
             if (Object.keys(aerrs).some((k) => aerrs[k])) return;
             onSubmit && onSubmit(v);
-          } finally { setPending(false); }
+          } finally {
+            pendingRef.current = false;
+            setPending(false);
+          }
         }}>
         {keys.length ? (
           <div className="cs-form__summary" role="alert">

package/components/forms/Form.prompt.md

@@ -10,7 +10,7 @@
 
 Manual mode unchanged: omit `rules`/`name`, pass `errors={{email:"…"}}` yourself.
 
-**asyncRules:** optional map of field name → async `(value, values) => message|null`. Runs after sync `rules` pass; blocks submit while pending.
+**asyncRules:** optional map of field name → async `(value, values) => message|null`. Runs after sync `rules` pass; Form emits `is-pending` + `aria-busy`, locks controls, and refuses re-entry until the async pass finishes (FIND-015 / FIND-044). Controllers can also read `pending` from Form context.
 
 **FormFieldArray** — manage an array of row objects under `name` on the surrounding Form. Children render-prop: `({ index, item, remove, path })`.
 

package/components/forms/Mentions.d.ts

@@ -1,4 +1,4 @@
-/** Textarea with @user suggestions (typeahead on the trailing "@word"). */
+/** Textarea with @user suggestions (APG editable combobox / listbox). */
 export interface MentionsProps {
   value?: string;
   defaultValue?: string;

package/components/forms/Mentions.jsx

@@ -2,28 +2,80 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
-/** CyberSkill Mentions — textarea that suggests @users while typing. */
+let mentionsUid = 0;
+
+/** CyberSkill Mentions — textarea that suggests @users while typing (APG editable combobox). */
 export function Mentions({ value, defaultValue = "", onChange, users = [], placeholder, rows = 3, lang, className }) {
   const [inner, setInner] = React.useState(defaultValue);
   const val = value != null ? value : inner;
   const set = (v) => { if (value == null) setInner(v); onChange && onChange(v); };
   const [q, setQ] = React.useState(null);
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const [listId] = React.useState(() => "cs-mentions-" + (++mentionsUid));
   const [ref, L] = useLang(lang);
   const t = makeT("Mentions", L);
   const ph = placeholder != null ? placeholder : t("placeholder");
+  const hits = q == null ? [] : users.filter((u) => u.toLowerCase().includes(q)).slice(0, 6);
+  const open = hits.length > 0;
+
+  React.useEffect(() => {
+    setActiveIndex((i) => (hits.length ? Math.min(i, hits.length - 1) : 0));
+  }, [q, users]);
+
   const onInput = (v) => {
     set(v);
     const m = /(^|\s)@(\w*)$/.exec(v);
-    setQ(m ? m[2].toLowerCase() : null);
+    const next = m ? m[2].toLowerCase() : null;
+    setQ(next);
+    if (next != null) setActiveIndex(0);
   };
-  const hits = q == null ? [] : users.filter((u) => u.toLowerCase().includes(q)).slice(0, 6);
   const pick = (u) => { set(val.replace(/(^|\s)@\w*$/, "$1@" + u + " ")); setQ(null); };
+  const optionId = (i) => listId + "-opt-" + i;
+  const onKeyDown = (e) => {
+    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(hits.length - 1, i + 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(0, i - 1));
+    } else if (e.key === "Enter") {
+      if (hits[activeIndex]) { e.preventDefault(); pick(hits[activeIndex]); }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setQ(null);
+    }
+  };
   return (
     <span ref={ref} className={cx("cs-mentions", className)}>
-      <textarea className="cs-field__control" rows={rows} value={val} placeholder={ph} onChange={(e) => onInput(e.target.value)} />
-      {hits.length ? (
-        <span className="cs-mentions__pop" role="listbox">
-          {hits.map((u) => <button key={u} type="button" role="option" onMouseDown={(e) => { e.preventDefault(); pick(u); }}>@{u}</button>)}
+      <textarea
+        className="cs-field__control"
+        rows={rows}
+        value={val}
+        placeholder={ph}
+        role="combobox"
+        aria-autocomplete="list"
+        aria-expanded={open}
+        aria-controls={listId}
+        aria-activedescendant={open && hits[activeIndex] ? optionId(activeIndex) : undefined}
+        onChange={(e) => onInput(e.target.value)}
+        onKeyDown={onKeyDown}
+      />
+      {open ? (
+        <span className="cs-mentions__pop" role="listbox" id={listId}>
+          {hits.map((u, i) => (
+            <button
+              key={u}
+              type="button"
+              id={optionId(i)}
+              role="option"
+              aria-selected={i === activeIndex}
+              className={cx(i === activeIndex && "hl")}
+              onMouseEnter={() => setActiveIndex(i)}
+              onMouseDown={(e) => { e.preventDefault(); pick(u); }}
+            >@{u}</button>
+          ))}
         </span>
       ) : null}
     </span>

package/components/forms/Mentions.prompt.md

@@ -1,4 +1,6 @@
-**Mentions** — textarea suggesting @users as you type.
+**Mentions** — textarea suggesting @users as you type (APG editable combobox).
+
+Keyboard: ArrowUp/Down move the active suggestion (`aria-activedescendant`); Enter selects; Escape closes. Mouse click still picks.
 
 ```jsx
 <Mentions users={["anle","baovu","lumi"]} placeholder="Add a note — @ to mention"/>

package/components/forms/Rating.d.ts

@@ -1,5 +1,6 @@
-/** Whole-star rating (radiogroup). Controlled (value/onChange) or uncontrolled
- *  (defaultValue). Clicking the current value clears to 0. readOnly for display. */
+/** Whole-star rating (APG radiogroup: roving tabindex + arrow keys). Controlled
+ *  (value/onChange) or uncontrolled (defaultValue). Clicking the current value
+ *  clears to 0. readOnly for display. */
 export interface RatingProps {
   value?: number;
   defaultValue?: number;

package/components/forms/Rating.jsx

@@ -3,17 +3,48 @@ import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 const STAR = "M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.5L12 16.9 6.1 20l1.3-6.5L2.5 9l6.6-.8z";
 
-/** CyberSkill Rating — whole-star rating. Controlled or uncontrolled; readOnly for display. Click the current value to clear. */
+/** CyberSkill Rating — whole-star rating (APG radiogroup: roving tabindex + arrows). Controlled or uncontrolled; readOnly for display. Click the current value to clear. */
 export function Rating({ value, defaultValue = 0, onChange, max = 5, readOnly = false, label, lang, className }) {
   const [inner, setInner] = React.useState(defaultValue);
   const val = value != null ? value : inner;
-  const set = (n) => { if (readOnly) return; const v = n === val ? 0 : n; if (value == null) setInner(v); onChange && onChange(v); };
+  const commit = (n) => { if (readOnly) return; if (value == null) setInner(n); onChange && onChange(n); };
+  const set = (n) => commit(n === val ? 0 : n);
   const [ref, L] = useLang(lang);
   const lbl = label != null ? label : makeT("Rating", L)("label");
+  const refs = React.useRef([]);
+  const focusIdx = val > 0 ? Math.min(max, val) - 1 : 0;
+
+  const move = (from, delta) => {
+    if (readOnly) return;
+    const next = Math.max(0, Math.min(max - 1, from + delta));
+    commit(next + 1);
+    const b = refs.current[next];
+    if (b) b.focus();
+  };
+
+  const onKeyDown = (e, i) => {
+    if (readOnly || e.nativeEvent.isComposing || e.keyCode === 229) return;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") { e.preventDefault(); move(i, 1); }
+    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { e.preventDefault(); move(i, -1); }
+    else if (e.key === "Home") { e.preventDefault(); move(i, -i); }
+    else if (e.key === "End") { e.preventDefault(); move(i, max - 1 - i); }
+  };
+
   return (
     <div ref={ref} className={cx("cs-rating", className)} role="radiogroup" aria-label={lbl + ": " + val + " / " + max} data-readonly={readOnly ? "true" : undefined}>
       {Array.from({ length: max }).map((_, i) => (
-        <button key={i} type="button" role="radio" aria-checked={i < val} aria-label={(i + 1) + " / " + max} className={i < val ? "on" : undefined} onClick={() => set(i + 1)} tabIndex={readOnly ? -1 : 0}>
+        <button
+          key={i}
+          type="button"
+          role="radio"
+          aria-checked={i < val}
+          aria-label={(i + 1) + " / " + max}
+          className={i < val ? "on" : undefined}
+          onClick={() => set(i + 1)}
+          tabIndex={readOnly ? -1 : (i === focusIdx ? 0 : -1)}
+          ref={(el) => { refs.current[i] = el; }}
+          onKeyDown={(e) => onKeyDown(e, i)}
+        >
           <svg width="22" height="22" viewBox="0 0 24 24" fill={i < val ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" aria-hidden="true"><path d={STAR} /></svg>
         </button>
       ))}

package/components/forms/Rating.prompt.md

@@ -1,4 +1,4 @@
-**Rating** — whole-star rating (ochre stars). Controlled or uncontrolled; `readOnly` for display; click current value to clear. Bilingual aria via the registry.
+**Rating** — whole-star rating (ochre stars). APG radiogroup: one tab stop, ArrowLeft/Right (and Up/Down) change value. Controlled or uncontrolled; `readOnly` for display; click current value to clear. Bilingual aria via the registry.
 
 ```jsx
 <Rating defaultValue={4} onChange={setStars}/>

package/components/forms/Select.d.ts

@@ -14,6 +14,8 @@ export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElemen
   /** Options as data; alternatively pass <option> children. */
   options?: SelectOption[];
   children?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
 }
 
 export function Select(props: SelectProps): React.ReactElement;

package/components/forms/Select.jsx

@@ -1,20 +1,24 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Select — native <select> in the .cs-field frame with a chevron.
  *  Pass `options` [{value,label}] or <option> children. */
-export function Select({ id, label, description, error, options, children, disabled = false, className, ...props }) {
+export function Select({ id, label, description, error, options, children, disabled = false, lang, className, placeholder, ...props }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Select", L);
   const gid = React.useId();
   const sid = id ?? gid;
   const descId = description ? sid + "-desc" : undefined;
   const errId = error ? sid + "-err" : undefined;
   const describedBy = [descId, errId].filter(Boolean).join(" ") || undefined;
   return (
-    <label className={cx("cs-field", disabled && "is-disabled", error && "is-invalid", className)} htmlFor={sid}>
+    <label ref={ref} className={cx("cs-field", disabled && "is-disabled", error && "is-invalid", className)} htmlFor={sid}>
       {label ? <span className="cs-field__label">{label}</span> : null}
       {description ? <span id={descId} className="cs-field__description">{description}</span> : null}
       <span className="cs-select">
         <select {...props} id={sid} disabled={disabled} aria-invalid={error ? true : undefined} aria-describedby={describedBy} className="cs-field__control">
+          {placeholder != null || !children ? <option value="" disabled hidden>{placeholder ?? t("placeholder")}</option> : null}
           {options ? options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>) : children}
         </select>
         <span className="cs-select__chevron" aria-hidden="true">

package/components/forms/Slider.d.ts

@@ -4,3 +4,5 @@ import type * as React from "react";
  *  range props (min, max, step, value, defaultValue, onChange). */
 export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 export function Slider(props: SliderProps): React.ReactElement;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;

package/components/forms/Slider.jsx

@@ -1,8 +1,11 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Slider — brand-tinted native range input. Pass native props (min/max/step/value/onChange). */
 // `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <input>.
-export function Slider({ className, children, ...props }) {
-  return <input type="range" className={cx("cs-slider", className)} {...props} />;
+export function Slider({ className, children, lang, "aria-label": ariaLabel, ...props }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Slider", L);
+  return <input ref={ref} type="range" className={cx("cs-slider", className)} aria-label={ariaLabel ?? t("label")} {...props} />;
 }

package/components/forms/Switch.d.ts

@@ -7,6 +7,8 @@ import type { ReactNode } from "react";
  */
 export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
   label?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
 }
 
 export function Switch(props: SwitchProps): React.ReactElement;

package/components/forms/Switch.jsx

@@ -1,12 +1,24 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** 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, lang, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Switch", L);
+  const named = !!(label || ariaLabel || ariaLabelledby);
+  const fallback = props.checked || props.defaultChecked ? t("on") : t("off");
   return (
-    <label className={cx("cs-switch", disabled && "is-disabled", className)}>
-      <input type="checkbox" role="switch" disabled={disabled} {...props} />
+    <label ref={ref} className={cx("cs-switch", disabled && "is-disabled", className)}>
+      <input
+        type="checkbox"
+        role="switch"
+        disabled={disabled}
+        aria-label={ariaLabel ?? (named ? undefined : fallback)}
+        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/forms/Toggle.d.ts

@@ -11,6 +11,8 @@ export interface ToggleProps {
   icon?: ReactNode;
   children?: ReactNode;
   disabled?: boolean;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function Toggle(props: ToggleProps): React.ReactElement;

package/components/forms/Toggle.jsx

@@ -1,13 +1,25 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Toggle — a single pressable on/off button (≠ Switch: no form semantics; ≠ SegmentedControl: standalone). */
-export function Toggle({ pressed, defaultPressed = false, onChange, icon, children, disabled = false, className, ...props }) {
+export function Toggle({ pressed, defaultPressed = false, onChange, icon, children, disabled = false, lang, className, "aria-label": ariaLabel, ...props }) {
   const [inner, setInner] = React.useState(defaultPressed);
   const on = pressed != null ? pressed : inner;
+  const [ref, L] = useLang(lang);
+  const t = makeT("Toggle", L);
   const flip = () => { const v = !on; if (pressed == null) setInner(v); onChange && onChange(v); };
   return (
-    <button type="button" className={cx("cs-toggle", className)} aria-pressed={on} disabled={disabled} onClick={flip} {...props}>
+    <button
+      ref={ref}
+      type="button"
+      className={cx("cs-toggle", className)}
+      aria-pressed={on}
+      aria-label={ariaLabel ?? (on ? t("pressed") : t("unpressed"))}
+      disabled={disabled}
+      onClick={flip}
+      {...props}
+    >
       {icon ? <span aria-hidden="true" style={{ display: "inline-flex" }}>{icon}</span> : null}
       {children}
     </button>

package/components/forms/forms-2.card.html

@@ -10,9 +10,9 @@
   .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
   .lbl { width: 100%; font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); }
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" 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="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>
 <body>

package/components/forms/forms.card.html

@@ -9,9 +9,9 @@
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; max-width: 640px; align-items: start; }
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" 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="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>
 <body>

package/components/icon/Icon.d.ts

@@ -6,7 +6,7 @@ export type IconName =
   | "search" | "sliders" | "upload" | "download" | "calendar"
   | "user" | "plus" | "trash" | "external" | "menu"
   | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right"
-  | "edit" | "copy" | "info" | "alert-triangle";
+  | "edit" | "copy" | "info" | "alert-triangle" | "pin";
 
 /**
  * CyberSkill line-icon renderer. One component drives the whole in-repo icon set

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/icon/Icon.prompt.md

@@ -5,4 +5,4 @@
 <Icon name="sparkle" size="lg" label="Wish" /> {/* meaningful */}
 ```
 
-Set: `close · sun · moon · arrow-right · check · sparkle · chat · sound-on · sound-off` + v2.0 extension `search · sliders · upload · download · calendar · user · plus · trash · external · menu` + v2.13 `chevron-down/up/left/right · edit · copy · info · alert-triangle` (same grammar). `sparkle` is the brand's "wish" glyph. Colour follows the surrounding text token — set `color` on a parent to recolour.
+Set: `close · sun · moon · arrow-right · check · sparkle · chat · sound-on · sound-off` + v2.0 extension `search · sliders · upload · download · calendar · user · plus · trash · external · menu` + v2.13 `chevron-down/up/left/right · edit · copy · info · alert-triangle · pin` (same grammar). `sparkle` is the brand's "wish" glyph. Colour follows the surrounding text token — set `color` on a parent to recolour.

package/components/icon/icon.card.html

@@ -13,9 +13,9 @@
   .cell .g { color: var(--cs-color-brand-umber); }
   .cell:nth-child(6) .g { color: var(--cs-color-brand-ochre); }
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" 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="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>
 <body>

package/components/logo/logo.card.html

@@ -15,9 +15,9 @@
   .lockup b { font: 800 22px/1 var(--cs-font-family-ui); color: var(--cs-color-brand-umber); letter-spacing: -.01em; }
   .cap { font: 500 12px/1.4 var(--cs-font-family-ui); color: var(--cs-color-text-muted); }
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" 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="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>
 <body>

package/components/navigation/CommandPalette.d.ts

@@ -14,6 +14,8 @@ export interface CommandPaletteProps {
   onClose?: () => void;
   placeholder?: string;
   groups: CommandGroup[];
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function CommandPalette(props: CommandPaletteProps): React.ReactElement | null;

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>

package/components/navigation/Menu.d.ts

@@ -12,6 +12,8 @@ export interface MenuProps {
   align?: "start" | "end";
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function Menu(props: MenuProps): React.ReactElement;