# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

Interactive visualization tool built with Svelte 5 and Vite that demonstrates line segment intersections and rectangle area calculations. The application features a canvas-based grid where users can move a point (B) and see real-time updates of two rectangles formed with fixed points A(1,1) and C(6,7), along with their calculated areas.

## Development Commands

```bash
# Start development server with hot module replacement
npm run dev

# Build for production (outputs to dist/)
npm run build

# Preview production build locally
npm run preview
```

## Scripts

The `script/` folder contains utility scripts for development:

- **screenshot**: Captures a screenshot of the running dev server (localhost:5173) using Chrome headless mode
  - Outputs to `screenshot.png` in the project root
  - Requires Chrome/Chromium to be installed
  - Dev server must be running before executing
  - Usage: `./script/screenshot`

## Architecture

### Application Structure

- **src/App.svelte**: Main application component containing all visualization logic
  - Canvas rendering system with 40px grid cells (8x8 grid, 320x320px canvas)
  - Coordinate system conversion between canvas (top-left origin) and Cartesian (bottom-left origin)
  - Real-time mouse tracking to update point B position
  - Reactive calculations for rectangle dimensions and areas using Svelte 5's `$:` syntax

### Key Components

**Coordinate Systems**: Two coordinate transformations are critical:
- `toCanvasCoords(x, y)`: Converts Cartesian to canvas coordinates (inverts Y-axis)
- `toCartesianCoords(canvasX, canvasY)`: Converts canvas to Cartesian coordinates

**Canvas Drawing Functions**:
- `drawGrid()`: Renders 40px grid, axes, and labels
- `drawRectangle(x1, y1, x2, y2, color)`: Draws filled rectangles with opposite corners
- `drawLineSegment(x1, y1, x2, y2, color)`: Draws line segment AC with endpoints
- `drawUserPoint()`: Renders draggable point B with label
- `redraw()`: Main render function called on mount and when userPoint changes

**Reactive Calculations**: Rectangle areas update automatically using Svelte's reactive declarations when userPoint changes.

### Configuration

- **Vite**: Standard configuration with Svelte plugin
- **Svelte**: Uses vitePreprocess for TypeScript/PostCSS support
- **JavaScript**: ES modules with JSConfig enabling type checking in .js files

## Technical Notes

- Uses Svelte 5's `mount()` API (not legacy `new App()`)
- Canvas uses 2D context with manual rendering (no framework canvas binding)
- Styling is component-scoped with dynamic classes (`.largest` highlights larger rectangle)
- No external state management - all state is local to App.svelte