AI Prompt to Turn a Design Screenshot into a React Component

You are a senior React developer specializing in accessible, production-ready UI components.

Context:
- Framework: [REACT VERSION, e.g. React 18 with TypeScript]
- Drag-and-drop library: [LIBRARY NAME, e.g. @dnd-kit/core]
- Styling approach: [e.g. Tailwind CSS, CSS Modules, styled-components]
- Columns or workflow stages: [LIST OF COLUMN NAMES, e.g. Backlog, In Progress, Review, Done]
- State source: [e.g. local state, Zustand store, REST API endpoint]

Build a Kanban board component with the following requirements:
1. Render one column per workflow stage listed above, each showing its card count
2. Support dragging cards between columns and reordering cards within a column
3. Support keyboard-based reordering, not mouse-only interaction, for accessibility
4. Identify cards by a stable [ID FIELD NAME] field, never by array index
5. Call a [CALLBACK NAME] function on every successful move, passing the card id, source column, destination column, and new index
6. Show an optimistic UI update immediately, then roll back if [CALLBACK NAME] rejects
7. Handle empty columns and drops outside any valid column gracefully

Output format:
- The main board component
- Column and Card subcomponents
- Any custom hooks used for drag state
- A short usage example showing how to wire [CALLBACK NAME] to a real API call
- Brief notes on any library-specific setup required, such as providers, context, or CSS imports

Generate a React component with the following specification.

ROLE
- You are a frontend engineer who writes accessible, production-ready React components.

COMPONENT
- A searchable autocomplete combobox named [COMPONENT NAME].
- Props: options ([OPTION SHAPE, e.g. array of {id, label}]), value, onChange, placeholder.
- Controlled component: value and onChange are provided by the parent; do not manage selected value as internal-only state.

ACCESSIBILITY REQUIREMENTS
- Use the ARIA 1.2 combobox pattern: role="combobox" on the input, role="listbox" on the options container, role="option" on each item, and aria-activedescendant to track the highlighted option.
- Support keyboard interaction: ArrowDown/ArrowUp to move highlight, Enter to select the highlighted option, Escape to close the list, Home/End to jump to first/last option.
- Announce the number of matching results to screen readers when the list updates.

BEHAVIOR
- Filter options client-side, debounced by [DEBOUNCE MS, e.g. 150]ms.
- Close the dropdown on click outside or on Escape.
- If no options match, display [EMPTY STATE MESSAGE] inside the listbox instead of hiding it.

OUTPUT FORMAT
- A single functional component using hooks, written in [TYPESCRIPT OR JAVASCRIPT], with inline comments marking each accessibility feature.

ROLE: You are a senior frontend engineer who writes accessible, reusable React components with TypeScript.

TASK: Build a command palette (Cmd+K / Ctrl+K) component for a React application with the following behavior:
1. A global keyboard shortcut ([SHORTCUT, E.G. CMD+K]) opens the palette from anywhere in the app.
2. The palette renders as a centered modal overlay with a search input focused automatically on open.
3. Below the input, show a filtered, scrollable list of commands based on a prop-driven array of {id, label, icon, action, group} items.
4. Support fuzzy or substring matching on the label as the user types, updating the list in real time.
5. Support arrow-up/arrow-down to move the active selection and Enter to run the selected command's action and close the palette.
6. Escape closes the palette and returns focus to whatever element triggered it.
7. Group commands by their 'group' field with a small header label per group in the results list.

CONSTRAINTS:
- Use React hooks only, no class components.
- Trap focus inside the palette while it is open.
- Use ARIA roles appropriate for a combobox/listbox pattern.
- Style with [STYLING APPROACH, E.G. TAILWIND CSS / CSS MODULES].

OUTPUT FORMAT: A single CommandPalette.tsx component file plus a short usage example showing how to pass the command list and mount the component, with brief inline comments explaining the keyboard and focus logic.

APP CONTEXT: [BRIEF DESCRIPTION OF THE APP AND EXAMPLE COMMANDS, E.G. 'PROJECT MANAGEMENT TOOL WITH COMMANDS LIKE NEW TASK, GO TO SETTINGS, INVITE TEAMMATE']