Overview

UX design work for the Item Image Upload project. This section contains component specifications, interaction designs, library assessments, and implementation guidance for the Storybook component library.

Documents

Document	Description
UI Components	Component inventory (19 components across 6 tiers), props interfaces, dependency layers, composition diagrams, traceability matrix, and open questions. The primary specification for implementation.
External Libraries Assessment	Evaluation of ShadCN/Radix, Tailwind, AG Grid, and image-specific libraries (react-easy-crop, react-dropzone, browser-image-compression, heic2any) against component requirements.
Canary Library Updates	Structural changes to the ux-prototype canary library: new utilities/ and form/ patterns, design token usage patterns (10 items with codebase examples), CVA assessment, barrel export requirements.
Follow-Up Work	Deferred items: Avatar rewrite to compose ImageDisplay (Option B), with pros/cons/prerequisites.

Key Decisions

UX component design decisions (CD-01 through CD-09) are recorded in the project Decision Log. Highlights:

• ImageFieldConfig split into ImageFieldStaticConfig (system-level) and ImageFieldInitConfig (tenant-localizable) with ImageMimeType union type
• Unified hover-based interaction model across grid and form contexts
• ItemImageField organism dropped — configuration constant replaces wrapper
• ImageInspectorOverlay supports inspector-to-edit transition

Related

• Scoping — per-scenario scope decisions
• Use Case Analysis — use case definitions, Round 1 feedback, copyright consultation
• Entity Media Use Cases — canonical use case specification (GEN::MEDIA::0001, 0002, 0003)