create-wakii-stack 0.0.0-stage → 0.1.0

package/stack-template/app/ui-kit/src/ui/menubar/menubar.stories.tsx

@@ -0,0 +1,66 @@
+// Menubar stories — hover dropdown + controlled selection demo.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Menubar } from './index';
+
+/** Horizontal menubar with hover dropdowns. */
+const meta = { title: 'Navigation/Menubar', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  name: 'Basic — hover dropdown',
+  render: () => (
+    <Menubar
+      items={[
+        { key: 'file', label: 'File', children: [{ key: 'new', label: 'New task' }, { key: 'import', label: 'Import CSV' }] },
+        { key: 'edit', label: 'Edit', children: [{ key: 'undo', label: 'Undo' }, { key: 'redo', label: 'Redo' }] },
+        { key: 'help', label: 'Help' },
+      ]}
+    />
+  ),
+};
+
+function DemoMenubar() {
+  const [last, setLast] = useState<string | null>(null);
+  return (
+    <div className="flex flex-col gap-3">
+      <span className="text-meta text-ink2">Selected: {last ?? '—'}</span>
+      <Menubar
+        items={[
+          {
+            key: 'task',
+            label: 'Task',
+            children: [
+              { key: 'new', label: 'New task' },
+              { key: 'bulk', label: 'Bulk create' },
+            ],
+            onClick: () => setLast('Task (root menu)'),
+          },
+          { key: 'about', label: 'About', onClick: () => setLast('About') },
+        ]}
+      />
+    </div>
+  );
+}
+
+export const SelectionDemo: Story = {
+  name: 'Demo — onClick + onItemClick display',
+  render: () => <DemoMenubar />,
+};
+
+export const DangerItem: Story = {
+  name: 'Danger item — destructive submenu action',
+  render: () => (
+    <Menubar
+      items={[
+        {
+          key: 'task',
+          label: 'Task',
+          children: [{ key: 'new', label: 'New task' }, { key: 'del', label: 'Delete task…', danger: true }],
+        },
+        { key: 'help', label: 'Help' },
+      ]}
+    />
+  ),
+};

package/stack-template/app/ui-kit/src/ui/menubar/menubar.test.tsx

@@ -0,0 +1,65 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Menubar } from './index.js';
+afterEach(cleanup);
+describe('Menubar', () => {
+  it('items + hover dropdown children', async () => {
+    const user = userEvent.setup();
+    render(<Menubar items={[{ key: 'f', label: 'File', children: [{ key: 'open', label: 'Mở' }] }]} />);
+    await user.hover(screen.getByText('File'));
+    expect(screen.getByText('Mở')).toBeInTheDocument();
+  });
+});
+
+describe('Menubar — hover dropdown', () => {
+  it('mouseEnter item có children → submenu hiện; child click gọi onClick', async () => {
+    const onChild = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Menubar
+        items={[
+          {
+            key: 'file',
+            label: 'File',
+            children: [{ key: 'new', label: 'New task', onClick: onChild }],
+          },
+        ]}
+      />,
+    );
+    fireEvent.mouseEnter(screen.getByRole('button', { name: 'File' }));
+    expect(screen.getByText('New task')).toBeInTheDocument();
+    await user.click(screen.getByText('New task'));
+    expect(onChild).toHaveBeenCalledTimes(1);
+    // mouseLeave → dropdown đóng
+    fireEvent.mouseLeave(screen.getByRole('button', { name: 'File' }));
+    expect(screen.queryByText('New task')).toBeNull();
+  });
+
+  it('item lá (không children) → onClick trực tiếp', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Menubar items={[{ key: 'help', label: 'Help', onClick }]} />);
+    await user.click(screen.getByRole('button', { name: 'Help' }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('Menubar — danger item', () => {
+  it('child danger → class text-st-fail (đỏ, hover bg-st-fail/12)', async () => {
+    render(
+      <Menubar
+        items={[
+          {
+            key: 'task',
+            label: 'Task',
+            children: [{ key: 'del', label: 'Delete task…', danger: true }],
+          },
+        ]}
+      />,
+    );
+    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Task' }));
+    const item = screen.getByText('Delete task…');
+    expect(item.className).toContain('text-st-fail');
+  });
+});

package/stack-template/app/ui-kit/src/ui/message/index.tsx

@@ -0,0 +1,123 @@
+// Message — toast gọn kiểu antd message (static API: message.success('…')).
+// Container tự tạo 1 lần (portal-free: div fixed gắn body khi gọi đầu tiên);
+// auto-dismiss 3s + motion slide-down. KHÔNG thay Alert cho error cần hiển thị lâu.
+// SÓNG-3: classNames slots (wrapper/icon/content) — merge sau class mặc định.
+import type { AlertType } from '../alert/index';
+
+export type MessageType = Exclude<AlertType, 'warning'> | 'warning';
+
+/** antd v5-style sub-part slot classes — merge AFTER defaults (consumer appends). */
+export interface MessageClassNames {
+  /** Toast root. */
+  wrapper?: string;
+  /** Status glyph span. */
+  icon?: string;
+  /** Content span. */
+  content?: string;
+}
+
+
+// Path data GỐC primeicons 7.0.0 (style sweep 2026-10-23 — bỏ glyph ký tự text).
+// Copy từ src/ui/icons/index.tsx (PATHS không export; file này DOM thuần không
+// React) — dựng svg bằng createElementNS, KHÔNG innerHTML (đồng bộ kỷ luật
+// textContent cho user content ở dưới).
+const STATUS_PATHS: Record<MessageType, string[]> = {
+  success: [
+    'M9,18.25A.74.74,0,0,1,8.47,18l-5-5A.75.75,0,1,1,4.53,12L9,16.44,19.47,6A.75.75,0,0,1,20.53,7l-11,11A.74.74,0,0,1,9,18.25Z',
+  ],
+  info: [
+    'M12,16.75a.76.76,0,0,1-.75-.75V11a.75.75,0,0,1,1.5,0v5A.76.76,0,0,1,12,16.75Z',
+    'M12,9.25a.76.76,0,0,1-.75-.75V8a.75.75,0,0,1,1.5,0v.5A.76.76,0,0,1,12,9.25Z',
+    'M12,21a9,9,0,1,1,9-9A9,9,0,0,1,12,21ZM12,4.5A7.5,7.5,0,1,0,19.5,12,7.5,7.5,0,0,0,12,4.5Z',
+  ],
+  warning: [
+    'M20,18.75H4a.76.76,0,0,1-.65-.37.77.77,0,0,1,0-.75l8-14a.78.78,0,0,1,1.3,0l8,14a.77.77,0,0,1,0,.75A.76.76,0,0,1,20,18.75ZM5.29,17.25H18.71L12,5.51Z',
+    'M12,13.25a.76.76,0,0,1-.75-.75V9a.75.75,0,0,1,1.5,0v3.5A.76.76,0,0,1,12,13.25Z',
+    'M12,16.25a.76.76,0,0,1-.75-.75V15a.75.75,0,0,1,1.5,0v.5A.76.76,0,0,1,12,16.25Z',
+  ],
+  error: [
+    'M13.06,12l4.42-4.42a.75.75,0,1,0-1.06-1.06L12,10.94,7.58,6.52A.75.75,0,0,0,6.52,7.58L10.94,12,6.52,16.42a.75.75,0,0,0,0,1.06.75.75,0,0,0,1.06,0L12,13.06l4.42,4.42a.75.75,0,0,0,1.06,0,.75.75,0,0,0,0-1.06Z',
+  ],
+};
+
+/** SVG inline mirror markup bộ Icon (viewBox 24, fill currentColor, aria-hidden). */
+function statusIcon(type: MessageType, size = 14): SVGSVGElement {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('width', String(size));
+  svg.setAttribute('height', String(size));
+  svg.setAttribute('fill', 'currentColor');
+  svg.setAttribute('focusable', 'false');
+  for (const d of STATUS_PATHS[type]) {
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+
+const COLOR: Record<MessageType, string> = {
+  success: 'text-st-done',
+  info: 'text-accent',
+  warning: 'text-st-doing',
+  error: 'text-st-fail',
+};
+
+let container: HTMLDivElement | null = null;
+
+function ensureContainer(): HTMLDivElement {
+  // isConnected guard: container có thể bị detach (cleanup test / HMR) — tái tạo
+  if (!container || !container.isConnected) {
+    container = document.createElement('div');
+    container.className = 'pointer-events-none fixed inset-x-0 top-4 z-[var(--z-toast)] flex flex-col items-center gap-2';
+    document.body.appendChild(container);
+  }
+  return container;
+}
+
+// slot helper — ghép class consumer vào sau mặc định (undefined → rỗng)
+const slot = (c?: string) => (c ? ` ${c}` : '');
+
+function show(type: MessageType, content: string, durationMs = 3000, classNames?: MessageClassNames): void {
+  const root = ensureContainer();
+  const el = document.createElement('div');
+  el.className = `pointer-events-auto flex items-center gap-2 rounded-xl border border-line bg-s2 px-3 py-2 text-body text-ink shadow-[var(--shadow-pop)]${slot(classNames?.wrapper)}`;
+  el.setAttribute('role', 'status');
+  // DOM API + textContent — KHÔNG innerHTML (content có thể là input user → XSS surface)
+  const icon = document.createElement('span');
+  icon.className = `text-label ${COLOR[type]}${slot(classNames?.icon)}`;
+  icon.setAttribute('aria-hidden', 'true');
+  icon.append(statusIcon(type));
+  const text = document.createElement('span');
+  if (classNames?.content) text.className = classNames.content;
+  text.textContent = content;
+  el.append(icon, text);
+  root.appendChild(el);
+  // motion 12 standalone: animate qua Web Animations (không cần React root)
+  // WAAPI — jsdom test không có Element.animate → guard (toast vẫn remove đúng)
+  if (typeof el.animate === 'function') {
+    el.animate(
+      [
+        { opacity: 0, transform: 'translateY(-12px) scale(0.97)' },
+        { opacity: 1, transform: 'translateY(0) scale(1)' },
+      ],
+      { duration: 180, easing: 'ease-out' },
+    );
+  }
+  window.setTimeout(() => {
+    if (typeof el.animate === 'function') {
+      el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 150, easing: 'ease-in' }).onfinish =
+        () => el.remove();
+    } else {
+      el.remove();
+    }
+  }, durationMs);
+}
+
+export const message = {
+  success: (content: string, classNames?: MessageClassNames) => show('success', content, 3000, classNames),
+  info: (content: string, classNames?: MessageClassNames) => show('info', content, 3000, classNames),
+  warning: (content: string, classNames?: MessageClassNames) => show('warning', content, 3000, classNames),
+  error: (content: string, classNames?: MessageClassNames) => show('error', content, 3000, classNames),
+};
+

package/stack-template/app/ui-kit/src/ui/message/message.stories.tsx

@@ -0,0 +1,104 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index';
+import { message } from './index';
+
+/** Transient global toast — static API, 3s auto-dismiss. */
+const meta = {
+  title: 'Feedback/Message',
+  tags: ['autodocs'],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const FourTypes: Story = {
+  name: '4 types — success/info/warning/error',
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+      <Button type="primary" onClick={() => message.success('Task deleted')}>
+        success
+      </Button>
+      <Button onClick={() => message.info('Feed synced')}>info</Button>
+      <Button onClick={() => message.warning('Token expires soon')}>warning</Button>
+      <Button type="primary" danger onClick={() => message.error('Cannot reach node-svc')}>
+        error
+      </Button>
+    </div>
+  ),
+};
+
+export const RapidFire: Story = {
+  name: 'Stack — click repeatedly → toasts queue up',
+  render: () => (
+    <Button type="primary" onClick={() => message.info(`Update #${Date.now() % 1000}`)}>
+      Fire 3 toasts in a row
+    </Button>
+  ),
+};
+
+export const CustomStyled: Story = {
+  name: 'CustomStyled — classNames slots (antd v5 style)',
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+      <Button
+        type="primary"
+        onClick={() => message.success('Green tinted toast', { wrapper: 'ring-1 ring-st-done' })}
+      >
+        wrapper slot
+      </Button>
+      <Button
+        onClick={() => message.info('Bigger icon + bold text', { icon: 'text-xl', content: 'font-bold' })}
+      >
+        icon + content slots
+      </Button>
+    </div>
+  ),
+};
+
+export const DarkTheme: Story = {
+  name: 'DarkTheme — toast bg-s2 + dark border-line',
+  render: () => (
+    <div data-bp-theme="dark" className="p-4">
+      <Button type="primary" onClick={() => message.success('Saved (dark scope)')}>success (dark)</Button>
+    </div>
+  ),
+};
+
+// ── Real-world usage (2026-10-25): save flow toasts ──
+
+/** SaveFlowToasts — toast layer of a form save: info while saving, then success or
+ * error. Pair with the inline Alert story "Save flow" in Feedback/Alert. */
+export const SaveFlowToasts: Story = {
+  name: 'Save flow toasts — info while saving, success/error on finish',
+  render: () => <SaveFlowToastsDemo />,
+};
+
+function SaveFlowToastsDemo() {
+  const [state, setState] = useState<'idle' | 'saving' | 'done'>('idle');
+
+  function save() {
+    setState('saving');
+    message.info('Saving workspace settings…');
+    window.setTimeout(() => {
+      setState('done');
+      if (Math.random() > 0.25) message.success('Workspace settings saved');
+      else message.error('Save failed — network error');
+    }, 1200);
+  }
+
+  return (
+    <div className="flex w-full max-w-md flex-col gap-3 rounded-xl border border-line bg-s1 p-5">
+      <span className="text-body font-medium text-ink">Workspace settings</span>
+      <span className="text-meta text-ink3">
+        Toasts appear top-center and auto-dismiss after 3s — hit save a few times to catch both endings.
+      </span>
+      <div>
+        <Button type="primary" loading={state === 'saving'} onClick={save}>
+          {state === 'done' ? 'Save again' : 'Save changes'}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/stack-template/app/ui-kit/src/ui/message/message.test.tsx

@@ -0,0 +1,109 @@
+// Message tests — static API: toast gắn body, auto-remove, role=status.
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { message } from './index.js';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  vi.restoreAllMocks();
+});
+
+describe('message (static toast)', () => {
+  it('success → toast trong body với role=status + nội dung', () => {
+    vi.useFakeTimers();
+    message.success('Đã xoá task');
+    const toast = document.body.querySelector('[role="status"]');
+    expect(toast).not.toBeNull();
+    expect(toast?.textContent).toContain('Đã xoá task');
+    vi.useRealTimers();
+  });
+
+  it('auto-dismiss sau 3s', () => {
+    vi.useFakeTimers();
+    message.error('Lỗi rồi');
+    expect(document.body.querySelector('[role="status"]')).not.toBeNull();
+    vi.advanceTimersByTime(3100);
+    // animation onfinish cần thời gian — advance thêm 1 tick
+    vi.advanceTimersByTime(200);
+    expect(document.body.querySelector('[role="status"]')).toBeNull();
+    vi.useRealTimers();
+  });
+});
+
+describe('message — đầy đủ types + WAAPI path (prod có Element.animate)', () => {
+  it('warning + info → toast riêng từng cái', () => {
+    message.warning('Token sắp hết hạn');
+    message.info('Đã đồng bộ feed');
+    const toasts = document.body.querySelectorAll('[role="status"]');
+    expect(toasts.length).toBe(2);
+    expect(toasts[0].textContent).toContain('Token sắp hết hạn');
+    expect(toasts[1].textContent).toContain('Đã đồng bộ feed');
+  });
+
+  it('container fixed top + z thang --z-toast; toast icon màu theo type', () => {
+    message.success('ok');
+    const container = document.querySelector('.pointer-events-none.fixed')!;
+    expect(container.className).toContain('z-[var(--z-toast)]');
+    const icon = document.querySelector<HTMLElement>('[role="status"] span[aria-hidden]')!;
+    expect(icon.className).toContain('text-st-done');
+  });
+
+  it('XSS: content là textContent — không parse HTML', () => {
+    message.error('<img src=x onerror="window.__pwned=1">');
+    const toast = document.querySelector('[role="status"]')!;
+    expect(toast.querySelector('img')).toBeNull();
+    expect(toast.textContent).toContain('<img src=x onerror="window.__pwned=1">');
+  });
+
+  it('stack — toast mới append sau toast cũ (thứ tự hàng đợi)', () => {
+    message.success('trước');
+    message.info('sau');
+    const toasts = document.querySelectorAll('[role="status"]');
+    expect(toasts[0].textContent).toContain('trước');
+    expect(toasts[1].textContent).toContain('sau');
+  });
+
+  it('classNames slots (SÓNG-3) — merge sau default ở wrapper/icon/content', () => {
+    message.success('slot', { wrapper: 'bg-green-50', icon: 'text-xl', content: 'font-bold' });
+    const toast = document.querySelector('[role="status"]')!;
+    expect(toast).toHaveClass('rounded-xl'); // default giữ
+    expect(toast).toHaveClass('bg-green-50'); // slot thêm
+    const icon = toast.querySelector('span[aria-hidden]')!;
+    expect(icon).toHaveClass('text-st-done'); // default giữ
+    expect(icon).toHaveClass('text-xl'); // slot thêm
+    const content = toast.querySelectorAll('span')[1];
+    expect(content).toHaveClass('font-bold');
+    expect(content.textContent).toBe('slot');
+  });
+
+
+  it('có Element.animate (prod) → enter + exit animation + onfinish remove', () => {
+    vi.useFakeTimers();
+    // polyfill WAAPI — jsdom thiếu; cover branch animate CÓ MẶT (prod thật)
+    const animate = vi.fn(() => ({ onfinish: () => undefined }));
+    // jsdom không có animate — defineProperty (spyOn yêu cầu method tồn tại)
+    Object.defineProperty(globalThis.HTMLElement.prototype, 'animate', {
+      value: animate,
+      configurable: true,
+      writable: true,
+    });
+
+    message.success('ok');
+    // enter animation — keyframes translateY(-12px) → 0
+    expect(animate).toHaveBeenCalledTimes(1);
+    expect((animate.mock.calls[0] as unknown[])[0]).toEqual([
+      { opacity: 0, transform: 'translateY(-12px) scale(0.97)' },
+      { opacity: 1, transform: 'translateY(0) scale(1)' },
+    ]);
+
+    // auto-dismiss 3s → exit animation fade-out + onfinish → remove
+    vi.advanceTimersByTime(3000);
+    expect(animate).toHaveBeenCalledTimes(2);
+    expect((animate.mock.calls[1] as unknown[])[0]).toEqual([{ opacity: 1 }, { opacity: 0 }]);
+    // onfinish → el.remove() (thật — toast biến khỏi DOM, không phải mock remove)
+    (animate.mock.results[1].value as { onfinish: () => void }).onfinish();
+    expect(document.body.querySelector('[role="status"]')).toBeNull();
+
+    vi.useRealTimers();
+    delete (globalThis.HTMLElement.prototype as { animate?: unknown }).animate;
+  });
+});

package/stack-template/app/ui-kit/src/ui/modal/index.tsx

@@ -0,0 +1,142 @@
+// Modal — hộp thoại confirm (style matrix 2026-10-18: rounded-xl, shadow
+// var(--shadow-pop)). Motion identity (CSS): zoom-in mở / zoom-out đóng — closing
+// state machine: open=false → animation XONG mới unmount. ESC + overlay = cancel.
+// A11y (batch ⑫ worker C): focus trap (Tab/Shift+Tab vòng trong dialog), mở →
+// focus phần tử đầu, đóng → trả focus về trigger (capture document.activeElement).
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from '../button/index';
+import { Icon } from '../icons/index.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+
+/** antd v5-style sub-part slot classes — merge AFTER defaults (consumer appends). */
+export interface ModalClassNames {
+  /** Dialog panel (rounded card). */
+  wrapper?: string;
+  /** Fullscreen dim overlay. */
+  mask?: string;
+  /** Title line. */
+  header?: string;
+  /** Body content area. */
+  body?: string;
+  /** Action buttons row. */
+  footer?: string;
+  /** Close × button (top-right). */
+  closeButton?: string;
+}
+
+export interface ModalProps {
+  /** Mở/đóng (đóng có exit animation trước khi unmount). */
+  open: boolean;
+  /** Tiêu đề (string → làm aria-label dialog). */
+  title: ReactNode;
+  /** Nội dung thân hộp thoại. */
+  children?: ReactNode;
+  /** Nhãn nút xác nhận (mặc định 'OK'). */
+  okText?: string;
+  /** Nhãn nút huỷ (mặc định 'Huỷ'). */
+  cancelText?: string;
+  /** Nút OK đỏ (hành động phá hủy). */
+  danger?: boolean;
+  /** Đang xử lý — khoá 2 nút, OK hiện 'Đang xử lý…'. */
+  confirmLoading?: boolean;
+  onOk?: () => void;
+  /** Huỷ = ESC / click overlay / nút Huỷ / nút ×. */
+  onCancel?: () => void;
+  className?: string;
+  /** Slot classes kiểu antd v5 (SÓNG-3) — merge sau class mặc định. */
+  classNames?: ModalClassNames;
+}
+
+export function Modal({
+  open,
+  title,
+  children,
+  okText = 'OK',
+  cancelText = 'Huỷ',
+  danger = false,
+  confirmLoading = false,
+  onOk,
+  onCancel,
+  className,
+  classNames,
+}: ModalProps) {
+  // A11y: dialog name qua labelledby — ăn cả title ReactNode (icon/badge), không
+  // chỉ title string như aria-label cũ.
+  const titleId = useId();
+  const [mounted, setMounted] = useState(open);
+  const closing = mounted && !open;
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // active = open && mounted: mở → focus đầu; bắt đầu closing → trả focus trigger
+  useFocusTrap(dialogRef, open && mounted);
+
+  useEffect(() => {
+    if (open) setMounted(true);
+  }, [open]);
+
+  // ESC chỉ khi open (không khi closing)
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCancel?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onCancel]);
+
+  // Scroll lock giữ tới mounted=false (exit animation XONG) — không release sớm
+  useEffect(() => {
+    if (!mounted) return;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = ''; };
+  }, [mounted]);
+
+  if (!mounted) return null;
+
+  // slot helper — ghép class consumer vào sau mặc định (undefined → rỗng)
+  const slot = (c?: string) => (c ? ` ${c}` : '');
+
+  return createPortal(
+    <div
+      className={`fixed inset-0 z-[var(--z-modal)] flex items-center justify-center bg-[var(--mask)] p-4 ${closing ? 'animate-[bp-fade-out_var(--motion-fast)_var(--ease-exit)]' : 'animate-[bp-fade-in_var(--motion-instant)_var(--ease-enter)]'}${className ? ` ${className}` : ''}${slot(classNames?.mask)}`}
+      onClick={() => onCancel?.()}
+      data-testid="modal-overlay"
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        aria-labelledby={titleId}
+        style={{ willChange: "transform, opacity" }}
+        className={`relative w-full max-w-[416px] rounded-xl bg-s2 p-6 shadow-[var(--shadow-pop)] ${closing ? 'animate-[bp-zoom-out_var(--motion-fast)_var(--ease-exit)]' : 'animate-[bp-zoom-in_var(--motion-base)_var(--ease-enter)]'}${slot(classNames?.wrapper)}`}
+        onAnimationEnd={(e) => {
+          if (closing && e.target === e.currentTarget) setMounted(false);
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div id={titleId} className={`mb-2 text-h2 font-semibold text-ink${slot(classNames?.header)}`}>{title}</div>
+        {children && <div className={`text-body text-ink2${slot(classNames?.body)}`}>{children}</div>}
+        <div className={`mt-4 flex justify-end gap-2${slot(classNames?.footer)}`}>
+          <Button type="default" onClick={() => onCancel?.()} disabled={confirmLoading}>
+            {cancelText}
+          </Button>
+          <Button type="primary" danger={danger} onClick={() => onOk?.()} disabled={confirmLoading}>
+            {confirmLoading ? 'Đang xử lý…' : okText}
+          </Button>
+        </div>
+        {/* Nút × đóng (antd closable) — cuối DOM để focus-trap giữ Huỷ làm phần tử đầu */}
+        <button
+          type="button"
+          aria-label="Đóng"
+          className={`absolute right-4 top-4 cursor-pointer rounded-1 border-none bg-transparent text-base leading-4 text-ink3 hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 active:opacity-70${slot(classNames?.closeButton)}`}
+          onClick={() => onCancel?.()}
+        >
+          <Icon name="times" size={14} />
+        </button>
+      </div>
+    </div>,
+    document.body,
+  );
+}