# Phase 1: Types Extraction

## Goal

Extract all type definitions from ImageViewer.tsx into a dedicated types.ts file.

## Types to Extract

### ImageFile (Props)
```typescript
export interface ImageFile {
  /** Display name for the image */
  name: string;
  /** File path used for change detection and caching */
  path: string;
  /** Optional MIME type */
  mimeType?: string;
}
```

### ImageViewerProps (Props)
```typescript
export interface ImageViewerProps {
  /** Image file metadata */
  file: ImageFile;
  /** Image content as string or ArrayBuffer */
  content: string | ArrayBuffer;
  /** Whether viewer is inside a dialog (hides expand button) */
  inDialog?: boolean;
}
```

### ImageTransform (State)
```typescript
export interface ImageTransform {
  /** Rotation angle: 0, 90, 180, or 270 degrees */
  rotation: number;
  /** Horizontal flip state */
  flipH: boolean;
  /** Vertical flip state */
  flipV: boolean;
}
```

### ZoomPreset (UI)
```typescript
export interface ZoomPreset {
  /** Zoom level (1 = 100%) */
  value: number;
  /** Display label (e.g., "100%") */
  label: string;
}
```

### ImageToolbarProps (Internal)
```typescript
export interface ImageToolbarProps {
  /** Current zoom scale */
  scale: number;
  /** Expand to fullscreen callback */
  onExpand: () => void;
  /** Rotate image callback */
  onRotate: () => void;
  /** Flip horizontal callback */
  onFlipH: () => void;
  /** Flip vertical callback */
  onFlipV: () => void;
  /** Whether horizontal flip is active */
  flipH: boolean;
  /** Whether vertical flip is active */
  flipV: boolean;
  /** Whether inside dialog (hides expand) */
  inDialog?: boolean;
}
```

### ImageInfoProps (Internal)
```typescript
export interface ImageInfoProps {
  /** Blob URL source of the image */
  src: string;
  /** Content key for cache lookup */
  contentKey: string;
}
```

## File Structure

```typescript
// types.ts

/**
 * ImageViewer type definitions
 */

// =============================================================================
// FILE TYPES
// =============================================================================

export interface ImageFile { ... }

// =============================================================================
// COMPONENT PROPS
// =============================================================================

export interface ImageViewerProps { ... }
export interface ImageToolbarProps { ... }
export interface ImageInfoProps { ... }

// =============================================================================
// STATE TYPES
// =============================================================================

export interface ImageTransform { ... }

// =============================================================================
// UI TYPES
// =============================================================================

export interface ZoomPreset { ... }
```
