@cyberskill/design 1.0.0

package/components/navigation/Tabs.figma.tsx

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

package/components/navigation/Tabs.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Tabs — data-driven tablist, controlled by value/onChange. Ochre underline on active. */
+export function Tabs({ tabs = [], value, onChange, className, ...props }) {
+  const refs = React.useRef([]);
+  const idx = Math.max(0, tabs.findIndex((t) => t.value === value));
+  const key = (e, i) => {
+    let n = null;
+    if (e.key === "ArrowRight") n = (i + 1) % tabs.length;
+    else if (e.key === "ArrowLeft") n = (i - 1 + tabs.length) % tabs.length;
+    else if (e.key === "Home") n = 0;
+    else if (e.key === "End") n = tabs.length - 1;
+    if (n == null) return;
+    e.preventDefault();
+    if (onChange) onChange(tabs[n].value);
+    const b = refs.current[n]; if (b) b.focus();
+  };
+  return (
+    <div role="tablist" className={cx("cs-tabs", className)} {...props}>
+      {tabs.map((t, i) => (
+        <button key={t.value} type="button" role="tab" aria-selected={value === t.value} tabIndex={i === idx ? 0 : -1}
+          ref={(el) => (refs.current[i] = el)} onKeyDown={(e) => key(e, i)}
+          className="cs-tab" onClick={() => onChange && onChange(t.value)}>
+          {t.label}
+          {t.count != null ? <span className="cs-tab__count">{t.count}</span> : null}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** A single tab button, for hand-composed tablists. */
+export function Tab({ selected = false, count, children, className, ...props }) {
+  return (
+    <button type="button" role="tab" aria-selected={selected} className={cx("cs-tab", className)} {...props}>
+      {children}
+      {count != null ? <span className="cs-tab__count">{count}</span> : null}
+    </button>
+  );
+}

package/components/navigation/Tabs.prompt.md

@@ -0,0 +1,6 @@
+**Tabs / Tab** — underlined tablist (Ochre active indicator), controlled by `value`/`onChange`. Wire your own panels via `aria-controls`.
+
+```jsx
+<Tabs value={lens} onChange={setLens}
+  tabs={[{value:"board",label:"Board"},{value:"table",label:"Table",count:6}]} />
+```

package/components/navigation/Toolbar.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+/** Horizontal action bar (role=toolbar). Items after `overflowAfter` collapse
+ *  into a "⋯" menu (bilingual aria). "-" renders a separator. */
+export type ToolbarItem = { label?: ReactNode; icon?: ReactNode; onSelect?: () => void } | "-";
+export interface ToolbarProps {
+  items: ToolbarItem[];
+  /** Collapse items after this index into the ⋯ menu. */
+  overflowAfter?: number;
+  /** Accessible toolbar label. */
+  label?: string;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+export function Toolbar(props: ToolbarProps): React.ReactElement;

package/components/navigation/Toolbar.figma.tsx

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

package/components/navigation/Toolbar.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Toolbar — horizontal action bar; overflow items collapse into a "⋯" menu. items: {label,icon,onSelect} or "-". */
+export function Toolbar({ items = [], overflowAfter, label, lang, className }) {
+  const [open, setOpen] = React.useState(false);
+  const wrap = React.useRef(null);
+  const [ref, L] = useLang(lang);
+  const t = makeT("Toolbar", L);
+  const cut = overflowAfter != null ? overflowAfter : items.length;
+  const head = items.slice(0, cut), tail = items.filter((x) => x !== "-").slice(cut);
+  React.useEffect(() => {
+    if (!open) return;
+    const d = (e) => { if (wrap.current && !wrap.current.contains(e.target)) setOpen(false); };
+    document.addEventListener("mousedown", d);
+    return () => document.removeEventListener("mousedown", d);
+  }, [open]);
+  return (
+    <div ref={(el) => { wrap.current = el; ref.current = el; }} className={cx("cs-toolbar", className)} role="toolbar" aria-label={label}>
+      {head.map((it, i) => it === "-"
+        ? <span key={i} className="cs-toolbar__sep" aria-hidden="true" />
+        : <button key={i} type="button" className="cs-toolbar__btn" onClick={() => it.onSelect && it.onSelect()}>{it.icon}{it.label ? <span>{it.label}</span> : null}</button>)}
+      {tail.length ? (
+        <span className="cs-toolbar__more">
+          <button type="button" className="cs-toolbar__btn" aria-haspopup="menu" aria-expanded={open} aria-label={t("more")} onClick={() => setOpen((o) => !o)}>⋯</button>
+          {open ? <span className="cs-menu__list" role="menu">{tail.map((it, i) => <button key={i} type="button" role="menuitem" className="cs-menu__item" onClick={() => { setOpen(false); it.onSelect && it.onSelect(); }}>{it.label}</button>)}</span> : null}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/components/navigation/Toolbar.prompt.md

@@ -0,0 +1,5 @@
+**Toolbar** — action bar with "⋯" overflow menu and "-" separators.
+
+```jsx
+<Toolbar label="Editor" overflowAfter={3} items={[{icon:<Icon name="edit" size="sm"/>,label:"Edit"},"-",{label:"Share"},{label:"Export"},{label:"Archive"}]}/>
+```

package/components/navigation/navigation.card.html

@@ -0,0 +1,51 @@
+<!-- @dsCard group="Components" viewport="700x300" name="Navigation" subtitle="Tabs, Breadcrumb, Pagination, Menu" -->
+<!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; }
+  .stack { display: grid; gap: 22px; max-width: 620px; }
+  .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; }
+  .row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
+</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 { Tabs, Breadcrumb, Pagination, Menu, MenuItem } = (window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]||{});
+function Demo() {
+  const [lens, setLens] = React.useState("board");
+  const [page, setPage] = React.useState(3);
+  return (
+    <div className="stack">
+      <div><div className="lbl">Breadcrumb</div>
+        <Breadcrumb items={[{label:"Status Hub",href:"#"},{label:"Platform",href:"#"},{label:"Design System v1.6"}]} />
+      </div>
+      <div><div className="lbl">Tabs</div>
+        <Tabs value={lens} onChange={setLens} tabs={[{value:"board",label:"Board"},{value:"table",label:"Table",count:6},{value:"releases",label:"Releases"}]} />
+      </div>
+      <div className="row">
+        <div><div className="lbl">Pagination</div><Pagination page={page} pageCount={12} onChange={setPage} /></div>
+        <div><div className="lbl">Menu</div>
+          <Menu trigger={<button className="cs-button cs-button--secondary cs-button--sm">Actions ▾</button>}>
+            <MenuItem>Duplicate</MenuItem>
+            <MenuItem>Export EN + VN</MenuItem>
+            <div className="cs-menu__sep" />
+            <MenuItem danger>Delete</MenuItem>
+          </Menu>
+        </div>
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>

package/components/navigation/shell.card.html

@@ -0,0 +1,52 @@
+<!-- @dsCard group="Components" viewport="700x420" name="App shell — Sidebar, Steps, Command" subtitle="Sidebar + NavItem, Steps, CommandPalette" -->
+<!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; }
+  .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; }
+  .split { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
+  .sb { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); overflow: hidden; }
+  .frame { position: relative; overflow: hidden; height: 210px; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); margin-top: 18px; background: var(--cs-color-surface-raised); }
+  .frame .cs-cmdk-scrim { position: absolute; padding-top: 14px; }
+  .frame .cs-cmdk { inline-size: 100%; box-shadow: none; }
+</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 { Sidebar, NavItem, Steps, CommandPalette, Badge } = (window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]||{});
+function Demo() {
+  return (
+    <div>
+      <div className="split">
+        <div className="sb" style={{width:230}}>
+          <Sidebar label="Workspace">
+            <NavItem active>Overview</NavItem>
+            <NavItem trail={<Badge>3</Badge>}>Projects</NavItem>
+            <NavItem>Releases</NavItem>
+            <NavItem>Settings</NavItem>
+          </Sidebar>
+        </div>
+        <div>
+          <div className="lbl">Steps · the arc of a wish</div>
+          <Steps current={1} steps={[{title:"Make a wish"},{title:"Shape it"},{title:"Build to ship"},{title:"Built to last"}]} />
+          <div className="lbl" style={{marginTop:20}}>Command palette (⌘K)</div>
+          <div className="frame">
+            <CommandPalette open={true} onClose={()=>{}} groups={[{label:"Go to",items:[{label:"Dashboard",shortcut:"G D"},{label:"Releases",shortcut:"G R"}]},{label:"Actions",items:[{label:"New project",shortcut:"N"},{label:"Talk to Lumi",shortcut:"L"}]}]} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>

package/components/overlays/ContextMenu.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+/** Right-click menu scoped to its children (reuses Menu styling). */
+export type ContextMenuItem = { label: ReactNode; onSelect?: () => void; danger?: boolean } | "-";
+export interface ContextMenuProps {
+  items: ContextMenuItem[];
+  children?: ReactNode;
+  className?: string;
+}
+export function ContextMenu(props: ContextMenuProps): React.ReactElement;

package/components/overlays/ContextMenu.figma.tsx

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

package/components/overlays/ContextMenu.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill ContextMenu — right-click menu scoped to its children. items: {label,onSelect,danger} or "-" separator. */
+export function ContextMenu({ items = [], children, className }) {
+  const [pos, setPos] = React.useState(null);
+  React.useEffect(() => {
+    if (!pos) return;
+    const close = () => setPos(null);
+    const k = (e) => { if (e.key === "Escape") setPos(null); };
+    document.addEventListener("click", close);
+    document.addEventListener("keydown", k);
+    return () => { document.removeEventListener("click", close); document.removeEventListener("keydown", k); };
+  }, [pos]);
+  return (
+    <div className={cx("cs-ctxmenu-zone", className)}
+      onContextMenu={(e) => { e.preventDefault(); const r = e.currentTarget.getBoundingClientRect(); setPos({ x: e.clientX - r.left, y: e.clientY - r.top }); }}>
+      {children}
+      {pos ? (
+        <div className="cs-menu__list" role="menu" style={{ position: "absolute", insetInlineStart: pos.x, insetBlockStart: pos.y }}>
+          {items.map((it, i) => it === "-"
+            ? <div key={i} className="cs-menu__sep" />
+            : <button key={i} type="button" role="menuitem" className={cx("cs-menu__item", it.danger && "cs-menu__item--danger")} onClick={() => { setPos(null); it.onSelect && it.onSelect(); }}>{it.label}</button>)}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/overlays/ContextMenu.prompt.md

@@ -0,0 +1,7 @@
+**ContextMenu** — right-click menu on a zone ( "-" = separator; `danger` items).
+
+```jsx
+<ContextMenu items={[{label:"Duplicate"},"-",{label:"Delete",danger:true}]}>
+  <div className="card">Right-click me</div>
+</ContextMenu>
+```

package/components/overlays/Drawer.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Slide-in side panel with a scrim (the Status Hub detail-drawer pattern).
+ * Escape / scrim-click close. Put Buttons in `actions`. `side="left"` slides
+ * from the left.
+ */
+export interface DrawerProps {
+  open: boolean;
+  onClose?: () => void;
+  title?: ReactNode;
+  side?: "right" | "left";
+  children?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}
+export function Drawer(props: DrawerProps): React.ReactElement | null;

package/components/overlays/Drawer.figma.tsx

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

package/components/overlays/Drawer.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Drawer — slide-in side panel with scrim. side: right (default) | left. */
+export function Drawer({ open, onClose, title, side = "right", children, actions, lang, className }) {
+  const [ref, L] = useLang(lang);
+  React.useEffect(() => {
+    if (!open) return;
+    const prev = document.activeElement;
+    const SEL = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+    const p = ref.current;
+    const first = p ? p.querySelector(SEL) : null;
+    (first || p) && (first || p).focus();
+    const k = (e) => {
+      if (e.key === "Escape") { onClose && onClose(); return; }
+      if (e.key !== "Tab" || !ref.current) return;
+      const f = [...ref.current.querySelectorAll(SEL)];
+      if (!f.length) return;
+      const a = f[0], z = f[f.length - 1];
+      if (e.shiftKey && document.activeElement === a) { e.preventDefault(); z.focus(); }
+      else if (!e.shiftKey && document.activeElement === z) { e.preventDefault(); a.focus(); }
+    };
+    document.addEventListener("keydown", k);
+    return () => { document.removeEventListener("keydown", k); if (prev && prev.focus) prev.focus(); };
+  }, [open]);
+  const t = makeT("Drawer", L);
+  if (!open) return null;
+  return (
+    <>
+      <div className="cs-drawer-scrim" onClick={onClose} aria-hidden="true" />
+      <aside ref={ref} tabIndex={-1} className={cx("cs-drawer", side === "left" && "cs-drawer--left", className)} role="dialog" aria-modal="true" aria-label={typeof title === "string" ? title : t("panel")}>
+        <div className="cs-drawer__header">
+          {title ? <h2 className="cs-drawer__title">{title}</h2> : null}
+          <button type="button" className="cs-drawer__close" aria-label={t("close")} onClick={onClose}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+          </button>
+        </div>
+        <div className="cs-drawer__body">{children}</div>
+        {actions ? <div className="cs-drawer__footer">{actions}</div> : null}
+      </aside>
+    </>
+  );
+}

package/components/overlays/Drawer.prompt.md

@@ -0,0 +1,8 @@
+**Drawer** — slide-in side panel + scrim (the Status Hub detail pattern). Escape / scrim-click close; `side="left"` for left.
+
+```jsx
+<Drawer open={open} onClose={close} title="Design System v1.6"
+  actions={<Button>Open project</Button>}>
+  <DescriptionList items={meta} />
+</Drawer>
+```

package/components/overlays/HoverCard.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+/** Hover/focus-triggered rich preview panel with open/close delays. */
+export interface HoverCardProps {
+  trigger: ReactNode;
+  children?: ReactNode;
+  /** ms before opening. Default 150. */
+  openDelay?: number;
+  /** ms before closing. Default 200. */
+  closeDelay?: number;
+  className?: string;
+}
+export function HoverCard(props: HoverCardProps): React.ReactElement;

package/components/overlays/HoverCard.figma.tsx

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

package/components/overlays/HoverCard.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill HoverCard — hover/focus-triggered rich preview panel (delayed open/close). */
+export function HoverCard({ trigger, children, openDelay = 150, closeDelay = 200, className }) {
+  const [open, setOpen] = React.useState(false);
+  const t1 = React.useRef(); const t2 = React.useRef();
+  const show = () => { clearTimeout(t2.current); t1.current = setTimeout(() => setOpen(true), openDelay); };
+  const hide = () => { clearTimeout(t1.current); t2.current = setTimeout(() => setOpen(false), closeDelay); };
+  React.useEffect(() => () => { clearTimeout(t1.current); clearTimeout(t2.current); }, []);
+  return (
+    <span className={cx("cs-hovercard", className)} onMouseEnter={show} onMouseLeave={hide} onFocus={show} onBlur={hide}>
+      {trigger}
+      {open ? <span className="cs-hovercard__panel" role="dialog">{children}</span> : null}
+    </span>
+  );
+}

package/components/overlays/HoverCard.prompt.md

@@ -0,0 +1,5 @@
+**HoverCard** — hover/focus preview panel (delayed). Rich content (avatar + text), unlike single-line Tooltip.
+
+```jsx
+<HoverCard trigger={<a href="#">@anle</a>}><b>An Lê</b> · Platform lead</HoverCard>
+```

package/components/overlays/Popconfirm.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+/** Inline confirm bubble anchored to its trigger — for consequential actions
+ *  that don't warrant a full Dialog. OK/Cancel labels default bilingually. */
+export interface PopconfirmProps {
+  trigger: ReactNode;
+  title: ReactNode;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  /** Defaults from the registry ("OK" / "Đồng ý"). */
+  okLabel?: string;
+  /** Defaults from the registry ("Cancel" / "Hủy"). */
+  cancelLabel?: string;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+export function Popconfirm(props: PopconfirmProps): React.ReactElement;

package/components/overlays/Popconfirm.figma.tsx

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

package/components/overlays/Popconfirm.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Popconfirm — inline confirm bubble on a destructive/consequential action. */
+export function Popconfirm({ trigger, title, onConfirm, onCancel, okLabel, cancelLabel, lang, className }) {
+  const [open, setOpen] = React.useState(false);
+  const wrap = React.useRef(null);
+  const [ref, L] = useLang(lang);
+  const t = makeT("Popconfirm", L);
+  React.useEffect(() => {
+    if (!open) return;
+    const d = (e) => { if (wrap.current && !wrap.current.contains(e.target)) setOpen(false); };
+    const k = (e) => { if (e.key === "Escape") setOpen(false); };
+    document.addEventListener("mousedown", d);
+    document.addEventListener("keydown", k);
+    return () => { document.removeEventListener("mousedown", d); document.removeEventListener("keydown", k); };
+  }, [open]);
+  return (
+    <span ref={(el) => { wrap.current = el; ref.current = el; }} className={cx("cs-popconfirm", className)}>
+      <span onClick={() => setOpen((o) => !o)} aria-haspopup="dialog" aria-expanded={open}>{trigger}</span>
+      {open ? (
+        <span className="cs-popconfirm__panel" role="alertdialog" aria-label={typeof title === "string" ? title : undefined}>
+          <span className="cs-popconfirm__title">{title}</span>
+          <span className="cs-popconfirm__actions">
+            <button type="button" className="cs-button cs-button--ghost cs-button--xs" onClick={() => { setOpen(false); onCancel && onCancel(); }}>{cancelLabel != null ? cancelLabel : t("cancel")}</button>
+            <button type="button" className="cs-button cs-button--primary cs-button--xs" onClick={() => { setOpen(false); onConfirm && onConfirm(); }}>{okLabel != null ? okLabel : t("ok")}</button>
+          </span>
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/components/overlays/Popconfirm.prompt.md

@@ -0,0 +1,6 @@
+**Popconfirm** — inline confirm bubble (alertdialog) on a consequential action; bilingual OK/Cancel via the registry.
+
+```jsx
+<Popconfirm title="Delete this draft?" onConfirm={remove}
+  trigger={<Button variant="danger-ghost" size="sm">Delete</Button>}/>
+```

package/components/overlays/Popover.d.ts

@@ -0,0 +1,17 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Floating panel anchored to a trigger — richer than Tooltip (holds
+ * interactive content). Uncontrolled (click toggles; outside-click / Escape
+ * close) or controlled via open/onOpenChange. `align="end"` right-aligns.
+ */
+export interface PopoverProps {
+  trigger: ReactNode;
+  children?: ReactNode;
+  align?: "start" | "end";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+export function Popover(props: PopoverProps): React.ReactElement;

package/components/overlays/Popover.figma.tsx

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

package/components/overlays/Popover.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Popover — anchored floating panel. Uncontrolled (click toggles) or controlled. */
+export function Popover({ trigger, children, align = "start", open: controlled, onOpenChange, className }) {
+  const [u, setU] = React.useState(false);
+  const open = controlled != null ? controlled : u;
+  const set = (v) => (onOpenChange ? onOpenChange(v) : setU(v));
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const d = (e) => { if (ref.current && !ref.current.contains(e.target)) set(false); };
+    const k = (e) => { if (e.key === "Escape") set(false); };
+    document.addEventListener("mousedown", d);
+    document.addEventListener("keydown", k);
+    return () => { document.removeEventListener("mousedown", d); document.removeEventListener("keydown", k); };
+  }, [open]);
+  return (
+    <span className={cx("cs-popover", className)} ref={ref}>
+      <span onClick={() => set(!open)} aria-haspopup="dialog" aria-expanded={open}>{trigger}</span>
+      {open ? <div className={cx("cs-popover__panel", align === "end" && "cs-popover__panel--end")} role="dialog">{children}</div> : null}
+    </span>
+  );
+}

package/components/overlays/Popover.prompt.md

@@ -0,0 +1,7 @@
+**Popover** — floating panel with interactive content, anchored to a trigger. Uncontrolled or controlled; `align="end"` right-aligns.
+
+```jsx
+<Popover trigger={<button className="cs-button cs-button--secondary cs-button--sm">Filter</button>}>
+  <RadioGroup legend="Status" options={statusOptions} value={s} onChange={setS} />
+</Popover>
+```

package/components/overlays/Tour.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+/** Spotlight onboarding walkthrough: highlights each step's `target` selector
+ *  with a cutout + a popover card. Bilingual Skip/Back/Next/Done. */
+export interface TourStep { target: string; title: ReactNode; body?: ReactNode; }
+export interface TourProps {
+  steps: TourStep[];
+  open: boolean;
+  onClose?: () => void;
+  lang?: string;
+  className?: string;
+}
+export function Tour(props: TourProps): React.ReactElement;

package/components/overlays/Tour.figma.tsx

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