AGENTS.md
Guidance for coding agents working on AlexandrAI Tools Image Cropper in the alexandrai-tools project.
Project overview
This guide covers src/tools/image-cropper. clampRect keeps x and y inside image bounds, clamps width and height to the remaining image area, and enforces a minimum one pixel output. Body.astro provides square and widescreen presets, draws the selected source rectangle into a separate output canvas, and downloads cropped.png.
Primary source files
- src/tools/image-cropper/index.ts defines meta, CropRect, and clampRect.
- src/tools/image-cropper/index.test.ts covers inside rectangles, negative x and y, right and bottom edge clamping, x beyond image width, and minimum dimensions.
- src/tools/image-cropper/Body.astro owns image preview, numeric crop inputs, presets, crop drawing, PNG download, and clear state.
- src/tools/image-cropper/i18n.ts owns localized labels.
- src/lib/tools.ts registers the tool metadata.
Setup commands
npm install npm test npm run typecheck npm run build npm run dev
Change rules
- Clamp x to the range from zero through image width minus one.
- Clamp y to the range from zero through image height minus one.
- Clamp width and height so the crop never exceeds the right or bottom edge.
- Guarantee a minimum crop width and height of one pixel.
- Square preset uses the shorter image side from the top-left origin.
- Widescreen preset uses full image width and a 16 by 9 height, clamped to image height.
- Download PNG output from the cropped canvas.
Testing
Test clampRect boundaries, minimum dimensions, presets on portrait and landscape images, fractional and invalid numeric input handling, output canvas dimensions, source rectangle mapping, download filename, and clear-state reset.
PR checklist
- npm test passes for image-cropper.
- Canvas processing stays browser-local and deterministic enough for tests.
- Pure helper behavior, UI controls, and i18n labels stay aligned.
- Download format, filename, and reset behavior are covered.