create-wakii-stack 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,194 @@
+// List stories — Data Display. antd List parity (renderItem/divider/bordered/
+// pagination/loading skeleton/empty→EmptyState) + NotificationInbox (rich media).
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar } from '../avatar/index';
+import { Icon, type IconName } from '../icons/index';
+import { Tag } from '../tag/index';
+import { List } from './index';
+
+function photo(seed: string, w: number, h: number) {
+  return `https://picsum.photos/seed/${seed}/${w}/${h}`;
+}
+
+interface TaskItem {
+  id: string;
+  title: string;
+  status: string;
+}
+
+const TASKS: TaskItem[] = [
+  { id: 't1', title: 'Design tasks API contract', status: 'Done' },
+  { id: 't2', title: 'Scaffold node-svc', status: 'Done' },
+  { id: 't3', title: 'Outbox pattern for task-events', status: 'Doing' },
+  { id: 't4', title: 'Saga compensation on assign', status: 'Doing' },
+  { id: 't5', title: 'e2e smoke — 15 steps', status: 'Todo' },
+  { id: 't6', title: 'Saga demo fail@demo.local', status: 'Todo' },
+];
+
+function renderTask(task: TaskItem) {
+  return (
+    <span className="flex items-center justify-between gap-3">
+      <span className="text-body text-ink">{task.title}</span>
+      <span className="text-meta text-ink3">{task.status}</span>
+    </span>
+  );
+}
+
+/** Repeating rows from data — renderItem, pagination, loading skeleton. */
+const meta = {
+  title: 'Data Display/List',
+  component: List,
+  tags: ['autodocs'],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Basic: Story = {
+  name: 'Basic — divider + header/footer',
+  render: () => (
+    <div className="w-96">
+      <List
+        items={TASKS}
+        renderItem={renderTask}
+        rowKey={(t) => t.id}
+        header="My work"
+        footer={`${TASKS.length} tasks total`}
+      />
+    </div>
+  ),
+};
+
+export const LoadingEmpty: Story = {
+  name: 'Loading skeleton + Empty',
+  render: () => (
+    <div className="flex w-96 flex-col gap-6">
+      <div>
+        <p className="mb-2 text-label text-ink3">Loading</p>
+        <List items={TASKS} renderItem={renderTask} loading />
+      </div>
+      <div>
+        <p className="mb-2 text-label text-ink3">Empty</p>
+        <List items={[]} renderItem={renderTask} emptyText="No tasks yet" bordered />
+      </div>
+    </div>
+  ),
+};
+
+export const Pagination: Story = {
+  name: 'Bordered + pagination',
+  render: () => (
+    <div className="w-96">
+      <List
+        items={TASKS}
+        renderItem={renderTask}
+        rowKey={(t) => t.id}
+        pagination={{ pageSize: 4 }}
+        bordered
+      />
+    </div>
+  ),
+};
+
+export const RichContent: Story = {
+  name: 'Rich content — row as complex node (avatar + tag)',
+  render: () => (
+    <div className="w-96">
+      <List
+        items={TASKS}
+        rowKey={(t) => t.id}
+        header="Assignments"
+        footer={`${TASKS.length} tasks total`}
+        renderItem={(task) => (
+          <span className="flex items-center justify-between gap-3">
+            <span className="flex items-center gap-2">
+              <span className="grid size-6 place-items-center rounded-pill bg-accent/10 text-meta font-semibold text-accent">
+                {task.title.charAt(0)}
+              </span>
+              <span className="text-body text-ink">{task.title}</span>
+            </span>
+            <span className="text-meta text-ink3">{task.status}</span>
+          </span>
+        )}
+      />
+    </div>
+  ),
+};
+
+export const DarkTheme: Story = {
+  name: 'Dark theme',
+  render: () => (
+    <div data-bp-theme="dark" className="w-96 rounded-xl bg-canvas p-4">
+      <List
+        items={TASKS}
+        renderItem={renderTask}
+        rowKey={(t) => t.id}
+        header="My work"
+        footer={`${TASKS.length} tasks total`}
+      />
+    </div>
+  ),
+};
+
+// ── Rich media 2026-10-25 — notification inbox như mọi app: icon/ảnh trái,
+// title + snippet 1 dòng, time phải, Tag "Unread" cho hàng chưa đọc.
+
+interface InboxNotification {
+  id: string;
+  /** Ảnh đại diện người gửi (photo seed) — có mặt = notification từ người. */
+  who?: string;
+  /** Icon hệ thống — dùng khi KHÔNG có `who` (deploy bot / cảnh báo). */
+  systemIcon?: IconName;
+  title: string;
+  snippet: string;
+  time: string;
+  unread: boolean;
+}
+
+const INBOX: InboxNotification[] = [
+  { id: 'n1', title: 'Alice mentioned you', snippet: '@you can you review the checkout fix before Friday?', time: '5m', unread: true, who: 'alice-avatar' },
+  { id: 'n2', title: 'Bob assigned you “Payment webhook”', snippet: 'Due Monday — blocks the release train.', time: '32m', unread: true, who: 'bob-avatar' },
+  { id: 'n3', systemIcon: 'check-circle', title: 'Deploy web@1.4.2 succeeded', snippet: 'All 15 smoke checks green in 4m 12s.', time: '1h', unread: true },
+  { id: 'n4', title: 'Carol commented on API contract', snippet: 'Suggests renaming assigneeId → assignee — see thread.', time: '3h', unread: false, who: 'carol-avatar' },
+  { id: 'n5', systemIcon: 'exclamation-triangle', title: 'Saga retry limit reached', snippet: 'assignment_failed for fail@demo.local — moved to DLQ.', time: '1d', unread: false },
+  { id: 'n6', title: 'Dave closed “Safari login bug”', snippet: 'Fixed in 1.4.1 — token refresh on the right branch.', time: '2d', unread: false, who: 'dave-avatar' },
+];
+
+export const NotificationInbox: Story = {
+  name: 'Notification inbox — avatars, snippets, unread tags',
+  render: () => (
+    <div className="w-96">
+      <List
+        bordered
+        footer={`${INBOX.filter((n) => n.unread).length} unread of ${INBOX.length}`}
+        header="Inbox"
+        items={INBOX}
+        renderItem={(n) => (
+          <span className="flex items-start gap-3">
+            {n.who ? (
+              <Avatar alt={n.title} size={32} src={photo(n.who, 64, 64)} />
+            ) : (
+              <span
+                aria-hidden="true"
+                className="grid size-8 shrink-0 place-items-center rounded-pill bg-accent/10 text-accent"
+              >
+                <Icon name={n.systemIcon ?? 'bell'} size={14} />
+              </span>
+            )}
+            <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span className="flex items-center gap-2">
+                <span className={`truncate text-body ${n.unread ? 'font-semibold text-ink' : 'text-ink2'}`}>
+                  {n.title}
+                </span>
+                {n.unread && <Tag>Unread</Tag>}
+              </span>
+              <span className="truncate text-label text-ink3">{n.snippet}</span>
+            </span>
+            <span className="shrink-0 pt-0.5 text-meta text-ink3">{n.time}</span>
+          </span>
+        )}
+        rowKey={(n) => n.id}
+      />
+    </div>
+  ),
+};

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

@@ -0,0 +1,164 @@
+// List tests — renderItem/loading skeleton/empty/pagination đổi trang/header-footer/bordered.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it } from 'vitest';
+import { List } from './index.js';
+
+const ITEMS = [
+  'Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta',
+  'Eta', 'Theta', 'Iota', 'Kappa', 'Lambda', 'Mu',
+];
+
+afterEach(cleanup);
+
+describe('List', () => {
+  it('renderItem → role=list + listitem, đủ items đúng thứ tự', () => {
+    render(<List items={['A', 'B', 'C']} renderItem={(item) => <span>{item}</span>} />);
+    expect(screen.getByRole('list')).toBeInTheDocument();
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    const texts = screen.getAllByRole('listitem').map((li) => li.textContent);
+    expect(texts).toEqual(['A', 'B', 'C']);
+  });
+
+  it('loading → Skeleton thay items (aria-busy, role=status)', () => {
+    render(<List items={['A']} renderItem={(item) => <span>{item}</span>} loading />);
+    expect(screen.queryByRole('listitem')).toBeNull();
+    expect(screen.getByRole('status')).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('items rỗng → emptyText qua EmptyState', () => {
+    render(<List items={[]} renderItem={() => null} emptyText="Chưa có việc nào" />);
+    expect(screen.getByText('Chưa có việc nào')).toBeInTheDocument();
+    expect(screen.queryByRole('list')).toBeNull();
+  });
+
+  it('items rỗng không emptyText → mặc định "Không có dữ liệu"', () => {
+    render(<List items={[]} renderItem={() => null} />);
+    expect(screen.getByText('Không có dữ liệu')).toBeInTheDocument();
+  });
+
+  it('pagination: 12 items × pageSize 5 → 5/5/2 qua đổi trang', async () => {
+    const user = userEvent.setup();
+    render(<List items={ITEMS} renderItem={(item) => <span>{item}</span>} pagination={{ pageSize: 5 }} />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(5);
+    await user.click(screen.getByRole('button', { name: 'Trang 2' }));
+    expect(screen.getAllByRole('listitem')).toHaveLength(5);
+    expect(screen.getByText('Kappa')).toBeInTheDocument(); // item thứ 10 — cuối trang 2
+    await user.click(screen.getByRole('button', { name: 'Trang 3' }));
+    expect(screen.getAllByRole('listitem')).toHaveLength(2);
+  });
+
+  it('pagination=false → tất cả items, không nav phân trang', () => {
+    render(<List items={ITEMS} renderItem={(item) => <span>{item}</span>} />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(12);
+    expect(screen.queryByRole('navigation')).toBeNull();
+  });
+
+  it('renderItem nhận absolute index khi phân trang (trang 2 bắt đầu 5)', async () => {
+    const user = userEvent.setup();
+    render(
+      <List
+        items={ITEMS}
+        renderItem={(item, index) => <span>{`${index}:${item}`}</span>}
+        pagination={{ pageSize: 5 }}
+      />,
+    );
+    expect(screen.getByText('0:Alpha')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Trang 2' }));
+    expect(screen.getByText('5:Zeta')).toBeInTheDocument();
+    expect(screen.queryByText('0:Alpha')).toBeNull();
+  });
+
+  it('header + footer render đúng vị trí', () => {
+    render(
+      <List
+        items={['A']}
+        renderItem={(item) => <span>{item}</span>}
+        header="Việc của tôi"
+        footer="Tổng 1 việc"
+      />,
+    );
+    expect(screen.getByText('Việc của tôi')).toBeInTheDocument();
+    expect(screen.getByText('Tổng 1 việc')).toBeInTheDocument();
+  });
+
+  it('bordered → container có viền', () => {
+    const { container } = render(
+      <List items={['A']} renderItem={(item) => <span>{item}</span>} bordered />,
+    );
+    expect(container.firstElementChild).toHaveClass('border');
+  });
+
+  it('rowKey làm key React (không crash khi data đổi thứ tự)', () => {
+    const { rerender } = render(
+      <List
+        items={[{ id: 'x', t: 'X' }, { id: 'y', t: 'Y' }]}
+        renderItem={(i) => <span>{i.t}</span>}
+        rowKey={(i) => i.id}
+      />,
+    );
+    rerender(
+      <List
+        items={[{ id: 'y', t: 'Y' }, { id: 'x', t: 'X' }]}
+        renderItem={(i) => <span>{i.t}</span>}
+        rowKey={(i) => i.id}
+      />,
+    );
+    const texts = screen.getAllByRole('listitem').map((li) => li.textContent);
+    expect(texts).toEqual(['Y', 'X']);
+  });
+});
+
+describe('List — virtual (VirtualScroll integration)', () => {
+  const MANY = Array.from({ length: 500 }, (_, i) => i);
+
+  it('virtual=true → chỉ mount window+buffer (15 rows với height 240/itemSize 48), không render 500', () => {
+    render(
+      <List
+        items={MANY}
+        renderItem={(i) => <span>Item {i}</span>}
+        virtual
+        virtualItemSize={48}
+        virtualHeight={240}
+      />,
+    );
+    expect(screen.getAllByRole('listitem')).toHaveLength(15); // ceil(240/48) + 2*5
+    expect(screen.getByText('Item 0')).toBeInTheDocument();
+    expect(screen.queryByText('Item 400')).toBeNull();
+  });
+
+  it('virtual ưu tiên pagination: 500 items + pageSize 10 vẫn window theo full list', () => {
+    render(
+      <List
+        items={MANY}
+        renderItem={(i) => <span>Item {i}</span>}
+        virtual
+        virtualItemSize={48}
+        virtualHeight={240}
+        pagination={{ pageSize: 10 }}
+      />,
+    );
+    expect(screen.getAllByRole('listitem')).toHaveLength(15);
+    expect(screen.queryByRole('navigation')).toBeNull(); // Pagination không render
+  });
+
+  it('virtual + rowKey → key theo data (scroll window không mất định danh)', () => {
+    render(
+      <List
+        items={['a', 'b', 'c']}
+        renderItem={(item) => <span>{item}</span>}
+        virtual
+        virtualItemSize={48}
+        virtualHeight={96}
+        rowKey={(item) => `k-${item}`}
+      />,
+    );
+    expect(screen.getByText('a')).toBeInTheDocument();
+    expect(screen.getByText('b')).toBeInTheDocument();
+  });
+
+  it('virtual + items rỗng → vẫn EmptyState như thường', () => {
+    render(<List items={[]} renderItem={() => null} virtual emptyText="Trống" />);
+    expect(screen.getByText('Trống')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,27 @@
+// Listbox — inline list (không dropdown — Select không popup).
+import type { ReactNode } from 'react';
+
+export interface ListboxOption { label: ReactNode; value: string; disabled?: boolean }
+
+export interface ListboxProps {
+  options: ListboxOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+}
+
+export function Listbox({ options, value, onChange, className }: ListboxProps) {
+  return (
+    <ul role="listbox" aria-label="Danh sách lựa chọn" className={`m-0 list-none overflow-hidden rounded-xl border border-line bg-s2 [background-image:var(--wash)] shadow-[var(--ele-1)] p-1${className ? ` ${className}` : ''}`}>
+      {options.map((option) => (
+        <li key={option.value} role="option" aria-selected={value === option.value}
+          onClick={() => !option.disabled && onChange?.(option.value)}
+          className={`flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-body transition-colors ${
+            value === option.value ? 'bg-accent/10 font-semibold text-accent' : 'text-ink hover:bg-s3'
+          } ${option.disabled ? 'cursor-not-allowed text-ink3' : ''}`}>
+          {option.label}
+        </li>
+      ))}
+    </ul>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Listbox } from './index';
+const meta = { title: 'Data Display/Listbox', component: Listbox, tags: ['autodocs'] } satisfies Meta<typeof Listbox>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+const PEOPLE = [
+  { label: 'Alice Nguyen', value: 'alice' },
+  { label: 'Binh Tran', value: 'binh' },
+  { label: 'Chi Le', value: 'chi' },
+];
+
+/** Basic — inline list, preselected value. */
+export const MacDinh: S = {
+  name: 'Basic — selected row',
+  args: { options: PEOPLE, value: 'alice' },
+};
+
+/** DisabledOption — one row locked (aria-disabled, not clickable). */
+export const DisabledOption: S = {
+  name: 'Disabled option — one locked row',
+  args: {
+    options: [
+      { label: 'Alice Nguyen', value: 'alice' },
+      { label: 'Binh Tran (on leave)', value: 'binh', disabled: true },
+      { label: 'Chi Le', value: 'chi' },
+    ],
+    value: 'alice',
+  },
+};
+
+/** Controlled — click a row → value shown below. */
+export const Controlled: S = {
+  args: { options: PEOPLE },
+  render: () => <ListboxControlledDemo />,
+};
+
+/** DarkTheme — list on dark canvas. */
+export const DarkTheme: S = {
+  args: { options: PEOPLE },
+  render: () => (
+    <div data-bp-theme="dark" className="w-64 rounded-xl bg-canvas p-4">
+      <Listbox options={PEOPLE} value="binh" />
+    </div>
+  ),
+};
+
+function ListboxControlledDemo() {
+  const [v, setV] = useState('alice');
+  return (
+    <div className="grid max-w-[260px] gap-2">
+      <Listbox options={PEOPLE} value={v} onChange={setV} />
+      <p className="m-0 font-mono text-meta text-ink3">value: <strong className="text-ink">{v}</strong></p>
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Listbox } from './index.js';
+afterEach(cleanup);
+
+const OPTIONS = [
+  { label: 'Option A', value: 'a' },
+  { label: 'Option B', value: 'b', disabled: true },
+];
+
+describe('Listbox', () => {
+  it('role=listbox + options; click → onChange; disabled → không', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Listbox options={OPTIONS} value="a" onChange={onChange} />);
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    expect(screen.getByText('Option A')).toHaveClass('font-semibold');
+    await user.click(screen.getByText('Option B'));
+    expect(onChange).not.toHaveBeenCalled();
+    await user.click(screen.getByText('Option A'));
+    expect(onChange).toHaveBeenCalledWith('a');
+  });
+});
+
+// ── Coverage audit additions ─────────────────────────────────────────────────────
+describe('Listbox — coverage audit', () => {
+  it('aria-selected trên option; chọn option khác → onChange', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Listbox options={OPTIONS} value="a" onChange={onChange} />);
+    expect(screen.getByRole('option', { name: 'Option A' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('option', { name: 'Option B' })).toHaveAttribute('aria-selected', 'false');
+    await user.click(screen.getByText('Option A'));
+    expect(onChange).toHaveBeenCalledWith('a');
+  });
+
+  it('disabled option → style khoá (cursor-not-allowed) + không chọn được (kể cả click nhiều lần)', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Listbox options={OPTIONS} value="a" onChange={onChange} />);
+    const disabled = screen.getByRole('option', { name: 'Option B' });
+    // NOTE: component chưa render aria-disabled (a11y gap — chỉ signal bằng style)
+    expect(disabled.className).toContain('cursor-not-allowed');
+    await user.click(disabled);
+    await user.click(disabled);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,142 @@
+// MegaMenu — horizontal bar + panel dropdown multi-column (PrimeReact MegaMenu
+// kiểu). Item root: { key, label, icon?, children } — children là các GROUP
+// (2 cấp: group = 1 cột trong panel → leaf items); root không children = item lá
+// (onClick trực tiếp). Mở: hover HOẶC click; đóng: mouseLeave / ESC (trả focus
+// về trigger) / click ngoài / click leaf. Panel = CSS grid nhiều cột (grid-
+// template-columns inline theo số group — không cần đo đạc). A11y: panel
+// role=menu + leaf role=menuitem, trigger aria-haspopup + aria-expanded; leaf
+// danger = đỏ; icon qua bộ Icon (KHÔNG tự vẽ glyph).
+import { useEffect, useState, type ReactNode } from 'react';
+import { useClickAway } from '../../hooks/useClickAway.js';
+
+export interface MegaMenuLeaf {
+  key: string;
+  label: string;
+  icon?: ReactNode;
+  danger?: boolean;
+  onClick?: () => void;
+}
+
+/** 1 cột trong panel — group label + các leaf item. */
+export interface MegaMenuGroup {
+  key: string;
+  label: string;
+  items: MegaMenuLeaf[];
+}
+
+export interface MegaMenuItem {
+  key: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** Các group — mỗi group render 1 cột trong panel dropdown. */
+  children?: MegaMenuGroup[];
+  onClick?: () => void;
+}
+
+export interface MegaMenuProps {
+  items: MegaMenuItem[];
+  className?: string;
+}
+
+export function MegaMenu({ items, className }: MegaMenuProps) {
+  const [openKey, setOpenKey] = useState<string | null>(null);
+  // useClickAway trả ref gắn lên nav — vừa dò click ngoài vừa làm root dò trigger.
+  const rootRef = useClickAway<HTMLElement>(() => setOpenKey(null));
+
+  // ESC đóng + trả focus về trigger đang mở; click ngoài đóng.
+  useEffect(() => {
+    if (!openKey) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setOpenKey(null);
+        rootRef.current
+          ?.querySelector<HTMLButtonElement>(`button[data-mega-trigger="${openKey}"]`)
+          ?.focus();
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [openKey, rootRef]);
+
+  return (
+    <nav
+      ref={rootRef}
+      className={`flex items-center gap-1 border-b border-line bg-s1 px-4 py-1.5${className ? ` ${className}` : ''}`}
+    >
+      {items.map((item) => {
+        const open = openKey === item.key;
+        return (
+          <div
+            key={item.key}
+            className="relative"
+            onMouseEnter={() => item.children && setOpenKey(item.key)}
+            onMouseLeave={(e) => {
+              // Guard relatedTarget: qua lại trigger↔panel (DOM con của wrapper)
+              // không tính là rời menu — chỉ đóng khi target mới là Node NGOÀI
+              // wrapper (relatedTarget null/khác Node = rời hẳn cửa sổ → đóng).
+              const rt = e.relatedTarget;
+              if (item.children && !(rt instanceof Node && e.currentTarget.contains(rt))) setOpenKey(null);
+            }}
+          >
+            <button
+              type="button"
+              data-mega-trigger={item.key}
+              aria-haspopup={item.children ? 'menu' : undefined}
+              aria-expanded={item.children ? open : undefined}
+              onClick={() => {
+                if (!item.children) {
+                  item.onClick?.();
+                  return;
+                }
+                // Click CHỈ MỞ (hover trên desktop đã mở sẵn — toggle tại đây sẽ
+                // đóng ngay do chuỗi hover→click của cùng cú click). Đóng nhường
+                // mouseLeave / ESC / click-ngoài / click leaf.
+                setOpenKey(item.key);
+              }}
+              className={`cursor-pointer rounded-lg border-none bg-transparent px-3 py-1.5 text-body transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${
+                open ? 'text-accent' : 'text-ink hover:text-accent'
+              }`}
+            >
+              {item.icon}
+              {item.label}
+            </button>
+            {open && item.children && (
+              <div
+                role="menu"
+                aria-label={typeof item.label === 'string' ? item.label : undefined}
+                className="absolute left-0 top-full z-[var(--z-dropdown)] m-0 grid origin-top-left gap-6 rounded-xl border border-line bg-s2 p-4 shadow-[var(--shadow-pop)] animate-[bp-zoom-in_var(--motion-fast)_var(--ease-enter)]"
+                style={{ gridTemplateColumns: `repeat(${item.children.length}, minmax(10rem, 1fr))` }}
+              >
+                {item.children.map((group) => (
+                  <div key={group.key} className="min-w-0">
+                    <div className="mb-1 text-label font-semibold text-ink3">{group.label}</div>
+                    <ul className="m-0 list-none p-0">
+                      {group.items.map((leaf) => (
+                        <li key={leaf.key}>
+                          <button
+                            type="button"
+                            role="menuitem"
+                            onClick={() => {
+                              leaf.onClick?.();
+                              setOpenKey(null);
+                            }}
+                            className={`flex w-full cursor-pointer items-center gap-2 rounded-lg border-none bg-transparent px-2 py-1.5 text-left text-body transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 hover:bg-s3 ${
+                              leaf.danger ? 'text-st-fail' : 'text-ink'
+                            }`}
+                          >
+                            {leaf.icon}
+                            {leaf.label}
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </nav>
+  );
+}