@lvce-editor/main-area-worker 9.15.0 → 9.17.0

package/README.md

@@ -1,3 +1,5 @@
 # Main Area Worker
 
 WebWorker for the main area functionality in Lvce Editor.
+
+<!--  -->

package/dist/mainAreaWorkerMain.js

@@ -13,13 +13,13 @@ const create$f = () => {
     },
     diff(uid, modules, numbers) {
       const {
-        newState,
-        oldState
+        oldState,
+        scheduledState
       } = states[uid];
       const diffResult = [];
       for (let i = 0; i < modules.length; i++) {
         const fn = modules[i];
-        if (!fn(oldState, newState)) {
+        if (!fn(oldState, scheduledState)) {
           diffResult.push(numbers[i]);
         }
       }
@@ -37,17 +37,16 @@ const create$f = () => {
       return ids;
     },
     getKeys() {
-      return Object.keys(states).map(key => {
-        return Number.parseFloat(key);
-      });
+      return Object.keys(states).map(Number);
     },
     registerCommands(commandMap) {
       Object.assign(commandMapRef, commandMap);
     },
-    set(uid, oldState, newState) {
+    set(uid, oldState, newState, scheduledState) {
       states[uid] = {
         newState,
-        oldState
+        oldState,
+        scheduledState: scheduledState ?? newState
       };
     },
     wrapCommand(fn) {
@@ -67,7 +66,8 @@ const create$f = () => {
         };
         states[uid] = {
           newState: latestNew,
-          oldState: latestOld.oldState
+          oldState: latestOld.oldState,
+          scheduledState: latestNew
         };
       };
       return wrapped;
@@ -104,7 +104,8 @@ const create$f = () => {
         };
         states[uid] = {
           newState: latestNew,
-          oldState: latestOld.oldState
+          oldState: latestOld.oldState,
+          scheduledState: latestNew
         };
         return {
           error
@@ -820,8 +821,10 @@ const getCurrentStack = () => {
   const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
   return currentStack;
 };
-const getNewLineIndex = (string, startIndex = undefined) => {
-  return string.indexOf(NewLine, startIndex);
+const getNewLineIndex = (string, startIndex) => {
+  {
+    return string.indexOf(NewLine);
+  }
 };
 const getParentStack = error => {
   let parentStack = error.stack || error.data || error.message || '';
@@ -832,55 +835,77 @@ const getParentStack = error => {
 };
 const MethodNotFound = -32601;
 const Custom = -32001;
+const restoreExistingError = (error, currentStack) => {
+  if (typeof error.stack === 'string') {
+    error.stack = error.stack + NewLine + currentStack;
+  }
+  return error;
+};
+const restoreMethodNotFoundError = (error, currentStack) => {
+  const restoredError = new JsonRpcError(error.message);
+  const parentStack = getParentStack(error);
+  restoredError.stack = parentStack + NewLine + currentStack;
+  return restoredError;
+};
+const restoreStackFromData = (restoredError, error, currentStack) => {
+  if (error.data.stack && error.data.type && error.message) {
+    restoredError.stack = error.data.type + ': ' + error.message + NewLine + error.data.stack + NewLine + currentStack;
+    return;
+  }
+  if (error.data.stack) {
+    restoredError.stack = error.data.stack;
+  }
+};
+const applyDataProperties = (restoredError, error) => {
+  if (!error.data) {
+    return;
+  }
+  restoreStackFromData(restoredError, error, getCurrentStack());
+  if (error.data.codeFrame) {
+    // @ts-ignore
+    restoredError.codeFrame = error.data.codeFrame;
+  }
+  if (error.data.code) {
+    // @ts-ignore
+    restoredError.code = error.data.code;
+  }
+  if (error.data.type) {
+    // @ts-ignore
+    restoredError.name = error.data.type;
+  }
+};
+const applyDirectProperties = (restoredError, error) => {
+  if (error.stack) {
+    const lowerStack = restoredError.stack || '';
+    const indexNewLine = getNewLineIndex(lowerStack);
+    const parentStack = getParentStack(error);
+    // @ts-ignore
+    restoredError.stack = parentStack + lowerStack.slice(indexNewLine);
+  }
+  if (error.codeFrame) {
+    // @ts-ignore
+    restoredError.codeFrame = error.codeFrame;
+  }
+};
+const restoreMessageError = (error, _currentStack) => {
+  const restoredError = constructError(error.message, error.type, error.name);
+  if (error.data) {
+    applyDataProperties(restoredError, error);
+  } else {
+    applyDirectProperties(restoredError, error);
+  }
+  return restoredError;
+};
 const restoreJsonRpcError = error => {
   const currentStack = getCurrentStack();
   if (error && error instanceof Error) {
-    if (typeof error.stack === 'string') {
-      error.stack = error.stack + NewLine + currentStack;
-    }
-    return error;
+    return restoreExistingError(error, currentStack);
   }
   if (error && error.code && error.code === MethodNotFound) {
-    const restoredError = new JsonRpcError(error.message);
-    const parentStack = getParentStack(error);
-    restoredError.stack = parentStack + NewLine + currentStack;
-    return restoredError;
+    return restoreMethodNotFoundError(error, currentStack);
   }
   if (error && error.message) {
-    const restoredError = constructError(error.message, error.type, error.name);
-    if (error.data) {
-      if (error.data.stack && error.data.type && error.message) {
-        restoredError.stack = error.data.type + ': ' + error.message + NewLine + error.data.stack + NewLine + currentStack;
-      } else if (error.data.stack) {
-        restoredError.stack = error.data.stack;
-      }
-      if (error.data.codeFrame) {
-        // @ts-ignore
-        restoredError.codeFrame = error.data.codeFrame;
-      }
-      if (error.data.code) {
-        // @ts-ignore
-        restoredError.code = error.data.code;
-      }
-      if (error.data.type) {
-        // @ts-ignore
-        restoredError.name = error.data.type;
-      }
-    } else {
-      if (error.stack) {
-        const lowerStack = restoredError.stack || '';
-        // @ts-ignore
-        const indexNewLine = getNewLineIndex(lowerStack);
-        const parentStack = getParentStack(error);
-        // @ts-ignore
-        restoredError.stack = parentStack + lowerStack.slice(indexNewLine);
-      }
-      if (error.codeFrame) {
-        // @ts-ignore
-        restoredError.codeFrame = error.codeFrame;
-      }
-    }
-    return restoredError;
+    return restoreMessageError(error);
   }
   if (typeof error === 'string') {
     return new Error(`JsonRpc Error: ${error}`);
@@ -1606,7 +1631,7 @@ const closeTabAndSave = async (state, groupId, tabId) => {
   if (!tab) {
     return state;
   }
-  if (tab.editorUid !== -1) {
+  if (tab.editorUid !== -1 && tab.isDirty) {
     const editorState = await saveEditor(tab.editorUid);
     if (!editorState?.modified && tab.uri) {
       await handleModifiedStatusChange$1(tab.uri, false);
@@ -1799,21 +1824,23 @@ const closeSaved$1 = state => {
   return withGroups(addClosedTabs(state, closedTabs), newGroups);
 };
 
+const closeFirstTabByUri = (state, uri) => {
+  const matchingGroup = state.layout.groups.find(group => {
+    return group.tabs.some(tab => tab.uri === uri);
+  });
+  const matchingTab = matchingGroup?.tabs.find(tab => tab.uri === uri);
+  if (!matchingGroup || !matchingTab) {
+    return undefined;
+  }
+  return closeTab(state, matchingGroup.id, matchingTab.id);
+};
 const closeTabsByUris = (state, uris) => {
   let currentState = state;
   for (const uri of uris) {
-    while (true) {
-      const matchingGroup = currentState.layout.groups.find(group => {
-        return group.tabs.some(tab => tab.uri === uri);
-      });
-      if (!matchingGroup) {
-        break;
-      }
-      const matchingTab = matchingGroup.tabs.find(tab => tab.uri === uri);
-      if (!matchingTab) {
-        break;
-      }
-      currentState = closeTab(currentState, matchingGroup.id, matchingTab.id);
+    let nextState = closeFirstTabByUri(currentState, uri);
+    while (nextState) {
+      currentState = nextState;
+      nextState = closeFirstTabByUri(currentState, uri);
     }
   }
   return currentState;
@@ -1924,8 +1951,8 @@ const create$2 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight =
       direction: Horizontal,
       groups: []
     },
-    maxOpenEditorGroups: Number.POSITIVE_INFINITY,
-    maxOpenEditors: Number.POSITIVE_INFINITY,
+    maxOpenEditorGroups: Infinity,
+    maxOpenEditors: Infinity,
     minGroupWidthPx: 250,
     platform,
     splitButtonEnabled: false,
@@ -1974,196 +2001,6 @@ const diff2 = uid => {
   return result;
 };
 
-const getActiveTabId$1 = state => {
-  const {
-    layout
-  } = state;
-  const {
-    activeGroupId,
-    groups
-  } = layout;
-  const activeGroup = groups.find(group => group.id === activeGroupId);
-  return activeGroup?.activeTabId;
-};
-
-const getSelectedTabBounds = state => {
-  return {
-    height: state.height - state.tabHeight,
-    width: state.width,
-    x: state.x,
-    y: state.y + state.tabHeight
-  };
-};
-
-const getSelectedTabData = (state, groupIndex, index) => {
-  const group = state.layout.groups[groupIndex];
-  if (!group || index < 0 || index >= group.tabs.length) {
-    return undefined;
-  }
-  const tab = group.tabs[index];
-  return {
-    group,
-    groupId: group.id,
-    tab,
-    tabId: tab.id
-  };
-};
-
-const getUpdatedGroups = (groups, groupIndex, needsLoading, tabId) => {
-  return groups.map((group, index) => {
-    if (index !== groupIndex) {
-      return {
-        ...group,
-        focused: false
-      };
-    }
-    const tabs = needsLoading ? group.tabs.map(tab => {
-      if (tab.id !== tabId) {
-        return tab;
-      }
-      return {
-        ...tab,
-        errorMessage: '',
-        loadingState: 'loading'
-      };
-    }) : group.tabs;
-    return {
-      ...group,
-      activeTabId: tabId,
-      focused: true,
-      tabs
-    };
-  });
-};
-
-const getViewletModuleId$1 = async uri => {
-  // Query RendererWorker for viewlet module ID (optional, may fail in tests)
-  let viewletModuleId;
-  try {
-    viewletModuleId = await invoke('Layout.getModuleId', uri);
-  } catch {
-    // Viewlet creation is optional - silently ignore if RendererWorker isn't available
-  }
-  return viewletModuleId;
-};
-
-const DiffEditor = 'DiffEditor';
-const EditorText = 'Editor';
-const ExtensionDetail = 'ExtensionDetail';
-const QuickPick = 'QuickPick';
-
-const getViewletModuleIdForEditorInput = async editorInput => {
-  switch (editorInput.type) {
-    case 'diff-editor':
-      return DiffEditor;
-    case 'editor':
-      return getViewletModuleId$1(editorInput.uri);
-    case 'extension-detail-view':
-      return ExtensionDetail;
-  }
-};
-
-const getEditorInputEditorType = editorInput => {
-  switch (editorInput.type) {
-    case 'diff-editor':
-    case 'extension-detail-view':
-      return 'custom';
-    case 'editor':
-      return 'text';
-  }
-};
-
-const getEditorInputUri = editorInput => {
-  switch (editorInput.type) {
-    case 'diff-editor':
-      return `diff://?left=${encodeURIComponent(editorInput.uriLeft)}&right=${encodeURIComponent(editorInput.uriRight)}`;
-    case 'editor':
-      return editorInput.uri;
-    case 'extension-detail-view':
-      return `extension-detail://${editorInput.extensionId}`;
-  }
-};
-
-const getEditorInputFromUri = uri => {
-  if (uri.startsWith('diff://?')) {
-    try {
-      const parsed = new URL(uri);
-      const uriLeft = parsed.searchParams.get('left');
-      const uriRight = parsed.searchParams.get('right');
-      if (uriLeft && uriRight) {
-        return {
-          type: 'diff-editor',
-          uriLeft,
-          uriRight
-        };
-      }
-    } catch {
-      // Ignore malformed legacy URIs and fall back to a text editor input.
-    }
-  }
-  if (uri.startsWith('extension-detail://')) {
-    const extensionIdWithPath = uri.slice('extension-detail://'.length);
-    const extensionId = extensionIdWithPath.split('/')[0];
-    if (extensionId) {
-      return {
-        extensionId,
-        type: 'extension-detail-view'
-      };
-    }
-  }
-  return {
-    type: 'editor',
-    uri
-  };
-};
-const getNormalizedEditorInput = tab => {
-  const {
-    editorInput: tabEditorInput,
-    uri: tabUri
-  } = tab ?? {};
-  let uri;
-  if (typeof tabUri === 'string') {
-    uri = tabUri;
-  } else if (typeof tabEditorInput?.uri === 'string') {
-    const {
-      uri: tabEditorInputUri
-    } = tabEditorInput;
-    uri = tabEditorInputUri;
-  }
-  if (uri) {
-    const inferredEditorInput = getEditorInputFromUri(uri);
-    if (inferredEditorInput.type !== 'editor') {
-      return inferredEditorInput;
-    }
-  }
-  return tab?.editorInput;
-};
-const normalizeTabEditorInput = tab => {
-  const editorInput = getNormalizedEditorInput(tab);
-  if (!editorInput) {
-    return tab;
-  }
-  const uri = typeof tab?.uri === 'string' ? tab.uri : getEditorInputUri(editorInput);
-  return {
-    ...tab,
-    editorInput,
-    editorType: getEditorInputEditorType(editorInput),
-    uri
-  };
-};
-const getNormalizedOpenEditorInput = uri => {
-  return getEditorInputFromUri(uri);
-};
-
-const getViewletModuleId = async tab => {
-  const normalizedTab = normalizeTabEditorInput(tab);
-  return normalizedTab.editorInput ? getViewletModuleIdForEditorInput(normalizedTab.editorInput) : invoke('Layout.getModuleId', normalizedTab.uri);
-};
-
-const createViewlet = async (viewletModuleId, editorUid, tabId, bounds, uri) => {
-  await invoke('Layout.createViewlet', viewletModuleId, editorUid, tabId, bounds, uri);
-};
-
 const handleAttach = async command => {
   // TODO find a better way to append editors
   const parentNodeSelector = '.editor-groups-container, .EditorGroup';
@@ -2321,103 +2158,326 @@ const switchViewlet = (state, fromTabId, toTabId) => {
   };
 };
 
-const findTabByEditorUid = (state, editorUid) => {
+const findTabByEditorUid = (state, editorUid) => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  for (const group of groups) {
+    const tab = group.tabs.find(t => t.editorUid === editorUid);
+    if (tab) {
+      return tab;
+    }
+  }
+  return undefined;
+};
+
+/**
+ * Called when renderer reports viewlet finished creating.
+ * With reference nodes, attachment is handled automatically by virtual DOM rendering.
+ * No commands needed - state update is sufficient.
+ */
+const handleViewletReady = (state, editorUid) => {
+  if (editorUid === -1) {
+    throw new Error('Invalid editorUid -1');
+  }
+  // Find the tab by viewletRequestId
+  const tab = findTabByEditorUid(state, editorUid);
+  if (!tab) {
+    // Tab was closed, dispose viewlet
+    return state;
+  }
+
+  // Mark viewlet as ready and set instance id
+  // Reference nodes will handle rendering at the correct position automatically
+  const newState = updateTab(state, tab.id, {
+    editorUid,
+    loadingState: 'loaded'
+  });
+
+  // No attach commands needed - virtual DOM reference nodes handle positioning
+  return newState;
+};
+
+const handleCreate = async command => {
+  // Safe to call - no visible side effects
+
+  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);
+
+  // After viewlet is created, mark it as ready
+  // Attachment is handled automatically by virtual DOM reference nodes
+  const {
+    newState: state,
+    oldState
+  } = get(command.uid);
+  const readyState = handleViewletReady(state, command.editorUid);
+  set(command.uid, oldState, readyState);
+  return readyState;
+};
+
+const handleDetach = async command => {
+  // Hides viewlet but keeps it alive
+
+  await invoke('Viewlet.detach', command.instanceId);
+};
+
+const handleDispose = async command => {
+  // Fully destroys viewlet
+
+  await invoke('Viewlet.dispose', command.instanceId);
+};
+
+const handleSetBounds = async command => {
+  await invoke('Viewlet.setBounds', command.instanceId, command.bounds);
+};
+
+const executeViewletCommand = async command => {
+  switch (command.type) {
+    case 'attach':
+      await handleAttach(command);
+      return;
+    case 'create':
+      await handleCreate(command);
+      return;
+    case 'detach':
+      await handleDetach(command);
+      return;
+    case 'dispose':
+      await handleDispose(command);
+      return;
+    case 'setBounds':
+      await handleSetBounds(command);
+      return;
+  }
+};
+const executeViewletCommands = async commands => {
+  for (const command of commands) {
+    await executeViewletCommand(command);
+  }
+};
+
+const requestIdState = {
+  counter: 0
+};
+const getNextRequestId = () => {
+  return ++requestIdState.counter;
+};
+
+const getEditorInputEditorType = editorInput => {
+  switch (editorInput.type) {
+    case 'diff-editor':
+    case 'extension-detail-view':
+    case 'image':
+    case 'video':
+      return 'custom';
+    case 'editor':
+      return 'text';
+  }
+};
+
+const getEditorInputUri = editorInput => {
+  switch (editorInput.type) {
+    case 'diff-editor':
+      return `diff://?left=${encodeURIComponent(editorInput.uriLeft)}&right=${encodeURIComponent(editorInput.uriRight)}`;
+    case 'editor':
+    case 'image':
+    case 'video':
+      return editorInput.uri;
+    case 'extension-detail-view':
+      return `extension-detail://${editorInput.extensionId}`;
+  }
+};
+
+const imageExtensions = new Set(['.avif', '.bmp', '.gif', '.ico', '.jpeg', '.jpg', '.png', '.svg', '.tif', '.tiff', '.webp']);
+const videoExtensions = new Set(['.avi', '.m4v', '.mkv', '.mov', '.mp4', '.mpeg', '.mpg', '.ogv', '.webm']);
+const getPathEndIndex = pathName => {
+  const queryIndex = pathName.indexOf('?');
+  const hashIndex = pathName.indexOf('#');
+  if (queryIndex === -1) {
+    return hashIndex === -1 ? pathName.length : hashIndex;
+  }
+  if (hashIndex === -1) {
+    return queryIndex;
+  }
+  return Math.min(queryIndex, hashIndex);
+};
+const getPathName = uri => {
+  if (uri.startsWith('file://')) {
+    try {
+      return new URL(uri).pathname;
+    } catch {
+      return uri;
+    }
+  }
+  return uri;
+};
+const getLowerCaseExtension = uri => {
+  const pathName = getPathName(uri);
+  const endIndex = getPathEndIndex(pathName);
+  const cleanPath = pathName.slice(0, endIndex);
+  const lastDotIndex = cleanPath.lastIndexOf('.');
+  const lastSlashIndex = cleanPath.lastIndexOf('/');
+  if (lastDotIndex === -1 || lastDotIndex < lastSlashIndex) {
+    return '';
+  }
+  return cleanPath.slice(lastDotIndex).toLowerCase();
+};
+const getEditorInputFromUri = uri => {
+  if (uri.startsWith('diff://?')) {
+    try {
+      const parsed = new URL(uri);
+      const uriLeft = parsed.searchParams.get('left');
+      const uriRight = parsed.searchParams.get('right');
+      if (uriLeft && uriRight) {
+        return {
+          type: 'diff-editor',
+          uriLeft,
+          uriRight
+        };
+      }
+    } catch {
+      // Ignore malformed legacy URIs and fall back to a text editor input.
+    }
+  }
+  if (uri.startsWith('extension-detail://')) {
+    const extensionIdWithPath = uri.slice('extension-detail://'.length);
+    const extensionId = extensionIdWithPath.split('/', 1)[0];
+    if (extensionId) {
+      return {
+        extensionId,
+        type: 'extension-detail-view'
+      };
+    }
+  }
+  const extension = getLowerCaseExtension(uri);
+  if (imageExtensions.has(extension)) {
+    return {
+      type: 'image',
+      uri
+    };
+  }
+  if (videoExtensions.has(extension)) {
+    return {
+      type: 'video',
+      uri
+    };
+  }
+  return {
+    type: 'editor',
+    uri
+  };
+};
+const getNormalizedEditorInput = tab => {
+  const {
+    editorInput: tabEditorInput,
+    uri: tabUri
+  } = tab ?? {};
+  let uri;
+  if (typeof tabUri === 'string') {
+    uri = tabUri;
+  } else if (typeof tabEditorInput?.uri === 'string') {
+    const {
+      uri: tabEditorInputUri
+    } = tabEditorInput;
+    uri = tabEditorInputUri;
+  }
+  if (uri) {
+    const inferredEditorInput = getEditorInputFromUri(uri);
+    if (inferredEditorInput.type !== 'editor') {
+      return inferredEditorInput;
+    }
+  }
+  return tab?.editorInput;
+};
+const normalizeTabEditorInput = tab => {
+  const editorInput = getNormalizedEditorInput(tab);
+  if (!editorInput) {
+    return tab;
+  }
+  const uri = typeof tab?.uri === 'string' ? tab.uri : getEditorInputUri(editorInput);
+  return {
+    ...tab,
+    editorInput,
+    editorType: getEditorInputEditorType(editorInput),
+    uri
+  };
+};
+const getNormalizedOpenEditorInput = uri => {
+  return getEditorInputFromUri(uri);
+};
+
+const shouldLoadContentForTab = tab => {
+  if (tab.editorInput && tab.editorInput.type !== 'editor') {
+    return false;
+  }
+  if (!tab.uri) {
+    return false;
+  }
+  if (tab.loadingState === 'loading') {
+    return false;
+  }
+  return tab.loadingState !== 'loaded' || tab.editorUid === -1;
+};
+
+const getActiveTabId$1 = state => {
   const {
     layout
   } = state;
   const {
+    activeGroupId,
     groups
   } = layout;
-  for (const group of groups) {
-    const tab = group.tabs.find(t => t.editorUid === editorUid);
-    if (tab) {
-      return tab;
-    }
-  }
-  return undefined;
+  const activeGroup = groups.find(group => group.id === activeGroupId);
+  return activeGroup?.activeTabId;
 };
 
-/**
- * Called when renderer reports viewlet finished creating.
- * With reference nodes, attachment is handled automatically by virtual DOM rendering.
- * No commands needed - state update is sufficient.
- */
-const handleViewletReady = (state, editorUid) => {
-  if (editorUid === -1) {
-    throw new Error('Invalid editorUid -1');
-  }
-  // Find the tab by viewletRequestId
-  const tab = findTabByEditorUid(state, editorUid);
-  if (!tab) {
-    // Tab was closed, dispose viewlet
-    return state;
+const getSelectedTabData = (state, groupIndex, index) => {
+  const group = state.layout.groups[groupIndex];
+  if (!group || index < 0 || index >= group.tabs.length) {
+    return undefined;
   }
-
-  // Mark viewlet as ready and set instance id
-  // Reference nodes will handle rendering at the correct position automatically
-  const newState = updateTab(state, tab.id, {
-    editorUid,
-    loadingState: 'loaded'
-  });
-
-  // No attach commands needed - virtual DOM reference nodes handle positioning
-  return newState;
-};
-
-const handleCreate = async command => {
-  // Safe to call - no visible side effects
-
-  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);
-
-  // After viewlet is created, mark it as ready
-  // Attachment is handled automatically by virtual DOM reference nodes
-  const {
-    newState: state,
-    oldState
-  } = get(command.uid);
-  const readyState = handleViewletReady(state, command.editorUid);
-  set(command.uid, oldState, readyState);
-  return readyState;
-};
-
-const handleDetach = async command => {
-  // Hides viewlet but keeps it alive
-
-  await invoke('Viewlet.detach', command.instanceId);
-};
-
-const handleDispose = async command => {
-  // Fully destroys viewlet
-
-  await invoke('Viewlet.dispose', command.instanceId);
+  const tab = group.tabs[index];
+  return {
+    group,
+    groupId: group.id,
+    tab,
+    tabId: tab.id
+  };
 };
 
-const handleSetBounds = async command => {
-  await invoke('Viewlet.setBounds', command.instanceId, command.bounds);
+const getUpdatedGroups = (groups, groupIndex, needsLoading, tabId) => {
+  return groups.map((group, index) => {
+    if (index !== groupIndex) {
+      return {
+        ...group,
+        focused: false
+      };
+    }
+    const tabs = needsLoading ? group.tabs.map(tab => {
+      if (tab.id !== tabId) {
+        return tab;
+      }
+      return {
+        ...tab,
+        errorMessage: '',
+        loadingState: 'loading'
+      };
+    }) : group.tabs;
+    return {
+      ...group,
+      activeTabId: tabId,
+      focused: true,
+      tabs
+    };
+  });
 };
 
-const executeViewletCommands = async commands => {
-  for (const command of commands) {
-    switch (command.type) {
-      case 'attach':
-        await handleAttach(command);
-        break;
-      case 'create':
-        await handleCreate(command);
-        break;
-      case 'detach':
-        await handleDetach(command);
-        break;
-      case 'dispose':
-        await handleDispose(command);
-        break;
-      case 'setBounds':
-        await handleSetBounds(command);
-        break;
-    }
-  }
+const createViewlet = async (viewletModuleId, editorUid, tabId, bounds, uri) => {
+  await invoke('Layout.createViewlet', viewletModuleId, editorUid, tabId, bounds, uri);
 };
 
 const findTabById = (state, tabId) => {
@@ -2439,6 +2499,49 @@ const findTabById = (state, tabId) => {
   return undefined;
 };
 
+const getSelectedTabBounds = state => {
+  return {
+    height: state.height - state.tabHeight,
+    width: state.width,
+    x: state.x,
+    y: state.y + state.tabHeight
+  };
+};
+
+const getViewletModuleId$1 = async uri => {
+  // Query RendererWorker for viewlet module ID (optional, may fail in tests)
+  let viewletModuleId;
+  try {
+    viewletModuleId = await invoke('Layout.getModuleId', uri);
+  } catch {
+    // Viewlet creation is optional - silently ignore if RendererWorker isn't available
+  }
+  return viewletModuleId;
+};
+
+const DiffEditor = 'DiffEditor';
+const EditorText = 'Editor';
+const ExtensionDetail = 'ExtensionDetail';
+const QuickPick = 'QuickPick';
+
+const getViewletModuleIdForEditorInput = async editorInput => {
+  switch (editorInput.type) {
+    case 'diff-editor':
+      return DiffEditor;
+    case 'editor':
+    case 'image':
+    case 'video':
+      return getViewletModuleId$1(editorInput.uri);
+    case 'extension-detail-view':
+      return ExtensionDetail;
+  }
+};
+
+const getViewletModuleId = async tab => {
+  const normalizedTab = normalizeTabEditorInput(tab);
+  return normalizedTab.editorInput ? getViewletModuleIdForEditorInput(normalizedTab.editorInput) : invoke('Layout.getModuleId', normalizedTab.uri);
+};
+
 const startContentLoading = async (oldState, state, tabId, path, requestId) => {
   try {
     const getLatestState = () => {
@@ -2493,28 +2596,6 @@ const maybeCreateViewletForSelectedTab = async (state, newState, groupIndex, ind
   return maybeStartLoading(state, stateWithViewlet, tabId, tab, needsLoading, requestId);
 };
 
-// Counter for request IDs to handle race conditions
-let requestIdCounter = 0;
-const getNextRequestId = () => {
-  return ++requestIdCounter;
-};
-
-const shouldLoadContentForTab = tab => {
-  if (tab.editorInput && tab.editorInput.type !== 'editor') {
-    return false;
-  }
-  if (!tab.uri) {
-    return false;
-  }
-  if (tab.loadingState === 'loading') {
-    return false;
-  }
-  if (tab.loadingState === 'loaded' && tab.editorUid !== -1) {
-    return false;
-  }
-  return true;
-};
-
 const selectTab = async (state, groupIndex, index) => {
   const {
     layout,
@@ -2629,7 +2710,7 @@ const focusPreviousTab = async state => {
   }
 
   // If not at the first tab, select the previous tab, otherwise cycle to last
-  const previousTabIndex = activeTabIndex > 0 ? activeTabIndex - 1 : activeGroup.tabs.length - 1;
+  const previousTabIndex = (activeTabIndex > 0 ? activeTabIndex : activeGroup.tabs.length) - 1;
   return selectTab(state, activeGroupIndex, previousTabIndex);
 };
 
@@ -2691,7 +2772,7 @@ const parseRawGroupId = rawGroupId => {
   if (!rawGroupId) {
     return undefined;
   }
-  const groupId = Number.parseFloat(rawGroupId);
+  const groupId = Number(rawGroupId);
   return Number.isNaN(groupId) ? undefined : groupId;
 };
 
@@ -2965,6 +3046,9 @@ const getLabel = uri => {
   if (uri.startsWith('language-models://')) {
     return 'Language Models';
   }
+  if (uri.startsWith('process-explorer://')) {
+    return 'Process Explorer';
+  }
   if (uri.startsWith(inlineDiffPrefix)) {
     return getInlineDiffLabel(uri);
   }
@@ -2980,6 +3064,8 @@ const getEditorInputTitle = editorInput => {
         return `${leftTitle} - ${rightTitle}`;
       }
     case 'editor':
+    case 'image':
+    case 'video':
       return getLabel(editorInput.uri);
     case 'extension-detail-view':
       return editorInput.extensionId;
@@ -3755,7 +3841,7 @@ const handleContextMenu = async (state, rawGroupId, x, y) => {
   if (rawGroupId === undefined) {
     return state;
   }
-  const groupId = rawGroupId === '' ? NoGroupId : Number.parseInt(rawGroupId, 10);
+  const groupId = rawGroupId === '' ? NoGroupId : Number(rawGroupId);
   if (Number.isNaN(groupId)) {
     return state;
   }
@@ -4052,8 +4138,8 @@ const parse = sashId => {
   if (!beforeRaw || !afterRaw) {
     return undefined;
   }
-  const beforeGroupId = Number.parseFloat(beforeRaw);
-  const afterGroupId = Number.parseFloat(afterRaw);
+  const beforeGroupId = Number(beforeRaw);
+  const afterGroupId = Number(afterRaw);
   if (!Number.isFinite(beforeGroupId) || !Number.isFinite(afterGroupId)) {
     return undefined;
   }
@@ -4292,10 +4378,7 @@ const isValidMainAreaLayout = layout => {
   if (!Array.isArray(layoutObj.groups)) {
     return false;
   }
-  if (!layoutObj.groups.every(isValidEditorGroup)) {
-    return false;
-  }
-  return true;
+  return !!layoutObj.groups.every(isValidEditorGroup);
 };
 
 const normalizeRestoredTab = tab => {
@@ -4343,7 +4426,7 @@ const tryRestoreLayout = savedState => {
       const groupDirection = normalizeLayoutDirection(group?.direction);
       return {
         ...group,
-        ...(groupDirection === undefined ? {} : {
+        ...(groupDirection !== undefined && {
           direction: groupDirection
         }),
         tabs: Array.isArray(group?.tabs) ? group.tabs.map(normalizeRestoredTab) : []
@@ -5082,12 +5165,12 @@ const getChildrenWithCount = (nodes, startIndex, childCount) => {
 };
 
 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;
   }
+  const patches = [];
   // Handle reference nodes - special handling for uid changes
   if (oldNode.type === Reference) {
     if (oldNode.uid !== newNode.uid) {
@@ -5123,7 +5206,7 @@ const compareNodes = (oldNode, newNode) => {
   }
   // Check for removed attributes
   for (const key of oldKeys) {
-    if (!(key in newNode)) {
+    if (!Object.hasOwn(newNode, key)) {
       patches.push({
         type: RemoveAttribute,
         key
@@ -5141,11 +5224,78 @@ const treeToArray = node => {
   return result;
 };
 
+const navigateToChild = (patches, currentChildIndex, index) => {
+  if (currentChildIndex === -1) {
+    patches.push({
+      type: NavigateChild,
+      index
+    });
+    return index;
+  }
+  if (currentChildIndex !== index) {
+    patches.push({
+      type: NavigateSibling,
+      index
+    });
+  }
+  return index;
+};
+const navigateToParent = (patches, currentChildIndex) => {
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+  }
+  return -1;
+};
+const addTree = (newNode, patches) => {
+  patches.push({
+    type: Add,
+    nodes: treeToArray(newNode)
+  });
+};
+const replaceTree = (newNode, patches) => {
+  patches.push({
+    type: Replace,
+    nodes: treeToArray(newNode)
+  });
+};
+const diffExistingChild = (oldNode, newNode, patches, currentChildIndex, index) => {
+  const nodePatches = compareNodes(oldNode.node, newNode.node);
+  if (nodePatches === null) {
+    const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
+    replaceTree(newNode, patches);
+    return nextChildIndex;
+  }
+  const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+  if (nodePatches.length === 0 && !hasChildrenToCompare) {
+    return currentChildIndex;
+  }
+  const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
+  if (nodePatches.length > 0) {
+    patches.push(...nodePatches);
+  }
+  if (hasChildrenToCompare) {
+    diffChildren(oldNode.children, newNode.children, patches);
+  }
+  return nextChildIndex;
+};
+const diffRootNode = (oldNode, newNode, patches) => {
+  const nodePatches = compareNodes(oldNode.node, newNode.node);
+  if (nodePatches === null) {
+    replaceTree(newNode, patches);
+    return;
+  }
+  if (nodePatches.length > 0) {
+    patches.push(...nodePatches);
+  }
+  if (oldNode.children.length > 0 || newNode.children.length > 0) {
+    diffChildren(oldNode.children, newNode.children, patches);
+  }
+};
 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];
@@ -5154,88 +5304,17 @@ const diffChildren = (oldChildren, newChildren, patches) => {
       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
+      currentChildIndex = navigateToParent(patches, currentChildIndex);
+      addTree(newNode, patches);
+      continue;
+    }
+    if (!newNode) {
       indicesToRemove.push(i);
+      continue;
     }
+    currentChildIndex = diffExistingChild(oldNode, newNode, patches, currentChildIndex, i);
   }
-  // Navigate back to parent if we ended at a child
-  if (currentChildIndex >= 0) {
-    patches.push({
-      type: NavigateParent
-    });
-  }
-  // Add remove patches in reverse order (highest index first)
-  // This ensures indices remain valid as we remove
+  navigateToParent(patches, currentChildIndex);
   for (let j = indicesToRemove.length - 1; j >= 0; j--) {
     patches.push({
       type: RemoveChild,
@@ -5244,33 +5323,11 @@ const diffChildren = (oldChildren, newChildren, patches) => {
   }
 };
 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);
+    diffRootNode(oldTree[0], newTree[0], patches);
+    return;
   }
+  diffChildren(oldTree, newTree, patches);
 };
 
 const removeTrailingNavigationPatches = patches => {
@@ -5394,11 +5451,13 @@ const renderEditor = tab => {
 const renderTabActions = (isDirty, tabIndex, groupIndex) => {
   if (isDirty) {
     return [{
+      'aria-label': 'Close',
       childCount: 1,
       className: EditorTabCloseButton,
       'data-groupIndex': groupIndex,
       'data-index': tabIndex,
-      type: Div
+      onClick: HandleClickClose,
+      type: Button$2
     }, {
       childCount: 0,
       className: MaskIconCircleFilled,
@@ -5438,8 +5497,8 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
     className,
     'data-groupIndex': groupIndex,
     'data-index': tabIndex,
-    onClick: HandleClickTab,
     onContextMenu: HandleTabContextMenu,
+    onMouseDown: HandleClickTab,
     role: 'tab',
     title: tab.uri || tab.title,
     type: Div
@@ -5908,7 +5967,7 @@ const saveState = state => {
   const {
     activeGroupId: originalActiveGroupId
   } = layout;
-  const activeGroupId = originalActiveGroupId !== undefined && !filteredGroups.some(g => g.id === originalActiveGroupId) ? undefined : originalActiveGroupId;
+  const activeGroupId = originalActiveGroupId !== undefined && filteredGroups.every(g => g.id !== originalActiveGroupId) ? undefined : originalActiveGroupId;
   return {
     layout: {
       ...layout,
@@ -6196,11 +6255,11 @@ const listen = async () => {
   await Promise.all([initializeRendererWorker(), initializeIconThemeWorker(), initializeClipBoardWorker()]);
 };
 
-const main$2 = async () => {
+const main$1 = async () => {
   await listen();
 };
 
-const main$1 = async () => {
+const main = async () => {
   registerCommands(commandMap);
   const rpc = await create$4({
     commandMap: commandMap
@@ -6208,10 +6267,5 @@ const main$1 = async () => {
   set$1(rpc);
 };
 
-const main = async () => {
-  await main$2();
-  await main$1();
-};
-main$2();
-
-export { main };
+await main$1();
+await main();

package/package.json

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