create-wakii-stack 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,128 @@
+// 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 { Modal } from './index';
+
+/** Blocking confirm/dialog — portal, focus trap, ESC/mask cancel. */
+const meta = {
+  title: 'Feedback/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Modal>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+type R = StoryObj;
+
+function Demo({ danger }: { danger?: boolean }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button type="primary" danger={danger} onClick={() => setOpen(true)}>
+        {danger ? 'Delete task' : 'Open modal'}
+      </Button>
+      <Modal
+        open={open}
+        title="Delete this task?"
+        danger={danger}
+        okText={danger ? 'Delete' : 'OK'}
+        onOk={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+      >
+        {danger ? 'This action cannot be undone.' : 'Modal demo content.'}
+      </Modal>
+    </>
+  );
+}
+
+function LoadingDemo() {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        Open with loading
+      </Button>
+      <Modal
+        open={open}
+        title="Archive sprint?"
+        confirmLoading={loading}
+        onOk={() => {
+          setLoading(true);
+          window.setTimeout(() => {
+            setLoading(false);
+            setOpen(false);
+          }, 1200);
+        }}
+        onCancel={() => setOpen(false)}
+      >
+        Both buttons lock while confirmLoading — OK shows "Đang xử lý…".
+      </Modal>
+    </>
+  );
+}
+
+function DarkDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <div data-bp-theme="dark" className="p-4">
+      <Button type="primary" onClick={() => setOpen(true)}>Open modal (dark)</Button>
+      <Modal open={open} title="Delete this task?" danger okText="Delete" onOk={() => setOpen(false)} onCancel={() => setOpen(false)}>
+        This action cannot be undone (dark scope).
+      </Modal>
+    </div>
+  );
+}
+
+export const Basic: Story = {
+  name: 'Basic — confirm dialog',
+  args: { open: false, title: 'Modal' },
+  render: () => <Demo />,
+};
+
+export const Danger: Story = {
+  name: 'Danger — red OK for destructive actions',
+  args: { open: false, title: 'Delete this task?' },
+  render: () => <Demo danger />,
+};
+
+export const Loading: Story = {
+  name: 'Loading — confirmLoading locks buttons, OK shows spinner text',
+  args: { open: false, title: 'Archive sprint?' },
+  render: () => <LoadingDemo />,
+};
+
+function CustomStyledDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>Open custom-styled modal</Button>
+      <Modal
+        open={open}
+        title="Custom styled"
+        okText="Confirm"
+        onOk={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+        classNames={{
+          header: 'text-purple-700',
+          body: 'italic',
+          footer: 'border-t border-line2 pt-3',
+          closeButton: 'text-purple-500',
+        }}
+      >
+        Header tinted purple, body italic, footer gains a top separator — all via classNames slots.
+      </Modal>
+    </>
+  );
+}
+
+export const CustomStyled: R = {
+  name: 'CustomStyled — classNames slots (antd v5 style)',
+  render: () => <CustomStyledDemo />,
+};
+
+export const DarkTheme: R = {
+  name: 'DarkTheme — panel bg-s2 + mask dark',
+  render: () => <DarkDemo />,
+};

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

@@ -0,0 +1,166 @@
+// Modal tests — portal body, open/close, ESC, overlay click, ok/cancel, confirmLoading
+// (+ focus management batch ⑫: trap Tab, focus-first, trả focus trigger).
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Modal } from './index.js';
+
+afterEach(cleanup);
+
+describe('Modal', () => {
+  it('open=false → không render gì', () => {
+    render(<Modal open={false} title="Xoá task này?" />);
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('open → portal body: role=dialog + title + nội dung', () => {
+    render(
+      <Modal open title="Xoá task này?" danger okText="Xác nhận xoá">
+        Hành động không thể hoàn tác.
+      </Modal>,
+    );
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Xoá task này?')).toBeInTheDocument();
+    expect(screen.getByText('Hành động không thể hoàn tác.')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Xác nhận xoá' }).className).toContain('bg-st-fail');
+  });
+
+  it('nút OK → onOk; Huỷ/overlay/ESC → onCancel', async () => {
+    const onOk = vi.fn();
+    const onCancel = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Modal open title="t" onOk={onOk} onCancel={onCancel} />,
+    );
+    await user.click(screen.getByRole('button', { name: 'OK' }));
+    expect(onOk).toHaveBeenCalledTimes(1);
+    await user.click(screen.getByRole('button', { name: 'Huỷ' }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    await user.click(screen.getByTestId('modal-overlay'));
+    expect(onCancel).toHaveBeenCalledTimes(2);
+    await user.keyboard('{Escape}');
+    expect(onCancel).toHaveBeenCalledTimes(3);
+  });
+
+  it('confirmLoading → nút disable + text Đang xử lý…', () => {
+    render(
+      <Modal open title="t" okText="Xác nhận xoá" confirmLoading />,
+    );
+    const ok = screen.getByRole('button', { name: 'Đang xử lý…' });
+    expect(ok).toBeDisabled();
+  });
+});
+
+describe('Modal — branch phụ (Tier 2)', () => {
+  it('title ReactNode (không string) → VẪN có accessible name qua labelledby', () => {
+    render(
+      <Modal
+        open
+        title={
+          <strong>
+            <span data-testid="node-title">Xoá?</span>
+          </strong>
+        }
+      />,
+    );
+    expect(screen.getByTestId('node-title')).toBeInTheDocument();
+    // a11y sweep 2026-10-18: dialog có name qua aria-labelledby → id title
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAttribute('aria-labelledby');
+    expect(dialog.getAttribute('aria-labelledby')).toBeTruthy();
+  });
+
+  it('không children → chỉ title + actions', () => {
+    render(<Modal open title="Chỉ title" />);
+    expect(screen.getByText('Chỉ title')).toBeInTheDocument();
+  });
+});
+
+describe('Modal — focus management (a11y batch ⑫ worker C)', () => {
+  function FocusHost({ onCancel }: { onCancel: () => void }) {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <button onClick={() => setOpen(true)}>Mở modal</button>
+        <Modal
+          open={open}
+          title="Xoá task?"
+          onCancel={() => { onCancel(); setOpen(false); }}
+        />
+      </>
+    );
+  }
+
+  const openModal = async (onCancel = vi.fn()) => {
+    const user = userEvent.setup();
+    render(<FocusHost onCancel={onCancel} />);
+    await user.click(screen.getByRole('button', { name: 'Mở modal' }));
+    return { user, onCancel };
+  };
+
+  it('mở → focus phần tử focusable đầu (nút Huỷ)', async () => {
+    await openModal();
+    expect(screen.getByRole('button', { name: 'Huỷ' })).toHaveFocus();
+  });
+
+  it('Tab ở nút × Đóng (cuối DOM) → vòng về đầu (Huỷ), KHÔNG thoát dialog', async () => {
+    await openModal();
+    screen.getByRole('button', { name: 'Đóng' }).focus();
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Tab' });
+    expect(screen.getByRole('button', { name: 'Huỷ' })).toHaveFocus();
+  });
+
+  it('nút × Đóng → onCancel', async () => {
+    const { onCancel, user } = await openModal();
+    await user.click(screen.getByRole('button', { name: 'Đóng' }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('classNames slots (SÓNG-3) — merge sau default ở mask/wrapper/header/body/footer/closeButton', () => {
+    render(
+      <Modal
+        open
+        title="Slot"
+        classNames={{
+          mask: 'backdrop-blur-sm',
+          wrapper: 'ring-1',
+          header: 'text-purple-700',
+          body: 'italic',
+          footer: 'border-t border-line2 pt-3',
+          closeButton: 'text-purple-500',
+        }}
+      >
+        nội dung
+      </Modal>,
+    );
+    const mask = screen.getByTestId('modal-overlay');
+    expect(mask).toHaveClass('bg-[var(--mask)]'); // default giữ
+    expect(mask).toHaveClass('backdrop-blur-sm'); // slot thêm
+    const dialog = screen.getByRole('dialog', { name: 'Slot' });
+    expect(dialog).toHaveClass('rounded-xl'); // default giữ
+    expect(dialog).toHaveClass('ring-1'); // slot thêm
+    expect(dialog.querySelector('.text-h2')).toHaveClass('text-purple-700');
+    expect(dialog.querySelector('.text-body')).toHaveClass('italic');
+    expect(dialog.querySelector('.mt-4')).toHaveClass('border-t');
+    expect(screen.getByRole('button', { name: 'Đóng' })).toHaveClass('text-purple-500');
+  });
+
+  it('Shift+Tab ở phần tử đầu → vòng về cuối (nút × Đóng)', async () => {
+    await openModal(); // focus đang ở Huỷ (đầu)
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Tab', shiftKey: true });
+    expect(screen.getByRole('button', { name: 'Đóng' })).toHaveFocus();
+  });
+
+  it('ESC → gọi onCancel', async () => {
+    const { onCancel } = await openModal();
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('đóng → focus TRẢ VỀ trigger (Mở modal)', async () => {
+    const { user } = await openModal();
+    await user.click(screen.getByRole('button', { name: 'Huỷ' }));
+    expect(screen.getByRole('button', { name: 'Mở modal' })).toHaveFocus();
+  });
+});

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

@@ -0,0 +1,142 @@
+// Notification — static API kiểu antd: góc phải-trên, title + description,
+// auto-dismiss 4.5s, đóng ×; container isConnected guard (pattern message).
+// SÓNG-3: classNames slots (wrapper/title/content) — merge sau class mặc định.
+export type NotificationType = 'success' | 'info' | 'warning' | 'error';
+
+/** antd v5-style sub-part slot classes — merge AFTER defaults (consumer appends). */
+export interface NotificationClassNames {
+  /** Toast card root. */
+  wrapper?: string;
+  /** Title line. */
+  title?: string;
+  /** Body area (title + description container). */
+  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 (title/description
+// vẫn textContent — user input không bao giờ parse HTML/XSS).
+// close × — glyph times (icon 'error' của bộ Icon dùng cùng path này)
+const TIMES_PATH =
+  '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';
+
+const STATUS_PATHS: Record<NotificationType, 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: [TIMES_PATH],
+};
+
+/** SVG inline mirror markup bộ Icon (viewBox 24, fill currentColor, aria-hidden). */
+function statusIcon(paths: string[], 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 paths) {
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+
+const COLOR: Record<NotificationType, string> = {
+  success: 'text-st-done',
+  info: 'text-accent',
+  warning: 'text-st-doing',
+  error: 'text-st-fail',
+};
+
+let container: HTMLDivElement | null = null;
+
+function ensureContainer(): HTMLDivElement {
+  if (!container || !container.isConnected) {
+    container = document.createElement('div');
+    container.className = 'pointer-events-none fixed right-4 top-4 z-[var(--z-toast)] flex w-[336px] flex-col gap-3';
+    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: NotificationType, title: string, description?: string, durationMs = 4500, classNames?: NotificationClassNames): void {
+  const root = ensureContainer();
+  const el = document.createElement('div');
+  el.setAttribute('role', 'status');
+  el.className =
+    `pointer-events-auto rounded-xl border border-line bg-s2 p-4 shadow-[var(--shadow-pop)]${slot(classNames?.wrapper)}`;
+  // DOM API + textContent — KHÔNG innerHTML (title/description là input user → XSS surface)
+  const wrap = document.createElement('div');
+  wrap.className = 'flex items-start gap-2';
+  const icon = document.createElement('span');
+  icon.className = `text-label ${COLOR[type]}`;
+  icon.setAttribute('aria-hidden', 'true');
+  icon.append(statusIcon(STATUS_PATHS[type]));
+  const body = document.createElement('div');
+  body.className = `min-w-0 flex-1${slot(classNames?.content)}`;
+  const titleEl = document.createElement('div');
+  titleEl.className = `text-body font-semibold text-ink${slot(classNames?.title)}`;
+  titleEl.textContent = title;
+  body.append(titleEl);
+  if (description) {
+    const descEl = document.createElement('div');
+    descEl.className = 'mt-1 text-label text-ink2';
+    descEl.textContent = description;
+    body.append(descEl);
+  }
+  const closeBtn = document.createElement('button');
+  closeBtn.type = 'button';
+  closeBtn.setAttribute('aria-label', 'Đóng');
+  closeBtn.className =
+    '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';
+  closeBtn.append(statusIcon([TIMES_PATH], 14));
+  wrap.append(icon, body, closeBtn);
+  el.append(wrap);
+  root.appendChild(el);
+  // Motion identity: enter slide-in-right + fade; exit slide-out (nhanh hơn enter ~30%)
+  if (typeof el.animate === 'function') {
+    el.animate(
+      [
+        { opacity: 0, transform: 'translateX(24px)' },
+        { opacity: 1, transform: 'translateX(0)' },
+      ],
+      { duration: 240, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' },
+    );
+  }
+  const remove = () => {
+    if (typeof el.animate === 'function') {
+      const exit = el.animate(
+        [{ opacity: 1, transform: 'translateX(0)' }, { opacity: 0, transform: 'translateX(24px)' }],
+        { duration: 160, easing: 'cubic-bezier(0.4, 0, 1, 1)' },
+      );
+      exit.onfinish = () => el.remove();
+    } else {
+      el.remove();
+    }
+  };
+  closeBtn.addEventListener('click', remove);
+  window.setTimeout(remove, durationMs);
+}
+
+export const notification = {
+  success: (title: string, description?: string, classNames?: NotificationClassNames) => show('success', title, description, 4500, classNames),
+  info: (title: string, description?: string, classNames?: NotificationClassNames) => show('info', title, description, 4500, classNames),
+  warning: (title: string, description?: string, classNames?: NotificationClassNames) => show('warning', title, description, 4500, classNames),
+  error: (title: string, description?: string, classNames?: NotificationClassNames) => show('error', title, description, 4500, classNames),
+};

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

@@ -0,0 +1,155 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// Notification stories — static API demo (parity antd Notification: top-right).
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index';
+import { Icon } from '../icons/index.js';
+import { notification } from './index';
+
+/** Rich toast with title + description — static API, 4.5s. */
+const meta = { title: 'Feedback/Notification', 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={() => notification.success('Sync completed', 'Feed has been updated')}>
+        success
+      </Button>
+      <Button onClick={() => notification.info('A new update is available')}>info</Button>
+      <Button onClick={() => notification.warning('Token expires soon')}>warning</Button>
+      <Button type="primary" danger onClick={() => notification.error('Sync failed', 'node-svc is not responding')}>
+        error
+      </Button>
+    </div>
+  ),
+};
+
+export const NoDescription: Story = {
+  name: 'No description — title only',
+  render: () => (
+    <Button onClick={() => notification.info('Task assigned to alice')}>
+      Send title-only notification
+    </Button>
+  ),
+};
+
+export const CustomStyled: Story = {
+  name: 'CustomStyled — classNames slots (antd v5 style)',
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+      <Button
+        onClick={() =>
+          notification.success('Tinted card', 'Card wrapper slot adds a green tint + ring.', {
+            wrapper: 'ring-1 ring-st-done',
+          })
+        }
+      >
+        wrapper slot
+      </Button>
+      <Button
+        onClick={() =>
+          notification.info('Uppercase title', 'Title slot adds uppercase tracking.', {
+            title: 'uppercase tracking-wide',
+          })
+        }
+      >
+        title slot
+      </Button>
+    </div>
+  ),
+};
+
+export const DarkTheme: Story = {
+  name: 'DarkTheme — panel bg-s2 + dark border-line',
+  render: () => (
+    <div data-bp-theme="dark" className="p-4">
+      <Button type="primary" onClick={() => notification.success('Sync completed', 'Feed has been updated (dark scope)')}>
+        success (dark)
+      </Button>
+    </div>
+  ),
+};
+
+// ── Real-world usage (2026-10-25): notification center panel ──
+
+type CenterNotif = {
+  id: string;
+  title: string;
+  description: string;
+  time: string;
+  unread: boolean;
+  kind: 'success' | 'error' | 'info';
+};
+
+const INITIAL_NOTIFS: CenterNotif[] = [
+  { id: 'n1', title: 'Deploy finished', description: 'web · production — 2m 41s, all checks green.', time: '2m', unread: true, kind: 'success' },
+  { id: 'n2', title: 'Saga assignment failed', description: 'fail@demo.local — task moved to DLQ after 3 retries.', time: '18m', unread: true, kind: 'error' },
+  { id: 'n3', title: 'Weekly digest ready', description: '6 PRs merged, 14 tasks closed this week.', time: '1h', unread: false, kind: 'info' },
+];
+
+const KIND_DOT: Record<CenterNotif['kind'], string> = {
+  success: 'bg-st-done',
+  error: 'bg-st-fail',
+  info: 'bg-accent',
+};
+
+/** NotificationCenter — dropdown/panel pattern: unread dots, relative times, "Mark all
+ * read". The button also fires a REAL `notification.info()` slide-in so the imperative
+ * API and the panel can be compared side by side. */
+export const NotificationCenter: Story = {
+  name: 'Notification center — unread dots, relative time, mark all read',
+  render: () => <NotificationCenterDemo />,
+};
+
+function NotificationCenterDemo() {
+  const [notifs, setNotifs] = useState(INITIAL_NOTIFS);
+  const unread = notifs.filter((n) => n.unread).length;
+
+  return (
+    <div className="flex w-full max-w-md flex-col rounded-xl border border-line bg-s1 shadow-[var(--shadow-pop)]">
+      <div className="flex items-center justify-between border-b border-line px-4 py-3">
+        <span className="flex items-center gap-2 text-body font-semibold text-ink">
+          <Icon name="bell" size={14} />
+          {'Notifications'}
+          {unread > 0 && (
+            <span className="rounded-pill bg-st-fail/10 px-2 py-0.5 text-meta font-medium text-st-fail">
+              {unread} mới
+            </span>
+          )}
+        </span>
+        <button
+          type="button"
+          className="cursor-pointer border-none bg-transparent p-0 text-meta text-accent hover:underline"
+          onClick={() => setNotifs((prev) => prev.map((n) => ({ ...n, unread: false })))}
+        >
+          {'Mark all read'}
+        </button>
+      </div>
+      <ul className="m-0 flex list-none flex-col p-0">
+        {notifs.map((n) => (
+          <li key={n.id} className={`flex items-start gap-3 px-4 py-3${n.unread ? ' bg-s3/60' : ''}`}>
+            <span
+              aria-hidden="true"
+              className={`mt-1.5 inline-block size-2 shrink-0 rounded-pill ${n.unread ? KIND_DOT[n.kind] : 'bg-transparent'}`}
+            />
+            <div className="min-w-0 flex-1">
+              <div className="flex items-baseline justify-between gap-2">
+                <span className="text-body font-medium text-ink">{n.title}</span>
+                <span className="shrink-0 text-meta text-ink3">{n.time}</span>
+              </div>
+              <p className="m-0 mt-0.5 text-meta text-ink2">{n.description}</p>
+            </div>
+          </li>
+        ))}
+      </ul>
+      <div className="border-t border-line px-4 py-3">
+        <Button size="small" onClick={() => notification.info('Backup completed', 'Nightly snapshot stored — 1.2 GB.')}>
+          {'Send test notification'}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+// Notification tests — static API: 4 types, description branch, đóng ×, auto-dismiss,
+// DOM API (textContent — nội dung user input KHÔNG bị parse HTML/XSS).
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { notification } from './index.js';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  vi.useRealTimers();
+});
+
+const lastNote = () => {
+  const notes = document.body.querySelectorAll('[role="status"]');
+  return notes[notes.length - 1];
+};
+
+describe('notification (static)', () => {
+  it('error với title + description → góc phải body', () => {
+    notification.error('Đồng bộ thất bại', 'node-svc không phản hồi');
+    const note = document.body.querySelector('[role="status"]');
+    expect(note?.textContent).toContain('Đồng bộ thất bại');
+    expect(note?.textContent).toContain('node-svc không phản hồi');
+  });
+
+  it('nút Đóng → remove; auto-dismiss 4.5s', () => {
+    vi.useFakeTimers();
+    notification.success('Thành công');
+    const note = document.body.querySelector('[role="status"]')!;
+    (note.querySelector('button') as HTMLButtonElement).click();
+    expect(document.body.querySelector('[role="status"]')).toBeNull();
+    // auto-dismiss branch: tạo lại rồi advance
+    notification.success('Thành công 2');
+    vi.advanceTimersByTime(4600);
+    expect(document.body.querySelector('[role="status"]')).toBeNull();
+  });
+
+  it.each([
+    ['success', 'text-st-done'],
+    ['info', 'text-accent'],
+    ['warning', 'text-st-doing'],
+    ['error', 'text-st-fail'],
+  ] as const)('type %s → icon màu trạng thái + aria-hidden', (type, colorCls) => {
+    notification[type]('t');
+    const icon = lastNote().querySelector('span[aria-hidden]');
+    expect(icon?.className).toContain(colorCls);
+    // style sweep: icon là SVG inline (createElementNS) — textContent rỗng là đúng
+    expect(icon?.querySelector('svg')).not.toBeNull();
+  });
+
+  it('không description → không render div mô tả (branch omitted)', () => {
+    notification.info('Chỉ title');
+    const body = lastNote().querySelector('.min-w-0');
+    expect(body?.children).toHaveLength(1); // chỉ title
+    expect(lastNote().textContent).not.toContain('mt-1');
+  });
+
+  it('nút Đóng: aria-label + focus-visible ring chuẩn', () => {
+    notification.info('t');
+    const btn = lastNote().querySelector('button')!;
+    expect(btn).toHaveAttribute('aria-label', 'Đóng');
+    expect(btn.className).toContain('focus-visible:ring-2');
+  });
+
+  it('XSS: title/description là textContent — không parse HTML', () => {
+    notification.error('<img src=x onerror="window.__pwned=1">', '<script>window.__pwned=2</script>');
+    const note = lastNote();
+    expect(note.querySelector('img')).toBeNull();
+    expect(note.querySelector('script')).toBeNull();
+    expect(note.textContent).toContain('<img src=x onerror="window.__pwned=1">');
+  });
+
+  it('classNames slots (SÓNG-3) — merge sau default ở wrapper/title/content', () => {
+    notification.info('slot title', 'slot desc', { wrapper: 'bg-red-50', title: 'uppercase', content: 'p-2' });
+    const note = lastNote();
+    expect(note).toHaveClass('rounded-xl'); // default giữ
+    expect(note).toHaveClass('bg-red-50'); // slot thêm
+    const titleEl = note.querySelector('.text-body');
+    expect(titleEl).toHaveClass('font-semibold'); // default giữ
+    expect(titleEl).toHaveClass('uppercase'); // slot thêm
+    const content = note.querySelector('.min-w-0');
+    expect(content).toHaveClass('flex-1'); // default giữ
+    expect(content).toHaveClass('p-2'); // slot thêm
+  });
+});