@lvce-editor/main-area-worker 9.8.0 → 9.11.0

package/dist/mainAreaWorkerMain.js

@@ -379,6 +379,26 @@ const closeSaved$1 = state => {
   return withGroups(state, newGroups);
 };
 
+const closeTabsByUris = (state, uris) => {
+  let currentState = state;
+  for (const uri of uris) {
+    while (true) {
+      const matchingGroup = currentState.layout.groups.find(group => {
+        return group.tabs.some(tab => tab.uri === uri);
+      });
+      if (!matchingGroup) {
+        break;
+      }
+      const matchingTab = matchingGroup.tabs.find(tab => tab.uri === uri);
+      if (!matchingTab) {
+        break;
+      }
+      currentState = closeTab(currentState, matchingGroup.id, matchingTab.id);
+    }
+  }
+  return currentState;
+};
+
 const getGroupById = (state, groupId) => {
   return state.layout.groups.find(group => group.id === groupId);
 };
@@ -1947,6 +1967,15 @@ const loadFileContent = async path => {
   const content = await readFile(path);
   return content;
 };
+const getLoadFileErrorMessage = error => {
+  if (!(error instanceof Error)) {
+    return 'Failed to load file content';
+  }
+  if (error.message.includes('EISDIR') || error.message.includes('illegal operation on a directory') || error.message.includes('is a directory')) {
+    return 'Expected a file but received a folder';
+  }
+  return error.message;
+};
 const loadTabContentAsync = async (tabId, path, requestId, getLatestState) => {
   try {
     await loadFileContent(path);
@@ -1984,7 +2013,7 @@ const loadTabContentAsync = async (tabId, path, requestId, getLatestState) => {
     if (latestTab.loadingState !== 'loading') {
       return latestState;
     }
-    const errorMessage = error instanceof Error ? error.message : 'Failed to load file content';
+    const errorMessage = getLoadFileErrorMessage(error);
     return updateTab(latestState, tabId, {
       errorMessage,
       loadingState: 'error'
@@ -2479,6 +2508,97 @@ const RetryOpen = 'retry-open';
 const SplitRight$1 = 'split-right';
 const TogglePreview$1 = 'toggle-preview';
 
+const parseRawGroupId = rawGroupId => {
+  if (!rawGroupId) {
+    return undefined;
+  }
+  const groupId = Number.parseFloat(rawGroupId);
+  return Number.isNaN(groupId) ? undefined : groupId;
+};
+
+const findTabByUri = (state, uri) => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  for (const group of groups) {
+    const tab = group.tabs.find(t => t.uri === uri);
+    if (tab) {
+      return {
+        groupId: group.id,
+        tab
+      };
+    }
+  }
+  return undefined;
+};
+
+const focusEditorGroup = (state, groupId) => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const updatedGroups = groups.map(group => ({
+    ...group,
+    focused: group.id === groupId
+  }));
+  return {
+    ...state,
+    layout: {
+      ...layout,
+      activeGroupId: groupId,
+      groups: updatedGroups
+    }
+  };
+};
+
+const getActiveTabId = state => {
+  const {
+    layout
+  } = state;
+  const {
+    activeGroupId,
+    groups
+  } = layout;
+  const activeGroup = groups.find(g => g.id === activeGroupId);
+  return activeGroup?.activeTabId;
+};
+
+const getTabCount = state => {
+  return state.layout.groups.reduce((sum, group) => sum + group.tabs.length, 0);
+};
+
+const getCurrentState = state => {
+  const {
+    uid
+  } = state;
+  const stateFromStore = get(uid);
+  if (!stateFromStore) {
+    set(uid, state, state);
+    return state;
+  }
+  const storedState = stateFromStore.newState;
+  if (getTabCount(storedState) > getTabCount(state)) {
+    return storedState;
+  }
+  set(uid, state, state);
+  return state;
+};
+
+const getEditorInputEditorType = editorInput => {
+  switch (editorInput.type) {
+    case 'diff-editor':
+    case 'extension-detail-view':
+      return 'custom';
+    case 'editor':
+      return 'text';
+  }
+};
+
 const getBasename$1 = uri => {
   const lastSlashIndex = uri.lastIndexOf('/');
   if (lastSlashIndex === -1) {
@@ -2513,6 +2633,32 @@ const getLabel = uri => {
   return getBasename$1(uri);
 };
 
+const getEditorInputTitle = editorInput => {
+  switch (editorInput.type) {
+    case 'diff-editor':
+      {
+        const leftTitle = getLabel(editorInput.uriLeft);
+        const rightTitle = getLabel(editorInput.uriRight);
+        return `${leftTitle} - ${rightTitle}`;
+      }
+    case 'editor':
+      return getLabel(editorInput.uri);
+    case 'extension-detail-view':
+      return editorInput.extensionId;
+  }
+};
+
+const getEditorInputUri = editorInput => {
+  switch (editorInput.type) {
+    case 'diff-editor':
+      return `diff://?left=${encodeURIComponent(editorInput.uriLeft)}&right=${encodeURIComponent(editorInput.uriRight)}`;
+    case 'editor':
+      return editorInput.uri;
+    case 'extension-detail-view':
+      return `extension-detail://${editorInput.extensionId}`;
+  }
+};
+
 const createEmptyGroup = (state, uri, requestId, preview = false, title = getLabel(uri), editorType = 'text', editorInput) => {
   const {
     layout
@@ -2671,94 +2817,85 @@ const ensureActiveGroup = (state, uri, preview = false, title = getLabel(uri), e
   return newState;
 };
 
-const findTabByUri = (state, uri) => {
-  const {
-    layout
-  } = state;
-  const {
-    groups
-  } = layout;
-  for (const group of groups) {
-    const tab = group.tabs.find(t => t.uri === uri);
-    if (tab) {
-      return {
-        groupId: group.id,
-        tab
-      };
-    }
+const getStateWithTab = (currentState, editorInput, existingTab, shouldRetryExistingTab, uri, preview, title, editorType) => {
+  if (shouldRetryExistingTab && existingTab) {
+    const focusedState = focusEditorGroup(currentState, existingTab.groupId);
+    return {
+      stateWithTab: updateTab(focusedState, existingTab.tab.id, {
+        editorInput,
+        errorMessage: '',
+        loadingState: 'loading',
+        title,
+        uri
+      }),
+      tabId: existingTab.tab.id
+    };
   }
-  return undefined;
+  const stateWithTab = ensureActiveGroup(currentState, uri, preview, title, editorType, editorInput);
+  return {
+    stateWithTab,
+    tabId: getActiveTabId(stateWithTab)
+  };
 };
 
-const focusEditorGroup = (state, groupId) => {
+const Directory = 3;
+const DirectoryExpanded = 4;
+
+const isLocalEditorInput = editorInput => {
+  if (editorInput.type !== 'editor') {
+    return false;
+  }
+  return editorInput.uri.startsWith('file://') || !editorInput.uri.includes('://');
+};
+
+const shouldCheckDirectoryEditorInput = editorInput => {
+  if (!isLocalEditorInput(editorInput)) {
+    return false;
+  }
+  const baseName = editorInput.uri.slice(editorInput.uri.lastIndexOf('/') + 1);
+  return baseName.endsWith('/') || baseName !== '' && !baseName.includes('.');
+};
+
+const isDirectoryEditorInput = async editorInput => {
+  if (!shouldCheckDirectoryEditorInput(editorInput)) {
+    return false;
+  }
+  try {
+    const type = await invoke('FileSystem.stat', editorInput.uri);
+    return type === Directory;
+  } catch {
+    return false;
+  }
+};
+
+const switchTab = (state, groupId, tabId) => {
   const {
     layout
   } = state;
   const {
     groups
   } = layout;
-  const updatedGroups = groups.map(group => ({
-    ...group,
-    focused: group.id === groupId
-  }));
+  const updatedGroups = groups.map(group => {
+    if (group.id === groupId) {
+      const tabExists = group.tabs.some(tab => tab.id === tabId);
+      if (tabExists) {
+        return {
+          ...group,
+          activeTabId: tabId
+        };
+      }
+    }
+    return group;
+  });
   return {
     ...state,
     layout: {
       ...layout,
-      activeGroupId: groupId,
       groups: updatedGroups
     }
   };
 };
 
-const getActiveTabId = state => {
-  const {
-    layout
-  } = state;
-  const {
-    activeGroupId,
-    groups
-  } = layout;
-  const activeGroup = groups.find(g => g.id === activeGroupId);
-  return activeGroup?.activeTabId;
-};
-
-const getEditorInputEditorType = editorInput => {
-  switch (editorInput.type) {
-    case 'diff-editor':
-    case 'extension-detail-view':
-      return 'custom';
-    case 'editor':
-      return 'text';
-  }
-};
-
-const getEditorInputTitle = editorInput => {
-  switch (editorInput.type) {
-    case 'diff-editor':
-      {
-        const leftTitle = getLabel(editorInput.uriLeft);
-        const rightTitle = getLabel(editorInput.uriRight);
-        return `${leftTitle} - ${rightTitle}`;
-      }
-    case 'editor':
-      return getLabel(editorInput.uri);
-    case 'extension-detail-view':
-      return editorInput.extensionId;
-  }
-};
-
-const getEditorInputUri = editorInput => {
-  switch (editorInput.type) {
-    case 'diff-editor':
-      return `diff://?left=${encodeURIComponent(editorInput.uriLeft)}&right=${encodeURIComponent(editorInput.uriRight)}`;
-    case 'editor':
-      return editorInput.uri;
-    case 'extension-detail-view':
-      return `extension-detail://${editorInput.extensionId}`;
-  }
-};
-
 const getIconsCached = (dirents, fileIconCache) => {
   return dirents.map(dirent => fileIconCache[dirent]);
 };
@@ -2793,9 +2930,6 @@ const getMissingIconRequestsForTabs = (tabs, fileIconCache) => {
   return iconRequests;
 };
 
-const Directory = 3;
-const DirectoryExpanded = 4;
-
 const getSimpleIconRequestType = direntType => {
   if (direntType === Directory || direntType === DirectoryExpanded) {
     return 2;
@@ -2846,73 +2980,6 @@ const getFileIconsForTabs = async (tabs, fileIconCache) => {
   };
 };
 
-const switchTab = (state, groupId, tabId) => {
-  const {
-    layout
-  } = state;
-  const {
-    groups
-  } = layout;
-  const updatedGroups = groups.map(group => {
-    if (group.id === groupId) {
-      const tabExists = group.tabs.some(tab => tab.id === tabId);
-      if (tabExists) {
-        return {
-          ...group,
-          activeTabId: tabId
-        };
-      }
-    }
-    return group;
-  });
-  return {
-    ...state,
-    layout: {
-      ...layout,
-      groups: updatedGroups
-    }
-  };
-};
-
-const getTabCount = state => {
-  return state.layout.groups.reduce((sum, group) => sum + group.tabs.length, 0);
-};
-const getCurrentState = state => {
-  const {
-    uid
-  } = state;
-  const stateFromStore = get(uid);
-  if (!stateFromStore) {
-    set(uid, state, state);
-    return state;
-  }
-  const storedState = stateFromStore.newState;
-  if (getTabCount(storedState) > getTabCount(state)) {
-    return storedState;
-  }
-  set(uid, state, state);
-  return state;
-};
-const getStateWithTab = (currentState, editorInput, existingTab, shouldRetryExistingTab, uri, preview, title, editorType) => {
-  if (shouldRetryExistingTab && existingTab) {
-    const focusedState = focusEditorGroup(currentState, existingTab.groupId);
-    return {
-      stateWithTab: updateTab(focusedState, existingTab.tab.id, {
-        editorInput,
-        errorMessage: '',
-        loadingState: 'loading',
-        title,
-        uri
-      }),
-      tabId: existingTab.tab.id
-    };
-  }
-  const stateWithTab = ensureActiveGroup(currentState, uri, preview, title, editorType, editorInput);
-  return {
-    stateWithTab,
-    tabId: getActiveTabId(stateWithTab)
-  };
-};
 const updateTabIcon = async (uid, state, readyState, tabId) => {
   const newTab = findTabById(readyState, tabId);
   if (!newTab || !newTab.tab.uri) {
@@ -2946,6 +3013,7 @@ const updateTabIcon = async (uid, state, readyState, tabId) => {
     return undefined;
   }
 };
+
 const openInput = async (state, options) => {
   object(state);
   object(options);
@@ -2959,19 +3027,30 @@ const openInput = async (state, options) => {
   const uri = getEditorInputUri(editorInput);
   const title = getEditorInputTitle(editorInput);
   const editorType = getEditorInputEditorType(editorInput);
-  const existingTab = findTabByUri(state, uri);
+  const currentState = getCurrentState(state);
+  const existingTab = findTabByUri(currentState, uri);
   const shouldRetryExistingTab = !!existingTab && existingTab.tab.loadingState === 'error';
   if (existingTab && !shouldRetryExistingTab) {
-    const focusedState = focusEditorGroup(state, existingTab.groupId);
+    const focusedState = focusEditorGroup(currentState, existingTab.groupId);
     return switchTab(focusedState, existingTab.groupId, existingTab.tab.id);
   }
-  const previousTabId = getActiveTabId(state);
-  const currentState = getCurrentState(state);
+  const previousTabId = getActiveTabId(currentState);
   const {
     stateWithTab,
     tabId
   } = getStateWithTab(currentState, editorInput, existingTab, shouldRetryExistingTab, uri, preview, title, editorType);
   set(uid, state, stateWithTab);
+  if (await isDirectoryEditorInput(editorInput)) {
+    const {
+      newState: latestState
+    } = get(uid);
+    const errorState = updateTab(latestState, tabId, {
+      errorMessage: 'Expected a file but received a folder',
+      loadingState: 'error'
+    });
+    set(uid, state, errorState);
+    return errorState;
+  }
   try {
     const viewletModuleId = await getViewletModuleIdForEditorInput(editorInput);
     const {
@@ -3128,6 +3207,39 @@ const retryOpen = async state => {
   return openUri(state, tab.uri);
 };
 
+const getSegmentSize = segment => {
+  return segment.groups.reduce((total, group) => total + group.size, 0);
+};
+const getGroupSegments = (groups, parentDirection) => {
+  const segments = [];
+  let index = 0;
+  while (index < groups.length) {
+    const group = groups[index];
+    if (group.direction !== undefined && group.direction !== parentDirection) {
+      const startIndex = index;
+      const nestedGroups = [group];
+      index++;
+      while (index < groups.length && groups[index].direction === group.direction) {
+        nestedGroups.push(groups[index]);
+        index++;
+      }
+      segments.push({
+        direction: group.direction,
+        groups: nestedGroups,
+        startIndex
+      });
+      continue;
+    }
+    segments.push({
+      direction: undefined,
+      groups: [group],
+      startIndex: index
+    });
+    index++;
+  }
+  return segments;
+};
+
 const rebalanceGroupSizes = groups => {
   const groupCount = groups.length;
   if (groupCount === 0) {
@@ -3141,6 +3253,111 @@ const rebalanceGroupSizes = groups => {
     size: index === groupCount - 1 ? lastSize : evenSize
   }));
 };
+const isTrailingSplit = direction => {
+  return direction === Right || direction === 'down';
+};
+const getSplitLayoutDirection = direction => {
+  return direction === Left || direction === Right ? Horizontal : Vertical;
+};
+const createNextState = (state, activeGroupId, groups) => {
+  return {
+    ...state,
+    layout: {
+      activeGroupId,
+      direction: state.layout.direction,
+      groups
+    }
+  };
+};
+const splitOnlyGroup = (state, groups, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup) => {
+  const updatedGroups = groups.map(group => {
+    if (group.id === groupId) {
+      return {
+        ...group,
+        direction: undefined,
+        focused: false,
+        size: 50
+      };
+    }
+    return group;
+  });
+  const newGroup = {
+    ...baseNewGroup,
+    direction: undefined,
+    size: 50
+  };
+  const reorderedGroups = isTrailingSplit(direction) ? [...updatedGroups, newGroup] : [newGroup, ...updatedGroups];
+  return {
+    ...state,
+    layout: {
+      activeGroupId: newGroupId,
+      direction: splitLayoutDirection,
+      groups: reorderedGroups
+    }
+  };
+};
+const splitWithinMatchingNestedDirection = (state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup) => {
+  const sourceIndex = groups.findIndex(group => group.id === groupId);
+  const updatedGroups = groups.map(group => {
+    if (group.id === groupId) {
+      return {
+        ...group,
+        focused: false,
+        size: Number((group.size / 2).toFixed(6))
+      };
+    }
+    return group;
+  });
+  const newGroup = {
+    ...baseNewGroup,
+    direction: splitLayoutDirection,
+    size: Number((sourceGroup.size / 2).toFixed(6))
+  };
+  const insertIndex = isTrailingSplit(direction) ? sourceIndex + 1 : sourceIndex;
+  const reorderedGroups = [...updatedGroups.slice(0, insertIndex), newGroup, ...updatedGroups.slice(insertIndex)];
+  return createNextState(state, newGroupId, reorderedGroups);
+};
+const splitStandaloneSourceIntoNestedDirection = (state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup) => {
+  const sourceIndex = groups.findIndex(group => group.id === groupId);
+  const halfSize = Number((sourceGroup.size / 2).toFixed(6));
+  const updatedSourceGroup = {
+    ...sourceGroup,
+    direction: splitLayoutDirection,
+    focused: false,
+    size: halfSize
+  };
+  const newGroup = {
+    ...baseNewGroup,
+    direction: splitLayoutDirection,
+    size: Number((sourceGroup.size - halfSize).toFixed(6))
+  };
+  const replacementGroups = isTrailingSplit(direction) ? [updatedSourceGroup, newGroup] : [newGroup, updatedSourceGroup];
+  const reorderedGroups = [...groups.slice(0, sourceIndex), ...replacementGroups, ...groups.slice(sourceIndex + 1)];
+  return createNextState(state, newGroupId, reorderedGroups);
+};
+const splitAtRootLevel = (state, groups, groupId, newGroupId, direction, baseNewGroup) => {
+  const updatedGroups = groups.map(group => {
+    if (group.id === groupId) {
+      return {
+        ...group,
+        direction: undefined,
+        focused: false,
+        size: 50
+      };
+    }
+    return group;
+  });
+  const newGroup = {
+    ...baseNewGroup,
+    direction: undefined,
+    size: 50
+  };
+  const reorderedGroups = isTrailingSplit(direction) ? [...updatedGroups, newGroup] : (() => {
+    const sourceIndex = updatedGroups.findIndex(group => group.id === groupId);
+    return [...updatedGroups.slice(0, sourceIndex), newGroup, ...updatedGroups.slice(sourceIndex)];
+  })();
+  return createNextState(state, newGroupId, rebalanceGroupSizes(reorderedGroups));
+};
 const splitEditorGroup$1 = (state, groupId, direction) => {
   const {
     layout
@@ -3153,42 +3370,30 @@ const splitEditorGroup$1 = (state, groupId, direction) => {
     return state;
   }
   const newGroupId = create$1();
-  const isHorizontalSplit = direction === Left || direction === Right;
-  const newLayoutDirection = isHorizontalSplit ? Horizontal : Vertical;
-  const updatedGroups = groups.map(group => {
-    if (group.id === groupId) {
-      return {
-        ...group,
-        focused: false,
-        size: 50
-      };
-    }
-    return group;
-  });
-  const newGroup = {
+  const splitLayoutDirection = getSplitLayoutDirection(direction);
+  const baseNewGroup = {
     activeTabId: undefined,
     focused: true,
     id: newGroupId,
     isEmpty: true,
-    size: 50,
+    size: sourceGroup.size / 2,
     tabs: []
   };
-  let reorderedGroups;
-  if (direction === Right || direction === 'down') {
-    reorderedGroups = [...updatedGroups, newGroup];
-  } else {
-    const sourceIndex = updatedGroups.findIndex(group => group.id === groupId);
-    reorderedGroups = [...updatedGroups.slice(0, sourceIndex), newGroup, ...updatedGroups.slice(sourceIndex)];
+  if (groups.length === 1) {
+    return splitOnlyGroup(state, groups, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
   }
-  const resizedGroups = rebalanceGroupSizes(reorderedGroups);
-  return {
-    ...state,
-    layout: {
-      activeGroupId: newGroupId,
-      direction: newLayoutDirection,
-      groups: resizedGroups
-    }
-  };
+  if (sourceGroup.direction === splitLayoutDirection) {
+    return splitWithinMatchingNestedDirection(state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
+  }
+  if (splitLayoutDirection !== layout.direction && sourceGroup.direction === undefined) {
+    return splitStandaloneSourceIntoNestedDirection(state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
+  }
+  const segments = getGroupSegments(groups, layout.direction);
+  const hasNestedSegments = segments.some(segment => segment.direction !== undefined);
+  if (splitLayoutDirection === layout.direction && !hasNestedSegments) {
+    return splitAtRootLevel(state, groups, groupId, newGroupId, direction, baseNewGroup);
+  }
+  return createNextState(state, newGroupId, groups);
 };
 
 const handleClickAction = async (state, action, rawGroupId) => {
@@ -3211,11 +3416,13 @@ const handleClickAction = async (state, action, rawGroupId) => {
   }
   switch (action) {
     case CloseGroup:
-      if (rawGroupId) {
-        const groupId = Number.parseInt(rawGroupId, 10);
+      {
+        const groupId = parseRawGroupId(rawGroupId);
+        if (groupId === undefined) {
+          return state;
+        }
         return closeEditorGroup$1(state, groupId);
       }
-      return state;
     case RetryOpen:
       return retryOpen(state);
     case SplitRight$1:
@@ -4047,6 +4254,7 @@ const Pin = 'Pin';
 const SplitAndMove = 'Split & Move';
 const MoveIntoNewWindow = 'Move into New Window';
 const CopyIntoNewWindow = 'Copy into New Window';
+const NewTextFile = 'New Text File';
 const NewWindow = 'New Window';
 const OpenFile = 'Open File';
 const SplitDown = 'Split Down';
@@ -4078,6 +4286,9 @@ const splitEditorGroup = () => {
 const newWindow$1 = () => {
   return i18nString(NewWindow);
 };
+const newTextFile = () => {
+  return i18nString(NewTextFile);
+};
 const close = () => {
   return i18nString(Close);
 };
@@ -4164,6 +4375,11 @@ const getNewWindowMenuEntries = state => {
 const getMenuEntries$2 = (state, groupId) => {
   const groupArgs = getMenuEntryArgs(groupId);
   const entries = [{
+    command: 'MainArea.newFile',
+    flags: None,
+    id: 'newTextFile',
+    label: newTextFile()
+  }, {
     args: [QuickPick, 'file'],
     command: 'Viewlet.openWidget',
     flags: None,
@@ -4394,47 +4610,112 @@ const getEditorGroupCss = layout => {
   });
 };
 
-const getSashCss = layout => {
-  if (layout.groups.length <= 1) {
-    return [];
+const MIN_GROUP_WIDTH_PX = 250;
+const getSashOffset = (layout, groupIndex, width) => {
+  const {
+    direction,
+    groups
+  } = layout;
+  const percentOffset = groups.slice(0, groupIndex).reduce((total, group) => total + group.size, 0);
+  if (direction !== Horizontal || !width || !Number.isFinite(width)) {
+    return `${percentOffset}%`;
   }
-  const sashPositionVariable = layout.direction === Horizontal ? '--SashLeft' : '--SashTop';
+  const effectiveGroupSizes = groups.map(group => Math.max(group.size / 100 * width, MIN_GROUP_WIDTH_PX));
+  const hasOverflowingGroups = effectiveGroupSizes.some((size, index) => size !== groups[index].size / 100 * width);
+  if (!hasOverflowingGroups) {
+    return `${percentOffset}%`;
+  }
+  const pixelOffset = effectiveGroupSizes.slice(0, groupIndex).reduce((total, size) => total + size, 0);
+  return `${pixelOffset}px`;
+};
+
+const escapeCssAttributeValue = value => {
+  return value.replaceAll('\\', '\\\\').replaceAll('"', '\\"');
+};
+const toSashProperty = direction => {
+  return direction === Horizontal ? 'left' : 'top';
+};
+const renderSashCss = ({
+  property,
+  sashId,
+  value
+}) => {
+  const escapedSashId = escapeCssAttributeValue(sashId);
+  return `[data-sash-id="${escapedSashId}"] {
+  ${property}: ${value};
+}`;
+};
+const getProtoSashCss = (layout, width) => {
+  const segments = getGroupSegments(layout.groups, layout.direction);
+  const hasNestedSegments = segments.some(segment => segment.direction !== undefined);
   const rules = [];
-  let sashOffset = 0;
-  for (let i = 1; i < layout.groups.length; i++) {
-    sashOffset += layout.groups[i - 1].size;
-    const beforeGroupId = layout.groups[i - 1].id;
-    const afterGroupId = layout.groups[i].id;
+  let segmentOffset = 0;
+  for (let i = 1; i < segments.length; i++) {
+    segmentOffset += getSegmentSize(segments[i - 1]);
+    const beforeGroupId = segments[i - 1].groups.at(-1)?.id || 0;
+    const afterGroupId = segments[i].groups[0].id;
     const sashId = create(beforeGroupId, afterGroupId);
-    rules.push(`.Sash[data-sashId="${sashId}"] {
-  ${sashPositionVariable}: ${sashOffset}%;
-}`);
+    const value = hasNestedSegments || layout.direction !== Horizontal || !width ? `${segmentOffset}%` : getSashOffset(layout, i, width);
+    rules.push({
+      property: toSashProperty(layout.direction),
+      sashId,
+      value
+    });
+  }
+  for (const segment of segments) {
+    if (segment.direction === undefined || segment.groups.length <= 1) {
+      continue;
+    }
+    const segmentSize = getSegmentSize(segment);
+    let nestedOffset = 0;
+    for (let i = 1; i < segment.groups.length; i++) {
+      nestedOffset += segment.groups[i - 1].size;
+      const beforeGroupId = segment.groups[i - 1].id;
+      const afterGroupId = segment.groups[i].id;
+      const sashId = create(beforeGroupId, afterGroupId);
+      const value = `${Number((nestedOffset / segmentSize * 100).toFixed(6))}%`;
+      rules.push({
+        property: toSashProperty(segment.direction),
+        sashId,
+        value
+      });
+    }
   }
   return rules;
 };
+const getSashCss = (layout, width = 0) => {
+  if (layout.groups.length <= 1) {
+    return [];
+  }
+  return getProtoSashCss(layout, width).map(renderSashCss);
+};
 
-const getCss = layout => {
+const getCss = (layout, width = 0) => {
   const rules = [`.MainArea {
 }`, `.editor-groups-container {
   overflow: auto;
+}`, `.SashBorder {
+  background: var(--SashBorder, gray);
+}`, `.SashBorderHorizontal {
+  width: 100%;
+  height: 1px;
+}`, `.SashBorderVertical {
+  width: 1px;
+  height: 100%;
 }`, `.EditorGroup {
   min-width: 250px;
   width: var(--EditorGroupWidth, auto);
   /*height: var(--EditorGroupHeight, auto);*/
-}`, `.MainArea .SashVertical {
-  left: var(--SashLeft);
-}`, `.MainArea .SashHorizontal {
-  top: var(--SashTop);
 }`];
   if (layout) {
-    rules.push(...getEditorGroupCss(layout), ...getSashCss(layout));
+    rules.push(...getEditorGroupCss(layout), ...getSashCss(layout, width));
   }
   const css = rules.join('\n');
   return css;
 };
 
 const renderCss = (oldState, newState) => {
-  const css = getCss(newState.layout);
+  const css = getCss(newState.layout, newState.width);
   return [SetCss, newState.uid, css];
 };
 
@@ -4748,25 +5029,6 @@ const HandleSashPointerDown = 16;
 const HandleSashPointerMove = 17;
 const HandleSashPointerUp = 18;
 
-const MIN_GROUP_WIDTH_PX = 250;
-const getSashOffset = (layout, groupIndex, width) => {
-  const {
-    direction,
-    groups
-  } = layout;
-  const percentOffset = groups.slice(0, groupIndex).reduce((total, group) => total + group.size, 0);
-  if (direction !== Horizontal || !width || !Number.isFinite(width)) {
-    return `${percentOffset}%`;
-  }
-  const effectiveGroupSizes = groups.map(group => Math.max(group.size / 100 * width, MIN_GROUP_WIDTH_PX));
-  const hasOverflowingGroups = effectiveGroupSizes.some((size, index) => size !== groups[index].size / 100 * width);
-  if (!hasOverflowingGroups) {
-    return `${percentOffset}%`;
-  }
-  const pixelOffset = effectiveGroupSizes.slice(0, groupIndex).reduce((total, size) => total + size, 0);
-  return `${pixelOffset}px`;
-};
-
 const renderContent = content => {
   return [{
     childCount: 1,
@@ -5002,7 +5264,11 @@ const renderEmptyGroupCloseButton = (group, groupIndex) => {
     onClick: HandleClickAction,
     title: closeEditorGroup(),
     type: Button$2
-  }, text('✕')];
+  }, {
+    childCount: 0,
+    className: MaskIconClose,
+    type: Div
+  }];
 };
 
 const renderWaterMark = groupId => {
@@ -5056,18 +5322,20 @@ const getSashClassName = direction => {
   return direction === Horizontal ? 'Sash SashVertical' : 'Sash SashHorizontal';
 };
 
-const renderSash = (direction, sashId, style) => {
+const getSashBorderClassName = direction => {
+  return direction === 1 ? 'SashBorder SashBorderVertical' : 'SashBorder SashBorderHorizontal';
+};
+const renderSash = (direction, sashId) => {
   return [{
     childCount: 1,
     className: getSashClassName(direction),
     'data-sashId': sashId,
     onPointerDown: HandleSashPointerDown,
     role: 'none',
-    style,
     type: Button$2
   }, {
     childCount: 0,
-    className: 'SashBorder',
+    className: getSashBorderClassName(direction),
     type: Div
   }];
 };
@@ -5086,19 +5354,81 @@ const getDirectionClassName = (direction, isSplit) => {
   }
   return direction === Horizontal ? EditorGroupsVertical : EditorGroupsHorizontal;
 };
-const getMainAreaVirtualDom = (layout, splitButtonEnabled = false, width = 0) => {
+const getContainerClassName = (direction, childCount) => {
+  const directionClassName = getDirectionClassName(direction, childCount > 1);
+  return directionClassName ? `${EDITOR_GROUPS_CONTAINER} ${directionClassName}` : EDITOR_GROUPS_CONTAINER;
+};
+const getSizeProperty = direction => {
+  return direction === Vertical ? 'height' : 'width';
+};
+const renderSegmentChildren = (direction, groups, splitButtonEnabled) => {
+  const segments = getGroupSegments(groups, direction);
+  const children = [];
+  let childCount = 0;
+  const sizeProperty = getSizeProperty(direction);
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i];
+    if (i > 0) {
+      const previousSegment = segments[i - 1];
+      const beforeGroupId = previousSegment.groups.at(-1)?.id || 0;
+      const afterGroupId = segment.groups[0].id;
+      const sashId = create(beforeGroupId, afterGroupId);
+      children.push(...renderSash(direction, sashId));
+      childCount++;
+    }
+    if (segment.direction === undefined) {
+      children.push(...renderEditorGroup(segment.groups[0], segment.startIndex, splitButtonEnabled, sizeProperty));
+      childCount++;
+      continue;
+    }
+    const nestedDirection = segment.direction;
+    const nestedSizeProperty = getSizeProperty(nestedDirection);
+    const nestedChildCount = segment.groups.length + segment.groups.length - 1;
+    const nestedChildren = [];
+    let nestedCount = 0;
+    const segmentSize = getSegmentSize(segment);
+    for (let j = 0; j < segment.groups.length; j++) {
+      if (j > 0) {
+        const beforeGroupId = segment.groups[j - 1].id;
+        const afterGroupId = segment.groups[j].id;
+        const sashId = create(beforeGroupId, afterGroupId);
+        nestedChildren.push(...renderSash(nestedDirection, sashId));
+        nestedCount++;
+      }
+      const group = segment.groups[j];
+      const normalizedSize = Number((group.size / segmentSize * 100).toFixed(6));
+      nestedChildren.push(...renderEditorGroup({
+        ...group,
+        size: normalizedSize
+      }, segment.startIndex + j, splitButtonEnabled, nestedSizeProperty));
+      nestedCount++;
+    }
+    children.push({
+      childCount: nestedChildCount,
+      className: getContainerClassName(nestedDirection, segment.groups.length),
+      role: None$1,
+      style: `${sizeProperty}:${segmentSize}%;`,
+      type: Div
+    });
+    children.push(...nestedChildren);
+    childCount++;
+    childCount += nestedCount;
+  }
+  return {
+    childCount,
+    children
+  };
+};
+const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
   const {
     direction,
     groups
   } = layout;
-  const sizeProperty = direction === Vertical ? 'height' : 'width';
+  const sizeProperty = getSizeProperty(direction);
   if (groups.length === 1) {
     return renderSingleEditorGroup(layout, splitButtonEnabled, sizeProperty);
   }
-  const children = [];
-  const isSplit = groups.length > 1;
-  const directionClassName = getDirectionClassName(direction, isSplit);
-  const editorGroupsContainerClassName = directionClassName ? `${EDITOR_GROUPS_CONTAINER} ${directionClassName}` : EDITOR_GROUPS_CONTAINER;
+  const editorGroupsContainerClassName = getContainerClassName(direction, groups.length);
   if (groups.length === 0) {
     return [{
       childCount: 1,
@@ -5113,22 +5443,10 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false, width = 0) =>
       type: Div
     }];
   }
-  let childCount = 0;
-  for (let i = 0; i < groups.length; i++) {
-    if (i > 0) {
-      // Insert sash between groups
-      const beforeGroupId = groups[i - 1].id;
-      const afterGroupId = groups[i].id;
-      const sashId = create(beforeGroupId, afterGroupId);
-      const offset = getSashOffset(layout, i, width);
-      const style = direction === Horizontal ? `left:${offset};` : `top:${offset};`;
-      children.push(...renderSash(direction, sashId, style));
-      childCount++;
-    }
-    const editorGroupDom = renderEditorGroup(groups[i], i, splitButtonEnabled, sizeProperty);
-    children.push(...editorGroupDom);
-    childCount++;
-  }
+  const {
+    childCount,
+    children
+  } = renderSegmentChildren(direction, groups, splitButtonEnabled);
   return [{
     childCount: 1,
     className: Main,
@@ -5146,13 +5464,12 @@ const renderItems = (oldState, newState) => {
     initial,
     layout,
     splitButtonEnabled,
-    uid,
-    width
+    uid
   } = newState;
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getMainAreaVirtualDom(layout, splitButtonEnabled, width);
+  const dom = getMainAreaVirtualDom(layout, splitButtonEnabled);
   return [SetDom2, uid, dom];
 };
 
@@ -5268,10 +5585,16 @@ const save = async state => {
 };
 
 const getFilteredGroups = groups => {
-  return groups.map(group => ({
-    ...group,
-    tabs: group.tabs.filter(tab => !tab.uri?.startsWith('untitled://')).map(normalizeTabEditorInput)
-  })).filter(group => group.tabs.length > 0);
+  return groups.map(group => {
+    const tabs = group.tabs.filter(tab => !tab.uri?.startsWith('untitled://')).map(normalizeTabEditorInput);
+    const activeTabId = tabs.some(tab => tab.id === group.activeTabId) ? group.activeTabId : tabs[0]?.id;
+    return {
+      ...group,
+      activeTabId,
+      isEmpty: tabs.length === 0,
+      tabs
+    };
+  });
 };
 
 const saveState = state => {
@@ -5431,6 +5754,26 @@ const splitUp = (state, groupId) => {
 };
 
 const commandMap = {
+  'Main.closeActiveEditor': wrapCommand(closeActiveEditor),
+  'Main.closeAll': wrapCommand(closeAll$1),
+  'Main.closeAllEditors': wrapCommand(closeAll$1),
+  'Main.closeFocusedTab': wrapCommand(closeFocusedTab),
+  'Main.closeOthers': wrapCommand(closeOtherTabs),
+  'Main.closeSaved': wrapCommand(closeSaved$1),
+  'Main.closeTabsByUris': wrapCommand(closeTabsByUris),
+  'Main.closeTabsRight': wrapCommand(closeTabsRight),
+  'Main.copyPath': wrapCommand(copyPath$1),
+  'Main.copyRelativePath': wrapCommand(copyRelativePath$1),
+  'Main.focusNext': wrapCommand(focusNextTab),
+  'Main.focusNextTab': wrapCommand(focusNextTab),
+  'Main.focusPrevious': wrapCommand(focusPreviousTab),
+  'Main.focusPreviousTab': wrapCommand(focusPreviousTab),
+  'Main.handleTabContextMenu': wrapCommand(handleTabContextMenu),
+  'Main.openInput': wrapCommand(openInput),
+  'Main.openUri': wrapCommand(openUri),
+  'Main.openUris': wrapCommand(openUris),
+  'Main.save': wrapCommand(save),
+  'Main.splitRight': wrapCommand(splitRight),
   'MainArea.closeActiveEditor': wrapCommand(closeActiveEditor),
   'MainArea.closeAll': wrapCommand(closeAll$1),
   'MainArea.closeAllEditors': wrapCommand(closeAll$1),
@@ -5438,6 +5781,7 @@ const commandMap = {
   'MainArea.closeFocusedTab': wrapCommand(closeFocusedTab),
   'MainArea.closeOthers': wrapCommand(closeOtherTabs),
   'MainArea.closeSaved': wrapCommand(closeSaved$1),
+  'MainArea.closeTabsByUris': wrapCommand(closeTabsByUris),
   'MainArea.closeTabsRight': wrapCommand(closeTabsRight),
   'MainArea.copyPath': wrapCommand(copyPath$1),
   'MainArea.copyRelativePath': wrapCommand(copyRelativePath$1),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/main-area-worker",
-  "version": "9.8.0",
+  "version": "9.11.0",
   "description": "Main Area Worker",
   "repository": {
     "type": "git",