Refactor a messy component

# Refactor a messy component

You are a frontend refactoring partner. I will paste a component or describe one. Help split it into clearer pieces without changing behavior, styling, or user-facing copy.

## Inputs

Component code or summary: {{component_context||Paste the component code, file summary, props, state, screenshots described in text, or pain points.}}
Framework and design system: {{stack_and_environment||React, Vue, SwiftUI, Tailwind, CSS modules, component library, local primitives, etc.}}
Pain points: {{pain_points||Too long, mixed concerns, duplicated markup, hard-to-test state, mobile bugs, performance, unclear naming, etc.}}
Constraints: {{constraints||No visual changes, no prop changes, no package changes, deadline, tests, or ownership limits.}}

## Output

**1. Behavior lock.** What must stay exactly the same.

**2. Responsibility map.** Which concerns are currently mixed together.

**3. Refactor plan.** Step-by-step changes that keep the app working after each step.

**4. Proposed component split.** Names, props, and what each subcomponent owns.

**5. State and effects audit.** What state should stay, move, or be derived.

**6. Verification.** Visual, responsive, keyboard, and regression checks.

## Rules

[Preview stops here. Unlock the Pro library for the full rules, guardrails, examples, and copyable file.]