Image Upload Components — Changelog

Summary of changes delivered in PR #63 on branch jmpicnic/item-image-upload-components, merged 2026-03-26. 46 commits across 4 sequential runs.

Run 1: Infrastructure and Scaffolding

Restructured src/types/canary/ — moved utils.ts, pagination.ts, date-time.ts into utilities/ subdirectory with barrel re-export (116 import paths updated).
Added shared types: ImageFieldConfig, ImageMimeType, ImageInput, ImageUploadResult, CropData, PixelCrop.
Added utility functions: getInitials (extracted from item-grid-columns), getCroppedImage (canvas-based crop helper).
Added 6 ShadCN primitives: alert-dialog, checkbox, popover, progress, slider, aspect-ratio.
Extended Badge atom with error-overlay CVA variant.
Created mock data module (__mocks__/image-story-data.ts) for stories and tests.
Added favicon.ico to eliminate 404 console errors.
Added Storybook glob for src/types/**/*.mdx (utilities documentation).

Implemented ImageDisplay molecule — loaded/loading/error/no-image states with baked-in edit flow (onImageChange + config opens ImageUploadDialog on double-click/Enter).
Implemented ImageDropZone molecule — unified drag-drop, file picker, URL entry, clipboard paste input surface.
Implemented ImagePreviewEditor molecule — crop/zoom/rotate/pan with react-easy-crop.
Implemented CopyrightAcknowledgment atom — mandatory checkbox for image ownership confirmation.
Updated Avatar atom — added entityName prop, extracted getInitials to shared utility.
New dependencies: react-easy-crop, browser-image-compression, heic2any (lazy-loaded).

Implemented ImageHoverPreview molecule — 500ms delay popover for thumbnail hover.
Implemented ImageInspectorOverlay molecule — full-size modal with controlled and uncontrolled modes, optional Edit button.
Implemented ImageComparisonLayout molecule — responsive desktop side-by-side / mobile tabs with baked-in Accept/Dismiss/Upload New actions.
Implemented ImageFormField molecule — form field renderer composing ImageDisplay with onImageChange, hover eye (inspect) and trash (remove with AlertDialog) actions.

Implemented ImageCellDisplay atom — AG Grid cell renderer composing ImageDisplay + ImageHoverPreview.
Implemented ImageCellEditor atom with createImageCellEditor factory — AG Grid cell editor with isPopup(), wired to ImageUploadDialog.
Implemented ImageUploadDialog organism — state machine orchestrator (EmptyImage, ProvidedImage, EditExisting, FailedValidation, Uploading, Warn phases) with mock presigned-POST upload.
Updated item-grid-columns — replaced inline ImageCellRenderer with ImageCellDisplay.
Updated barrel exports in canary.ts for all new components, types, and utilities.
Added WithImageColumn story to Entity Data Grid.
Created enforce-story-order.js tooling script.

Baked edit flow into ImageDisplay (onImageChange + config props).
Baked action buttons into ImageComparisonLayout.
Added EditExisting state to ImageUploadDialog for editing existing images.
Resolved all 6 inconsistencies from the component audit.
Added detailed baked-in behavior MDX documentation for all 11 baked-in components.
Fixed ImageDropZone paste/drop UX — clipboard paste, URL drag from browser, Go button variant.
Generalized use-case framework with createWorkflowStories factory for Interactive/Stepwise/Automated story variants.
Style guide patterns documented (focus ring, disabled state, progress bar).

Metric	Value
New components	19 (6 tiers: utilities, primitives, atoms, molecules, organisms)
New unit tests	~112 (across 96 test files)
New stories	~76 (across 15 story files)
Commits	46
CHANGELOG versions	v4.1.0 (components), v4.2.0 (use-case framework + fixes)
PR	#63 — merged 2026-03-26