@lvce-editor/static-server 0.71.8 → 0.71.10

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

@@ -2,7 +2,7 @@ const toCommandId = key => {
   const dotIndex = key.indexOf('.');
   return key.slice(dotIndex + 1);
 };
-const create$7 = () => {
+const create$6 = () => {
   const states = Object.create(null);
   const commandMapRef = {};
   return {
@@ -98,64 +98,6 @@ const closeAll$1 = state => {
   };
 };
 
-const {
-  get: get$2,
-  getCommandIds,
-  registerCommands,
-  set: set$4,
-  wrapCommand,
-  wrapGetter
-} = create$7();
-
-const create$6 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight = 35) => {
-  const state = {
-    assetDir,
-    fileIconCache: {},
-    height,
-    layout: {
-      activeGroupId: undefined,
-      direction: 'horizontal',
-      groups: []
-    },
-    platform,
-    tabHeight,
-    uid,
-    width,
-    x,
-    y
-  };
-  set$4(uid, state, state);
-};
-
-const isEqual = (oldState, newState) => {
-  return oldState.layout === newState.layout;
-};
-
-const RenderItems = 4;
-
-const modules = [isEqual];
-const numbers = [RenderItems];
-
-const diff = (oldState, newState) => {
-  const diffResult = [];
-  for (let i = 0; i < modules.length; i++) {
-    const fn = modules[i];
-    if (!fn(oldState, newState)) {
-      diffResult.push(numbers[i]);
-    }
-  }
-  return diffResult;
-};
-
-const diff2 = uid => {
-  const {
-    newState,
-    oldState
-  } = get$2(uid);
-  const result = diff(oldState, newState);
-  return result;
-};
-
 const Button$1 = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
@@ -166,23 +108,13 @@ const Tab = 13;
 const Separator = 1;
 const None = 0;
 
-const SetDom2 = 'Viewlet.setDom2';
-
-const getMenuIds = () => {
-  return [Tab];
-};
-
-const handleClick = async (state, name) => {
-  if (!name) {
-    return state;
-  }
-  return state;
-};
-
 const ExtensionHostWorker = 44;
 const IconThemeWorker = 7009;
 const RendererWorker = 1;
 
+const SetDom2 = 'Viewlet.setDom2';
+const SetPatches = 'Viewlet.setPatches';
+
 const normalizeLine = line => {
   if (line.startsWith('Error: ')) {
     return line.slice('Error: '.length);
@@ -248,7 +180,7 @@ class AssertionError extends Error {
 const Object$1 = 1;
 const Number$1 = 2;
 const Array$1 = 3;
-const String = 4;
+const String$1 = 4;
 const Boolean = 5;
 const Function = 6;
 const Null = 7;
@@ -260,7 +192,7 @@ const getType = value => {
     case 'function':
       return Function;
     case 'string':
-      return String;
+      return String$1;
     case 'object':
       if (value === null) {
         return Null;
@@ -699,7 +631,7 @@ const IpcParentWithMessagePort$1 = {
 
 const Two$1 = '2.0';
 const callbacks = Object.create(null);
-const get$1 = id => {
+const get$2 = id => {
   return callbacks[id];
 };
 const remove$1 = id => {
@@ -848,7 +780,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$1(id);
+  const fn = get$2(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -1232,7 +1164,7 @@ const TransferMessagePortRpcParent = {
   __proto__: null,
   create: create$3
 };
-const create$2 = async ({
+const create$2$1 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -1244,7 +1176,7 @@ const create$2 = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create: create$2
+  create: create$2$1
 };
 const createMockRpc = ({
   commandMap
@@ -1267,10 +1199,10 @@ const createMockRpc = ({
 };
 
 const rpcs = Object.create(null);
-const set$3 = (id, rpc) => {
+const set$4 = (id, rpc) => {
   rpcs[id] = rpc;
 };
-const get = id => {
+const get$1 = id => {
   return rpcs[id];
 };
 const remove = id => {
@@ -1278,21 +1210,21 @@ const remove = id => {
 };
 
 /* eslint-disable  @typescript-eslint/explicit-function-return-type */
-const create$1 = rpcId => {
+const create$2 = rpcId => {
   return {
     async dispose() {
-      const rpc = get(rpcId);
+      const rpc = get$1(rpcId);
       await rpc.dispose();
     },
     // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get(rpcId);
+      const rpc = get$1(rpcId);
       // @ts-ignore
       return rpc.invoke(method, ...params);
     },
     // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get(rpcId);
+      const rpc = get$1(rpcId);
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
@@ -1300,7 +1232,7 @@ const create$1 = rpcId => {
       const mockRpc = createMockRpc({
         commandMap
       });
-      set$3(rpcId, mockRpc);
+      set$4(rpcId, mockRpc);
       // @ts-ignore
       mockRpc[Symbol.dispose] = () => {
         remove(rpcId);
@@ -1309,19 +1241,19 @@ const create$1 = rpcId => {
       return mockRpc;
     },
     set(rpc) {
-      set$3(rpcId, rpc);
+      set$4(rpcId, rpc);
     }
   };
 };
 
 const {
-  set: set$2
-} = create$1(ExtensionHostWorker);
+  set: set$3
+} = create$2(ExtensionHostWorker);
 
 const {
   invoke: invoke$1,
-  set: set$1
-} = create$1(IconThemeWorker);
+  set: set$2
+} = create$2(IconThemeWorker);
 const getIcons = async iconRequests => {
   // @ts-ignore
   return invoke$1('IconTheme.getIcons', iconRequests);
@@ -1330,8 +1262,8 @@ const getIcons = async iconRequests => {
 const {
   invoke,
   invokeAndTransfer,
-  set
-} = create$1(RendererWorker);
+  set: set$1
+} = create$2(RendererWorker);
 const showContextMenu2 = async (uid, menuId, x, y, args) => {
   number(uid);
   number(menuId);
@@ -1357,14 +1289,17 @@ const handleAttach = async command => {
   await invoke('Layout.attachViewlet', parentNodeSelector, command.instanceId);
 };
 
-let counter = 0;
-const create = () => {
-  return ++counter;
-};
-const setMinId = minId => {
-  if (minId > counter) {
-    counter = minId;
-  }
+const {
+  get,
+  getCommandIds,
+  registerCommands,
+  set,
+  wrapCommand,
+  wrapGetter
+} = create$6();
+
+const create$1 = () => {
+  return Math.random();
 };
 
 const updateTab = (state, tabId, updates) => {
@@ -1436,7 +1371,7 @@ const loadTabContentAsync = async (tabId, path, requestId, getLatestState) => {
     }
 
     // Assign editorUid if tab doesn't have one yet
-    const editorUid = latestTab.editorUid === -1 ? create() : latestTab.editorUid;
+    const editorUid = latestTab.editorUid === -1 ? create$1() : latestTab.editorUid;
     return updateTab(latestState, tabId, {
       content,
       editorUid,
@@ -1473,7 +1408,7 @@ const createViewletForTab = (state, tabId, viewletModuleId, bounds) => {
   if (tab.editorUid !== -1 || tab.loadingState === 'loading' || tab.loadingState === 'loaded') {
     return state;
   }
-  const editorUid = create();
+  const editorUid = create$1();
   const newState = updateTab(state, tabId, {
     editorUid
   });
@@ -1553,9 +1488,9 @@ const handleCreate = async command => {
   const {
     newState: state,
     oldState
-  } = get$2(command.uid);
+  } = get(command.uid);
   const readyState = handleViewletReady(state, command.editorUid);
-  set$4(command.uid, oldState, readyState);
+  set(command.uid, oldState, readyState);
   return readyState;
 };
 
@@ -1654,6 +1589,88 @@ const closeTab = (state, groupId, tabId) => {
   };
 };
 
+const closeFocusedTab = state => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const focusedGroup = groups.find(group => group.focused);
+  if (!focusedGroup) {
+    return state;
+  }
+  const {
+    activeTabId
+  } = focusedGroup;
+  if (activeTabId === undefined) {
+    return state;
+  }
+  return closeTab(state, focusedGroup.id, activeTabId);
+};
+
+const create = (uid, uri, x, y, width, height, platform, assetDir, tabHeight = 35) => {
+  const state = {
+    assetDir,
+    fileIconCache: {},
+    height,
+    layout: {
+      activeGroupId: undefined,
+      direction: 'horizontal',
+      groups: []
+    },
+    platform,
+    splitButtonEnabled: false,
+    tabHeight,
+    uid,
+    width,
+    x,
+    y
+  };
+  set(uid, state, state);
+};
+
+const isEqual = (oldState, newState) => {
+  return oldState.layout === newState.layout;
+};
+
+const RenderItems = 4;
+const RenderIncremental = 11;
+
+const modules = [isEqual];
+const numbers = [RenderItems];
+
+const diff = (oldState, newState) => {
+  const diffResult = [];
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
+    }
+  }
+  return diffResult;
+};
+
+const diff2 = uid => {
+  const {
+    newState,
+    oldState
+  } = get(uid);
+  const result = diff(oldState, newState);
+  return result;
+};
+
+const getMenuIds = () => {
+  return [Tab];
+};
+
+const handleClick = async (state, name) => {
+  if (!name) {
+    return state;
+  }
+  return state;
+};
+
 const handleClickCloseTab = (state, rawGroupIndex, rawIndex) => {
   if (!rawGroupIndex || !rawIndex) {
     return state;
@@ -1714,9 +1731,9 @@ const getNextRequestId = () => {
 const startContentLoading = async (oldState, state, tabId, path, requestId) => {
   try {
     const getLatestState = () => {
-      return get$2(state.uid).newState;
+      return get(state.uid).newState;
     };
-    set$4(state.uid, oldState, state);
+    set(state.uid, oldState, state);
     const newState = await loadTabContentAsync(tabId, path, requestId, getLatestState);
     return newState;
   } catch {
@@ -1738,6 +1755,10 @@ const shouldLoadContent = tab => {
   if (tab.loadingState === 'loaded' && tab.content) {
     return false;
   }
+  // Don't load if content already exists
+  if (tab.content) {
+    return false;
+  }
   return true;
 };
 const getActiveTabId$1 = state => {
@@ -1848,7 +1869,7 @@ const selectTab = async (state, groupIndex, index) => {
         newState = createdState;
 
         // Store updated state before creating viewlet
-        set$4(uid, state, newState);
+        set(uid, state, newState);
 
         // Execute viewlet commands if any
         if (switchCommands.length > 0) {
@@ -1867,7 +1888,7 @@ const selectTab = async (state, groupIndex, index) => {
 
             // Mark viewlet as ready
             newState = handleViewletReady(newState, editorUid);
-            set$4(uid, state, newState);
+            set(uid, state, newState);
           }
         }
 
@@ -1882,7 +1903,7 @@ const selectTab = async (state, groupIndex, index) => {
       // Viewlet creation is optional - silently ignore if RendererWorker isn't available
     }
   }
-  set$4(uid, state, newState);
+  set(uid, state, newState);
 
   // Execute viewlet commands if any
   if (switchCommands.length > 0) {
@@ -1922,6 +1943,17 @@ const handleTabContextMenu = async (state, x, y) => {
   return state;
 };
 
+const handleWorkspaceChange = state => {
+  return {
+    ...state,
+    layout: {
+      ...state.layout,
+      activeGroupId: undefined,
+      groups: []
+    }
+  };
+};
+
 const id = 7201;
 const sendMessagePortToExtensionHostWorker = async port => {
   await sendMessagePortToExtensionHostWorker$1(port, id);
@@ -1941,22 +1973,7 @@ const createExtensionHostRpc = async () => {
 
 const initialize = async () => {
   const rpc = await createExtensionHostRpc();
-  set$2(rpc);
-};
-
-const getMaxIdFromLayout = layout => {
-  let maxId = 0;
-  for (const group of layout.groups) {
-    if (group.id > maxId) {
-      maxId = group.id;
-    }
-    for (const tab of group.tabs) {
-      if (tab.id > maxId) {
-        maxId = tab.id;
-      }
-    }
-  }
-  return maxId;
+  set$3(rpc);
 };
 
 const isValidTab = tab => {
@@ -2129,6 +2146,19 @@ const loadFileIcons = async state => {
   }
 };
 
+const createViewlets = async (layout, viewletModuleIds, bounds) => {
+  const editorUids = {};
+  for (const group of layout.groups) {
+    const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
+    if (activeTab && viewletModuleIds[activeTab.id]) {
+      const editorUid = activeTab.editorUid === -1 ? create$1() : activeTab.editorUid;
+      editorUids[activeTab.id] = editorUid;
+      await createViewlet(viewletModuleIds[activeTab.id], editorUid, activeTab.id, bounds, activeTab.uri);
+    }
+  }
+  return editorUids;
+};
+
 const getViewletModuleId = async uri => {
   // Query RendererWorker for viewlet module ID (optional, may fail in tests)
   let viewletModuleId;
@@ -2141,9 +2171,6 @@ const getViewletModuleId = async uri => {
   return viewletModuleId;
 };
 
-const TAB_HEIGHT = 35;
-
-// Get viewlet module IDs for active tabs in each group
 const getViewletModuleIds = async layout => {
   const viewletModuleIds = {};
   for (const group of layout.groups) {
@@ -2158,21 +2185,6 @@ const getViewletModuleIds = async layout => {
   return viewletModuleIds;
 };
 
-// Create viewlets for the active tabs
-const createViewlets = async (layout, viewletModuleIds, bounds) => {
-  const editorUids = {};
-  for (const group of layout.groups) {
-    const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
-    if (activeTab && viewletModuleIds[activeTab.id]) {
-      const editorUid = activeTab.editorUid === -1 ? create() : activeTab.editorUid;
-      editorUids[activeTab.id] = editorUid;
-      await createViewlet(viewletModuleIds[activeTab.id], editorUid, activeTab.id, bounds, activeTab.uri);
-    }
-  }
-  return editorUids;
-};
-
-// Update tabs with editor UIDs
 const updateTabs = (state, editorUids) => {
   const updatedGroups = state.layout.groups.map(group => {
     return {
@@ -2196,6 +2208,8 @@ const updateTabs = (state, editorUids) => {
     }
   };
 };
+
+const TAB_HEIGHT = 35;
 const restoreAndCreateEditors = async (state, restoredLayout) => {
   let newState = {
     ...state,
@@ -2232,9 +2246,6 @@ const restoreAndCreateEditors = async (state, restoredLayout) => {
 const loadContent = async (state, savedState) => {
   const restoredLayout = tryRestoreLayout(savedState);
   if (restoredLayout) {
-    const maxId = getMaxIdFromLayout(restoredLayout);
-    setMinId(maxId);
-
     // Restore and create editors
     const editorState = await restoreAndCreateEditors(state, restoredLayout);
 
@@ -2262,6 +2273,16 @@ const loadContent = async (state, savedState) => {
   };
 };
 
+const findGroupById = (state, groupId) => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  return groups.find(group => group.id === groupId);
+};
+
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -2280,7 +2301,11 @@ const CloseOthers = 'Close Others';
 const CloseToTheRight = 'Close To The Right';
 const FindFileReferences = 'Find File References';
 const RevealInExplorer = 'Reveal in Explorer';
+const SplitEditorGroup = 'Split Editor Group';
 
+const splitEditorGroup = () => {
+  return i18nString(SplitEditorGroup);
+};
 const close = () => {
   return i18nString(Close);
 };
@@ -2313,16 +2338,20 @@ const getMenuEntries$1 = state => {
     layout
   } = state;
   const {
-    activeGroupId,
-    groups
+    activeGroupId
   } = layout;
-  const group = groups[activeGroupId || 0];
+  const group = findGroupById(state, activeGroupId || 0);
+  if (!group) {
+    return [];
+  }
   const {
     activeTabId,
     tabs
   } = group;
-  const tab = tabs[activeTabId || 0];
-  object(tab);
+  const tab = tabs.find(t => t.id === activeTabId);
+  if (!tab) {
+    return [];
+  }
   const {
     uri: path
   } = tab;
@@ -2342,7 +2371,7 @@ const getMenuEntries$1 = state => {
     id: 'tabCloseToTheRight',
     label: closeToTheRight()
   }, {
-    command: 'Main.closeAllEditors',
+    command: 'Main.closeAll',
     flags: None,
     id: 'tabCloseAll',
     label: closeAll()
@@ -2394,10 +2423,10 @@ const createEmptyGroup = (state, uri, requestId) => {
   const {
     groups
   } = layout;
-  const groupId = create();
+  const groupId = create$1();
   const title = getLabel(uri);
-  const tabId = create();
-  const editorUid = create();
+  const tabId = create$1();
+  const editorUid = create$1();
   const newTab = {
     content: '',
     editorType: 'text',
@@ -2431,7 +2460,7 @@ const createEmptyGroup = (state, uri, requestId) => {
 const openTab = (state, groupId, tab) => {
   const newTab = 'id' in tab && tab.id !== undefined ? tab : {
     ...tab,
-    id: create()
+    id: create$1()
   };
   const {
     layout
@@ -2477,8 +2506,8 @@ const ensureActiveGroup = (state, uri) => {
   if (activeGroup) {
     // Create a new tab with the URI in the active group
     const title = getLabel(uri);
-    const tabId = create();
-    const editorUid = create();
+    const tabId = create$1();
+    const editorUid = create$1();
     const newTab = {
       content: '',
       editorType: 'text',
@@ -2633,7 +2662,7 @@ const openUri = async (state, options) => {
     newState: switchedState
   } = switchViewlet(intermediateState1);
   intermediateState1 = switchedState;
-  set$4(uid, state, intermediateState1);
+  set(uid, state, intermediateState1);
 
   // @ts-ignore
 
@@ -2654,7 +2683,7 @@ const openUri = async (state, options) => {
   // This ensures we have any state updates that occurred during viewlet creation
   const {
     newState: latestState
-  } = get$2(uid);
+  } = get(uid);
 
   // Attachment is handled automatically by virtual DOM reference nodes
   const readyState = handleViewletReady(latestState, editorUid);
@@ -2712,6 +2741,283 @@ const text = data => {
   };
 };
 
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
+};
+
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
+};
+
+const arrayToTree = nodes => {
+  const result = [];
+  let i = 0;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    const {
+      children,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
+    result.push({
+      node,
+      children
+    });
+    i += 1 + nodesConsumed;
+  }
+  return result;
+};
+const getChildrenWithCount = (nodes, startIndex, childCount) => {
+  if (childCount === 0) {
+    return {
+      children: [],
+      nodesConsumed: 0
+    };
+  }
+  const children = [];
+  let i = startIndex;
+  let remaining = childCount;
+  let totalConsumed = 0;
+  while (remaining > 0 && i < nodes.length) {
+    const node = nodes[i];
+    const nodeChildCount = node.childCount || 0;
+    const {
+      children: nodeChildren,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
+    children.push({
+      node,
+      children: nodeChildren
+    });
+    const nodeSize = 1 + nodesConsumed;
+    i += nodeSize;
+    totalConsumed += nodeSize;
+    remaining--;
+  }
+  return {
+    children,
+    nodesConsumed: totalConsumed
+  };
+};
+
+const compareNodes = (oldNode, newNode) => {
+  const patches = [];
+  // Check if node type changed - return null to signal incompatible nodes
+  // (caller should handle this with a Replace operation)
+  if (oldNode.type !== newNode.type) {
+    return null;
+  }
+  // Handle text nodes
+  if (oldNode.type === Text && newNode.type === Text) {
+    if (oldNode.text !== newNode.text) {
+      patches.push({
+        type: SetText,
+        value: newNode.text
+      });
+    }
+    return patches;
+  }
+  // Compare attributes
+  const oldKeys = getKeys(oldNode);
+  const newKeys = getKeys(newNode);
+  // Check for attribute changes
+  for (const key of newKeys) {
+    if (oldNode[key] !== newNode[key]) {
+      patches.push({
+        type: SetAttribute,
+        key,
+        value: newNode[key]
+      });
+    }
+  }
+  // Check for removed attributes
+  for (const key of oldKeys) {
+    if (!(key in newNode)) {
+      patches.push({
+        type: RemoveAttribute,
+        key
+      });
+    }
+  }
+  return patches;
+};
+
+const treeToArray = node => {
+  const result = [node.node];
+  for (const child of node.children) {
+    result.push(...treeToArray(child));
+  }
+  return result;
+};
+
+const diffChildren = (oldChildren, newChildren, patches) => {
+  const maxLength = Math.max(oldChildren.length, newChildren.length);
+  // Track where we are: -1 means at parent, >= 0 means at child index
+  let currentChildIndex = -1;
+  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
+  const indicesToRemove = [];
+  for (let i = 0; i < maxLength; i++) {
+    const oldNode = oldChildren[i];
+    const newNode = newChildren[i];
+    if (!oldNode && !newNode) {
+      continue;
+    }
+    if (!oldNode) {
+      // Add new node - we should be at the parent
+      if (currentChildIndex >= 0) {
+        // Navigate back to parent
+        patches.push({
+          type: NavigateParent
+        });
+        currentChildIndex = -1;
+      }
+      // Flatten the entire subtree so renderInternal can handle it
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Add,
+        nodes: flatNodes
+      });
+    } else if (newNode) {
+      // Compare nodes to see if we need any patches
+      const nodePatches = compareNodes(oldNode.node, newNode.node);
+      // If nodePatches is null, the node types are incompatible - need to replace
+      if (nodePatches === null) {
+        // Navigate to this child
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Replace the entire subtree
+        const flatNodes = treeToArray(newNode);
+        patches.push({
+          type: Replace,
+          nodes: flatNodes
+        });
+        // After replace, we're at the new element (same position)
+        continue;
+      }
+      // Check if we need to recurse into children
+      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+      // Only navigate to this element if we need to do something
+      if (nodePatches.length > 0 || hasChildrenToCompare) {
+        // Navigate to this child if not already there
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Apply node patches (these apply to the current element, not children)
+        if (nodePatches.length > 0) {
+          patches.push(...nodePatches);
+        }
+        // Compare children recursively
+        if (hasChildrenToCompare) {
+          diffChildren(oldNode.children, newNode.children, patches);
+        }
+      }
+    } else {
+      // Remove old node - collect the index for later removal
+      indicesToRemove.push(i);
+    }
+  }
+  // Navigate back to parent if we ended at a child
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+    currentChildIndex = -1;
+  }
+  // Add remove patches in reverse order (highest index first)
+  // This ensures indices remain valid as we remove
+  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
+    patches.push({
+      type: RemoveChild,
+      index: indicesToRemove[j]
+    });
+  }
+};
+const diffTrees = (oldTree, newTree, patches, path) => {
+  // At the root level (path.length === 0), we're already AT the element
+  // So we compare the root node directly, then compare its children
+  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
+    const oldNode = oldTree[0];
+    const newNode = newTree[0];
+    // Compare root nodes
+    const nodePatches = compareNodes(oldNode.node, newNode.node);
+    // If nodePatches is null, the root node types are incompatible - need to replace
+    if (nodePatches === null) {
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Replace,
+        nodes: flatNodes
+      });
+      return;
+    }
+    if (nodePatches.length > 0) {
+      patches.push(...nodePatches);
+    }
+    // Compare children
+    if (oldNode.children.length > 0 || newNode.children.length > 0) {
+      diffChildren(oldNode.children, newNode.children, patches);
+    }
+  } else {
+    // Non-root level or multiple root elements - use the regular comparison
+    diffChildren(oldTree, newTree, patches);
+  }
+};
+
+const removeTrailingNavigationPatches = patches => {
+  // Find the last non-navigation patch
+  let lastNonNavigationIndex = -1;
+  for (let i = patches.length - 1; i >= 0; i--) {
+    const patch = patches[i];
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+      lastNonNavigationIndex = i;
+      break;
+    }
+  }
+  // Return patches up to and including the last non-navigation patch
+  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+};
+
+const diffTree = (oldNodes, newNodes) => {
+  // Step 1: Convert flat arrays to tree structures
+  const oldTree = arrayToTree(oldNodes);
+  const newTree = arrayToTree(newNodes);
+  // Step 3: Compare the trees
+  const patches = [];
+  diffTrees(oldTree, newTree, patches, []);
+  // Remove trailing navigation patches since they serve no purpose
+  return removeTrailingNavigationPatches(patches);
+};
+
 const CSS_CLASSES = {
   EDITOR_GROUPS_CONTAINER: 'editor-groups-container'};
 
@@ -2787,13 +3093,32 @@ const renderEditor = tab => {
   return renderContent(tab.content || '');
 };
 
+const HandleClickAction = 10;
 const HandleClick = 11;
 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,
     childCount: 3,
     className: isActive ? 'MainTab MainTabSelected' : 'MainTab',
     'data-groupIndex': groupIndex,
@@ -2806,6 +3131,7 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
   }, {
     childCount: 0,
     className: 'TabIcon',
+    role: 'none',
     src: tab.icon,
     type: Img
   }, {
@@ -2813,21 +3139,34 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
     className: 'TabTitle',
     type: Span
   }, text(tab.isDirty ? `*${tab.title}` : tab.title), {
+    'aria-label': 'Close',
     childCount: 1,
     className: 'EditorTabCloseButton',
     'data-groupIndex': groupIndex,
     'data-index': tabIndex,
     onClick: HandleClickClose,
     type: Button
-  }, text('×')];
+  }, {
+    childCount: 0,
+    className: 'MaskIcon MaskIconClose',
+    type: Div
+  }];
 };
 
-const renderTabBar = (group, groupIndex) => {
+const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled) => {
+  const tabsChildCount = group.tabs.length;
+  const actions = renderEditorGroupActions(group);
   return [{
-    childCount: group.tabs.length,
+    childCount: 2,
+    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))];
+  }, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex)), ...actions];
 };
 
 const renderEditorGroup = (group, groupIndex) => {
@@ -2836,7 +3175,7 @@ const renderEditorGroup = (group, groupIndex) => {
     childCount: 2,
     className: 'EditorGroup',
     type: Div
-  }, ...renderTabBar(group, groupIndex), {
+  }, ...renderEditorGroupHeader(group, groupIndex), {
     childCount: activeTab ? 1 : 1,
     className: 'EditorContainer',
     type: Div
@@ -2864,8 +3203,17 @@ const renderItems = (oldState, newState) => {
   return [SetDom2, uid, dom];
 };
 
+const renderIncremental = (oldState, newState) => {
+  const oldDom = renderItems(oldState, oldState)[2];
+  const newDom = renderItems(newState, newState)[2];
+  const patches = diffTree(oldDom, newDom);
+  return [SetPatches, newState.uid, patches];
+};
+
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderIncremental:
+      return renderIncremental;
     case RenderItems:
       return renderItems;
     default:
@@ -2889,8 +3237,8 @@ const render2 = (uid, diffResult) => {
   const {
     newState,
     oldState
-  } = get$2(uid);
-  set$4(uid, newState, newState);
+  } = get(uid);
+  set(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
@@ -2909,6 +3257,9 @@ const renderEventListeners = () => {
     name: HandleTabContextMenu,
     params: ['handleTabContextMenu', Button$1, ClientX, ClientY],
     preventDefault: true
+  }, {
+    name: HandleClickAction,
+    params: ['handleClickAction', 'event.target.dataset.action']
   }];
 };
 
@@ -2919,6 +3270,44 @@ const resize = (state, dimensions) => {
   };
 };
 
+const getActiveTab = state => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const activeGroup = groups.find(group => group.focused);
+  if (!activeGroup || !activeGroup.activeTabId) {
+    return undefined;
+  }
+  const activeTab = activeGroup.tabs.find(tab => tab.id === activeGroup.activeTabId);
+  if (!activeTab) {
+    return undefined;
+  }
+  return {
+    groupId: activeGroup.id,
+    tab: activeTab
+  };
+};
+
+const save = async state => {
+  const activeTabData = getActiveTab(state);
+  if (!activeTabData) {
+    return state;
+  }
+  const {
+    tab
+  } = activeTabData;
+  if (tab.loadingState !== 'loaded') {
+    return state;
+  }
+  await invoke('Editor.save', tab.editorUid);
+  return updateTab(state, tab.id, {
+    isDirty: false
+  });
+};
+
 const saveState = state => {
   const {
     layout
@@ -2930,7 +3319,8 @@ const saveState = state => {
 
 const commandMap = {
   'MainArea.closeAll': wrapCommand(closeAll$1),
-  'MainArea.create': create$6,
+  'MainArea.closeFocusedTab': wrapCommand(closeFocusedTab),
+  'MainArea.create': create,
   'MainArea.diff2': diff2,
   'MainArea.getCommandIds': getCommandIds,
   'MainArea.getMenuEntries': wrapGetter(getMenuEntries),
@@ -2939,6 +3329,7 @@ const commandMap = {
   'MainArea.handleClickCloseTab': wrapCommand(handleClickCloseTab),
   'MainArea.handleClickTab': wrapCommand(handleClickTab),
   'MainArea.handleTabContextMenu': wrapCommand(handleTabContextMenu),
+  'MainArea.handleWorkspaceChange': wrapCommand(handleWorkspaceChange),
   'MainArea.initialize': initialize,
   'MainArea.loadContent': wrapCommand(loadContent),
   'MainArea.openUri': wrapCommand(openUri),
@@ -2946,6 +3337,7 @@ const commandMap = {
   'MainArea.render2': render2,
   'MainArea.renderEventListeners': renderEventListeners,
   'MainArea.resize': wrapCommand(resize),
+  'MainArea.save': wrapCommand(save),
   'MainArea.saveState': wrapGetter(saveState),
   'MainArea.selectTab': wrapCommand(selectTab),
   'MainArea.terminate': terminate
@@ -2968,14 +3360,14 @@ const createIconThemeWorkerRpc = async () => {
 
 const initializeIconThemeWorker = async () => {
   const rpc = await createIconThemeWorkerRpc();
-  set$1(rpc);
+  set$2(rpc);
 };
 
 const initializeRendererWorker = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set(rpc);
+  set$1(rpc);
 };
 
 const listen = async () => {
@@ -2992,7 +3384,7 @@ const main$1 = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set(rpc);
+  set$1(rpc);
 };
 
 const main = async () => {