@lvce-editor/static-server 0.71.10 → 0.71.12

package/static/{d982347 → 7bba4de}/packages/main-area-worker/dist/mainAreaWorkerMain.js

@@ -98,7 +98,14 @@ const closeAll$1 = state => {
   };
 };
 
-const Button$1 = 'event.button';
+const Button$1 = 1;
+const Div = 4;
+const Span = 8;
+const Text = 12;
+const Img = 17;
+const Pre = 51;
+
+const Button = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
 const TargetName = 'event.target.name';
@@ -1285,7 +1292,6 @@ const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
 const handleAttach = async command => {
   // TODO find a better way to append editors
   const parentNodeSelector = '.editor-groups-container';
-  // @ts-ignore
   await invoke('Layout.attachViewlet', parentNodeSelector, command.instanceId);
 };
 
@@ -1353,27 +1359,30 @@ const findTab = (state, tabId) => {
   return undefined;
 };
 const loadFileContent = async path => {
-  // @ts-ignore
   const content = await invoke('FileSystem.readFile', path);
   return content;
 };
 const loadTabContentAsync = async (tabId, path, requestId, getLatestState) => {
   try {
-    const content = await loadFileContent(path);
+    await loadFileContent(path);
 
-    // Check for race condition: get the latest state and verify the request ID
+    // Check for race condition: get the latest state
     const latestState = getLatestState();
     const latestTab = findTab(latestState, tabId);
 
-    // If the tab no longer exists or a newer request was started, discard this result
-    if (!latestTab || latestTab.loadRequestId !== requestId) {
+    // If the tab no longer exists, discard this result
+    if (!latestTab) {
+      return latestState;
+    }
+
+    // If the tab is no longer in loading state, discard this result (newer request started)
+    if (latestTab.loadingState !== 'loading') {
       return latestState;
     }
 
     // Assign editorUid if tab doesn't have one yet
     const editorUid = latestTab.editorUid === -1 ? create$1() : latestTab.editorUid;
     return updateTab(latestState, tabId, {
-      content,
       editorUid,
       errorMessage: undefined,
       loadingState: 'loaded'
@@ -1382,12 +1391,16 @@ const loadTabContentAsync = async (tabId, path, requestId, getLatestState) => {
     // Check for race condition before updating with error
     const latestState = getLatestState();
     const latestTab = findTab(latestState, tabId);
-    if (!latestTab || latestTab.loadRequestId !== requestId) {
+    if (!latestTab) {
+      return latestState;
+    }
+
+    // If the tab is no longer in loading state, discard this result (newer request started)
+    if (latestTab.loadingState !== 'loading') {
       return latestState;
     }
     const errorMessage = error instanceof Error ? error.message : 'Failed to load file content';
     return updateTab(latestState, tabId, {
-      content: '',
       errorMessage,
       loadingState: 'error'
     });
@@ -1478,7 +1491,7 @@ const handleViewletReady = (state, editorUid) => {
 
 const handleCreate = async command => {
   // Safe to call - no visible side effects
-  // @ts-ignore
+
   const instanceId = Math.random(); // TODO try to find a better way to get consistent integer ids (thread safe)
 
   await invoke('Layout.createViewlet', command.viewletModuleId, command.tabId, command.bounds, command.uri, instanceId);
@@ -1496,18 +1509,17 @@ const handleCreate = async command => {
 
 const handleDetach = async command => {
   // Hides viewlet but keeps it alive
-  // @ts-ignore
+
   await invoke('Viewlet.detach', command.instanceId);
 };
 
 const handleDispose = async command => {
   // Fully destroys viewlet
-  // @ts-ignore
+
   await invoke('Viewlet.dispose', command.instanceId);
 };
 
 const handleSetBounds = async command => {
-  // @ts-ignore
   await invoke('Viewlet.setBounds', command.instanceId, command.bounds);
 };
 
@@ -1541,12 +1553,24 @@ const closeTab = (state, groupId, tabId) => {
     activeGroupId,
     groups
   } = layout;
-  const newGroups = groups.map(group => {
-    if (group.id === groupId) {
-      const newTabs = group.tabs.filter(tab => tab.id !== tabId);
-      let newActiveTabId = group.activeTabId;
-      if (group.activeTabId === tabId) {
-        const tabIndex = group.tabs.findIndex(tab => tab.id === tabId);
+
+  // Find the group to close the tab from
+  const groupIndex = groups.findIndex(g => g.id === groupId);
+  if (groupIndex === -1) {
+    return state;
+  }
+  const group = groups[groupIndex];
+  // Check if the tab exists in the group
+  const tabWasRemoved = group.tabs.some(tab => tab.id === tabId);
+  if (!tabWasRemoved) {
+    return state;
+  }
+  const newGroups = groups.map(grp => {
+    if (grp.id === groupId) {
+      const newTabs = grp.tabs.filter(tab => tab.id !== tabId);
+      let newActiveTabId = grp.activeTabId;
+      if (grp.activeTabId === tabId) {
+        const tabIndex = grp.tabs.findIndex(tab => tab.id === tabId);
         if (newTabs.length > 0) {
           newActiveTabId = newTabs[Math.min(tabIndex, newTabs.length - 1)].id;
         } else {
@@ -1554,29 +1578,44 @@ const closeTab = (state, groupId, tabId) => {
         }
       }
       return {
-        ...group,
+        ...grp,
         activeTabId: newActiveTabId,
+        isEmpty: newTabs.length === 0,
         tabs: newTabs
       };
     }
-    return group;
+    return grp;
   });
 
-  // If the group has no tabs left and there are other groups, remove the group
-  const groupWithNoTabs = newGroups.find(group => group.id === groupId && group.tabs.length === 0);
-  if (groupWithNoTabs && newGroups.length > 1) {
+  // If the group has no tabs left after closing, remove the group
+  const groupIsNowEmpty = newGroups[groupIndex].tabs.length === 0;
+  if (groupIsNowEmpty) {
     const remainingGroups = newGroups.filter(group => group.id !== groupId);
-    const redistributedGroups = remainingGroups.map(group => ({
-      ...group,
-      size: Math.round(100 / remainingGroups.length)
-    }));
-    const newActiveGroupId = activeGroupId === groupId ? remainingGroups[0]?.id : activeGroupId;
+
+    // If there are remaining groups, redistribute sizes
+    if (remainingGroups.length > 0) {
+      const redistributedGroups = remainingGroups.map(grp => ({
+        ...grp,
+        size: Math.round(100 / remainingGroups.length)
+      }));
+      const newActiveGroupId = activeGroupId === groupId ? remainingGroups[0]?.id : activeGroupId;
+      return {
+        ...state,
+        layout: {
+          ...layout,
+          activeGroupId: newActiveGroupId,
+          groups: redistributedGroups
+        }
+      };
+    }
+
+    // If no remaining groups, return empty layout
     return {
       ...state,
       layout: {
         ...layout,
-        activeGroupId: newActiveGroupId,
-        groups: redistributedGroups
+        activeGroupId: undefined,
+        groups: []
       }
     };
   }
@@ -1614,6 +1653,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, tabHeight = 3
     assetDir,
     fileIconCache: {},
     height,
+    iframes: [],
     layout: {
       activeGroupId: undefined,
       direction: 'horizontal',
@@ -1671,6 +1711,119 @@ const handleClick = async (state, name) => {
   return state;
 };
 
+const closeEditorGroup = (state, groupId) => {
+  const {
+    layout
+  } = state;
+  const {
+    activeGroupId,
+    groups
+  } = layout;
+  const groupIndex = groups.findIndex(group => group.id === groupId);
+  if (groupIndex === -1 || groups.length <= 1) {
+    return state;
+  }
+  const remainingGroups = groups.filter(group => group.id !== groupId);
+  const baseSize = Math.floor(100 / remainingGroups.length);
+  const remainder = 100 % remainingGroups.length;
+  const redistributedGroups = remainingGroups.map((group, index) => ({
+    ...group,
+    size: baseSize + (index === remainingGroups.length - 1 ? remainder : 0)
+  }));
+  const newActiveGroupId = activeGroupId === groupId ? remainingGroups[0].id : activeGroupId;
+  return {
+    ...state,
+    layout: {
+      ...layout,
+      activeGroupId: newActiveGroupId,
+      groups: redistributedGroups
+    }
+  };
+};
+
+const getActiveGroup = (groups, activeGroupId) => {
+  return groups.find(g => g.id === activeGroupId);
+};
+
+const Left = 'left';
+const Right = 'right';
+
+const splitEditorGroup$1 = (state, groupId, direction) => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const sourceGroup = groups.find(group => group.id === groupId);
+  if (!sourceGroup) {
+    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 = {
+    activeTabId: undefined,
+    focused: true,
+    id: newGroupId,
+    isEmpty: true,
+    size: 50,
+    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)];
+  }
+  return {
+    ...state,
+    layout: {
+      activeGroupId: newGroupId,
+      direction: newLayoutDirection,
+      groups: reorderedGroups
+    }
+  };
+};
+
+const handleClickAction = async (state, action, rawGroupId) => {
+  if (!action) {
+    return state;
+  }
+  if (state.layout.activeGroupId === undefined) {
+    return state;
+  }
+  const activeGroup = getActiveGroup(state.layout.groups, state.layout.activeGroupId);
+  if (!activeGroup) {
+    return state;
+  }
+  switch (action) {
+    case 'close-group':
+      if (rawGroupId) {
+        const groupId = Number.parseInt(rawGroupId, 10);
+        if (!Number.isNaN(groupId)) {
+          return closeEditorGroup(state, groupId);
+        }
+      }
+      return state;
+    case 'split-right':
+      return splitEditorGroup$1(state, activeGroup.id, Right);
+    default:
+      return state;
+  }
+};
+
 const handleClickCloseTab = (state, rawGroupIndex, rawIndex) => {
   if (!rawGroupIndex || !rawIndex) {
     return state;
@@ -1699,7 +1852,6 @@ const handleClickCloseTab = (state, rawGroupIndex, rawIndex) => {
 };
 
 const createViewlet = async (viewletModuleId, editorUid, tabId, bounds, uri) => {
-  // @ts-ignore
   await invoke('Layout.createViewlet', viewletModuleId, editorUid, tabId, bounds, uri);
 };
 
@@ -1752,11 +1904,7 @@ const shouldLoadContent = tab => {
   if (tab.loadingState === 'loading') {
     return false;
   }
-  if (tab.loadingState === 'loaded' && tab.content) {
-    return false;
-  }
-  // Don't load if content already exists
-  if (tab.content) {
+  if (tab.loadingState === 'loaded') {
     return false;
   }
   return true;
@@ -1851,56 +1999,52 @@ const selectTab = async (state, groupIndex, index) => {
 
   // If new tab's viewlet isn't ready yet, trigger creation (idempotent)
   const newTab = newState.layout.groups[groupIndex].tabs[index];
-  if (!newTab.loadingState || newTab.loadingState === 'loading') {
-    try {
-      // Query RendererWorker for viewlet module ID
-      // @ts-ignore
-      const viewletModuleId = await invoke('Layout.getModuleId', newTab.uri);
-      if (viewletModuleId) {
-        // Calculate bounds: use main area bounds minus 35px for tab height
-        const TAB_HEIGHT = 35;
-        const bounds = {
-          height: newState.height - TAB_HEIGHT,
-          width: newState.width,
-          x: newState.x,
-          y: newState.y + TAB_HEIGHT
-        };
-        const createdState = createViewletForTab(newState, tabId, viewletModuleId, bounds);
-        newState = createdState;
+  if (newTab.uri && (!newTab.loadingState || newTab.loadingState === 'loading')) {
+    // Query RendererWorker for viewlet module ID
+
+    const viewletModuleId = await invoke('Layout.getModuleId', newTab.uri);
+    if (viewletModuleId) {
+      // Calculate bounds: use main area bounds minus 35px for tab height
+      const TAB_HEIGHT = 35;
+      const bounds = {
+        height: newState.height - TAB_HEIGHT,
+        width: newState.width,
+        x: newState.x,
+        y: newState.y + TAB_HEIGHT
+      };
+      const createdState = createViewletForTab(newState, tabId);
+      newState = createdState;
 
-        // Store updated state before creating viewlet
-        set(uid, state, newState);
+      // Store updated state before creating viewlet
+      set(uid, state, newState);
 
-        // Execute viewlet commands if any
-        if (switchCommands.length > 0) {
-          await executeViewletCommands(switchCommands);
-        }
+      // Execute viewlet commands if any
+      if (switchCommands.length > 0) {
+        await executeViewletCommands(switchCommands);
+      }
 
-        // Get the tab to extract editorUid for viewlet creation
-        const tabWithViewlet = findTabById(newState, tabId);
-        if (tabWithViewlet) {
-          const {
-            editorUid
-          } = tabWithViewlet.tab;
-          if (editorUid !== -1 && newTab.uri) {
-            // Create the actual viewlet instance
-            await createViewlet(viewletModuleId, editorUid, tabId, bounds, newTab.uri);
-
-            // Mark viewlet as ready
-            newState = handleViewletReady(newState, editorUid);
-            set(uid, state, newState);
-          }
+      // Get the tab to extract editorUid for viewlet creation
+      const tabWithViewlet = findTabById(newState, tabId);
+      if (tabWithViewlet) {
+        const {
+          editorUid
+        } = tabWithViewlet.tab;
+        if (editorUid !== -1 && newTab.uri) {
+          // Create the actual viewlet instance
+          await createViewlet(viewletModuleId, editorUid, tabId, bounds, newTab.uri);
+
+          // Mark viewlet as ready
+          newState = handleViewletReady(newState, editorUid);
+          set(uid, state, newState);
         }
+      }
 
-        // Start loading content in the background if needed
-        if (needsLoading && tab.uri) {
-          const latestState = await startContentLoading(state, newState, tabId, tab.uri, requestId);
-          return latestState;
-        }
-        return newState;
+      // Start loading content in the background if needed
+      if (needsLoading && tab.uri) {
+        const latestState = await startContentLoading(state, newState, tabId, tab.uri, requestId);
+        return latestState;
       }
-    } catch {
-      // Viewlet creation is optional - silently ignore if RendererWorker isn't available
+      return newState;
     }
   }
   set(uid, state, newState);
@@ -1927,6 +2071,43 @@ const handleClickTab = async (state, groupIndexRaw, indexRaw) => {
   return selectTab(state, groupIndex, index);
 };
 
+const handleResize = async (state, x, y, width, height) => {
+  number(x);
+  number(y);
+  number(width);
+  number(height);
+  const newState = {
+    ...state,
+    height,
+    width,
+    x,
+    y
+  };
+
+  // Resize all editor children to their new bounds
+  const {
+    layout,
+    tabHeight
+  } = state;
+  const {
+    groups
+  } = layout;
+  const contentHeight = height - tabHeight;
+  for (const group of groups) {
+    for (const tab of group.tabs) {
+      if (tab.editorUid !== -1) {
+        await invoke('Viewlet.setBounds', tab.editorUid, {
+          height: contentHeight,
+          width,
+          x,
+          y: y + tabHeight
+        });
+      }
+    }
+  }
+  return newState;
+};
+
 const show2 = async (uid, menuId, x, y, args) => {
   await showContextMenu2(uid, menuId, x, y, args);
 };
@@ -1977,11 +2158,11 @@ const initialize = async () => {
 };
 
 const isValidTab = tab => {
-  return tab && typeof tab.id === 'number' && typeof tab.title === 'string' && typeof tab.content === 'string' && typeof tab.isDirty === 'boolean' && (tab.editorType === 'text' || tab.editorType === 'custom') && (tab.editorType !== 'custom' || typeof tab.customEditorId === 'string');
+  return tab && typeof tab.id === 'number' && typeof tab.title === 'string' && typeof tab.isDirty === 'boolean' && typeof tab.editorUid === 'number' && typeof tab.icon === 'string' && (tab.editorType === 'text' || tab.editorType === 'custom');
 };
 
 const isValidEditorGroup = group => {
-  return group && typeof group.id === 'number' && Array.isArray(group.tabs) && group.tabs.every(isValidTab) && (group.activeTabId === undefined || typeof group.activeTabId === 'number') && typeof group.focused === 'boolean' && typeof group.size === 'number' && group.size > 0;
+  return group && typeof group.id === 'number' && Array.isArray(group.tabs) && group.tabs.every(isValidTab) && (group.activeTabId === undefined || typeof group.activeTabId === 'number') && typeof group.focused === 'boolean' && typeof group.size === 'number' && group.size > 0 && typeof group.isEmpty === 'boolean';
 };
 
 const isValidMainAreaLayout = layout => {
@@ -2163,7 +2344,6 @@ const getViewletModuleId = async uri => {
   // Query RendererWorker for viewlet module ID (optional, may fail in tests)
   let viewletModuleId;
   try {
-    // @ts-ignore
     viewletModuleId = await invoke('Layout.getModuleId', uri);
   } catch {
     // Viewlet creation is optional - silently ignore if RendererWorker isn't available
@@ -2209,17 +2389,16 @@ const updateTabs = (state, editorUids) => {
   };
 };
 
-const TAB_HEIGHT = 35;
 const restoreAndCreateEditors = async (state, restoredLayout) => {
   let newState = {
     ...state,
     layout: restoredLayout
   };
   const bounds = {
-    height: newState.height - TAB_HEIGHT,
+    height: newState.height - state.tabHeight,
     width: newState.width,
     x: newState.x,
-    y: newState.y + TAB_HEIGHT
+    y: newState.y + state.tabHeight
   };
 
   // Get viewlet module IDs for all active tabs
@@ -2428,7 +2607,6 @@ const createEmptyGroup = (state, uri, requestId) => {
   const tabId = create$1();
   const editorUid = create$1();
   const newTab = {
-    content: '',
     editorType: 'text',
     editorUid,
     errorMessage: '',
@@ -2444,6 +2622,7 @@ const createEmptyGroup = (state, uri, requestId) => {
     activeTabId: newTab.id,
     focused: true,
     id: groupId,
+    isEmpty: false,
     size: 100,
     tabs: [newTab]
   };
@@ -2470,10 +2649,12 @@ const openTab = (state, groupId, tab) => {
   } = layout;
   const updatedGroups = groups.map(group => {
     if (group.id === groupId) {
+      const newTabs = [...group.tabs, newTab];
       return {
         ...group,
         activeTabId: newTab.id,
-        tabs: [...group.tabs, newTab]
+        isEmpty: newTabs.length === 0,
+        tabs: newTabs
       };
     }
     return group;
@@ -2509,7 +2690,6 @@ const ensureActiveGroup = (state, uri) => {
     const tabId = create$1();
     const editorUid = create$1();
     const newTab = {
-      content: '',
       editorType: 'text',
       editorUid,
       errorMessage: '',
@@ -2664,8 +2844,6 @@ const openUri = async (state, options) => {
   intermediateState1 = switchedState;
   set(uid, state, intermediateState1);
 
-  // @ts-ignore
-
   // Get the tab to extract editorUid
   const tabWithViewlet = findTabById(intermediateState1, tabId);
   if (!tabWithViewlet) {
@@ -2726,13 +2904,6 @@ const refresh = state => {
   };
 };
 
-const Button = 1;
-const Div = 4;
-const Span = 8;
-const Text = 12;
-const Img = 17;
-const Pre = 51;
-
 const text = data => {
   return {
     childCount: 0,
@@ -3090,7 +3261,7 @@ const renderEditor = tab => {
   }
 
   // Default: render content (fallback for simple text without viewlet)
-  return renderContent(tab.content || '');
+  return renderContent('');
 };
 
 const HandleClickAction = 10;
@@ -3099,23 +3270,6 @@ const HandleClickClose = 12;
 const HandleClickTab = 13;
 const HandleTabContextMenu = 14;
 
-const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
-  return [{
-    childCount: 1,
-    className: 'EditorGroupActions',
-    role: 'toolbar',
-    type: Div
-  }, {
-    childCount: 1,
-    className: 'EditorGroupActionButton SplitEditorGroupButton',
-    'data-action': 'split-right',
-    'data-groupId': String(group.id),
-    onClick: HandleClickAction,
-    title: splitEditorGroup(),
-    type: Button
-  }, text('split')];
-};
-
 const renderTab = (tab, isActive, tabIndex, groupIndex) => {
   return [{
     'aria-selected': isActive,
@@ -3145,7 +3299,7 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
     'data-groupIndex': groupIndex,
     'data-index': tabIndex,
     onClick: HandleClickClose,
-    type: Button
+    type: Button$1
   }, {
     childCount: 0,
     className: 'MaskIcon MaskIconClose',
@@ -3153,36 +3307,60 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
   }];
 };
 
+const getTabsVirtualDom = (group, groupIndex, tabsChildCount) => {
+  return [{
+    childCount: tabsChildCount,
+    className: 'MainTabs',
+    role: 'tablist',
+    type: Div
+  }, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex))];
+};
+
+const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
+  if (!splitButtonEnabled) {
+    return [];
+  }
+  return [{
+    childCount: 1,
+    className: 'EditorGroupActions',
+    role: 'toolbar',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'EditorGroupActionButton SplitEditorGroupButton',
+    'data-action': 'split-right',
+    'data-groupId': String(group.id),
+    onClick: HandleClickAction,
+    title: splitEditorGroup(),
+    type: Button$1
+  }, text('split')];
+};
+
 const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled) => {
   const tabsChildCount = group.tabs.length;
-  const actions = renderEditorGroupActions(group);
+  const actions = renderEditorGroupActions(group, groupIndex, splitButtonEnabled);
   return [{
-    childCount: 2,
+    childCount: actions.length > 0 ? 2 : 1,
     className: 'EditorGroupHeader',
     role: 'none',
     type: Div
-  }, {
-    childCount: tabsChildCount,
-    className: 'MainTabs',
-    role: 'tablist',
-    type: Div
-  }, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex)), ...actions];
+  }, ...getTabsVirtualDom(group, groupIndex, tabsChildCount), ...actions];
 };
 
-const renderEditorGroup = (group, groupIndex) => {
+const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false) => {
   const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
   return [{
     childCount: 2,
     className: 'EditorGroup',
     type: Div
-  }, ...renderEditorGroupHeader(group, groupIndex), {
-    childCount: activeTab ? 1 : 1,
+  }, ...renderEditorGroupHeader(group, groupIndex, splitButtonEnabled), {
+    childCount: 1,
     className: 'EditorContainer',
     type: Div
   }, ...renderEditor(activeTab)];
 };
 
-const getMainAreaVirtualDom = layout => {
+const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
   return [{
     childCount: 1,
     className: 'Main',
@@ -3190,16 +3368,18 @@ const getMainAreaVirtualDom = layout => {
   }, {
     childCount: layout.groups.length,
     className: CSS_CLASSES.EDITOR_GROUPS_CONTAINER,
+    role: 'none',
     type: Div
-  }, ...layout.groups.flatMap((group, groupIndex) => renderEditorGroup(group, groupIndex))];
+  }, ...layout.groups.flatMap((group, groupIndex) => renderEditorGroup(group, groupIndex, splitButtonEnabled))];
 };
 
 const renderItems = (oldState, newState) => {
   const {
     layout,
+    splitButtonEnabled,
     uid
   } = newState;
-  const dom = getMainAreaVirtualDom(layout);
+  const dom = getMainAreaVirtualDom(layout, splitButtonEnabled);
   return [SetDom2, uid, dom];
 };
 
@@ -3255,11 +3435,11 @@ const renderEventListeners = () => {
     params: ['handleClickTab', 'event.target.dataset.groupIndex', 'event.target.dataset.index']
   }, {
     name: HandleTabContextMenu,
-    params: ['handleTabContextMenu', Button$1, ClientX, ClientY],
+    params: ['handleTabContextMenu', Button, ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleClickAction,
-    params: ['handleClickAction', 'event.target.dataset.action']
+    params: ['handleClickAction', 'event.target.dataset.action', 'event.target.dataset.groupId']
   }];
 };
 
@@ -3299,10 +3479,13 @@ const save = async state => {
   const {
     tab
   } = activeTabData;
-  if (tab.loadingState !== 'loaded') {
+  if (tab.loadingState === 'loading') {
     return state;
   }
   await invoke('Editor.save', tab.editorUid);
+  if (!tab.isDirty) {
+    return state;
+  }
   return updateTab(state, tab.id, {
     isDirty: false
   });
@@ -3317,6 +3500,76 @@ const saveState = state => {
   };
 };
 
+const splitDown = (state, groupId) => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+
+  // If there are no groups, create an initial empty group first
+  if (groups.length === 0) {
+    const initialGroupId = create$1();
+    const initialGroup = {
+      activeTabId: undefined,
+      focused: true,
+      id: initialGroupId,
+      isEmpty: true,
+      size: 100,
+      tabs: []
+    };
+    const stateWithInitialGroup = {
+      ...state,
+      layout: {
+        ...layout,
+        activeGroupId: initialGroupId,
+        groups: [initialGroup]
+      }
+    };
+    return splitEditorGroup$1(stateWithInitialGroup, initialGroupId, 'down');
+  }
+  const resolvedGroupId = groupId ?? state.layout.activeGroupId;
+  if (!resolvedGroupId) {
+    return state;
+  }
+  return splitEditorGroup$1(state, resolvedGroupId, 'down');
+};
+
+const splitRight = (state, groupId) => {
+  const {
+    layout
+  } = state;
+  const {
+    activeGroupId,
+    groups
+  } = layout;
+
+  // If there are no groups, create an initial empty group first
+  if (groups.length === 0) {
+    const initialGroupId = create$1();
+    const initialGroup = {
+      activeTabId: undefined,
+      focused: true,
+      id: initialGroupId,
+      isEmpty: true,
+      size: 100,
+      tabs: []
+    };
+    const stateWithInitialGroup = {
+      ...state,
+      layout: {
+        ...layout,
+        activeGroupId: initialGroupId,
+        groups: [initialGroup]
+      }
+    };
+    return splitEditorGroup$1(stateWithInitialGroup, initialGroupId, Right);
+  }
+  const targetGroupId = groupId ?? activeGroupId ?? groups[0]?.id ?? 0;
+  return splitEditorGroup$1(state, targetGroupId, Right);
+};
+
 const commandMap = {
   'MainArea.closeAll': wrapCommand(closeAll$1),
   'MainArea.closeFocusedTab': wrapCommand(closeFocusedTab),
@@ -3326,8 +3579,10 @@ const commandMap = {
   'MainArea.getMenuEntries': wrapGetter(getMenuEntries),
   'MainArea.getMenuIds': getMenuIds,
   'MainArea.handleClick': wrapCommand(handleClick),
+  'MainArea.handleClickAction': wrapCommand(handleClickAction),
   'MainArea.handleClickCloseTab': wrapCommand(handleClickCloseTab),
   'MainArea.handleClickTab': wrapCommand(handleClickTab),
+  'MainArea.handleResize': wrapCommand(handleResize),
   'MainArea.handleTabContextMenu': wrapCommand(handleTabContextMenu),
   'MainArea.handleWorkspaceChange': wrapCommand(handleWorkspaceChange),
   'MainArea.initialize': initialize,
@@ -3340,6 +3595,8 @@ const commandMap = {
   'MainArea.save': wrapCommand(save),
   'MainArea.saveState': wrapGetter(saveState),
   'MainArea.selectTab': wrapCommand(selectTab),
+  'MainArea.splitDown': wrapCommand(splitDown),
+  'MainArea.splitRight': wrapCommand(splitRight),
   'MainArea.terminate': terminate
 };