create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,121 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// Modernize pass 2026-10-18 (vision-audit): adds Sizes / Loading / Matrix —
+// default h-9, rounded-lg, default variant bg-s2 (visible on white bg).
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './index';
+
+const meta = {
+  title: 'Primitives/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'select', options: ['primary', 'default', 'text'] },
+    htmlType: { control: 'select', options: ['button', 'submit', 'reset'] },
+    size: { control: 'select', options: ['small', 'middle', 'large'] },
+    danger: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    block: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Basic — primary button, the everyday default. */
+export const Basic: Story = {
+  name: 'Basic',
+  args: { type: 'primary', children: 'Create task' },
+};
+
+export const Variants: Story = {
+  args: { children: 'Button' },
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+      <Button type="primary">Create task</Button>
+      <Button>Load more</Button>
+      <Button type="text">Cancel</Button>
+      <Button type="primary" disabled>
+        Disabled
+      </Button>
+    </div>
+  ),
+};
+
+export const Danger: Story = {
+  args: { children: 'Danger' },
+  name: 'Danger',
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+      <Button type="primary" danger>
+        Delete permanently
+      </Button>
+      <Button type="text" danger>
+        Delete
+      </Button>
+    </div>
+  ),
+};
+
+/** Sizes — small h-8 / middle h-9 (default, 36px antd) / large h-10, all 3 types. */
+export const Sizes: Story = {
+  name: 'Sizes (h-8 / h-9 / h-10)',
+  args: { children: 'Button' },
+  render: () => (
+    <div style={{ display: 'grid', gap: 12 }}>
+      {(['small', 'middle', 'large'] as const).map((s) => (
+        <div key={s} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <span style={{ width: 48, fontSize: 12, opacity: 0.6 }}>{s}</span>
+          <Button size={s} type="primary">
+            Create task
+          </Button>
+          <Button size={s}>Load more</Button>
+          <Button size={s} type="text">
+            Cancel
+          </Button>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/** Loading — 3.5 spinner replaces the icon, disabled + cursor-wait; icon hidden while loading. */
+export const Loading: Story = {
+  args: { children: 'Loading' },
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+      <Button loading>Save</Button>
+      <Button type="primary" loading>
+        Save
+      </Button>
+      <Button type="primary" loading size="small">
+        Small
+      </Button>
+      <Button type="primary">Normal for comparison</Button>
+    </div>
+  ),
+};
+
+/** Full matrix — 3 types × {normal, danger, disabled, loading}. */
+export const Matrix: Story = {
+  name: 'Matrix (type × danger × disabled × loading)',
+  args: { children: 'Matrix' },
+  render: () => (
+    <div style={{ display: 'grid', gap: 10 }}>
+      {(['primary', 'default', 'text'] as const).map((t) => (
+        <div key={t} style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+          <Button type={t}>{t}</Button>
+          <Button type={t} danger>
+            danger
+          </Button>
+          <Button type={t} disabled>
+            disabled
+          </Button>
+          <Button type={t} loading>
+            loading
+          </Button>
+        </div>
+      ))}
+    </div>
+  ),
+};

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

@@ -0,0 +1,207 @@
+// Button tests — antd look (spec tailwind-migration + decision antd-look). API:
+// type primary|default|text + danger boolean — map đúng 4 style đang dùng trong repo.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Button } from './index.js';
+
+afterEach(cleanup);
+
+describe('Button', () => {
+  it('default type → <button> + class variant default, click gọi onClick', async () => {
+    const onClick = vi.fn();
+    render(
+      <Button onClick={onClick}>
+        <span>Tải thêm</span>
+      </Button>,
+    );
+    const btn = screen.getByRole('button', { name: 'Tải thêm' });
+    expect(btn.tagName).toBe('BUTTON');
+    await userEvent.setup().click(btn);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('type=primary → class bg-accent trắng chữ; disabled chặn click', async () => {
+    const onClick = vi.fn();
+    render(
+      <Button type="primary" disabled onClick={onClick}>
+        Tạo task
+      </Button>,
+    );
+    const btn = screen.getByRole('button', { name: 'Tạo task' });
+    expect(btn.className).toContain('bg-accent');
+    expect(btn).toBeDisabled();
+    await userEvent.setup().click(btn);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('danger + type text → class chữ đỏ (danger-ghost pattern cũ)', () => {
+    render(
+      <Button type="text" danger>
+        Xoá
+      </Button>,
+    );
+    expect(screen.getByRole('button', { name: 'Xoá' }).className).toContain('text-st-fail');
+  });
+
+  it('danger + type primary → nền đỏ (danger solid pattern cũ)', () => {
+    render(
+      <Button type="primary" danger>
+        Xác nhận xoá
+      </Button>,
+    );
+    const cls = screen.getByRole('button', { name: 'Xác nhận xoá' }).className;
+    expect(cls).toContain('bg-st-fail');
+  });
+
+  it('htmlType submit cho form', () => {
+    render(
+      <Button type="primary" htmlType="submit">
+        Lưu
+      </Button>,
+    );
+    expect(screen.getByRole('button', { name: 'Lưu' })).toHaveAttribute('type', 'submit');
+  });
+
+  it('className passthrough append sau structural', () => {
+    render(<Button className="w-full">full</Button>);
+    expect(screen.getByRole('button', { name: 'full' })).toHaveClass('w-full');
+  });
+});
+
+describe('Button — completeness (Tier 1.5)', () => {
+  it('size small/middle/large → class height riêng', () => {
+    for (const [size, cls] of [
+      ['small', 'h-8'],
+      ['middle', 'h-9'],
+      ['large', 'h-10'],
+    ] as const) {
+      render(<Button size={size}>{size}</Button>);
+      expect(screen.getByRole('button', { name: size })).toHaveClass(cls);
+      cleanup();
+    }
+  });
+
+  it('loading → Spinner thay icon + disable bất kể disabled prop', () => {
+    render(
+      <Button type="primary" loading icon={<span data-testid="ic" />}>
+        Lưu
+      </Button>,
+    );
+    const btn = screen.getByRole('button', { name: /Lưu/ });
+    expect(btn).toBeDisabled();
+    expect(btn.querySelector('[role="status"]')).not.toBeNull();
+    expect(screen.queryByTestId('ic')).toBeNull();
+  });
+
+  it('block → w-full; icon hiển thị khi không loading', () => {
+    render(
+      <Button block icon={<span data-testid="ic2" />}>
+        full
+      </Button>,
+    );
+    const btn = screen.getByRole('button', { name: /full/ });
+    expect(btn).toHaveClass('w-full');
+    expect(screen.getByTestId('ic2')).toBeInTheDocument();
+  });
+
+  it('danger + type default → rơi về variant default (không nền đỏ)', () => {
+    render(
+      <Button danger>
+        Xoá mặc định
+      </Button>,
+    );
+    expect(screen.getByRole('button', { name: 'Xoá mặc định' }).className).not.toContain('bg-st-fail');
+  });
+});
+
+describe('Button — branch phụ (parity)', () => {
+  it('danger + default → fallback variant không nền đỏ (?? branch)', () => {
+    render(
+      <Button danger>
+        d
+      </Button>,
+    );
+    expect(screen.getByRole('button', { name: 'd' }).className).toContain('bg-s2');
+  });
+
+  it('htmlType reset + middle mặc định', () => {
+    render(
+      <Button htmlType="reset">
+        r
+      </Button>,
+    );
+    expect(screen.getByRole('button', { name: 'r' })).toHaveAttribute('type', 'reset');
+    expect(screen.getByRole('button', { name: 'r' })).toHaveClass('h-9');
+  });
+});
+
+describe('Button — modernize (vision-audit 2026-10-18)', () => {
+  it('base polish: rounded-lg + font-medium + duration-150 + focus ring accent/40 + active scale 0.98', () => {
+    render(<Button>polish</Button>);
+    const btn = screen.getByRole('button', { name: 'polish' });
+    expect(btn).toHaveClass(
+      'rounded-lg',
+      'font-medium',
+      'duration-150',
+      'focus-visible:ring-2',
+      'focus-visible:ring-accent/40',
+      'focus-visible:outline-none',
+      'active:scale-[0.98]',
+    );
+    // KHÔNG ring-offset — khe trắng quanh track tạo viền đôi (chuẩn user duyệt, rule 4)
+    expect(btn.className).not.toContain('ring-offset');
+  });
+
+  it('middle mặc định h-9 (36px antd middle)', () => {
+    render(<Button>mặc định</Button>);
+    expect(screen.getByRole('button', { name: 'mặc định' })).toHaveClass('h-9');
+  });
+
+  it('default variant có định nghĩa: bg-s2 + border-line, hover bg-s3 (không trắng-trên-trắng)', () => {
+    render(<Button>secondary</Button>);
+    expect(screen.getByRole('button', { name: 'secondary' })).toHaveClass(
+      'bg-s2',
+      'border-line',
+      'hover:bg-s3',
+    );
+  });
+
+  it('disabled dùng token --bg-disabled (dark-safe, không hex đen cứng)', () => {
+    render(
+      <Button disabled>
+        off
+      </Button>,
+    );
+    expect(screen.getByRole('button', { name: 'off' })).toHaveClass(
+      'disabled:bg-[var(--bg-disabled)]',
+    );
+  });
+
+  it('loading → cursor-wait + Spinner size-3.5 (không phải size-3 cũ) + disable', () => {
+    render(
+      <Button type="primary" loading icon={<span data-testid="ic" />}>
+        Lưu
+      </Button>,
+    );
+    const btn = screen.getByRole('button', { name: /Lưu/ });
+    expect(btn).toBeDisabled();
+    expect(btn).toHaveClass('cursor-wait');
+    const spinner = btn.querySelector('[role="status"]');
+    expect(spinner).not.toBeNull();
+    // role=status là wrapper ngoài — box size nằm ở node ring bên trong
+    expect(spinner!.querySelector('.size-3\\.5')).not.toBeNull();
+  });
+
+  it('padding theo size: small px-3 / middle px-4 / large px-5', () => {
+    for (const [size, cls] of [
+      ['small', 'px-3'],
+      ['middle', 'px-4'],
+      ['large', 'px-5'],
+    ] as const) {
+      render(<Button size={size}>{size}</Button>);
+      expect(screen.getByRole('button', { name: size })).toHaveClass(cls);
+      cleanup();
+    }
+  });
+});

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

@@ -0,0 +1,128 @@
+// Button — antd look, modernize pass (vision-audit 2026-10-18: phẳng/thấp/radius nhỏ,
+// secondary mất định nghĩa trên nền trắng): mặc định h-9 (36px antd middle), rounded-lg
+// 8px, font-medium + tracking nhẹ, default variant bg-s2 + border-line rõ (hover bg-s3),
+// primary hover accent-hi, focus ring accent/40 + offset canvas, active scale 0.98,
+// loading → Spinner 3.5 inline + cursor-wait. Disabled dùng token --bg-disabled (dark-safe).
+// API GIỮ NGUYÊN (type/danger/icon/htmlType/block/disabled) — chỉ thêm/nâng visual,
+// không break consumers (không ai trong repo truyền size=).
+// Map từ style cũ của repo: .tsk-btn--primary → type=primary · .tsk-btn/.sh-btn →
+// type=default · .tsk-btn--ghost/.sh-btn--ghost → type=text · .tsk-btn--danger →
+// type=primary+danger · .tsk-btn--danger-ghost → type=text+danger.
+// API theo antd: `type` = variant, `htmlType` = HTML button type.
+import { useRef, useState, type ButtonHTMLAttributes, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react';
+import { Spinner } from '../spinner/index';
+
+/** Ripple click — span overlay scale từ điểm chạm (bp-ripple, motion identity). */
+interface Ripple {
+  x: number;
+  y: number;
+  size: number;
+  id: number;
+}
+
+export type ButtonType = 'primary' | 'default' | 'text';
+export type ButtonSize = 'small' | 'middle' | 'large';
+
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  /** Variant visual — antd Button type. */
+  type?: ButtonType;
+  /** HTML button type (antd htmlType) — mặc định 'button' an toàn trong form. */
+  htmlType?: 'button' | 'submit' | 'reset';
+  /** Đỏ (nguy hiểm) — với type=primary nền đặc, type=text chữ đỏ, type=default rơi về variant default. */
+  danger?: boolean;
+  /** antd size: small (h-8) / middle (h-9, mặc định) / large (h-10). */
+  size?: ButtonSize;
+  /** Loading — Spinner 3.5 inline thay icon + disable + cursor-wait (antd loading). */
+  loading?: boolean;
+  /** Full-width (antd block). */
+  block?: boolean;
+  /** Icon trước nhãn (antd icon) — ẩn khi loading (Spinner thay). */
+  icon?: ReactNode;
+  children?: ReactNode;
+  /** Append sau structural classes (pattern antd). */
+  className?: string;
+}
+
+const BASE =
+  'inline-flex items-center justify-center gap-1 rounded-lg border font-medium tracking-[0.01em] transition-all duration-150 focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-line disabled:bg-[var(--bg-disabled)] disabled:text-ink4 active:scale-[0.98] hover:-translate-y-px hover:shadow-[var(--shadow-lift)]';
+
+const SIZE: Record<ButtonSize, string> = {
+  small: 'h-8 px-3 text-label',
+  middle: 'h-9 px-4 text-body',
+  large: 'h-10 px-5 text-body',
+} as const;
+
+const VARIANTS: Record<ButtonType, string> = {
+  'primary': 'border-accent bg-accent text-white hover:border-accent-hi hover:bg-accent-hi',
+  'default': 'border-line bg-s2 text-ink hover:bg-s3',
+  'text': 'border-transparent bg-transparent text-ink hover:bg-s3',
+};
+
+const DANGER: Partial<Record<ButtonType, string>> = {
+  'primary': 'border-st-fail bg-st-fail text-white hover:border-st-fail/85 hover:bg-st-fail/85',
+  'text': 'border-transparent bg-transparent text-st-fail hover:bg-st-fail/12',
+};
+
+export function Button({
+  type = 'default',
+  htmlType = 'button',
+  danger = false,
+  size = 'middle',
+  loading = false,
+  block = false,
+  icon,
+  className,
+  children,
+  disabled,
+  onPointerDown,
+  ...rest
+}: ButtonProps) {
+  const variant = danger ? (DANGER[type] ?? VARIANTS[type]) : VARIANTS[type];
+
+  // Ripple click (motion waves): spawn span tại điểm chạm, animationend tự prune.
+  // Reduced-motion: animation rơi 0.01ms → span invisible ngay + end-event vẫn fire.
+  const [ripples, setRipples] = useState<Ripple[]>([]);
+  const seq = useRef(0);
+
+  function handlePointerDown(e: ReactPointerEvent<HTMLButtonElement>) {
+    onPointerDown?.(e);
+    if (disabled || loading) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const size = Math.max(rect.width, rect.height) * 2;
+    const id = seq.current++;
+    setRipples((prev) => [
+      ...prev.slice(-3), // cap 4 ripple — spam click không tích tụ
+      { x: e.clientX - rect.left - size / 2, y: e.clientY - rect.top - size / 2, size, id },
+    ]);
+  }
+
+  function pruneRipple(id: number) {
+    setRipples((prev) => prev.filter((r) => r.id !== id));
+  }
+  // cursor tách khỏi BASE — loading cần cursor-wait đè cursor-pointer (cùng specificity,
+  // đặt điều kiện thay vì append sau để không phụ thuộc thứ tự CSS utilities).
+  return (
+    <button
+      type={htmlType}
+      disabled={disabled || loading}
+      onPointerDown={handlePointerDown}
+      className={`${BASE} relative overflow-hidden ${loading ? 'cursor-wait' : 'cursor-pointer'} ${SIZE[size]} ${variant}${block ? ' w-full' : ''}${className ? ` ${className}` : ''}`}
+      {...rest}
+    >
+      {ripples.map((r) => (
+        <span
+          key={r.id}
+          aria-hidden="true"
+          onAnimationEnd={() => pruneRipple(r.id)}
+          className={`pointer-events-none absolute rounded-pill animate-[bp-ripple_500ms_var(--ease-exit)] ${
+            type === 'primary' || danger ? 'bg-white/30' : 'bg-accent/20'
+          }`}
+          style={{ left: r.x, top: r.y, width: r.size, height: r.size }}
+        />
+      ))}
+      {loading && <Spinner size="default" label="" className="-ml-1" aria-hidden="true" />}
+      {!loading && icon}
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Calendar, type CalendarRangeValue } from './index';
+const meta = { title: 'Forms/Calendar', component: Calendar, tags: ['autodocs'] } satisfies Meta<typeof Calendar>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+const NOW = new Date(2026, 9, 18);
+const fmt = (d?: Date | null) => (d ? d.toLocaleDateString('vi-VN') : '—');
+
+/** Basic — current month, no selection. */
+export const Basic: S = {};
+
+/** LocaleEN — English weekday/month labels. */
+export const LocaleEN: S = {
+  name: 'Locale EN',
+  args: { locale: 'en' },
+};
+
+function CalendarControlledDemo() {
+  const [d, setD] = useState<Date | undefined>();
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <Calendar value={d} onChange={setD} />
+      <p className="m-0 font-mono text-meta text-ink3">
+        value: <strong className="text-ink">{d ? d.toLocaleDateString('vi-VN') : '—'}</strong>
+      </p>
+    </div>
+  );
+}
+
+/** Range — endpoints + in-range preview (same engine that drives DatePicker range). */
+export const Range: S = {
+  name: 'Range — endpoints + hover preview',
+  render: () => <CalendarRangeDemo />,
+};
+
+function DayHoverDemo() {
+  const [hovered, setHovered] = useState<Date | undefined>();
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <Calendar now={NOW} onDayHover={setHovered} />
+      <p className="m-0 font-mono text-meta text-ink3">
+        hovered: <strong className="text-ink">{fmt(hovered)}</strong>
+      </p>
+    </div>
+  );
+}
+
+/** Bare — no outer border/padding; embed inside panels or cards. */
+export const Bare: S = {
+  name: 'Bare — borderless embed',
+  render: () => (
+    <div className="w-[320px] rounded-xl border border-line bg-s1 p-3">
+      <Calendar bare now={NOW} />
+    </div>
+  ),
+};
+
+/** DayHover — onDayHover fires as the pointer moves across days (drives DatePicker range preview). */
+export const DayHover: S = {
+  name: 'DayHover — onDayHover readout (drives range preview)',
+  render: () => <DayHoverDemo />,
+};
+
+/** Controlled — useState demo: click a day → selected + shown below. */
+export const Controlled: S = {
+  render: () => <CalendarControlledDemo />,
+};
+
+/** DarkTheme — month grid on dark canvas. */
+export const DarkTheme: S = {
+  render: () => (
+    <div data-bp-theme="dark" className="w-[320px] rounded-xl bg-canvas p-4">
+      <Calendar />
+    </div>
+  ),
+};
+
+function CalendarRangeDemo() {
+  const [range, setRange] = useState<CalendarRangeValue>({});
+  const pick = (d: Date) => {
+    if (!range.start || (range.start && range.end)) setRange({ start: d, hover: null, end: null });
+    else if (d < range.start) setRange({ start: d, end: range.start, hover: null });
+    else setRange({ ...range, end: d, hover: null });
+  };
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <Calendar
+        now={NOW}
+        range={range}
+        onChange={pick}
+        onDayHover={(d) => setRange((r) => (r.start && !r.end ? { ...r, hover: d } : r))}
+      />
+      <p className="m-0 font-mono text-meta text-ink3">
+        range: <strong className="text-ink">{fmt(range.start)} → {fmt(range.end)}</strong>
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,92 @@
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Calendar } from './index.js';
+afterEach(cleanup);
+describe('Calendar', () => {
+  it('month + VN days + today + click onChange', () => {
+    const now = new Date(2026, 9, 15);
+    const onChange = vi.fn();
+    render(<Calendar now={now} onChange={onChange} />);
+    expect(screen.getByText(/Tháng 10/)).toBeInTheDocument();
+    fireEvent.click(screen.getByText('20'));
+    expect(onChange).toHaveBeenCalledWith(new Date(2026, 9, 20));
+  });
+  it('prev/next navigation', () => {
+    render(<Calendar now={new Date(2026, 9, 15)} />);
+    fireEvent.click(screen.getByLabelText('Tháng trước'));
+    expect(screen.getByText(/Tháng 9/)).toBeInTheDocument();
+  });
+});
+
+describe('Calendar — states ngôn ngữ nút Pagination', () => {
+  const now = new Date(2026, 9, 17); // 17/10/2026 = today
+
+  it('ngày thường → outline border-line + hover tint accent/5 (depth contract); selected → accent đặc + trắng + không viền', () => {
+    render(<Calendar now={now} value={new Date(2026, 9, 20)} />);
+    const normal = screen.getByLabelText(new Date(2026, 9, 15).toDateString());
+    expect(normal).toHaveClass('border-line', 'hover:bg-accent/5', 'bg-transparent');
+    expect(normal).not.toHaveClass('bg-accent');
+    const selected = screen.getByLabelText(new Date(2026, 9, 20).toDateString());
+    expect(selected).toHaveClass('bg-accent', 'text-white', 'font-medium');
+    expect(selected).not.toHaveClass('border-line');
+  });
+
+  it('today → outline + ring accent + text accent (không đổi nền)', () => {
+    render(<Calendar now={now} />);
+    const today = screen.getByLabelText(now.toDateString());
+    expect(today).toHaveClass('border-line', 'ring-accent', 'text-accent');
+    expect(today).not.toHaveClass('bg-accent');
+  });
+
+  it('adjacent tháng khác → disabled, không viền, không hover bg', () => {
+    render(<Calendar now={now} />);
+    const adj = screen.getByLabelText(new Date(2026, 8, 28).toDateString()); // 28/9
+    expect(adj).toBeDisabled();
+    expect(adj).not.toHaveClass('border-line');
+    expect(adj).not.toHaveClass('hover:bg-s3');
+    expect(adj).toHaveClass('text-ink3', 'cursor-not-allowed');
+  });
+
+  it('nav tháng → SVG chevron trong ô outline (không còn ký tự ‹ ›)', () => {
+    render(<Calendar now={now} />);
+    const prev = screen.getByLabelText('Tháng trước');
+    expect(prev.querySelector('svg')).not.toBeNull();
+    expect(prev).toHaveClass('border-line');
+    expect(screen.getByLabelText('Tháng sau').querySelector('svg')).not.toBeNull();
+  });
+});
+
+describe('Calendar — locale (batch ⑧ worker C)', () => {
+  const now = new Date(2026, 9, 15);
+
+  it('default vi — label tuần T2 đầu tuần + tháng tiếng Việt', () => {
+    render(<Calendar now={now} />);
+    expect(screen.getByText(/Tháng 10/)).toBeInTheDocument();
+    expect(screen.getByText('T2')).toBeInTheDocument();
+  });
+
+  it('locale="en" — tháng + label tuần tiếng Anh, firstDayOfWeek = Chủ nhật', () => {
+    render(<Calendar now={now} locale="en" />);
+    expect(screen.getByText(/October 2026/)).toBeInTheDocument();
+    expect(screen.getByText('Su')).toBeInTheDocument();
+    expect(screen.getByLabelText('Previous month')).toBeInTheDocument();
+    // 01/10/2026 = thứ 5 → Sun-first có 4 ô trống trước → grid bắt đầu bằng 1 ô CN (27/9)
+    expect(screen.getByLabelText(new Date(2026, 8, 27).toDateString())).toBeInTheDocument();
+  });
+});
+
+describe('Calendar — responsive 375 (bugfix PO: cell co + grid 7 fr đều)', () => {
+  it('grid 7 cột đều (grid-cols-7 minmax(0,1fr)) + cell w-full min-w-0 (co theo container hẹp)', () => {
+    render(<Calendar now={new Date(2026, 9, 15)} />);
+    const grids = screen.getByRole('grid').querySelectorAll('.grid-cols-7');
+    expect(grids.length).toBe(2); // [0] weekday labels, [1] lưới ngày
+    // full tuần × full tuần (35–42 cell tuỳ tháng) — cell co theo track, không tràn
+    const cells = grids[1].querySelectorAll('button');
+    expect(cells.length).toBeGreaterThanOrEqual(35);
+    expect(cells.length % 7).toBe(0);
+    for (const cell of cells) {
+      expect(cell.className).toContain('w-full');
+      expect(cell.className).toContain('min-w-0');
+    }
+  });
+});