create-wakii-stack 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,76 @@
+// Image — ảnh có preview (antd lite): click ảnh → overlay full-giữa, ESC/click
+// đóng. Portal body; alt bắt buộc a11y.
+// A11y (batch ⑫ worker C): img onClick → role=button + tabIndex + Enter/Space
+// (trước đây chỉ click chuột mở preview).
+// A11y (batch F 2026-10-18): role=dialog + focus trap (useFocusTrap — pattern
+// Modal: mở → focus overlay, Tab vòng trong, đóng → trả focus về thumbnail).
+import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { createPortal } from 'react-dom';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+
+export interface ImageProps {
+  /** Đường dẫn ảnh (bắt buộc). */
+  src: string;
+  /** Alt bắt buộc a11y — cũng là aria-label overlay preview. */
+  alt: string;
+  /** Bề rộng ảnh (number px | CSS string). */
+  width?: number | string;
+  className?: string;
+}
+
+export function UiImage({ src, alt, width, className }: ImageProps) {
+  const [preview, setPreview] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(overlayRef, preview);
+
+  useEffect(() => {
+    if (!preview) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setPreview(false);
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [preview]);
+
+  const openPreview = () => setPreview(true);
+  const onImgKey = (e: ReactKeyboardEvent<HTMLImageElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      openPreview();
+    }
+  };
+
+  return (
+    <>
+      <img
+        src={src}
+        alt={alt}
+        width={width}
+        onLoad={() => setLoaded(true)}
+        role="button"
+        tabIndex={0}
+        aria-label={`${alt} — phóng to`}
+        className={`cursor-zoom-in rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-accent/40 transition-opacity duration-200 hover:opacity-90 active:opacity-80 ${loaded ? 'opacity-100' : 'opacity-0'}${className ? ` ${className}` : ''}`}
+        onClick={openPreview}
+        onKeyDown={onImgKey}
+      />
+      {preview &&
+        createPortal(
+          <div
+            ref={overlayRef}
+            role="dialog"
+            aria-modal="true"
+            aria-label={alt}
+            tabIndex={-1}
+            className="fixed inset-0 z-[var(--z-modal)] flex cursor-zoom-out items-center justify-center bg-scrim-4 p-8 outline-none animate-[bp-fade-in_var(--motion-fast)_var(--ease-enter)]"
+            onClick={() => setPreview(false)}
+            data-testid="image-preview"
+          >
+            <img src={src} alt={alt} className="max-h-full max-w-full rounded-lg" />
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}

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

@@ -0,0 +1,33 @@
+// Inplace — click-to-edit toggle (antd lite). Depth contract 2026-10-19:
+// hover tint accent/4 + press chìm 1px, transition ease-smooth 240ms.
+import { useState, type ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface InplaceProps {
+  /** Nội dung hiển thị khi đóng. */
+  display: ReactNode;
+  /** Nội dung edit form khi mở. */
+  children: ReactNode;
+  onClose?: () => void;
+  className?: string;
+}
+
+export function Inplace({ display, children, onClose, className }: InplaceProps) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className={className}>
+      {open ? (
+        <span className="inline-flex items-center gap-2">
+          {children}
+          <button type="button" aria-label="Đóng" onClick={() => { setOpen(false); onClose?.(); }}
+            className="cursor-pointer border-none bg-transparent text-label text-ink3 hover:text-ink focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none"><Icon name="times" size={12} /></button>
+        </span>
+      ) : (
+        <button type="button" onClick={() => setOpen(true)}
+          className="cursor-pointer rounded-lg border border-dashed border-line bg-transparent px-2 py-1 text-body text-ink2 transition-[color,border-color,background-color,transform] duration-[240ms] [transition-timing-function:var(--ease-smooth)] hover:border-accent hover:bg-[color-mix(in_srgb,var(--accent)_4%,transparent)] hover:text-ink active:translate-y-px focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none">
+          {display}
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,75 @@
+// Inplace stories — click-to-edit toggle: display → edit form → × closes.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Inplace } from './index';
+import { Input } from '../input/index';
+
+const meta = { title: 'Forms/Inplace', component: Inplace, tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** Basic — click the display to edit, × to close. */
+export const Basic: Story = {
+  render: () => (
+    <Inplace display={<span className="font-medium">My project</span>}>
+      <Input defaultValue="My project" aria-label="Edit name" className="w-56" />
+    </Inplace>
+  ),
+};
+
+/** WithTextarea — long-text edit: display wraps to 2 lines, Textarea in the edit form. */
+export const WithTextarea: Story = {
+  name: 'With Textarea — long text edit',
+  render: () => (
+    <Inplace
+      display={
+        <span className="block max-w-[280px] text-body text-ink">
+          Architecture overview — Module Federation host loading remotes through the nginx gateway.
+        </span>
+      }
+    >
+      <textarea
+        aria-label="Edit description"
+        defaultValue="Architecture overview — Module Federation host loading remotes through the nginx gateway."
+        className="h-20 w-72 rounded-lg border border-line bg-canvas p-2 text-body text-ink"
+      />
+    </Inplace>
+  ),
+};
+
+/** RichDisplay — Avatar + Tag + text row as the display node. */
+export const RichDisplay: Story = {
+  name: 'Rich display — Tag + text row',
+  render: () => (
+    <Inplace
+      display={
+        <span className="flex items-center gap-2">
+          <span className="rounded-pill bg-accent/10 px-2 py-0.5 text-meta text-accent">owner</span>
+          <span className="font-medium text-ink">alice@demo.local</span>
+        </span>
+      }
+    >
+      <Input defaultValue="alice@demo.local" aria-label="Edit owner" className="w-56" />
+    </Inplace>
+  ),
+};
+
+/** Controlled — useState demo: onClose fires when the edit form closes. */
+export const Controlled: Story = {
+  render: () => <InplaceControlledDemo />,
+};
+
+function InplaceControlledDemo() {
+  const [closed, setClosed] = useState(0);
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <Inplace
+        display={<span>Config A</span>}
+        onClose={() => setClosed((n) => n + 1)}
+      >
+        <Input defaultValue="Config A" aria-label="Edit config" className="w-56" />
+      </Inplace>
+      <p className="m-0 font-mono text-meta text-ink3">onClose count: <strong className="text-ink">{closed}</strong></p>
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+// Inplace tests — click display → edit mode (children), ✕ → display + onClose.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Inplace } from './index.js';
+
+afterEach(cleanup);
+
+describe('Inplace', () => {
+  it('mặc định đóng — display trong nút; children ẩn', () => {
+    render(
+      <Inplace display="Tên: Alice">
+        <input aria-label="Sửa tên" defaultValue="Alice" />
+      </Inplace>,
+    );
+    expect(screen.getByText('Tên: Alice')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Sửa tên')).toBeNull();
+  });
+
+  it('click display → edit mode: children hiện, display biến mất', async () => {
+    const user = userEvent.setup();
+    render(
+      <Inplace display="Tên: Alice">
+        <input aria-label="Sửa tên" defaultValue="Alice" />
+      </Inplace>,
+    );
+    await user.click(screen.getByText('Tên: Alice'));
+    expect(screen.getByLabelText('Sửa tên')).toBeInTheDocument();
+    expect(screen.queryByText('Tên: Alice')).toBeNull();
+  });
+
+  it('nút ✕ → về display + onClose gọi', async () => {
+    const onClose = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Inplace display="Tên: Alice" onClose={onClose}>
+        <input aria-label="Sửa tên" defaultValue="Alice" />
+      </Inplace>,
+    );
+    await user.click(screen.getByText('Tên: Alice'));
+    await user.click(screen.getByRole('button', { name: 'Đóng' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('Tên: Alice')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Sửa tên')).toBeNull();
+  });
+
+  it('edit mode: gõ trong children hoạt động bình thường (form tự quản)', async () => {
+    const user = userEvent.setup();
+    render(
+      <Inplace display="Tên: Alice">
+        <input aria-label="Sửa tên" defaultValue="Alice" />
+      </Inplace>,
+    );
+    await user.click(screen.getByText('Tên: Alice'));
+    await user.type(screen.getByLabelText('Sửa tên'), ' Bob');
+    expect(screen.getByLabelText('Sửa tên')).toHaveValue('Alice Bob');
+  });
+});

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

@@ -0,0 +1,133 @@
+// Input + Textarea — antd look (decision 2026-10-17): h-8, border line, focus ring
+// accent, invalid viền đỏ. Completeness audit (Tier 1.5): size + prefix/suffix
+// (affix pattern antd — wrapper mang viền, input trần bên trong) + allowClear
+// (controlled: cần value + onChange) + passthrough native props.
+// Depth contract 2026-10-19 (direction-approved.md): rest bg-s3 lún + ele-1,
+// focus bg-s1 nổi + ring 3px accent/40 + ele-2 — elevation đổi CÓ animate
+// (ease-smooth 200ms); press/disabled hạ bóng.
+import type { ChangeEvent, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+import { Icon } from '../icons/index.js';
+import { SearchInput } from './input-search';
+
+const SMOOTH = 'transition-[background-color,border-color,box-shadow,color] duration-200 ease-[var(--ease-smooth)]';
+const FIELD_BASE =
+  `w-full rounded-lg border bg-s3 text-body text-ink placeholder:text-ink4 shadow-[var(--ele-1)] ${SMOOTH} focus:outline-none focus:bg-s1 focus:shadow-[var(--ele-2)] disabled:cursor-not-allowed disabled:bg-ink/5 disabled:text-ink4 disabled:shadow-none`;
+const FIELD_OK = 'border-line focus:border-accent-hi';
+const FIELD_INVALID = 'border-st-fail focus:border-st-fail';
+const RING_OK = 'focus:ring-[3px] focus:ring-accent/40';
+const RING_INVALID = 'focus:ring-[3px] focus:ring-st-fail/40';
+
+const SIZE_CLS = {
+  small: 'h-6 px-2 text-label',
+  middle: 'h-8 px-3 text-body',
+  large: 'h-10 px-3 text-body',
+} as const;
+
+export type InputSize = keyof typeof SIZE_CLS;
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'suffix'> {
+  /** Error state — viền + ring đỏ (antd status="error"). */
+  invalid?: boolean;
+  size?: InputSize;
+  /** Node trước input (antd prefix) — kích hoạt affix wrapper. */
+  prefix?: ReactNode;
+  /** Node sau input (antd suffix) — kích hoạt affix wrapper. */
+  suffix?: ReactNode;
+  /** Nút × xoá giá trị — controlled (value + onChange) mới hiển thị. */
+  allowClear?: boolean;
+  className?: string;
+}
+
+function InputBase({
+  invalid = false,
+  size = 'middle',
+  prefix,
+  suffix,
+  allowClear = false,
+  className,
+  value,
+  onChange,
+  ...rest
+}: InputProps) {
+  const ringCls = invalid ? `${FIELD_INVALID} ${RING_INVALID}` : `${FIELD_OK} ${RING_OK}`;
+  const showClear = allowClear && value !== undefined && value !== null && String(value) !== '';
+  const hasAffix = prefix !== undefined || suffix !== undefined || allowClear;
+
+  if (!hasAffix) {
+    return (
+      <input
+        value={value}
+        onChange={onChange}
+        className={`${FIELD_BASE} ${SIZE_CLS[size]} ${ringCls}${className ? ` ${className}` : ''}`}
+        {...rest}
+      />
+    );
+  }
+
+  // Affix pattern antd: wrapper mang viền/ring, input trần flex-1 bên trong.
+  // Ring/focus đổi focus: → focus-within: (span không focusable — ring affix
+  // giờ ăn thật khi input bên trong focus; depth contract: focus = nổi s1).
+  const ringWrapper = ringCls.replaceAll('focus:', 'focus-within:');
+  return (
+    <span
+      className={`inline-flex w-full items-center gap-1 rounded-lg border bg-s3 px-2 shadow-[var(--ele-1)] ${SMOOTH} focus-within:bg-s1 focus-within:shadow-[var(--ele-2)] focus-within:outline-none ${ringWrapper}${className ? ` ${className}` : ''}`}
+    >
+      {prefix && <span className="shrink-0 text-ink3">{prefix}</span>}
+      <input
+        value={value}
+        onChange={onChange}
+        className={`min-w-0 flex-1 border-none bg-transparent outline-none ${SIZE_CLS[size]} text-ink placeholder:text-ink4`}
+        {...rest}
+      />
+      {showClear && (
+        <button
+          type="button"
+          aria-label="Xoá"
+          className={`cursor-pointer border-none bg-transparent text-ink3 hover:text-ink2 ${SMOOTH}`}
+          onClick={() => onChange?.({ target: { value: '' } } as unknown as ChangeEvent<HTMLInputElement>)}
+        >
+          <Icon name="times" size={12} />
+        </button>
+      )}
+      {suffix && <span className="shrink-0 text-ink3">{suffix}</span>}
+    </span>
+  );
+}
+
+/** Input composite antd — `Input.Search` (input + nút search: onSearch/enterButton/loading — xem `input-search.tsx`). */
+// eslint-disable-next-line react-refresh/only-export-components
+export const Input = Object.assign(InputBase, { Search: SearchInput });
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  invalid?: boolean;
+  /** Hiện đếm ký tự (cần maxLength) — antd showCount. */
+  showCount?: boolean;
+  className?: string;
+}
+
+export function Textarea({
+  invalid = false,
+  showCount = false,
+  className,
+  value,
+  maxLength,
+  ...rest
+}: TextareaProps) {
+  const count = showCount && maxLength ? String(value ?? '').length : null;
+  const ringCls = invalid ? RING_INVALID : RING_OK;
+  return (
+    <div className="w-full">
+      <textarea
+        value={value}
+        maxLength={maxLength}
+        className={`${FIELD_BASE} py-2 ${invalid ? FIELD_INVALID : FIELD_OK} ${ringCls}${className ? ` ${className}` : ''}`}
+        {...rest}
+      />
+      {count !== null && (
+        <div className="mt-1 text-right text-meta text-ink3 tabular-nums">
+          {count}/{maxLength}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,112 @@
+// Input.Search stories — antd parity (docs/parity-matrix.md Gap P0).
+// Matrix: basic icon · enterButton (boolean + node) · sizes · loading · invalid/disabled.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Input } from './index';
+
+const meta = {
+  title: 'Forms/InputSearch',
+  component: Input.Search,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['small', 'middle', 'large'] },
+    enterButton: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    invalid: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    placeholder: { control: 'text' },
+  },
+} satisfies Meta<typeof Input.Search>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Basic — ghost search icon on the right; Enter or click fires onSearch. */
+export const Basic: Story = {
+  args: { placeholder: 'Search tasks…' },
+  render: (args) => (
+    <div className="w-80">
+      <Input.Search {...args} onSearch={(v) => console.log('search:', v)} />
+    </div>
+  ),
+};
+
+/** EnterButton — true renders a primary icon button; a ReactNode renders a default button with that content. */
+export const EnterButton: Story = {
+  render: () => (
+    <div className="grid w-96 gap-3">
+      <Input.Search placeholder="enterButton (boolean) → primary icon" enterButton />
+      <Input.Search placeholder='enterButton="Search" (node) → default button' enterButton="Search" />
+    </div>
+  ),
+};
+
+/** Sizes — small h-6 / middle h-8 (default) / large h-10, same scale as Input. */
+export const Sizes: Story = {
+  render: () => (
+    <div className="grid w-96 gap-3">
+      {(['small', 'middle', 'large'] as const).map((s) => (
+        <div key={s} className="flex items-center gap-3">
+          <span className="w-14 text-label text-ink3">{s}</span>
+          <Input.Search size={s} placeholder={`Search (${s})…`} enterButton="Go" />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/** Loading — spinner replaces the icon; further Enter/clicks are blocked until loading clears. */
+export const Loading: Story = {
+  render: () => <div className="w-80"><Input.Search placeholder="Fetching…" loading enterButton /></div>,
+};
+
+/** States — invalid (red border + ring) and disabled side by side. */
+export const States: Story = {
+  render: () => (
+    <div className="grid w-96 gap-3">
+      <Input.Search placeholder="Invalid state" invalid />
+      <Input.Search placeholder="Disabled" disabled enterButton="Search" />
+    </div>
+  ),
+};
+
+/** Demo component cho OnSearch — hooks phải nằm trong component thật (rules-of-hooks). */
+function OnSearchDemo() {
+  const [last, setLast] = useState('');
+  return (
+    <div className="w-80">
+      <Input.Search placeholder="Filter by title…" enterButton onSearch={setLast} />
+      <p className="mt-2 text-label text-ink3">Last search: {last || '—'}</p>
+    </div>
+  );
+}
+
+/** OnSearch — controlled demo: last searched value shown below the field. */
+export const OnSearch: Story = {
+  render: () => <OnSearchDemo />,
+};
+
+/** Demo component cho AllowClear — hooks phải nằm trong component thật (rules-of-hooks). */
+function AllowClearDemo() {
+  const [value, setValue] = useState('');
+  const [lastSearch, setLastSearch] = useState('');
+  return (
+    <div className="w-80">
+      <Input.Search
+        placeholder="Type then clear…" allowClear
+        value={value}
+        onChange={(e) => setValue((e.target as HTMLInputElement).value)}
+        onSearch={setLastSearch}
+      />
+      <p className="mt-2 text-label text-ink3">
+        value: {value || '—'} · last search: {lastSearch || '—'} (clear never fires search)
+      </p>
+    </div>
+  );
+}
+
+/** AllowClear — × appears once the field has text; clearing emits onChange('') only
+ * (onSearch is NOT fired), refocuses the input. Combined with onSearch below. */
+export const AllowClear: Story = {
+  render: () => <AllowClearDemo />,
+};

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

@@ -0,0 +1,116 @@
+// Input.Search tests — hành vi antd: Enter/click → onSearch(text), enterButton
+// đổi variant nút, loading chặn search tiếp, disabled chặn cả hai, invalid đỏ.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Input } from './index.js';
+
+afterEach(cleanup);
+
+describe('Input.Search', () => {
+  it('render input + nút Search icon-only; gõ + Enter → onSearch nhận giá trị', async () => {
+    const onSearch = vi.fn();
+    render(<Input.Search aria-label="Tìm task" onSearch={onSearch} />);
+    const input = screen.getByLabelText('Tìm task');
+    expect(input.tagName).toBe('INPUT');
+    const btn = screen.getByRole('button', { name: 'Search' });
+    expect(btn.querySelector('svg')).not.toBeNull(); // icon-only mặc định
+    await userEvent.setup().type(input, 'bug{Enter}');
+    expect(onSearch).toHaveBeenCalledWith('bug');
+    expect(onSearch).toHaveBeenCalledTimes(1);
+  });
+
+  it('click nút → onSearch với giá trị uncontrolled hiện tại', async () => {
+    const onSearch = vi.fn();
+    render(<Input.Search aria-label="Q" onSearch={onSearch} />);
+    await userEvent.setup().type(screen.getByLabelText('Q'), 'filter');
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Search' }));
+    expect(onSearch).toHaveBeenCalledWith('filter');
+  });
+
+  it('controlled value → onSearch dùng value prop (không dùng state trong)', () => {
+    const onSearch = vi.fn();
+    render(<Input.Search aria-label="C" value="fixed" onChange={vi.fn()} onSearch={onSearch} />);
+    // click trực tiếp (không gõ) — payload phải là value controlled
+    screen.getByRole('button', { name: 'Search' }).click();
+    expect(onSearch).toHaveBeenCalledWith('fixed');
+  });
+
+  it('enterButton=true → nút primary bg-accent vẫn fire onSearch', async () => {
+    const onSearch = vi.fn();
+    render(<Input.Search aria-label="E" enterButton onSearch={onSearch} />);
+    const btn = screen.getByRole('button', { name: 'Search' });
+    expect(btn.className).toContain('bg-accent');
+    await userEvent.setup().click(btn);
+    expect(onSearch).toHaveBeenCalledWith('');
+  });
+
+  it('enterButton=ReactNode → render nội dung nút, name từ content (không aria-label cứng)', async () => {
+    const onSearch = vi.fn();
+    render(<Input.Search aria-label="N" enterButton="Tìm kiếm" onSearch={onSearch} />);
+    const btn = screen.getByRole('button', { name: 'Tìm kiếm' });
+    expect(btn).not.toHaveAttribute('aria-label');
+    await userEvent.setup().click(btn);
+    expect(onSearch).toHaveBeenCalledTimes(1);
+  });
+
+  it('loading → Spinner thay icon + Enter/click KHÔNG fire thêm', async () => {
+    const onSearch = vi.fn();
+    render(<Input.Search aria-label="L" loading onSearch={onSearch} />);
+    const btn = screen.getByRole('button', { name: 'Search' });
+    expect(btn.querySelector('svg')).toBeNull(); // icon search thay bằng Spinner
+    await userEvent.setup().click(btn);
+    await userEvent.setup().type(screen.getByLabelText('L'), '{Enter}');
+    expect(onSearch).not.toHaveBeenCalled();
+  });
+
+  it('disabled → input + nút disabled, click không fire', async () => {
+    const onSearch = vi.fn();
+    render(<Input.Search aria-label="D" disabled onSearch={onSearch} />);
+    expect(screen.getByLabelText('D')).toBeDisabled();
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Search' }));
+    expect(onSearch).not.toHaveBeenCalled();
+  });
+
+  it('invalid → wrapper viền đỏ; size large → h-10; passthrough placeholder', () => {
+    render(<Input.Search aria-label="I" invalid size="large" placeholder="lọc…" />);
+    const input = screen.getByLabelText('I');
+    expect(input.closest('span')!.className).toContain('border-st-fail');
+    expect(input).toHaveAttribute('placeholder', 'lọc…');
+    expect(input.closest('span')!.className).toContain('h-10');
+  });
+});
+
+describe('InputSearch — redo antd-fidelity (allowClear + attached flush)', () => {
+  it('allowClear: ẩn khi rỗng; có text → hiện ×; click → onChange("") + KHÔNG fire onSearch', async () => {
+    const onSearch = vi.fn();
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(<Input.Search allowClear onChange={onChange} onSearch={onSearch} />);
+    expect(screen.queryByLabelText('Xoá nội dung tìm kiếm')).toBeNull();
+    const input = container.querySelector('input')!;
+    await user.type(input, 'abc');
+    const clear = screen.getByLabelText('Xoá nội dung tìm kiếm');
+    await user.click(clear);
+    expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({ target: { value: '' } }));
+    expect(onSearch).not.toHaveBeenCalled();
+    expect((input as HTMLInputElement).value).toBe('');
+    expect(screen.queryByLabelText('Xoá nội dung tìm kiếm')).toBeNull();
+  });
+
+  it('nút search DÍNH THÀNH THỂ (guard): wrapper overflow-hidden bo góc, nút KHÔNG radius riêng — chỉ border-l phân tách', () => {
+    const wrapper = render(<Input.Search />).container.querySelector('span')!;
+    expect(wrapper.className).toContain('overflow-hidden');
+    expect(wrapper.className).toContain('rounded-lg');
+    const btn = screen.getByRole('button', { name: 'Search' });
+    expect(btn.className).not.toMatch(/rounded/); // góc do wrapper clip — flush tuyệt đối
+    expect(btn.className).toContain('border-l'); // hairline phân tách với input
+  });
+
+  it('press = chìm 1px (active:translate-y-px) — không scale (depth contract)', () => {
+    render(<Input.Search />);
+    const btn = screen.getByRole('button', { name: 'Search' });
+    expect(btn.className).toContain('active:translate-y-px');
+    expect(btn.className).not.toContain('scale');
+  });
+});