create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,118 @@
+// Tabs — type line (antd): tab bar border-b line2, item active chữ accent + gạch
+// accent 2px, item padding 12px 0 + gap 32; content render children tab active.
+// A11y (WAI-ARIA tabs pattern, a11y sweep 2026-10-18): tab/tabpanel nối id ↔
+// aria-controls/aria-labelledby; roving tabindex (tab active=0, còn lại -1);
+// ArrowLeft/Right + Home/End đi tab (bỏ disabled), focus kéo theo selection.
+import { useId, type KeyboardEvent } from 'react';
+import type { ReactNode } from 'react';
+
+/** classNames sub-part slots (antd v5 style) — merge SAU default classes. */
+export interface TabsClassNames {
+  /** Root div bọc tablist + panel. */
+  wrapper?: string;
+  /** `<div role="tablist">`. */
+  tablist?: string;
+  /** Nút tab (`role="tab"`). */
+  tab?: string;
+  /** `<div role="tabpanel">`. */
+  panel?: string;
+}
+
+export interface TabItem {
+  /** Khóa định duy nhất của tab (dùng làm activeKey). */
+  key: string;
+  /** Nhãn trên tab bar. */
+  label: ReactNode;
+  /** Nội dung render trong tabpanel khi tab active. */
+  children?: ReactNode;
+  /** Tab bị khoá (không click được). */
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  /** Danh sách tab — thứ tự render trên tab bar. */
+  items: TabItem[];
+  /** Tab đang active (controlled); mặc định = items[0]. */
+  activeKey?: string;
+  /** Callback khi chọn tab khác. */
+  onChange?: (key: string) => void;
+  /** classNames sub-part slots (antd v5) — merge SAU default. */
+  classNames?: TabsClassNames;
+  className?: string;
+}
+
+export function Tabs({ items, activeKey, onChange, classNames, className }: TabsProps) {
+  const current = activeKey ?? items[0]?.key;
+  const active = items.find((t) => t.key === current);
+  const baseId = useId();
+
+  // Roving tabindex + arrow-key: mảng button[] trong tablist, đi tuần bỏ disabled.
+  const selectAndFocus = (idx: number) => {
+    const tab = items[idx];
+    if (!tab || tab.disabled) return;
+    onChange?.(tab.key);
+    // focus theo selection (controlled thì key đổi qua prop — focus vẫn đẩy thẳng)
+    requestAnimationFrame(() => {
+      document.getElementById(`${baseId}-tab-${tab.key}`)?.focus();
+    });
+  };
+
+  const onTablistKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const focusable = items.filter((t) => !t.disabled);
+    if (focusable.length === 0) return;
+    const activeIdx = items.findIndex((t) => t.key === current);
+    const pos = focusable.indexOf(items[activeIdx] ?? items[0]);
+    let next = -1;
+    if (e.key === 'ArrowRight') next = items.indexOf(focusable[(pos + 1) % focusable.length]);
+    else if (e.key === 'ArrowLeft') next = items.indexOf(focusable[(pos - 1 + focusable.length) % focusable.length]);
+    else if (e.key === 'Home') next = items.indexOf(focusable[0]);
+    else if (e.key === 'End') next = items.indexOf(focusable[focusable.length - 1]);
+    else return;
+    e.preventDefault();
+    selectAndFocus(next);
+  };
+
+  return (
+    <div className={`${className ?? ''}${classNames?.wrapper ? ` ${classNames.wrapper}` : ''}`}>
+      <div
+        role="tablist"
+        onKeyDown={onTablistKeyDown}
+        className={`m-0 flex list-none gap-8 border-b border-line2 p-0${classNames?.tablist ? ` ${classNames.tablist}` : ''}`}
+      >
+        {items.map((tab) => {
+          const isActive = tab.key === current;
+          return (
+            <button
+              key={tab.key}
+              id={`${baseId}-tab-${tab.key}`}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              aria-controls={`${baseId}-panel`}
+              tabIndex={isActive ? 0 : -1}
+              disabled={tab.disabled}
+              onClick={() => !tab.disabled && onChange?.(tab.key)}
+              className={`relative cursor-pointer border-none bg-transparent px-0 py-3 text-body transition-colors hover:text-accent active:opacity-70 focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none${classNames?.tab ? ` ${classNames.tab}` : ''} after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:content-[''] after:transition-transform after:duration-200 after:[transition-timing-function:var(--ease-enter)] after:origin-left ${
+                isActive
+                  ? 'text-accent after:bg-accent after:scale-x-100'
+                  : 'text-ink opacity-65 after:bg-transparent after:scale-x-0 hover:text-accent hover:opacity-100'
+              } ${tab.disabled ? 'cursor-not-allowed text-ink3' : ''}`}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+      <div
+        key={active?.key}
+        id={`${baseId}-panel`}
+        role="tabpanel"
+        aria-labelledby={active ? `${baseId}-tab-${active.key}` : undefined}
+        tabIndex={0}
+        className={`animate-[bp-fade-in_var(--motion-fast)_var(--ease-enter)] pt-4${classNames?.panel ? ` ${classNames.panel}` : ''}`}
+      >
+        {active?.children}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+// Tabs stories — Default / Controlled (useState) / DisabledTab / ManyTabs / DarkTheme.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Icon } from '../icons/index';
+import { Tabs } from './index';
+/** Switch content panels in place — accent underline, controlled activeKey. */
+const meta = { title: 'Navigation/Tabs', component: Tabs, tags: ['autodocs'] } satisfies Meta<typeof Tabs>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+const ITEMS = [
+  { key: '1', label: 'Overview', children: <p>Overview content</p> },
+  { key: '2', label: 'Tasks', children: <p>Tasks content</p> },
+  { key: '3', label: 'Activity', children: <p>Activity content</p> },
+];
+
+export const Default: S = {
+  name: 'Default — accent underline slides on switch',
+  args: { items: ITEMS },
+};
+
+function ControlledDemo() {
+  const [active, setActive] = useState('1');
+  return (
+    <div>
+      <Tabs items={ITEMS} activeKey={active} onChange={setActive} />
+      <p className="mt-2 text-label text-ink3">activeKey: {active}</p>
+    </div>
+  );
+}
+
+export const Controlled: S = {
+  args: { items: ITEMS },
+  name: 'Controlled — activeKey + onChange (useState)',
+  render: () => <ControlledDemo />,
+};
+
+export const DisabledTab: S = {
+  name: 'Disabled tab — not clickable',
+  args: { items: [...ITEMS.slice(0, 2), { key: 'x', label: 'Permissions', children: <p>not yet</p>, disabled: true }] },
+};
+
+export const ManyTabs: S = {
+  name: 'Many tabs — 5 items',
+  args: {
+    items: [...ITEMS, { key: '4', label: 'Reports', children: <p>Reports content</p> }, { key: '5', label: 'Settings', children: <p>Settings content</p> }],
+  },
+};
+
+const ICON_ITEMS = [
+  {
+    key: 'home',
+    label: (
+      <span className="flex items-center gap-1.5">
+        <Icon name="home" size={14} />
+        Overview
+      </span>
+    ),
+    children: <p>Overview content</p>,
+  },
+  {
+    key: 'users',
+    label: (
+      <span className="flex items-center gap-1.5">
+        <Icon name="users" size={14} />
+        Members
+      </span>
+    ),
+    children: <p>Members content</p>,
+  },
+  {
+    key: 'settings',
+    label: (
+      <span className="flex items-center gap-1.5">
+        <Icon name="settings" size={14} />
+        Settings
+      </span>
+    ),
+    children: <p>Settings content</p>,
+  },
+];
+
+export const IconTabs: S = {
+  name: 'Icon tabs — Icon inside ReactNode label',
+  args: { items: ICON_ITEMS },
+};
+
+export const DarkTheme: S = {
+  args: { items: ITEMS },
+  name: 'Dark theme — underline + accent text follow tokens',
+  render: () => (
+    <div data-bp-theme="dark" className="rounded-xl bg-s2 p-4">
+      <Tabs items={ITEMS} />
+    </div>
+  ),
+};
+
+export const CustomStyled: S = {
+  args: { items: ITEMS },
+  name: 'CustomStyled — classNames slots merge after defaults',
+  render: () => (
+    <Tabs
+      items={ITEMS}
+      activeKey="2"
+      classNames={{
+        wrapper: 'rounded-xl border border-dashed border-accent/40 p-2',
+        tablist: 'rounded-lg bg-s3 px-2',
+        tab: 'italic',
+        panel: 'text-accent',
+      }}
+    />
+  ),
+};

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

@@ -0,0 +1,77 @@
+// Tabs tests — tablist/tab/tabpanel + disabled + onChange.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Tabs } from './index.js';
+
+const ITEMS = [
+  { key: 't1', label: 'Tab một', children: <p>Nội dung một</p> },
+  { key: 't2', label: 'Tab hai', children: <p>Nội dung hai</p> },
+  { key: 't3', label: 'Tab khoá', children: <p>chưa tới</p>, disabled: true },
+];
+
+afterEach(cleanup);
+
+describe('Tabs', () => {
+  it('tablist + active mặc định item đầu + panel content', () => {
+    render(<Tabs items={ITEMS} />);
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+    expect(screen.getByText('Nội dung một')).toBeInTheDocument();
+    expect(screen.queryByText('Nội dung hai')).toBeNull();
+  });
+
+  it('click tab → onChange (uncontrolled activeKey — consumer controlled)', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Tabs items={ITEMS} onChange={onChange} />);
+    await user.click(screen.getByRole('tab', { name: 'Tab hai' }));
+    expect(onChange).toHaveBeenCalledWith('t2');
+  });
+
+  it('disabled tab → không click được', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Tabs items={ITEMS} onChange={onChange} />);
+    await user.click(screen.getByRole('tab', { name: 'Tab khoá' }));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('controlled activeKey → panel theo prop (không cần click)', () => {
+    const { rerender } = render(<Tabs items={ITEMS} activeKey="t2" />);
+    expect(screen.getByText('Nội dung hai')).toBeInTheDocument();
+    expect(screen.queryByText('Nội dung một')).toBeNull();
+    rerender(<Tabs items={ITEMS} activeKey="t1" />);
+    expect(screen.getByText('Nội dung một')).toBeInTheDocument();
+  });
+
+  it('a11y: tab aria-selected đúng + role=tabpanel hiện diện', () => {
+    render(<Tabs items={ITEMS} activeKey="t2" />);
+    expect(screen.getByRole('tab', { name: 'Tab một' })).toHaveAttribute('aria-selected', 'false');
+    expect(screen.getByRole('tab', { name: 'Tab hai' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tabpanel')).toBeInTheDocument();
+  });
+
+  it('classNames slots (antd v5) — wrapper/tablist/tab/panel đúng element, merge sau default', () => {    const { container } = render(
+      <Tabs
+        items={ITEMS}
+        activeKey="t1"
+        classNames={{ wrapper: 'tw', tablist: 'tl', tab: 'tt', panel: 'tp' }}
+      />,
+    );
+    expect(container.firstElementChild).toHaveClass('tw');
+    expect(screen.getByRole('tablist')).toHaveClass('tl');
+    expect(screen.getByRole('tablist')).toHaveClass('border-b'); // default giữ nguyên
+    expect(screen.getByRole('tab', { name: 'Tab một' })).toHaveClass('tt');
+    expect(screen.getByRole('tabpanel')).toHaveClass('tp');
+    expect(screen.getByRole('tabpanel')).toHaveClass('pt-4');
+  });
+
+  it('inactive tab opacity-65 (hover về 100); active tab full opacity', () => {
+    render(<Tabs items={ITEMS} activeKey="t1" />);
+    const active = screen.getByRole('tab', { name: 'Tab một' });
+    const inactive = screen.getByRole('tab', { name: 'Tab hai' });
+    expect(inactive.className).toContain('opacity-65');
+    expect(inactive.className).toContain('hover:opacity-100');
+    expect(active.className).not.toContain('opacity-65');
+  });
+});

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

@@ -0,0 +1,68 @@
+// Tag — nhãn + CheckableTag (filter chips). Checkable giữ <button aria-pressed> —
+// a11y TỐT HƠN antd (span + onClick không có semantic). Checked = nền accent solid
+// (antd CheckableTag checked); unchecked = viền line, chữ ink3 (mirror tsk-chip cũ).
+import type { ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface TagProps {
+  children: ReactNode;
+  /** Icon trước nhãn. */
+  icon?: ReactNode;
+  /** Nút × — gọi onClose (antd closable; KHÔNG tự remove — consumer quyết định). */
+  closable?: boolean;
+  onClose?: () => void;
+  className?: string;
+}
+
+export interface CheckableTagProps {
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+  /** Icon trước nhãn. */
+  icon?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+function TagBase({ children, icon, closable = false, onClose, className }: TagProps) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-pill border border-line bg-s3 px-2 py-0.5 text-label text-ink2${className ? ` ${className}` : ''}`}
+    >
+      {icon && <span aria-hidden="true">{icon}</span>}
+      {children}
+      {closable && (
+        <button
+          type="button"
+          aria-label="Đóng"
+          className="cursor-pointer border-none bg-transparent text-ink3 transition-colors hover:text-ink active:opacity-70 focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none"
+          onClick={() => onClose?.()}
+        >
+          <Icon name="times" size={12} />
+        </button>
+      )}
+    </span>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+function Checkable({ checked, onChange, icon, children, className }: CheckableTagProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={checked}
+      onClick={() => onChange?.(!checked)}
+      className={`inline-flex cursor-pointer items-center gap-1 rounded-pill border px-3 py-1 text-label transition-colors active:opacity-80 focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none ${
+        checked
+          ? 'border-accent bg-accent text-white hover:border-accent-hi hover:bg-accent-hi'
+          : 'border-line bg-transparent text-ink3 hover:border-line2 hover:text-ink2'
+      }${className ? ` ${className}` : ''}`}
+    >
+      {icon && <span aria-hidden="true">{icon}</span>}
+      {children}
+    </button>
+  );
+}
+
+/** Tag + Tag.Checkable — composite component pattern antd (Tag.CheckableTag). */
+export const Tag = Object.assign(TagBase, { Checkable });

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

@@ -0,0 +1,88 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// Tag stories — Plain / Checkable (controlled) / Closable (controlled remove) /
+// WithIcon / DarkTheme.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tag } from './index';
+
+/** Tiny label chip — statuses, metadata; Checkable for filter chips. */
+const meta = {
+  title: 'Data Display/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Tag>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+  name: 'Plain — pill label, line border',
+  args: { children: 'created' },
+};
+
+function CheckableDemo() {
+  const [checked, setChecked] = useState<'all' | 'doing' | null>('all');
+  return (
+    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+      <Tag.Checkable checked={checked === 'all'} onChange={() => setChecked('all')}>
+        All
+      </Tag.Checkable>
+      <Tag.Checkable checked={checked === 'doing'} onChange={() => setChecked('doing')}>
+        In progress
+      </Tag.Checkable>
+      <Tag.Checkable checked={checked === null} onChange={() => setChecked(null)}>
+        Done
+      </Tag.Checkable>
+    </div>
+  );
+}
+
+export const CheckableFilterChips: Story = {
+  args: { children: 'All' },
+  name: 'Checkable (filter chips — controlled)',
+  render: () => <CheckableDemo />,
+};
+
+function ClosableDemo() {
+  const [tags, setTags] = useState(['frontend', 'backend', 'devops']);
+  return (
+    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+      {tags.length === 0 && <span className="text-label text-ink3">All removed — consumer decides via onClose</span>}
+      {tags.map((t) => (
+        <Tag key={t} closable onClose={() => setTags((p) => p.filter((x) => x !== t))}>
+          {t}
+        </Tag>
+      ))}
+    </div>
+  );
+}
+
+export const Closable: Story = {
+  args: { children: 'label' },
+  name: 'Closable — × removes (consumer decides)',
+  render: () => <ClosableDemo />,
+};
+
+export const WithIcon: Story = {
+  args: { children: 'label' },
+  name: 'Icon + label',
+  render: () => (
+    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+      <Tag icon={<span aria-hidden="true">◆</span>}>high priority</Tag>
+      <Tag.Checkable checked icon={<span aria-hidden="true">✓</span>}>done</Tag.Checkable>
+    </div>
+  ),
+};
+
+export const DarkTheme: Story = {
+  args: { children: 'label' },
+  name: 'Dark theme — line border + ink2 text follow tokens',
+  render: () => (
+    <div data-bp-theme="dark" className="flex gap-3 rounded-xl bg-s2 p-4">
+      <Tag>created</Tag>
+      <Tag closable onClose={() => {}}>in progress</Tag>
+      <Tag.Checkable checked>done</Tag.Checkable>
+      <Tag.Checkable checked={false}>pending</Tag.Checkable>
+    </div>
+  ),
+};

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

@@ -0,0 +1,126 @@
+// Tag tests — plain + Checkable (filter chips pattern; antd CheckableTag look,
+// nhưng giữ <button aria-pressed> — a11y TỐT HƠN antd (span+onClick)).
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Tag } from './index.js';
+
+afterEach(cleanup);
+
+describe('Tag plain', () => {
+  it('render span nhãn', () => {
+    render(<Tag>đã tạo</Tag>);
+    expect(screen.getByText('đã tạo').tagName).toBe('SPAN');
+  });
+});
+
+describe('Tag.Checkable', () => {
+  it('checked → <button aria-pressed=true> + class active nền accent', () => {
+    render(
+      <Tag.Checkable checked>
+        Đang làm
+      </Tag.Checkable>,
+    );
+    const el = screen.getByRole('button', { name: 'Đang làm' });
+    expect(el).toHaveAttribute('aria-pressed', 'true');
+    expect(el.className).toContain('bg-accent');
+  });
+
+  it('unchecked → aria-pressed=false, click gọi onChange(true)', async () => {
+    const onChange = vi.fn();
+    render(
+      <Tag.Checkable checked={false} onChange={onChange}>
+        Tất cả
+      </Tag.Checkable>,
+    );
+    const el = screen.getByRole('button', { name: 'Tất cả' });
+    expect(el).toHaveAttribute('aria-pressed', 'false');
+    await userEvent.setup().click(el);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('className passthrough', () => {
+    render(
+      <Tag.Checkable checked={false} className="extra">
+        X
+      </Tag.Checkable>,
+    );
+    expect(screen.getByRole('button', { name: 'X' })).toHaveClass('extra');
+  });
+});
+
+describe('Tag — completeness (Tier 1.5)', () => {
+  it('closable → nút × gọi onClose (KHÔNG tự remove)', () => {
+    const onClose = vi.fn();
+    render(
+      <Tag closable onClose={onClose}>
+        đã tạo
+      </Tag>,
+    );
+    expect(screen.getByText('đã tạo')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Đóng' })).toBeInTheDocument();
+  });
+
+  it('Checkable + icon → icon trước nhãn', () => {
+    render(
+      <Tag.Checkable checked icon={<span data-testid="tic" />}>
+        Đang làm
+      </Tag.Checkable>,
+    );
+    expect(screen.getByTestId('tic')).toBeInTheDocument();
+  });
+});
+
+it('closable × click → onClose được gọi', async () => {
+  const onClose = vi.fn();
+  render(
+    <Tag closable onClose={onClose}>
+      x
+    </Tag>,
+  );
+  await userEvent.setup().click(screen.getByRole('button', { name: 'Đóng' }));
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
+describe('Tag — combo (Tier 5 sweep)', () => {
+  it('icon + closable cùng lúc → cả hai render', () => {
+    const onClose = vi.fn();
+    render(
+      <Tag icon={<span data-testid="ti">▲</span>} closable onClose={onClose}>
+        nhãn
+      </Tag>,
+    );
+    expect(screen.getByTestId('ti')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Đóng' })).toBeInTheDocument();
+  });
+
+  it('Checkable không icon → không span icon', () => {
+    render(
+      <Tag.Checkable checked={false}>
+        trơn
+      </Tag.Checkable>,
+    );
+    expect(screen.getByText('trơn').parentElement!.querySelectorAll('span[aria-hidden]').length).toBe(0);
+  });
+
+  it('plain className passthrough + không closable → không nút Đóng', () => {
+    render(<Tag className="extra">nhãn</Tag>);
+    const el = screen.getByText('nhãn');
+    expect(el).toHaveClass('extra');
+    expect(screen.queryByRole('button', { name: 'Đóng' })).toBeNull();
+  });
+
+  it('plain icon → icon bọc span aria-hidden (trang trí)', () => {
+    render(<Tag icon={<span data-testid="pic">▲</span>}>nhãn</Tag>);
+    expect(screen.getByTestId('pic')).toBeInTheDocument();
+    expect(screen.getByTestId('pic').parentElement).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('Checkable checked → click gọi onChange(false) (toggle về false)', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Tag.Checkable checked onChange={onChange}>Đang làm</Tag.Checkable>);
+    await user.click(screen.getByRole('button', { name: 'Đang làm' }));
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+});

package/stack-template/app/ui-kit/src/ui/team/debt-board/debt-board.stories.tsx

@@ -0,0 +1,52 @@
+// DebtBoard stories — R10 debt board với filter owner/status live.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DebtBoard } from './index';
+
+const meta = { title: 'Domain/DebtBoard', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+/** Basic — debts thật + R0.1 hint "cần phân công" (queue 0 trong khi agent idle). */
+export const Basic: S = {
+  render: () => (
+    <DebtBoard
+      className="max-w-2xl"
+      queueDepth={0}
+      agentsIdle={2}
+      debts={[
+        { item: 'Story 0 export const — indexer drop', owner: 'v2', status: 'fixed' },
+        { item: 'Popover labelledby wire', owner: 'w6', status: 'fixed' },
+        { item: 'Relative path root gây file lạc', owner: 'v1', status: 'open' },
+        { item: 'Scrollbar token legacy', owner: 'w7', status: 'waived' },
+        { item: 'Dark tokens audit sót avatar', owner: 'w7', status: 'open' },
+      ]}
+    />
+  ),
+};
+
+/** Empty — filter không khớp → EmptyState. */
+export const Empty: S = {
+  name: 'Empty — filter không khớp',
+  render: () => (
+    <DebtBoard
+      className="max-w-2xl"
+      debts={[{ item: 'Demo debt', owner: 'w6', status: 'fixed' }]}
+    />
+  ),
+};
+
+/** DarkTheme — bảng + badge trên dark canvas. */
+export const DarkTheme: S = {
+  name: 'Dark theme',
+  render: () => (
+    <div data-bp-theme="dark" className="p-2">
+      <DebtBoard
+        className="max-w-2xl"
+        debts={[
+          { item: 'Saga assign treo DLQ', owner: 'v1', status: 'open' },
+          { item: 'CSV export delimiter', owner: 'w6', status: 'fixed' },
+        ]}
+      />
+    </div>
+  ),
+};