@lvce-editor/static-server 0.74.2 → 0.74.4

package/static/{1b54f05 → 897f05d}/packages/main-area-worker/dist/mainAreaWorkerMain.js

@@ -87,17 +87,56 @@ const terminate = () => {
   globalThis.close();
 };
 
-const closeTab = (state, groupId, tabId) => {
+const getGroupIndexById = (state, groupId) => {
   const {
     layout
   } = state;
   const {
-    activeGroupId,
     groups
   } = layout;
+  return groups.findIndex(group => group.id === groupId);
+};
+
+const redistributeSizesWithRounding = groups => {
+  return groups.map(group => ({
+    ...group,
+    size: Math.round(100 / groups.length)
+  }));
+};
+
+const withGroupsAndActiveGroup = (state, groups, activeGroupId) => {
+  return {
+    ...state,
+    layout: {
+      ...state.layout,
+      activeGroupId,
+      groups
+    }
+  };
+};
+
+const withEmptyGroups = state => {
+  return withGroupsAndActiveGroup(state, [], undefined);
+};
+
+const withGroups = (state, groups) => {
+  return {
+    ...state,
+    layout: {
+      ...state.layout,
+      groups
+    }
+  };
+};
+
+const closeTab = (state, groupId, tabId) => {
+  const {
+    activeGroupId,
+    groups
+  } = state.layout;
 
   // Find the group to close the tab from
-  const groupIndex = groups.findIndex(g => g.id === groupId);
+  const groupIndex = getGroupIndexById(state, groupId);
   if (groupIndex === -1) {
     return state;
   }
@@ -136,48 +175,29 @@ const closeTab = (state, groupId, tabId) => {
 
     // If there are remaining groups, redistribute sizes
     if (remainingGroups.length > 0) {
-      const redistributedGroups = remainingGroups.map(grp => ({
-        ...grp,
-        size: Math.round(100 / remainingGroups.length)
-      }));
+      const redistributedGroups = redistributeSizesWithRounding(remainingGroups);
       const newActiveGroupId = activeGroupId === groupId ? remainingGroups[0]?.id : activeGroupId;
-      return {
-        ...state,
-        layout: {
-          ...layout,
-          activeGroupId: newActiveGroupId,
-          groups: redistributedGroups
-        }
-      };
+      return withGroupsAndActiveGroup(state, redistributedGroups, newActiveGroupId);
     }
 
     // If no remaining groups, return empty layout
-    return {
-      ...state,
-      layout: {
-        ...layout,
-        activeGroupId: undefined,
-        groups: []
-      }
-    };
+    return withEmptyGroups(state);
   }
-  return {
-    ...state,
-    layout: {
-      ...layout,
-      groups: newGroups
-    }
-  };
+  return withGroups(state, newGroups);
 };
 
-const closeActiveEditor = state => {
+const getFocusedGroup = state => {
   const {
     layout
   } = state;
   const {
     groups
   } = layout;
-  const focusedGroup = groups.find(group => group.focused);
+  return groups.find(group => group.focused);
+};
+
+const closeActiveEditor = state => {
+  const focusedGroup = getFocusedGroup(state);
   if (!focusedGroup) {
     return state;
   }
@@ -191,16 +211,12 @@ const closeActiveEditor = state => {
 };
 
 const closeAll$1 = state => {
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      activeGroupId: undefined,
-      groups: []
-    }
-  };
+  return withEmptyGroups(state);
 };
 
+const isFocused = group => {
+  return group.focused;
+};
 const closeFocusedTab = state => {
   const {
     layout
@@ -208,7 +224,7 @@ const closeFocusedTab = state => {
   const {
     groups
   } = layout;
-  const focusedGroup = groups.find(group => group.focused);
+  const focusedGroup = groups.find(isFocused);
   if (!focusedGroup) {
     return state;
   }
@@ -264,6 +280,10 @@ const closeOtherTabs = (state, groupId) => {
   };
 };
 
+const getGroupById = (state, groupId) => {
+  return state.layout.groups.find(group => group.id === groupId);
+};
+
 const closeTabsRight = (state, groupId) => {
   const {
     layout
@@ -271,7 +291,7 @@ const closeTabsRight = (state, groupId) => {
   const {
     groups
   } = layout;
-  const group = groups.find(g => g.id === groupId);
+  const group = getGroupById(state, groupId);
   if (!group) {
     return state;
   }
@@ -300,13 +320,7 @@ const closeTabsRight = (state, groupId) => {
     }
     return g;
   });
-  return {
-    ...state,
-    layout: {
-      ...layout,
-      groups: newGroups
-    }
-  };
+  return withGroups(state, newGroups);
 };
 
 const None$1 = 'none';
@@ -1667,6 +1681,7 @@ const copyPath$1 = async (state, path) => {
 
 const copyRelativePath$1 = async (state, path) => {
   string(path);
+  // TODO use clipboard worker
   const relativePath = await invoke('Workspace.pathBaseName', path);
   await invoke('ClipBoard.writeText', relativePath);
   return state;
@@ -1693,6 +1708,8 @@ const create$2 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight =
       direction: 'horizontal',
       groups: []
     },
+    maxOpenEditorGroups: Number.POSITIVE_INFINITY,
+    maxOpenEditors: Number.POSITIVE_INFINITY,
     platform,
     splitButtonEnabled: false,
     tabHeight,
@@ -1706,7 +1723,7 @@ const create$2 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight =
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.width === newState.width && oldState.height === newState.height;
+  return false;
 };
 
 const isEqual = (oldState, newState) => {
@@ -2273,7 +2290,19 @@ const handleClick = async (state, name) => {
   return state;
 };
 
+const redistributeSizesWithRemainder = groups => {
+  const baseSize = Math.floor(100 / groups.length);
+  const remainder = 100 % groups.length;
+  return groups.map((group, index) => ({
+    ...group,
+    size: baseSize + (index === groups.length - 1 ? remainder : 0)
+  }));
+};
+
 const closeEditorGroup$1 = (state, groupId) => {
+  if (Number.isNaN(groupId)) {
+    return state;
+  }
   const {
     layout
   } = state;
@@ -2281,26 +2310,14 @@ const closeEditorGroup$1 = (state, groupId) => {
     activeGroupId,
     groups
   } = layout;
-  const groupIndex = groups.findIndex(group => group.id === groupId);
+  const groupIndex = getGroupIndexById(state, 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 redistributedGroups = redistributeSizesWithRemainder(remainingGroups);
   const newActiveGroupId = activeGroupId === groupId ? remainingGroups[0].id : activeGroupId;
-  return {
-    ...state,
-    layout: {
-      ...layout,
-      activeGroupId: newActiveGroupId,
-      groups: redistributedGroups
-    }
-  };
+  return withGroupsAndActiveGroup(state, redistributedGroups, newActiveGroupId);
 };
 
 const getActiveGroup = (groups, activeGroupId) => {
@@ -2340,6 +2357,11 @@ const handleClickTogglePreview = async state => {
   return state;
 };
 
+const CloseGroup = 'close-group';
+const RetryOpen = 'retry-open';
+const SplitRight = 'split-right';
+const TogglePreview$1 = 'toggle-preview';
+
 const getBasename$1 = uri => {
   const lastSlashIndex = uri.lastIndexOf('/');
   if (lastSlashIndex === -1) {
@@ -2360,7 +2382,7 @@ const getLabel = uri => {
   return getBasename$1(uri);
 };
 
-const createEmptyGroup = (state, uri, requestId) => {
+const createEmptyGroup = (state, uri, requestId, preview = false) => {
   const {
     layout
   } = state;
@@ -2378,6 +2400,7 @@ const createEmptyGroup = (state, uri, requestId) => {
     icon: '',
     id: tabId,
     isDirty: false,
+    isPreview: preview,
     language: '',
     loadingState: 'loading',
     title,
@@ -2402,8 +2425,12 @@ const createEmptyGroup = (state, uri, requestId) => {
 };
 
 const openTab = (state, groupId, tab) => {
-  const newTab = 'id' in tab && tab.id !== undefined ? tab : {
+  const normalizedTab = {
     ...tab,
+    isPreview: tab.isPreview ?? false
+  };
+  const newTab = 'id' in normalizedTab && normalizedTab.id !== undefined ? normalizedTab : {
+    ...normalizedTab,
     id: create$1()
   };
   const {
@@ -2433,7 +2460,7 @@ const openTab = (state, groupId, tab) => {
   };
 };
 
-const ensureActiveGroup = (state, uri) => {
+const ensureActiveGroup = (state, uri, preview = false) => {
   // Find the active group (by activeGroupId or focused flag)
   const {
     layout
@@ -2445,11 +2472,49 @@ const ensureActiveGroup = (state, uri) => {
   const activeGroup = activeGroupId === undefined ? groups.find(group => group.focused) : groups.find(group => group.id === activeGroupId);
 
   // Generate a request ID for content loading
-  getNextRequestId();
+  const requestId = getNextRequestId();
 
   // If no active group exists, create one
   let newState;
   if (activeGroup) {
+    const activeTab = activeGroup.tabs.find(tab => tab.id === activeGroup.activeTabId);
+    if (activeTab?.isPreview) {
+      const title = getLabel(uri);
+      const updatedGroups = groups.map(group => {
+        if (group.id !== activeGroup.id) {
+          return group;
+        }
+        const updatedTabs = group.tabs.map(tab => {
+          if (tab.id !== activeTab.id) {
+            return tab;
+          }
+          return {
+            ...tab,
+            errorMessage: '',
+            icon: '',
+            isDirty: false,
+            isPreview: preview,
+            language: '',
+            loadingState: 'loading',
+            title,
+            uri
+          };
+        });
+        return {
+          ...group,
+          tabs: updatedTabs
+        };
+      });
+      return {
+        ...state,
+        layout: {
+          ...layout,
+          activeGroupId: activeGroup.id,
+          groups: updatedGroups
+        }
+      };
+    }
+
     // Create a new tab with the URI in the active group
     const title = getLabel(uri);
     const tabId = create$1();
@@ -2461,6 +2526,7 @@ const ensureActiveGroup = (state, uri) => {
       icon: '',
       id: tabId,
       isDirty: false,
+      isPreview: preview,
       language: '',
       loadingState: 'loading',
       title,
@@ -2468,7 +2534,7 @@ const ensureActiveGroup = (state, uri) => {
     };
     newState = openTab(state, activeGroup.id, newTab);
   } else {
-    newState = createEmptyGroup(state, uri);
+    newState = createEmptyGroup(state, uri, requestId, preview);
   }
   return newState;
 };
@@ -2670,6 +2736,7 @@ const openUri = async (state, options) => {
     uid
   } = state;
   const uri = getOptionUriOptions(options);
+  const preview = typeof options === 'string' ? false : options.preview ?? false;
 
   // Check if a tab with this URI already exists in the passed-in state
   const existingTab = findTabByUri(state, uri);
@@ -2717,7 +2784,7 @@ const openUri = async (state, options) => {
     tabId = existingTab.tab.id;
   } else {
     // Add tab to state BEFORE any async calls to prevent race conditions
-    stateWithTab = ensureActiveGroup(currentState, uri);
+    stateWithTab = ensureActiveGroup(currentState, uri, preview);
     tabId = getActiveTabId(stateWithTab);
   }
 
@@ -2850,6 +2917,19 @@ const retryOpen = async state => {
   return openUri(state, tab.uri);
 };
 
+const rebalanceGroupSizes = groups => {
+  const groupCount = groups.length;
+  if (groupCount === 0) {
+    return [];
+  }
+  const evenSize = Number((100 / groupCount).toFixed(6));
+  const assignedSize = Number((evenSize * (groupCount - 1)).toFixed(6));
+  const lastSize = Number((100 - assignedSize).toFixed(6));
+  return groups.map((group, index) => ({
+    ...group,
+    size: index === groupCount - 1 ? lastSize : evenSize
+  }));
+};
 const splitEditorGroup$1 = (state, groupId, direction) => {
   const {
     layout
@@ -2889,41 +2969,47 @@ const splitEditorGroup$1 = (state, groupId, direction) => {
     const sourceIndex = updatedGroups.findIndex(group => group.id === groupId);
     reorderedGroups = [...updatedGroups.slice(0, sourceIndex), newGroup, ...updatedGroups.slice(sourceIndex)];
   }
+  const resizedGroups = rebalanceGroupSizes(reorderedGroups);
   return {
     ...state,
     layout: {
       activeGroupId: newGroupId,
       direction: newLayoutDirection,
-      groups: reorderedGroups
+      groups: resizedGroups
     }
   };
 };
 
 const handleClickAction = async (state, action, rawGroupId) => {
+  const {
+    layout
+  } = state;
+  const {
+    activeGroupId,
+    groups
+  } = layout;
   if (!action) {
     return state;
   }
-  if (state.layout.activeGroupId === undefined) {
+  if (activeGroupId === undefined) {
     return state;
   }
-  const activeGroup = getActiveGroup(state.layout.groups, state.layout.activeGroupId);
+  const activeGroup = getActiveGroup(groups, activeGroupId);
   if (!activeGroup) {
     return state;
   }
   switch (action) {
-    case 'close-group':
+    case CloseGroup:
       if (rawGroupId) {
         const groupId = Number.parseInt(rawGroupId, 10);
-        if (!Number.isNaN(groupId)) {
-          return closeEditorGroup$1(state, groupId);
-        }
+        return closeEditorGroup$1(state, groupId);
       }
       return state;
-    case 'retry-open':
+    case RetryOpen:
       return retryOpen(state);
-    case 'split-right':
+    case SplitRight:
       return splitEditorGroup$1(state, activeGroup.id, Right);
-    case 'toggle-preview':
+    case TogglePreview$1:
       return handleClickTogglePreview(state);
     default:
       return state;
@@ -3000,6 +3086,7 @@ const IconButton = 'IconButton';
 const MainTab = 'MainTab';
 const MainTabs = 'MainTabs';
 const MainTabModified = 'MainTabModified';
+const MainTabPreview = 'MainTabPreview';
 const MainTabSelected = 'MainTabSelected';
 
 const newFile = async state => {
@@ -3062,6 +3149,7 @@ const newFile = async state => {
     icon: '',
     id: tabId,
     isDirty: false,
+    isPreview: false,
     language: 'plaintext',
     loadingState: 'loading',
     title: 'Untitled',
@@ -3195,8 +3283,8 @@ const parse = sashId => {
   if (!beforeRaw || !afterRaw) {
     return undefined;
   }
-  const beforeGroupId = Number.parseInt(beforeRaw, 10);
-  const afterGroupId = Number.parseInt(afterRaw, 10);
+  const beforeGroupId = Number.parseFloat(beforeRaw);
+  const afterGroupId = Number.parseFloat(afterRaw);
   if (!Number.isFinite(beforeGroupId) || !Number.isFinite(afterGroupId)) {
     return undefined;
   }
@@ -3206,18 +3294,22 @@ const parse = sashId => {
   };
 };
 
-const handleSashPointerDown = async (state, sashId, clientXRaw, clientYRaw) => {
+const handleSashPointerDown = async (state, sashId, clientX, clientY) => {
   const parsed = parse(sashId);
   if (!parsed) {
     return state;
   }
-  const beforeGroup = state.layout.groups.find(group => group.id === parsed.beforeGroupId);
-  const afterGroup = state.layout.groups.find(group => group.id === parsed.afterGroupId);
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const beforeGroup = groups.find(group => group.id === parsed.beforeGroupId);
+  const afterGroup = groups.find(group => group.id === parsed.afterGroupId);
   if (!beforeGroup || !afterGroup) {
     return state;
   }
-  const clientX = Number.parseFloat(clientXRaw);
-  const clientY = Number.parseFloat(clientYRaw);
   if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
     return state;
   }
@@ -3235,35 +3327,54 @@ const handleSashPointerDown = async (state, sashId, clientXRaw, clientYRaw) => {
   };
 };
 
-const MIN_GROUP_SIZE = 10;
+const MIN_GROUP_WIDTH_PX = 250;
 const clamp = (value, min, max) => {
   return Math.min(max, Math.max(min, value));
 };
 const round = value => {
   return Math.round(value * 100) / 100;
 };
-const handleSashPointerMove = async (state, clientXRaw, clientYRaw) => {
+const getMinGroupSizePercent = axisSize => {
+  if (!axisSize) {
+    return 10;
+  }
+  const minPercent = MIN_GROUP_WIDTH_PX / axisSize * 100;
+  // Ensure minimum is at least 10%, matching the CSS 250px constraint on typical widths
+  return Math.max(minPercent, 10);
+};
+const handleSashPointerMove = async (state, clientX, clientY) => {
   const {
-    sashDrag
+    height,
+    layout,
+    sashDrag,
+    width
   } = state;
   if (!sashDrag) {
     return state;
   }
-  const clientX = Number.parseFloat(clientXRaw);
-  const clientY = Number.parseFloat(clientYRaw);
   if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
     return state;
   }
-  const axisSize = state.layout.direction === 'horizontal' ? state.width : state.height;
+  const {
+    direction,
+    groups
+  } = layout;
+  const axisSize = direction === 'horizontal' ? width : height;
   if (!axisSize) {
     return state;
   }
-  const deltaPx = state.layout.direction === 'horizontal' ? clientX - sashDrag.startClientX : clientY - sashDrag.startClientY;
+  const deltaPx = direction === 'horizontal' ? clientX - sashDrag.startClientX : clientY - sashDrag.startClientY;
   const deltaPercent = deltaPx / axisSize * 100;
   const totalResizableSize = sashDrag.beforeSize + sashDrag.afterSize;
-  const beforeSize = clamp(sashDrag.beforeSize + deltaPercent, MIN_GROUP_SIZE, totalResizableSize - MIN_GROUP_SIZE);
+  let minGroupSize = getMinGroupSizePercent(axisSize);
+
+  // If the minimum size makes it impossible to fit two groups, relax the constraint
+  if (2 * minGroupSize > totalResizableSize) {
+    minGroupSize = totalResizableSize / 2;
+  }
+  const beforeSize = clamp(sashDrag.beforeSize + deltaPercent, minGroupSize, totalResizableSize - minGroupSize);
   const afterSize = totalResizableSize - beforeSize;
-  const groups = state.layout.groups.map(group => {
+  const newGroups = groups.map(group => {
     if (group.id === sashDrag.beforeGroupId) {
       return {
         ...group,
@@ -3281,14 +3392,17 @@ const handleSashPointerMove = async (state, clientXRaw, clientYRaw) => {
   return {
     ...state,
     layout: {
-      ...state.layout,
-      groups
+      ...layout,
+      groups: newGroups
     }
   };
 };
 
 const handleSashPointerUp = async state => {
-  if (!state.sashDrag) {
+  const {
+    sashDrag
+  } = state;
+  if (!sashDrag) {
     return state;
   }
   return {
@@ -3393,10 +3507,13 @@ const handleUriChange = async (state, oldUri, newUri) => {
 };
 
 const handleWorkspaceChange = state => {
+  const {
+    layout
+  } = state;
   return {
     ...state,
     layout: {
-      ...state.layout,
+      ...layout,
       activeGroupId: undefined,
       groups: []
     }
@@ -3426,7 +3543,7 @@ const initialize = async () => {
 };
 
 const isValidTab = tab => {
-  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');
+  return tab && typeof tab.id === 'number' && typeof tab.title === 'string' && typeof tab.isDirty === 'boolean' && typeof tab.isPreview === 'boolean' && typeof tab.editorUid === 'number' && typeof tab.icon === 'string' && (tab.editorType === 'text' || tab.editorType === 'custom');
 };
 
 const isValidEditorGroup = group => {
@@ -3463,23 +3580,31 @@ const tryRestoreLayout = savedState => {
   const {
     layout
   } = savedState;
-  if (!isValidMainAreaLayout(layout)) {
+  if (!layout || typeof layout !== 'object') {
+    return undefined;
+  }
+  const rawLayout = layout;
+  if (!Array.isArray(rawLayout.groups)) {
     return undefined;
   }
 
   // Normalize all tabs to have editorUid: -1 so SelectTab will create viewlets
   // Mark all restored tabs as not dirty
   const normalizedLayout = {
-    ...layout,
-    groups: layout.groups.map(group => ({
+    ...rawLayout,
+    groups: rawLayout.groups.map(group => ({
       ...group,
-      tabs: group.tabs.map(tab => ({
+      tabs: Array.isArray(group?.tabs) ? group.tabs.map(tab => ({
         ...tab,
         editorUid: -1,
-        isDirty: false
-      }))
+        isDirty: false,
+        isPreview: typeof tab?.isPreview === 'boolean' ? tab.isPreview : false
+      })) : []
     }))
   };
+  if (!isValidMainAreaLayout(normalizedLayout)) {
+    return undefined;
+  }
   return normalizedLayout;
 };
 
@@ -3499,7 +3624,10 @@ const createViewlets = async (layout, viewletModuleIds, bounds) => {
 const getViewletModuleIds = async layout => {
   const viewletModuleIds = {};
   for (const group of layout.groups) {
-    const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
+    const {
+      tabs
+    } = group;
+    const activeTab = tabs.find(tab => tab.id === group.activeTabId);
     if (activeTab && activeTab.uri) {
       const viewletModuleId = await getViewletModuleId(activeTab.uri);
       if (viewletModuleId) {
@@ -3511,14 +3639,26 @@ const getViewletModuleIds = async layout => {
 };
 
 const updateTabs = (state, editorUids) => {
-  const updatedGroups = state.layout.groups.map(group => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const updatedGroups = groups.map(group => {
+    const {
+      tabs
+    } = group;
     return {
       ...group,
-      tabs: group.tabs.map(tab => {
-        if (editorUids[tab.id]) {
+      tabs: tabs.map(tab => {
+        const {
+          id
+        } = tab;
+        if (editorUids[id]) {
           return {
             ...tab,
-            editorUid: editorUids[tab.id]
+            editorUid: editorUids[id]
           };
         }
         return tab;
@@ -3528,7 +3668,7 @@ const updateTabs = (state, editorUids) => {
   return {
     ...state,
     layout: {
-      ...state.layout,
+      ...layout,
       groups: updatedGroups
     }
   };
@@ -3753,6 +3893,28 @@ const getMenuEntries = async (state, props) => {
   }
 };
 
+const openUris = async (state, uris) => {
+  if (uris.length === 0) {
+    return state;
+  }
+  if (uris.length === 1) {
+    return openUri(state, uris[0]);
+  }
+  let currentState = await openUri(state, uris[0]);
+  const firstTab = findTabByUri(currentState, uris[0]);
+  for (const uri of uris.slice(1)) {
+    const existingTab = findTabByUri(currentState, uri);
+    if (existingTab) {
+      continue;
+    }
+    currentState = ensureActiveGroup(currentState, uri);
+  }
+  if (!firstTab) {
+    return currentState;
+  }
+  return switchTab(currentState, firstTab.groupId, firstTab.tab.id);
+};
+
 const refresh = state => {
   return {
     ...state
@@ -3762,26 +3924,9 @@ const refresh = state => {
 const getCss = () => {
   const rules = [`.MainArea {
 }`, `.editor-groups-container {
-  position: relative;
-}`, `.Sash {
-  position: absolute;
-  z-index: 1;
-}`, `.SashVertical {
-  top: 0;
-  bottom: 0;
-  width: 0;
-  cursor: col-resize;
-}`, `.SashVertical:hover {
-  width: 4px;
-  margin-left: -2px;
-}`, `.SashHorizontal {
-  left: 0;
-  right: 0;
-  height: 0;
-  cursor: row-resize;
-}`, `.SashHorizontal:hover {
-  height: 4px;
-  margin-top: -2px;
+  overflow: auto;
+}`, `.EditorGroup {
+  min-width: 250px;
 }`];
   const css = rules.join('\n');
   return css;
@@ -4122,7 +4267,8 @@ const renderError = errorMessage => {
   }, text(`Error: ${errorMessage}`), {
     childCount: 1,
     className: `${Button} ${ButtonSecondary}`,
-    'data-action': 'retry-open',
+    'data-action': RetryOpen,
+    name: RetryOpen,
     onClick: HandleClickAction,
     type: Button$2
   }, text('Retry')];
@@ -4214,6 +4360,9 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
   if (tab.isDirty) {
     className += ' ' + MainTabModified;
   }
+  if (tab.isPreview) {
+    className += ' ' + MainTabPreview;
+  }
   return [{
     'aria-selected': isActive,
     childCount: 3,
@@ -4266,9 +4415,9 @@ const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
       ariaLabel: 'Preview',
       childCount: 1,
       className: IconButton,
-      'data-action': 'toggle-preview',
+      'data-action': TogglePreview$1,
       'data-groupId': String(group.id),
-      name: 'toggle-preview',
+      name: TogglePreview$1,
       onClick: HandleClickAction,
       title: togglePreview(),
       type: Button$2
@@ -4282,8 +4431,9 @@ const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
     buttons.push({
       childCount: 1,
       className: EditorGroupActionButton + ' ' + SplitEditorGroupButton,
-      'data-action': 'split-right',
+      'data-action': SplitRight,
       'data-groupId': String(group.id),
+      name: SplitRight,
       onClick: HandleClickAction,
       title: splitEditorGroup(),
       type: Button$2
@@ -4316,20 +4466,32 @@ const renderEmptyGroupCloseButton = (group, groupIndex) => {
     childCount: 1,
     className: EmptyGroupCloseButton,
     'data-groupId': String(group.id),
-    name: 'close-group',
+    name: CloseGroup,
     onClick: HandleClickAction,
     title: closeEditorGroup(),
     type: Button$2
   }, text('✕')];
 };
 
-const renderEmptyEditorGroup = (group, groupIndex, style) => {
+const renderWaterMark = () => {
   return [{
     childCount: 1,
+    className: 'WaterMarkWrapper',
+    type: Div
+  }, {
+    childCount: 0,
+    className: 'WaterMark',
+    type: Div
+  }];
+};
+
+const renderEmptyEditorGroup = (group, groupIndex, style) => {
+  return [{
+    childCount: 2,
     className: EditorGroup,
     style,
     type: Div
-  }, ...renderEmptyGroupCloseButton(group)];
+  }, ...renderEmptyGroupCloseButton(group), ...renderWaterMark()];
 };
 
 const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizeProperty = 'width') => {
@@ -4352,51 +4514,63 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizePr
   }, ...renderEditor(activeTab)];
 };
 
+const getSashClassName = direction => {
+  return direction === 'horizontal' ? 'Sash SashVertical' : 'Sash SashHorizontal';
+};
 const renderSash = (direction, sashId, style) => {
-  return {
+  return [{
     childCount: 0,
-    className: direction === 'horizontal' ? 'Sash SashVertical' : 'Sash SashHorizontal',
+    className: getSashClassName(direction),
     'data-sashId': sashId,
     onPointerDown: HandleSashPointerDown,
-    onPointerMove: HandleSashPointerMove,
-    onPointerUp: HandleSashPointerUp,
     style,
     type: Div
-  };
+  }];
+};
+
+const renderSingleEditorGroup = (layout, splitButtonEnabled, sizeProperty) => {
+  return [{
+    childCount: 1,
+    className: Main,
+    type: Div
+  }, ...renderEditorGroup(layout.groups[0], 0, splitButtonEnabled, sizeProperty)];
 };
 
 const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
-  const sizeProperty = layout.direction === 'vertical' ? 'height' : 'width';
-  if (layout.groups.length === 1) {
-    return [{
-      childCount: 1,
-      className: Main,
-      type: Div
-    }, ...renderEditorGroup(layout.groups[0], 0, splitButtonEnabled, sizeProperty)];
+  const {
+    direction,
+    groups
+  } = layout;
+  const sizeProperty = direction === 'vertical' ? 'height' : 'width';
+  if (groups.length === 1) {
+    return renderSingleEditorGroup(layout, splitButtonEnabled, sizeProperty);
   }
   const children = [];
-  const isSplit = layout.groups.length > 1;
-  const directionClassName = isSplit ? layout.direction === 'horizontal' ? EditorGroupsVertical : EditorGroupsHorizontal : '';
+  const isSplit = groups.length > 1;
+  const directionClassName = isSplit ? direction === 'horizontal' ? EditorGroupsVertical : EditorGroupsHorizontal : '';
   const editorGroupsContainerClassName = directionClassName ? `${EDITOR_GROUPS_CONTAINER} ${directionClassName}` : EDITOR_GROUPS_CONTAINER;
   let sashOffset = 0;
-  for (let i = 0; i < layout.groups.length; i++) {
-    sashOffset += layout.groups[i].size;
+  let childCount = 0;
+  for (let i = 0; i < groups.length; i++) {
+    sashOffset += groups[i].size;
     if (i > 0) {
       // Insert sash between groups
-      const beforeGroupId = layout.groups[i - 1].id;
-      const afterGroupId = layout.groups[i].id;
+      const beforeGroupId = groups[i - 1].id;
+      const afterGroupId = groups[i].id;
       const sashId = create(beforeGroupId, afterGroupId);
-      const style = layout.direction === 'horizontal' ? `left:${sashOffset - layout.groups[i].size}%;` : `top:${sashOffset - layout.groups[i].size}%;`;
-      children.push(renderSash(layout.direction, sashId, style));
+      const style = direction === 'horizontal' ? `left:${sashOffset - groups[i].size}%;` : `top:${sashOffset - groups[i].size}%;`;
+      children.push(...renderSash(direction, sashId, style));
+      childCount++;
     }
-    children.push(...renderEditorGroup(layout.groups[i], i, splitButtonEnabled, sizeProperty));
+    children.push(...renderEditorGroup(groups[i], i, splitButtonEnabled, sizeProperty));
+    childCount++;
   }
   return [{
     childCount: 1,
     className: Main,
     type: Div
   }, {
-    childCount: children.length,
+    childCount,
     className: editorGroupsContainerClassName,
     role: None$1,
     type: Div
@@ -4481,7 +4655,9 @@ const renderEventListeners = () => {
     params: ['handleHeaderDoubleClick', EventTargetClassName, 'event.target.dataset.groupId']
   }, {
     name: HandleSashPointerDown,
-    params: ['handleSashPointerDown', 'event.target.dataset.sashId', ClientX, ClientY]
+    params: ['handleSashPointerDown', 'event.target.dataset.sashId', ClientX, ClientY],
+    preventDefault: true,
+    trackPointerEvents: [HandleSashPointerMove, HandleSashPointerUp]
   }, {
     name: HandleSashPointerMove,
     params: ['handleSashPointerMove', ClientX, ClientY]
@@ -4650,6 +4826,7 @@ const commandMap = {
   'MainArea.loadContent': wrapCommand(loadContent),
   'MainArea.newFile': wrapCommand(newFile),
   'MainArea.openUri': wrapCommand(openUri),
+  'MainArea.openUris': wrapCommand(openUris),
   'MainArea.refresh': wrapCommand(refresh),
   'MainArea.render2': render2,
   'MainArea.renderEventListeners': renderEventListeners,