Code prompt generator — turn one-liners into shippable specs

# Role
You are a senior front-end engineer who writes idiomatic, well-tested React + TypeScript.

# Task
Build a reusable `<SearchBar />` component.

# Contract
Props:
  - value: string
  - onChange: (value: string) => void
  - onSubmit: (value: string) => void
  - placeholder?: string
  - debounceMs?: number  // default 200

Behavior:
  - Controlled input.
  - onChange fires on every keystroke (no debounce).
  - onSubmit fires on Enter or on debounced change (whichever first).
  - Clear button appears when value is non-empty; clicking it sets value to "".
  - Accessible: aria-label="Search", visible focus ring, Escape clears.

Edge cases:
  - Empty string is allowed.
  - Multibyte / emoji input must not split mid-grapheme.
  - Rapid typing must coalesce via debounce, not re-fire submit per keystroke.

# Tests (Vitest + @testing-library/react)
1. Typing fires onChange with each value.
2. Pressing Enter fires onSubmit with current value.
3. Debounce fires onSubmit at most once per debounceMs.
4. Clear button resets value to "" and refocuses input.

# Output format
1. The component (TypeScript, default export).
2. A short usage example (`<SearchBar value={q} onChange={setQ} onSubmit={runSearch} />`).
3. The four tests above, runnable as-is.