@cyberskill/design 1.2.0 → 1.3.8

package/components/_i18n/strings.js

@@ -17,8 +17,8 @@ export const strings = {
     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" },
+    en: { placeholder: "Type a command or search…", empty: "No results", aria: "Command palette", esc: "Esc" },
+    vi: { placeholder: "Nhập lệnh hoặc tìm kiếm…", empty: "Không có kết quả", aria: "Bảng lệnh", esc: "Esc" },
   },
   SearchField: {
     en: { placeholder: "Search…", clear: "Clear search" },
@@ -41,12 +41,22 @@ export const strings = {
     vi: { confirm: "Xác nhận", cancel: "Hủy" },
   },
   Drawer: {
-    en: { close: "Close", panel: "Panel" },
-    vi: { close: "Đóng", panel: "Bảng" },
+    en: { close: "Close", panel: "Side panel" },
+    vi: { close: "Đóng", panel: "Bảng bên" },
   },
   DataTable: {
-    en: { empty: "No records" },
-    vi: { empty: "Không có bản ghi" },
+    en: {
+      empty: "No results",
+      loading: "Loading table",
+      error: "We couldn't load this table",
+      errorHint: "Check your connection, then try again.",
+    },
+    vi: {
+      empty: "Không có kết quả",
+      loading: "Đang tải bảng",
+      error: "Không tải được bảng này",
+      errorHint: "Kiểm tra kết nối, rồi thử lại.",
+    },
   },
   ConfidenceMeter: {
     en: { label: "Confidence", low: "Low", medium: "Medium", high: "High" },
@@ -58,10 +68,10 @@ export const strings = {
   },
   Tag: {
     en: { remove: "Remove" },
-    vi: { remove: "Gỡ bỏ" },
+    vi: { remove: "Gỡ" },
   },
   Toast: {
-    en: { notifications: "Notifications", dismiss: "Dismiss" },
+    en: { notifications: "Notifications", dismiss: "Close" },
     vi: { notifications: "Thông báo", dismiss: "Đóng" },
   },
   TypingIndicator: {
@@ -73,12 +83,12 @@ export const strings = {
     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" },
+    en: { input: "Terminal input", title: "cyberskill — zsh" },
+    vi: { input: "Ô nhập lệnh", title: "cyberskill — zsh" },
   },
   DataGrid: {
-    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}" },
+    en: { empty: "No results", selectAll: "Select all rows", selectRow: "Select row", pin: "Pin this column", pinNamed: "Pin column {name}" },
+    vi: { empty: "Không có kết quả", 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" },
@@ -112,9 +122,13 @@ export const strings = {
     en: { placeholder: "Add a note — @ to mention" },
     vi: { placeholder: "Thêm ghi chú — gõ @ để nhắc tên" },
   },
+  Sortable: {
+    en: { moveUp: "Move up", moveDown: "Move down" },
+    vi: { moveUp: "Di chuyển lên", moveDown: "Di chuyển xuống" },
+  },
   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" },
+    en: { summary: "Please fix the following:", required: "required", requiredField: "Enter a value" },
+    vi: { summary: "Vui lòng sửa các mục sau:", required: "bắt buộc", requiredField: "Vui lòng nhập giá trị" },
   },
   BackTop: {
     en: { label: "Back to top" },
@@ -122,7 +136,7 @@ export const strings = {
   },
   Carousel: {
     en: { prev: "Previous slide", next: "Next slide", slide: "Slide" },
-    vi: { prev: "Trang trước", next: "Trang sau", slide: "Trang" },
+    vi: { prev: "Ảnh trước", next: "Ảnh sau", slide: "Ảnh" },
   },
   Comment: {
     en: { reply: "Reply" },
@@ -137,12 +151,12 @@ export const strings = {
     vi: { more: "Thao tác khác" },
   },
   Popconfirm: {
-    en: { ok: "OK", cancel: "Cancel" },
-    vi: { ok: "Đồng ý", cancel: "Hủy" },
+    en: { ok: "Confirm", cancel: "Cancel" },
+    vi: { ok: "Xác nhận", 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" },
+    en: { success: "Done", error: "We couldn't complete that", warning: "Please check", info: "Here's what happened" },
+    vi: { success: "Hoàn tất", error: "Chúng tôi chưa hoàn tất được", warning: "Vui lòng kiểm tra", info: "Đây là điều đã xảy ra" },
   },
   InlineEdit: {
     en: { edit: "Edit", empty: "Add text" },
@@ -161,8 +175,8 @@ export const strings = {
     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" },
+    en: { placeholder: "Select or type…", empty: "No results" },
+    vi: { placeholder: "Chọn hoặc nhập…", empty: "Không có kết quả" },
   },
   InputGroup: {
     en: { clear: "Clear", show: "Show password", hide: "Hide password", input: "Input" },
@@ -198,11 +212,11 @@ export const strings = {
     vi: { list: "Tab" },
   },
   EmptyState: {
-    en: { title: "Nothing here yet", action: "Get started" },
-    vi: { title: "Chưa có gì ở đây", action: "Bắt đầu" },
+    en: { title: "Nothing here yet", action: "Create your first item" },
+    vi: { title: "Chưa có gì ở đây", action: "Tạo mục đầu tiên" },
   },
   Alert: {
-    en: { dismiss: "Dismiss" },
+    en: { dismiss: "Close" },
     vi: { dismiss: "Đóng" },
   },
   Select: {
@@ -237,4 +251,8 @@ export const strings = {
     en: { label: "Progress" },
     vi: { label: "Tiến độ" },
   },
+  ChatMessage: {
+    en: { you: "You" },
+    vi: { you: "Bạn" },
+  },
 };

package/components/ai/ChatMessage.d.ts

@@ -11,6 +11,8 @@ export interface ChatMessageProps {
   name?: ReactNode;
   avatar?: ReactNode;
   children?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 

package/components/ai/ChatMessage.jsx

@@ -1,20 +1,24 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /**
  * CyberSkill ChatMessage — one turn in a Lumi conversation. role "lumi" (genie,
  * Ochre avatar) or "user" (Umber, right-aligned). Pass `avatar` to override.
  */
-export function ChatMessage({ role = "lumi", name, avatar, children, className }) {
+export function ChatMessage({ role = "lumi", name, avatar, lang, className, children }) {
   const isUser = role === "user";
+  const [ref, L] = useLang(lang);
+  const t = makeT("ChatMessage", L);
+  const you = t("you");
   const defaultAvatar = isUser
-    ? <span aria-hidden="true">You</span>
+    ? <span aria-hidden="true">{you}</span>
     : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z" /></svg>;
   return (
-    <div className={cx("cs-chat-msg", isUser ? "cs-chat-msg--user" : "cs-chat-msg--lumi", className)}>
+    <div ref={ref} className={cx("cs-chat-msg", isUser ? "cs-chat-msg--user" : "cs-chat-msg--lumi", className)}>
       <div className="cs-chat-msg__avatar">{avatar ?? defaultAvatar}</div>
       <div className="cs-chat-msg__col">
-        <div className="cs-chat-msg__name">{name ?? (isUser ? "You" : "Lumi")}</div>
+        <div className="cs-chat-msg__name">{name ?? (isUser ? you : "Lumi")}</div>
         <div className="cs-chat-msg__bubble">{children}</div>
       </div>
     </div>

package/components/ai/ConfidenceMeter.d.ts

@@ -11,6 +11,8 @@ export interface ConfidenceMeterProps {
   level?: "low" | "medium" | "high";
   segments?: number;
   label?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 

package/components/ai/HumanReviewGate.d.ts

@@ -12,6 +12,8 @@ export interface HumanReviewGateProps {
   reviewer?: ReactNode;
   approveLabel?: string;
   rejectLabel?: string;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
   onApprove?: () => void;
   onReject?: () => void;

package/components/ai/PromptInput.d.ts

@@ -15,6 +15,8 @@ export interface PromptInputProps {
   hint?: ReactNode;
   disabled?: boolean;
   busy?: boolean;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 

package/components/ai/TypingIndicator.d.ts

@@ -4,6 +4,8 @@ import type * as React from "react";
  *  under reduced-motion. */
 export interface TypingIndicatorProps {
   label?: string;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function TypingIndicator(props: TypingIndicatorProps): React.ReactElement;

package/components/ai/ai-conversation.card.html

@@ -10,9 +10,9 @@
   .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; max-width: 660px; align-items: start; }
   .lbl { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 10px; }
 </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/ai/ai-lumi.card.html

@@ -9,9 +9,9 @@
   .lbl { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 10px; }
   .blk { margin-bottom: 20px; }
 </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/ai/ai.card.html

@@ -10,9 +10,9 @@
   .stack { display: grid; gap: 18px; max-width: 560px; }
   .lbl { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 8px; }
 </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/brand/brand.card.html

@@ -9,9 +9,9 @@
   .row { display: flex; align-items: center; gap: 24px; }
   .cap { font: 500 12px/1.4 var(--cs-font-family-ui); color: var(--cs-color-text-muted); margin-top: 8px; }
 </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/button/buttons.card.html

@@ -11,9 +11,9 @@
   .row:last-child { margin-bottom: 0; }
   .lbl { width: 100%; font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 2px; }
 </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/data/Image.jsx

@@ -15,13 +15,29 @@ export function Image({ src, alt = "", ratio, preview = false, fallback, lang, c
     document.addEventListener("keydown", k);
     return () => document.removeEventListener("keydown", k);
   }, [zoom]);
+  const openPreview = () => setZoom(true);
+  const onPreviewKey = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openPreview();
+    }
+  };
   const body = state === "error"
     ? <span className="cs-image__fallback">{fallback || <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="M21 15l-5-5-9 9" /></svg>}</span>
     : <img {...props} src={src} alt={alt} onLoad={() => setState("ok")} onError={() => setState("error")} />;
+  const canPreview = preview && state === "ok";
   return (
     <>
-      <span ref={ref} className={cx("cs-image", state === "loading" && "is-loading", preview && state === "ok" && "is-zoomable", className)} style={ratio ? { aspectRatio: ratio } : undefined}
-        onClick={preview && state === "ok" ? () => setZoom(true) : undefined} role={preview && state === "ok" ? "button" : undefined} aria-label={preview && state === "ok" ? t("preview") + (alt ? ": " + alt : "") : undefined}>
+      <span
+        ref={ref}
+        className={cx("cs-image", state === "loading" && "is-loading", canPreview && "is-zoomable", className)}
+        style={ratio ? { aspectRatio: ratio } : undefined}
+        onClick={canPreview ? openPreview : undefined}
+        onKeyDown={canPreview ? onPreviewKey : undefined}
+        role={canPreview ? "button" : undefined}
+        tabIndex={canPreview ? 0 : undefined}
+        aria-label={canPreview ? t("preview") + (alt ? ": " + alt : "") : undefined}
+      >
         {body}
       </span>
       {zoom ? (

package/components/data/Sortable.d.ts

@@ -1,10 +1,14 @@
 import type { ReactNode } from "react";
 
-/** Drag-to-reorder list (HTML5 drag and drop). onChange receives the new order. */
+/** Reorderable list item. */
 export interface SortableItem { key: string; label: ReactNode; }
 export interface SortableProps {
   items: SortableItem[];
   onChange?: (items: SortableItem[]) => void;
+  lang?: string;
   className?: string;
 }
+/** Pure reorder helper shared by drag and move-button paths. */
+export function reorderItems<T>(items: T[], from: number, to: number): T[];
+/** Reorderable list — move-up/down buttons (WCAG 2.5.7) plus HTML5 DnD enhancement. */
 export function Sortable(props: SortableProps): React.ReactElement;

package/components/data/Sortable.jsx

@@ -1,28 +1,61 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
-/** CyberSkill Sortable — drag-to-reorder list (HTML5 DnD). items: [{key,label}]; onChange(newItems). */
-export function Sortable({ items = [], onChange, className }) {
+/** Move item at `from` to index `to` (shared by drag drop and move buttons). */
+export function reorderItems(items, from, to) {
+  if (from < 0 || to < 0 || from >= items.length || to >= items.length || from === to) return items;
+  const next = [...items];
+  next.splice(to, 0, next.splice(from, 1)[0]);
+  return next;
+}
+
+/** CyberSkill Sortable — reorderable list (move buttons + HTML5 DnD enhancement). items: [{key,label}]; onChange(newItems). */
+export function Sortable({ items = [], onChange, lang, className }) {
   const [dragKey, setDragKey] = React.useState(null);
   const [over, setOver] = React.useState(null);
+  const [ref, L] = useLang(lang);
+  const t = makeT("Sortable", L);
+  const move = (from, to) => {
+    const next = reorderItems(items, from, to);
+    if (next !== items) onChange && onChange(next);
+  };
   const drop = () => {
     if (dragKey == null || over == null || dragKey === over) { setDragKey(null); setOver(null); return; }
     const from = items.findIndex((i) => i.key === dragKey);
     const to = items.findIndex((i) => i.key === over);
-    const next = [...items];
-    next.splice(to, 0, next.splice(from, 1)[0]);
-    onChange && onChange(next);
+    move(from, to);
     setDragKey(null); setOver(null);
   };
   return (
-    <ul className={cx("cs-sortable", className)}>
-      {items.map((it) => (
+    <ul ref={ref} className={cx("cs-sortable", className)}>
+      {items.map((it, idx) => (
         <li key={it.key} draggable
           className={cx("cs-sortable__item", dragKey === it.key && "is-dragging", over === it.key && "is-over")}
-          onDragStart={() => setDragKey(it.key)}
+          onDragStart={(e) => {
+            if (e.target.closest && e.target.closest(".cs-sortable__ops")) { e.preventDefault(); return; }
+            setDragKey(it.key);
+          }}
           onDragOver={(e) => { e.preventDefault(); setOver(it.key); }}
           onDrop={drop} onDragEnd={drop}>
-          <span className="cs-sortable__grip" aria-hidden="true">⠿</span>{it.label}
+          <span className="cs-sortable__grip" aria-hidden="true">⠿</span>
+          <span className="cs-sortable__label">{it.label}</span>
+          <span className="cs-sortable__ops" onMouseDown={(e) => e.stopPropagation()}>
+            <button
+              type="button"
+              className="cs-button cs-button--secondary cs-button--xs"
+              aria-label={t("moveUp")}
+              disabled={idx === 0}
+              onClick={() => move(idx, idx - 1)}
+            >↑</button>
+            <button
+              type="button"
+              className="cs-button cs-button--secondary cs-button--xs"
+              aria-label={t("moveDown")}
+              disabled={idx === items.length - 1}
+              onClick={() => move(idx, idx + 1)}
+            >↓</button>
+          </span>
         </li>
       ))}
     </ul>

package/components/data/Sortable.prompt.md

@@ -1,5 +1,7 @@
-**Sortable** — drag-to-reorder list (compose columns of it for a kanban).
+**Sortable** — reorderable list with move-up/down buttons (keyboard + single-pointer) and optional HTML5 drag. Compose columns of it for a kanban.
 
 ```jsx
-<Sortable items={tasks} onChange={setTasks}/>
+<Sortable items={tasks} onChange={setTasks} lang="en"/>
 ```
+
+Buttons expose i18n `aria-label`s (`moveUp` / `moveDown`); first/last controls are disabled.

package/components/data/Terminal.jsx

@@ -3,11 +3,12 @@ import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Terminal — command console: history + prompt input; onCommand returns output (string or lines). */
-export function Terminal({ title = "cyberskill — zsh", welcome, onCommand, prompt = "➜", lang, className }) {
+export function Terminal({ title, welcome, onCommand, prompt = "➜", lang, className }) {
   const [hist, setHist] = React.useState(() => (welcome ? [{ out: welcome }] : []));
   const [q, setQ] = React.useState("");
   const [ref, L] = useLang(lang);
   const t = makeT("Terminal", L);
+  const barTitle = title ?? t("title");
   const run = () => {
     if (!q.trim()) return;
     const res = onCommand ? onCommand(q.trim()) : "";
@@ -16,7 +17,7 @@ export function Terminal({ title = "cyberskill — zsh", welcome, onCommand, pro
   };
   return (
     <div ref={ref} className={cx("cs-terminal", className)}>
-      <div className="cs-terminal__bar"><i /><i /><i /><span>{title}</span></div>
+      <div className="cs-terminal__bar"><i /><i /><i /><span>{barTitle}</span></div>
       <div className="cs-terminal__body">
         {hist.map((l, i) => l.cmd != null
           ? <div key={i} className="cs-terminal__line"><span className="p">{prompt}</span> {l.cmd}</div>

package/components/data/Tooltip.d.ts

@@ -8,6 +8,8 @@ import type { ReactNode } from "react";
 export interface TooltipProps {
   label: ReactNode;
   children: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 

package/components/data/Tooltip.jsx

@@ -1,12 +1,15 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Tooltip — hover/focus bubble above the trigger. Keep label short. */
-export function Tooltip({ label, children, className }) {
+export function Tooltip({ label, children, lang, className }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Tooltip", L);
   return (
-    <span className={cx("cs-tooltip", className)}>
+    <span ref={ref} className={cx("cs-tooltip", className)}>
       {children}
-      <span className="cs-tooltip__bubble" role="tooltip">{label}</span>
+      <span className="cs-tooltip__bubble" role="tooltip">{label ?? t("label")}</span>
     </span>
   );
 }

package/components/data/Tree.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
-/** Expandable hierarchy (role=tree). Single-select via onSelect(key, node). */
+/** Expandable hierarchy (APG tree: roving tabindex + arrow navigate/expand).
+ *  Single-select via onSelect(key, node). */
 export interface TreeNode { key: string; label: ReactNode; children?: TreeNode[]; }
 export interface TreeProps {
   nodes: TreeNode[];