create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,158 @@
+// Layout stories — antd-style shell: Sider (compose Sidebar collapsible) +
+// Header sticky + Content + Footer. Demo data từ components cùng kit.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar } from '../avatar/index';
+import { Card } from '../card/index';
+import { Icon } from '../icons/index.js';
+import { Menu, type MenuItemData } from '../menu/index';
+import { Sidebar } from '../sidebar/index';
+import { Statistic } from '../statistic/index';
+import { Layout } from './index';
+
+const meta = { title: 'Navigation/Layout', component: Layout, tags: ['autodocs'] } satisfies Meta<typeof Layout>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+const NAV: MenuItemData[] = [
+  { key: 'home', label: 'Home', icon: <Icon name="home" size={14} /> },
+  {
+    key: 'manage',
+    label: 'Manage',
+    icon: <Icon name="folder" size={14} />,
+    children: [
+      { key: 'tasks', label: 'Tasks', icon: <Icon name="file" size={14} /> },
+      { key: 'accounts', label: 'Accounts', icon: <Icon name="file" size={14} /> },
+    ],
+  },
+  { key: 'reports', label: 'Reports', icon: <Icon name="file" size={14} /> },
+];
+
+const BRAND = (
+  <span className="flex items-center gap-2">
+    <span aria-hidden="true" className="size-7 shrink-0 rounded-lg bg-accent" />
+    <span className="truncate text-body font-semibold text-ink">Wakii Admin</span>
+  </span>
+);
+
+const USER_CHIP = (
+  <span className="flex items-center gap-2">
+    <Avatar size={24}>A</Avatar>
+    <span className="truncate text-meta text-ink2">alice@demo.local</span>
+  </span>
+);
+
+const STATS = [
+  { title: 'Người dùng', value: '1.284', delta: '+12%', icon: 'users' as const },
+  { title: 'Tasks mở', value: '316', delta: '+5%', icon: 'check-circle' as const },
+  { title: 'Đang làm', value: '48', delta: 'tuần này', icon: 'clock' as const },
+  { title: 'Gán thất bại', value: '2', delta: 'DLQ', icon: 'exclamation-triangle' as const },
+];
+
+const RECENT = [
+  'Task #101 — Migration design tokens',
+  'Task #102 — Gateway CORS whitelist',
+  'Task #103 — Outbox publisher retry',
+  'Task #104 — Saga compensation test',
+  'Task #105 — DLQ alert threshold',
+  'Task #106 — Storybook dark theme docs',
+];
+
+/** AppShellDashboard — full shell: collapsible Sider + sticky Header + stat cards + Footer. */
+export const AppShellDashboard: S = {
+  render: () => <AppShellDemo />,
+};
+
+/** WithSiderCollapsed — same shell collapsed: Sider mirrors Sidebar at 80px icon-only. */
+export const WithSiderCollapsed: S = {
+  render: () => <AppShellDemo initialCollapsed />,
+};
+
+/** StickyHeader — no Sider; header stays pinned while long content scrolls. */
+export const StickyHeader: S = {
+  render: () => (
+    <Layout className="min-h-screen">
+      <Layout.Header sticky>
+        <span className="text-h2 font-semibold text-ink">Sticky header</span>
+        <span className="ml-auto text-meta text-ink3">cuộn để thấy bám đỉnh</span>
+      </Layout.Header>
+      <Layout.Content>
+        <div className="flex flex-col gap-3 p-6">
+          {Array.from({ length: 40 }, (_, i) => (
+            <p key={i} className="m-0 text-body text-ink2">
+              Dòng nội dung {i + 1} — banner giữ nguyên vị trí khi cuộn trang.
+            </p>
+          ))}
+        </div>
+      </Layout.Content>
+      <Layout.Footer>© 2026 Wakii</Layout.Footer>
+    </Layout>
+  ),
+};
+
+/** Minimal — smallest shell: Header + Content + Footer, no Sider. */
+export const Minimal: S = {
+  render: () => (
+    <Layout className="min-h-80">
+      <Layout.Header>
+        <span className="text-h2 font-semibold text-ink">Minimal</span>
+      </Layout.Header>
+      <Layout.Content>
+        <p className="m-0 p-6 text-body text-ink2">Header + Content + Footer — zone chuẩn, padding do consumer.</p>
+      </Layout.Content>
+      <Layout.Footer>© 2026 Wakii</Layout.Footer>
+    </Layout>
+  ),
+};
+
+function AppShellDemo({ initialCollapsed = false }: { initialCollapsed?: boolean }) {
+  // Sidebar tự giữ collapse (trigger pill mép phải 200↔80); Sider mirror qua
+  // collapsed để zone row co theo — numbers 200/80 khớp default hai bên.
+  const [collapsed, setCollapsed] = useState(initialCollapsed);
+  return (
+    <Layout hasSider className="min-h-screen">
+      <Layout.Sider collapsed={collapsed}>
+        <Sidebar brand={BRAND} footer={USER_CHIP} defaultCollapsed={initialCollapsed} onToggle={setCollapsed}>
+          <Menu items={NAV} selectedKey="home" />
+        </Sidebar>
+      </Layout.Sider>
+      <Layout>
+        <Layout.Header sticky>
+          <span className="text-h2 font-semibold text-ink">Dashboard</span>
+          <span className="ml-auto flex items-center gap-3">
+            <Icon name="bell" size={16} className="text-ink2" />
+            <Avatar size={28}>A</Avatar>
+          </span>
+        </Layout.Header>
+        <Layout.Content>
+          <div className="grid gap-4 p-6 sm:grid-cols-2 xl:grid-cols-4">
+            {STATS.map((s) => (
+              <Card key={s.title}>
+                <div className="flex items-center gap-3">
+                  <span aria-hidden="true" className="grid size-10 shrink-0 place-items-center rounded-lg bg-accent/10 text-accent">
+                    <Icon name={s.icon} size={18} />
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <Statistic title={s.title} value={s.value} suffix={s.delta} />
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+          <div className="px-6 pb-6">
+            <Card title="Recent tasks">
+              <ul className="m-0 flex list-none flex-col gap-2 p-0">
+                {RECENT.map((t) => (
+                  <li key={t} className="text-body text-ink2">
+                    {t}
+                  </li>
+                ))}
+              </ul>
+            </Card>
+          </div>
+        </Layout.Content>
+        <Layout.Footer>© 2026 Wakii — Layout demo shell</Layout.Footer>
+      </Layout>
+    </Layout>
+  );
+}

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

@@ -0,0 +1,154 @@
+// Layout tests — zone render + landmark roles, hasSider (prop + auto-detect),
+// header sticky, footer text/classes, Sider width collapsed/default, SiderContext,
+// nested Layout vẫn cột trong hàng.
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Layout, useSiderCollapsed } from './index.js';
+
+afterEach(cleanup);
+
+describe('Layout — zones & landmark a11y', () => {
+  it('render 3 zone với landmark banner/main/contentinfo + children', () => {
+    render(
+      <Layout>
+        <Layout.Header>Wakii Admin</Layout.Header>
+        <Layout.Content>
+          <p>Nội dung chính</p>
+        </Layout.Content>
+        <Layout.Footer>© 2026 Wakii</Layout.Footer>
+      </Layout>,
+    );
+    expect(screen.getByRole('banner')).toHaveTextContent('Wakii Admin');
+    expect(screen.getByRole('main')).toHaveTextContent('Nội dung chính');
+    expect(screen.getByRole('contentinfo')).toHaveTextContent('© 2026 Wakii');
+  });
+
+  it('header sticky: sticky=true → sticky top-0 z-10; mặc định không sticky', () => {
+    const { rerender } = render(
+      <Layout>
+        <Layout.Header sticky>H</Layout.Header>
+      </Layout>,
+    );
+    expect(screen.getByRole('banner')).toHaveClass('sticky', 'top-0', 'z-10');
+    rerender(
+      <Layout>
+        <Layout.Header>H</Layout.Header>
+      </Layout>,
+    );
+    expect(screen.getByRole('banner')).not.toHaveClass('sticky');
+  });
+
+  it('footer: text-meta text-ink3 + border-t zone', () => {
+    render(
+      <Layout>
+        <Layout.Footer>Wakii © 2026</Layout.Footer>
+      </Layout>,
+    );
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass('text-meta', 'text-ink3', 'border-t');
+  });
+});
+
+describe('Layout — row/col arrangement', () => {
+  it('hasSider prop → flex-row; bỏ → flex-col', () => {
+    const { container, rerender } = render(<Layout hasSider />);
+    expect(container.firstElementChild).toHaveClass('flex-row');
+    rerender(<Layout />);
+    expect(container.firstElementChild).toHaveClass('flex-col');
+    expect(container.firstElementChild).not.toHaveClass('flex-row');
+  });
+
+  it('auto-detect Layout.Sider con trực tiếp → row không cần hasSider', () => {
+    const { container } = render(
+      <Layout>
+        <Layout.Sider>
+          <span>nav</span>
+        </Layout.Sider>
+        <Layout>
+          <Layout.Content>page</Layout.Content>
+        </Layout>
+      </Layout>,
+    );
+    expect(container.firstElementChild).toHaveClass('flex-row');
+  });
+
+  it('nested Layout trong row vẫn flex-col (cột header/content)', () => {
+    const { container } = render(
+      <Layout hasSider>
+        <Layout.Sider>S</Layout.Sider>
+        <Layout>
+          <Layout.Content>C</Layout.Content>
+        </Layout>
+      </Layout>,
+    );
+    const inner = screen.getByRole('main').closest('section');
+    expect(inner).not.toBeNull();
+    expect(inner).not.toBe(container.firstElementChild);
+    expect(inner).toHaveClass('flex-col');
+    expect(inner).not.toHaveClass('flex-row');
+  });
+});
+
+describe('Layout.Sider — width + context', () => {
+  it('collapsed → width 80px; mặc định 200px; collapsedWidth custom ăn theo', () => {
+    const { rerender } = render(
+      <Layout hasSider>
+        <Layout.Sider>
+          <span>nav</span>
+        </Layout.Sider>
+      </Layout>,
+    );
+    const sider = () => screen.getByText('nav').closest('div')!;
+    expect(sider()).toHaveStyle({ width: '200px' });
+    rerender(
+      <Layout hasSider>
+        <Layout.Sider collapsed>
+          <span>nav</span>
+        </Layout.Sider>
+      </Layout>,
+    );
+    expect(sider()).toHaveStyle({ width: '80px' });
+    rerender(
+      <Layout hasSider>
+        <Layout.Sider collapsed collapsedWidth={64}>
+          <span>nav</span>
+        </Layout.Sider>
+      </Layout>,
+    );
+    expect(sider()).toHaveStyle({ width: '64px' });
+  });
+
+  it('useSiderCollapsed: con cháu đọc được collapsed và flip theo prop', () => {
+    const Probe = () => {
+      const collapsed = useSiderCollapsed();
+      return <span data-testid="probe">{String(collapsed)}</span>;
+    };
+    const { rerender } = render(
+      <Layout hasSider>
+        <Layout.Sider>
+          <Probe />
+        </Layout.Sider>
+      </Layout>,
+    );
+    expect(screen.getByTestId('probe')).toHaveTextContent('false');
+    rerender(
+      <Layout hasSider>
+        <Layout.Sider collapsed>
+          <Probe />
+        </Layout.Sider>
+      </Layout>,
+    );
+    expect(screen.getByTestId('probe')).toHaveTextContent('true');
+  });
+
+  it('Sider ngoài Layout (root zone) vẫn render width — compose standalone', () => {
+    render(
+      <div>
+        <Layout.Sider width={240}>
+          <span>standalone</span>
+        </Layout.Sider>
+      </div>,
+    );
+    expect(screen.getByText('standalone').closest('div')).toHaveStyle({ width: '240px' });
+  });
+});

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

@@ -0,0 +1,61 @@
+// Link — antd Typography.Link / MUI Link parity (docs/parity-matrix.md Gap P0):
+// anchor màu text-accent, hover accent-hi + underline theo mode ('none' | 'hover'
+// | 'always', mặc định 'hover'), focus ring chuẩn accent/40 (không ring-offset),
+// disabled chặn click + bỏ href (không focusable — đúng a11y). Render <a> thuần,
+// tokens-only, passthrough anchor props (target/rel/aria-*).
+import type { AnchorHTMLAttributes, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+
+export type LinkUnderline = 'none' | 'hover' | 'always';
+
+export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+  /** Đích liên kết — bỏ khi disabled. */
+  href?: string;
+  /** Gạch chân: 'none' | 'hover' | 'always' — mặc định 'hover' (antd Link). */
+  underline?: LinkUnderline;
+  /** Chặn click + bỏ href + aria-disabled (antd disabled Link). */
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+const UNDERLINE: Record<LinkUnderline, string> = {
+  none: 'no-underline',
+  hover: 'no-underline hover:underline underline-offset-2',
+  always: 'underline underline-offset-2',
+};
+
+export function Link({
+  href,
+  underline = 'hover',
+  disabled = false,
+  className,
+  children,
+  onClick,
+  ...rest
+}: LinkProps) {
+  if (disabled) {
+    return (
+      <a
+        aria-disabled="true"
+        className={`cursor-not-allowed text-ink4 no-underline${className ? ` ${className}` : ''}`}
+        onClick={(e: ReactMouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+        {...rest}
+      >
+        {children}
+      </a>
+    );
+  }
+  return (
+    <a
+      href={href}
+      onClick={onClick}
+      className={`rounded-sm text-accent transition-colors duration-150 hover:text-accent-hi focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${UNDERLINE[underline]}${className ? ` ${className}` : ''}`}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}

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

@@ -0,0 +1,68 @@
+// Link stories — antd Typography.Link / MUI Link parity (docs/parity-matrix.md Gap P0).
+// Matrix: basic · underline modes · disabled · in-text usage · external.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Link } from './index';
+
+const meta = {
+  title: 'Primitives/Link',
+  component: Link,
+  tags: ['autodocs'],
+  argTypes: {
+    underline: { control: 'select', options: ['none', 'hover', 'always'] },
+    disabled: { control: 'boolean' },
+    href: { control: 'text' },
+  },
+} satisfies Meta<typeof Link>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Basic — accent color, accent-hi on hover, underline on hover (default). */
+export const Basic: Story = {
+  args: { children: 'View tasks', href: '#tasks' },
+};
+
+/** Underline — none / hover (default) / always. */
+export const Underline: Story = {
+  args: { children: 'Underline modes' },
+  render: () => (
+    <div className="flex flex-wrap items-center gap-6">
+      <Link href="#a" underline="none">underline="none"</Link>
+      <Link href="#b" underline="hover">underline="hover"</Link>
+      <Link href="#c" underline="always">underline="always"</Link>
+    </div>
+  ),
+};
+
+/** Disabled — no href, aria-disabled, clicks are swallowed. */
+export const Disabled: Story = {
+  args: { children: 'Disabled link' },
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Link href="#d" disabled>Disabled link</Link>
+      <Link href="#e">Enabled link</Link>
+    </div>
+  ),
+};
+
+/** In context — inline inside a Typography paragraph. */
+export const InContext: Story = {
+  args: { children: 'Link in context' },
+  render: () => (
+    <p className="max-w-md text-body text-ink2">
+      Read the <Link href="#docs">documentation</Link> first, then check the{' '}
+      <Link href="#faq" underline="always">FAQ</Link> — or open a ticket if the{' '}
+      <Link href="#support" disabled>support channel</Link> is unavailable.
+    </p>
+  ),
+};
+
+/** External — passthrough anchor props (target/rel) work as expected. */
+export const External: Story = {
+  args: { children: 'Open Storybook ↗' },
+  render: () => (
+    <Link href="https://storybook-static-khaki-two.vercel.app" target="_blank" rel="noreferrer">
+      Open Storybook ↗
+    </Link>
+  ),
+};

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

@@ -0,0 +1,69 @@
+// Link tests — antd Typography.Link/MUI Link parity: render <a> với href,
+// onClick nhận event (preventDefault được), disabled chặn click + bỏ href,
+// underline mode classes.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Link } from './index.js';
+
+afterEach(cleanup);
+
+describe('Link', () => {
+  it('render <a> với href + children', () => {
+    render(<Link href="/tasks">Tasks</Link>);
+    const a = screen.getByRole('link', { name: 'Tasks' });
+    expect(a.tagName).toBe('A');
+    expect(a).toHaveAttribute('href', '/tasks');
+  });
+
+  it('click → onClick nhận event, consumer preventDefault được', async () => {
+    const onClick = vi.fn((e: React.MouseEvent) => e.preventDefault());
+    render(<Link href="/x" onClick={onClick}>Go</Link>);
+    await userEvent.setup().click(screen.getByRole('link', { name: 'Go' }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick.mock.calls[0][0].defaultPrevented).toBe(true);
+  });
+
+  it('disabled → bỏ href + aria-disabled + click KHÔNG gọi onClick', async () => {
+    const onClick = vi.fn();
+    render(<Link href="/x" disabled onClick={onClick}>Delete</Link>);
+    const a = screen.getByText('Delete');
+    expect(a).not.toHaveAttribute('href');
+    expect(a).toHaveAttribute('aria-disabled', 'true');
+    expect(a.className).toContain('cursor-not-allowed');
+    await userEvent.setup().click(a);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('underline modes → class tương ứng (none/hover/always)', () => {
+    const { rerender } = render(<Link href="/a" underline="none">L</Link>);
+    expect(screen.getByRole('link').className).toContain('no-underline');
+    rerender(<Link href="/a" underline="always">L</Link>);
+    expect(screen.getByRole('link').className).toContain('underline');
+    expect(screen.getByRole('link').className).not.toContain('no-underline');
+    rerender(<Link href="/a">L</Link>);
+    expect(screen.getByRole('link').className).toContain('hover:underline');
+  });
+
+  it('màu accent + focus ring chuẩn (không ring-offset)', () => {
+    render(<Link href="/a">Styled</Link>);
+    const cls = screen.getByRole('link').className;
+    expect(cls).toContain('text-accent');
+    expect(cls).toContain('hover:text-accent-hi');
+    expect(cls).toContain('focus-visible:ring-2');
+    expect(cls).toContain('focus-visible:ring-accent/40');
+    expect(cls).not.toContain('ring-offset');
+  });
+
+  it('className passthrough + passthrough anchor props (target/rel)', () => {
+    render(
+      <Link href="/ext" className="text-body" target="_blank" rel="noreferrer">
+        Ext
+      </Link>,
+    );
+    const a = screen.getByRole('link', { name: 'Ext' });
+    expect(a).toHaveClass('text-body');
+    expect(a).toHaveAttribute('target', '_blank');
+    expect(a).toHaveAttribute('rel', 'noreferrer');
+  });
+});

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

@@ -0,0 +1,135 @@
+// List — antd List pattern: items + renderItem, loading → Skeleton, empty →
+// EmptyState, pagination client-side (Pagination component sẵn), header/footer,
+// bordered. a11y: role=list + listitem (ul/li). antd: divider giữa items mặc
+// định, bordered = viền ngoài + nền s2, pagination góc phải dưới.
+// virtual=true → render ảo qua VirtualScroll (danh sách rất dài): bỏ qua
+// pagination, row div cao cố định virtualItemSize (ul/li semantics nhường chỗ
+// window hoá — antd virtual cũng vậy).
+import { useState, type ReactNode } from 'react';
+import { EmptyState } from '../empty-state/index';
+import { Pagination } from '../pagination/index';
+import { Skeleton } from '../skeleton/index';
+import { VirtualScroll } from '../virtual-scroll/index';
+
+export interface ListPaginationProps {
+  pageSize: number;
+}
+
+export interface ListProps<T> {
+  items: T[];
+  renderItem: (item: T, index: number) => ReactNode;
+  /** Skeleton 3 hàng thay toàn bộ nội dung. */
+  loading?: boolean;
+  /** Text khi items rỗng — render qua EmptyState. */
+  emptyText?: string;
+  /** false | { pageSize } — phân trang client-side (uncontrolled page). */
+  pagination?: false | ListPaginationProps;
+  header?: ReactNode;
+  footer?: ReactNode;
+  bordered?: boolean;
+  /** Key React cho item (mặc định index). */
+  rowKey?: (item: T, index: number) => string;
+  /** Render ảo (VirtualScroll) — danh sách hàng nghìn items; bỏ qua pagination. */
+  virtual?: boolean;
+  /** Chiều cao row cố định khi virtual (px, mặc định 48 — khớp px-4 py-3 text-body). */
+  virtualItemSize?: number;
+  /** Chiều cao viewport cuộn khi virtual (px, mặc định 320). */
+  virtualHeight?: number;
+  className?: string;
+}
+
+export function List<T>({
+  items,
+  renderItem,
+  loading = false,
+  emptyText = 'Không có dữ liệu',
+  pagination = false,
+  header,
+  footer,
+  bordered = false,
+  rowKey,
+  virtual = false,
+  virtualItemSize = 48,
+  virtualHeight = 320,
+  className,
+}: ListProps<T>) {
+  const [page, setPage] = useState(1);
+  const pageSize = pagination ? pagination.pageSize : items.length || 1;
+  const pageCount = Math.max(1, Math.ceil(items.length / pageSize));
+  const safePage = Math.min(page, pageCount);
+  const offset = (safePage - 1) * pageSize;
+  // virtual ưu tiên: render ảo tự lo window — không slice pagination nữa
+  const paged = virtual ? items : pagination ? items.slice(offset, offset + pageSize) : items;
+
+  const itemBorder = (isLast: boolean) =>
+    !isLast || footer ? 'border-b border-line2' : '';
+
+  return (
+    <div
+      className={`${bordered ? 'rounded-xl border border-line bg-s2 shadow-[var(--ele-1)]' : ''}${className ? ` ${className}` : ''}`}
+    >
+      {header && (
+        <div className="border-b border-line2 px-4 py-3 text-label font-semibold text-ink2">
+          {header}
+        </div>
+      )}
+      {loading ? (
+        <div className="p-4">
+          <Skeleton variant="row" count={3} />
+        </div>
+      ) : paged.length === 0 ? (
+        <div className="p-6">
+          <EmptyState title={emptyText} />
+        </div>
+      ) : virtual ? (
+        <VirtualScroll
+          items={paged}
+          itemSize={virtualItemSize}
+          height={virtualHeight}
+          renderItem={(item, index) => (
+            <div
+              key={rowKey ? rowKey(item, index) : index}
+              role="listitem"
+              className={`px-4 py-3 ${itemBorder(index === paged.length - 1)}`}
+            >
+              {renderItem(item, index)}
+            </div>
+          )}
+        />
+      ) : (
+        <ul role="list" className="m-0 list-none p-0">
+          {paged.map((item, i) => {
+            const index = offset + i;
+            return (
+              <li
+                key={rowKey ? rowKey(item, index) : index}
+                role="listitem"
+                // Stagger mount 28ms/hàng (depth contract 24-40ms, cap 12 hàng) —
+                // reduced-motion tắt sạch.
+                className={`animate-[bp-slide-up-in_280ms_var(--ease-smooth)_backwards] motion-reduce:animate-none px-4 py-3 ${itemBorder(i === paged.length - 1)}`}
+                style={{ animationDelay: `${Math.min(i, 12) * 28}ms` }}
+              >
+                {renderItem(item, index)}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {footer && (
+        <div className="border-t border-line2 px-4 py-3 text-label text-ink3">
+          {footer}
+        </div>
+      )}
+      {pagination && !loading && items.length > 0 && !virtual && (
+        <div className="flex justify-end px-4 pb-4 pt-3">
+          <Pagination
+            current={safePage}
+            pageSize={pageSize}
+            total={items.length}
+            onChange={setPage}
+          />
+        </div>
+      )}
+    </div>
+  );
+}