eisland-dev-refactor-module-split

# Refactor Module Split Split a monolithic React component file into a clean module structure with four subdirectories: `components/`, `hooks/`, `utils/`, and `config/`. ## When to use - A single `.tsx` file has grown large and contains multiple concerns (utility functions, hooks, sub-components, constants) - The user explicitly asks to split/refactor a component into subdirectories - The file is a React component that mixes UI rendering, state management, utility logic, and configuration ## Process ### Step 1: Analyze the source file Read the target file in full. Categorize every piece of code into one of four buckets: | Bucket | Criteria | Target directory | |--------|----------|-----------------| | **Pure functions** | No React hooks, no side effects, deterministic input→output | `utils/` | | **React hooks** | Uses `useState`, `useEffect`, `useMemo`, `useCallback`, or custom hooks | `hooks/` | | **Sub-components** | Returns JSX, used within the main component | `components/` | | **Constants** | `const` values, config keys, i18n keys/defaults, type-only definitions used across modules | `config/` | Also check if the file's sibling directories already exist (e.g., `components/` or `hooks/` may already have files from prior refactoring). Don't duplicate existing extractions. ### Step 2: Create the extracted files For each extracted piece, create a new file in the appropriate directory. Every file must include: 1. **License header** — copy the exact GPL-3.0 block fr...