feat(29-02): update ItemCard and GlobalItemCard to use GearImage

Replace object-cover with GearImage component for fit-within rendering.
Add dominantColor and crop props to both card components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/client/components/ItemCard.tsx

@@ -4,6 +4,7 @@ import { useDuplicateItem } from "../hooks/useItems";
 import { LucideIcon } from "../lib/iconData";
 import { useUIStore } from "../stores/uiStore";
 import { ClassificationBadge } from "./ClassificationBadge";
+import { GearImage, imageContainerBg } from "./GearImage";
 
 interface ItemCardProps {
 	id: number;
@@ -17,6 +18,10 @@ interface ItemCardProps {
 	imageUrl?: string | null;
 	productUrl?: string | null;
 	brand?: string | null;
+	dominantColor?: string | null;
+	cropZoom?: number | null;
+	cropX?: number | null;
+	cropY?: number | null;
 	onRemove?: () => void;
 	classification?: string;
 	onClassificationCycle?: () => void;
@@ -34,6 +39,10 @@ export function ItemCard({
 	imageUrl,
 	productUrl,
 	brand,
+	dominantColor,
+	cropZoom,
+	cropX,
+	cropY,
 	onRemove,
 	classification,
 	onClassificationCycle,
@@ -161,15 +170,25 @@ export function ItemCard({
 					</svg>
 				</span>
 			)}
-			<div className="aspect-[4/3] bg-gray-50">
+			<div
+				className="aspect-[4/3] overflow-hidden"
+				style={{
+					backgroundColor: imageUrl
+						? imageContainerBg(dominantColor)
+						: undefined,
+				}}
+			>
 				{imageUrl ? (
-					<img
+					<GearImage
 						src={imageUrl}
 						alt={name}
-						className="w-full h-full object-cover"
+						dominantColor={dominantColor}
+						cropZoom={cropZoom}
+						cropX={cropX}
+						cropY={cropY}
 					/>
 				) : (
-					<div className="w-full h-full flex flex-col items-center justify-center">
+					<div className="w-full h-full bg-gray-50 flex flex-col items-center justify-center">
 						<LucideIcon
 							name={categoryIcon}
 							size={36}