@lvce-editor/main-area-worker 9.55.2 → 9.56.0

package/dist/mainAreaWorkerMain.js

@@ -1384,175 +1384,15 @@ const Tab$1 = 'tab';
 const TabList = 'tablist';
 const ToolBar = 'toolbar';
 
-const Audio = 0;
 const Button$2 = 1;
-const Col = 2;
-const ColGroup = 3;
 const Div = 4;
-const H1 = 5;
-const Input = 6;
-const Kbd = 7;
 const Span = 8;
-const Table = 9;
-const TBody = 10;
-const Td = 11;
 const Text = 12;
-const Th = 13;
-const THead = 14;
-const Tr = 15;
-const I = 16;
 const Img = 17;
-const Root = 0;
-const Ins = 20;
-const Del = 21;
-const H2 = 22;
-const H3 = 23;
-const H4 = 24;
-const H5 = 25;
-const H6 = 26;
-const Article = 27;
-const Aside = 28;
-const Footer = 29;
-const Header = 30;
-const Nav = 40;
-const Section = 41;
-const Search = 42;
-const Dd = 43;
-const Dl = 44;
-const Figcaption = 45;
-const Figure = 46;
-const Hr = 47;
-const Li = 48;
-const Ol = 49;
 const P = 50;
 const Pre = 51;
-const A = 53;
-const Abbr = 54;
-const Br = 55;
-const Cite = 56;
-const Data = 57;
-const Time = 58;
-const Tfoot = 59;
-const Ul = 60;
-const Video = 61;
-const TextArea = 62;
-const Select = 63;
-const Option = 64;
-const Code = 65;
-const Label = 66;
-const Dt = 67;
-const Iframe = 68;
-const Main$2 = 69;
-const Strong = 70;
-const Em = 71;
-const Style = 72;
-const Html = 73;
-const Head = 74;
-const Title = 75;
-const Meta = 76;
-const Canvas = 77;
-const Form = 78;
-const BlockQuote = 79;
-const Quote = 80;
-const Circle = 81;
-const Defs = 82;
-const Ellipse = 83;
-const G = 84;
-const Line = 85;
-const Path = 86;
-const Polygon = 87;
-const Polyline = 88;
-const Rect = 89;
-const Svg = 90;
-const Use = 91;
 const Reference = 100;
 
-const VirtualDomElements = {
-  __proto__: null,
-  A,
-  Abbr,
-  Article,
-  Aside,
-  Audio,
-  BlockQuote,
-  Br,
-  Button: Button$2,
-  Canvas,
-  Circle,
-  Cite,
-  Code,
-  Col,
-  ColGroup,
-  Data,
-  Dd,
-  Defs,
-  Del,
-  Div,
-  Dl,
-  Dt,
-  Ellipse,
-  Em,
-  Figcaption,
-  Figure,
-  Footer,
-  Form,
-  G,
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  Head,
-  Header,
-  Hr,
-  Html,
-  I,
-  Iframe,
-  Img,
-  Input,
-  Ins,
-  Kbd,
-  Label,
-  Li,
-  Line,
-  Main: Main$2,
-  Meta,
-  Nav,
-  Ol,
-  Option,
-  P,
-  Path,
-  Polygon,
-  Polyline,
-  Pre,
-  Quote,
-  Rect,
-  Reference,
-  Root,
-  Search,
-  Section,
-  Select,
-  Span,
-  Strong,
-  Style,
-  Svg,
-  TBody,
-  THead,
-  Table,
-  Td,
-  Text,
-  TextArea,
-  Tfoot,
-  Th,
-  Time,
-  Title,
-  Tr,
-  Ul,
-  Use,
-  Video
-};
-
 const Button$1 = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
@@ -2726,7 +2566,7 @@ const isEqual$1 = (oldState, newState) => {
 };
 
 const isEqual = (oldState, newState) => {
-  return oldState.dragOverlay === newState.dragOverlay && oldState.layout === newState.layout;
+  return oldState.dragOverlay === newState.dragOverlay && oldState.layout === newState.layout && oldState.tabDropIndicator === newState.tabDropIndicator;
 };
 
 const RenderItems = 4;
@@ -2810,6 +2650,7 @@ const focus = async state => {
     return state;
   }
   if (isConnected()) {
+    await invoke('Viewlet.focusSelector', editorUid, '[name="editor"]');
     await invoke('Viewlet.focusSelectorAfterRender', editorUid, '[name="editor"]');
   } else {
     await invoke$1('Viewlet.focusSelector', editorUid, '[name="editor"]');
@@ -3458,6 +3299,10 @@ const getActiveEditorUid = state => {
   return editorUid;
 };
 
+const getComponentState = uid => {
+  return get(uid).newState;
+};
+
 const getMenuIds = () => {
   return [Main$1, Tab];
 };
@@ -4824,14 +4669,16 @@ const handleDoubleClick = (state, groupIndexRaw, indexRaw) => {
 
 const handleDragLeave = state => {
   const {
-    dragOverlay
+    dragOverlay,
+    tabDropIndicator
   } = state;
-  if (!dragOverlay) {
+  if (!dragOverlay && !tabDropIndicator) {
     return state;
   }
   return {
     ...state,
-    dragOverlay: undefined
+    dragOverlay: undefined,
+    tabDropIndicator: undefined
   };
 };
 
@@ -4956,32 +4803,93 @@ const isDragOverlayEqual = (oldOverlay, newOverlay) => {
   return oldOverlay?.x === newOverlay?.x && oldOverlay?.y === newOverlay?.y && oldOverlay?.width === newOverlay?.width && oldOverlay?.height === newOverlay?.height && oldOverlay?.splitDirection === newOverlay?.splitDirection && oldOverlay?.targetGroupId === newOverlay?.targetGroupId;
 };
 
-const handleDragOver = (state, eventX, eventY) => {
+const handleEditorDragOver = (state, eventX, eventY) => {
   const {
     dragOverlay: oldDragOverlay
   } = state;
   const dragOverlay = getDragOverlay(state, eventX, eventY);
-  if (isDragOverlayEqual(oldDragOverlay, dragOverlay)) {
+  if (isDragOverlayEqual(oldDragOverlay, dragOverlay) && !state.tabDropIndicator) {
     return state;
   }
   return {
     ...state,
-    dragOverlay
+    dragOverlay,
+    tabDropIndicator: undefined
   };
 };
 
+const hasDraggedTab = state => {
+  const {
+    pointerDownGroupIndex,
+    pointerDownTabIndex
+  } = state;
+  return Boolean(state.layout.groups[pointerDownGroupIndex]?.tabs[pointerDownTabIndex]);
+};
+const withTabDropIndicator = (state, tabDropIndicator) => {
+  const oldIndicator = state.tabDropIndicator;
+  if (!state.dragOverlay && oldIndicator?.groupId === tabDropIndicator.groupId && oldIndicator.index === tabDropIndicator.index) {
+    return state;
+  }
+  return {
+    ...state,
+    dragOverlay: undefined,
+    tabDropIndicator
+  };
+};
+const handleTabDragOver = (state, groupIndexRaw, tabIndexRaw, tabOffsetLeft, tabWidth, tabsScrollLeft, clientX, clientY) => {
+  if (!hasDraggedTab(state)) {
+    return handleEditorDragOver(state, clientX, clientY);
+  }
+  const groupIndex = Number.parseInt(groupIndexRaw);
+  const tabIndex = Number.parseInt(tabIndexRaw);
+  const group = state.layout.groups[groupIndex];
+  if (!group || tabIndex < 0 || tabIndex >= group.tabs.length) {
+    return state;
+  }
+  const groupBounds = getEditorGroupBounds(state.layout, state.width, state.height)[groupIndex];
+  const tabMidpoint = state.x + groupBounds.x + tabOffsetLeft - tabsScrollLeft + tabWidth / 2;
+  const index = clientX < tabMidpoint ? tabIndex : tabIndex + 1;
+  return withTabDropIndicator(state, {
+    groupId: group.id,
+    index
+  });
+};
+const handleTabsDragOver = (state, groupIndexRaw, clientX, clientY) => {
+  if (!hasDraggedTab(state)) {
+    return handleEditorDragOver(state, clientX, clientY);
+  }
+  const groupIndex = Number.parseInt(groupIndexRaw);
+  const group = state.layout.groups[groupIndex];
+  if (!group) {
+    return state;
+  }
+  return withTabDropIndicator(state, {
+    groupId: group.id,
+    index: group.tabs.length
+  });
+};
+
+const handleDragOver = (state, eventX, eventY, groupIndexRaw, tabIndexRaw, tabOffsetLeft, tabWidth, tabsScrollLeft) => {
+  if (groupIndexRaw !== undefined && tabIndexRaw !== undefined && tabOffsetLeft !== undefined && tabWidth !== undefined && tabsScrollLeft !== undefined) {
+    return handleTabDragOver(state, groupIndexRaw, tabIndexRaw, tabOffsetLeft, tabWidth, tabsScrollLeft, eventX, eventY);
+  }
+  return handleEditorDragOver(state, eventX, eventY);
+};
+
 const handleDragStart = state => {
   return state;
 };
 
 const resetPointerDown = state => {
-  if (state.pointerDownGroupIndex === -1 && state.pointerDownTabIndex === -1) {
+  if (state.pointerDownGroupIndex === -1 && state.pointerDownTabIndex === -1 && !state.dragOverlay && !state.tabDropIndicator) {
     return state;
   }
   return {
     ...state,
+    dragOverlay: undefined,
     pointerDownGroupIndex: -1,
-    pointerDownTabIndex: -1
+    pointerDownTabIndex: -1,
+    tabDropIndicator: undefined
   };
 };
 
@@ -5186,13 +5094,37 @@ const moveTabToGroup = (state, sourceGroupId, targetGroupId, tabId, targetIndex)
   } = layout;
   const sourceGroup = groups.find(group => group.id === sourceGroupId);
   const hasTargetGroup = groups.some(group => group.id === targetGroupId);
-  if (!sourceGroup || !hasTargetGroup || sourceGroupId === targetGroupId) {
+  if (!sourceGroup || !hasTargetGroup) {
     return state;
   }
   const tabToMove = sourceGroup.tabs.find(tab => tab.id === tabId);
   if (!tabToMove) {
     return state;
   }
+  if (sourceGroupId === targetGroupId) {
+    if (targetIndex === undefined) {
+      return state;
+    }
+    const sourceIndex = sourceGroup.tabs.findIndex(tab => tab.id === tabId);
+    const insertionBoundary = Math.min(Math.max(targetIndex, 0), sourceGroup.tabs.length);
+    const insertionIndex = insertionBoundary > sourceIndex ? insertionBoundary - 1 : insertionBoundary;
+    if (insertionIndex === sourceIndex) {
+      return state;
+    }
+    const tabs = sourceGroup.tabs.filter(tab => tab.id !== tabId);
+    tabs.splice(insertionIndex, 0, tabToMove);
+    return {
+      ...state,
+      layout: {
+        ...layout,
+        activeGroupId: targetGroupId,
+        groups: groups.map(group => group.id === targetGroupId ? {
+          ...group,
+          tabs
+        } : group)
+      }
+    };
+  }
   const updatedGroups = groups.map(group => {
     if (group.id === sourceGroupId) {
       const newTabs = group.tabs.filter(tab => tab.id !== tabId);
@@ -5213,7 +5145,7 @@ const moveTabToGroup = (state, sourceGroupId, targetGroupId, tabId, targetIndex)
       };
     }
     if (group.id === targetGroupId) {
-      const insertIndex = group.tabs.length ;
+      const insertIndex = targetIndex === undefined ? group.tabs.length : Math.min(Math.max(targetIndex, 0), group.tabs.length);
       const newTabs = [...group.tabs];
       newTabs.splice(insertIndex, 0, tabToMove);
       return {
@@ -5238,12 +5170,12 @@ const moveTabToGroup = (state, sourceGroupId, targetGroupId, tabId, targetIndex)
 const getOpenTabCount = state => {
   return state.layout.groups.reduce((count, group) => count + group.tabs.length, 0);
 };
-const applyTabDrop = (state, sourceGroupId, tabId, splitDirection, targetGroupId) => {
+const applyTabDrop = (state, sourceGroupId, tabId, splitDirection, targetGroupId, targetIndex) => {
   if (targetGroupId === undefined) {
     return state;
   }
   if (splitDirection === None) {
-    return moveTabToGroup(state, sourceGroupId, targetGroupId, tabId);
+    return moveTabToGroup(state, sourceGroupId, targetGroupId, tabId, targetIndex);
   }
   if (getOpenTabCount(state) === 1) {
     return state;
@@ -5291,6 +5223,9 @@ const handleDrop = async (context, dropId) => {
     splitDirection = None,
     targetGroupId
   } = initialState.dragOverlay ?? {};
+  const {
+    tabDropIndicator
+  } = initialState;
   await context.updateState(handleDragLeave);
   const {
     platform
@@ -5298,7 +5233,9 @@ const handleDrop = async (context, dropId) => {
   const isElectron = platform === Electron;
   const uris = await getDroppedUrisByDropId(dropId, isElectron);
   if (draggedTab?.uri && uris.length === 1 && normalizeUri(uris[0]) === normalizeUri(draggedTab.uri)) {
-    await context.updateState(state => resetPointerDown(applyTabDrop(state, sourceGroup.id, draggedTab.id, splitDirection, targetGroupId)));
+    const tabTargetGroupId = tabDropIndicator?.groupId ?? targetGroupId;
+    const tabTargetIndex = tabDropIndicator?.index;
+    await context.updateState(state => resetPointerDown(applyTabDrop(state, sourceGroup.id, draggedTab.id, splitDirection, tabTargetGroupId, tabTargetIndex)));
     return;
   }
   const actions = await getDropAction(uris);
@@ -7089,8 +7026,6 @@ const text = data => {
   };
 };
 
-new Set(Object.values(VirtualDomElements));
-
 const SetText = 1;
 const Replace = 2;
 const SetAttribute = 3;
@@ -7101,6 +7036,7 @@ const NavigateParent = 8;
 const RemoveChild = 9;
 const NavigateSibling = 10;
 const SetReferenceNodeUid = 11;
+const MultiNavigation = 18;
 
 const isKey = key => {
   return key !== 'type' && key !== 'childCount';
@@ -7161,6 +7097,55 @@ const getChildrenWithCount = (nodes, startIndex, childCount) => {
   };
 };
 
+const isNavigationPatch = patch => {
+  switch (patch.type) {
+    case NavigateChild:
+    case NavigateParent:
+    case NavigateSibling:
+      return true;
+    default:
+      return false;
+  }
+};
+const getNavigationIndex = patch => {
+  switch (patch.type) {
+    case NavigateChild:
+    case NavigateSibling:
+      return patch.index;
+    default:
+      return 0;
+  }
+};
+const appendNavigationPatch = (patches, type, index) => {
+  const previousPatch = patches.at(-1);
+  if (!previousPatch) {
+    patches.push(type === NavigateParent ? {
+      type
+    } : {
+      index,
+      type
+    });
+    return;
+  }
+  if (previousPatch.type === MultiNavigation) {
+    previousPatch.navigations.push(type, index);
+    return;
+  }
+  if (isNavigationPatch(previousPatch)) {
+    patches[patches.length - 1] = {
+      navigations: [previousPatch.type, getNavigationIndex(previousPatch), type, index],
+      type: MultiNavigation
+    };
+    return;
+  }
+  patches.push(type === NavigateParent ? {
+    type
+  } : {
+    index,
+    type
+  });
+};
+
 const compareNodes = (oldNode, newNode) => {
   // Check if node type changed - return null to signal incompatible nodes
   // (caller should handle this with a Replace operation)
@@ -7225,25 +7210,17 @@ const treeToArray = node => {
 
 const navigateToChild = (patches, currentChildIndex, index) => {
   if (currentChildIndex === -1) {
-    patches.push({
-      type: NavigateChild,
-      index
-    });
+    appendNavigationPatch(patches, NavigateChild, index);
     return index;
   }
   if (currentChildIndex !== index) {
-    patches.push({
-      type: NavigateSibling,
-      index
-    });
+    appendNavigationPatch(patches, NavigateSibling, index);
   }
   return index;
 };
 const navigateToParent = (patches, currentChildIndex) => {
   if (currentChildIndex >= 0) {
-    patches.push({
-      type: NavigateParent
-    });
+    appendNavigationPatch(patches, NavigateParent, 0);
   }
   return -1;
 };
@@ -7259,6 +7236,29 @@ const replaceTree = (newNode, patches) => {
     nodes: treeToArray(newNode)
   });
 };
+const appendPatch = (patches, patch) => {
+  switch (patch.type) {
+    case MultiNavigation:
+      for (let i = 0; i < patch.navigations.length; i += 2) {
+        appendNavigationPatch(patches, patch.navigations[i], patch.navigations[i + 1]);
+      }
+      return;
+    case NavigateChild:
+    case NavigateSibling:
+      appendNavigationPatch(patches, patch.type, patch.index);
+      return;
+    case NavigateParent:
+      appendNavigationPatch(patches, patch.type, 0);
+      return;
+    default:
+      patches.push(patch);
+  }
+};
+const appendPatches = (patches, newPatches) => {
+  for (const patch of newPatches) {
+    appendPatch(patches, patch);
+  }
+};
 const diffExistingChild = (oldNode, newNode, patches, currentChildIndex, index) => {
   const nodePatches = compareNodes(oldNode.node, newNode.node);
   if (nodePatches === null) {
@@ -7267,16 +7267,16 @@ const diffExistingChild = (oldNode, newNode, patches, currentChildIndex, index)
     return nextChildIndex;
   }
   const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
-  if (nodePatches.length === 0 && !hasChildrenToCompare) {
+  const childPatches = [];
+  if (hasChildrenToCompare) {
+    diffChildren(oldNode.children, newNode.children, childPatches);
+  }
+  if (nodePatches.length === 0 && childPatches.length === 0) {
     return currentChildIndex;
   }
   const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
-  if (nodePatches.length > 0) {
-    patches.push(...nodePatches);
-  }
-  if (hasChildrenToCompare) {
-    diffChildren(oldNode.children, newNode.children, patches);
-  }
+  patches.push(...nodePatches);
+  appendPatches(patches, childPatches);
   return nextChildIndex;
 };
 const diffRootNode = (oldNode, newNode, patches) => {
@@ -7332,7 +7332,7 @@ const diffTrees = (oldTree, newTree, patches, path) => {
 const removeTrailingNavigationPatches = patches => {
   while (patches.length > 0) {
     const patch = patches.at(-1);
-    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling && patch.type !== MultiNavigation) {
       break;
     }
     patches.pop();
@@ -7373,6 +7373,8 @@ const HandleDragEnd = 27;
 const HandleTabMouseUp = 28;
 const HandleTabKeyDown = 29;
 const HandleTabsWheel = 30;
+const HandleTabDragOver = 31;
+const HandleTabsDragOver = 32;
 
 const dragOverlayVirtualDom = {
   childCount: 0,
@@ -7581,7 +7583,16 @@ const renderTabIcon = tab => {
     type: Img
   }];
 };
-const renderTab = (tab, isActive, tabIndex, groupIndex) => {
+const getDropIndicatorStyle = dropIndicatorPosition => {
+  if (dropIndicatorPosition === 'before') {
+    return 'box-shadow:inset 2px 0 0 white;';
+  }
+  if (dropIndicatorPosition === 'after') {
+    return 'box-shadow:inset -2px 0 0 white;';
+  }
+  return undefined;
+};
+const renderTab = (tab, isActive, tabIndex, groupIndex, dropIndicatorPosition) => {
   const closeButtonNodes = renderTabActions(tab.isDirty, tabIndex, groupIndex);
   const tabIconNodes = renderTabIcon(tab);
   let className = MainTab;
@@ -7604,26 +7615,43 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
     onContextMenu: HandleTabContextMenu,
     onDblClick: HandleDoubleClick,
     onDragEnd: HandleDragEnd,
+    onDragOver: HandleTabDragOver,
     onDragStart: HandleDragStart,
     onKeyDown: HandleTabKeyDown,
     onMouseDown: HandleClickTab,
     onMouseUp: HandleTabMouseUp,
     role: Tab$1,
+    ...(dropIndicatorPosition && {
+      style: getDropIndicatorStyle(dropIndicatorPosition)
+    }),
     tabIndex: isActive ? 0 : -1,
     title: tab.uriTitle || tab.uri || tab.title,
     type: Div
   }, ...tabIconNodes, tabTitleNode, text(tab.title), ...closeButtonNodes];
 };
 
-const getTabsVirtualDom = (group, groupIndex, tabsChildCount) => {
+const getDropIndicatorPosition = (group, tabIndex, tabDropIndicator) => {
+  if (tabDropIndicator?.groupId !== group.id) {
+    return undefined;
+  }
+  if (tabDropIndicator.index === tabIndex) {
+    return 'before';
+  }
+  if (tabDropIndicator.index === group.tabs.length && tabIndex === group.tabs.length - 1) {
+    return 'after';
+  }
+  return undefined;
+};
+const getTabsVirtualDom = (group, groupIndex, tabsChildCount, tabDropIndicator) => {
   return [{
     childCount: tabsChildCount,
     className: MainTabs,
     'data-groupIndex': groupIndex,
+    onDragOver: HandleTabsDragOver,
     onWheel: HandleTabsWheel,
     role: TabList,
     type: Div
-  }, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex))];
+  }, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex, getDropIndicatorPosition(group, tabIndex, tabDropIndicator)))];
 };
 
 const isHtmlFile = tab => {
@@ -7679,7 +7707,7 @@ const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
   }, ...buttons];
 };
 
-const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled) => {
+const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled, tabDropIndicator) => {
   const tabsChildCount = group.tabs.length;
   const actions = renderEditorGroupActions(group, groupIndex, splitButtonEnabled);
   const hasActions = actions.length > 0;
@@ -7689,7 +7717,7 @@ const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled) => {
     onDblClick: HandleHeaderDoubleClick,
     role: None$2,
     type: Div
-  }, ...getTabsVirtualDom(group, groupIndex, tabsChildCount), ...actions];
+  }, ...getTabsVirtualDom(group, groupIndex, tabsChildCount, tabDropIndicator), ...actions];
 };
 
 const emptyHeader = {
@@ -7748,7 +7776,7 @@ const editorContainerNode = {
   className: EditorContainer,
   type: Div
 };
-const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizeProperty = 'width', closeButtonEnabled = true) => {
+const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizeProperty = 'width', closeButtonEnabled = true, tabDropIndicator) => {
   const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
   const style = `${sizeProperty}:${group.size}%;`;
   const hasTabs = group.tabs.length > 0;
@@ -7762,7 +7790,7 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizePr
     'data-groupId': String(group.id),
     style,
     type: Div
-  }, ...renderEditorGroupHeader(group, groupIndex, splitButtonEnabled), editorContainerNode, ...renderEditor(activeTab)];
+  }, ...renderEditorGroupHeader(group, groupIndex, splitButtonEnabled, tabDropIndicator), editorContainerNode, ...renderEditor(activeTab)];
 };
 
 const classVertical = 'Sash SashVertical';
@@ -7808,11 +7836,11 @@ const mainNode$1 = {
   onDrop: HandleDrop,
   type: Div
 };
-const renderSingleEditorGroup = (layout, splitButtonEnabled, sizeProperty = 'width') => {
+const renderSingleEditorGroup = (layout, splitButtonEnabled, sizeProperty = 'width', tabDropIndicator) => {
   const {
     groups
   } = layout;
-  return [mainNode$1, ...renderEditorGroup(groups[0], 0, splitButtonEnabled, sizeProperty, false)];
+  return [mainNode$1, ...renderEditorGroup(groups[0], 0, splitButtonEnabled, sizeProperty, false, tabDropIndicator)];
 };
 
 const getDirectionClassName = (direction, isSplit) => {
@@ -7845,7 +7873,7 @@ const addDragOverlay = (dom, dragOverlay) => {
 const getSizeProperty = direction => {
   return direction === Vertical ? 'height' : 'width';
 };
-const renderSegmentChildren = (direction, groups, splitButtonEnabled) => {
+const renderSegmentChildren = (direction, groups, splitButtonEnabled, tabDropIndicator) => {
   const segments = getGroupSegments(groups, direction);
   const children = [];
   let childCount = 0;
@@ -7861,7 +7889,7 @@ const renderSegmentChildren = (direction, groups, splitButtonEnabled) => {
       childCount++;
     }
     if (segment.direction === undefined) {
-      children.push(...renderEditorGroup(segment.groups[0], segment.startIndex, splitButtonEnabled, sizeProperty));
+      children.push(...renderEditorGroup(segment.groups[0], segment.startIndex, splitButtonEnabled, sizeProperty, true, tabDropIndicator));
       childCount++;
       continue;
     }
@@ -7884,7 +7912,7 @@ const renderSegmentChildren = (direction, groups, splitButtonEnabled) => {
       nestedChildren.push(...renderEditorGroup({
         ...group,
         size: normalizedSize
-      }, segment.startIndex + j, splitButtonEnabled, nestedSizeProperty));
+      }, segment.startIndex + j, splitButtonEnabled, nestedSizeProperty, true, tabDropIndicator));
       nestedCount++;
     }
     children.push({
@@ -7903,14 +7931,14 @@ const renderSegmentChildren = (direction, groups, splitButtonEnabled) => {
     children
   };
 };
-const getMainAreaVirtualDom = (layout, splitButtonEnabled = false, dragOverlay) => {
+const getMainAreaVirtualDom = (layout, splitButtonEnabled = false, dragOverlay, tabDropIndicator) => {
   const {
     direction,
     groups
   } = layout;
   const sizeProperty = getSizeProperty(direction);
   if (groups.length === 1) {
-    return addDragOverlay(renderSingleEditorGroup(layout, splitButtonEnabled, sizeProperty), dragOverlay);
+    return addDragOverlay(renderSingleEditorGroup(layout, splitButtonEnabled, sizeProperty, tabDropIndicator), dragOverlay);
   }
   const editorGroupsContainerClassName = getContainerClassName(direction, groups.length);
   if (groups.length === 0) {
@@ -7926,7 +7954,7 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false, dragOverlay)
   const {
     childCount,
     children
-  } = renderSegmentChildren(direction, groups, splitButtonEnabled);
+  } = renderSegmentChildren(direction, groups, splitButtonEnabled, tabDropIndicator);
   const sashCorner = getSashCorner(layout);
   const sashCornerChildren = sashCorner ? [renderSashCorner()] : [];
   return addDragOverlay([mainNode, {
@@ -7943,12 +7971,13 @@ const renderItems = (oldState, newState) => {
     initial,
     layout,
     splitButtonEnabled,
+    tabDropIndicator,
     uid
   } = newState;
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getMainAreaVirtualDom(layout, splitButtonEnabled, dragOverlay);
+  const dom = getMainAreaVirtualDom(layout, splitButtonEnabled, dragOverlay, tabDropIndicator);
   return [SetDom2, uid, dom];
 };
 
@@ -8046,6 +8075,16 @@ const renderEventListeners = () => {
   }, {
     name: HandleTabsWheel,
     params: ['handleTabsWheel', 'event.currentTarget.dataset.groupIndex', DeltaMode, DeltaY]
+  }, {
+    name: HandleTabDragOver,
+    params: ['handleTabDragOver', 'event.currentTarget.dataset.groupIndex', 'event.currentTarget.dataset.index', 'event.currentTarget.offsetLeft', 'event.currentTarget.offsetWidth', 'event.currentTarget.parentElement.scrollLeft', ClientX, ClientY],
+    preventDefault: true,
+    stopPropagation: true
+  }, {
+    name: HandleTabsDragOver,
+    params: ['handleTabsDragOver', 'event.currentTarget.dataset.groupIndex', ClientX, ClientY],
+    preventDefault: true,
+    stopPropagation: true
   }, {
     name: HandleDoubleClick,
     params: ['handleDoubleClick', 'event.target.dataset.groupIndex', 'event.target.dataset.index']
@@ -8322,6 +8361,31 @@ const saveState = state => {
   };
 };
 
+const applyComponentState = (currentState, state) => {
+  if (!state || typeof state !== 'object' || Array.isArray(state)) {
+    throw new TypeError('Main Area state must be an object');
+  }
+  const {
+    maxOpenEditorGroups,
+    maxOpenEditors,
+    uid
+  } = state;
+  const {
+    maxOpenEditorGroups: currentMaxOpenEditorGroups,
+    maxOpenEditors: currentMaxOpenEditors,
+    uid: currentUid
+  } = currentState;
+  if (uid !== currentUid) {
+    throw new Error(`Main Area state uid must remain ${currentUid}`);
+  }
+  return {
+    ...state,
+    maxOpenEditorGroups: maxOpenEditorGroups ?? currentMaxOpenEditorGroups,
+    maxOpenEditors: maxOpenEditors ?? currentMaxOpenEditors
+  };
+};
+const setComponentState = wrapSerialCommand(applyComponentState);
+
 const flipDirection = direction => {
   return direction === Horizontal ? Vertical : Horizontal;
 };
@@ -8611,6 +8675,7 @@ const commandMap = {
   'MainArea.focusPreviousTab': wrapSerialCommand(focusPreviousTab),
   'MainArea.getActiveEditorUid': wrapGetter(getActiveEditorUid),
   'MainArea.getCommandIds': getCommandIds,
+  'MainArea.getComponentState': getComponentState,
   'MainArea.getMenuEntries': wrapGetter(getMenuEntries),
   'MainArea.getMenuIds': getMenuIds,
   'MainArea.handleClick': wrapSerialCommand(handleClick),
@@ -8637,8 +8702,10 @@ const commandMap = {
   'MainArea.handleSashPointerMove': wrapSerialCommand(handleSashPointerMove),
   'MainArea.handleSashPointerUp': wrapSerialCommand(handleSashPointerUp),
   'MainArea.handleTabContextMenu': wrapSerialCommand(handleTabContextMenu),
+  'MainArea.handleTabDragOver': wrapSerialCommand(handleTabDragOver),
   'MainArea.handleTabKeyDown': wrapSerialCommand(handleTabKeyDown),
   'MainArea.handleTabMouseUp': wrapSerialCommand(resetPointerDown),
+  'MainArea.handleTabsDragOver': wrapSerialCommand(handleTabsDragOver),
   'MainArea.handleTabsWheel': wrapSerialCommand(handleTabsWheel),
   'MainArea.handleTestWorkerMessagePort': handleTestWorkerMessagePort,
   'MainArea.handleUriChange': wrapSerialCommand(handleUriChange),
@@ -8663,6 +8730,7 @@ const commandMap = {
   'MainArea.save': wrapSerialCommand(save),
   'MainArea.saveState': wrapGetter(saveState),
   'MainArea.selectTab': wrapSerialCommand(selectTab),
+  'MainArea.setComponentState': setComponentState,
   'MainArea.setEditorLayoutGrid': wrapSerialCommand(setEditorLayoutGrid),
   'MainArea.setEditorLayoutSingle': wrapSerialCommand(setEditorLayoutSingle),
   'MainArea.setEditorLayoutThreeColumns': wrapSerialCommand(setEditorLayoutThreeColumns),

package/package.json

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