@lvce-editor/main-area-worker 9.33.1 → 9.33.3

package/dist/mainAreaWorkerMain.js

@@ -1503,6 +1503,10 @@ const Main$1 = 24;
 const Separator = 1;
 const None$1 = 0;
 
+const Add$1 = 6;
+const NavigateChild$1 = 7;
+const NavigateParent$1 = 8;
+
 const Electron = 2;
 
 const ClipBoardWorker = 3400;
@@ -2326,7 +2330,10 @@ const findTabInState = (state, groupId, tabId) => {
   const {
     layout
   } = state;
-  const group = layout.groups.find(g => g.id === groupId);
+  const {
+    groups
+  } = layout;
+  const group = groups.find(g => g.id === groupId);
   return group?.tabs.find(t => t.id === tabId);
 };
 
@@ -2334,6 +2341,9 @@ const closeTabWithViewlet = async (state, groupId, tabId) => {
   const {
     layout
   } = state;
+  const {
+    groups
+  } = layout;
   const tab = findTabInState(state, groupId, tabId);
   const commands = [];
   if (tab && tab.editorUid !== -1) {
@@ -2343,7 +2353,7 @@ const closeTabWithViewlet = async (state, groupId, tabId) => {
     commands.push(...disposeCommands);
   }
   const newState = closeTab(state, groupId, tabId);
-  const group = layout.groups.find(g => g.id === groupId);
+  const group = 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;
@@ -2467,9 +2477,12 @@ const closeAll$1 = async state => {
   const {
     layout
   } = state;
-  const editorUids = layout.groups.flatMap(group => group.tabs.map(tab => tab.editorUid)).filter(editorUid => editorUid !== -1);
+  const {
+    groups
+  } = layout;
+  const editorUids = groups.flatMap(group => group.tabs.map(tab => tab.editorUid)).filter(editorUid => editorUid !== -1);
   await disposeEditors(editorUids);
-  const entries = layout.groups.flatMap((group, groupIndex) => {
+  const entries = groups.flatMap((group, groupIndex) => {
     return group.tabs.map((tab, tabIndex) => ({
       group,
       groupIndex,
@@ -2635,7 +2648,10 @@ const closeFirstTabByUri = (state, uri) => {
   const {
     layout
   } = state;
-  const matchingGroup = layout.groups.find(group => {
+  const {
+    groups
+  } = layout;
+  const matchingGroup = groups.find(group => {
     return group.tabs.some(tab => tab.uri === uri);
   });
   const matchingTab = matchingGroup?.tabs.find(tab => tab.uri === uri);
@@ -2660,7 +2676,10 @@ const getGroupById = (state, groupId) => {
   const {
     layout
   } = state;
-  return layout.groups.find(group => group.id === groupId);
+  const {
+    groups
+  } = layout;
+  return groups.find(group => group.id === groupId);
 };
 
 const closeTabsRight = (state, groupId) => {
@@ -3045,7 +3064,10 @@ const getSelectedTabData = (state, groupIndex, index) => {
   const {
     layout
   } = state;
-  const group = layout.groups[groupIndex];
+  const {
+    groups
+  } = layout;
+  const group = groups[groupIndex];
   if (!group || index < 0 || index >= group.tabs.length) {
     return undefined;
   }
@@ -3226,6 +3248,7 @@ const selectTab = async (state, groupIndex, index) => {
     uid
   } = state;
   const {
+    activeGroupId,
     groups
   } = layout;
   if (groupIndex < 0 || groupIndex >= groups.length) {
@@ -3242,7 +3265,7 @@ const selectTab = async (state, groupIndex, index) => {
     tabId
   } = selectedTabData;
   const normalizedTab = normalizeTabEditorInput(tab);
-  const isAlreadyActive = layout.activeGroupId === groupId && group.activeTabId === tabId;
+  const isAlreadyActive = activeGroupId === groupId && group.activeTabId === tabId;
   if (isAlreadyActive && !shouldLoadContentForTab(normalizedTab)) {
     return state;
   }
@@ -3458,6 +3481,9 @@ const restoreExistingUri = (state, entry) => {
   const {
     layout
   } = state;
+  const {
+    groups: layoutGroups
+  } = layout;
   if (!entry.tab.uri) {
     return undefined;
   }
@@ -3465,11 +3491,11 @@ const restoreExistingUri = (state, entry) => {
   if (!existing) {
     return undefined;
   }
-  const groupIndex = layout.groups.findIndex(group => group.id === existing.groupId);
+  const groupIndex = layoutGroups.findIndex(group => group.id === existing.groupId);
   if (groupIndex === -1) {
     return undefined;
   }
-  const tabIndex = layout.groups[groupIndex].tabs.findIndex(tab => tab.id === existing.tab.id);
+  const tabIndex = layoutGroups[groupIndex].tabs.findIndex(tab => tab.id === existing.tab.id);
   if (tabIndex === -1) {
     return undefined;
   }
@@ -3637,7 +3663,10 @@ const getTabCount = state => {
   const {
     layout
   } = state;
-  return layout.groups.reduce((sum, group) => sum + group.tabs.length, 0);
+  const {
+    groups
+  } = layout;
+  return groups.reduce((sum, group) => sum + group.tabs.length, 0);
 };
 
 const getCurrentState = state => {
@@ -3754,12 +3783,15 @@ const updateTabUriTitles = state => {
     homeDirUri: rawHomeDirUri,
     layout
   } = state;
+  const {
+    groups
+  } = layout;
   const homeDirUri = rawHomeDirUri || '';
   return {
     ...state,
     layout: {
       ...layout,
-      groups: layout.groups.map(group => ({
+      groups: groups.map(group => ({
         ...group,
         tabs: group.tabs.map(tab => updateTabUriTitle(tab, homeDirUri))
       }))
@@ -3773,6 +3805,7 @@ const createEmptyGroup$1 = (state, uri, requestId, preview = false, title = getL
     layout
   } = state;
   const {
+    direction,
     groups
   } = layout;
   const groupId = create$2();
@@ -3795,6 +3828,7 @@ const createEmptyGroup$1 = (state, uri, requestId, preview = false, title = getL
   };
   const newGroup = {
     activeTabId: newTab.id,
+    direction,
     focused: true,
     id: groupId,
     isEmpty: false,
@@ -4143,7 +4177,11 @@ const getActivePreviewEditorUid = state => {
   const {
     layout
   } = state;
-  const activeGroup = layout.activeGroupId === undefined ? layout.groups.find(group => group.focused) : layout.groups.find(group => group.id === layout.activeGroupId);
+  const {
+    activeGroupId,
+    groups
+  } = layout;
+  const activeGroup = activeGroupId === undefined ? groups.find(group => group.focused) : groups.find(group => group.id === activeGroupId);
   const activeTab = activeGroup?.tabs.find(tab => tab.id === activeGroup.activeTabId);
   return activeTab?.isPreview ? activeTab.editorUid : -1;
 };
@@ -4308,7 +4346,7 @@ const getGroupSegments = (groups, parentDirection) => {
   let index = 0;
   while (index < groups.length) {
     const group = groups[index];
-    if (group.direction !== undefined && group.direction !== parentDirection) {
+    if (group.direction !== parentDirection) {
       const startIndex = index;
       const nestedGroups = [group];
       const {
@@ -4359,11 +4397,14 @@ const createNextState = (state, activeGroupId, groups) => {
   const {
     layout
   } = state;
+  const {
+    direction
+  } = layout;
   return {
     ...state,
     layout: {
       activeGroupId,
-      direction: layout.direction,
+      direction,
       groups
     }
   };
@@ -4373,7 +4414,7 @@ const splitOnlyGroup = (state, groups, groupId, newGroupId, direction, splitLayo
     if (group.id === groupId) {
       return {
         ...group,
-        direction: undefined,
+        direction: splitLayoutDirection,
         focused: false,
         size: 50
       };
@@ -4382,7 +4423,7 @@ const splitOnlyGroup = (state, groups, groupId, newGroupId, direction, splitLayo
   });
   const newGroup = {
     ...baseNewGroup,
-    direction: undefined,
+    direction: splitLayoutDirection,
     size: 50
   };
   const reorderedGroups = isTrailingSplit(direction) ? [...updatedGroups, newGroup] : [newGroup, ...updatedGroups];
@@ -4443,7 +4484,7 @@ const splitAtRootLevel = (state, groups, groupId, newGroupId, direction, baseNew
     if (group.id === groupId) {
       return {
         ...group,
-        direction: undefined,
+        direction: state.layout.direction,
         focused: false,
         size: 50
       };
@@ -4452,7 +4493,7 @@ const splitAtRootLevel = (state, groups, groupId, newGroupId, direction, baseNew
   });
   const newGroup = {
     ...baseNewGroup,
-    direction: undefined,
+    direction: state.layout.direction,
     size: 50
   };
   const reorderedGroups = isTrailingSplit(direction) ? [...updatedGroups, newGroup] : (() => {
@@ -4466,6 +4507,7 @@ const splitEditorGroup$1 = (state, groupId, direction) => {
     layout
   } = state;
   const {
+    direction: layoutDirection,
     groups
   } = layout;
   const sourceGroup = groups.find(group => group.id === groupId);
@@ -4476,6 +4518,7 @@ const splitEditorGroup$1 = (state, groupId, direction) => {
   const splitLayoutDirection = getSplitLayoutDirection(direction);
   const baseNewGroup = {
     activeTabId: undefined,
+    direction: sourceGroup.direction,
     focused: true,
     id: newGroupId,
     isEmpty: true,
@@ -4485,15 +4528,15 @@ const splitEditorGroup$1 = (state, groupId, direction) => {
   if (groups.length === 1) {
     return splitOnlyGroup(state, groups, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
   }
-  if (sourceGroup.direction === splitLayoutDirection) {
+  if (sourceGroup.direction !== layoutDirection && sourceGroup.direction === splitLayoutDirection) {
     return splitWithinMatchingNestedDirection(state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
   }
-  if (splitLayoutDirection !== layout.direction && sourceGroup.direction === undefined) {
+  if (splitLayoutDirection !== layoutDirection && sourceGroup.direction === layoutDirection) {
     return splitStandaloneSourceIntoNestedDirection(state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
   }
-  const segments = getGroupSegments(groups, layout.direction);
+  const segments = getGroupSegments(groups, layoutDirection);
   const hasNestedSegments = segments.some(segment => segment.direction !== undefined);
-  if (splitLayoutDirection === layout.direction && !hasNestedSegments) {
+  if (splitLayoutDirection === layoutDirection && !hasNestedSegments) {
     return splitAtRootLevel(state, groups, groupId, newGroupId, direction, baseNewGroup);
   }
   return createNextState(state, newGroupId, groups);
@@ -4608,12 +4651,15 @@ const handleDoubleClick = (state, groupIndexRaw, indexRaw) => {
   const {
     layout
   } = state;
+  const {
+    groups
+  } = layout;
   if (!groupIndexRaw || !indexRaw) {
     return state;
   }
   const groupIndex = Number.parseInt(groupIndexRaw);
   const tabIndex = Number.parseInt(indexRaw);
-  const tab = layout.groups[groupIndex]?.tabs[tabIndex];
+  const tab = groups[groupIndex]?.tabs[tabIndex];
   if (!tab?.isPreview) {
     return state;
   }
@@ -4710,7 +4756,10 @@ const getDragOverlay = (state, eventX, eventY) => {
     x,
     y
   } = state;
-  const hasOpenEditor = layout.groups.some(group => !group.isEmpty);
+  const {
+    groups
+  } = layout;
+  const hasOpenEditor = groups.some(group => !group.isEmpty);
   const contentY = hasOpenEditor ? tabHeight : 0;
   const contentHeight = Math.max(0, height - contentY);
   const relativeX = eventX - x;
@@ -4920,8 +4969,11 @@ const handleHeaderDoubleClick = async (state, className, groupIndexRaw) => {
 };
 
 const getAllTabs = layout => {
+  const {
+    groups
+  } = layout;
   const allTabs = [];
-  for (const group of layout.groups) {
+  for (const group of groups) {
     allTabs.push(...group.tabs);
   }
   return allTabs;
@@ -4932,6 +4984,9 @@ const loadFileIcons = async state => {
     fileIconCache,
     layout
   } = state;
+  const {
+    groups
+  } = layout;
   try {
     const allTabs = getAllTabs(layout);
     const {
@@ -4941,7 +4996,7 @@ const loadFileIcons = async state => {
     // Update tabs with their icons
     const updatedLayout = {
       ...layout,
-      groups: layout.groups.map(group => ({
+      groups: groups.map(group => ({
         ...group,
         tabs: group.tabs.map(tab => ({
           ...tab,
@@ -5054,7 +5109,11 @@ const offsetsMatch = (first, second) => {
   return Math.abs(first - second) < 1e-6;
 };
 const getSashCorner = layout => {
-  const segments = getGroupSegments(layout.groups, layout.direction);
+  const {
+    direction,
+    groups
+  } = layout;
+  const segments = getGroupSegments(groups, direction);
   if (segments.length !== 2) {
     return undefined;
   }
@@ -5074,7 +5133,7 @@ const getSashCorner = layout => {
     return undefined;
   }
   const rootOffset = firstSegmentSize / totalSize * 100;
-  if (layout.direction === Horizontal) {
+  if (direction === Horizontal) {
     return {
       leftOffset: rootOffset,
       topOffset: firstNestedOffset,
@@ -5098,6 +5157,9 @@ const handleSashCornerPointerDown = async (state, clientX, clientY) => {
   const {
     layout
   } = state;
+  const {
+    groups
+  } = layout;
   if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
     return state;
   }
@@ -5108,7 +5170,7 @@ const handleSashCornerPointerDown = async (state, clientX, clientY) => {
   return {
     ...state,
     sashCornerDrag: {
-      groupSizes: layout.groups.map(group => ({
+      groupSizes: groups.map(group => ({
         id: group.id,
         size: group.size
       })),
@@ -5157,6 +5219,9 @@ const handleSashCornerPointerMove = async (state, clientX, clientY) => {
     sashCornerDrag,
     width
   } = state;
+  const {
+    groups
+  } = layout;
   if (!sashCornerDrag || !width || !height || !Number.isFinite(clientX) || !Number.isFinite(clientY)) {
     return state;
   }
@@ -5183,7 +5248,7 @@ const handleSashCornerPointerMove = async (state, clientX, clientY) => {
     ...state,
     layout: {
       ...layout,
-      groups: layout.groups.map(group => {
+      groups: groups.map(group => {
         const xSize = xBeforeGroupIdSet.has(group.id) ? xBeforeSize : xAfterSize;
         const ySize = yBeforeGroupIdSet.has(group.id) ? yBeforeSize : yAfterSize;
         return {
@@ -5431,7 +5496,7 @@ const isValidTab = tab => {
 };
 
 const isValidEditorGroup = group => {
-  return group && typeof group.id === 'number' && Array.isArray(group.tabs) && group.tabs.every(isValidTab) && (group.activeTabId === undefined || typeof group.activeTabId === 'number') && (group.direction === undefined || isLayoutDirection(group.direction)) && typeof group.focused === 'boolean' && (group.segmentId === undefined || typeof group.segmentId === 'number') && typeof group.size === 'number' && group.size > 0 && typeof group.isEmpty === 'boolean';
+  return group && typeof group.id === 'number' && Array.isArray(group.tabs) && group.tabs.every(isValidTab) && (group.activeTabId === undefined || typeof group.activeTabId === 'number') && isLayoutDirection(group.direction) && typeof group.focused === 'boolean' && (group.segmentId === undefined || typeof group.segmentId === 'number') && typeof group.size === 'number' && group.size > 0 && typeof group.isEmpty === 'boolean';
 };
 
 const isValidMainAreaLayout = layout => {
@@ -5465,6 +5530,12 @@ const normalizeRestoredTab = tab => {
     isPreview: typeof tab?.isPreview === 'boolean' ? tab.isPreview : false
   };
 };
+const normalizeGroupDirection = (group, layoutDirection) => {
+  if (!group || typeof group !== 'object' || !Object.hasOwn(group, 'direction')) {
+    return layoutDirection;
+  }
+  return normalizeLayoutDirection(group.direction);
+};
 const tryRestoreLayout = savedState => {
   if (savedState === undefined || savedState === null) {
     return undefined;
@@ -5496,12 +5567,10 @@ const tryRestoreLayout = savedState => {
     ...rawLayout,
     direction: layoutDirection,
     groups: rawLayout.groups.map(group => {
-      const groupDirection = normalizeLayoutDirection(group?.direction);
+      const groupDirection = normalizeGroupDirection(group, layoutDirection);
       return {
         ...group,
-        ...(groupDirection !== undefined && {
-          direction: groupDirection
-        }),
+        direction: groupDirection,
         tabs: Array.isArray(group?.tabs) ? group.tabs.map(normalizeRestoredTab) : []
       };
     })
@@ -5513,9 +5582,12 @@ const tryRestoreLayout = savedState => {
 };
 
 const createViewlets = async (layout, viewletModuleIds, bounds) => {
+  const {
+    groups
+  } = layout;
   const editorUids = {};
   const titles = {};
-  for (const group of layout.groups) {
+  for (const group of groups) {
     const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
     if (activeTab && viewletModuleIds[activeTab.id]) {
       const editorUid = activeTab.editorUid === -1 ? create$2() : activeTab.editorUid;
@@ -5533,8 +5605,11 @@ const createViewlets = async (layout, viewletModuleIds, bounds) => {
 };
 
 const getViewletModuleIds = async layout => {
+  const {
+    groups
+  } = layout;
   const viewletModuleIds = {};
-  for (const group of layout.groups) {
+  for (const group of groups) {
     const {
       tabs
     } = group;
@@ -6121,17 +6196,25 @@ const getDragOverlayCss = dragOverlay => {
     y
   } = dragOverlay;
   return [`.DragOverlay {
-  left: ${x}px;
-  top: ${y}px;
-  width: ${width}px;
-  height: ${height}px;
+  --DragOverlayLeft: ${x}px;
+  --DragOverlayTop: ${y}px;
+  --DragOverlayWidth: ${width}px;
+  --DragOverlayHeight: ${height}px;
 }`];
 };
 
+const getEditorGroupClassName = groupId => {
+  return `EditorGroup-${groupId}`;
+};
+
 const getEditorGroupCss = layout => {
-  const groupSizeVariable = layout.direction === Vertical ? '--EditorGroupHeight' : '--EditorGroupWidth';
-  return layout.groups.map(group => {
-    return `.EditorGroup[data-groupId="${group.id}"] {
+  const {
+    direction,
+    groups
+  } = layout;
+  const groupSizeVariable = direction === Vertical ? '--EditorGroupHeight' : '--EditorGroupWidth';
+  return groups.map(group => {
+    return `.${getEditorGroupClassName(group.id)} {
   ${groupSizeVariable}: ${group.size}%;
 }`;
   });
@@ -6173,7 +6256,11 @@ const renderSashCss = ({
 }`;
 };
 const getProtoSashCss = (layout, width) => {
-  const segments = getGroupSegments(layout.groups, layout.direction);
+  const {
+    direction,
+    groups
+  } = layout;
+  const segments = getGroupSegments(groups, direction);
   const hasNestedSegments = segments.some(segment => segment.direction !== undefined);
   const rules = [];
   let segmentOffset = 0;
@@ -6182,9 +6269,9 @@ const getProtoSashCss = (layout, width) => {
     const beforeGroupId = segments[i - 1].groups.at(-1)?.id || 0;
     const afterGroupId = segments[i].groups[0].id;
     const sashId = create(beforeGroupId, afterGroupId);
-    const value = hasNestedSegments || layout.direction !== Horizontal || !width ? `${segmentOffset}%` : getSashOffset(layout, i, width);
+    const value = hasNestedSegments || direction !== Horizontal || !width ? `${segmentOffset}%` : getSashOffset(layout, i, width);
     rules.push({
-      property: toSashProperty(layout.direction),
+      property: toSashProperty(direction),
       sashId,
       value
     });
@@ -6211,58 +6298,17 @@ const getProtoSashCss = (layout, width) => {
   return rules;
 };
 const getSashCss = (layout, width = 0) => {
-  if (layout.groups.length <= 1) {
+  const {
+    groups
+  } = layout;
+  if (groups.length <= 1) {
     return [];
   }
   return getProtoSashCss(layout, width).map(renderSashCss);
 };
 
 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 {
-  width: 100%;
-  height: 1px;
-}`, `.SashBorderVertical {
-  width: 1px;
-  height: 100%;
-}`, `.SashCorner {
-  position: absolute;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 12px;
-  height: 12px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: all-scroll;
-  transform: translate(-50%, -50%);
-}`, `.SashCorner::after {
-  content: '';
-  width: 4px;
-  height: 4px;
-  background: var(--SashBorder, gray);
-}`, `.SashCorner:hover::after,
-.SashCorner:active::after {
-  background: var(--SashHoverBorder, #3d5252);
-}`, `.EditorGroup {
-  min-width: 250px;
-  width: var(--EditorGroupWidth, auto);
-  /*height: var(--EditorGroupHeight, auto);*/
-}`];
+  const rules = [];
   if (layout) {
     rules.push(...getEditorGroupCss(layout), ...getDragOverlayCss(dragOverlay), ...getSashCss(layout, width));
     const sashCorner = getSashCorner(layout);
@@ -6893,7 +6939,7 @@ const renderEmptyEditorGroup = (group, groupIndex, style, closeButtonEnabled = t
   const closeButtonDom = closeButtonEnabled ? renderEmptyGroupCloseButton(group) : [];
   return [{
     childCount: closeButtonEnabled ? 2 : 1,
-    className: EditorGroupEmpty,
+    className: mergeClassNames(EditorGroupEmpty, getEditorGroupClassName(group.id)),
     'data-groupId': String(group.id),
     onContextMenu: HandleContextMenu,
     style,
@@ -6917,7 +6963,7 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizePr
   }
   return [{
     childCount: 2,
-    className: EditorGroup,
+    className: mergeClassNames(EditorGroup, getEditorGroupClassName(group.id)),
     'data-groupId': String(group.id),
     style,
     type: Div
@@ -6966,7 +7012,10 @@ const mainNode$1 = {
   type: Div
 };
 const renderSingleEditorGroup = (layout, splitButtonEnabled, sizeProperty = 'width') => {
-  return [mainNode$1, ...renderEditorGroup(layout.groups[0], 0, splitButtonEnabled, sizeProperty, false)];
+  const {
+    groups
+  } = layout;
+  return [mainNode$1, ...renderEditorGroup(groups[0], 0, splitButtonEnabled, sizeProperty, false)];
 };
 
 const getDirectionClassName = (direction, isSplit) => {
@@ -6991,10 +7040,10 @@ const addDragOverlay = (dom, dragOverlay) => {
   if (!dragOverlay) {
     return dom;
   }
-  return [dom[0], {
-    ...dom[1],
-    childCount: dom[1].childCount + 1
-  }, ...dom.slice(2), getDragOverlayVirtualDom()];
+  return [{
+    ...dom[0],
+    childCount: dom[0].childCount + 1
+  }, dom[1], ...dom.slice(2), getDragOverlayVirtualDom()];
 };
 const getSizeProperty = direction => {
   return direction === Vertical ? 'height' : 'width';
@@ -7106,10 +7155,21 @@ const renderItems = (oldState, newState) => {
   return [SetDom2, uid, dom];
 };
 
+const avoidRootReplacement = patches => {
+  if (patches.length !== 1 || patches[0].type !== Add$1 || patches[0].nodes?.length !== 1 || patches[0].nodes[0].className !== DragOverlay) {
+    return patches;
+  }
+  return [{
+    index: 0,
+    type: NavigateChild$1
+  }, {
+    type: NavigateParent$1
+  }, ...patches];
+};
 const renderIncremental = (oldState, newState) => {
   const oldDom = renderItems(oldState, oldState)[2];
   const newDom = renderItems(newState, newState)[2];
-  const patches = diffTree(oldDom, newDom);
+  const patches = avoidRootReplacement(diffTree(oldDom, newDom));
   return [SetPatches, newState.uid, patches];
 };
 
@@ -7416,7 +7476,10 @@ const saveState = state => {
   const {
     layout
   } = state;
-  const filteredGroups = getFilteredGroups(layout.groups);
+  const {
+    groups
+  } = layout;
+  const filteredGroups = getFilteredGroups(groups);
 
   // Update activeGroupId if it points to a removed group
   const {
@@ -7435,9 +7498,10 @@ const saveState = state => {
 const flipDirection = direction => {
   return direction === Horizontal ? Vertical : Horizontal;
 };
-const createEmptyGroup = () => {
+const createEmptyGroup = direction => {
   return {
     activeTabId: undefined,
+    direction,
     focused: false,
     id: create$2(),
     isEmpty: true,
@@ -7468,9 +7532,9 @@ const mergeGroups = (target, groups, activeGroupId) => {
     tabs
   };
 };
-const getGroupsForSlotCount = (groups, slotCount, activeGroupId) => {
+const getGroupsForSlotCount = (groups, slotCount, activeGroupId, direction) => {
   if (slotCount === 1) {
-    const firstGroup = groups[0] ?? createEmptyGroup();
+    const firstGroup = groups[0] ?? createEmptyGroup(direction);
     return [mergeGroups(firstGroup, groups.slice(1), activeGroupId)];
   }
   if (groups.length === slotCount) {
@@ -7479,7 +7543,7 @@ const getGroupsForSlotCount = (groups, slotCount, activeGroupId) => {
   if (groups.length < slotCount) {
     const missingGroups = Array.from({
       length: slotCount - groups.length
-    }, createEmptyGroup);
+    }, () => createEmptyGroup(direction));
     return [...groups, ...missingGroups];
   }
   const retainedGroups = groups.slice(0, slotCount);
@@ -7494,9 +7558,13 @@ const setEditorLayout = (state, direction, slots) => {
   const {
     layout
   } = state;
-  const groups = getGroupsForSlotCount(layout.groups, slots.length, layout.activeGroupId);
-  const originalActiveIndex = layout.groups.findIndex(group => group.id === layout.activeGroupId);
-  const activeIndex = originalActiveIndex >= slots.length ? slots.length - 1 : getActiveGroupIndex(groups, layout.activeGroupId);
+  const {
+    activeGroupId,
+    groups: currentGroups
+  } = layout;
+  const groups = getGroupsForSlotCount(currentGroups, slots.length, activeGroupId, direction);
+  const originalActiveIndex = currentGroups.findIndex(group => group.id === activeGroupId);
+  const activeIndex = originalActiveIndex >= slots.length ? slots.length - 1 : getActiveGroupIndex(groups, activeGroupId);
   const nextGroups = groups.map((group, index) => {
     const slot = slots[index];
     const focused = index === activeIndex;
@@ -7521,52 +7589,67 @@ const flipLayout = state => {
   const {
     layout
   } = state;
+  const {
+    direction,
+    groups
+  } = layout;
   return {
     ...state,
     layout: {
       ...layout,
-      direction: flipDirection(layout.direction),
-      groups: layout.groups.map(group => ({
+      direction: flipDirection(direction),
+      groups: groups.map(group => ({
         ...group,
-        direction: group.direction === undefined ? undefined : flipDirection(group.direction)
+        direction: flipDirection(group.direction)
       }))
     }
   };
 };
 const setEditorLayoutSingle = state => {
   return setEditorLayout(state, Horizontal, [{
+    direction: Horizontal,
     size: 100
   }]);
 };
 const setEditorLayoutTwoColumns = state => {
   return setEditorLayout(state, Horizontal, [{
+    direction: Horizontal,
     size: 50
   }, {
+    direction: Horizontal,
     size: 50
   }]);
 };
 const setEditorLayoutThreeColumns = state => {
   return setEditorLayout(state, Horizontal, [{
+    direction: Horizontal,
     size: 33.333333
   }, {
+    direction: Horizontal,
     size: 33.333333
   }, {
+    direction: Horizontal,
     size: 33.333334
   }]);
 };
 const setEditorLayoutTwoRows = state => {
   return setEditorLayout(state, Vertical, [{
+    direction: Vertical,
     size: 50
   }, {
+    direction: Vertical,
     size: 50
   }]);
 };
 const setEditorLayoutThreeRows = state => {
   return setEditorLayout(state, Vertical, [{
+    direction: Vertical,
     size: 33.333333
   }, {
+    direction: Vertical,
     size: 33.333333
   }, {
+    direction: Vertical,
     size: 33.333334
   }]);
 };
@@ -7594,6 +7677,7 @@ const setEditorLayoutGrid = state => {
 const setEditorLayoutTwoRowsRight = state => {
   const segmentId = create$2();
   return setEditorLayout(state, Horizontal, [{
+    direction: Horizontal,
     size: 50
   }, {
     direction: Vertical,
@@ -7608,6 +7692,7 @@ const setEditorLayoutTwoRowsRight = state => {
 const setEditorLayoutTwoColumnsBottom = state => {
   const segmentId = create$2();
   return setEditorLayout(state, Vertical, [{
+    direction: Vertical,
     size: 50
   }, {
     direction: Horizontal,
@@ -7625,6 +7710,8 @@ const splitDown = (state, groupId) => {
     layout
   } = state;
   const {
+    activeGroupId,
+    direction,
     groups
   } = layout;
 
@@ -7633,6 +7720,7 @@ const splitDown = (state, groupId) => {
     const initialGroupId = create$2();
     const initialGroup = {
       activeTabId: undefined,
+      direction,
       focused: true,
       id: initialGroupId,
       isEmpty: true,
@@ -7649,7 +7737,7 @@ const splitDown = (state, groupId) => {
     };
     return splitEditorGroup$1(stateWithInitialGroup, initialGroupId, 'down');
   }
-  const resolvedGroupId = groupId ?? layout.activeGroupId;
+  const resolvedGroupId = groupId ?? activeGroupId;
   if (!resolvedGroupId) {
     return state;
   }
@@ -7662,12 +7750,14 @@ const splitLeft = (state, groupId) => {
   } = state;
   const {
     activeGroupId,
+    direction,
     groups
   } = layout;
   if (groups.length === 0) {
     const initialGroupId = create$2();
     const initialGroup = {
       activeTabId: undefined,
+      direction,
       focused: true,
       id: initialGroupId,
       isEmpty: true,
@@ -7694,6 +7784,7 @@ const splitRight = (state, groupId) => {
   } = state;
   const {
     activeGroupId,
+    direction,
     groups
   } = layout;
 
@@ -7702,6 +7793,7 @@ const splitRight = (state, groupId) => {
     const initialGroupId = create$2();
     const initialGroup = {
       activeTabId: undefined,
+      direction,
       focused: true,
       id: initialGroupId,
       isEmpty: true,
@@ -7727,12 +7819,15 @@ const splitUp = (state, groupId) => {
     layout
   } = state;
   const {
+    activeGroupId,
+    direction,
     groups
   } = layout;
   if (groups.length === 0) {
     const initialGroupId = create$2();
     const initialGroup = {
       activeTabId: undefined,
+      direction,
       focused: true,
       id: initialGroupId,
       isEmpty: true,
@@ -7749,7 +7844,7 @@ const splitUp = (state, groupId) => {
     };
     return splitEditorGroup$1(stateWithInitialGroup, initialGroupId, 'up');
   }
-  const resolvedGroupId = groupId ?? layout.activeGroupId;
+  const resolvedGroupId = groupId ?? activeGroupId;
   if (!resolvedGroupId) {
     return state;
   }

package/package.json

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