@lvce-editor/main-area-worker 9.32.4 → 9.32.7

package/dist/mainAreaWorkerMain.js

@@ -935,7 +935,10 @@ const constructError = (message, type, name) => {
   if (ErrorConstructor === Error) {
     const error = new Error(message);
     if (name && name !== 'VError') {
-      error.name = name;
+      Object.defineProperty(error, 'name', {
+        configurable: true,
+        value: name
+      });
     }
     return error;
   }
@@ -966,31 +969,45 @@ const getParentStack = error => {
 };
 const MethodNotFound = -32601;
 const Custom = -32001;
+const setStack = (error, stack) => {
+  const descriptor = Object.getOwnPropertyDescriptor(error, 'stack');
+  if (descriptor) {
+    if (!descriptor.configurable && !descriptor.writable) {
+      return;
+    }
+    if (!descriptor.configurable && descriptor.writable) {
+      error.stack = stack;
+      return;
+    }
+  }
+  Object.defineProperty(error, 'stack', {
+    configurable: true,
+    value: stack,
+    writable: true
+  });
+};
 const restoreExistingError = (error, currentStack) => {
   if (typeof error.stack === 'string') {
-    error.stack = error.stack + NewLine + currentStack;
+    setStack(error, `${error.stack}${NewLine}${currentStack}`);
   }
   return error;
 };
 const restoreMethodNotFoundError = (error, currentStack) => {
   const restoredError = new JsonRpcError(error.message);
   const parentStack = getParentStack(error);
-  restoredError.stack = parentStack + NewLine + currentStack;
+  setStack(restoredError, `${parentStack}${NewLine}${currentStack}`);
   return restoredError;
 };
 const restoreStackFromData = (restoredError, error, currentStack) => {
   if (error.data.stack && error.data.type && error.message) {
-    restoredError.stack = error.data.type + ': ' + error.message + NewLine + error.data.stack + NewLine + currentStack;
+    setStack(restoredError, `${error.data.type}: ${error.message}${NewLine}${error.data.stack}${NewLine}${currentStack}`);
     return;
   }
   if (error.data.stack) {
-    restoredError.stack = error.data.stack;
+    setStack(restoredError, error.data.stack);
   }
 };
 const applyDataProperties = (restoredError, error) => {
-  if (!error.data) {
-    return;
-  }
   restoreStackFromData(restoredError, error, getCurrentStack());
   if (error.data.codeFrame) {
     // @ts-ignore
@@ -1011,7 +1028,7 @@ const applyDirectProperties = (restoredError, error) => {
     const indexNewLine = getNewLineIndex(lowerStack);
     const parentStack = getParentStack(error);
     // @ts-ignore
-    restoredError.stack = parentStack + lowerStack.slice(indexNewLine);
+    setStack(restoredError, `${parentStack}${lowerStack.slice(indexNewLine)}`);
   }
   if (error.codeFrame) {
     // @ts-ignore
@@ -1545,7 +1562,7 @@ const create$3 = rpcId => {
   };
 };
 
-const None$1 = 'none';
+const None$2 = 'none';
 const Tab$1 = 'tab';
 const TabList = 'tablist';
 const ToolBar = 'toolbar';
@@ -1729,7 +1746,7 @@ const Tab = 13;
 const Main$1 = 24;
 
 const Separator = 1;
-const None = 0;
+const None$1 = 0;
 
 const Electron = 2;
 
@@ -1800,12 +1817,15 @@ const writeClipBoardText = async text => {
 };
 
 const addClosedTabs = (state, entries) => {
+  const {
+    closedTabs
+  } = state;
   if (entries.length === 0) {
     return state;
   }
   return {
     ...state,
-    closedTabs: [...state.closedTabs, ...entries].slice(-20)
+    closedTabs: [...closedTabs, ...entries].slice(-20)
   };
 };
 
@@ -1827,10 +1847,13 @@ const redistributeSizesWithRounding = groups => {
 };
 
 const withGroupsAndActiveGroup = (state, groups, activeGroupId) => {
+  const {
+    layout
+  } = state;
   return {
     ...state,
     layout: {
-      ...state.layout,
+      ...layout,
       activeGroupId,
       groups
     }
@@ -1842,20 +1865,26 @@ const withEmptyGroups = state => {
 };
 
 const withGroups = (state, groups) => {
+  const {
+    layout
+  } = state;
   return {
     ...state,
     layout: {
-      ...state.layout,
+      ...layout,
       groups
     }
   };
 };
 
 const closeTab = (state, groupId, tabId) => {
+  const {
+    layout
+  } = state;
   const {
     activeGroupId,
     groups
-  } = state.layout;
+  } = layout;
 
   // Find the group to close the tab from
   const groupIndex = getGroupIndexById(state, groupId);
@@ -1934,10 +1963,13 @@ const createViewlet = async (viewletModuleId, editorUid, tabId, bounds, uri) =>
 };
 
 const getActiveFileUri = state => {
+  const {
+    layout
+  } = state;
   const {
     activeGroupId,
     groups
-  } = state.layout;
+  } = layout;
   const activeGroup = groups.find(group => group.id === activeGroupId);
   const activeTab = activeGroup?.tabs.find(tab => tab.id === activeGroup.activeTabId);
   if (!activeTab) {
@@ -2284,6 +2316,9 @@ const findTabInState = (state, groupId, tabId) => {
 };
 
 const closeTabWithViewlet = async (state, groupId, tabId) => {
+  const {
+    layout
+  } = state;
   const tab = findTabInState(state, groupId, tabId);
   const commands = [];
   if (tab && tab.editorUid !== -1) {
@@ -2293,7 +2328,7 @@ const closeTabWithViewlet = async (state, groupId, tabId) => {
     commands.push(...disposeCommands);
   }
   const newState = closeTab(state, groupId, tabId);
-  const group = state.layout.groups.find(g => g.id === groupId);
+  const group = layout.groups.find(g => g.id === groupId);
   const wasActiveTab = group?.activeTabId === tabId;
   const newGroup = wasActiveTab ? newState.layout.groups.find(candidate => candidate.id === groupId) : undefined;
   const newActiveTabId = newGroup?.activeTabId;
@@ -2403,9 +2438,12 @@ const disposeEditors = async editorUids => {
 };
 
 const closeAll$1 = async state => {
-  const editorUids = state.layout.groups.flatMap(group => group.tabs.map(tab => tab.editorUid)).filter(editorUid => editorUid !== -1);
+  const {
+    layout
+  } = state;
+  const editorUids = layout.groups.flatMap(group => group.tabs.map(tab => tab.editorUid)).filter(editorUid => editorUid !== -1);
   await disposeEditors(editorUids);
-  const entries = state.layout.groups.flatMap((group, groupIndex) => {
+  const entries = layout.groups.flatMap((group, groupIndex) => {
     return group.tabs.map((tab, tabIndex) => ({
       group,
       groupIndex,
@@ -2549,9 +2587,12 @@ const closeSavedInGroup = group => {
   };
 };
 const closeSaved$1 = state => {
+  const {
+    layout
+  } = state;
   const {
     groups
-  } = state.layout;
+  } = layout;
   const closedTabs = groups.flatMap((group, groupIndex) => {
     return group.tabs.map((tab, tabIndex) => ({
       group,
@@ -2565,7 +2606,10 @@ const closeSaved$1 = state => {
 };
 
 const closeFirstTabByUri = (state, uri) => {
-  const matchingGroup = state.layout.groups.find(group => {
+  const {
+    layout
+  } = state;
+  const matchingGroup = layout.groups.find(group => {
     return group.tabs.some(tab => tab.uri === uri);
   });
   const matchingTab = matchingGroup?.tabs.find(tab => tab.uri === uri);
@@ -2587,7 +2631,10 @@ const closeTabsByUris = (state, uris) => {
 };
 
 const getGroupById = (state, groupId) => {
-  return state.layout.groups.find(group => group.id === groupId);
+  const {
+    layout
+  } = state;
+  return layout.groups.find(group => group.id === groupId);
 };
 
 const closeTabsRight = (state, groupId) => {
@@ -2647,9 +2694,12 @@ const findGroupById = (state, groupId) => {
 };
 
 const copyIntoNewWindow$1 = async state => {
+  const {
+    layout
+  } = state;
   const {
     activeGroupId
-  } = state.layout;
+  } = layout;
   const group = findGroupById(state, activeGroupId ?? 0);
   if (!group) {
     return state;
@@ -2730,12 +2780,12 @@ const create$1 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight =
   set(uid, state, state);
 };
 
-const isEqual$1 = (oldState, newState) => {
+const isEqual$2 = (oldState, newState) => {
   return false;
 };
 
-const isEqual = (oldState, newState) => {
-  return oldState.layout === newState.layout;
+const isEqual$1 = (oldState, newState) => {
+  return oldState.dragOverlay === newState.dragOverlay && oldState.layout === newState.layout;
 };
 
 const RenderItems = 4;
@@ -2746,7 +2796,7 @@ const RenderPendingViewletUpdate = 12;
 const isPendingViewletUpdateEqual = (oldState, newState) => {
   return newState.pendingViewletUpdate === undefined;
 };
-const modules = [isEqual, isEqual$1, isPendingViewletUpdateEqual];
+const modules = [isEqual$1, isEqual$2, isPendingViewletUpdateEqual];
 const numbers = [RenderIncremental, RenderCss, RenderPendingViewletUpdate];
 
 const diff = (oldState, newState) => {
@@ -2966,7 +3016,10 @@ const getActiveTabId$1 = state => {
 };
 
 const getSelectedTabData = (state, groupIndex, index) => {
-  const group = state.layout.groups[groupIndex];
+  const {
+    layout
+  } = state;
+  const group = layout.groups[groupIndex];
   if (!group || index < 0 || index >= group.tabs.length) {
     return undefined;
   }
@@ -3026,11 +3079,18 @@ const findTabById = (state, tabId) => {
 };
 
 const getSelectedTabBounds = state => {
+  const {
+    height,
+    tabHeight,
+    width,
+    x,
+    y
+  } = state;
   return {
-    height: state.height - state.tabHeight,
-    width: state.width,
-    x: state.x,
-    y: state.y + state.tabHeight
+    height: height - tabHeight,
+    width,
+    x,
+    y: y + tabHeight
   };
 };
 
@@ -3078,11 +3138,14 @@ const getViewletModuleId = async tab => {
 };
 
 const startContentLoading = async (oldState, state, tabId, path, requestId) => {
+  const {
+    uid
+  } = state;
   try {
     const getLatestState = () => {
-      return get(state.uid).newState;
+      return get(uid).newState;
     };
-    set(state.uid, oldState, state);
+    set(uid, oldState, state);
     const newState = await loadTabContentAsync(tabId, path, requestId, getLatestState);
     return newState;
   } catch {
@@ -3264,8 +3327,8 @@ const getActiveGroup = (groups, activeGroupId) => {
   return groups.find(g => g.id === activeGroupId);
 };
 
-const Left = 'left';
-const Right = 'right';
+const Left$1 = 'left';
+const Right$1 = 'right';
 
 const getActiveTab = state => {
   const {
@@ -3357,12 +3420,18 @@ const getRestoredTab = tab => {
   };
 };
 const getStateWithoutLastClosedTab = state => {
+  const {
+    closedTabs
+  } = state;
   return {
     ...state,
-    closedTabs: state.closedTabs.slice(0, -1)
+    closedTabs: closedTabs.slice(0, -1)
   };
 };
 const restoreExistingUri = (state, entry) => {
+  const {
+    layout
+  } = state;
   if (!entry.tab.uri) {
     return undefined;
   }
@@ -3370,11 +3439,11 @@ const restoreExistingUri = (state, entry) => {
   if (!existing) {
     return undefined;
   }
-  const groupIndex = state.layout.groups.findIndex(group => group.id === existing.groupId);
+  const groupIndex = layout.groups.findIndex(group => group.id === existing.groupId);
   if (groupIndex === -1) {
     return undefined;
   }
-  const tabIndex = state.layout.groups[groupIndex].tabs.findIndex(tab => tab.id === existing.tab.id);
+  const tabIndex = layout.groups[groupIndex].tabs.findIndex(tab => tab.id === existing.tab.id);
   if (tabIndex === -1) {
     return undefined;
   }
@@ -3394,9 +3463,12 @@ const restoreExistingUri = (state, entry) => {
   };
 };
 const restoreIntoExistingGroup = (state, entry) => {
+  const {
+    layout
+  } = state;
   const {
     groups
-  } = state.layout;
+  } = layout;
   const groupIndex = groups.findIndex(group => group.id === entry.group.id);
   if (groupIndex === -1) {
     return undefined;
@@ -3484,7 +3556,10 @@ const restoreIntoRecreatedGroup = (state, entry) => {
   };
 };
 const restoreClosedTabState = state => {
-  const entry = state.closedTabs.at(-1);
+  const {
+    closedTabs
+  } = state;
+  const entry = closedTabs.at(-1);
   if (!entry) {
     return undefined;
   }
@@ -3533,7 +3608,10 @@ const getActiveTabId = state => {
 };
 
 const getTabCount = state => {
-  return state.layout.groups.reduce((sum, group) => sum + group.tabs.length, 0);
+  const {
+    layout
+  } = state;
+  return layout.groups.reduce((sum, group) => sum + group.tabs.length, 0);
 };
 
 const getCurrentState = state => {
@@ -3647,9 +3725,10 @@ const updateTabUriTitle = (tab, homeDirUri) => {
 };
 const updateTabUriTitles = state => {
   const {
+    homeDirUri: rawHomeDirUri,
     layout
   } = state;
-  const homeDirUri = state.homeDirUri || '';
+  const homeDirUri = rawHomeDirUri || '';
   return {
     ...state,
     layout: {
@@ -3664,6 +3743,7 @@ const updateTabUriTitles = state => {
 
 const createEmptyGroup$1 = (state, uri, requestId, preview = false, title = getLabel(uri), editorType = 'text', editorInput) => {
   const {
+    homeDirUri,
     layout
   } = state;
   const {
@@ -3685,7 +3765,7 @@ const createEmptyGroup$1 = (state, uri, requestId, preview = false, title = getL
     loadingState: 'loading',
     title,
     uri,
-    uriTitle: getUriTitle(uri, state.homeDirUri || '')
+    uriTitle: getUriTitle(uri, homeDirUri || '')
   };
   const newGroup = {
     activeTabId: newTab.id,
@@ -3744,6 +3824,7 @@ const openTab = (state, groupId, tab) => {
 const ensureActiveGroup = (state, uri, preview = false, title = getLabel(uri), editorType = 'text', editorInput) => {
   // Find the active group (by activeGroupId or focused flag)
   const {
+    homeDirUri,
     layout
   } = state;
   const {
@@ -3781,7 +3862,7 @@ const ensureActiveGroup = (state, uri, preview = false, title = getLabel(uri), e
             loadingState: 'loading',
             title,
             uri,
-            uriTitle: getUriTitle(uri, state.homeDirUri || '')
+            uriTitle: getUriTitle(uri, homeDirUri || '')
           };
         });
         return {
@@ -3815,7 +3896,7 @@ const ensureActiveGroup = (state, uri, preview = false, title = getLabel(uri), e
       loadingState: 'loading',
       title,
       uri: uri,
-      uriTitle: getUriTitle(uri, state.homeDirUri || '')
+      uriTitle: getUriTitle(uri, homeDirUri || '')
     };
     newState = openTab(state, activeGroup.id, newTab);
   } else {
@@ -4030,7 +4111,10 @@ const getExistingTabState = (state, existingTab, preview) => {
   return switchTab(pinnedState, existingTab.groupId, existingTab.tab.id);
 };
 const getActivePreviewEditorUid = state => {
-  const activeGroup = state.layout.activeGroupId === undefined ? state.layout.groups.find(group => group.focused) : state.layout.groups.find(group => group.id === state.layout.activeGroupId);
+  const {
+    layout
+  } = state;
+  const activeGroup = layout.activeGroupId === undefined ? layout.groups.find(group => group.focused) : layout.groups.find(group => group.id === layout.activeGroupId);
   const activeTab = activeGroup?.tabs.find(tab => tab.id === activeGroup.activeTabId);
   return activeTab?.isPreview ? activeTab.editorUid : -1;
 };
@@ -4237,17 +4321,20 @@ const rebalanceGroupSizes = groups => {
   }));
 };
 const isTrailingSplit = direction => {
-  return direction === Right || direction === 'down';
+  return direction === Right$1 || direction === 'down';
 };
 const getSplitLayoutDirection = direction => {
-  return direction === Left || direction === Right ? Horizontal : Vertical;
+  return direction === Left$1 || direction === Right$1 ? Horizontal : Vertical;
 };
 const createNextState = (state, activeGroupId, groups) => {
+  const {
+    layout
+  } = state;
   return {
     ...state,
     layout: {
       activeGroupId,
-      direction: state.layout.direction,
+      direction: layout.direction,
       groups
     }
   };
@@ -4416,7 +4503,7 @@ const handleClickAction = async (state, action, rawGroupId) => {
     case RetryOpen:
       return retryOpen(state);
     case SplitRight$1:
-      return splitEditorGroup$1(state, activeGroup.id, Right);
+      return splitEditorGroup$1(state, activeGroup.id, Right$1);
     case TogglePreview$1:
       return handleClickTogglePreview(state);
     default:
@@ -4469,6 +4556,9 @@ const show2 = async (uid, menuId, x, y, args) => {
 
 const NoGroupId = -1;
 const handleContextMenu = async (state, rawGroupId, x, y) => {
+  const {
+    uid
+  } = state;
   number(x);
   number(y);
   if (rawGroupId === undefined) {
@@ -4478,7 +4568,7 @@ const handleContextMenu = async (state, rawGroupId, x, y) => {
   if (Number.isNaN(groupId)) {
     return state;
   }
-  await show2(state.uid, Main$1, x, y, {
+  await show2(uid, Main$1, x, y, {
     groupId,
     menuId: Main$1
   });
@@ -4486,12 +4576,15 @@ const handleContextMenu = async (state, rawGroupId, x, y) => {
 };
 
 const handleDoubleClick = (state, groupIndexRaw, indexRaw) => {
+  const {
+    layout
+  } = state;
   if (!groupIndexRaw || !indexRaw) {
     return state;
   }
   const groupIndex = Number.parseInt(groupIndexRaw);
   const tabIndex = Number.parseInt(indexRaw);
-  const tab = state.layout.groups[groupIndex]?.tabs[tabIndex];
+  const tab = layout.groups[groupIndex]?.tabs[tabIndex];
   if (!tab?.isPreview) {
     return state;
   }
@@ -4500,10 +4593,123 @@ const handleDoubleClick = (state, groupIndexRaw, indexRaw) => {
   });
 };
 
+const handleDragLeave = state => {
+  const {
+    dragOverlay
+  } = state;
+  if (!dragOverlay) {
+    return state;
+  }
+  return {
+    ...state,
+    dragOverlay: undefined
+  };
+};
+
+const None = 0;
+const Up = 1;
+const Down = 2;
+const Left = 3;
+const Right = 4;
+
+const getSplitDirection = (x, y, width, height) => {
+  const percentX = x / width;
+  if (percentX < 0.25) {
+    return Left;
+  }
+  if (percentX > 0.75) {
+    return Right;
+  }
+  const percentY = y / height;
+  if (percentY < 0.25) {
+    return Up;
+  }
+  if (percentY > 0.75) {
+    return Down;
+  }
+  return None;
+};
+const getOverlay = (x, y, width, height, splitDirection) => {
+  const halfHeight = height / 2;
+  const halfWidth = width / 2;
+  switch (splitDirection) {
+    case Down:
+      return {
+        height: halfHeight,
+        width,
+        x,
+        y: y + halfHeight
+      };
+    case Left:
+      return {
+        height,
+        width: halfWidth,
+        x,
+        y
+      };
+    case Right:
+      return {
+        height,
+        width: halfWidth,
+        x: x + halfWidth,
+        y
+      };
+    case Up:
+      return {
+        height: halfHeight,
+        width,
+        x,
+        y
+      };
+    default:
+      return {
+        height,
+        width,
+        x,
+        y
+      };
+  }
+};
+const getDragOverlay = (state, eventX, eventY) => {
+  const {
+    height,
+    layout,
+    tabHeight,
+    width,
+    x,
+    y
+  } = state;
+  const hasOpenEditor = layout.groups.some(group => !group.isEmpty);
+  const contentY = hasOpenEditor ? tabHeight : 0;
+  const contentHeight = Math.max(0, height - contentY);
+  const relativeX = eventX - x;
+  const relativeY = eventY - y - contentY;
+  const splitDirection = getSplitDirection(relativeX, relativeY, width, contentHeight);
+  return getOverlay(0, contentY, width, contentHeight, splitDirection);
+};
+
+const isEqual = (oldOverlay, newOverlay) => {
+  return oldOverlay?.x === newOverlay?.x && oldOverlay?.y === newOverlay?.y && oldOverlay?.width === newOverlay?.width && oldOverlay?.height === newOverlay?.height;
+};
+const handleDragOver = (state, eventX, eventY) => {
+  const {
+    dragOverlay: oldDragOverlay
+  } = state;
+  const dragOverlay = getDragOverlay(state, eventX, eventY);
+  if (isEqual(oldDragOverlay, dragOverlay)) {
+    return state;
+  }
+  return {
+    ...state,
+    dragOverlay
+  };
+};
+
 const EditorGroupHeader = 'EditorGroupHeader';
 const EmptyGroupHeader = 'EmptyGroupHeader';
 const EmptyGroupCloseButton = 'EmptyGroupCloseButton';
 const EditorGroup = 'EditorGroup';
+const EditorGroupEmpty = 'EditorGroup EditorGroupEmpty';
 const EditorGroupsHorizontal = 'EditorGroupsHorizontal';
 const EditorGroupsVertical = 'EditorGroupsVertical';
 const EditorContainer = 'EditorContainer';
@@ -4521,6 +4727,7 @@ const TextEditorLoading = 'TextEditor TextEditor--loading';
 const EditorContentLoading = 'EditorContent EditorContent--loading';
 const TextEditorError = 'TextEditor TextEditorError';
 const EditorContentError = 'EditorContent EditorContentError';
+const DragOverlay = 'DragOverlay';
 const Main = 'Main';
 const EDITOR_GROUPS_CONTAINER = 'editor-groups-container';
 const TabIcon = 'TabIcon';
@@ -4659,16 +4866,20 @@ const getAllTabs = layout => {
 };
 
 const loadFileIcons = async state => {
+  const {
+    fileIconCache,
+    layout
+  } = state;
   try {
-    const allTabs = getAllTabs(state.layout);
+    const allTabs = getAllTabs(layout);
     const {
       newFileIconCache
-    } = await getFileIconsForTabs(allTabs, state.fileIconCache);
+    } = await getFileIconsForTabs(allTabs, fileIconCache);
 
     // Update tabs with their icons
     const updatedLayout = {
-      ...state.layout,
-      groups: state.layout.groups.map(group => ({
+      ...layout,
+      groups: layout.groups.map(group => ({
         ...group,
         tabs: group.tabs.map(tab => ({
           ...tab,
@@ -4683,8 +4894,8 @@ const loadFileIcons = async state => {
   } catch {
     // If icon request fails, continue without icons
     return {
-      fileIconCache: state.fileIconCache,
-      updatedLayout: state.layout
+      fileIconCache,
+      updatedLayout: layout
     };
   }
 };
@@ -4822,17 +5033,20 @@ const getSashCorner = layout => {
 };
 
 const handleSashCornerPointerDown = async (state, clientX, clientY) => {
+  const {
+    layout
+  } = state;
   if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
     return state;
   }
-  const sashCorner = getSashCorner(state.layout);
+  const sashCorner = getSashCorner(layout);
   if (!sashCorner) {
     return state;
   }
   return {
     ...state,
     sashCornerDrag: {
-      groupSizes: state.layout.groups.map(group => ({
+      groupSizes: layout.groups.map(group => ({
         id: group.id,
         size: group.size
       })),
@@ -4875,6 +5089,9 @@ const getBeforeSize = (startSize, deltaPx, axisSize, minSizePx, totalSize) => {
 const handleSashCornerPointerMove = async (state, clientX, clientY) => {
   const {
     height,
+    layout,
+    minGroupHeightPx,
+    minGroupWidthPx,
     sashCornerDrag,
     width
   } = state;
@@ -4894,8 +5111,8 @@ const handleSashCornerPointerMove = async (state, clientX, clientY) => {
   }
   const xBeforeStartSize = sumGroupSizes(groupSizes, xBeforeGroupIds);
   const yBeforeStartSize = sumGroupSizes(groupSizes, yBeforeGroupIds);
-  const xBeforeSize = getBeforeSize(xBeforeStartSize, clientX - startClientX, width, state.minGroupWidthPx, totalSize);
-  const yBeforeSize = getBeforeSize(yBeforeStartSize, clientY - startClientY, height, state.minGroupHeightPx, totalSize);
+  const xBeforeSize = getBeforeSize(xBeforeStartSize, clientX - startClientX, width, minGroupWidthPx, totalSize);
+  const yBeforeSize = getBeforeSize(yBeforeStartSize, clientY - startClientY, height, minGroupHeightPx, totalSize);
   const xAfterSize = totalSize - xBeforeSize;
   const yAfterSize = totalSize - yBeforeSize;
   const xBeforeGroupIdSet = new Set(xBeforeGroupIds);
@@ -4903,8 +5120,8 @@ const handleSashCornerPointerMove = async (state, clientX, clientY) => {
   return {
     ...state,
     layout: {
-      ...state.layout,
-      groups: state.layout.groups.map(group => {
+      ...layout,
+      groups: layout.groups.map(group => {
         const xSize = xBeforeGroupIdSet.has(group.id) ? xBeforeSize : xAfterSize;
         const ySize = yBeforeGroupIdSet.has(group.id) ? yBeforeSize : yAfterSize;
         return {
@@ -4917,7 +5134,10 @@ const handleSashCornerPointerMove = async (state, clientX, clientY) => {
 };
 
 const handleSashCornerPointerUp = async state => {
-  if (!state.sashCornerDrag) {
+  const {
+    sashCornerDrag
+  } = state;
+  if (!sashCornerDrag) {
     return state;
   }
   return {
@@ -4985,6 +5205,8 @@ const handleSashPointerMove = async (state, clientX, clientY) => {
   const {
     height,
     layout,
+    minGroupHeightPx,
+    minGroupWidthPx,
     sashDrag,
     width
   } = state;
@@ -5005,7 +5227,7 @@ const handleSashPointerMove = async (state, clientX, clientY) => {
   const deltaPx = direction === Horizontal ? clientX - sashDrag.startClientX : clientY - sashDrag.startClientY;
   const deltaPercent = deltaPx / axisSize * 100;
   const totalResizableSize = sashDrag.beforeSize + sashDrag.afterSize;
-  const minGroupSizePx = direction === Horizontal ? state.minGroupWidthPx : state.minGroupHeightPx;
+  const minGroupSizePx = direction === Horizontal ? minGroupWidthPx : minGroupHeightPx;
   let minGroupSize = getMinGroupSizePercent(axisSize, minGroupSizePx);
 
   // If the minimum size makes it impossible to fit two groups, relax the constraint
@@ -5065,6 +5287,7 @@ const handleTabContextMenu = async (state, button, x, y) => {
 
 const handleUriChange = async (state, oldUri, newUri) => {
   const {
+    homeDirUri,
     layout
   } = state;
   const {
@@ -5095,7 +5318,7 @@ const handleUriChange = async (state, oldUri, newUri) => {
             editorInput,
             title: getLabel(renamedUri),
             uri: renamedUri,
-            uriTitle: getUriTitle(renamedUri, state.homeDirUri || '')
+            uriTitle: getUriTitle(renamedUri, homeDirUri || '')
           };
         }
         return tab;
@@ -5306,15 +5529,18 @@ const updateTabs = (state, editorUids) => {
 };
 
 const restoreAndCreateEditors = async (state, restoredLayout) => {
+  const {
+    tabHeight
+  } = state;
   let newState = {
     ...state,
     layout: restoredLayout
   };
   const bounds = {
-    height: newState.height - state.tabHeight,
+    height: newState.height - tabHeight,
     width: newState.width,
     x: newState.x,
-    y: newState.y + state.tabHeight
+    y: newState.y + tabHeight
   };
 
   // Get viewlet module IDs for all active tabs
@@ -5341,7 +5567,7 @@ const restoreAndCreateEditors = async (state, restoredLayout) => {
   return newState;
 };
 
-const loadContent = async (state, savedState) => {
+const loadContent$1 = async (state, savedState) => {
   const homeDirUri = await loadHomeDirUri();
   const stateWithHomeDir = {
     ...state,
@@ -5379,7 +5605,7 @@ const loadContent = async (state, savedState) => {
 };
 
 const handleWorkspaceChange = async (state, _workspacePath, savedState) => {
-  return loadContent(state, savedState);
+  return loadContent$1(state, savedState);
 };
 
 const handleWorkspaceRefresh = async (state, refresh = {}) => {
@@ -5586,12 +5812,15 @@ const menuEntrySeparator = {
 };
 
 const getNewWindowMenuEntries = state => {
-  if (state.platform !== Electron) {
+  const {
+    platform
+  } = state;
+  if (platform !== Electron) {
     return [];
   }
   return [menuEntrySeparator, {
     command: 'MainArea.newWindow',
-    flags: None,
+    flags: None$1,
     id: 'newWindow',
     label: newWindow$1()
   }];
@@ -5601,37 +5830,37 @@ const getMenuEntries$2 = (state, groupId) => {
   const groupArgs = getMenuEntryArgs(groupId);
   const entries = [{
     command: 'MainArea.newFile',
-    flags: None,
+    flags: None$1,
     id: 'newTextFile',
     label: newTextFile()
   }, {
     args: [QuickPick, 'file'],
     command: 'Viewlet.openWidget',
-    flags: None,
+    flags: None$1,
     id: 'openFile',
     label: openFile()
   }, menuEntrySeparator, {
     args: groupArgs,
     command: 'MainArea.splitUp',
-    flags: None,
+    flags: None$1,
     id: 'splitUp',
     label: splitUp$1()
   }, {
     args: groupArgs,
     command: 'MainArea.splitDown',
-    flags: None,
+    flags: None$1,
     id: 'splitDown',
     label: splitDown$1()
   }, {
     args: groupArgs,
     command: 'MainArea.splitLeft',
-    flags: None,
+    flags: None$1,
     id: 'splitLeft',
     label: splitLeft$1()
   }, {
     args: groupArgs,
     command: 'MainArea.splitRight',
-    flags: None,
+    flags: None$1,
     id: 'splitRight',
     label: splitRight$1()
   }, ...getNewWindowMenuEntries(state)];
@@ -5641,7 +5870,7 @@ const getMenuEntries$2 = (state, groupId) => {
   return [...entries, menuEntrySeparator, {
     args: [groupId],
     command: 'MainArea.closeEditorGroup',
-    flags: None,
+    flags: None$1,
     id: 'closeGroup',
     label: closeEditorGroup()
   }];
@@ -5672,101 +5901,101 @@ const getMenuEntries$1 = state => {
   } = tab;
   return [{
     command: 'Main.closeFocusedTab',
-    flags: None,
+    flags: None$1,
     id: 'tabClose',
     label: close()
   }, {
     command: 'Main.closeOthers',
-    flags: None,
+    flags: None$1,
     id: 'tabCloseOthers',
     label: closeOthers()
   }, {
     command: 'Main.closeTabsRight',
-    flags: None,
+    flags: None$1,
     id: 'tabCloseToTheRight',
     label: closeToTheRight()
   }, {
     command: 'Main.closeSaved',
-    flags: None,
+    flags: None$1,
     id: 'tabCloseSaved',
     label: closeSaved()
   }, {
     command: 'Main.closeAll',
-    flags: None,
+    flags: None$1,
     id: 'tabCloseAll',
     label: closeAll()
   }, menuEntrySeparator, {
     args: [path],
     command: 'Main.copyPath',
-    flags: None,
+    flags: None$1,
     id: 'copyPath',
     label: copyPath()
   }, {
     args: [path],
     command: 'Main.copyRelativePath',
-    flags: None,
+    flags: None$1,
     id: 'copyRelativePath',
     label: copyRelativePath()
   }, menuEntrySeparator, {
     command: 'Main.reopenEditorWith',
-    flags: None,
+    flags: None$1,
     id: 'reopenEditorWith',
     label: reopenEditorWith$1()
   }, menuEntrySeparator, {
     command: '',
-    flags: None,
+    flags: None$1,
     id: 'share',
     label: share()
   }, menuEntrySeparator, {
     command: '',
-    flags: None,
+    flags: None$1,
     id: 'addFileToChat',
     label: addFileToChat()
   }, menuEntrySeparator, {
     command: '',
-    flags: None,
+    flags: None$1,
     id: 'openContainingFolder',
     label: openContainingFolder()
   }, {
     args: [path],
     command: 'Explorer.revealItem',
-    flags: None,
+    flags: None$1,
     id: 'revealInExplorerView',
     label: revealInExplorerView()
   }, menuEntrySeparator, {
     command: '',
-    flags: None,
+    flags: None$1,
     id: 'keepOpen',
     label: keepOpen()
   }, {
     command: '',
-    flags: None,
+    flags: None$1,
     id: 'pin',
     label: pin()
   }, menuEntrySeparator, {
     command: 'Main.splitRight',
-    flags: None,
+    flags: None$1,
     id: 'splitRight',
     label: splitRight$1()
   }, {
     command: '',
-    flags: None,
+    flags: None$1,
     id: 'splitAndMove',
     label: splitAndMove()
   }, {
     command: 'MainArea.moveIntoNewWindow',
-    flags: None,
+    flags: None$1,
     id: 'moveIntoNewWindow',
     label: moveIntoNewWindow$1()
   }, {
     command: 'MainArea.copyIntoNewWindow',
-    flags: None,
+    flags: None$1,
     id: 'copyIntoNewWindow',
     label: copyIntoNewWindow()
   }, menuEntrySeparator, {
     args: [/* id */'References', /* focus */true, path],
     command: 'SideBar.show',
-    flags: None,
+    flags: None$1,
     id: 'findFileReferences',
     label: findFileReferences()
   }];
@@ -5784,9 +6013,12 @@ const getMenuEntries = async (state, props) => {
 };
 
 const moveIntoNewWindow = async state => {
+  const {
+    layout
+  } = state;
   const {
     activeGroupId
-  } = state.layout;
+  } = layout;
   const group = findGroupById(state, activeGroupId ?? 0);
   if (!group) {
     return state;
@@ -5838,6 +6070,24 @@ const refresh = state => {
   };
 };
 
+const getDragOverlayCss = dragOverlay => {
+  if (!dragOverlay) {
+    return [];
+  }
+  const {
+    height,
+    width,
+    x,
+    y
+  } = dragOverlay;
+  return [`.DragOverlay {
+  left: ${x}px;
+  top: ${y}px;
+  width: ${width}px;
+  height: ${height}px;
+}`];
+};
+
 const getEditorGroupCss = layout => {
   const groupSizeVariable = layout.direction === Vertical ? '--EditorGroupHeight' : '--EditorGroupWidth';
   return layout.groups.map(group => {
@@ -5927,10 +6177,18 @@ const getSashCss = (layout, width = 0) => {
   return getProtoSashCss(layout, width).map(renderSashCss);
 };
 
-const getCss = (layout, width = 0) => {
-  const rules = [`.MainArea {
+const getCss = (layout, width = 0, dragOverlay) => {
+  const rules = [`.Main {
+  position: relative;
 }`, `.editor-groups-container {
   overflow: auto;
+}`, `.DragOverlay {
+  position: absolute;
+  z-index: 1;
+  contain: strict;
+  pointer-events: none;
+  background: rgba(83, 89, 93, 0.5);
+  transition: all 100ms;
 }`, `.SashBorder {
   background: var(--SashBorder, gray);
 }`, `.SashBorderHorizontal {
@@ -5966,7 +6224,7 @@ const getCss = (layout, width = 0) => {
   /*height: var(--EditorGroupHeight, auto);*/
 }`];
   if (layout) {
-    rules.push(...getEditorGroupCss(layout), ...getSashCss(layout, width));
+    rules.push(...getEditorGroupCss(layout), ...getDragOverlayCss(dragOverlay), ...getSashCss(layout, width));
     const sashCorner = getSashCorner(layout);
     if (sashCorner) {
       rules.push(`.SashCorner {
@@ -5980,7 +6238,7 @@ const getCss = (layout, width = 0) => {
 };
 
 const renderCss = (oldState, newState) => {
-  const css = getCss(newState.layout, newState.width);
+  const css = getCss(newState.layout, newState.width, newState.dragOverlay);
   return [SetCss, newState.uid, css];
 };
 
@@ -6273,32 +6531,49 @@ const HandleDoubleClick = 19;
 const HandleSashCornerPointerDown = 20;
 const HandleSashCornerPointerMove = 21;
 const HandleSashCornerPointerUp = 22;
+const HandleDragOver = 23;
+const HandleDragLeave = 24;
+const HandleDrop = 25;
 
+const dragOverlayVirtualDom = {
+  childCount: 0,
+  className: DragOverlay,
+  type: Div
+};
+const getDragOverlayVirtualDom = () => {
+  return dragOverlayVirtualDom;
+};
+
+const textEditorNode = {
+  childCount: 1,
+  className: TextEditor,
+  type: Div
+};
+const editorContentNode = {
+  childCount: 1,
+  className: EditorContent,
+  type: Pre
+};
 const renderContent = content => {
-  return [{
-    childCount: 1,
-    className: TextEditor,
-    type: Div
-  }, {
-    childCount: 1,
-    className: EditorContent,
-    type: Pre
-  }, text(content)];
+  return [textEditorNode, editorContentNode, text(content)];
 };
 
+const textEditorErrorNode = {
+  childCount: 1,
+  className: TextEditorError,
+  type: Div
+};
+const editorContentErrorNode = {
+  childCount: 2,
+  className: EditorContentError,
+  type: Div
+};
+const paragraphNode = {
+  childCount: 1,
+  type: P
+};
 const renderError = errorMessage => {
-  return [{
-    childCount: 1,
-    className: TextEditorError,
-    type: Div
-  }, {
-    childCount: 2,
-    className: EditorContentError,
-    type: Div
-  }, {
-    childCount: 1,
-    type: P
-  }, text(`Error: ${errorMessage}`), {
+  return [textEditorErrorNode, editorContentErrorNode, paragraphNode, text(`Error: ${errorMessage}`), {
     childCount: 1,
     className: mergeClassNames(Button, ButtonSecondary),
     'data-action': RetryOpen,
@@ -6308,16 +6583,18 @@ const renderError = errorMessage => {
   }, text(retry())];
 };
 
+const textEditorLoadingNode = {
+  childCount: 1,
+  className: TextEditorLoading,
+  type: Div
+};
+const editorContentLoadingNode = {
+  childCount: 1,
+  className: EditorContentLoading,
+  type: Div
+};
 const renderLoading = () => {
-  return [{
-    childCount: 1,
-    className: TextEditorLoading,
-    type: Div
-  }, {
-    childCount: 1,
-    className: EditorContentLoading,
-    type: Div
-  }, text('Loading...')];
+  return [textEditorLoadingNode, editorContentLoadingNode, text('Loading...')];
 };
 
 const renderViewletReference = tab => {
@@ -6356,6 +6633,16 @@ const renderEditor = tab => {
   return renderContent('');
 };
 
+const dirtyIconNode = {
+  childCount: 0,
+  className: MaskIconCircleFilled,
+  type: Div
+};
+const closeIconNode$1 = {
+  childCount: 0,
+  className: MaskIconClose,
+  type: Div
+};
 const renderTabActions = (isDirty, tabIndex, groupIndex) => {
   if (isDirty) {
     return [{
@@ -6366,11 +6653,7 @@ const renderTabActions = (isDirty, tabIndex, groupIndex) => {
       'data-index': tabIndex,
       onClick: HandleClickClose,
       type: Button$2
-    }, {
-      childCount: 0,
-      className: MaskIconCircleFilled,
-      type: Div
-    }];
+    }, dirtyIconNode];
   }
   return [{
     'aria-label': 'Close',
@@ -6380,24 +6663,26 @@ const renderTabActions = (isDirty, tabIndex, groupIndex) => {
     'data-index': tabIndex,
     onClick: HandleClickClose,
     type: Button$2
-  }, {
-    childCount: 0,
-    className: MaskIconClose,
-    type: Div
-  }];
+  }, closeIconNode$1];
 };
 
 const ExtensionDetailScheme = 'extension-detail://';
 const KeyBindingsUri = 'app://keybindings';
 const RunningExtensionsScheme = 'running-extensions://';
 const SearchEditorScheme = 'search-editor://';
+const tabIconNode = {
+  childCount: 1,
+  className: TabIcon,
+  role: None$2,
+  type: Div
+};
+const tabTitleNode = {
+  childCount: 1,
+  className: TabTitle,
+  type: Span
+};
 const renderMaskIcon = className => {
-  return [{
-    childCount: 1,
-    className: TabIcon,
-    role: None$1,
-    type: Div
-  }, {
+  return [tabIconNode, {
     childCount: 0,
     className,
     type: Div
@@ -6419,7 +6704,7 @@ const renderTabIcon = tab => {
   return [{
     childCount: 0,
     className: TabIcon,
-    role: None$1,
+    role: None$2,
     src: tab.icon,
     type: Img
   }];
@@ -6428,13 +6713,13 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
   const closeButtonNodes = renderTabActions(tab.isDirty, tabIndex, groupIndex);
   let className = MainTab;
   if (isActive) {
-    className += ' ' + MainTabSelected;
+    className = mergeClassNames(className, MainTabSelected);
   }
   if (tab.isDirty) {
-    className += ' ' + MainTabModified;
+    className = mergeClassNames(className, MainTabModified);
   }
   if (tab.isPreview) {
-    className += ' ' + MainTabPreview;
+    className = mergeClassNames(className, MainTabPreview);
   }
   return [{
     'aria-selected': isActive,
@@ -6448,11 +6733,7 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
     role: Tab$1,
     title: tab.uriTitle || tab.uri || tab.title,
     type: Div
-  }, ...renderTabIcon(tab), {
-    childCount: 1,
-    className: TabTitle,
-    type: Span
-  }, text(tab.title), ...closeButtonNodes];
+  }, ...renderTabIcon(tab), tabTitleNode, text(tab.title), ...closeButtonNodes];
 };
 
 const getTabsVirtualDom = (group, groupIndex, tabsChildCount) => {
@@ -6471,6 +6752,11 @@ const isHtmlFile = tab => {
   return tab.uri.endsWith('.html');
 };
 
+const previewIconNode = {
+  childCount: 0,
+  className: MaskIconPreview,
+  type: Div
+};
 const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
   const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
   const showTogglePreview = isHtmlFile(activeTab);
@@ -6489,11 +6775,7 @@ const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
       onClick: HandleClickAction,
       title: togglePreview(),
       type: Button$2
-    }, {
-      childCount: 0,
-      className: MaskIconPreview,
-      type: Div
-    });
+    }, previewIconNode);
   }
   if (splitButtonEnabled) {
     buttons.push({
@@ -6524,7 +6806,7 @@ const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled) => {
     childCount: hasActions ? 2 : 1,
     className: EditorGroupHeader,
     onDblClick: HandleHeaderDoubleClick,
-    role: None$1,
+    role: None$2,
     type: Div
   }, ...getTabsVirtualDom(group, groupIndex, tabsChildCount), ...actions];
 };
@@ -6534,6 +6816,11 @@ const emptyHeader = {
   className: EmptyGroupHeader,
   type: Div
 };
+const closeIconNode = {
+  childCount: 0,
+  className: MaskIconClose,
+  type: Div
+};
 const renderEmptyGroupCloseButton = (group, groupIndex) => {
   return [emptyHeader, {
     childCount: 1,
@@ -6543,11 +6830,7 @@ const renderEmptyGroupCloseButton = (group, groupIndex) => {
     onClick: HandleClickAction,
     title: closeEditorGroup(),
     type: Button$2
-  }, {
-    childCount: 0,
-    className: MaskIconClose,
-    type: Div
-  }];
+  }, closeIconNode];
 };
 
 const renderWaterMark = groupId => {
@@ -6570,7 +6853,7 @@ const renderEmptyEditorGroup = (group, groupIndex, style, closeButtonEnabled = t
   const closeButtonDom = closeButtonEnabled ? renderEmptyGroupCloseButton(group) : [];
   return [{
     childCount: closeButtonEnabled ? 2 : 1,
-    className: EditorGroup,
+    className: EditorGroupEmpty,
     'data-groupId': String(group.id),
     onContextMenu: HandleContextMenu,
     style,
@@ -6579,6 +6862,11 @@ const renderEmptyEditorGroup = (group, groupIndex, style, closeButtonEnabled = t
   }, ...closeButtonDom, ...renderWaterMark(group.id)];
 };
 
+const editorContainerNode = {
+  childCount: 1,
+  className: EditorContainer,
+  type: Div
+};
 const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizeProperty = 'width', closeButtonEnabled = true) => {
   const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
   const style = `${sizeProperty}:${group.size}%;`;
@@ -6593,11 +6881,7 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizePr
     'data-groupId': String(group.id),
     style,
     type: Div
-  }, ...renderEditorGroupHeader(group, groupIndex, splitButtonEnabled), {
-    childCount: 1,
-    className: EditorContainer,
-    type: Div
-  }, ...renderEditor(activeTab)];
+  }, ...renderEditorGroupHeader(group, groupIndex, splitButtonEnabled), editorContainerNode, ...renderEditor(activeTab)];
 };
 
 const getSashClassName = direction => {
@@ -6613,7 +6897,7 @@ const renderSash = (direction, sashId) => {
     className: getSashClassName(direction),
     'data-sashId': sashId,
     onPointerDown: HandleSashPointerDown,
-    role: None$1,
+    role: None$2,
     type: Button$2
   }, {
     childCount: 0,
@@ -6622,22 +6906,27 @@ const renderSash = (direction, sashId) => {
   }];
 };
 
+const sashCornerNode = {
+  childCount: 0,
+  className: 'SashCorner',
+  onPointerDown: HandleSashCornerPointerDown,
+  role: None$2,
+  type: Button$2
+};
 const renderSashCorner = () => {
-  return {
-    childCount: 0,
-    className: 'SashCorner',
-    onPointerDown: HandleSashCornerPointerDown,
-    role: None$1,
-    type: Button$2
-  };
+  return sashCornerNode;
 };
 
+const mainNode$1 = {
+  childCount: 1,
+  className: Main,
+  onDragLeave: HandleDragLeave,
+  onDragOver: HandleDragOver,
+  onDrop: HandleDrop,
+  type: Div
+};
 const renderSingleEditorGroup = (layout, splitButtonEnabled, sizeProperty = 'width') => {
-  return [{
-    childCount: 1,
-    className: Main,
-    type: Div
-  }, ...renderEditorGroup(layout.groups[0], 0, splitButtonEnabled, sizeProperty, false)];
+  return [mainNode$1, ...renderEditorGroup(layout.groups[0], 0, splitButtonEnabled, sizeProperty, false)];
 };
 
 const getDirectionClassName = (direction, isSplit) => {
@@ -6648,7 +6937,24 @@ const getDirectionClassName = (direction, isSplit) => {
 };
 const getContainerClassName = (direction, childCount) => {
   const directionClassName = getDirectionClassName(direction, childCount > 1);
-  return directionClassName ? `${EDITOR_GROUPS_CONTAINER} ${directionClassName}` : EDITOR_GROUPS_CONTAINER;
+  return directionClassName ? mergeClassNames(EDITOR_GROUPS_CONTAINER, directionClassName) : EDITOR_GROUPS_CONTAINER;
+};
+const mainNode = {
+  childCount: 1,
+  className: Main,
+  onDragLeave: HandleDragLeave,
+  onDragOver: HandleDragOver,
+  onDrop: HandleDrop,
+  type: Div
+};
+const addDragOverlay = (dom, dragOverlay) => {
+  if (!dragOverlay) {
+    return dom;
+  }
+  return [dom[0], {
+    ...dom[1],
+    childCount: dom[1].childCount + 1
+  }, ...dom.slice(2), getDragOverlayVirtualDom()];
 };
 const getSizeProperty = direction => {
   return direction === Vertical ? 'height' : 'width';
@@ -6698,7 +7004,7 @@ const renderSegmentChildren = (direction, groups, splitButtonEnabled) => {
     children.push({
       childCount: nestedChildCount,
       className: getContainerClassName(nestedDirection, segment.groups.length),
-      role: None$1,
+      role: None$2,
       style: `${sizeProperty}:${segmentSize}%;`,
       type: Div
     });
@@ -6711,29 +7017,25 @@ const renderSegmentChildren = (direction, groups, splitButtonEnabled) => {
     children
   };
 };
-const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
+const getMainAreaVirtualDom = (layout, splitButtonEnabled = false, dragOverlay) => {
   const {
     direction,
     groups
   } = layout;
   const sizeProperty = getSizeProperty(direction);
   if (groups.length === 1) {
-    return renderSingleEditorGroup(layout, splitButtonEnabled, sizeProperty);
+    return addDragOverlay(renderSingleEditorGroup(layout, splitButtonEnabled, sizeProperty), dragOverlay);
   }
   const editorGroupsContainerClassName = getContainerClassName(direction, groups.length);
   if (groups.length === 0) {
-    return [{
-      childCount: 1,
-      className: Main,
-      type: Div
-    }, {
+    return addDragOverlay([mainNode, {
       childCount: 0,
       className: editorGroupsContainerClassName,
       'data-groupId': '',
       onContextMenu: HandleContextMenu,
-      role: None$1,
+      role: None$2,
       type: Div
-    }];
+    }], dragOverlay);
   }
   const {
     childCount,
@@ -6741,20 +7043,17 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
   } = renderSegmentChildren(direction, groups, splitButtonEnabled);
   const sashCorner = getSashCorner(layout);
   const sashCornerChildren = sashCorner ? [renderSashCorner()] : [];
-  return [{
-    childCount: 1,
-    className: Main,
-    type: Div
-  }, {
+  return addDragOverlay([mainNode, {
     childCount: childCount + sashCornerChildren.length,
     className: editorGroupsContainerClassName,
-    role: None$1,
+    role: None$2,
     type: Div
-  }, ...children, ...sashCornerChildren];
+  }, ...children, ...sashCornerChildren], dragOverlay);
 };
 
 const renderItems = (oldState, newState) => {
   const {
+    dragOverlay,
     initial,
     layout,
     splitButtonEnabled,
@@ -6763,7 +7062,7 @@ const renderItems = (oldState, newState) => {
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getMainAreaVirtualDom(layout, splitButtonEnabled);
+  const dom = getMainAreaVirtualDom(layout, splitButtonEnabled, dragOverlay);
   return [SetDom2, uid, dom];
 };
 
@@ -6869,6 +7168,17 @@ const renderEventListeners = () => {
   }, {
     name: HandleSashCornerPointerUp,
     params: ['handleSashCornerPointerUp', ClientX, ClientY]
+  }, {
+    name: HandleDragOver,
+    params: ['handleDragOver', ClientX, ClientY],
+    preventDefault: true
+  }, {
+    name: HandleDragLeave,
+    params: ['handleDragLeave']
+  }, {
+    name: HandleDrop,
+    params: ['handleDragLeave'],
+    preventDefault: true
   }];
 };
 
@@ -6967,6 +7277,13 @@ const reopenEditorWith = async context => {
   }
 };
 
+const resize$1 = (state, dimensions) => {
+  return {
+    ...state,
+    ...dimensions
+  };
+};
+
 const settingsUri = 'app://settings.json';
 const saveEditorAndHandleSettingsChange = async tab => {
   const editorState = await saveEditor(tab.editorUid);
@@ -6997,8 +7314,11 @@ const getLatestStoredState = (uid, fallbackState, referenceTabId, referenceTabUr
   return fallbackState;
 };
 const save = async state => {
+  const {
+    uid
+  } = state;
   const requestedActiveTabData = getActiveTab(state);
-  const currentState = getLatestStoredState(state.uid, state, requestedActiveTabData?.tab.id, requestedActiveTabData?.tab.uri, !requestedActiveTabData);
+  const currentState = getLatestStoredState(uid, state, requestedActiveTabData?.tab.id, requestedActiveTabData?.tab.uri, !requestedActiveTabData);
   const activeTabData = getActiveTab(currentState);
   if (!activeTabData) {
     return currentState;
@@ -7011,17 +7331,17 @@ const save = async state => {
   }
   if (!tab.isDirty) {
     await saveEditorAndHandleSettingsChange(tab);
-    return getLatestStoredState(state.uid, currentState, tab.id, tab.uri);
+    return getLatestStoredState(uid, currentState, tab.id, tab.uri);
   }
   const editorState = await saveEditorAndHandleSettingsChange(tab);
-  const latestState = getLatestStoredState(state.uid, currentState, tab.id, tab.uri);
+  const latestState = getLatestStoredState(uid, currentState, tab.id, tab.uri);
   if (editorState?.modified) {
     return latestState;
   }
   if (tab.uri) {
     await handleModifiedStatusChange$1(tab.uri, false);
   }
-  const stateAfterModifiedStatusChange = getLatestStoredState(state.uid, latestState, tab.id, tab.uri);
+  const stateAfterModifiedStatusChange = getLatestStoredState(uid, latestState, tab.id, tab.uri);
   return updateTab(stateAfterModifiedStatusChange, tab.id, {
     isDirty: false
   });
@@ -7158,12 +7478,15 @@ const setEditorLayout = (state, direction, slots) => {
   };
 };
 const flipLayout = state => {
+  const {
+    layout
+  } = state;
   return {
     ...state,
     layout: {
-      ...state.layout,
-      direction: flipDirection(state.layout.direction),
-      groups: state.layout.groups.map(group => ({
+      ...layout,
+      direction: flipDirection(layout.direction),
+      groups: layout.groups.map(group => ({
         ...group,
         direction: group.direction === undefined ? undefined : flipDirection(group.direction)
       }))
@@ -7286,7 +7609,7 @@ const splitDown = (state, groupId) => {
     };
     return splitEditorGroup$1(stateWithInitialGroup, initialGroupId, 'down');
   }
-  const resolvedGroupId = groupId ?? state.layout.activeGroupId;
+  const resolvedGroupId = groupId ?? layout.activeGroupId;
   if (!resolvedGroupId) {
     return state;
   }
@@ -7319,10 +7642,10 @@ const splitLeft = (state, groupId) => {
         groups: [initialGroup]
       }
     };
-    return splitEditorGroup$1(stateWithInitialGroup, initialGroupId, Left);
+    return splitEditorGroup$1(stateWithInitialGroup, initialGroupId, Left$1);
   }
   const targetGroupId = groupId ?? activeGroupId ?? groups[0]?.id ?? 0;
-  return splitEditorGroup$1(state, targetGroupId, Left);
+  return splitEditorGroup$1(state, targetGroupId, Left$1);
 };
 
 const splitRight = (state, groupId) => {
@@ -7353,10 +7676,10 @@ const splitRight = (state, groupId) => {
         groups: [initialGroup]
       }
     };
-    return splitEditorGroup$1(stateWithInitialGroup, initialGroupId, Right);
+    return splitEditorGroup$1(stateWithInitialGroup, initialGroupId, Right$1);
   }
   const targetGroupId = groupId ?? activeGroupId ?? groups[0]?.id ?? 0;
-  return splitEditorGroup$1(state, targetGroupId, Right);
+  return splitEditorGroup$1(state, targetGroupId, Right$1);
 };
 
 const splitUp = (state, groupId) => {
@@ -7386,13 +7709,39 @@ const splitUp = (state, groupId) => {
     };
     return splitEditorGroup$1(stateWithInitialGroup, initialGroupId, 'up');
   }
-  const resolvedGroupId = groupId ?? state.layout.activeGroupId;
+  const resolvedGroupId = groupId ?? layout.activeGroupId;
   if (!resolvedGroupId) {
     return state;
   }
   return splitEditorGroup$1(state, resolvedGroupId, 'up');
 };
 
+const pendingLoads = new Map();
+const loadContent = wrapSerialCommand(loadContent$1);
+const loadContentTracked = async (uid, ...args) => {
+  const loading = loadContent(uid, ...args);
+  pendingLoads.set(uid, loading);
+  try {
+    await loading;
+  } finally {
+    if (pendingLoads.get(uid) === loading) {
+      pendingLoads.delete(uid);
+    }
+  }
+};
+const resize = async (uid, dimensions) => {
+  const loading = pendingLoads.get(uid);
+  if (loading) {
+    await loading;
+  }
+  const instance = get(uid);
+  if (!instance) {
+    return [];
+  }
+  const resizedState = resize$1(instance.newState, dimensions);
+  set(uid, instance.oldState, resizedState);
+  return handleResize(resizedState, dimensions);
+};
 const commandMap = {
   'Main.closeActiveEditor': wrapSerialCommand(closeActiveEditor),
   'Main.closeAll': wrapSerialCommand(closeAll$1),
@@ -7447,11 +7796,12 @@ const commandMap = {
   'MainArea.handleClickTogglePreview': wrapSerialCommand(handleClickTogglePreview),
   'MainArea.handleContextMenu': wrapSerialCommand(handleContextMenu),
   'MainArea.handleDoubleClick': wrapSerialCommand(handleDoubleClick),
+  'MainArea.handleDragLeave': wrapSerialCommand(handleDragLeave),
+  'MainArea.handleDragOver': wrapSerialCommand(handleDragOver),
   'MainArea.handleHeaderDoubleClick': wrapSerialCommand(handleHeaderDoubleClick),
   'MainArea.handleIconThemeChange': wrapSerialCommand(handleIconThemeChange),
   'MainArea.handleModifiedStatusChange': wrapAsyncCommand(handleModifiedStatusChangeWithContext),
-  'MainArea.handleResize': wrapGetter(handleResize),
-  // TODO would need to have a function that returns newstate as well as commands
+  'MainArea.handleResize': resize,
   'MainArea.handleSashCornerPointerDown': wrapSerialCommand(handleSashCornerPointerDown),
   'MainArea.handleSashCornerPointerMove': wrapSerialCommand(handleSashCornerPointerMove),
   'MainArea.handleSashCornerPointerUp': wrapSerialCommand(handleSashCornerPointerUp),
@@ -7464,7 +7814,7 @@ const commandMap = {
   'MainArea.handleWorkspaceRefresh': wrapAsyncCommand(handleWorkspaceRefreshWithContext),
   'MainArea.hasActiveTextEditor': wrapGetter(hasActiveTextEditor),
   'MainArea.initialize': initialize,
-  'MainArea.loadContent': wrapSerialCommand(loadContent),
+  'MainArea.loadContent': loadContentTracked,
   'MainArea.moveIntoNewWindow': wrapSerialCommand(moveIntoNewWindow),
   'MainArea.newFile': wrapSerialCommand(newFile),
   'MainArea.newWindow': wrapSerialCommand(newWindow),
@@ -7475,7 +7825,7 @@ const commandMap = {
   'MainArea.render2': render2,
   'MainArea.renderEventListeners': renderEventListeners,
   'MainArea.reopenEditorWith': wrapSerialAsyncCommand(reopenEditorWith),
-  'MainArea.resize': wrapGetter(handleResize),
+  'MainArea.resize': resize,
   'MainArea.restoreClosedTab': wrapSerialCommand(restoreClosedTab),
   'MainArea.save': wrapSerialCommand(save),
   'MainArea.saveState': wrapGetter(saveState),