Add drag-and-drop reordering for reference images

[Copilot]

Summary

Some models (e.g. Flux.2 klein in edit mode) are sensitive to the order reference images are presented during inference. This adds drag-and-drop reordering to the Reference Image list so users can control that order.

Redux

• Added refImagesReordered action to refImagesSlice — accepts an ordered ids: string[] and rebuilds state.entities in that order

DnD

• Added singleRefImageDndSource to dnd.ts — a dedicated source type for ref image reordering (ref images are not canvas entities, so they can't share singleCanvasEntityDndSource)

Hook

• New useRefImageListDnd.ts — mirrors useCanvasEntityListDnd but uses left/right edge detection for the horizontal layout

Component

• RefImageList: each preview is now wrapped in a RefImageListItem that attaches the DnD hook and renders a DndListDropIndicator (vertical drop line between items)
• A monitorForElements effect handles drops, calls reorderWithEdge with axis: 'horizontal', dispatches refImagesReordered, then flashes the moved item

Related Issues / Discussions

QA Instructions

1. Open the Generate tab and add 2–5 reference images.
2. Drag a reference image to a new position — a vertical drop indicator should appear between items.
3. Release — the image should snap to its new position with a brief flash animation.
4. Verify the new order is reflected in inference (e.g. check the order images are sent to the backend).

Merge Plan

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable)
• ❗Changes to a redux slice have a corresponding migration
• Documentation added / updated (if applicable)
• Updated What's New copy (if doing a release after this PR)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[enhancement]: Add ability to reorder reference images</issue_title>
<issue_description>### Is there an existing issue for this?

• I have searched the existing issues

Contact Details

No response

What should this feature add?

This feature will allow the user to reorder the images in the Reference Image area by clicking and dragging them. When the order changes, the order in which the images are presented to the backend during rendering should also be changed.

This is useful because some models, such as Flux.2 klein in edit mode, are sensitive to the order in which reference images are presented.

Alternatives

No response

Additional Content

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [enhancement]: Add ability to reorder reference images #89

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.