# Execution Checklist

## Pre-flight

- [ ] Read current ImageViewer.tsx
- [ ] Backup or rename original file
- [ ] Create folder structure

## Phase 1: Folder Structure

- [ ] Create `components/` directory
- [ ] Create `hooks/` directory
- [ ] Create `utils/` directory

```bash
mkdir -p components hooks utils
```

## Phase 2: Types

- [ ] Create `types.ts` with all interfaces
  - ImageFile
  - ImageViewerProps
  - ImageTransform
  - ZoomPreset
  - ImageToolbarProps
  - ImageInfoProps
- [ ] Run `pnpm check`

## Phase 3: Utils

- [ ] Create `utils/constants.ts`
  - MAX_IMAGE_SIZE, WARN_IMAGE_SIZE
  - MIN_ZOOM, MAX_ZOOM
  - ZOOM_PRESETS
  - DEFAULT_TRANSFORM
- [ ] Create `utils/lqip.ts`
  - createLQIP function
- [ ] Create `utils/index.ts`
  - Re-export all
- [ ] Run `pnpm check`

## Phase 4: Hooks

- [ ] Create `hooks/useImageTransform.ts`
  - Transform state management
  - rotate, flipH, flipV callbacks
  - transformStyle computed value
- [ ] Create `hooks/useImageLoading.ts`
  - Blob URL management
  - LQIP generation
  - Loading/error states
- [ ] Create `hooks/index.ts`
  - Re-export all
- [ ] Run `pnpm check`

## Phase 5: Components

- [ ] Create `components/ImageToolbar.tsx`
  - Zoom controls
  - Rotate/flip buttons
  - Preset dropdown
- [ ] Create `components/ImageInfo.tsx`
  - Dimensions display
- [ ] Create `components/ImageViewer.tsx`
  - Main component (simplified)
  - Uses hooks
  - Includes fullscreen dialog
- [ ] Create `components/index.ts`
  - Re-export all
- [ ] Run `pnpm check`

## Phase 6: Main Index

- [ ] Update `index.ts` with new imports
  - Export ImageViewer from components
  - Export types
  - Export hooks (if public)
- [ ] Run `pnpm check`

## Phase 7: Cleanup

- [ ] Delete old `ImageViewer.tsx`
- [ ] Verify all exports work
- [ ] Run `pnpm check`
- [ ] Run `pnpm build` (optional)

## Post-flight

- [ ] Test in browser
- [ ] Verify zoom/pan/rotate work
- [ ] Verify fullscreen works
- [ ] Verify LQIP loads for large images
- [ ] Verify error states display

## Final Structure

```
ImageViewer/
├── index.ts
├── types.ts
├── README.md
├── components/
│   ├── index.ts
│   ├── ImageViewer.tsx
│   ├── ImageToolbar.tsx
│   └── ImageInfo.tsx
├── hooks/
│   ├── index.ts
│   ├── useImageTransform.ts
│   └── useImageLoading.ts
└── utils/
    ├── index.ts
    ├── constants.ts
    └── lqip.ts
```

## Metrics

| Metric | Before | After |
|--------|--------|-------|
| Main file lines | 589 | ~150 |
| Total files | 3 | 12 |
| Sub-components | 2 inline | 2 separate |
| Custom hooks | 0 | 2 |
| Utility files | 0 | 2 |
