feat: implemented global marker track

src/components/MainContent.css

@@ -287,6 +287,81 @@
   );
 }
 
+.global-marker-lane {
+  position: relative;
+  height: var(--global-track-height);
+  min-width: calc(var(--max-number-of-bars) * var(--track-grid-bar-width));
+  box-sizing: border-box;
+  border-bottom: 1px solid #3a3a3a;
+  background-color: #2d2d2d;
+  background-size: var(--track-grid-bar-width) var(--global-track-height);
+  background-image: linear-gradient(
+    to right,
+    transparent calc(var(--track-grid-bar-width) - 1px),
+    #3a3a3a calc(var(--track-grid-bar-width) - 1px),
+    #3a3a3a var(--track-grid-bar-width)
+  );
+}
+
+.global-marker-lane.pencil-cursor {
+  cursor: crosshair;
+}
+
+.global-marker-region {
+  position: absolute;
+  top: 2px;
+  height: calc(var(--global-track-height) - 4px);
+  border: 2px solid transparent;
+  border-radius: 6px;
+  background: #e0e0e0;
+  color: #2d2d2d;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 8px;
+  overflow: hidden;
+  user-select: none;
+  cursor: grab;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  transition: box-shadow 0.1s ease, border-color 0.1s ease;
+}
+
+.global-marker-region:hover {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
+}
+
+.global-marker-region.selected {
+  border-color: #ffffff;
+  box-shadow: none;
+}
+
+.global-marker-region:active {
+  cursor: grabbing;
+}
+
+.global-marker-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.global-marker-input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-family: inherit;
+  padding: 0;
+  outline: none;
+}
+
 .info-container {
   position: sticky;
   left: 0;

src/components/MainContent.test.tsx

@@ -5,6 +5,7 @@ import MainContent from './MainContent';
 import { KGMidiRegion } from '../core/region/KGMidiRegion';
 import { KGAudioRegion } from '../core/region/KGAudioRegion';
 import { KGAudioTrack } from '../core/track/KGAudioTrack';
+import { createDefaultGlobalTracks } from '../core/global-track';
 import { createMockMidiTrack } from '../test/utils/mock-data';
 
 const midiRegion = new KGMidiRegion('region-1', '1', 0, 'Region 1', 0, 4);
@@ -17,6 +18,7 @@ audioTrack.setRegions([audioRegion]);
 
 const storeState = {
   tracks: [midiTrack, audioTrack],
+  globalTracks: createDefaultGlobalTracks(),
   maxBars: 8,
   barWidthMultiplier: 1,
   reorderTracks: vi.fn(),
@@ -328,19 +330,18 @@ describe('MainContent', () => {
     expect(screen.queryByText('Chord')).not.toBeInTheDocument();
   });
 
-  it('renders visual-only add buttons for mock global tracks without mutating track state', () => {
+  it('keeps the non-marker global track add buttons as visual-only controls', () => {
     render(<MainContent />);
 
     fireEvent.click(screen.getByRole('button', { name: 'Show global tracks' }));
 
     const addButtons = [
-      screen.getByRole('button', { name: 'Add Marker global track item' }),
       screen.getByRole('button', { name: 'Add Tempo global track item' }),
       screen.getByRole('button', { name: 'Add Signature global track item' }),
       screen.getByRole('button', { name: 'Add Chord global track item' }),
     ];
 
-    expect(addButtons).toHaveLength(4);
+    expect(addButtons).toHaveLength(3);
 
     addButtons.forEach(button => {
       fireEvent.click(button);

src/components/MainContent.tsx

@@ -3,12 +3,16 @@ import './MainContent.css';
 import { createPortal } from 'react-dom';
 import { useProjectStore } from '../stores/projectStore';
 import { KGCore } from '../core/KGCore';
+import { GlobalTrackType } from '../core/global-track';
 import { KGTrack } from '../core/track/KGTrack';
 import { KGRegion } from '../core/region/KGRegion';
+import { KGGlobalRegion } from '../core/region/KGGlobalRegion';
 import { KGMidiRegion } from '../core/region/KGMidiRegion';
 import { KGAudioRegion } from '../core/region/KGAudioRegion';
+import { KGMarkerRegion } from '../core/region/KGMarkerRegion';
 import TrackInfoPanel from './track/TrackInfoPanel';
 import TrackGridPanel from './track/TrackGridPanel';
+import GlobalMarkerLane from './global-track/GlobalMarkerLane';
 import PianoRoll from './piano-roll/PianoRoll';
 import { TrackCreateDialog } from './common';
 import type { RegionClickOptions, RegionUI } from './interfaces';
@@ -16,8 +20,16 @@ import { DEBUG_MODE, BAR_NUMBERS_CONSTANTS, TOOLBAR_CONSTANTS } from '../constan
 import { useRegionOperations } from '../hooks/useRegionOperations';
 import { regionDeleteManager } from '../util/regionDeleteUtil';
 import { KGMainContentState } from '../core/state/KGMainContentState';
-import { ChangeLoopSettingsCommand } from '../core/commands';
+import {
-import { DeleteTrackAutomationPointsCommand } from '../core/commands';
+  ChangeLoopSettingsCommand,
+  CreateGlobalMarkerRegionCommand,
+  DeleteMultipleGlobalRegionsCommand,
+  DeleteTrackAutomationPointsCommand,
+  MoveGlobalRegionCommand,
+  ResizeGlobalRegionCommand,
+  UpdateGlobalRegionTextCommand,
+} from '../core/commands';
+import { DEFAULT_MARKER_REGION_NAME } from '../util/globalTrackUtil';
 import { FaPlus } from 'react-icons/fa';
 import { FaSquareArrowUpRight } from 'react-icons/fa6';
 
@@ -42,6 +54,7 @@ const MainContent: React.FC<MainContentProps> = ({
 }) => {
   const {
     tracks,
+    globalTracks,
     maxBars,
     barWidthMultiplier,
     reorderTracks,
@@ -95,6 +108,8 @@ const MainContent: React.FC<MainContentProps> = ({
   const [showGlobalTracksMock, setShowGlobalTracksMock] = useState(false);
   const [renderGlobalTracksMock, setRenderGlobalTracksMock] = useState(false);
   const [animateGlobalTracksMock, setAnimateGlobalTracksMock] = useState(false);
+  const [editingGlobalRegionId, setEditingGlobalRegionId] = useState<string | null>(null);
+  const [editingGlobalRegionText, setEditingGlobalRegionText] = useState('');
 
   // Use the region operations hook
   const { deleteSelectedRegions } = useRegionOperations({
@@ -143,9 +158,60 @@ const MainContent: React.FC<MainContentProps> = ({
     refreshProjectState,
   ]);
 
+  const markerTrack = globalTracks.find(track => track.getType() === GlobalTrackType.Marker) ?? null;
+  const markerRegions = (markerTrack?.getRegions() ?? []).filter(
+    (region): region is KGMarkerRegion => region instanceof KGMarkerRegion
+  );
+
+  const findProjectRegionById = useCallback((regionId: string): KGRegion | null => {
+    for (const track of tracks) {
+      const region = track.getRegions().find(candidate => candidate.getId() === regionId);
+      if (region) {
+        return region;
+      }
+    }
+
+    for (const globalTrack of globalTracks) {
+      const region = globalTrack.getRegions().find(candidate => candidate.getId() === regionId);
+      if (region) {
+        return region;
+      }
+    }
+
+    return null;
+  }, [globalTracks, tracks]);
+
+  const isGlobalRegionId = useCallback((regionId: string) => {
+    const region = findProjectRegionById(regionId);
+    return region instanceof KGGlobalRegion;
+  }, [findProjectRegionById]);
+
+  const deleteSelectedGlobalRegions = useCallback((): boolean => {
+    const selectedGlobalRegionIds = selectedRegionIds.filter(regionId => isGlobalRegionId(regionId));
+    if (selectedGlobalRegionIds.length === 0) {
+      return false;
+    }
+
+    try {
+      KGCore.instance().executeCommand(new DeleteMultipleGlobalRegionsCommand(selectedGlobalRegionIds));
+      if (editingGlobalRegionId && selectedGlobalRegionIds.includes(editingGlobalRegionId)) {
+        setEditingGlobalRegionId(null);
+        setEditingGlobalRegionText('');
+      }
+      refreshProjectState();
+      return true;
+    } catch (error) {
+      console.error('Error deleting global marker regions:', error);
+      return false;
+    }
+  }, [editingGlobalRegionId, isGlobalRegionId, refreshProjectState, selectedRegionIds]);
+
   // Register the delete function with the global manager
   useEffect(() => {
     regionDeleteManager.registerDeleteCallback(() => {
+      if (deleteSelectedGlobalRegions()) {
+        return true;
+      }
       if (deleteSelectedTrackAutomationPoints()) {
         return true;
       }
@@ -156,7 +222,7 @@ const MainContent: React.FC<MainContentProps> = ({
     return () => {
       regionDeleteManager.unregisterDeleteCallback();
     };
-  }, [deleteSelectedRegions, deleteSelectedTrackAutomationPoints]);
+  }, [deleteSelectedGlobalRegions, deleteSelectedRegions, deleteSelectedTrackAutomationPoints]);
 
   // Refs to track pending updates for verification
   const pendingUpdates = useRef<Map<string, { trackId: string, regionId: string, startBeat: number, length: number }>>(new Map());
@@ -594,26 +660,21 @@ const MainContent: React.FC<MainContentProps> = ({
   // Helper function to select a region (clears previous selections)
   const applyRegionSelection = (orderedSelectionIds: string[]) => {
     const core = KGCore.instance();
+    const allRegions = [
+      ...tracks.flatMap(projectTrack => projectTrack.getRegions()),
+      ...globalTracks.flatMap(globalTrack => globalTrack.getRegions()),
+    ];
 
-    tracks.forEach(projectTrack => {
+    allRegions.forEach(projectRegion => projectRegion.deselect());
-      projectTrack.getRegions().forEach(projectRegion => projectRegion.deselect());
-    });
 
     clearAllSelections();
 
     const selectedRegions: KGRegion[] = orderedSelectionIds
-      .map(selectedId => {
+      .map(selectedId => allRegions.find(region => region.getId() === selectedId) ?? null)
-        for (const projectTrack of tracks) {
-          const selectedRegion = projectTrack.getRegions().find(r => r.getId() === selectedId);
-          if (selectedRegion) {
-            selectedRegion.select();
-            return selectedRegion as KGRegion;
-          }
-        }
-        return null;
-      })
       .filter((selectedRegion): selectedRegion is KGRegion => selectedRegion !== null);
 
+    selectedRegions.forEach(selectedRegion => selectedRegion.select());
+
     if (selectedRegions.length > 0) {
       core.addSelectedItems(selectedRegions);
     }
@@ -621,9 +682,12 @@ const MainContent: React.FC<MainContentProps> = ({
     const lastSelectedRegionId = selectedRegions.length > 0
       ? selectedRegions[selectedRegions.length - 1].getId()
       : null;
+    const lastSelectedRegion = selectedRegions.length > 0
+      ? selectedRegions[selectedRegions.length - 1]
+      : null;
 
     setSelectedRegionId(lastSelectedRegionId);
-    if (lastSelectedRegionId) {
+    if (lastSelectedRegionId && lastSelectedRegion && !(lastSelectedRegion instanceof KGGlobalRegion)) {
       setActiveRegionId(lastSelectedRegionId);
     }
 
@@ -639,7 +703,10 @@ const MainContent: React.FC<MainContentProps> = ({
       return;
     }
 
-    const lastSelectedRegion = selectedRegions[selectedRegions.length - 1];
+    if (!lastSelectedRegion || lastSelectedRegion instanceof KGGlobalRegion) {
+      return;
+    }
+
     if (lastSelectedRegion instanceof KGAudioRegion) {
       openSpectrogramViewer(lastSelectedRegionId);
     } else if (lastSelectedRegion instanceof KGMidiRegion) {
@@ -677,10 +744,22 @@ const MainContent: React.FC<MainContentProps> = ({
       return;
     }
 
+    const regularSelectedRegionIds = selectedRegionIds.filter(selectedId => !isGlobalRegionId(selectedId));
     const orderedSelection = options.shiftKey
       ? (selectedRegionIds.includes(regionId)
-        ? selectedRegionIds.filter(id => id !== regionId)
+        ? regularSelectedRegionIds.filter(id => id !== regionId)
-        : [...selectedRegionIds, regionId])
+        : [...regularSelectedRegionIds, regionId])
+      : [regionId];
+
+    applyRegionSelection(orderedSelection);
+  };
+
+  const selectGlobalRegion = (regionId: string, options: RegionClickOptions = { shiftKey: false }) => {
+    const globalSelectedRegionIds = selectedRegionIds.filter(selectedId => isGlobalRegionId(selectedId));
+    const orderedSelection = options.shiftKey
+      ? (globalSelectedRegionIds.includes(regionId)
+        ? globalSelectedRegionIds.filter(id => id !== regionId)
+        : [...globalSelectedRegionIds, regionId])
       : [regionId];
 
     applyRegionSelection(orderedSelection);
@@ -688,13 +767,14 @@ const MainContent: React.FC<MainContentProps> = ({
 
   const handleRegionLassoSelection = (regionIds: string[], options: RegionClickOptions = { shiftKey: false }) => {
     const orderedRegionIds = regionIds.filter(regionId => regions.some(region => region.id === regionId));
+    const regularSelectedRegionIds = selectedRegionIds.filter(selectedId => !isGlobalRegionId(selectedId));
     const orderedSelection = options.shiftKey
       ? orderedRegionIds.reduce<string[]>((nextSelection, regionId) => {
           if (nextSelection.includes(regionId)) {
             return nextSelection.filter(id => id !== regionId);
           }
           return [...nextSelection, regionId];
-        }, [...selectedRegionIds])
+        }, [...regularSelectedRegionIds])
       : orderedRegionIds;
 
     applyRegionSelection(orderedSelection);
@@ -787,6 +867,95 @@ const MainContent: React.FC<MainContentProps> = ({
     setShowCreateTrackModal(true);
   }, []);
 
+  const beginEditingGlobalRegion = useCallback((regionId: string) => {
+    const region = findProjectRegionById(regionId);
+    if (!(region instanceof KGMarkerRegion)) {
+      return;
+    }
+
+    setEditingGlobalRegionId(regionId);
+    setEditingGlobalRegionText(region.getName());
+  }, [findProjectRegionById]);
+
+  const commitGlobalRegionEdit = useCallback((regionId: string) => {
+    const region = findProjectRegionById(regionId);
+    if (!(region instanceof KGMarkerRegion)) {
+      setEditingGlobalRegionId(null);
+      setEditingGlobalRegionText('');
+      return;
+    }
+
+    const trimmedText = editingGlobalRegionText.replace(/\r?\n/g, ' ').trim();
+    setEditingGlobalRegionId(null);
+    setEditingGlobalRegionText('');
+
+    if (!trimmedText || trimmedText === region.getName()) {
+      return;
+    }
+
+    try {
+      KGCore.instance().executeCommand(new UpdateGlobalRegionTextCommand(regionId, trimmedText));
+      refreshProjectState();
+    } catch (error) {
+      console.error('Error updating marker text:', error);
+    }
+  }, [editingGlobalRegionText, findProjectRegionById, refreshProjectState]);
+
+  const createMarkerAtBeat = useCallback((requestedStartBeat: number) => {
+    const normalizedStartBeat = Math.max(0, Math.round(requestedStartBeat));
+    const occupiedRegion = markerRegions.find(region => region.getStartFromBeat() === normalizedStartBeat);
+    if (occupiedRegion) {
+      selectGlobalRegion(occupiedRegion.getId(), { shiftKey: false });
+      beginEditingGlobalRegion(occupiedRegion.getId());
+      return;
+    }
+
+    try {
+      const command = new CreateGlobalMarkerRegionCommand(
+        normalizedStartBeat,
+        8 * timeSignature.numerator,
+        DEFAULT_MARKER_REGION_NAME
+      );
+      KGCore.instance().executeCommand(command);
+      refreshProjectState();
+
+      const createdRegion = command.getCreatedRegion();
+      if (!createdRegion) {
+        return;
+      }
+
+      selectGlobalRegion(createdRegion.getId(), { shiftKey: false });
+      setEditingGlobalRegionId(createdRegion.getId());
+      setEditingGlobalRegionText(createdRegion.getName());
+    } catch (error) {
+      console.error('Error creating marker region:', error);
+    }
+  }, [beginEditingGlobalRegion, markerRegions, refreshProjectState, selectGlobalRegion, timeSignature.numerator]);
+
+  const createMarkerAtPlayheadBar = useCallback(() => {
+    const beatsPerBar = timeSignature.numerator;
+    const startBeat = Math.floor(playheadPosition / beatsPerBar) * beatsPerBar;
+    createMarkerAtBeat(startBeat);
+  }, [createMarkerAtBeat, playheadPosition, timeSignature.numerator]);
+
+  const moveGlobalMarkerRegion = useCallback((regionId: string, startBeat: number) => {
+    try {
+      KGCore.instance().executeCommand(new MoveGlobalRegionCommand(regionId, Math.round(startBeat)));
+      refreshProjectState();
+    } catch (error) {
+      console.error('Error moving marker region:', error);
+    }
+  }, [refreshProjectState]);
+
+  const resizeGlobalMarkerRegion = useCallback((regionId: string, edge: 'start' | 'end', beat: number) => {
+    try {
+      KGCore.instance().executeCommand(new ResizeGlobalRegionCommand(regionId, edge, Math.round(beat)));
+      refreshProjectState();
+    } catch (error) {
+      console.error('Error resizing marker region:', error);
+    }
+  }, [refreshProjectState]);
+
   /**
    * Add keyboard event listener for region deletion
    * Handles Backspace (Windows) and Delete (Mac) keys to delete selected regions
@@ -811,9 +980,10 @@ const MainContent: React.FC<MainContentProps> = ({
         // Only handle if we're not in the piano roll (piano roll has its own delete handler)
         const isInPianoRoll = document.querySelector('.piano-roll')?.contains(event.target as Node);
         const isPianoRollOpen = showPianoRoll;
+        const hasSelectedGlobalRegions = selectedRegionIds.some(regionId => isGlobalRegionId(regionId));
 
-        if (!isInPianoRoll && !isPianoRollOpen) {
+        if (!isInPianoRoll && (!isPianoRollOpen || hasSelectedGlobalRegions)) {
-          const deleted = deleteSelectedTrackAutomationPoints() || deleteSelectedRegions();
+          const deleted = deleteSelectedGlobalRegions() || deleteSelectedTrackAutomationPoints() || deleteSelectedRegions();
           if (deleted) {
             // Prevent default behavior only if regions were actually deleted
             event.preventDefault();
@@ -829,7 +999,7 @@ const MainContent: React.FC<MainContentProps> = ({
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [deleteSelectedRegions, deleteSelectedTrackAutomationPoints, showPianoRoll]); // Dependencies for the effect
+  }, [deleteSelectedGlobalRegions, deleteSelectedRegions, deleteSelectedTrackAutomationPoints, showPianoRoll]); // Dependencies for the effect
 
   // Utility function to calculate playhead position from mouse coordinates (bar-level snapping)
   const calculatePlayheadFromMouse = useCallback((clientX: number): number | null => {
@@ -1134,6 +1304,9 @@ const MainContent: React.FC<MainContentProps> = ({
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
+                        if (track.id === 'marker') {
+                          createMarkerAtPlayheadBar();
+                        }
                       }}
                     >
                       <FaPlus />
@@ -1145,10 +1318,33 @@ const MainContent: React.FC<MainContentProps> = ({
             <div className={`global-tracks-grid-shell${animateGlobalTracksMock ? ' expanded' : ' collapsed'}`}>
               <div className="global-tracks-grid" aria-hidden="true">
                 {GLOBAL_TRACKS.map(track => (
-                  <div
+                  track.id === 'marker' ? (
-                    key={track.id}
+                    <GlobalMarkerLane
-                    className="global-track-grid-row"
+                      key={track.id}
-                  />
+                      markerRegions={markerRegions}
+                      maxBars={maxBars}
+                      timeSignature={timeSignature}
+                      selectedRegionIds={selectedRegionIds}
+                      editingRegionId={editingGlobalRegionId}
+                      editingText={editingGlobalRegionText}
+                      onEditingTextChange={setEditingGlobalRegionText}
+                      onCommitEdit={commitGlobalRegionEdit}
+                      onCancelEdit={() => {
+                        setEditingGlobalRegionId(null);
+                        setEditingGlobalRegionText('');
+                      }}
+                      onBeginEdit={beginEditingGlobalRegion}
+                      onSelectRegion={selectGlobalRegion}
+                      onCreateAtBeat={createMarkerAtBeat}
+                      onMoveRegion={moveGlobalMarkerRegion}
+                      onResizeRegion={resizeGlobalMarkerRegion}
+                    />
+                  ) : (
+                    <div
+                      key={track.id}
+                      className="global-track-grid-row"
+                    />
+                  )
                 ))}
               </div>
             </div>

src/components/global-track/GlobalMarkerLane.tsx

@@ -0,0 +1,348 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { KGMarkerRegion } from '../../core/region/KGMarkerRegion';
+import type { RegionClickOptions } from '../interfaces';
+import { isModifierKeyPressed } from '../../util/osUtil';
+
+interface GlobalMarkerLaneProps {
+  markerRegions: KGMarkerRegion[];
+  maxBars: number;
+  timeSignature: { numerator: number; denominator: number };
+  selectedRegionIds: string[];
+  editingRegionId: string | null;
+  editingText: string;
+  onEditingTextChange: (value: string) => void;
+  onCommitEdit: (regionId: string) => void;
+  onCancelEdit: () => void;
+  onBeginEdit: (regionId: string) => void;
+  onSelectRegion: (regionId: string, options?: RegionClickOptions) => void;
+  onCreateAtBeat: (startBeat: number) => void;
+  onMoveRegion: (regionId: string, startBeat: number) => void;
+  onResizeRegion: (regionId: string, edge: 'start' | 'end', beat: number) => void;
+}
+
+type ResizeEdge = 'start' | 'end' | null;
+
+const REGION_EDGE_HITBOX_PX = 8;
+const DRAG_THRESHOLD_PX = 4;
+
+const GlobalMarkerLane: React.FC<GlobalMarkerLaneProps> = ({
+  markerRegions,
+  maxBars,
+  timeSignature,
+  selectedRegionIds,
+  editingRegionId,
+  editingText,
+  onEditingTextChange,
+  onCommitEdit,
+  onCancelEdit,
+  onBeginEdit,
+  onSelectRegion,
+  onCreateAtBeat,
+  onMoveRegion,
+  onResizeRegion,
+}) => {
+  const laneRef = useRef<HTMLDivElement | null>(null);
+  const [previewBeats, setPreviewBeats] = useState<Record<string, { startBeat: number; length: number }>>({});
+  const [hoverEdges, setHoverEdges] = useState<Record<string, ResizeEdge>>({});
+  const [isModifierPressed, setIsModifierPressed] = useState(false);
+  const interactionRef = useRef<{
+    mode: 'drag' | 'resize' | null;
+    regionId: string;
+    initialMouseX: number;
+    initialStartBeat: number;
+    initialLength: number;
+    resizeEdge: ResizeEdge;
+    moved: boolean;
+  } | null>(null);
+
+  const totalBeats = maxBars * timeSignature.numerator;
+  const beatWidth = useMemo(() => {
+    const barWidth = parseInt(
+      getComputedStyle(document.documentElement).getPropertyValue('--track-grid-bar-width')
+    ) || 40;
+    return barWidth / timeSignature.numerator;
+  }, [timeSignature.numerator]);
+
+  const clampStartBeat = (value: number) => Math.max(0, Math.min(totalBeats - 1, value));
+  const clampEndBeat = (value: number) => Math.max(1, Math.min(totalBeats, value));
+  const beatsPerBar = timeSignature.numerator;
+
+  const getBeatFromClientX = (clientX: number, mode: 'start' | 'end' = 'start') => {
+    if (!laneRef.current) return 0;
+    const rect = laneRef.current.getBoundingClientRect();
+    const relativeX = clientX - rect.left;
+    const rawBeat = relativeX / beatWidth;
+    return mode === 'end'
+      ? clampEndBeat(Math.round(rawBeat))
+      : clampStartBeat(Math.round(rawBeat));
+  };
+
+  const getBarSnappedBeatFromClientX = (clientX: number) => {
+    const beat = getBeatFromClientX(clientX);
+    return clampStartBeat(Math.floor(beat / beatsPerBar) * beatsPerBar);
+  };
+
+  const getRenderedBeatState = (region: KGMarkerRegion) => (
+    previewBeats[region.getId()] ?? {
+      startBeat: region.getStartFromBeat(),
+      length: region.getLength(),
+    }
+  );
+
+  const getResizeEdgeFromMouseEvent = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ): ResizeEdge => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left;
+
+    if (offsetX <= REGION_EDGE_HITBOX_PX) {
+      return 'start';
+    }
+
+    if (rect.width - offsetX <= REGION_EDGE_HITBOX_PX) {
+      return 'end';
+    }
+
+    return null;
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isModifierKeyPressed(event)) {
+        setIsModifierPressed(true);
+      }
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (!isModifierKeyPressed(event)) {
+        setIsModifierPressed(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!interactionRef.current) return;
+
+      const interaction = interactionRef.current;
+      const deltaX = event.clientX - interaction.initialMouseX;
+      if (Math.abs(deltaX) >= DRAG_THRESHOLD_PX) {
+        interaction.moved = true;
+      }
+
+      if (interaction.mode === 'drag') {
+        const beatDelta = Math.round(deltaX / beatWidth);
+        const nextStartBeat = clampStartBeat(interaction.initialStartBeat + beatDelta);
+        setPreviewBeats({
+          [interaction.regionId]: {
+            startBeat: nextStartBeat,
+            length: interaction.initialLength,
+          },
+        });
+        return;
+      }
+
+      if (interaction.mode === 'resize') {
+        const desiredBeat = getBeatFromClientX(
+          event.clientX,
+          interaction.resizeEdge === 'end' ? 'end' : 'start'
+        );
+
+        if (interaction.resizeEdge === 'start') {
+          const nextStartBeat = Math.min(desiredBeat, interaction.initialStartBeat + interaction.initialLength - 1);
+          const endBeat = interaction.initialStartBeat + interaction.initialLength;
+          setPreviewBeats({
+            [interaction.regionId]: {
+              startBeat: nextStartBeat,
+              length: Math.max(1, endBeat - nextStartBeat),
+            },
+          });
+          return;
+        }
+
+        setPreviewBeats({
+          [interaction.regionId]: {
+            startBeat: interaction.initialStartBeat,
+            length: Math.max(1, desiredBeat - interaction.initialStartBeat),
+          },
+        });
+      }
+    };
+
+    const handleMouseUp = (event: MouseEvent) => {
+      if (!interactionRef.current) return;
+
+      const interaction = interactionRef.current;
+      interactionRef.current = null;
+
+      if (!interaction.moved) {
+        setPreviewBeats({});
+        onSelectRegion(interaction.regionId, { shiftKey: event.shiftKey });
+        return;
+      }
+
+      const preview = previewBeats[interaction.regionId];
+      setPreviewBeats({});
+
+      if (!preview) {
+        return;
+      }
+
+      if (interaction.mode === 'drag') {
+        onMoveRegion(interaction.regionId, preview.startBeat);
+        return;
+      }
+
+      if (interaction.mode === 'resize' && interaction.resizeEdge) {
+        const beat = interaction.resizeEdge === 'start'
+          ? preview.startBeat
+          : preview.startBeat + preview.length;
+        onResizeRegion(interaction.regionId, interaction.resizeEdge, beat);
+      }
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [beatWidth, onMoveRegion, onResizeRegion, onSelectRegion, previewBeats, totalBeats]);
+
+  const handleLaneMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return;
+    if (!(event.target instanceof HTMLElement)) return;
+    if (event.target.closest('.global-marker-region')) return;
+    if (!isModifierKeyPressed(event)) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    onCreateAtBeat(getBarSnappedBeatFromClientX(event.clientX));
+  };
+
+  const handleLaneDoubleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!(event.target instanceof HTMLElement)) return;
+    if (event.target.closest('.global-marker-region')) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    onCreateAtBeat(getBarSnappedBeatFromClientX(event.clientX));
+  };
+
+  return (
+    <div
+      ref={laneRef}
+      className={`global-marker-lane${isModifierPressed ? ' pencil-cursor' : ''}`}
+      onMouseDown={handleLaneMouseDown}
+      onDoubleClick={handleLaneDoubleClick}
+    >
+      {markerRegions.map(region => {
+        const { startBeat, length } = getRenderedBeatState(region);
+        const isSelected = selectedRegionIds.includes(region.getId());
+        const isEditing = editingRegionId === region.getId();
+        const left = startBeat * beatWidth;
+        const width = Math.max(beatWidth, length * beatWidth);
+
+        return (
+          <div
+            key={region.getId()}
+            className={`global-marker-region${isSelected ? ' selected' : ''}`}
+            style={{
+              left: `${left}px`,
+              width: `${width}px`,
+              cursor: isEditing ? 'text' : hoverEdges[region.getId()] ? 'ew-resize' : undefined,
+            }}
+            onDoubleClick={(event) => {
+              event.stopPropagation();
+              onSelectRegion(region.getId(), { shiftKey: false });
+              onBeginEdit(region.getId());
+            }}
+            onMouseMove={(event) => {
+              if (isEditing) {
+                return;
+              }
+
+              if (interactionRef.current?.regionId === region.getId()) {
+                return;
+              }
+
+              const resizeEdge = getResizeEdgeFromMouseEvent(event);
+              setHoverEdges((current) => (
+                current[region.getId()] === resizeEdge
+                  ? current
+                  : {
+                      ...current,
+                      [region.getId()]: resizeEdge,
+                    }
+              ));
+            }}
+            onMouseLeave={() => {
+              setHoverEdges((current) => {
+                if (!current[region.getId()]) {
+                  return current;
+                }
+
+                return {
+                  ...current,
+                  [region.getId()]: null,
+                };
+              });
+            }}
+            onMouseDown={(event) => {
+              if (event.button !== 0) return;
+              if (isEditing) return;
+              event.preventDefault();
+              event.stopPropagation();
+
+              const resizeEdge = getResizeEdgeFromMouseEvent(event);
+
+              interactionRef.current = {
+                mode: resizeEdge ? 'resize' : 'drag',
+                regionId: region.getId(),
+                initialMouseX: event.clientX,
+                initialStartBeat: region.getStartFromBeat(),
+                initialLength: region.getLength(),
+                resizeEdge,
+                moved: false,
+              };
+            }}
+          >
+            {isEditing ? (
+              <input
+                className="global-marker-input"
+                value={editingText}
+                onChange={(event) => onEditingTextChange(event.target.value.replace(/\r?\n/g, ' '))}
+                onBlur={() => onCommitEdit(region.getId())}
+                onMouseDown={(event) => {
+                  event.stopPropagation();
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    onCommitEdit(region.getId());
+                  } else if (event.key === 'Escape') {
+                    event.preventDefault();
+                    onCancelEdit();
+                  }
+                }}
+                autoFocus
+              />
+            ) : (
+              <span className="global-marker-label">{region.getName()}</span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default GlobalMarkerLane;

src/core/KGProject.ts

@@ -2,6 +2,7 @@ import { Expose, Type } from 'class-transformer';
 import { KGTrack } from './track/KGTrack';
 import { KGMidiTrack } from './track/KGMidiTrack';
 import { KGAudioTrack } from './track/KGAudioTrack';
+import { KGChordTrack, KGGlobalTrack, KGMarkerTrack, KGSignatureTrack, KGTempoTrack, createDefaultGlobalTracks } from './global-track';
 import { type TimeSignature, WithDefault } from '../types/projectTypes';
 import { TIME_CONSTANTS, KEY_SIGNATURE_MAP } from '../constants/coreConstants';
 import { RESERVED_PROJECT_NAME } from '../util/projectNameUtil';
@@ -57,7 +58,7 @@ export class KGProject {
   @WithDefault(0)
   private projectStructureVersion: number = 0;
 
-  public static readonly CURRENT_PROJECT_STRUCTURE_VERSION: number = 12;
+  public static readonly CURRENT_PROJECT_STRUCTURE_VERSION: number = 13;
   
   @Expose()
   @Type(() => KGTrack, {
@@ -72,8 +73,23 @@ export class KGProject {
   })
   private tracks: KGTrack[] = [];
 
+  @Expose()
+  @Type(() => KGGlobalTrack, {
+    discriminator: {
+      property: '__type',
+      subTypes: [
+        { value: KGGlobalTrack, name: 'KGGlobalTrack' },
+        { value: KGMarkerTrack, name: 'KGMarkerTrack' },
+        { value: KGTempoTrack, name: 'KGTempoTrack' },
+        { value: KGSignatureTrack, name: 'KGSignatureTrack' },
+        { value: KGChordTrack, name: 'KGChordTrack' },
+      ],
+    },
+  })
+  private globalTracks: KGGlobalTrack[] = createDefaultGlobalTracks();
+
   // Constructor
-  constructor(name: string = RESERVED_PROJECT_NAME, maxBars: number = 32, currentBars: number = 0, bpm: number = 125, timeSignature: TimeSignature = { numerator: 4, denominator: 4 }, keySignature: KeySignature = "C major", selectedMode: string = "ionian", isLooping: boolean = false, loopingRange: [number, number] = [0, 0], barWidthMultiplier: number = 1, tracks: KGTrack[] = [], projectStructureVersion: number = KGProject.CURRENT_PROJECT_STRUCTURE_VERSION, pianoRollZoom: number = 1) {
+  constructor(name: string = RESERVED_PROJECT_NAME, maxBars: number = 32, currentBars: number = 0, bpm: number = 125, timeSignature: TimeSignature = { numerator: 4, denominator: 4 }, keySignature: KeySignature = "C major", selectedMode: string = "ionian", isLooping: boolean = false, loopingRange: [number, number] = [0, 0], barWidthMultiplier: number = 1, tracks: KGTrack[] = [], projectStructureVersion: number = KGProject.CURRENT_PROJECT_STRUCTURE_VERSION, pianoRollZoom: number = 1, globalTracks: KGGlobalTrack[] = createDefaultGlobalTracks()) {
     this.name = name;
     this.maxBars = maxBars;
     this.currentBars = currentBars;
@@ -87,6 +103,7 @@ export class KGProject {
     this.tracks = tracks;
     this.projectStructureVersion = projectStructureVersion;
     this.pianoRollZoom = pianoRollZoom;
+    this.globalTracks = globalTracks;
   }
 
   // Getters
@@ -126,6 +143,10 @@ export class KGProject {
     return this.tracks;
   }
 
+  public getGlobalTracks(): KGGlobalTrack[] {
+    return this.globalTracks;
+  }
+
   // Setters
   public setName(name: string): void {
     this.name = name;
@@ -155,6 +176,10 @@ export class KGProject {
     this.tracks = tracks;
   }
 
+  public setGlobalTracks(globalTracks: KGGlobalTrack[]): void {
+    this.globalTracks = globalTracks;
+  }
+
   public setProjectStructureVersion(projectStructureVersion: number): void {
     this.projectStructureVersion = projectStructureVersion;
   }

src/core/commands/global-region/CreateGlobalMarkerRegionCommand.ts

@@ -0,0 +1,78 @@
+import { KGCommand } from '../KGCommand';
+import { KGCore } from '../../KGCore';
+import { KGMarkerRegion } from '../../region/KGMarkerRegion';
+import { GlobalTrackType } from '../../global-track';
+import { generateUniqueId } from '../../../util/miscUtil';
+import {
+  DEFAULT_MARKER_REGION_NAME,
+  findGlobalTrackByType,
+  findMarkerNeighborBounds,
+  getSongEndBeat,
+} from '../../../util/globalTrackUtil';
+
+export class CreateGlobalMarkerRegionCommand extends KGCommand {
+  private readonly startBeat: number;
+  private readonly preferredLength: number;
+  private readonly regionId: string;
+  private readonly initialName: string;
+  private createdRegion: KGMarkerRegion | null = null;
+  private originalRegionIndex = -1;
+
+  constructor(startBeat: number, preferredLength: number, initialName: string = DEFAULT_MARKER_REGION_NAME, regionId?: string) {
+    super();
+    this.startBeat = startBeat;
+    this.preferredLength = preferredLength;
+    this.initialName = initialName;
+    this.regionId = regionId ?? generateUniqueId('KGMarkerRegion');
+  }
+
+  execute(): void {
+    const project = KGCore.instance().getCurrentProject();
+    const markerTrack = findGlobalTrackByType(project, GlobalTrackType.Marker);
+    if (!markerTrack) {
+      throw new Error('Marker global track not found');
+    }
+
+    const { maxEndBeat } = findMarkerNeighborBounds(project, null, this.startBeat);
+    const songEndBeat = getSongEndBeat(project);
+    const allowedEndBeat = Math.min(maxEndBeat, songEndBeat);
+    const targetEndBeat = Math.min(this.startBeat + this.preferredLength, allowedEndBeat);
+    const length = Math.max(1, targetEndBeat - this.startBeat);
+
+    this.createdRegion = new KGMarkerRegion(
+      this.regionId,
+      markerTrack.getId(),
+      markerTrack.getTrackIndex(),
+      this.initialName,
+      this.startBeat,
+      length
+    );
+
+    const regions = [...markerTrack.getRegions(), this.createdRegion]
+      .sort((left, right) => left.getStartFromBeat() - right.getStartFromBeat());
+    this.originalRegionIndex = regions.findIndex(region => region.getId() === this.regionId);
+    markerTrack.setRegions(regions);
+  }
+
+  undo(): void {
+    if (!this.createdRegion) {
+      throw new Error('Cannot undo: no global marker region was created');
+    }
+
+    const project = KGCore.instance().getCurrentProject();
+    const markerTrack = findGlobalTrackByType(project, GlobalTrackType.Marker);
+    if (!markerTrack) {
+      throw new Error('Marker global track not found during undo');
+    }
+
+    markerTrack.removeRegion(this.regionId);
+  }
+
+  getDescription(): string {
+    return `Create marker "${this.initialName}"`;
+  }
+
+  public getCreatedRegion(): KGMarkerRegion | null {
+    return this.createdRegion;
+  }
+}

src/core/commands/global-region/DeleteGlobalRegionCommand.ts

@@ -0,0 +1,109 @@
+import { KGCommand } from '../KGCommand';
+import { KGCore } from '../../KGCore';
+import { KGGlobalRegion } from '../../region/KGGlobalRegion';
+import { findGlobalTrackContainingRegion } from '../../../util/globalTrackUtil';
+
+export class DeleteGlobalRegionCommand extends KGCommand {
+  private readonly regionId: string;
+  private deletedRegion: KGGlobalRegion | null = null;
+  private trackId: string | null = null;
+  private originalIndex = -1;
+
+  constructor(regionId: string) {
+    super();
+    this.regionId = regionId;
+  }
+
+  execute(): void {
+    const project = KGCore.instance().getCurrentProject();
+    const result = findGlobalTrackContainingRegion(project, this.regionId);
+    if (!result) {
+      throw new Error(`Global region with ID ${this.regionId} not found`);
+    }
+
+    this.deletedRegion = result.region;
+    this.trackId = result.track.getId();
+    this.originalIndex = result.regionIndex;
+    result.track.removeRegion(this.regionId);
+
+    const selectedItem = KGCore.instance().getSelectedItems().find(item => item.getId() === this.regionId);
+    if (selectedItem) {
+      KGCore.instance().removeSelectedItem(selectedItem);
+    }
+  }
+
+  undo(): void {
+    if (!this.deletedRegion || !this.trackId) {
+      throw new Error('Cannot undo: no deleted global region stored');
+    }
+
+    const project = KGCore.instance().getCurrentProject();
+    const track = project.getGlobalTracks().find(candidate => candidate.getId() === this.trackId);
+    if (!track) {
+      throw new Error(`Global track ${this.trackId} not found during undo`);
+    }
+
+    const regions = [...track.getRegions()];
+    regions.splice(this.originalIndex, 0, this.deletedRegion);
+    track.setRegions(regions);
+  }
+
+  getDescription(): string {
+    return `Delete marker "${this.deletedRegion?.getName() ?? this.regionId}"`;
+  }
+}
+
+export class DeleteMultipleGlobalRegionsCommand extends KGCommand {
+  private readonly regionIds: string[];
+  private deletedRegions: Array<{ region: KGGlobalRegion; trackId: string; originalIndex: number }> = [];
+
+  constructor(regionIds: string[]) {
+    super();
+    this.regionIds = regionIds;
+  }
+
+  execute(): void {
+    const project = KGCore.instance().getCurrentProject();
+    this.deletedRegions = [];
+
+    for (const regionId of this.regionIds) {
+      const result = findGlobalTrackContainingRegion(project, regionId);
+      if (!result) continue;
+      this.deletedRegions.push({
+        region: result.region,
+        trackId: result.track.getId(),
+        originalIndex: result.regionIndex,
+      });
+    }
+
+    this.deletedRegions
+      .slice()
+      .sort((left, right) => right.originalIndex - left.originalIndex)
+      .forEach(({ region, trackId }) => {
+        const track = project.getGlobalTracks().find(candidate => candidate.getId() === trackId);
+        track?.removeRegion(region.getId());
+        const selectedItem = KGCore.instance().getSelectedItems().find(item => item.getId() === region.getId());
+        if (selectedItem) {
+          KGCore.instance().removeSelectedItem(selectedItem);
+        }
+      });
+  }
+
+  undo(): void {
+    const project = KGCore.instance().getCurrentProject();
+    this.deletedRegions
+      .slice()
+      .sort((left, right) => left.originalIndex - right.originalIndex)
+      .forEach(({ region, trackId, originalIndex }) => {
+        const track = project.getGlobalTracks().find(candidate => candidate.getId() === trackId);
+        if (!track) return;
+        const regions = [...track.getRegions()];
+        regions.splice(originalIndex, 0, region);
+        track.setRegions(regions);
+      });
+  }
+
+  getDescription(): string {
+    return this.regionIds.length === 1 ? 'Delete marker' : `Delete ${this.regionIds.length} markers`;
+  }
+}

src/core/commands/global-region/GlobalMarkerCommands.test.ts

@@ -0,0 +1,109 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { KGCore } from '../../KGCore';
+import { KGProject } from '../../KGProject';
+import { GlobalTrackType } from '../../global-track';
+import { KGMarkerRegion } from '../../region/KGMarkerRegion';
+import { CreateGlobalMarkerRegionCommand } from './CreateGlobalMarkerRegionCommand';
+import { MoveGlobalRegionCommand } from './MoveGlobalRegionCommand';
+import { ResizeGlobalRegionCommand } from './ResizeGlobalRegionCommand';
+import { DeleteGlobalRegionCommand } from './DeleteGlobalRegionCommand';
+import { UpdateGlobalRegionTextCommand } from './UpdateGlobalRegionTextCommand';
+
+describe('global marker region commands', () => {
+  beforeEach(() => {
+    const project = new KGProject('Markers', 8, 0, 120);
+    const mockCore = KGCore.instance() as unknown as {
+      getCurrentProject: ReturnType<typeof vi.fn>;
+      getSelectedItems: ReturnType<typeof vi.fn>;
+      removeSelectedItem?: ReturnType<typeof vi.fn>;
+    };
+
+    mockCore.getCurrentProject.mockReturnValue(project);
+    mockCore.getSelectedItems.mockReturnValue([]);
+    if (!mockCore.removeSelectedItem) {
+      mockCore.removeSelectedItem = vi.fn();
+    } else {
+      mockCore.removeSelectedItem.mockReset();
+    }
+  });
+
+  const getMarkerTrack = () => {
+    const markerTrack = KGCore.instance().getCurrentProject().getGlobalTracks()
+      .find(track => track.getType() === GlobalTrackType.Marker);
+
+    if (!markerTrack) {
+      throw new Error('Marker track missing in test setup');
+    }
+
+    return markerTrack;
+  };
+
+  it('creates a marker region clamped to the next marker start', () => {
+    const markerTrack = getMarkerTrack();
+    markerTrack.addRegion(new KGMarkerRegion('existing', markerTrack.getId(), markerTrack.getTrackIndex(), 'Verse', 10, 4));
+
+    const command = new CreateGlobalMarkerRegionCommand(4, 32, 'Intro');
+    command.execute();
+
+    const created = command.getCreatedRegion();
+    expect(created).not.toBeNull();
+    expect(created?.getStartFromBeat()).toBe(4);
+    expect(created?.getLength()).toBe(6);
+  });
+
+  it('moves a marker region with beat snapping and neighbor clamping', () => {
+    const markerTrack = getMarkerTrack();
+    const region = new KGMarkerRegion('middle', markerTrack.getId(), markerTrack.getTrackIndex(), 'Middle', 4, 2);
+    markerTrack.setRegions([
+      new KGMarkerRegion('left', markerTrack.getId(), markerTrack.getTrackIndex(), 'Left', 0, 4),
+      region,
+      new KGMarkerRegion('right', markerTrack.getId(), markerTrack.getTrackIndex(), 'Right', 10, 2),
+    ]);
+
+    const command = new MoveGlobalRegionCommand('middle', 9);
+    command.execute();
+
+    expect(region.getStartFromBeat()).toBe(8);
+
+    command.undo();
+    expect(region.getStartFromBeat()).toBe(4);
+  });
+
+  it('resizes a marker region with a minimum length of one beat', () => {
+    const markerTrack = getMarkerTrack();
+    const region = new KGMarkerRegion('marker', markerTrack.getId(), markerTrack.getTrackIndex(), 'Marker', 4, 4);
+    markerTrack.setRegions([region]);
+
+    const resizeStartCommand = new ResizeGlobalRegionCommand('marker', 'start', 7);
+    resizeStartCommand.execute();
+    expect(region.getStartFromBeat()).toBe(7);
+    expect(region.getLength()).toBe(1);
+
+    resizeStartCommand.undo();
+    expect(region.getStartFromBeat()).toBe(4);
+    expect(region.getLength()).toBe(4);
+
+    const resizeEndCommand = new ResizeGlobalRegionCommand('marker', 'end', 5);
+    resizeEndCommand.execute();
+    expect(region.getLength()).toBe(1);
+  });
+
+  it('updates text and deletes with undo support', () => {
+    const markerTrack = getMarkerTrack();
+    const region = new KGMarkerRegion('marker', markerTrack.getId(), markerTrack.getTrackIndex(), 'Old', 0, 4);
+    markerTrack.setRegions([region]);
+
+    const renameCommand = new UpdateGlobalRegionTextCommand('marker', 'New');
+    renameCommand.execute();
+    expect(region.getName()).toBe('New');
+    renameCommand.undo();
+    expect(region.getName()).toBe('Old');
+
+    const deleteCommand = new DeleteGlobalRegionCommand('marker');
+    deleteCommand.execute();
+    expect(markerTrack.getRegions()).toHaveLength(0);
+    deleteCommand.undo();
+    expect(markerTrack.getRegions()).toHaveLength(1);
+    expect(markerTrack.getRegions()[0].getId()).toBe('marker');
+  });
+});

src/core/commands/global-region/MoveGlobalRegionCommand.ts

@@ -0,0 +1,53 @@
+import { KGCommand } from '../KGCommand';
+import { KGCore } from '../../KGCore';
+import { KGGlobalRegion } from '../../region/KGGlobalRegion';
+import { GlobalTrackType } from '../../global-track';
+import { findGlobalTrackContainingRegion, findMarkerNeighborBounds } from '../../../util/globalTrackUtil';
+
+export class MoveGlobalRegionCommand extends KGCommand {
+  private readonly regionId: string;
+  private readonly desiredStartBeat: number;
+  private targetRegion: KGGlobalRegion | null = null;
+  private originalStartBeat = 0;
+
+  constructor(regionId: string, desiredStartBeat: number) {
+    super();
+    this.regionId = regionId;
+    this.desiredStartBeat = desiredStartBeat;
+  }
+
+  execute(): void {
+    const project = KGCore.instance().getCurrentProject();
+    const result = findGlobalTrackContainingRegion(project, this.regionId);
+    if (!result) {
+      throw new Error(`Global region with ID ${this.regionId} not found`);
+    }
+
+    this.targetRegion = result.region;
+    this.originalStartBeat = result.region.getStartFromBeat();
+
+    if (result.track.getType() !== GlobalTrackType.Marker) {
+      result.region.setStartFromBeat(this.desiredStartBeat);
+      return;
+    }
+
+    const { minStartBeat, maxEndBeat } = findMarkerNeighborBounds(project, this.regionId, this.desiredStartBeat);
+    const maxStartBeat = Math.max(minStartBeat, maxEndBeat - result.region.getLength());
+    const clampedStartBeat = Math.max(minStartBeat, Math.min(this.desiredStartBeat, maxStartBeat));
+    result.region.setStartFromBeat(clampedStartBeat);
+
+    result.track.setRegions([...result.track.getRegions()].sort((left, right) => left.getStartFromBeat() - right.getStartFromBeat()));
+  }
+
+  undo(): void {
+    if (!this.targetRegion) {
+      throw new Error('Cannot undo: no global region was moved');
+    }
+
+    this.targetRegion.setStartFromBeat(this.originalStartBeat);
+  }
+
+  getDescription(): string {
+    return `Move global region "${this.targetRegion?.getName() ?? this.regionId}"`;
+  }
+}

src/core/commands/global-region/ResizeGlobalRegionCommand.ts

@@ -0,0 +1,67 @@
+import { KGCommand } from '../KGCommand';
+import { KGCore } from '../../KGCore';
+import { GlobalTrackType } from '../../global-track';
+import { findGlobalTrackContainingRegion, findMarkerNeighborBounds, getSongEndBeat } from '../../../util/globalTrackUtil';
+import { KGGlobalRegion } from '../../region/KGGlobalRegion';
+
+export type GlobalRegionResizeEdge = 'start' | 'end';
+
+export class ResizeGlobalRegionCommand extends KGCommand {
+  private readonly regionId: string;
+  private readonly edge: GlobalRegionResizeEdge;
+  private readonly desiredBeat: number;
+  private targetRegion: KGGlobalRegion | null = null;
+  private originalStartBeat = 0;
+  private originalLength = 0;
+
+  constructor(regionId: string, edge: GlobalRegionResizeEdge, desiredBeat: number) {
+    super();
+    this.regionId = regionId;
+    this.edge = edge;
+    this.desiredBeat = desiredBeat;
+  }
+
+  execute(): void {
+    const project = KGCore.instance().getCurrentProject();
+    const result = findGlobalTrackContainingRegion(project, this.regionId);
+    if (!result) {
+      throw new Error(`Global region with ID ${this.regionId} not found`);
+    }
+
+    this.targetRegion = result.region;
+    this.originalStartBeat = result.region.getStartFromBeat();
+    this.originalLength = result.region.getLength();
+
+    if (result.track.getType() !== GlobalTrackType.Marker) {
+      return;
+    }
+
+    const originalEndBeat = this.originalStartBeat + this.originalLength;
+    const { minStartBeat, maxEndBeat } = findMarkerNeighborBounds(project, this.regionId, this.originalStartBeat);
+    const songEndBeat = getSongEndBeat(project);
+    const absoluteMaxEndBeat = Math.min(maxEndBeat, songEndBeat);
+
+    if (this.edge === 'start') {
+      const clampedStartBeat = Math.max(minStartBeat, Math.min(this.desiredBeat, originalEndBeat - 1));
+      result.region.setStartFromBeat(clampedStartBeat);
+      result.region.setLength(Math.max(1, originalEndBeat - clampedStartBeat));
+      return;
+    }
+
+    const clampedEndBeat = Math.max(this.originalStartBeat + 1, Math.min(this.desiredBeat, absoluteMaxEndBeat));
+    result.region.setLength(Math.max(1, clampedEndBeat - this.originalStartBeat));
+  }
+
+  undo(): void {
+    if (!this.targetRegion) {
+      throw new Error('Cannot undo: no global region was resized');
+    }
+
+    this.targetRegion.setStartFromBeat(this.originalStartBeat);
+    this.targetRegion.setLength(this.originalLength);
+  }
+
+  getDescription(): string {
+    return `Resize global region "${this.targetRegion?.getName() ?? this.regionId}"`;
+  }
+}

src/core/commands/global-region/UpdateGlobalRegionTextCommand.ts

@@ -0,0 +1,38 @@
+import { KGCommand } from '../KGCommand';
+import { KGCore } from '../../KGCore';
+import { findGlobalTrackContainingRegion } from '../../../util/globalTrackUtil';
+
+export class UpdateGlobalRegionTextCommand extends KGCommand {
+  private readonly regionId: string;
+  private readonly nextText: string;
+  private previousText = '';
+
+  constructor(regionId: string, nextText: string) {
+    super();
+    this.regionId = regionId;
+    this.nextText = nextText;
+  }
+
+  execute(): void {
+    const result = findGlobalTrackContainingRegion(KGCore.instance().getCurrentProject(), this.regionId);
+    if (!result) {
+      throw new Error(`Global region with ID ${this.regionId} not found`);
+    }
+
+    this.previousText = result.region.getName();
+    result.region.setName(this.nextText);
+  }
+
+  undo(): void {
+    const result = findGlobalTrackContainingRegion(KGCore.instance().getCurrentProject(), this.regionId);
+    if (!result) {
+      throw new Error(`Global region with ID ${this.regionId} not found during undo`);
+    }
+
+    result.region.setName(this.previousText);
+  }
+
+  getDescription(): string {
+    return `Rename marker to "${this.nextText}"`;
+  }
+}

src/core/commands/index.ts

@@ -34,6 +34,13 @@ export type { StemImportEntry } from './region/ImportStemsCommand';
 export { SplitRegionCommand } from './region/SplitRegionCommand';
 export { MergeMidiRegionsCommand } from './region/MergeMidiRegionsCommand';
 
+// Global region commands
+export { CreateGlobalMarkerRegionCommand } from './global-region/CreateGlobalMarkerRegionCommand';
+export { MoveGlobalRegionCommand } from './global-region/MoveGlobalRegionCommand';
+export { ResizeGlobalRegionCommand, type GlobalRegionResizeEdge } from './global-region/ResizeGlobalRegionCommand';
+export { DeleteGlobalRegionCommand, DeleteMultipleGlobalRegionsCommand } from './global-region/DeleteGlobalRegionCommand';
+export { UpdateGlobalRegionTextCommand } from './global-region/UpdateGlobalRegionTextCommand';
+
 // Note commands
 export { CreateNoteCommand } from './note/CreateNoteCommand';
 export { DeleteMidiEventsCommand } from './note/DeleteMidiEventsCommand';

src/core/global-track/KGChordTrack.ts

@@ -0,0 +1,16 @@
+import { Expose } from 'class-transformer';
+import { GlobalTrackType, KGGlobalTrack } from './KGGlobalTrack';
+
+export class KGChordTrack extends KGGlobalTrack {
+  @Expose()
+  protected override __type: string = 'KGChordTrack';
+
+  constructor(id: string = 'global-chord', trackIndex: number = 3, name: string = 'Chord') {
+    super(id, trackIndex, GlobalTrackType.Chord, name, []);
+    this.__type = 'KGChordTrack';
+  }
+
+  public override getCurrentType(): string {
+    return 'KGChordTrack';
+  }
+}

src/core/global-track/KGGlobalTrack.ts

@@ -0,0 +1,115 @@
+import { Expose, Type } from 'class-transformer';
+import { KGGlobalRegion } from '../region/KGGlobalRegion';
+import { KGMarkerRegion } from '../region/KGMarkerRegion';
+
+export enum GlobalTrackType {
+  Marker = 'marker',
+  Tempo = 'tempo',
+  Signature = 'signature',
+  Chord = 'chord',
+}
+
+export class KGGlobalTrack {
+  @Expose()
+  protected __type: string = 'KGGlobalTrack';
+
+  @Expose()
+  protected id: string = '';
+
+  @Expose()
+  protected trackIndex: number = 0;
+
+  @Expose()
+  protected type: GlobalTrackType = GlobalTrackType.Marker;
+
+  @Expose()
+  protected name: string = '';
+
+  @Expose()
+  @Type(() => KGGlobalRegion, {
+    discriminator: {
+      property: '__type',
+      subTypes: [
+        { value: KGGlobalRegion, name: 'KGGlobalRegion' },
+        { value: KGMarkerRegion, name: 'KGMarkerRegion' },
+      ],
+    },
+  })
+  protected regions: KGGlobalRegion[] = [];
+
+  constructor(
+    id: string = '',
+    trackIndex: number = 0,
+    type: GlobalTrackType = GlobalTrackType.Marker,
+    name: string = '',
+    regions: KGGlobalRegion[] = []
+  ) {
+    this.id = id;
+    this.trackIndex = trackIndex;
+    this.type = type;
+    this.name = name;
+    this.regions = regions;
+  }
+
+  public getId(): string {
+    return this.id;
+  }
+
+  public setId(id: string): void {
+    this.id = id;
+  }
+
+  public getTrackIndex(): number {
+    return this.trackIndex;
+  }
+
+  public setTrackIndex(trackIndex: number): void {
+    this.trackIndex = trackIndex;
+    this.regions.forEach(region => {
+      region.setTrackIndex(trackIndex);
+      region.setTrackId(this.id);
+    });
+  }
+
+  public getType(): GlobalTrackType {
+    return this.type;
+  }
+
+  public setType(type: GlobalTrackType): void {
+    this.type = type;
+  }
+
+  public getName(): string {
+    return this.name;
+  }
+
+  public setName(name: string): void {
+    this.name = name;
+  }
+
+  public getRegions(): KGGlobalRegion[] {
+    return this.regions;
+  }
+
+  public setRegions(regions: KGGlobalRegion[]): void {
+    this.regions = regions.map(region => {
+      region.setTrackId(this.id);
+      region.setTrackIndex(this.trackIndex);
+      return region;
+    });
+  }
+
+  public addRegion(region: KGGlobalRegion): void {
+    region.setTrackId(this.id);
+    region.setTrackIndex(this.trackIndex);
+    this.regions.push(region);
+  }
+
+  public removeRegion(regionId: string): void {
+    this.regions = this.regions.filter(region => region.getId() !== regionId);
+  }
+
+  public getCurrentType(): string {
+    return 'KGGlobalTrack';
+  }
+}

src/core/global-track/KGMarkerTrack.ts

@@ -0,0 +1,16 @@
+import { Expose } from 'class-transformer';
+import { GlobalTrackType, KGGlobalTrack } from './KGGlobalTrack';
+
+export class KGMarkerTrack extends KGGlobalTrack {
+  @Expose()
+  protected override __type: string = 'KGMarkerTrack';
+
+  constructor(id: string = 'global-marker', trackIndex: number = 0, name: string = 'Marker') {
+    super(id, trackIndex, GlobalTrackType.Marker, name, []);
+    this.__type = 'KGMarkerTrack';
+  }
+
+  public override getCurrentType(): string {
+    return 'KGMarkerTrack';
+  }
+}

src/core/global-track/KGSignatureTrack.ts

@@ -0,0 +1,16 @@
+import { Expose } from 'class-transformer';
+import { GlobalTrackType, KGGlobalTrack } from './KGGlobalTrack';
+
+export class KGSignatureTrack extends KGGlobalTrack {
+  @Expose()
+  protected override __type: string = 'KGSignatureTrack';
+
+  constructor(id: string = 'global-signature', trackIndex: number = 2, name: string = 'Signature') {
+    super(id, trackIndex, GlobalTrackType.Signature, name, []);
+    this.__type = 'KGSignatureTrack';
+  }
+
+  public override getCurrentType(): string {
+    return 'KGSignatureTrack';
+  }
+}

src/core/global-track/KGTempoTrack.ts

@@ -0,0 +1,16 @@
+import { Expose } from 'class-transformer';
+import { GlobalTrackType, KGGlobalTrack } from './KGGlobalTrack';
+
+export class KGTempoTrack extends KGGlobalTrack {
+  @Expose()
+  protected override __type: string = 'KGTempoTrack';
+
+  constructor(id: string = 'global-tempo', trackIndex: number = 1, name: string = 'Tempo') {
+    super(id, trackIndex, GlobalTrackType.Tempo, name, []);
+    this.__type = 'KGTempoTrack';
+  }
+
+  public override getCurrentType(): string {
+    return 'KGTempoTrack';
+  }
+}

src/core/global-track/createDefaultGlobalTracks.ts

@@ -0,0 +1,14 @@
+import { KGChordTrack } from './KGChordTrack';
+import { KGGlobalTrack } from './KGGlobalTrack';
+import { KGMarkerTrack } from './KGMarkerTrack';
+import { KGSignatureTrack } from './KGSignatureTrack';
+import { KGTempoTrack } from './KGTempoTrack';
+
+export function createDefaultGlobalTracks(): KGGlobalTrack[] {
+  return [
+    new KGMarkerTrack(),
+    new KGTempoTrack(),
+    new KGSignatureTrack(),
+    new KGChordTrack(),
+  ];
+}

src/core/global-track/index.ts

@@ -0,0 +1,6 @@
+export { KGGlobalTrack, GlobalTrackType } from './KGGlobalTrack';
+export { KGMarkerTrack } from './KGMarkerTrack';
+export { KGTempoTrack } from './KGTempoTrack';
+export { KGSignatureTrack } from './KGSignatureTrack';
+export { KGChordTrack } from './KGChordTrack';
+export { createDefaultGlobalTracks } from './createDefaultGlobalTracks';

src/core/io/KGProjectStorage.test.ts

@@ -1,6 +1,8 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { KGProjectStorage, DuplicateEntryError } from './KGProjectStorage';
 import { KGProject } from '../KGProject';
+import { GlobalTrackType } from '../global-track';
+import { KGMarkerRegion } from '../region/KGMarkerRegion';
 import { KGTrack } from '../track/KGTrack';
 
 // --- OPFS mock infrastructure ---
@@ -159,6 +161,24 @@ describe('KGProjectStorage', () => {
     expect(loaded!.getPianoRollZoom()).toBe(5);
   });
 
+  it('preserves global tracks and marker regions when saving and loading', async () => {
+    const project = createTestProject('Marker Song');
+    const markerTrack = project.getGlobalTracks().find(track => track.getType() === GlobalTrackType.Marker);
+
+    expect(markerTrack).toBeDefined();
+    markerTrack?.addRegion(new KGMarkerRegion('marker-1', markerTrack.getId(), markerTrack.getTrackIndex(), 'Intro', 0, 8));
+
+    await storage.save('Marker Song', project);
+
+    const loaded = await storage.load('Marker Song');
+    const loadedMarkerTrack = loaded?.getGlobalTracks().find(track => track.getType() === GlobalTrackType.Marker);
+
+    expect(loadedMarkerTrack).toBeDefined();
+    expect(loadedMarkerTrack?.getRegions()).toHaveLength(1);
+    expect(loadedMarkerTrack?.getRegions()[0]).toBeInstanceOf(KGMarkerRegion);
+    expect(loadedMarkerTrack?.getRegions()[0].getName()).toBe('Intro');
+  });
+
   it('creates meta.json and media/ directory on save', async () => {
     const project = createTestProject('My Song');
     await storage.save('My Song', project);

src/core/project-upgrader/KGProjectUpgrader.ts

@@ -11,6 +11,7 @@ import { upgradeToV9 } from './upgradeToV9';
 import { upgradeToV10 } from './upgradeToV10';
 import { upgradeToV11 } from './upgradeToV11';
 import { upgradeToV12 } from './upgradeToV12';
+import { upgradeToV13 } from './upgradeToV13';
 
 /**
  * Upgrade the given project to the latest structure version, one version at a time.
@@ -78,6 +79,10 @@ export function upgradeProjectToLatest(project: KGProject): KGProject {
         workingProject = upgradeToV12(workingProject);
         break;
       }
+      case 13: {
+        workingProject = upgradeToV13(workingProject);
+        break;
+      }
       default: {
         // If an upgrader is missing, throw to prevent loading incompatible structures
         throw new Error(`No upgrader found for project structure version ${nextVersion}`);

src/core/project-upgrader/upgradeToV13.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { KGProject } from '../KGProject';
+import { GlobalTrackType } from '../global-track';
+import { upgradeProjectToLatest } from './KGProjectUpgrader';
+import { upgradeToV13 } from './upgradeToV13';
+
+describe('upgradeToV13', () => {
+  it('adds the default global tracks to legacy projects', () => {
+    const project = new KGProject('Legacy', 32, 0, 125, undefined, undefined, undefined, undefined, [0, 0], 1, [], 12, 1, []);
+
+    upgradeToV13(project);
+
+    expect(project.getProjectStructureVersion()).toBe(13);
+    expect(project.getGlobalTracks()).toHaveLength(4);
+    expect(project.getGlobalTracks().map(track => track.getType())).toEqual([
+      GlobalTrackType.Marker,
+      GlobalTrackType.Tempo,
+      GlobalTrackType.Signature,
+      GlobalTrackType.Chord,
+    ]);
+  });
+
+  it('runs through the main upgrader path', () => {
+    const project = new KGProject('Legacy', 32, 0, 125, undefined, undefined, undefined, undefined, [0, 0], 1, [], 12, 1, []);
+
+    const upgraded = upgradeProjectToLatest(project);
+
+    expect(upgraded.getProjectStructureVersion()).toBe(KGProject.CURRENT_PROJECT_STRUCTURE_VERSION);
+    expect(upgraded.getGlobalTracks()).toHaveLength(4);
+  });
+});

src/core/project-upgrader/upgradeToV13.ts

@@ -0,0 +1,12 @@
+import { KGProject } from '../KGProject';
+import { ensureDefaultGlobalTracks } from '../../util/globalTrackUtil';
+
+export function upgradeToV13(project: KGProject): KGProject {
+  try {
+    ensureDefaultGlobalTracks(project);
+  } finally {
+    project.setProjectStructureVersion(13);
+  }
+
+  return project;
+}

src/core/region/KGGlobalRegion.ts

@@ -0,0 +1,27 @@
+import { Expose } from 'class-transformer';
+import { KGRegion } from './KGRegion';
+
+export class KGGlobalRegion extends KGRegion {
+  @Expose()
+  protected override __type: string = 'KGGlobalRegion';
+
+  constructor(
+    id: string,
+    trackId: string,
+    trackIndex: number,
+    name: string,
+    startFromBeat: number = 0,
+    length: number = 0
+  ) {
+    super(id, trackId, trackIndex, name, startFromBeat, length);
+    this.__type = 'KGGlobalRegion';
+  }
+
+  public override getRootType(): string {
+    return 'KGRegion';
+  }
+
+  public override getCurrentType(): string {
+    return 'KGGlobalRegion';
+  }
+}

src/core/region/KGMarkerRegion.ts

@@ -0,0 +1,23 @@
+import { Expose } from 'class-transformer';
+import { KGGlobalRegion } from './KGGlobalRegion';
+
+export class KGMarkerRegion extends KGGlobalRegion {
+  @Expose()
+  protected override __type: string = 'KGMarkerRegion';
+
+  constructor(
+    id: string,
+    trackId: string,
+    trackIndex: number,
+    name: string,
+    startFromBeat: number = 0,
+    length: number = 0
+  ) {
+    super(id, trackId, trackIndex, name, startFromBeat, length);
+    this.__type = 'KGMarkerRegion';
+  }
+
+  public override getCurrentType(): string {
+    return 'KGMarkerRegion';
+  }
+}

src/stores/projectStore.ts

@@ -2,6 +2,7 @@ import { create } from 'zustand';
 import { KGCore } from '../core/KGCore';
 import { KGTrack } from '../core/track/KGTrack';
 import { KGProject, type KeySignature } from '../core/KGProject';
+import { KGGlobalTrack } from '../core/global-track';
 import type { TimeSignature } from '../types/projectTypes';
 import { KGMidiTrack, type InstrumentType } from '../core/track/KGMidiTrack';
 import { beatsToTimeString } from '../util/timeUtil';
@@ -69,6 +70,7 @@ interface ProjectState {
   projectName: string;
   savedProjectName: string; // OPFS folder name where the project is currently saved
   tracks: KGTrack[];
+  globalTracks: KGGlobalTrack[];
   currentStatus: string;
   maxBars: number;
   barWidthMultiplier: number;
@@ -405,6 +407,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     projectName: currentProject.getName(),
     savedProjectName: currentProject.getName(),
     tracks: currentProject.getTracks() as KGTrack[],
+    globalTracks: currentProject.getGlobalTracks() as KGGlobalTrack[],
     currentStatus: KGCore.instance().getStatus() || 'Unknown',
     maxBars: currentProject.getMaxBars(),
     barWidthMultiplier: currentProject.getBarWidthMultiplier(),
@@ -517,7 +520,10 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
         // Update the store state with a new array reference to trigger re-render
         const project = KGCore.instance().getCurrentProject();
-        set({ tracks: [...project.getTracks()] as KGTrack[] });
+        set({
+          tracks: [...project.getTracks()] as KGTrack[],
+          globalTracks: [...project.getGlobalTracks()] as KGGlobalTrack[],
+        });
 
         // Auto-select the newly created track and open instrument selection panel
         const newTrackId = command.getTrackId().toString();
@@ -539,7 +545,10 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         KGCore.instance().executeCommand(command);
 
         const project = KGCore.instance().getCurrentProject();
-        set({ tracks: [...project.getTracks()] as KGTrack[] });
+        set({
+          tracks: [...project.getTracks()] as KGTrack[],
+          globalTracks: [...project.getGlobalTracks()] as KGGlobalTrack[],
+        });
 
         const newTrackId = command.getTrackId().toString();
         set({
@@ -659,7 +668,10 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         // Update the store state with a new array reference to trigger re-render
         const project = KGCore.instance().getCurrentProject();
         const remainingTracks = [...project.getTracks()] as KGTrack[];
-        set({ tracks: remainingTracks });
+        set({
+          tracks: remainingTracks,
+          globalTracks: [...project.getGlobalTracks()] as KGGlobalTrack[],
+        });
 
         // Auto-select another track if any remain
         if (remainingTracks.length > 0) {
@@ -744,7 +756,10 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
         // Update the store state with the current project state
         const project = KGCore.instance().getCurrentProject();
-        set({ tracks: [...project.getTracks()] as KGTrack[] });
+        set({
+          tracks: [...project.getTracks()] as KGTrack[],
+          globalTracks: [...project.getGlobalTracks()] as KGGlobalTrack[],
+        });
 
         console.log(`Updated track ${trackId} properties`);
       } catch (error) {
@@ -773,7 +788,10 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
         // Update the store state with the current project state
         const project = KGCore.instance().getCurrentProject();
-        set({ tracks: [...project.getTracks()] as KGTrack[] });
+        set({
+          tracks: [...project.getTracks()] as KGTrack[],
+          globalTracks: [...project.getGlobalTracks()] as KGGlobalTrack[],
+        });
 
         console.log(`Reordered track from index ${sourceIndex} to ${destinationIndex}`);
       } catch (error) {
@@ -902,6 +920,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
           projectName: projectToLoad.getName(),
           savedProjectName: savedName ?? projectToLoad.getName(),
           tracks: [...tracks],
+          globalTracks: [...projectToLoad.getGlobalTracks()] as KGGlobalTrack[],
           maxBars,
           barWidthMultiplier: projectToLoad.getBarWidthMultiplier(),
           timeSignature,
@@ -1822,6 +1841,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
       set({
         projectName: project.getName(),
         tracks: [...project.getTracks()] as KGTrack[], // Force new array reference - key for re-rendering!
+        globalTracks: [...project.getGlobalTracks()] as KGGlobalTrack[],
         maxBars: project.getMaxBars(),
         barWidthMultiplier: project.getBarWidthMultiplier(),
         timeSignature: project.getTimeSignature(),

src/util/globalTrackUtil.ts

@@ -0,0 +1,85 @@
+import { KGProject } from '../core/KGProject';
+import {
+  GlobalTrackType,
+  KGGlobalTrack,
+  createDefaultGlobalTracks,
+} from '../core/global-track';
+import { KGGlobalRegion } from '../core/region/KGGlobalRegion';
+
+export const DEFAULT_MARKER_REGION_NAME = 'Marker';
+
+export function ensureDefaultGlobalTracks(project: KGProject): KGGlobalTrack[] {
+  const existingTracks = project.getGlobalTracks?.() ?? [];
+  const nextTracks = createDefaultGlobalTracks();
+
+  for (const existingTrack of existingTracks) {
+    const matchedTrack = nextTracks.find(track => track.getType() === existingTrack.getType());
+    if (matchedTrack) {
+      matchedTrack.setRegions(existingTrack.getRegions());
+    }
+  }
+
+  nextTracks.forEach((track, index) => {
+    track.setTrackIndex(index);
+  });
+
+  project.setGlobalTracks(nextTracks);
+  return nextTracks;
+}
+
+export function getSongEndBeat(project: KGProject): number {
+  return project.getMaxBars() * project.getTimeSignature().numerator;
+}
+
+export function findGlobalTrackByType(project: KGProject, type: GlobalTrackType): KGGlobalTrack | null {
+  return project.getGlobalTracks().find(track => track.getType() === type) ?? null;
+}
+
+export function findGlobalTrackContainingRegion(
+  project: KGProject,
+  regionId: string
+): { track: KGGlobalTrack; region: KGGlobalRegion; regionIndex: number } | null {
+  for (const track of project.getGlobalTracks()) {
+    const regionIndex = track.getRegions().findIndex(region => region.getId() === regionId);
+    if (regionIndex !== -1) {
+      const region = track.getRegions()[regionIndex];
+      return { track, region, regionIndex };
+    }
+  }
+
+  return null;
+}
+
+export function findMarkerNeighborBounds(
+  project: KGProject,
+  regionId: string | null,
+  proposedStartBeat: number
+): { minStartBeat: number; maxEndBeat: number; nextStartBeat: number | null } {
+  const markerTrack = findGlobalTrackByType(project, GlobalTrackType.Marker);
+  const songEndBeat = getSongEndBeat(project);
+
+  if (!markerTrack) {
+    return { minStartBeat: 0, maxEndBeat: songEndBeat, nextStartBeat: null };
+  }
+
+  const otherRegions = markerTrack.getRegions()
+    .filter(region => region.getId() !== regionId)
+    .sort((left, right) => left.getStartFromBeat() - right.getStartFromBeat());
+
+  let minStartBeat = 0;
+  let maxEndBeat = songEndBeat;
+  let nextStartBeat: number | null = null;
+
+  for (const region of otherRegions) {
+    if (region.getStartFromBeat() < proposedStartBeat) {
+      minStartBeat = Math.max(minStartBeat, region.getStartFromBeat() + region.getLength());
+      continue;
+    }
+
+    maxEndBeat = Math.min(maxEndBeat, region.getStartFromBeat());
+    nextStartBeat = region.getStartFromBeat();
+    break;
+  }
+
+  return { minStartBeat, maxEndBeat, nextStartBeat };
+}