Let composition items overlap and show where their video lies (#417)

Trying the tab turned up six things to fix. Items of a track could
not overlap, so a drag stalled as soon as the pointer reached another
item. An item's ends gave no hint they could be dragged, a trimmed
video showed nowhere, clip names were hard to read and vanished when
picked, and the track menu did not match the song tab.

- Items of a track may overlap and nothing is cut or pushed aside.
  The later one lies in front, in the picture and on the timeline.
  The overlap is shaded and a line marks the covered end.
- Edges win over bodies when hit, so the covered end of the lower
  item can still be dragged. Hovering an edge lights it up and shows
  the ew-resize cursor, as in the song tab.
- A clip in the overlap plays on both items. Clips themselves still
  do not overlap; a moved clip now runs up to its neighbour instead
  of stopping short.
- Fit to media and a new video no longer cap the length at the next
  item, which only made sense while overlaps were forbidden.
- The left edge can be trimmed past the start of the video. The
  offset goes negative and the sprite shows the first picture until
  the video begins.
- Video marks: a corner triangle where the item cuts into its video,
  a line with a triangle like the song loop where the video starts or
  ends inside the item. Edges snap to the video's ends within 6 px.
- Clip names sit in their own layer above the bars, in text colour.
- The track menu matches the song tab: add above or below, move up or
  down, delete. It opens on the head and on an empty spot of the
  track. The Remove track button left the inspector.

Tests:
- Unit composition and composition-edit: 67 green, several new or
  rewritten. Bending three spots in the rules turned their tests red.
- e2e 69: ALL PASSED, 12 checks. 69b and 69c now drop the second item
  over the first and drag the covered end past it. Without edges
  winning the hit, 69c fails with hover: null.
- Gate on melektaus-atx: CHECK EXIT 0, 302 files, 4672 tests.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tools/e2e/69-composition-tab.mjs

@@ -1,8 +1,8 @@
 /**
  * The Composition tab (#417). A sprite dragged in from the Assets panel becomes an item, 3 s long
- * and picked, so the inspector shows its TIMING; a second one dropped onto the first lands right
- * after it. A dragged end stops at the next item. An animation dragged in becomes a clip that moves
- * the item it overlaps in the picture. The hierarchy lists what is alive at the playhead, Delete
+ * and picked, so the inspector shows its TIMING; a second one dropped onto the first lands there,
+ * over it. The end of the first, covered by the second, lights up under the pointer and is dragged
+ * past it. An animation dragged in becomes a clip that moves the item it overlaps in the picture. The hierarchy lists what is alive at the playhead, Delete
  * takes an item with its object, and Play runs the playhead to the end. The video of an item about
  * to begin is opened ahead, so the cut to it shows its picture at once.
  *
@@ -92,27 +92,36 @@ export async function compositionTab(t) {
   const timing = await json(`__gm.section('TIMING')`);
   check('the inspector shows the picked item’s TIMING', timing !== null, JSON.stringify(timing));
 
-  // 69b. A second one let go over the first lands right after it.
+  // 69b. A second one let go over the first lands where it is let go, over the first.
   await dragAsset(BOX, await json(`__gm.composition.laneAt('ct69-t1', 20)`));
   m = await model();
   const b = m.items.find((i) => i.id !== a.id);
   check(
-    'one dropped onto an item lands right after it',
-    m.items.length === 2 && b?.start === 35 && b.length === 30,
+    'one dropped onto an item lands where it is let go, over it',
+    m.items.length === 2 && b?.start === 20 && b.length === 30,
     JSON.stringify(m.items),
   );
 
-  // 69c. The first item's end dragged past the second stops where the second begins.
+  // 69c. The first item's end, under the second, lights up with a resize cursor and is dragged past it.
   const box = await json(`__gm.composition.box('${a.id}')`);
+  const end = { x: box.x + box.w - 2, y: box.y + box.h / 2 };
+  await mouse('mouseMoved', end.x - 20, end.y);
+  await mouse('mouseMoved', end.x, end.y);
+  await sleep(80);
+  const hovered = await json('__gm.composition.view()');
   const far = await json(`__gm.composition.laneAt('ct69-t1', 60)`);
-  await drag(box.x + box.w - 2, box.y + box.h / 2, far.x, box.y + box.h / 2);
+  await drag(end.x, end.y, far.x, end.y);
   await sleep(150);
   m = await model();
   const resized = m.items.find((i) => i.id === a.id);
   check(
-    'a dragged end stops where the next item begins, and the length is the item’s own then',
-    resized?.length === 30 && resized.fitMedia === undefined,
-    JSON.stringify(resized),
+    'the covered end of an item lights up with a resize cursor, and is dragged past the item over it',
+    hovered.hover?.id === a.id &&
+      hovered.hover.part === 'end' &&
+      hovered.cursor === 'ew-resize' &&
+      resized?.length === 55 &&
+      resized.fitMedia === undefined,
+    JSON.stringify({ hover: hovered.hover, cursor: hovered.cursor, resized }),
   );
 
   // 69d. The animation dropped at frame 5 is a clip one pass long that moves the item in the picture.
@@ -148,7 +157,7 @@ export async function compositionTab(t) {
     'the hierarchy lists the items alive at the playhead',
     rows[0].length === 0 &&
       JSON.stringify(rows[1]) === JSON.stringify([a.id]) &&
-      JSON.stringify(rows[2]) === JSON.stringify([b.id]),
+      JSON.stringify(rows[2]) === JSON.stringify([a.id, b.id]),
     JSON.stringify(rows),
   );
 
@@ -184,7 +193,7 @@ export async function compositionTab(t) {
   }
   check(
     'Play runs the playhead to the end and stops there',
-    running.playing && running.playhead > 0 && !ended.playing && ended.playhead === 65,
+    running.playing && running.playhead > 0 && !ended.playing && ended.playhead === 60,
     JSON.stringify({ running, ended }),
   );