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>

src/editor/inspector/compositionSection.ts

@@ -1,11 +1,7 @@
-import {
-  removeCompositionTrack,
-  removeFromComposition,
-  SetCompositionCommand,
-} from '../../core/commands/compositionCommands';
+import { removeFromComposition, SetCompositionCommand } from '../../core/commands/compositionCommands';
 import type { CompositionAsset, CompositionItem } from '../../core/model/Asset';
-import { clipLength, compositionFps, itemVideo } from '../../core/model/composition';
-import { refittedLength, resizedItem } from '../../core/model/compositionEdit';
+import { clipLength, compositionFps, fittedLength, itemVideo } from '../../core/model/composition';
+import { resizedItem } from '../../core/model/compositionEdit';
 import { findAssetOf, type Project } from '../../core/model/Project';
 import type { PropertyDef } from '../../core/properties/PropertySchema';
 import { Button, formatNumber } from '../../ui';
@@ -19,12 +15,12 @@ const OFFSET_ROW = 'composition:offset';
 const CLIP_START_ROW = 'composition:clipStart';
 const ANIMATION_ROW = 'composition:animation';
 
-const seconds = (key: string, label: string): PropertyDef => ({
+const seconds = (key: string, label: string, negative = false): PropertyDef => ({
   key,
   label,
   kind: 'number',
   default: 0,
-  min: 0,
+  ...(negative ? {} : { min: 0 }),
   step: 0.1,
   decimals: 3,
 });
@@ -41,7 +37,7 @@ export function compositionSignature(
   return clipIds.length > 0 ? `clips:${clipIds.join(',')}` : 'track';
 }
 
-/** A track: its name and the way to remove it. Clips: what they play, from when, and the way to remove them. */
+/** A track: its name; the timeline's menu adds, moves and deletes tracks. Clips: what they play, from when, and the way to remove them. */
 export function buildCompositionSection(
   host: InspectorHost,
   assetId: string,
@@ -61,13 +57,6 @@ export function buildCompositionSection(
       },
     });
     addNote(host, 'An upper track lies in front of the ones below it.');
-    addGap(host);
-    host.body.add(
-      new Button('Remove track', {
-        variant: 'danger',
-        onClick: () => host.state.execute(removeCompositionTrack(host.state.project, assetId, trackId)),
-      }),
-    );
     return;
   }
   const clip = clipIds.length === 1 ? comp.clips.find((c) => c.id === clipIds[0]) : undefined;
@@ -93,7 +82,7 @@ export function buildCompositionSection(
     const length = clipLength(host.state.project, comp, clip);
     addNote(
       host,
-      `One pass: ${formatNumber(length / fps, 2)} s. It plays on the item of its track it overlaps.`,
+      `One pass: ${formatNumber(length / fps, 2)} s. It plays on every item of its track it overlaps.`,
     );
   } else addTitle(host, `${clipIds.length} ANIMATION CLIPS`);
   addGap(host);
@@ -145,29 +134,26 @@ export function addTimingRows(host: InspectorHost, holderId: string, objectId: s
   const fps = compositionFps(comp);
   const video = itemVideo(host.state.project, comp, item) !== null;
   addTitle(host, 'TIMING');
-  const write = (
-    label: string,
-    edit: (current: CompositionItem, all: CompositionItem[]) => CompositionItem,
-  ) => {
+  const write = (label: string, edit: (current: CompositionItem) => CompositionItem) => {
     const current = compositionItemOf(host.state.project, holderId, objectId);
     if (!current) return;
-    const items = current.comp.items.map((i) => (i.id === objectId ? edit(i, current.comp.items) : i));
+    const items = current.comp.items.map((i) => (i.id === objectId ? edit(i) : i));
     if (SetCompositionCommand.changes(host.state.project, holderId, { items }))
       host.state.execute(new SetCompositionCommand(holderId, { items }, label));
   };
   const frames = (value: unknown) => Math.round(Number(value) * fps);
-  const rows: [string, string, number, (value: unknown) => void][] = [
+  const rows: [string, string, number, (value: unknown) => void, boolean?][] = [
     [
       START_ROW,
       'Start',
       item.start / fps,
-      (value) => write('Move item', (i, all) => moveTo(all, i, frames(value))),
+      (value) => write('Move item', (i) => ({ ...i, start: Math.max(0, frames(value)) })),
     ],
     [
       LENGTH_ROW,
       'Length',
       item.length / fps,
-      (value) => write('Resize item', (i, all) => resizedItem(all, i, frames(value))),
+      (value) => write('Resize item', (i) => resizedItem(i, frames(value))),
     ],
   ];
   if (video)
@@ -176,9 +162,14 @@ export function addTimingRows(host: InspectorHost, holderId: string, objectId: s
       'Offset',
       item.offset,
       (value) => write('Set item offset', (i) => withOffset(i, Number(value))),
+      true,
     ]);
-  for (const [key, label, value, onChange] of rows) {
-    const row = createFieldRow(host, seconds(key, label), value, { onInput: () => undefined, onChange });
+  // An offset below 0 starts the item before its video.
+  for (const [key, label, value, onChange, negative] of rows) {
+    const row = createFieldRow(host, seconds(key, label, negative), value, {
+      onInput: () => undefined,
+      onChange,
+    });
     host.fields.set(key, row);
     host.body.add(row.row);
   }
@@ -192,7 +183,7 @@ export function addTimingRows(host: InspectorHost, holderId: string, objectId: s
     'small',
   );
   const fit = new Button('Fit to media', { onClick: () => fitToMedia(host, holderId, objectId) });
-  fit.setEnabled(!(item.fitMedia === true && item.length === refittedLength(host.state.project, comp, item)));
+  fit.setEnabled(!(item.fitMedia === true && item.length === fittedLength(host.state.project, comp, item)));
   host.body.add(fit);
 }
 
@@ -210,7 +201,7 @@ export function timingSignature(project: Project, holderId: string, objectId: st
   const found = compositionItemOf(project, holderId, objectId);
   if (!found) return '';
   const video = itemVideo(project, found.comp, found.item) !== null;
-  const fitted = found.item.length === refittedLength(project, found.comp, found.item);
+  const fitted = found.item.length === fittedLength(project, found.comp, found.item);
   return `|timing:${video}:${found.item.fitMedia === true}:${fitted}`;
 }
 
@@ -218,23 +209,13 @@ export function timingSignature(project: Project, holderId: string, objectId: st
 export function fitToMedia(host: Pick<InspectorHost, 'state'>, holderId: string, objectId: string): void {
   const found = compositionItemOf(host.state.project, holderId, objectId);
   if (!found) return;
-  const length = refittedLength(host.state.project, found.comp, found.item);
+  const length = fittedLength(host.state.project, found.comp, found.item);
   const items = found.comp.items.map((i) => (i.id === objectId ? { ...i, length, fitMedia: true } : i));
   if (SetCompositionCommand.changes(host.state.project, holderId, { items }))
     host.state.execute(new SetCompositionCommand(holderId, { items }, 'Fit to media'));
 }
 
-/** The item moved to `start`, as far as the items around it let it: a clash keeps it where it was. */
-function moveTo(all: readonly CompositionItem[], item: CompositionItem, start: number): CompositionItem {
-  const at = Math.max(0, start);
-  const clash = all.some(
-    (i) =>
-      i.id !== item.id && i.track === item.track && i.start < at + item.length && at < i.start + i.length,
-  );
-  return clash ? item : { ...item, start: at };
-}
-
 function withOffset(item: CompositionItem, offset: number): CompositionItem {
   const { fitMedia: _, ...rest } = item;
-  return { ...rest, offset: Number.isFinite(offset) && offset > 0 ? offset : 0 };
+  return { ...rest, offset: Number.isFinite(offset) ? offset : 0 };
 }