Add rotating dotted border effect during image drag-and-drop

[Copilot]

Adds a "marching ants" animated border effect when dragging images onto the canvas, disappearing on drop.

Changes

CSS (imgkit/imgpanel.css)

• Added @keyframes rotating-border animation shifting gradient background positions
• New .imgPanel.drag-border-active::before pseudo-element draws animated dotted borders on all 4 sides without conflicting with panel background

JavaScript (imgkit/features/image_layer_events.js)

• setupDragDrop() toggles drag-border-active class on dragenter/dragover/dragleave/drop
• dragleave handler checks e.relatedTarget to prevent flickering when moving between child elements

.imgPanel.drag-border-active::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, #666 50%, transparent 50%), ...;
  animation: rotating-border 0.5s linear infinite;
}

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Ability to rotate dotted lines into borders</issue_title>
<issue_description>When dragging an image and placing it on a canvas, I need a CSS effect that slowly rotates the image's perimeter with a dotted line appearing around the border.

The border rotation effect disappears when the image is retrieved.
</issue_description>

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

• Fixes Ability to rotate dotted lines into borders #129

---

💡 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.

[volta2030]

Very nice! LGTM