create-wakii-stack 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,112 @@
+// Pagination tests — pageList window ±1 + đầu/cuối + ellipsis; item active/hover/disabled.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Pagination, pageList } from './index.js';
+
+afterEach(cleanup);
+
+describe('pageList', () => {
+  it('≤7 trang → đầy đủ không ellipsis', () => {
+    expect(pageList(4, 7)).toEqual([1, 2, 3, 4, 5, 6, 7]);
+  });
+
+  it('giữa xa biên → 1 … p-1 p p+1 … N', () => {
+    expect(pageList(5, 10)).toEqual([1, 'ellipsis-prev', 4, 5, 6, 'ellipsis-next', 10]);
+  });
+
+  it('current=1 → không ellipsis-prev', () => {
+    expect(pageList(1, 10)).toEqual([1, 2, 'ellipsis-next', 10]);
+  });
+});
+
+describe('Pagination', () => {
+  it('active → bg-accent + text-white + font-medium, không viền; item thường → outline border-line + hover:bg-s3', () => {
+    render(<Pagination current={2} pageSize={10} total={100} onChange={vi.fn()} />);
+    const active = screen.getByRole('button', { name: 'Trang 2' });
+    expect(active).toHaveClass('bg-accent', 'text-white', 'font-medium');
+    expect(active).toHaveAttribute('aria-current', 'page');
+    expect(active).not.toHaveClass('border-line');
+    const normal = screen.getByRole('button', { name: 'Trang 1' });
+    expect(normal).toHaveClass('border', 'border-line', 'hover:bg-s3', 'bg-transparent');
+    expect(normal).not.toHaveClass('bg-accent');
+  });
+
+  it('prev disabled ở trang 1 → text-ink3 cursor-not-allowed, không hover bg không viền; next enabled có viền', () => {
+    render(<Pagination current={1} pageSize={10} total={100} onChange={vi.fn()} />);
+    const prev = screen.getByRole('button', { name: 'Trang trước' });
+    expect(prev).toBeDisabled();
+    expect(prev).toHaveClass('text-ink3', 'cursor-not-allowed');
+    expect(prev).not.toHaveClass('hover:bg-s3');
+    expect(prev).not.toHaveClass('border-line');
+    const next = screen.getByRole('button', { name: 'Trang sau' });
+    expect(next).toBeEnabled();
+    expect(next).toHaveClass('border-line', 'hover:bg-s3');
+    expect(next).not.toHaveClass('cursor-not-allowed');
+  });
+
+  it('next disabled ở trang cuối', () => {
+    render(<Pagination current={10} pageSize={10} total={100} onChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Trang sau' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Trang trước' })).toBeEnabled();
+  });
+
+  it('prev/next dùng SVG chevron (không còn ‹ › ký tự)', () => {
+    render(<Pagination current={5} pageSize={10} total={100} onChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Trang trước' }).querySelector('svg')).not.toBeNull();
+    expect(screen.getByRole('button', { name: 'Trang sau' }).querySelector('svg')).not.toBeNull();
+  });
+
+  it('click trang → onChange(page)', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Pagination current={1} pageSize={10} total={100} onChange={onChange} />);
+    await user.click(screen.getByRole('button', { name: 'Trang 2' }));
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+
+  it('ellipsis ··· click → jump ±5', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Pagination current={5} pageSize={10} total={100} onChange={onChange} />);
+    const dots = screen.getByRole('button', { name: 'Tiến 5 trang' });
+    expect(dots).toHaveTextContent('···');
+    await user.click(dots);
+    expect(onChange).toHaveBeenCalledWith(10);
+    await user.click(screen.getByRole('button', { name: 'Lùi 5 trang' }));
+    expect(onChange).toHaveBeenCalledWith(1);
+  });
+});
+
+describe('Pagination — branch phụ', () => {
+  it('click trang hiện tại → onChange KHÔNG gọi (guard === current)', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Pagination current={2} pageSize={10} total={100} onChange={onChange} />);
+    await user.click(screen.getByRole('button', { name: 'Trang 2' }));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('total nhỏ → pageCount tối thiểu 1', () => {
+    render(<Pagination current={1} pageSize={10} total={5} onChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Trang sau' })).toBeDisabled();
+  });
+});
+
+describe('Pagination — guard branch', () => {
+  it('click trang hiện tại (Trang 1 ở current=1) → guard không gọi onChange', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Pagination current={1} pageSize={10} total={50} onChange={onChange} />);
+    await user.click(screen.getByRole('button', { name: 'Trang 1' }));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('Pagination — branch phụ 2', () => {
+  it('pageCount ≤ 7 → không có ellipsis', () => {
+    render(<Pagination current={4} pageSize={10} total={70} onChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Trang 1' })).toBeInTheDocument();
+    expect(screen.queryByText('···')).toBeNull();
+  });
+});

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

@@ -0,0 +1,59 @@
+// PanelMenu — vertical accordion menu.
+import { useState, type ReactNode } from 'react';
+
+export interface PanelMenuItem {
+  key: string;
+  label: string;
+  icon?: ReactNode;
+  children?: Array<{ key: string; label: string }>;
+  onClick?: () => void;
+}
+
+export interface PanelMenuProps { items: PanelMenuItem[]; className?: string }
+
+export function PanelMenu({ items, className }: PanelMenuProps) {
+  const [openKeys, setOpenKeys] = useState<Set<string>>(new Set());
+  function toggle(k: string) {
+    setOpenKeys((prev) => {
+      const n = new Set(prev);
+      if (n.has(k)) n.delete(k);
+      else n.add(k);
+      return n;
+    });
+  }
+  return (
+    <nav className={`overflow-hidden rounded-xl border border-line bg-s2${className ? ` ${className}` : ''}`}>
+      {items.map((item) => (
+        <div key={item.key}>
+          <button type="button"
+            onClick={() => item.children ? toggle(item.key) : item.onClick?.()}
+            className="flex w-full cursor-pointer items-center gap-2 border-none bg-transparent px-4 py-2.5 text-left text-body font-medium text-ink hover:bg-s3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40">
+            {item.icon}
+            {item.label}
+            {item.children && <span className={`ml-auto text-[10px] text-ink3 transition-transform ${openKeys.has(item.key) ? 'rotate-180' : ''}`}>▾</span>}
+          </button>
+          {item.children && (
+            <div
+              className={`grid min-h-0 overflow-hidden transition-[grid-template-rows] duration-200 ease-[var(--ease-enter)] ${
+                openKeys.has(item.key) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+              }`}
+              aria-hidden={!openKeys.has(item.key) || undefined}
+              inert={!openKeys.has(item.key)}
+            >
+              <ul className="m-0 min-h-0 list-none overflow-hidden p-0">
+                {item.children.map((sub) => (
+                  <li key={sub.key}>
+                    <button type="button"
+                      className="w-full cursor-pointer border-none bg-transparent py-2 pl-10 pr-4 text-left text-body text-ink2 hover:text-accent">
+                      {sub.label}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+}

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

@@ -0,0 +1,96 @@
+// PanelMenu stories — accordion + icons / leaf selection demo.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PanelMenu } from './index';
+import { Icon } from '../icons/index';
+
+/** Vertical accordion menu — group headers, leaf actions. */
+const meta = { title: 'Navigation/PanelMenu', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  name: 'Basic — accordion + icons',
+  render: () => (
+    <PanelMenu
+      className="w-64"
+      items={[
+        {
+          key: 'manage',
+          label: 'Manage',
+          icon: <Icon name="menu-bars" size={14} />,
+          children: [
+            { key: 'tasks', label: 'Tasks' },
+            { key: 'users', label: 'Members' },
+          ],
+        },
+        {
+          key: 'reports',
+          label: 'Reports',
+          icon: <Icon name="calendar" size={14} />,
+          children: [{ key: 'weekly', label: 'Weekly' }],
+        },
+      ]}
+    />
+  ),
+};
+
+function SelectionDemoInner() {
+  const [selected, setSelected] = useState<string | null>(null);
+    return (
+      <div className="flex flex-col gap-3">
+        <span className="text-meta text-ink2">Viewing: {selected ?? '—'}</span>
+        <PanelMenu
+          className="w-64"
+          items={[
+            {
+              key: 'home',
+              label: 'Home',
+              icon: <Icon name="home" size={14} />,
+              onClick: () => setSelected('Home'),
+            },
+            {
+              key: 'settings',
+              label: 'Settings',
+              icon: <Icon name="settings" size={14} />,
+              children: [
+                { key: 'profile', label: 'Profile' },
+                { key: 'security', label: 'Security' },
+              ],
+            },
+          ]}
+        />
+      </div>
+    );
+}
+
+export const SelectionDemo: Story = {
+  name: 'Demo — leaf select + root onClick',
+  render: () => <SelectionDemoInner />,
+};
+
+export const MultipleOpen: Story = {
+  name: 'Multiple open — panels expand independently (click both)',
+  render: () => (
+    <PanelMenu
+      className="w-64"
+      items={[
+        {
+          key: 'manage',
+          label: 'Manage',
+          icon: <Icon name="menu-bars" size={14} />,
+          children: [
+            { key: 'tasks', label: 'Tasks' },
+            { key: 'users', label: 'Members' },
+          ],
+        },
+        {
+          key: 'reports',
+          label: 'Reports',
+          icon: <Icon name="calendar" size={14} />,
+          children: [{ key: 'weekly', label: 'Weekly' }],
+        },
+      ]}
+    />
+  ),
+};

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

@@ -0,0 +1,64 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it } from 'vitest';
+import { PanelMenu } from './index.js';
+afterEach(cleanup);
+describe('PanelMenu', () => {
+  it('accordion open/close', async () => {
+    const user = userEvent.setup();
+    render(<PanelMenu items={[{ key: 's', label: 'Settings', children: [{ key: 'g', label: 'General' }] }]} />);
+    await user.click(screen.getByText('Settings'));
+    expect(screen.getByText('General')).toBeInTheDocument();
+  });
+});
+
+describe('PanelMenu — expand/collapse + selection', () => {
+  const items = [
+    {
+      key: 'group',
+      label: 'Manage',
+      children: [
+        { key: 'tasks', label: 'Tasks' },
+        { key: 'users', label: 'Users' },
+      ],
+    },
+  ];
+
+  it('click group → children hiện; click lần nữa → ẩn (grid 0fr + aria-hidden)', async () => {
+    const user = userEvent.setup();
+    render(<PanelMenu items={items} />);
+    // luôn render (animation 0fr↔1fr): ban đầu bọc aria-hidden
+    expect(screen.getByText('Tasks').closest('[aria-hidden="true"]')).not.toBeNull();
+    await user.click(screen.getByRole('button', { name: /Manage/ }));
+    expect(screen.getByText('Tasks')).toBeInTheDocument();
+    expect(screen.getByText('Tasks').closest('[aria-hidden="true"]')).toBeNull();
+    await user.click(screen.getByRole('button', { name: /Manage/ }));
+    expect(screen.getByText('Tasks').closest('[aria-hidden="true"]')).not.toBeNull();
+  });
+
+  it('leaf onClick (không children) → callback', async () => {
+    const onLeaf = vi.fn();
+    const user = userEvent.setup();
+    render(<PanelMenu items={[{ key: 'home', label: 'Home', onClick: onLeaf }]} />);
+    await user.click(screen.getByRole('button', { name: 'Home' }));
+    expect(onLeaf).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('PanelMenu — multiple open (Set state)', () => {
+  it('mở 2 group → cả hai cùng mở (không single-open accordion)', async () => {
+    const user = userEvent.setup();
+    render(
+      <PanelMenu
+        items={[
+          { key: 'a', label: 'Group A', children: [{ key: 'a1', label: 'A1' }] },
+          { key: 'b', label: 'Group B', children: [{ key: 'b1', label: 'B1' }] },
+        ]}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: /Group A/ }));
+    await user.click(screen.getByRole('button', { name: /Group B/ }));
+    expect(screen.getByText('A1')).toBeInTheDocument();
+    expect(screen.getByText('B1')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,62 @@
+// Parallax — scroll-linked translateY (motion-effects W8, 0 deps): element trôi
+// chậm hơn trang theo `speed` (0–1) — scroll listener rAF-throttled +
+// getBoundingClientRect, offset đối xứng qua tâm viewport. Ghi style TRỰC TIẾP
+// lên node (không setState — tránh re-render churn từng frame). TỰ TẮT khi
+// prefers-reduced-motion (useMediaQuery) hay `disabled` → children render tĩnh.
+import { useEffect, useRef, type CSSProperties, type ReactNode } from 'react';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+
+export interface ParallaxProps {
+  /** Tốc độ trôi 0–1: 0 = đứng yên tương đối với viewport, 1 = trôi mạnh nhất. */
+  speed?: number;
+  /** Biên trôi tối đa px (default 120; 240–360 cho chuyển động đậm — template landing). */
+  strength?: number;
+  /** Phóng nhẹ theo tiến độ trôi (ảnh hero) — scale 1 → 1 + speed × 0.15. */
+  scale?: boolean;
+  /** Tắt hiệu ứng (children vẫn render bình thường). */
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+export function Parallax({ speed = 0.3, strength = 120, scale = false, disabled, className, children }: ParallaxProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const reduced = useMediaQuery('(prefers-reduced-motion: reduce)');
+  const active = !disabled && !reduced && speed !== 0;
+
+  useEffect(() => {
+    if (!active) return;
+    let raf = 0;
+    const update = () => {
+      raf = 0;
+      const el = ref.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      // tâm element lệch bao nhiêu so với tâm viewport, chuẩn hoá về -1..1
+      const progress = (rect.top + rect.height / 2 - window.innerHeight / 2) / (window.innerHeight / 2);
+      const clamped = Math.max(-1, Math.min(1, progress));
+      const y = -clamped * speed * strength;
+      el.style.transform = scale
+        ? `translate3d(0, ${y}px, 0) scale(${1 + speed * 0.15})`
+        : `translate3d(0, ${y}px, 0)`;
+      el.style.willChange = 'transform';
+    };
+    const schedule = () => {
+      if (!raf) raf = requestAnimationFrame(update);
+    };
+    update(); // frame đầu — đặt vị trí ngay cả khi chưa scroll
+    document.addEventListener('scroll', schedule, true); // capture: bắt scroll trong container lồng
+    window.addEventListener('resize', schedule);
+    return () => {
+      document.removeEventListener('scroll', schedule, true);
+      window.removeEventListener('resize', schedule);
+      if (raf) cancelAnimationFrame(raf); // huỷ frame chưa chạy — không touching node sau unmount
+    };
+  }, [active, speed, strength, scale]);
+
+  return (
+    <div ref={ref} style={active ? undefined : ({ transform: 'none' } satisfies CSSProperties)} className={className}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,115 @@
+// Parallax stories — scroll-linked drift against the Storybook iframe scroll.
+// Scroll the preview page: cards move slower than the page at their `speed`.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Parallax } from './index';
+
+// Meta WITHOUT `component` — children is required, CSF would force args on
+// render-only stories (image.stories pattern).
+const meta = { title: 'Theming & Motion/Parallax', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Seeded picsum URL — deterministic real photo per seed name. */
+function photo(seed: string, w: number, h: number) {
+  return `https://picsum.photos/seed/${seed}/${w}/${h}`;
+}
+
+/** Scroll runway so the parallax cards actually travel through the viewport. */
+function Runway() {
+  return (
+    <>
+      <div className="h-72 rounded-xl border border-dashed border-line bg-s2" />
+      <div className="h-72 rounded-xl border border-dashed border-line bg-s2" />
+    </>
+  );
+}
+
+const HINT = 'Scroll the preview page — the card drifts slower than the page. Turn on prefers-reduced-motion and the effect switches itself off.';
+
+/** Basic — one hero card at speed 0.3. */
+export const Basic: Story = {
+  name: 'Basic — hero card, speed 0.3',
+  render: () => (
+    <div className="flex max-w-xl flex-col gap-4">
+      <Parallax speed={0.3} className="overflow-hidden rounded-xl">
+        <img
+          src={photo('orca-parallax-peak', 800, 450)}
+          alt="Mountain peak hero with parallax drift (picsum seed: orca-parallax-peak)"
+          className="aspect-video w-full object-cover"
+        />
+      </Parallax>
+      <p className="m-0 text-meta text-ink3">{HINT}</p>
+      <Runway />
+    </div>
+  ),
+};
+
+/** SpeedRamp — three photos side by side, same content, different speeds. */
+export const SpeedRamp: Story = {
+  name: 'Speed ramp — 0.1 / 0.3 / 0.6 side by side',
+  render: () => (
+    <div className="flex max-w-3xl flex-col gap-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        {(
+          [
+            ['orca-parallax-canyon', 0.1],
+            ['orca-parallax-dune', 0.3],
+            ['orca-parallax-river', 0.6],
+          ] as const
+        ).map(([seed, speed]) => (
+          <figure key={seed} className="m-0 flex flex-col gap-2">
+            <Parallax speed={speed} className="overflow-hidden rounded-xl">
+              <img
+                src={photo(seed, 480, 320)}
+                alt={`Parallax photo at speed ${speed} (picsum seed: ${seed})`}
+                className="aspect-[3/2] w-full object-cover"
+              />
+            </Parallax>
+            <figcaption className="text-center font-mono text-meta text-ink3">speed {speed}</figcaption>
+          </figure>
+        ))}
+      </div>
+      <p className="m-0 text-meta text-ink3">{HINT}</p>
+      <Runway />
+    </div>
+  ),
+};
+
+/** WithScale — the card also zooms slightly while drifting (hero banner use). */
+export const WithScale: Story = {
+  name: 'With scale — drift + gentle zoom',
+  render: () => (
+    <div className="flex max-w-xl flex-col gap-4">
+      <Parallax speed={0.4} scale className="overflow-hidden rounded-xl">
+        <img
+          src={photo('orca-parallax-coast', 800, 450)}
+          alt="Coastal cliff with parallax drift and zoom (picsum seed: orca-parallax-coast)"
+          className="aspect-video w-full object-cover"
+        />
+      </Parallax>
+      <p className="m-0 text-meta text-ink3">{HINT}</p>
+      <Runway />
+    </div>
+  ),
+};
+
+/** Disabled — same setup with the effect off (also what reduced-motion sees). */
+export const Disabled: Story = {
+  name: 'Disabled — static card (reduced-motion fallback)',
+  render: () => (
+    <div className="flex max-w-xl flex-col gap-4">
+      <Parallax speed={0.3} disabled className="overflow-hidden rounded-xl">
+        <img
+          src={photo('orca-parallax-forest', 800, 450)}
+          alt="Forest canopy, parallax disabled (picsum seed: orca-parallax-forest)"
+          className="aspect-video w-full object-cover"
+        />
+      </Parallax>
+      <p className="m-0 text-meta text-ink3">
+        <strong className="text-ink">disabled</strong> renders the children untouched — this is exactly what users with{' '}
+        <strong className="text-ink">prefers-reduced-motion</strong> get automatically.
+      </p>
+      <Runway />
+    </div>
+  ),
+};

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

@@ -0,0 +1,148 @@
+// Parallax tests — transform đặt theo rect mock (sync frame đầu) + scroll đổi
+// offset (rAF) + reduced-motion/disabled/speed-0 tắt + cleanup listener/rAF.
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Parallax } from './index.js';
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  window.matchMedia = originalMatchMedia; // mock matchMedia là vi.fn (không phải spy) — hoàn tác tay
+});
+
+const originalMatchMedia = window.matchMedia;
+
+function mockRect(top: number, height = 100) {
+  return vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+    top,
+    left: 0,
+    width: 200,
+    height,
+    bottom: top + height,
+    right: 200,
+    x: 0,
+    y: top,
+    toJSON: () => ({}),
+  } as DOMRect);
+}
+
+/** jsdom rAF chạy trên timer ~16ms — chờ 1 frame thật. */
+const waitFrame = () => new Promise((r) => setTimeout(r, 30));
+
+function translateYOf(el: HTMLElement): number {
+  const m = /translate3d\(0, ([-\d.]+)px/.exec(el.style.transform);
+  return m ? Number(m[1]) : NaN;
+}
+
+/** Mock matchMedia — pattern useMediaQuery.test.ts. */
+function mockMatchMedia(matches: boolean) {
+  window.matchMedia = vi.fn(() => ({
+    matches,
+    media: '(prefers-reduced-motion: reduce)',
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  })) as unknown as typeof window.matchMedia;
+}
+
+describe('Parallax', () => {
+  it('mount → transform đặt ngay theo rect mock + speed (frame đầu sync)', () => {
+    mockRect(0); // tâm element (50) lệch tâm viewport (384) → progress ≈ -0.87
+    const { container } = render(
+      <Parallax speed={0.5}>
+        <div>hero</div>
+      </Parallax>,
+    );
+    const y = translateYOf(container.firstElementChild as HTMLElement);
+    expect(y).toBeCloseTo(52.1875, 2);
+    expect((container.firstElementChild as HTMLElement).style.willChange).toBe('transform');
+  });
+
+  it('scroll → transform đổi theo rect mới (rAF throttle)', async () => {
+    const rectSpy = mockRect(0);
+    const { container } = render(
+      <Parallax speed={0.5}>
+        <div>hero</div>
+      </Parallax>,
+    );
+    rectSpy.mockReturnValue({
+      top: 400, left: 0, width: 200, height: 100, bottom: 500, right: 200, x: 0, y: 400, toJSON: () => ({}),
+    } as DOMRect);
+    document.dispatchEvent(new Event('scroll'));
+    await waitFrame();
+    // progress = (400+50−384)/384 = 0.171875 (exact) → y = −10.3125 (exact)
+    expect(translateYOf(container.firstElementChild as HTMLElement)).toBeCloseTo(-10.3125, 3);
+  });
+
+  it('prefers-reduced-motion → tự tắt: không transform, scroll không có tác dụng', async () => {
+    mockMatchMedia(true);
+    mockRect(0);
+    const { container } = render(
+      <Parallax speed={0.5}>
+        <div>hero</div>
+      </Parallax>,
+    );
+    document.dispatchEvent(new Event('scroll'));
+    await waitFrame();
+    expect((container.firstElementChild as HTMLElement).style.transform).toBe('none');
+  });
+
+  it('disabled → tắt hẳn (children vẫn render)', async () => {
+    mockRect(0);
+    const { container, getByText } = render(
+      <Parallax speed={0.5} disabled>
+        <div>hero</div>
+      </Parallax>,
+    );
+    document.dispatchEvent(new Event('scroll'));
+    await waitFrame();
+    expect(getByText('hero')).toBeInTheDocument();
+    expect((container.firstElementChild as HTMLElement).style.transform).toBe('none');
+  });
+
+  it('speed=0 → inactive (không track scroll)', () => {
+    mockRect(0);
+    const { container } = render(
+      <Parallax speed={0}>
+        <div>hero</div>
+      </Parallax>,
+    );
+    expect((container.firstElementChild as HTMLElement).style.transform).toBe('none');
+  });
+
+  it('scale → transform kèm scale theo speed', () => {
+    mockRect(0);
+    const { container } = render(
+      <Parallax speed={0.5} scale>
+        <div>hero</div>
+      </Parallax>,
+    );
+    expect((container.firstElementChild as HTMLElement).style.transform).toMatch(/scale\(1\.07/);
+  });
+
+  it('strength 280 → biên trôi gấp 280/120 tại cùng rect (default 120 giữ tương thích)', () => {
+    mockRect(0);
+    const { container } = render(
+      <Parallax speed={0.5} strength={280}>
+        <div>hero</div>
+      </Parallax>,
+    );
+    // progress -0.8698 × 0.5 × 280 = 121.7708 (mặc định 120 sẽ là 52.1875)
+    expect(translateYOf(container.firstElementChild as HTMLElement)).toBeCloseTo(121.7708, 2);
+  });
+
+  it('cleanup: unmount → scroll không còn schedule rAF', async () => {
+    mockRect(0);
+    const rafSpy = vi.spyOn(window, 'requestAnimationFrame');
+    const { unmount } = render(
+      <Parallax speed={0.5}>
+        <div>hero</div>
+      </Parallax>,
+    );
+    await waitFrame();
+    const callsAfterMount = rafSpy.mock.calls.length;
+    unmount();
+    document.dispatchEvent(new Event('scroll'));
+    await waitFrame();
+    expect(rafSpy.mock.calls.length).toBe(callsAfterMount);
+  });
+});