@cyberskill/design 1.0.0

package/components/data/Splitter.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+/** Two resizable panes with a draggable divider (pointer + arrow keys; bilingual aria). */
+export interface SplitterProps {
+  start: ReactNode;
+  end: ReactNode;
+  /** Initial start-pane %. Default 50. */
+  initial?: number;
+  min?: number;
+  max?: number;
+  /** px. Default 240. */
+  height?: number;
+  lang?: string;
+  className?: string;
+}
+export function Splitter(props: SplitterProps): React.ReactElement;

package/components/data/Splitter.figma.tsx

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

package/components/data/Splitter.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Splitter — two resizable panes with a draggable (and arrow-key) divider. */
+export function Splitter({ start, end, initial = 50, min = 20, max = 80, height = 240, lang, className }) {
+  const [pct, setPct] = React.useState(initial);
+  const wrap = React.useRef(null);
+  const [ref, L] = useLang(lang);
+  const t = makeT("Splitter", L);
+  const drag = (e) => {
+    e.preventDefault();
+    const move = (ev) => {
+      const r = wrap.current.getBoundingClientRect();
+      const x = (ev.touches ? ev.touches[0].clientX : ev.clientX) - r.left;
+      setPct(Math.min(max, Math.max(min, (x / r.width) * 100)));
+    };
+    const up = () => { document.removeEventListener("pointermove", move); document.removeEventListener("pointerup", up); };
+    document.addEventListener("pointermove", move);
+    document.addEventListener("pointerup", up);
+  };
+  return (
+    <div ref={(el) => { wrap.current = el; ref.current = el; }} className={cx("cs-splitter", className)} style={{ height }}>
+      <div className="cs-splitter__pane" style={{ inlineSize: pct + "%" }}>{start}</div>
+      <div className="cs-splitter__bar" role="separator" aria-label={t("label")} aria-valuenow={Math.round(pct)} aria-valuemin={min} aria-valuemax={max} tabIndex={0}
+        onPointerDown={drag}
+        onKeyDown={(e) => { if (e.key === "ArrowLeft") setPct((p) => Math.max(min, p - 2)); else if (e.key === "ArrowRight") setPct((p) => Math.min(max, p + 2)); }} />
+      <div className="cs-splitter__pane" style={{ inlineSize: (100 - pct) + "%" }}>{end}</div>
+    </div>
+  );
+}

package/components/data/Splitter.prompt.md

@@ -0,0 +1,5 @@
+**Splitter** — draggable two-pane divider (keyboard-resizable).
+
+```jsx
+<Splitter start={<Editor/>} end={<Preview/>} initial={45}/>
+```

package/components/data/Stat.d.ts

@@ -0,0 +1,15 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Labelled KPI/metric with an optional trend delta. Trend sets the delta colour
+ * and arrow (up = success, down = danger, flat = muted).
+ */
+export interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: ReactNode;
+  value: ReactNode;
+  delta?: ReactNode;
+  trend?: "up" | "down" | "flat";
+}
+
+export function Stat(props: StatProps): React.ReactElement;

package/components/data/Stat.figma.tsx

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

package/components/data/Stat.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Stat — labelled metric with optional delta. trend: up | down | flat. */
+export function Stat({ label, value, delta, trend = "flat", className, ...props }) {
+  const arrow = trend === "up" ? "M12 5v14M6 11l6-6 6 6" : trend === "down" ? "M12 5v14M6 13l6 6 6-6" : "M5 12h14";
+  return (
+    <div className={cx("cs-stat", className)} {...props}>
+      <div className="cs-stat__label">{label}</div>
+      <div className="cs-stat__value">{value}</div>
+      {delta != null ? (
+        <div className={cx("cs-stat__delta", `cs-stat__delta--${trend}`)}>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={arrow} /></svg>
+          {delta}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/data/Stat.prompt.md

@@ -0,0 +1,5 @@
+**Stat** — labelled KPI with an optional trend delta (up = success, down = danger, flat = muted).
+
+```jsx
+<Stat label="Avg progress" value="70%" delta="+6 this week" trend="up" />
+```

package/components/data/Terminal.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+/** Command console: history + prompt input. onCommand(cmd) returns the output
+ *  to print (string/node). Warm-dark chrome, mono type. */
+export interface TerminalProps {
+  title?: string;
+  welcome?: ReactNode;
+  onCommand?: (cmd: string) => ReactNode;
+  prompt?: string;
+  lang?: string;
+  className?: string;
+}
+export function Terminal(props: TerminalProps): React.ReactElement;

package/components/data/Terminal.figma.tsx

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

package/components/data/Terminal.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+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 }) {
+  const [hist, setHist] = React.useState(() => (welcome ? [{ out: welcome }] : []));
+  const [q, setQ] = React.useState("");
+  const [ref, L] = useLang(lang);
+  const t = makeT("Terminal", L);
+  const run = () => {
+    if (!q.trim()) return;
+    const res = onCommand ? onCommand(q.trim()) : "";
+    setHist((h) => [...h, { cmd: q }, ...(res ? [{ out: res }] : [])]);
+    setQ("");
+  };
+  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__body">
+        {hist.map((l, i) => l.cmd != null
+          ? <div key={i} className="cs-terminal__line"><span className="p">{prompt}</span> {l.cmd}</div>
+          : <div key={i} className="cs-terminal__out">{l.out}</div>)}
+        <div className="cs-terminal__line">
+          <span className="p">{prompt}</span>
+          <input value={q} aria-label={t("input")} spellCheck={false}
+            onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") run(); }} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/data/Terminal.prompt.md

@@ -0,0 +1,5 @@
+**Terminal** — console block with prompt input (onCommand → output).
+
+```jsx
+<Terminal welcome="Type `help`." onCommand={(c)=>c==="help"?"wish · status · clear":"command not found: "+c}/>
+```

package/components/data/Timeline.d.ts

@@ -0,0 +1,17 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+export interface TimelineItem {
+  title: ReactNode;
+  meta?: ReactNode;
+  body?: ReactNode;
+  /** "done" (default, umber/green check), "now" (ochre arrow), "todo" (hollow). */
+  state?: "done" | "now" | "todo";
+}
+
+/** Vertical event/release trail with a connecting line. */
+export interface TimelineProps {
+  items: TimelineItem[];
+  className?: string;
+}
+export function Timeline(props: TimelineProps): React.ReactElement;

package/components/data/Timeline.figma.tsx

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

package/components/data/Timeline.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Timeline — vertical event trail. item.state: "done" (default) | "now" | "todo". */
+export function Timeline({ items = [], className }) {
+  return (
+    <div className={cx("cs-timeline", className)}>
+      {items.map((it, i) => (
+        <div key={i} className={cx("cs-timeline__item", it.state === "now" && "cs-timeline__item--now", it.state === "todo" && "cs-timeline__item--todo")}>
+          <span className="cs-timeline__marker" aria-hidden="true">{it.state === "todo" ? "" : it.state === "now" ? "→" : "✓"}</span>
+          <div>
+            <div className="cs-timeline__title">{it.title}</div>
+            {it.meta ? <div className="cs-timeline__meta">{it.meta}</div> : null}
+            {it.body ? <div className="cs-timeline__body">{it.body}</div> : null}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/data/Timeline.prompt.md

@@ -0,0 +1,8 @@
+**Timeline** — vertical event/release trail. `state`: `done` (check) · `now` (ochre arrow) · `todo` (hollow).
+
+```jsx
+<Timeline items={[
+  {title:"v1.6.0", meta:"This week", state:"now", body:"Glass bindings"},
+  {title:"v1.5.1", meta:"04 Jul 2026", body:"15 element packs"},
+]} />
+```

package/components/data/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Small umber bubble shown on hover/focus of its trigger. Wrap a focusable
+ * element so keyboard users get it too. Keep the label to a few words.
+ */
+export interface TooltipProps {
+  label: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Tooltip(props: TooltipProps): React.ReactElement;

package/components/data/Tooltip.figma.tsx

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

package/components/data/Tooltip.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Tooltip — hover/focus bubble above the trigger. Keep label short. */
+export function Tooltip({ label, children, className }) {
+  return (
+    <span className={cx("cs-tooltip", className)}>
+      {children}
+      <span className="cs-tooltip__bubble" role="tooltip">{label}</span>
+    </span>
+  );
+}

package/components/data/Tooltip.prompt.md

@@ -0,0 +1,5 @@
+**Tooltip** — small umber bubble on hover/focus of its trigger. Wrap a focusable element; keep the label short.
+
+```jsx
+<Tooltip label="Blocked on infra"><button className="cs-button cs-button--ghost cs-button--sm">?</button></Tooltip>
+```

package/components/data/Tree.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+/** Expandable hierarchy (role=tree). Single-select via onSelect(key, node). */
+export interface TreeNode { key: string; label: ReactNode; children?: TreeNode[]; }
+export interface TreeProps {
+  nodes: TreeNode[];
+  selected?: string;
+  onSelect?: (key: string, node: TreeNode) => void;
+  /** Expand all branches initially. Default false. */
+  defaultOpen?: boolean;
+  className?: string;
+}
+export function Tree(props: TreeProps): React.ReactElement;

package/components/data/Tree.figma.tsx

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

package/components/data/Tree.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+function Node({ n, depth, selected, onSelect, defaultOpen }) {
+  const [open, setOpen] = React.useState(!!defaultOpen);
+  const kids = n.children || [];
+  return (
+    <li role="treeitem" aria-expanded={kids.length ? open : undefined} aria-selected={selected === n.key}>
+      <span className={cx("cs-tree__row", selected === n.key && "is-selected")} style={{ paddingInlineStart: depth * 18 + 6 }}>
+        {kids.length ? (
+          <button type="button" className="cs-tree__twist" aria-hidden="true" tabIndex={-1} onClick={() => setOpen((o) => !o)}>{open ? "▾" : "▸"}</button>
+        ) : <span className="cs-tree__twist" aria-hidden="true" />}
+        <button type="button" className="cs-tree__label" onClick={() => { onSelect && onSelect(n.key, n); if (kids.length) setOpen((o) => !o); }}>{n.label}</button>
+      </span>
+      {kids.length && open ? <ul role="group">{kids.map((c) => <Node key={c.key} n={c} depth={depth + 1} selected={selected} onSelect={onSelect} defaultOpen={defaultOpen} />)}</ul> : null}
+    </li>
+  );
+}
+
+/** CyberSkill Tree — expandable hierarchy. nodes: {key,label,children[]}. Single select via onSelect. */
+export function Tree({ nodes = [], selected, onSelect, defaultOpen = false, className }) {
+  return <ul role="tree" className={cx("cs-tree", className)}>{nodes.map((n) => <Node key={n.key} n={n} depth={0} selected={selected} onSelect={onSelect} defaultOpen={defaultOpen} />)}</ul>;
+}

package/components/data/Tree.prompt.md

@@ -0,0 +1,5 @@
+**Tree** — expandable hierarchy with single select.
+
+```jsx
+<Tree selected={k} onSelect={setK} nodes={[{key:"p",label:"Platform",children:[{key:"ds",label:"Design System"}]}]}/>
+```

package/components/data/Watermark.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+/** Repeats rotated text behind children (draft/confidential marking). */
+export interface WatermarkProps {
+  text?: string;
+  /** 0–1. Default 0.09. */
+  opacity?: number;
+  /** Tile size px. Default 140. */
+  gap?: number;
+  /** Degrees. Default -22. */
+  rotate?: number;
+  children?: ReactNode;
+  className?: string;
+}
+export function Watermark(props: WatermarkProps): React.ReactElement;

package/components/data/Watermark.figma.tsx

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

package/components/data/Watermark.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Watermark — repeats rotated text behind children (draft/confidential marking). */
+export function Watermark({ text = "CyberSkill", opacity = 0.09, gap = 140, rotate = -22, children, className }) {
+  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>`
+  );
+  return (
+    <div 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/data/Watermark.prompt.md

@@ -0,0 +1,5 @@
+**Watermark** — rotated repeating text behind content (e.g. BẢN NHÁP / DRAFT).
+
+```jsx
+<Watermark text="BẢN NHÁP"><div className="cs-panel">…</div></Watermark>
+```

package/components/data/collections.card.html

@@ -0,0 +1,52 @@
+<!-- @dsCard group="Components" viewport="700x480" name="Collections & content" subtitle="List, DescriptionList, Timeline, Accordion, Kbd, CodeBlock" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<link rel="stylesheet" href="../../styles.css" />
+<style>
+  body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
+  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; 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; }
+  .blk { margin-bottom: 20px; }
+</style>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" 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="../../_ds_bundle.js"></script>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const { List, ListItem, DescriptionList, Timeline, Accordion, Kbd, CodeBlock, Avatar, Badge } = (window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]||{});
+function Demo() {
+  return (
+    <div className="cols">
+      <div>
+        <div className="blk"><div className="lbl">List</div>
+          <List>
+            <ListItem lead={<Avatar name="An Le" size="sm" />} title="An Le" subtitle="Platform" trail={<Badge>Owner</Badge>} />
+            <ListItem lead={<Avatar name="Bao Vu" size="sm" />} title="Bảo Vũ" subtitle="AI" trail="5h" onClick={()=>{}} />
+          </List>
+        </div>
+        <div className="blk"><div className="lbl">Description list</div>
+          <DescriptionList items={[{term:"Owner",value:"An Le"},{term:"Squad",value:"Platform"},{term:"Progress",value:"72%"},{term:"Updated",value:"2h ago"}]} />
+        </div>
+        <div><div className="lbl">Kbd</div><span><Kbd>⌘</Kbd> <Kbd>K</Kbd> &nbsp;to search</span></div>
+      </div>
+      <div>
+        <div className="blk"><div className="lbl">Timeline</div>
+          <Timeline items={[{title:"v1.6.0",meta:"This week",state:"now",body:"Glass bindings"},{title:"v1.5.1",meta:"04 Jul 2026",body:"15 element packs"},{title:"v1.4.0",meta:"13 Jun 2026",body:"Liquid Glass in code"}]} />
+        </div>
+        <div className="blk"><div className="lbl">Accordion</div>
+          <Accordion items={[{title:"What is a wish?",content:"A clear outcome stated in a sentence or two."},{title:"How fast do you reply?",content:"Within one business day."}]} />
+        </div>
+        <div><div className="lbl">Code</div><CodeBlock filename="styles.css" showBar={true} code={'@import "tokens/colors.css";'} /></div>
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>

package/components/data/data.card.html

@@ -0,0 +1,50 @@
+<!-- @dsCard group="Components" viewport="700x360" name="Data & layout" subtitle="Card, Stat, Avatar, Tooltip, Divider" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="stylesheet" href="../../styles.css" />
+<style>
+  body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
+  .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; max-width: 640px; align-items: start; }
+  .stats { display: flex; gap: 26px; align-items: center; }
+  .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/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" 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="../../_ds_bundle.js"></script>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const { Card, CardHeader, CardBody, CardFooter, Stat, Avatar, AvatarGroup, Tooltip, Divider, Badge } = (window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]||{});
+function Demo() {
+  return (
+    <div className="grid">
+      <Card>
+        <CardHeader title="Design System v1.6" subtitle="Platform squad" />
+        <CardBody>Liquid Glass component bindings + 15 element packs, verified.</CardBody>
+        <CardFooter><Badge variant="ochre">Now</Badge><AvatarGroup><Avatar name="An Le" size="sm" /><Avatar name="Bao Vu" size="sm" /><Avatar name="Chi Tran" size="sm" /></AvatarGroup></CardFooter>
+      </Card>
+      <div>
+        <div className="lbl">Stats</div>
+        <div className="stats">
+          <Stat label="Projects" value="6" />
+          <Stat label="Avg progress" value="70%" delta="+6" trend="up" />
+        </div>
+        <Divider label="team" />
+        <div className="lbl">Avatar &amp; tooltip</div>
+        <div className="stats">
+          <Avatar name="Nguyễn Vũ" size="lg" />
+          <Tooltip label="Blocked on infra"><span className="cs-badge cs-badge--danger">Blocked</span></Tooltip>
+        </div>
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>

package/components/data/qr-encode.js

@@ -0,0 +1,80 @@
+/* Minimal QR encoder — byte mode, EC level L, versions 1–4, mask 0.
+ * Single RS block per version (per the QR spec for 1L–4L). Not a component
+ * (lowercase export). Used by QRCode.jsx. */
+const EC = { 1: 7, 2: 10, 3: 15, 4: 20 };            // EC codewords (L)
+const TOTAL = { 1: 26, 2: 44, 3: 70, 4: 100 };        // total codewords
+const CAP = { 1: 17, 2: 32, 3: 53, 4: 78 };           // data bytes (byte mode, L)
+const ALIGN = { 1: [], 2: [6, 18], 3: [6, 22], 4: [6, 26] };
+// format info for EC L + mask 0 (15 bits, MSB first)
+const FORMAT = [1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0];
+
+const EXP = new Array(512), LOG = new Array(256);
+(function () { let x = 1; for (let i = 0; i < 255; i++) { EXP[i] = x; LOG[x] = i; x <<= 1; if (x & 0x100) x ^= 0x11d; } for (let i = 255; i < 512; i++) EXP[i] = EXP[i - 255]; })();
+function rs(data, ecLen) {
+  let gen = [1];
+  for (let i = 0; i < ecLen; i++) {
+    const next = new Array(gen.length + 1).fill(0);
+    for (let j = 0; j < gen.length; j++) {
+      next[j] ^= EXP[(LOG[gen[j]] + i) % 255];
+      next[j + 1] ^= gen[j];
+    }
+    gen = next;
+  }
+  const res = data.concat(new Array(ecLen).fill(0));
+  for (let i = 0; i < data.length; i++) {
+    const f = res[i];
+    if (f === 0) continue;
+    for (let j = 0; j < gen.length; j++) res[i + j] ^= EXP[(LOG[gen[j]] + LOG[f]) % 255];
+  }
+  return res.slice(data.length);
+}
+export function qrMatrix(text) {
+  const bytes = Array.from(new TextEncoder().encode(text));
+  let v = 0; for (const cand of [1, 2, 3, 4]) if (bytes.length <= CAP[cand]) { v = cand; break; }
+  if (!v) throw new Error("too long");
+  const dataLen = TOTAL[v] - EC[v];
+  // bitstream: mode 0100 + 8-bit count + bytes + terminator
+  const bits = [];
+  const push = (val, n) => { for (let i = n - 1; i >= 0; i--) bits.push((val >> i) & 1); };
+  push(4, 4); push(bytes.length, 8);
+  bytes.forEach((b) => push(b, 8));
+  push(0, Math.min(4, dataLen * 8 - bits.length));
+  while (bits.length % 8) bits.push(0);
+  const cw = [];
+  for (let i = 0; i < bits.length; i += 8) cw.push(parseInt(bits.slice(i, i + 8).join(""), 2));
+  const pads = [0xec, 0x11]; let p = 0;
+  while (cw.length < dataLen) cw.push(pads[p++ % 2]);
+  const all = cw.concat(rs(cw, EC[v]));
+  const n = 17 + v * 4;
+  const M = Array.from({ length: n }, () => new Array(n).fill(null));
+  const setF = (x, y, val) => { if (y >= 0 && y < n && x >= 0 && x < n) M[y][x] = val; };
+  const finder = (cx0, cy0) => { for (let y = -1; y <= 7; y++) for (let x = -1; x <= 7; x++) { const in7 = x >= 0 && x < 7 && y >= 0 && y < 7; const on = in7 && (x === 0 || x === 6 || y === 0 || y === 6 || (x >= 2 && x <= 4 && y >= 2 && y <= 4)); setF(cx0 + x, cy0 + y, on ? 1 : 0); } };
+  finder(0, 0); finder(n - 7, 0); finder(0, n - 7);
+  for (let i = 8; i < n - 8; i++) { const on = i % 2 === 0 ? 1 : 0; if (M[6][i] == null) M[6][i] = on; if (M[i][6] == null) M[i][6] = on; }
+  const ap = ALIGN[v];
+  for (const ay of ap) for (const ax of ap) {
+    if (M[ay][ax] != null) continue;
+    for (let y = -2; y <= 2; y++) for (let x = -2; x <= 2; x++) setF(ax + x, ay + y, Math.max(Math.abs(x), Math.abs(y)) !== 1 ? 1 : 0);
+  }
+  M[n - 8][8] = 1; // dark module
+  const fpos1 = [[8, 0], [8, 1], [8, 2], [8, 3], [8, 4], [8, 5], [8, 7], [8, 8], [7, 8], [5, 8], [4, 8], [3, 8], [2, 8], [1, 8], [0, 8]];
+  const fpos2 = [[n - 1, 8], [n - 2, 8], [n - 3, 8], [n - 4, 8], [n - 5, 8], [n - 6, 8], [n - 7, 8], [8, n - 8], [8, n - 7], [8, n - 6], [8, n - 5], [8, n - 4], [8, n - 3], [8, n - 2], [8, n - 1]];
+  FORMAT.forEach((b, i) => { const [x1, y1] = fpos1[i]; M[y1][x1] = b; const [x2, y2] = fpos2[i]; M[y2][x2] = b; });
+  // place data, mask 0 ((r+c)%2===0 flips)
+  let bi = 0;
+  const bit = (i) => (i < all.length * 8 ? (all[i >> 3] >> (7 - (i & 7))) & 1 : 0);
+  for (let col = n - 1; col > 0; col -= 2) {
+    if (col === 6) col--;
+    for (let i = 0; i < n; i++) {
+      for (let dx = 0; dx < 2; dx++) {
+        const x = col - dx;
+        const y = ((col + 1) & 2) === 0 ? n - 1 - i : i;
+        if (M[y][x] != null) continue;
+        let b = bit(bi++);
+        if ((y + x) % 2 === 0) b ^= 1;
+        M[y][x] = b;
+      }
+    }
+  }
+  return M;
+}