@cyberskill/design 1.0.0

package/components/data/Chart.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Chart — token-colored SVG charts: bar | line | spark | pie. data: [{label,value}]. */
+export function Chart({ type = "bar", data = [], height = 160, color = "var(--cs-accent)", showValues = false, label, className }) {
+  const W = 320, H = height, max = Math.max(1, ...data.map((d) => d.value));
+  let body = null;
+  if (type === "pie") {
+    const total = data.reduce((a, d) => a + d.value, 0) || 1;
+    const cols = [color, "var(--cs-accent-strong)", "var(--cs-accent-grad-b)", "var(--cs-color-text-muted)", "var(--cs-color-border-default)"];
+    let a0 = -Math.PI / 2;
+    body = (
+      <svg viewBox="0 0 120 120" width={H} height={H} aria-hidden="true">
+        {data.map((d, i) => {
+          const a1 = a0 + (d.value / total) * Math.PI * 2;
+          const large = a1 - a0 > Math.PI ? 1 : 0;
+          const p = `M60 60 L${60 + 50 * Math.cos(a0)} ${60 + 50 * Math.sin(a0)} A50 50 0 ${large} 1 ${60 + 50 * Math.cos(a1)} ${60 + 50 * Math.sin(a1)} Z`;
+          a0 = a1;
+          return <path key={i} d={p} fill={cols[i % cols.length]} stroke="var(--cs-color-surface-panel)" strokeWidth="1.5" />;
+        })}
+      </svg>
+    );
+  } else if (type === "line" || type === "spark") {
+    const pts = data.map((d, i) => `${(i / Math.max(1, data.length - 1)) * (W - 8) + 4},${H - 6 - (d.value / max) * (H - 24)}`).join(" ");
+    body = (
+      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} preserveAspectRatio="none" aria-hidden="true">
+        <polyline points={pts} fill="none" stroke={color} strokeWidth="2.4" strokeLinejoin="round" strokeLinecap="round" />
+        {type === "line" ? data.map((d, i) => <circle key={i} cx={(i / Math.max(1, data.length - 1)) * (W - 8) + 4} cy={H - 6 - (d.value / max) * (H - 24)} r="3.4" fill={color} />) : null}
+      </svg>
+    );
+  } else {
+    const bw = (W - 8) / data.length;
+    body = (
+      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} preserveAspectRatio="none" aria-hidden="true">
+        {data.map((d, i) => {
+          const h = (d.value / max) * (H - 26);
+          return <rect key={i} x={4 + i * bw + bw * 0.14} y={H - 20 - h} width={bw * 0.72} height={h} rx="3" fill={color} />;
+        })}
+      </svg>
+    );
+  }
+  return (
+    <figure className={cx("cs-chart", className)} role="img" aria-label={label || data.map((d) => d.label + ": " + d.value).join(", ")}>
+      {body}
+      {type !== "spark" ? (
+        <figcaption className="cs-chart__legend">
+          {data.map((d, i) => <span key={i}>{d.label}{showValues ? <b> {d.value}</b> : null}</span>)}
+        </figcaption>
+      ) : null}
+    </figure>
+  );
+}

package/components/data/Chart.prompt.md

@@ -0,0 +1,5 @@
+**Chart** — token-colored SVG bar/line/spark/pie (accent-aware; values in aria).
+
+```jsx
+<Chart type="bar" showValues data={[{label:"W28",value:11},{label:"W29",value:8}]}/>
+```

package/components/data/CodeBlock.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+
+/** Dark umber code panel (JetBrains Mono) with a filename/language bar and a
+ *  copy-to-clipboard button. Set showBar=false for a bare block. */
+export interface CodeBlockProps {
+  code: string;
+  filename?: string;
+  language?: string;
+  showBar?: boolean;
+  className?: string;
+}
+export function CodeBlock(props: CodeBlockProps): React.ReactElement;

package/components/data/CodeBlock.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { CodeBlock } from './CodeBlock.jsx'
+
+/**
+ * Code Connect stub — CodeBlock
+ * 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(CodeBlock, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-19', {
+  example: () => <CodeBlock />,
+  imports: ["import { CodeBlock } from '@cyberskill/design'"],
+})

package/components/data/CodeBlock.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill CodeBlock — dark mono code panel with a filename bar + copy button. */
+export function CodeBlock({ code = "", filename, language = "code", showBar = true, className }) {
+  const [copied, setCopied] = React.useState(false);
+  const copy = () => {
+    try { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 1400); } catch (e) { /* no-op */ }
+  };
+  return (
+    <div className={cx("cs-code", className)}>
+      {showBar ? (
+        <div className="cs-code__bar">
+          <span>{filename || language}</span>
+          <button type="button" className="cs-code__copy" onClick={copy}>{copied ? "Copied ✓" : "Copy"}</button>
+        </div>
+      ) : null}
+      <pre><code>{code}</code></pre>
+    </div>
+  );
+}

package/components/data/CodeBlock.prompt.md

@@ -0,0 +1,5 @@
+**CodeBlock** — dark umber code panel (JetBrains Mono) with a filename bar + copy button.
+
+```jsx
+<CodeBlock filename="styles.css" code={'@import "tokens/colors.css";'} />
+```

package/components/data/Comment.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+/** Discussion entry (avatar · author · meta · body · action row · nested
+ *  replies). Default action is a bilingual "Reply". */
+export interface CommentAction { label: ReactNode; onSelect?: () => void; }
+export interface CommentProps {
+  avatar?: ReactNode;
+  author: ReactNode;
+  meta?: ReactNode;
+  children?: ReactNode;
+  actions?: CommentAction[];
+  /** Nest further <Comment>s here. */
+  replies?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+export function Comment(props: CommentProps): React.ReactElement;

package/components/data/Comment.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Comment } from './Comment.jsx'
+
+/**
+ * Code Connect stub — Comment
+ * 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(Comment, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-23', {
+  example: () => <Comment />,
+  imports: ["import { Comment } from '@cyberskill/design'"],
+})

package/components/data/Comment.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Comment — discussion entry: avatar, author, meta, body, actions, nested replies. */
+export function Comment({ avatar, author, meta, children, actions = [], replies, lang, className }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Comment", L);
+  return (
+    <div ref={ref} className={cx("cs-comment", className)}>
+      {avatar ? <span className="cs-comment__avatar">{avatar}</span> : null}
+      <div className="cs-comment__main">
+        <div className="cs-comment__head"><b>{author}</b>{meta ? <span className="cs-comment__meta">{meta}</span> : null}</div>
+        <div className="cs-comment__body">{children}</div>
+        <div className="cs-comment__actions">
+          {(actions.length ? actions : [{ label: t("reply") }]).map((a, i) => (
+            <button key={i} type="button" onClick={() => a.onSelect && a.onSelect()}>{a.label}</button>
+          ))}
+        </div>
+        {replies ? <div className="cs-comment__replies">{replies}</div> : null}
+      </div>
+    </div>
+  );
+}

package/components/data/Comment.prompt.md

@@ -0,0 +1,7 @@
+**Comment** — discussion entry with nested `replies` (default bilingual "Reply" action).
+
+```jsx
+<Comment avatar={<Avatar name="An Le" size="sm"/>} author="An Lê" meta="2h">
+  Looks good — ship it.
+</Comment>
+```

package/components/data/DescriptionList.d.ts

@@ -0,0 +1,10 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+export interface DescriptionItem { term: ReactNode; value: ReactNode; }
+
+/** Responsive term/value metadata grid (the detail-drawer meta pattern). */
+export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
+  items: DescriptionItem[];
+}
+export function DescriptionList(props: DescriptionListProps): React.ReactElement;

package/components/data/DescriptionList.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { DescriptionList } from './DescriptionList.jsx'
+
+/**
+ * Code Connect stub — DescriptionList
+ * 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(DescriptionList, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-29', {
+  example: () => <DescriptionList />,
+  imports: ["import { DescriptionList } from '@cyberskill/design'"],
+})

package/components/data/DescriptionList.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill DescriptionList — term/value metadata grid. */
+export function DescriptionList({ items = [], className, ...props }) {
+  return (
+    <dl className={cx("cs-dl", className)} {...props}>
+      {items.map((it, i) => (
+        <div key={i}>
+          <dt>{it.term}</dt>
+          <dd>{it.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/components/data/DescriptionList.prompt.md

@@ -0,0 +1,5 @@
+**DescriptionList** — term/value metadata grid.
+
+```jsx
+<DescriptionList items={[{term:"Owner",value:"An Le"},{term:"Squad",value:"Platform"}]} />
+```

package/components/data/Divider.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Warm hairline separator. `label` centres text between two rules; `vertical`
+ * splits inline content (place inside a flex row).
+ */
+export interface DividerProps extends React.HTMLAttributes<HTMLElement> {
+  vertical?: boolean;
+  label?: ReactNode;
+}
+
+export function Divider(props: DividerProps): React.ReactElement;

package/components/data/Divider.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Divider } from './Divider.jsx'
+
+/**
+ * Code Connect stub — Divider
+ * 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(Divider, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-31', {
+  example: () => <Divider />,
+  imports: ["import { Divider } from '@cyberskill/design'"],
+})

package/components/data/Divider.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Divider — hairline rule. `label` centres text; `vertical` for inline splits. */
+// `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <hr> / label <div>.
+export function Divider({ vertical = false, label, className, children, ...props }) {
+  if (label) {
+    return <div className={cx("cs-divider", "cs-divider--label", className)} role="separator" {...props}>{label}</div>;
+  }
+  return <hr className={cx("cs-divider", vertical && "cs-divider--vertical", className)} aria-orientation={vertical ? "vertical" : "horizontal"} {...props} />;
+}

package/components/data/Divider.prompt.md

@@ -0,0 +1,6 @@
+**Divider** — warm hairline separator. `label` centres text between two rules; `vertical` splits inline content in a flex row.
+
+```jsx
+<Divider />
+<Divider label="or" />
+```

package/components/data/Image.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+/** Image with loading shimmer, warm fallback on error, and optional
+ *  click-to-preview lightbox (Escape/click closes). */
+export interface ImageProps {
+  src: string;
+  alt?: string;
+  /** CSS aspect-ratio, e.g. "16/9". */
+  ratio?: string;
+  /** Enables the click-to-zoom lightbox. */
+  preview?: boolean;
+  /** Custom fallback node when the image fails. */
+  fallback?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+export function Image(props: ImageProps): React.ReactElement;

package/components/data/Image.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Image } from './Image.jsx'
+
+/**
+ * Code Connect stub — Image
+ * 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(Image, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-43', {
+  example: () => <Image />,
+  imports: ["import { Image } from '@cyberskill/design'"],
+})

package/components/data/Image.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { Icon } from "../icon/Icon.jsx";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Image — img with loading skeleton, warm fallback on error, optional click-to-preview lightbox. */
+export function Image({ src, alt = "", ratio, preview = false, fallback, lang, className, ...props }) {
+  const [state, setState] = React.useState("loading");
+  const [zoom, setZoom] = React.useState(false);
+  const [ref, L] = useLang(lang);
+  const t = makeT("Image", L);
+  React.useEffect(() => {
+    if (!zoom) return;
+    const k = (e) => { if (e.key === "Escape") setZoom(false); };
+    document.addEventListener("keydown", k);
+    return () => document.removeEventListener("keydown", k);
+  }, [zoom]);
+  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")} />;
+  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}>
+        {body}
+      </span>
+      {zoom ? (
+        <span className="cs-image__zoom" role="dialog" aria-label={alt || t("preview")} onClick={() => setZoom(false)}>
+          <img src={src} alt={alt} />
+          <button type="button" aria-label={t("close")} onClick={() => setZoom(false)}>
+            <Icon name="close" size="sm" style={{ verticalAlign: "middle" }} />
+          </button>
+        </span>
+      ) : null}
+    </>
+  );
+}

package/components/data/Image.prompt.md

@@ -0,0 +1,5 @@
+**Image** — img with shimmer, warm error fallback, optional `preview` lightbox.
+
+```jsx
+<Image src="/assets/aurora-gold.jpg" alt="Aurora" ratio="16/9" preview/>
+```

package/components/data/Kbd.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/** Keyboard key hint (e.g. ⌘, K, Esc). Mono, subtle bottom border. */
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+export function Kbd(props: KbdProps): React.ReactElement;

package/components/data/Kbd.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Kbd } from './Kbd.jsx'
+
+/**
+ * Code Connect stub — Kbd
+ * 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(Kbd, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-47', {
+  example: () => <Kbd />,
+  imports: ["import { Kbd } from '@cyberskill/design'"],
+})

package/components/data/Kbd.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Kbd — keyboard key hint. */
+export function Kbd({ children, className, ...props }) {
+  return <kbd className={cx("cs-kbd", className)} {...props}>{children}</kbd>;
+}

package/components/data/Kbd.prompt.md

@@ -0,0 +1,5 @@
+**Kbd** — keyboard key hint.
+
+```jsx
+<Kbd>⌘</Kbd> <Kbd>K</Kbd>
+```

package/components/data/List.d.ts

@@ -0,0 +1,16 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> { children?: ReactNode; }
+export function List(props: ListProps): React.ReactElement;
+
+/** A list row: lead (icon/avatar), title, subtitle, trailing node. Pass onClick
+ *  to make it an interactive button row. */
+export interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
+  lead?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  trail?: ReactNode;
+  onClick?: () => void;
+}
+export function ListItem(props: ListItemProps): React.ReactElement;

package/components/data/List.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { List } from './List.jsx'
+
+/**
+ * Code Connect stub — List
+ * 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(List, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-49', {
+  example: () => <List />,
+  imports: ["import { List } from '@cyberskill/design'"],
+})

package/components/data/List.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill List container. Compose ListItem children. */
+export function List({ className, children, ...props }) {
+  return <div role="list" className={cx("cs-list", className)} {...props}>{children}</div>;
+}
+
+/** A row in a List: optional lead (icon/avatar), title, subtitle, trailing node. */
+export function ListItem({ lead, title, subtitle, trail, onClick, children, className, ...props }) {
+  const interactive = !!onClick;
+  const Tag = interactive ? "button" : "div";
+  return (
+    <Tag role="listitem" className={cx("cs-list__item", interactive && "cs-list__item--button", className)} onClick={onClick} {...props}>
+      {lead != null ? <span className="cs-list__lead">{lead}</span> : null}
+      <span className="cs-list__main">
+        {title != null ? <span className="cs-list__title">{title}</span> : null}
+        {subtitle != null ? <span className="cs-list__sub">{subtitle}</span> : null}
+        {children}
+      </span>
+      {trail != null ? <span className="cs-list__trail">{trail}</span> : null}
+    </Tag>
+  );
+}

package/components/data/List.prompt.md

@@ -0,0 +1,7 @@
+**List / ListItem** — vertical list of rows (lead · title/subtitle · trail). `onClick` makes a row an interactive button.
+
+```jsx
+<List>
+  <ListItem lead={<Avatar name="An Le" size="sm" />} title="An Le" subtitle="Platform" trail={<Badge>Owner</Badge>} />
+</List>
+```

package/components/data/Masonry.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+/** Column-packed gallery (CSS columns; items keep source order top-to-bottom per column). */
+export interface MasonryProps {
+  /** Default 3. */
+  columns?: number;
+  /** px. Default 16. */
+  gap?: number;
+  children?: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+export function Masonry(props: MasonryProps): React.ReactElement;

package/components/data/Masonry.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Masonry } from './Masonry.jsx'
+
+/**
+ * Code Connect stub — Masonry
+ * 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(Masonry, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-52', {
+  example: () => <Masonry />,
+  imports: ["import { Masonry } from '@cyberskill/design'"],
+})

package/components/data/Masonry.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Masonry — column-packed gallery (CSS columns). */
+export function Masonry({ columns = 3, gap = 16, children, className, style }) {
+  return (
+    <div className={cx("cs-masonry", className)} style={{ columnCount: columns, columnGap: gap, ...style }}>
+      {React.Children.map(children, (c) => <div className="cs-masonry__item" style={{ marginBottom: gap }}>{c}</div>)}
+    </div>
+  );
+}

package/components/data/Masonry.prompt.md

@@ -0,0 +1,5 @@
+**Masonry** — column-packed gallery.
+
+```jsx
+<Masonry columns={3}>{cards}</Masonry>
+```

package/components/data/QRCode.d.ts

@@ -0,0 +1,12 @@
+/** SVG QR code (byte mode, EC-L, up to ~78 bytes). Umber modules by default. */
+export interface QRCodeProps {
+  value: string;
+  /** px. Default 128. */
+  size?: number;
+  /** CSS color. Default text-primary. */
+  color?: string;
+  /** Accessible label. Defaults to `value`. */
+  label?: string;
+  className?: string;
+}
+export function QRCode(props: QRCodeProps): React.ReactElement;

package/components/data/QRCode.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { QRCode } from './QRCode.jsx'
+
+/**
+ * Code Connect stub — QRCode
+ * 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(QRCode, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-64', {
+  example: () => <QRCode />,
+  imports: ["import { QRCode } from '@cyberskill/design'"],
+})

package/components/data/QRCode.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { qrMatrix } from "./qr-encode.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill QRCode — SVG QR (byte mode, EC-L, versions 1–4 ≈ up to 78 bytes). Umber on transparent. */
+export function QRCode({ value = "", size = 128, color = "var(--cs-color-text-primary)", label, className }) {
+  const m = React.useMemo(() => { try { return qrMatrix(String(value)); } catch (e) { return null; } }, [value]);
+  if (!m) return <span className={cx("cs-qrcode", className)} role="img" aria-label={label || value}>—</span>;
+  const n = m.length, cell = size / n;
+  let d = "";
+  for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) if (m[y][x]) d += `M${x * cell} ${y * cell}h${cell}v${cell}h${-cell}z`;
+  return (
+    <span className={cx("cs-qrcode", className)} role="img" aria-label={label || value}>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true"><path d={d} fill={color} /></svg>
+    </span>
+  );
+}

package/components/data/QRCode.prompt.md

@@ -0,0 +1,5 @@
+**QRCode** — SVG QR (≤78 bytes, EC-L). Keep quiet space around it.
+
+```jsx
+<QRCode value="https://cyberskill.world" size={128}/>
+```

package/components/data/Sortable.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+/** Drag-to-reorder list (HTML5 drag and drop). onChange receives the new order. */
+export interface SortableItem { key: string; label: ReactNode; }
+export interface SortableProps {
+  items: SortableItem[];
+  onChange?: (items: SortableItem[]) => void;
+  className?: string;
+}
+export function Sortable(props: SortableProps): React.ReactElement;

package/components/data/Sortable.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Sortable } from './Sortable.jsx'
+
+/**
+ * Code Connect stub — Sortable
+ * 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(Sortable, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-74', {
+  example: () => <Sortable />,
+  imports: ["import { Sortable } from '@cyberskill/design'"],
+})

package/components/data/Sortable.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+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 }) {
+  const [dragKey, setDragKey] = React.useState(null);
+  const [over, setOver] = React.useState(null);
+  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);
+    setDragKey(null); setOver(null);
+  };
+  return (
+    <ul className={cx("cs-sortable", className)}>
+      {items.map((it) => (
+        <li key={it.key} draggable
+          className={cx("cs-sortable__item", dragKey === it.key && "is-dragging", over === it.key && "is-over")}
+          onDragStart={() => 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}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/components/data/Sortable.prompt.md

@@ -0,0 +1,5 @@
+**Sortable** — drag-to-reorder list (compose columns of it for a kanban).
+
+```jsx
+<Sortable items={tasks} onChange={setTasks}/>
+```