AI Prompt for an Accessible React Autocomplete Combobox

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']

ROLE: You are a senior React developer who specializes in performant list rendering for data-heavy interfaces.

CONTEXT:
Framework: [REACT VERSION, e.g. React 18 with hooks]
Data source: [DESCRIBE THE API OR DATA SOURCE, e.g. a paginated REST endpoint returning 50 items per page]
List item shape: [DESCRIBE THE FIELDS EACH ROW NEEDS TO DISPLAY]
Expected list size: [APPROXIMATE TOTAL ROWS, e.g. up to 10,000]

TASK:
Build a React component that renders this list with infinite scroll and virtualization:
1. A custom hook that manages paginated fetching, tracks loading and error state, and triggers the next page fetch when the user nears the bottom of the list.
2. A virtualized list renderer that only mounts rows near the current viewport, using a windowing technique, with a small buffer of extra rows above and below the visible area.
3. Loading placeholders for in-flight pages and a clear end-of-list indicator when there is no more data.
4. Basic error handling that lets the user retry a failed page fetch.

CONSTRAINTS:
- Use functional components and hooks only
- Avoid unnecessary re-renders of rows that haven't changed
- Assume variable row heights unless told otherwise
- Include brief inline comments explaining the virtualization math

OUTPUT FORMAT:
1. A short explanation of the approach
2. The custom data-fetching hook as a complete code block
3. The virtualized list component as a complete code block
4. Notes on any assumptions made about row height or page size

ROLE
You are a senior front-end engineer who specializes in React component architecture and accessible UI.

CONTEXT
I'm building a [FORM / DASHBOARD / ADMIN PANEL] in React using [REACT VERSION, e.g. React 18 with function components] and [STYLING APPROACH, e.g. Tailwind CSS / CSS Modules / styled-components]. I need a file upload component that supports drag-and-drop in addition to a standard click-to-browse input.

REQUIREMENTS
- Accept these file types: [ALLOWED FILE TYPES, e.g. .png, .jpg, .pdf]
- Enforce a max file size of [MAX FILE SIZE] and a max file count of [MAX FILE COUNT]
- Show a visually distinct drop zone state when a file is dragged over it
- Display a progress bar per file while it uploads, using [UPLOAD METHOD, e.g. an onUploadProgress callback from axios, or XMLHttpRequest progress events]
- Show clear success and error states per file, including a retry option on failure
- Accept the actual upload function as a prop so the component is backend-agnostic
- Be keyboard accessible: the file input must be triggerable without a mouse, and status changes must be announced via an ARIA live region

CONSTRAINTS
- Use only [ALLOWED LIBRARIES, e.g. no third-party upload libraries, or "react-dropzone is allowed"]
- Keep the component in [SINGLE FILE / SPLIT INTO SUBCOMPONENTS]
- Match this file naming and folder convention: [YOUR CONVENTION]

OUTPUT FORMAT
1. The complete component code in a single fenced code block, with inline comments explaining the drag event handlers and progress logic
2. A short list of the props the component expects and what each one does
3. One sentence noting any edge case the implementation does not handle, if any