refactor(annotations): replace 8-square handles with 4 corner L-brackets

- 4 corner-only handles (nw/ne/sw/se), no edge midpoints
- Each handle renders as two short perpendicular lines meeting at the corner
  (10px arms, navy, square linecap) — no fill, no box
- Thin dashed selection border added to SVG overlay to signal edit mode
- Simplify applyHandleDrag to remove dead n/s/e/w branches

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/components/AnnotationEditOverlay.svelte.test.ts

@@ -16,18 +16,27 @@ const annotation: Annotation = {
 };
 
 describe('AnnotationEditOverlay', () => {
-	it('renders 8 handle elements', async () => {
+	it('renders 4 corner handle elements', async () => {
 		render(AnnotationEditOverlay, { annotation });
 
 		const handles = document.querySelectorAll('[data-handle]');
-		expect(handles).toHaveLength(8);
+		expect(handles).toHaveLength(4);
+	});
+
+	it('renders handles for all four corners', async () => {
+		render(AnnotationEditOverlay, { annotation });
+
+		expect(document.querySelector('[data-handle="nw"]')).not.toBeNull();
+		expect(document.querySelector('[data-handle="ne"]')).not.toBeNull();
+		expect(document.querySelector('[data-handle="sw"]')).not.toBeNull();
+		expect(document.querySelector('[data-handle="se"]')).not.toBeNull();
 	});
 
 	it('each handle has a 44x44 hit area', async () => {
 		render(AnnotationEditOverlay, { annotation });
 
 		const hitAreas = document.querySelectorAll('[data-handle-hit]');
-		expect(hitAreas).toHaveLength(8);
+		expect(hitAreas).toHaveLength(4);
 		hitAreas.forEach((el) => {
 			expect(el.getAttribute('width')).toBe('44');
 			expect(el.getAttribute('height')).toBe('44');