create-wakii-stack 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,456 @@
+// DragDrop — native HTML5 drag&drop primitives, 0 deps (story VU-53 worker W9).
+// Draggable: wrapper draggable=true; đang kéo → opacity-40 + cursor-grabbing
+// (+ draggingClass); payload JSON qua dataTransfer (DRAG_MIME). handle prop giới
+// hạn vùng kéo — dragstart NGOÀI handle bị cancel (chỉ handle mới kéo thật).
+// DropZone: dragover preventDefault + highlight ring accent (state isOver); drop
+// parse payload JSON → onDrop(data, event). accept lọc theo dataTransfer.types —
+// native DnD chỉ cho ĐỌC types lúc dragover (data bị browser khoá tới drop).
+// Keyboard: DragDropProvider đăng ký zones qua context (thứ tự mount ≈ DOM order) —
+// Draggable focusable, Space "nhặt" (aria-pressed), Arrows chạy giữa DropZone
+// siblings, Enter thả vào zone active, Esc hủy. Consumer onKeyDown chạy TRƯỚC
+// default và có thể preventDefault để tự điều khiển (pattern Kanban).
+// Touch (R10, 2026-10-18): native HTML5 DnD không có trên touch → pointer fallback
+// CHỈ khi pointerType=touch (mouse đi nguyên path HTML5, không đổi): pointerdown →
+// ghost clone theo pointer (transform GPU) + elementFromPoint hit-test zone qua
+// marker [data-drop-zone] → pointerup dispatch CustomEvent dnd-pointer-drop, DropZone
+// tự lắng nghe và bắn onDrop(data) (event undefined như keyboard path).
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type DragEvent,
+  type KeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+
+/** MIME payload của kit — DropZone mặc định chỉ accept type này. */
+export const DRAG_MIME = 'application/x-ui-kit-dnd';
+
+// ── Pointer fallback (touch) — engine module-level, 1 drag tại 1 thời điểm ──
+
+/** CustomEvent DropZone lắng nghe để nhận payload từ pointer path. */
+const POINTER_DROP_EVENT = 'dnd-pointer-drop';
+const TOUCH_OVER_ATTR = 'data-dnd-touch-over';
+
+interface PointerDragHooks {
+  /** Gọi ở MỌI kết thúc (drop/ huỷ/ unmount) — composite tắt state dragging. */
+  onEnd(): void;
+}
+
+let activePointerDrag: { cleanup(): void } | null = null;
+
+/** Huỷ drag đang chạy (unmount Draggable giữa chừng) — idempotent. */
+function cancelActivePointerDrag(): void {
+  activePointerDrag?.cleanup();
+}
+
+function zoneOf(el: Element | null): HTMLElement | null {
+  return el?.closest<HTMLElement>('[data-drop-zone]') ?? null;
+}
+
+/** elementFromPoint bọc an toàn — jsdom không implement, trả null (no hit-test). */
+function hitTest(x: number, y: number): Element | null {
+  return typeof document.elementFromPoint === 'function' ? document.elementFromPoint(x, y) : null;
+}
+
+function startPointerDrag(
+  source: HTMLElement,
+  data: unknown,
+  start: PointerEvent,
+  hooks: PointerDragHooks,
+): void {
+  cancelActivePointerDrag(); // an toàn: 1 drag tại 1 thời điểm
+  const rect = source.getBoundingClientRect();
+  // Ghost = clone nguồn, fixed tại chỗ, theo pointer bằng transform (GPU — motion
+  // identity chỉ animate transform), pointer-events-none để elementFromPoint
+  // "xuyên qua" ghost trúng zone thật bên dưới.
+  const ghost = source.cloneNode(true) as HTMLElement;
+  ghost.setAttribute('data-dnd-ghost', '');
+  ghost.setAttribute('aria-hidden', 'true');
+  ghost.style.position = 'fixed';
+  ghost.style.left = `${rect.left}px`;
+  ghost.style.top = `${rect.top}px`;
+  ghost.style.width = `${rect.width}px`;
+  ghost.style.margin = '0';
+  ghost.style.pointerEvents = 'none';
+  ghost.style.zIndex = 'var(--z-tooltip)';
+  ghost.style.opacity = '0.9';
+  document.body.appendChild(ghost);
+  source.style.touchAction = 'none'; // chặn scroll cướp gesture khi đang kéo
+
+  let lastZone: HTMLElement | null = null;
+  const clearOver = () => {
+    lastZone?.removeAttribute(TOUCH_OVER_ATTR);
+    lastZone = null;
+  };
+
+  const onMove = (ev: PointerEvent) => {
+    ghost.style.transform = `translate3d(${ev.clientX - start.clientX}px, ${ev.clientY - start.clientY}px, 0)`;
+    const zone = zoneOf(hitTest(ev.clientX, ev.clientY));
+    if (zone !== lastZone) {
+      clearOver();
+      if (zone) {
+        zone.setAttribute(TOUCH_OVER_ATTR, '');
+        lastZone = zone;
+      }
+    }
+  };
+
+  const finish = (ev: PointerEvent | null, drop: boolean) => {
+    window.removeEventListener('pointermove', onMove);
+    window.removeEventListener('pointerup', onUp);
+    window.removeEventListener('pointercancel', onCancel);
+    clearOver();
+    ghost.remove();
+    source.style.touchAction = '';
+    activePointerDrag = null;
+    hooks.onEnd();
+    if (drop && ev) {
+      // Hit-test LẠI lúc thả (sau khi ghost đã remove — không che target), dispatch
+      // trên zone element; DropZone tự lắng nghe và bắn onDropRef(data).
+      zoneOf(hitTest(ev.clientX, ev.clientY))?.dispatchEvent(
+        new CustomEvent(POINTER_DROP_EVENT, { detail: { data } }),
+      );
+    }
+  };
+  const onUp = (ev: PointerEvent) => finish(ev, true);
+  const onCancel = () => finish(null, false);
+
+  window.addEventListener('pointermove', onMove);
+  window.addEventListener('pointerup', onUp);
+  window.addEventListener('pointercancel', onCancel);
+  activePointerDrag = { cleanup: () => finish(null, false) };
+}
+
+// ── Context — keyboard drag + zone registry (composite layer vd Kanban dùng) ──
+
+interface ZoneRecord {
+  id: string;
+  /** Đọc ref mới mỗi lần drop — onDrop inline đổi identity mỗi render. */
+  onDropRef: RefObject<((data: unknown, event?: DragEvent) => void) | undefined>;
+}
+
+export interface DragDropApi {
+  /** Keyboard drag đang nhặt: payload + dragId của Draggable nguồn. */
+  keyboardDrag: { data: unknown; sourceId: string } | null;
+  /** Zone đang là mục tiêu keyboard (focusZone di con trỏ này). */
+  activeZoneId: string | null;
+  registerZone(zone: ZoneRecord): () => void;
+  beginKeyboardDrag(data: unknown, sourceId: string): void;
+  /** Enter — thả payload vào zone active (fire onDrop không event), kết thúc. */
+  endKeyboardDrag(): void;
+  cancelKeyboardDrag(): void;
+  /** Arrows — zone kế tiếp/trước trong registry (wrap vòng). */
+  focusZone(dir: 1 | -1): void;
+}
+
+const DragDropContext = createContext<DragDropApi | null>(null);
+
+/** Context keyboard của primitives — null nếu không bọc DragDropProvider. */
+// eslint-disable-next-line react-refresh/only-export-components
+export function useDragDrop(): DragDropApi | null {
+  return useContext(DragDropContext);
+}
+
+export function DragDropProvider({ children }: { children: ReactNode }) {
+  const zonesRef = useRef<ZoneRecord[]>([]);
+  const [keyboardDrag, setKeyboardDrag] = useState<{ data: unknown; sourceId: string; zoneIdx: number } | null>(
+    null,
+  );
+
+  const activeZoneId = keyboardDrag ? (zonesRef.current[keyboardDrag.zoneIdx]?.id ?? null) : null;
+
+  const api: DragDropApi = {
+    keyboardDrag,
+    activeZoneId,
+    registerZone(zone) {
+      zonesRef.current.push(zone);
+      return () => {
+        zonesRef.current = zonesRef.current.filter((z) => z !== zone);
+      };
+    },
+    beginKeyboardDrag(data, sourceId) {
+      setKeyboardDrag({ data, sourceId, zoneIdx: 0 });
+    },
+    endKeyboardDrag() {
+      if (!keyboardDrag) return;
+      zonesRef.current[keyboardDrag.zoneIdx]?.onDropRef.current?.(keyboardDrag.data);
+      setKeyboardDrag(null);
+    },
+    cancelKeyboardDrag() {
+      setKeyboardDrag(null);
+    },
+    focusZone(dir) {
+      setKeyboardDrag((kd) => {
+        if (!kd || zonesRef.current.length === 0) return kd;
+        const n = zonesRef.current.length;
+        return { ...kd, zoneIdx: (kd.zoneIdx + dir + n) % n };
+      });
+    },
+  };
+
+  return <DragDropContext.Provider value={api}>{children}</DragDropContext.Provider>;
+}
+
+// ── Draggable ──
+
+export interface DraggableProps {
+  /** Payload — JSON hoá vào dataTransfer, DropZone parse lại thành object. */
+  data: unknown;
+  /** Id ổn định cho keyboard grab (mặc định useId). */
+  dragId?: string;
+  /** Giới hạn vùng kéo: chỉ dragstart TRONG node này được chấp nhận. */
+  handle?: ReactNode;
+  disabled?: boolean;
+  /** Class thêm khi đang kéo (mouse hoặc keyboard grab) — vd motion composite. */
+  draggingClass?: string;
+  /** Bắn sau khi dragstart hợp lệ (composite cần biết card nào đang kéo). */
+  onDragStart?: () => void;
+  /** Bắn ở dragend (kể cả khi drop bị huỷ). */
+  onDragEnd?: () => void;
+  /** Chạy TRƯỚC keyboard default — preventDefault để tự điều khiển. */
+  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
+  /** aria-label cho role=button (không cần nếu content đã có text). */
+  ariaLabel?: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+export function Draggable({
+  data,
+  dragId,
+  handle,
+  disabled = false,
+  draggingClass,
+  onDragStart,
+  onDragEnd,
+  onKeyDown,
+  ariaLabel,
+  className,
+  children,
+}: DraggableProps) {
+  const dnd = useDragDrop();
+  const autoId = useId();
+  const id = dragId ?? autoId;
+  const [mouseDragging, setMouseDragging] = useState(false);
+  const handleRef = useRef<HTMLDivElement>(null);
+
+  // Touch path: unmount giữa chừng → huỷ engine (gỡ listener + ghost).
+  useEffect(() => () => cancelActivePointerDrag(), []);
+
+  function handlePointerDown(e: ReactPointerEvent<HTMLDivElement>) {
+    // CHỈ touch — mouse đi path HTML5 draggable (không đổi behavior hiện tại).
+    if (e.pointerType !== 'touch' || disabled || activePointerDrag) return;
+    // Handle mode áp cho touch: pointerdown ngoài handle → không kéo.
+    if (handle && !handleRef.current?.contains(e.target as Node)) return;
+    e.preventDefault(); // chặn scroll/long-press cướp gesture
+    setMouseDragging(true);
+    onDragStart?.();
+    startPointerDrag(e.currentTarget, data, e.nativeEvent, {
+      onEnd: () => {
+        setMouseDragging(false);
+        onDragEnd?.();
+      },
+    });
+  }
+
+  const grabbed = dnd?.keyboardDrag?.sourceId === id;
+  const dragging = mouseDragging || grabbed;
+
+  function handleDragStart(e: DragEvent<HTMLDivElement>) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    // Handle mode: dragstart ngoài handle → cancel (chỉ handle mới kéo thật).
+    if (handle && !handleRef.current?.contains(e.target as Node)) {
+      e.preventDefault();
+      return;
+    }
+    e.dataTransfer?.setData(DRAG_MIME, JSON.stringify(data));
+    if (e.dataTransfer) e.dataTransfer.effectAllowed = 'copyMove';
+    setMouseDragging(true);
+    onDragStart?.();
+  }
+
+  function handleDragEnd() {
+    setMouseDragging(false);
+    onDragEnd?.();
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
+    onKeyDown?.(e);
+    if (e.defaultPrevented || !dnd || disabled) return;
+    // Spacebar: browser thật = ' ', user-event = 'Space' — nhận cả hai.
+    if (e.key === ' ' || e.key === 'Space') {
+      e.preventDefault();
+      if (grabbed) dnd.cancelKeyboardDrag();
+      else dnd.beginKeyboardDrag(data, id);
+      return;
+    }
+    if (!grabbed) return;
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      dnd.endKeyboardDrag();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      dnd.cancelKeyboardDrag();
+    } else if (e.key.startsWith('Arrow')) {
+      e.preventDefault();
+      dnd.focusZone(e.key === 'ArrowDown' || e.key === 'ArrowRight' ? 1 : -1);
+    }
+  }
+
+  // State kéo (mouse + keyboard grab) chung 1 bộ visual — data-dragging để test.
+  const dragClasses = dragging
+    ? `opacity-40 cursor-grabbing${draggingClass ? ` ${draggingClass}` : ''}`
+    : disabled
+      ? 'cursor-not-allowed'
+      : 'cursor-grab';
+
+  return (
+    <div
+      draggable={!disabled}
+      role="button"
+      aria-pressed={grabbed}
+      aria-label={ariaLabel}
+      data-dragging={dragging ? 'true' : undefined}
+      data-drag-id={dragId}
+      tabIndex={disabled ? undefined : 0}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onPointerDown={handlePointerDown}
+      onKeyDown={handleKeyDown}
+      className={`focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none ${dragClasses}${className ? ` ${className}` : ''}`}
+    >
+      {handle && (
+        <div ref={handleRef} data-drag-handle="">
+          {handle}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+// ── DropZone ──
+
+export interface DropZoneProps {
+  /** Nhận (data, event) khi drop parse được payload DRAG_MIME — event undefined
+   * khi thả bằng keyboard (endKeyboardDrag không có DragEvent thật). */
+  onDrop?: (data: unknown, event?: DragEvent) => void;
+  /** dataTransfer.types phải chứa ÍT NHẤT 1 type này — mặc định [DRAG_MIME]. */
+  accept?: string[];
+  /** Class thay highlight mặc định (ring-accent/40 + bg-accent/10) khi isOver. */
+  activeClass?: string;
+  disabled?: boolean;
+  /** Tên zone (aria-label + role=group) cho ngữ cảnh keyboard/screen-reader. */
+  ariaLabel?: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+export function DropZone({
+  onDrop,
+  accept = [DRAG_MIME],
+  activeClass,
+  disabled = false,
+  ariaLabel,
+  className,
+  children,
+}: DropZoneProps) {
+  const dnd = useDragDrop();
+  const id = useId();
+  const [isOver, setIsOver] = useState(false);
+  const zoneRef = useRef<HTMLDivElement>(null);
+  const onDropRef = useRef(onDrop);
+  useEffect(() => {
+    onDropRef.current = onDrop;
+  });
+
+  // Đăng ký zone cho keyboard (mount order ≈ DOM order — wrap trong provider).
+  useEffect(() => {
+    if (!dnd) return;
+    return dnd.registerZone({ id, onDropRef });
+  }, [dnd, id]);
+
+  // Touch path: engine dispatch CustomEvent trên zone element (hit-test qua marker
+  // data-drop-zone) — không cần context, standalone Draggable/DropZone vẫn hoạt động.
+  useEffect(() => {
+    const el = zoneRef.current;
+    if (!el) return;
+    const onPointerDrop = (ev: Event) => {
+      if (disabled) return;
+      const data = (ev as CustomEvent<{ data: unknown }>).detail?.data;
+      // event undefined như keyboard path — pointer không có DragEvent thật.
+      onDropRef.current?.(data);
+    };
+    el.addEventListener(POINTER_DROP_EVENT, onPointerDrop);
+    return () => el.removeEventListener(POINTER_DROP_EVENT, onPointerDrop);
+  }, [disabled]);
+
+  function accepts(e: DragEvent<HTMLDivElement>) {
+    if (disabled) return false;
+    return Array.from(e.dataTransfer?.types ?? []).some((t) => accept.includes(t));
+  }
+
+  function handleDragEnter(e: DragEvent<HTMLDivElement>) {
+    if (!accepts(e)) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    setIsOver(true);
+  }
+
+  function handleDragOver(e: DragEvent<HTMLDivElement>) {
+    if (!accepts(e)) return;
+    e.preventDefault(); // BẮT BUỘC để browser cho phép drop
+    setIsOver(true);
+  }
+
+  function handleDragLeave(e: DragEvent<HTMLDivElement>) {
+    // Flicker guard: qua lại giữa children không tính là rời zone.
+    if (zoneRef.current?.contains(e.relatedTarget as Node)) return;
+    setIsOver(false);
+  }
+
+  function handleDrop(e: DragEvent<HTMLDivElement>) {
+    e.preventDefault();
+    setIsOver(false);
+    if (disabled) return;
+    const raw = e.dataTransfer?.getData(DRAG_MIME) ?? '';
+    if (!raw) return;
+    try {
+      // stopPropagation — zone con xử lý drop, zone cha (vd cột) không nhân đôi.
+      e.stopPropagation();
+      onDropRef.current?.(JSON.parse(raw) as unknown, e);
+    } catch {
+      /* payload hỏng/không phải JSON → bỏ qua, không bắn callback */
+    }
+  }
+
+  const kbActive = dnd?.activeZoneId === id;
+  const highlight = activeClass ?? 'ring-2 ring-accent/40 bg-accent/10';
+
+  return (
+    <div
+      ref={zoneRef}
+      role={ariaLabel ? 'group' : undefined}
+      aria-label={ariaLabel}
+      data-drop-zone=""
+      data-dnd-over={isOver ? 'true' : undefined}
+      data-dnd-active={kbActive ? 'true' : undefined}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={`${isOver ? highlight : ''} ${kbActive ? 'ring-2 ring-accent/60' : ''} data-[dnd-touch-over]:ring-2 data-[dnd-touch-over]:ring-accent/40 data-[dnd-touch-over]:bg-accent/10${className ? ` ${className}` : ''}`}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,108 @@
+// Drawer stories — open/close, footer.
+// 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 { Drawer } from './index';
+
+/** Side panel for detail/forms — portal, focus trap, scroll lock. */
+const meta = { title: 'Feedback/Drawer', component: Drawer, tags: ['autodocs'] } satisfies Meta<typeof Drawer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+type R = StoryObj;
+
+function Demo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>Open drawer</Button>
+      <Drawer open={open} title="Task detail" onClose={() => setOpen(false)} footer={<Button type="primary" onClick={() => setOpen(false)}>Close</Button>}>
+        Task detail content — all actions live here.
+      </Drawer>
+    </>
+  );
+}
+
+function NoFooterDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open (no footer)</Button>
+      <Drawer open={open} title="Read-only detail" onClose={() => setOpen(false)}>
+        Scrollable body without the footer action row.
+      </Drawer>
+    </>
+  );
+}
+
+function WideDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open 560px drawer</Button>
+      <Drawer open={open} title="Wide drawer" width={560} onClose={() => setOpen(false)}>
+        Wider panel for form-heavy content.
+      </Drawer>
+    </>
+  );
+}
+
+function DarkDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <div data-bp-theme="dark" className="p-4">
+      <Button type="primary" onClick={() => setOpen(true)}>Open drawer (dark)</Button>
+      <Drawer open={open} title="Task detail (dark)" onClose={() => setOpen(false)} footer={<Button type="primary" onClick={() => setOpen(false)}>Close</Button>}>
+        Drawer content inside the dark scope.
+      </Drawer>
+    </div>
+  );
+}
+
+export const Basic: Story = {
+  name: 'Basic — open/close + footer',
+  args: { open: false, title: 'Task detail' },
+  render: () => <Demo />,
+};
+
+export const NoFooter: R = {
+  name: 'No footer — content only',
+  render: () => <NoFooterDemo />,
+};
+
+export const Wide: R = {
+  name: 'Width — custom 560px (default 378)',
+  render: () => <WideDemo />,
+};
+
+function CustomStyledDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>Open custom-styled drawer</Button>
+      <Drawer
+        open={open}
+        title="Custom styled"
+        onClose={() => setOpen(false)}
+        footer={<Button type="primary" onClick={() => setOpen(false)}>Done</Button>}
+        classNames={{
+          header: 'bg-purple-50 text-purple-700',
+          body: 'italic',
+          footer: 'border-t-0',
+        }}
+      >
+        Header tinted purple, body italic, footer without its top border — all via classNames slots.
+      </Drawer>
+    </>
+  );
+}
+
+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/drawer/drawer.test.tsx

@@ -0,0 +1,132 @@
+// Drawer tests — portal, open/close, ESC, mask click, footer
+// (+ 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 { Drawer } from './index.js';
+
+afterEach(cleanup);
+
+describe('Drawer', () => {
+  it('open=false → null; open → portal role=dialog + title', () => {
+    const { baseElement } = render(<Drawer open={false} title="Chi tiết" />);
+    expect(baseElement.querySelector('[role="dialog"]')).toBeNull();
+    render(<Drawer open title="Chi tiết task">Nội dung drawer</Drawer>);
+    expect(screen.getByRole('dialog', { name: 'Chi tiết task' })).toBeInTheDocument();
+    expect(screen.getByText('Nội dung drawer')).toBeInTheDocument();
+  });
+
+  it('ESC + mask click + nút × → onClose', async () => {
+    const onClose = vi.fn();
+    const user = userEvent.setup();
+    render(<Drawer open title="D" onClose={onClose} />);
+    await user.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalledTimes(1);
+    await user.click(screen.getByTestId('drawer-overlay'));
+    expect(onClose).toHaveBeenCalledTimes(2);
+    await user.click(screen.getByRole('button', { name: 'Đóng' }));
+    expect(onClose).toHaveBeenCalledTimes(3);
+  });
+
+  it('footer render khi truyền', () => {
+    render(<Drawer open title="D" footer={<button>Lưu</button>} />);
+    expect(screen.getByRole('button', { name: 'Lưu' })).toBeInTheDocument();
+  });
+});
+
+describe('Drawer — branch phụ', () => {
+  it('width tuỳ ý → style áp lên aside', () => {
+    render(<Drawer open title="Rộng" width={500} />);
+    expect(screen.getByRole('dialog', { name: 'Rộng' }).style.width).toBe('500px');
+  });
+});
+
+describe('Drawer — branch phụ (Tier 5 sweep)', () => {
+  it('không footer prop → không render footer element', () => {
+    render(<Drawer open title="Không footer" />);
+    expect(screen.getByRole('dialog', { name: 'Không footer' })).toBeInTheDocument();
+    // footer element = block cuối có border-t — không truyền footer thì không có
+    expect(document.querySelector('.border-t.border-line2.p-4')).toBeNull();
+  });
+});
+
+describe('Drawer — focus management (a11y batch ⑫ worker C)', () => {
+  function DrawerHost({ onClose }: { onClose: () => void }) {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <button onClick={() => setOpen(true)}>Mở drawer</button>
+        <Drawer
+          open={open}
+          title="Chi tiết"
+          onClose={() => { onClose(); setOpen(false); }}
+          footer={<button onClick={() => setOpen(false)}>Lưu</button>}
+        >
+          Nội dung drawer
+        </Drawer>
+      </>
+    );
+  }
+
+  const openDrawer = async (onClose = vi.fn()) => {
+    const user = userEvent.setup();
+    render(<DrawerHost onClose={onClose} />);
+    await user.click(screen.getByRole('button', { name: 'Mở drawer' }));
+    return { user, onClose };
+  };
+
+  it('mở → focus phần tử focusable đầu (nút × Đóng)', async () => {
+    await openDrawer();
+    expect(screen.getByRole('button', { name: 'Đóng' })).toHaveFocus();
+  });
+
+  it('Tab ở phần tử cuối (Lưu) → vòng về đầu, KHÔNG thoát ra ngoài panel', async () => {
+    await openDrawer();
+    screen.getByRole('button', { name: 'Lưu' }).focus();
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Tab' });
+    expect(screen.getByRole('button', { name: 'Đóng' })).toHaveFocus();
+  });
+
+  it('Shift+Tab ở phần tử đầu → vòng về cuối', async () => {
+    await openDrawer(); // focus đang ở Đóng (đầu)
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Tab', shiftKey: true });
+    expect(screen.getByRole('button', { name: 'Lưu' })).toHaveFocus();
+  });
+
+  it('ESC → gọi onClose', async () => {
+    const { onClose } = await openDrawer();
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('đóng → focus TRẢ VỀ trigger (Mở drawer)', async () => {
+    const { user } = await openDrawer();
+    await user.click(screen.getByRole('button', { name: 'Đóng' }));
+    expect(screen.getByRole('button', { name: 'Mở drawer' })).toHaveFocus();
+  });
+});
+
+describe('Drawer — classNames slots (SÓNG-3)', () => {
+  it('slots merge sau default ở đúng element (mask/wrapper/header/body/footer)', () => {
+    render(
+      <Drawer
+        open
+        title="Slot"
+        footer={<button>Lưu</button>}
+        classNames={{ mask: 'backdrop-blur-sm', wrapper: 'ring-1', header: 'bg-s3', body: 'italic', footer: 'border-t-0' }}
+      >
+        nội dung
+      </Drawer>,
+    );
+    const mask = screen.getByTestId('drawer-overlay');
+    expect(mask).toHaveClass('bg-[var(--mask)]'); // default giữ
+    expect(mask).toHaveClass('backdrop-blur-sm'); // slot thêm
+    const panel = screen.getByRole('dialog', { name: 'Slot' });
+    expect(panel).toHaveClass('bg-s2');
+    expect(panel).toHaveClass('ring-1');
+    expect(panel.querySelector('header')).toHaveClass('bg-s3');
+    expect(panel.querySelector('.flex-1')).toHaveClass('italic');
+    expect(panel.querySelector('footer')).toHaveClass('border-t-0');
+  });
+});