@lvce-editor/main-area-worker 1.2.0 → 1.4.0

package/dist/mainAreaWorkerMain.js

@@ -90,12 +90,24 @@ const getType = value => {
       return Unknown;
   }
 };
+const object = value => {
+  const type = getType(value);
+  if (type !== Object$1) {
+    throw new AssertionError('expected value to be of type object');
+  }
+};
 const number = value => {
   const type = getType(value);
   if (type !== Number$1) {
     throw new AssertionError('expected value to be of type number');
   }
 };
+const string = value => {
+  const type = getType(value);
+  if (type !== String) {
+    throw new AssertionError('expected value to be of type string');
+  }
+};
 
 const isMessagePort = value => {
   return value && value instanceof MessagePort;
@@ -450,7 +462,7 @@ const getFirstEvent = (eventEmitter, eventMap) => {
   return promise;
 };
 const Message$1 = 3;
-const create$5 = async ({
+const create$5$1 = async ({
   isMessagePortOpen,
   messagePort
 }) => {
@@ -501,7 +513,7 @@ const wrap$5 = messagePort => {
 };
 const IpcParentWithMessagePort$1 = {
   __proto__: null,
-  create: create$5,
+  create: create$5$1,
   signal: signal$1,
   wrap: wrap$5
 };
@@ -720,7 +732,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$2(id, errorProperty);
 };
-const create$3 = (message, result) => {
+const create$5 = (message, result) => {
   return {
     jsonrpc: Two$1,
     id: message.id,
@@ -729,7 +741,7 @@ const create$3 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$3(message, resultProperty);
+  return create$5(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -1031,6 +1043,7 @@ const createMockRpc = ({
 const Button = 1;
 const Div = 4;
 const Span = 8;
+const Text = 12;
 const Pre = 51;
 
 const TargetName = 'event.target.name';
@@ -1052,7 +1065,7 @@ const remove = id => {
 };
 
 /* eslint-disable  @typescript-eslint/explicit-function-return-type */
-const create$2 = rpcId => {
+const create$3 = rpcId => {
   return {
     async dispose() {
       const rpc = get$1(rpcId);
@@ -1090,12 +1103,12 @@ const create$2 = rpcId => {
 
 const {
   set: set$2
-} = create$2(ExtensionHostWorker);
+} = create$3(ExtensionHostWorker);
 
 const {
   invokeAndTransfer,
   set: set$1
-} = create$2(RendererWorker);
+} = create$3(RendererWorker);
 const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
   const command = 'HandleMessagePort.handleMessagePort2';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
@@ -1105,7 +1118,7 @@ const toCommandId = key => {
   const dotIndex = key.indexOf('.');
   return key.slice(dotIndex + 1);
 };
-const create$1 = () => {
+const create$2 = () => {
   const states = Object.create(null);
   const commandMapRef = {};
   return {
@@ -1191,9 +1204,9 @@ const {
   getCommandIds,
   registerCommands,
   set,
-  wrapCommand} = create$1();
+  wrapCommand} = create$2();
 
-const create = (uid, uri, x, y, width, height, platform, assetDir) => {
+const create$1 = (uid, uri, x, y, width, height, platform, assetDir) => {
   const state = {
     assetDir,
     platform,
@@ -1263,13 +1276,381 @@ const initialize = async () => {
 };
 
 const loadContent = async state => {
+  const tabs = [{
+    content: '',
+    editorType: 'text',
+    id: '1',
+    isDirty: false,
+    title: 'tab 1'
+  }, {
+    content: '',
+    editorType: 'text',
+    id: '2',
+    isDirty: false,
+    title: 'tab 2'
+  }];
+  return {
+    ...state,
+    layout: {
+      activeGroupId: '0',
+      direction: 'horizontal',
+      groups: [{
+        activeTabId: '',
+        direction: 'horizontal',
+        focused: false,
+        id: '0',
+        size: 300,
+        tabs
+      }]
+    }
+  };
+};
+
+let idCounter = 0;
+const create = () => {
+  idCounter++;
+  return idCounter;
+};
+
+const getTitle = (uri, homeDir) => {
+  if (!uri) {
+    return '';
+  }
+  return uri;
+};
+const getLabel = uri => {
+  if (uri.startsWith('settings://')) {
+    return 'Settings';
+  }
+  if (uri.startsWith('simple-browser://')) {
+    return 'Simple Browser';
+  }
+  return uri;
+  // return Workspace.pathBaseName(uri)
+};
+
+/**
+ *
+ * @param {string} uri
+ * @returns
+ */
+const getFileIcon = uri => {
+  if (uri === 'app://keybindings') {
+    return `MaskIconRecordKey`;
+  }
+  if (uri.startsWith('extension-detail://')) {
+    return `MaskIconExtensions`;
+  }
+  return '';
+};
+
+const Preview = 1 << 4;
+
+// @ts-nocheck
+
+const focusIndex = async (state, index) => {
+  const {
+    activeGroupIndex,
+    groups,
+    tabHeight,
+    uid
+  } = state;
+  const group = groups[activeGroupIndex];
+  const {
+    editors
+  } = group;
+  const oldActiveIndex = group.activeIndex;
+  if (index === oldActiveIndex) {
+    return {
+      commands: [],
+      newState: state
+    };
+  }
+  const newGroup = {
+    ...group,
+    activeIndex: index
+  };
+  const newGroups = [...groups.slice(0, activeGroupIndex), newGroup, ...groups.slice(activeGroupIndex + 1)];
+  const newState = {
+    ...state,
+    groups: newGroups
+  };
+  const editor = editors[index];
+  const {
+    x
+  } = group;
+  const y = group.y + tabHeight;
+  const {
+    width
+  } = group;
+  const contentHeight = group.height - tabHeight;
+  const id = await ViewletMap.getModuleId(editor.uri);
+  const oldEditor = editors[oldActiveIndex];
+  const oldId = await ViewletMap.getModuleId(oldEditor.uri);
+  // @ts-ignore
+  ViewletStates.getInstance(oldId);
+  const previousUid = oldEditor.uid;
+  number(previousUid);
+  const disposeCommands = Viewlet.disposeFunctional(previousUid);
+  const maybeHiddenEditorInstance = ViewletStates.getInstance(editor.uid);
+  if (maybeHiddenEditorInstance) {
+    const commands = Viewlet.showFunctional(editor.uid);
+    const allCommands = [...disposeCommands, ...commands];
+    return {
+      commands: allCommands,
+      newState
+    };
+  }
+  const instanceUid = create();
+  const instance = ViewletManager.create(ViewletModule.load, id, uid, editor.uri, x, y, width, contentHeight);
+  instance.show = false;
+  instance.setBounds = false;
+  instance.uid = instanceUid;
+  editor.uid = instanceUid;
+  const resizeCommands = ['Viewlet.setBounds', instanceUid, x, tabHeight, width, contentHeight];
+
+  // @ts-ignore
+  const commands = await ViewletManager.load(instance);
+  // @ts-ignore
+  commands.unshift(...disposeCommands);
+  // @ts-ignore
+  commands.push(resizeCommands);
+  // @ts-ignore
+  commands.push(['Viewlet.append', uid, instanceUid]);
+  return {
+    commands,
+    newState
+  };
+};
+
+// @ts-nocheck
+const openUri = async (state, uri, focus = true, {
+  preview = false,
+  ...context
+} = {}) => {
+  object(state);
+  string(uri);
+  const {
+    activeGroupIndex,
+    groups,
+    tabFontFamily,
+    tabFontSize,
+    tabFontWeight,
+    tabHeight,
+    tabLetterSpacing
+  } = state;
+  const {
+    x
+  } = state;
+  const y = state.y + tabHeight;
+  const {
+    width
+  } = state;
+  const contentHeight = state.height - tabHeight;
+  // @ts-ignore
+  const moduleId = await ViewletMap.getModuleId(uri, context.opener);
+  let activeGroup = groups[activeGroupIndex];
+  activeGroup ||= {
+    activeIndex: -1,
+    editors: [],
+    focusedIndex: -1,
+    height: state.height,
+    tabsUid: create(),
+    uid: create(),
+    width,
+    x,
+    y: 0
+  };
+  const {
+    activeIndex,
+    editors
+  } = activeGroup;
+  const previousEditor = editors[activeIndex];
+  let disposeCommands;
+  // @ts-ignore
+  if (previousEditor && previousEditor.uri === uri && previousEditor.opener === context.opener) {
+    return {
+      commands: [],
+      newState: state
+    };
+  }
+  for (let i = 0; i < editors.length; i++) {
+    const editor = editors[i];
+    if (editor.uri === uri &&
+    // @ts-ignore
+    editor.opener === context.opener) {
+      return focusIndex(state, i);
+    }
+  }
+  // TODO editor needs to be disposed when closing
+  //  other tabs and closing all tabs
+  if (previousEditor) {
+    const previousUid = previousEditor.uid;
+    disposeCommands = Viewlet.hideFunctional(previousUid);
+  }
+  const instanceUid = create();
+  const instance = ViewletManager.create(ViewletModule.load, moduleId, state.uid, uri, activeGroup.x, y, activeGroup.width, contentHeight);
+  instance.uid = instanceUid;
+  // const oldActiveIndex = state.activeIndex
+  const tabLabel = getLabel(uri);
+  const tabWidth = MeasureTabWidth.measureTabWidth(tabLabel, tabFontWeight, tabFontSize, tabFontFamily, tabLetterSpacing);
+  const tabTitle = getTitle(uri);
+  const icon = getFileIcon(uri);
+  const newEditor = {
+    flags: Preview,
+    icon,
+    label: tabLabel,
+    moduleId,
+    tabWidth,
+    title: tabTitle,
+    uid: instanceUid,
+    uri
+  };
+  const newEditors = [...activeGroup.editors, newEditor];
+  const newActiveIndex = newEditors.length - 1;
+  const newGroup = {
+    ...activeGroup,
+    activeIndex: newActiveIndex,
+    editors: newEditors
+  };
+  const newGroups = [...groups.slice(0, activeGroupIndex), newGroup, ...groups.slice(activeGroupIndex + 1)];
+  // @ts-ignore
+  instance.show = false;
+  instance.setBounds = false;
+  ViewletStates.setState(state.uid, {
+    ...state,
+    activeGroupIndex: 0,
+    groups: newGroups,
+    pendingUid: instanceUid
+  });
+  if (context) {
+    instance.args = [context];
+  }
+  // @ts-ignore
+  const commands = await ViewletManager.load(instance, focus);
+  commands.push(['Viewlet.setBounds', instanceUid, activeGroup.x, tabHeight, activeGroup.width, contentHeight]);
+  let {
+    tabsUid
+  } = state;
+  if (tabsUid === -1) {
+    tabsUid = create();
+  }
+  if (disposeCommands) {
+    commands.push(...disposeCommands);
+  }
+  commands.push(['Viewlet.append', state.uid, instanceUid]);
+  if (focus) {
+    commands.push(['Viewlet.focus', instanceUid]);
+  }
+  const latestState = ViewletStates.getState(state.uid);
+  const latestPendingUid = latestState.pendingUid;
+  if (latestPendingUid !== instanceUid) {
+    return {
+      commands: [],
+      newState: state
+    };
+  }
+  if (!ViewletStates.hasInstance(instanceUid)) {
+    return {
+      commands,
+      newState: state
+    };
+  }
+  return {
+    commands,
+    newState: {
+      ...state,
+      groups: newGroups,
+      tabsUid
+    }
+  };
+};
+
+const text = data => {
   return {
-    ...state
+    childCount: 0,
+    text: data,
+    type: Text
   };
 };
 
+const CSS_CLASSES = {
+  EDITOR_GROUPS_CONTAINER: 'editor-groups-container'};
+
+const renderTab = (tab, isActive) => {
+  return [{
+    childCount: 2,
+    className: 'MainTab',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'TabTitle',
+    type: Span
+  }, text(tab.isDirty ? `*${tab.title}` : tab.title), {
+    childCount: 1,
+    className: 'TabCloseButton',
+    type: Button
+  }, text('×')];
+};
+const renderTabBar = group => {
+  return [{
+    childCount: group.tabs.length,
+    className: 'MainTabs',
+    type: Div
+  }, ...group.tabs.flatMap(tab => renderTab(tab))];
+};
+const renderEditor = tab => {
+  if (!tab) {
+    return [text('Tab not found')];
+  }
+  if (tab.editorType === 'custom') {
+    return [{
+      childCount: 1,
+      className: 'CustomEditor',
+      type: Div
+    }, text(`Custom Editor: ${tab.customEditorId}`)];
+  }
+  return [{
+    childCount: 1,
+    className: 'TextEditor',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'EditorContent',
+    type: Pre
+  }, text(tab.content || '')];
+};
+const renderEditorGroup = group => {
+  const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
+  return [{
+    childCount: 2,
+    className: 'EditorGroup',
+    type: Div
+  }, ...renderTabBar(group), {
+    childCount: activeTab ? 1 : 1,
+    className: 'EditorContainer',
+    type: Div
+  }, ...renderEditor(activeTab)];
+};
+const getMainAreaVirtualDom = layout => {
+  return [{
+    childCount: 1,
+    className: 'Main',
+    type: Div
+  }, {
+    childCount: layout.groups.length,
+    className: CSS_CLASSES.EDITOR_GROUPS_CONTAINER,
+    type: Div
+  }, ...layout.groups.flatMap(renderEditorGroup)];
+};
+
 const renderItems = (oldState, newState) => {
-  return [SetDom2, newState.uid, []];
+  const {
+    layout,
+    uid
+  } = newState;
+  const dom = getMainAreaVirtualDom(layout);
+  return [SetDom2, uid, dom];
 };
 
 const getRenderer = diffType => {
@@ -1336,12 +1717,13 @@ const saveState = uid => {
 };
 
 const commandMap = {
-  'MainArea.create': create,
+  'MainArea.create': create$1,
   'MainArea.diff2': diff2,
   'MainArea.getCommandIds': getCommandIds,
   'MainArea.handleClick': wrapCommand(handleClick),
   'MainArea.initialize': initialize,
   'MainArea.loadContent': wrapCommand(loadContent),
+  'MainArea.openUri': wrapCommand(openUri),
   'MainArea.render2': render2,
   'MainArea.renderEventListeners': renderEventListeners,
   'MainArea.resize': wrapCommand(resize),
@@ -1361,560 +1743,10 @@ const main$2 = async () => {
   await listen();
 };
 
-const closeEditorGroup = (state, groupId) => {
-  const groupIndex = state.layout.groups.findIndex(group => group.id === groupId);
-  if (groupIndex === -1 || state.layout.groups.length <= 1) {
-    return state;
-  }
-  const remainingGroups = state.layout.groups.filter(group => group.id !== groupId);
-  const redistributedGroups = remainingGroups.map((group, index) => ({
-    ...group,
-    size: Math.round(100 / remainingGroups.length)
-  }));
-  const newActiveGroupId = state.layout.activeGroupId === groupId ? remainingGroups[0].id : state.layout.activeGroupId;
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      activeGroupId: newActiveGroupId,
-      groups: redistributedGroups
-    }
-  };
-};
-
-const closeTab = (state, groupId, tabId) => {
-  const groups = state.layout.groups.map(group => {
-    if (group.id === groupId) {
-      const newTabs = group.tabs.filter(tab => tab.id !== tabId);
-      let newActiveTabId = group.activeTabId;
-      if (group.activeTabId === tabId) {
-        const tabIndex = group.tabs.findIndex(tab => tab.id === tabId);
-        if (newTabs.length > 0) {
-          newActiveTabId = newTabs[Math.min(tabIndex, newTabs.length - 1)].id;
-        } else {
-          newActiveTabId = undefined;
-        }
-      }
-      return {
-        ...group,
-        activeTabId: newActiveTabId,
-        tabs: newTabs
-      };
-    }
-    return group;
-  });
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      groups
-    }
-  };
-};
-
-const focusEditorGroup = (state, groupId) => {
-  const groups = state.layout.groups.map(group => ({
-    ...group,
-    focused: group.id === groupId
-  }));
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      activeGroupId: groupId,
-      groups
-    }
-  };
-};
-
-const CSS_CLASSES = {
-  CUSTOM_EDITOR: 'custom-editor',
-  EDITOR_CONTAINER: 'editor-container',
-  EDITOR_CONTENT: 'editor-content',
-  EDITOR_GROUP: 'editor-group',
-  EDITOR_GROUP_FOCUSED: 'focused',
-  EDITOR_GROUPS_CONTAINER: 'editor-groups-container',
-  EMPTY_EDITOR: 'empty-editor',
-  MAIN_AREA: 'main-area',
-  TAB: 'tab',
-  TAB_ACTIVE: 'active',
-  TAB_BAR: 'tab-bar',
-  TAB_CLOSE: 'tab-close',
-  TAB_TITLE: 'tab-title',
-  TEXT_EDITOR: 'text-editor'
-};
-const CSS_ATTRIBUTES = {
-  DATA_ACTION: 'data-action',
-  DATA_CUSTOM_EDITOR_ID: 'data-custom-editor-id',
-  DATA_DIRECTION: 'data-direction',
-  DATA_GROUP_ID: 'data-group-id',
-  DATA_LANGUAGE: 'data-language',
-  DATA_TAB_ID: 'data-tab-id'
-};
-const CSS_STYLES = {
-  CUSTOM_EDITOR_STYLE: 'flex: 1; overflow: auto;',
-  EDITOR_GROUP_BASE: 'display: flex; flex-direction: column; border-right: 1px solid var(--border-color);',
-  EDITOR_GROUP_FOCUSED_STYLE: 'box-shadow: 0 0 0 1px var(--focus-border-color);',
-  EMPTY_EDITOR_STYLE: 'flex: 1; display: flex; align-items: center; justify-content: center; color: var(--dimmed-color);',
-  FLEX_COLUMN: 'display: flex; flex-direction: column; height: 100%;',
-  FLEX_ROW: 'display: flex; flex-direction: row; height: 100%;',
-  TAB_ACTIVE_STYLE: 'background: var(--tab-active-background); color: var(--tab-active-color);',
-  TAB_BAR_BASE: 'display: flex; align-items: center; background: var(--tab-bar-background); border-bottom: 1px solid var(--border-color);',
-  TAB_BASE: 'padding: 4px 8px; cursor: pointer; border-right: 1px solid var(--border-color); display: flex; align-items: center; gap: 4px;',
-  TAB_CLOSE_STYLE: 'background: none; border: none; cursor: pointer; padding: 2px; border-radius: 2px; opacity: 0.7;',
-  TEXT_EDITOR_STYLE: 'flex: 1; overflow: auto; font-family: var(--editor-font-family); font-size: var(--editor-font-size);'
-};
-const THEMES = {
-  DARK: {
-    '--border-color': '#3e3e42',
-    '--dimmed-color': '#858585',
-    '--editor-font-family': 'Consolas, Monaco, "Courier New", monospace',
-    '--editor-font-size': '14px',
-    '--focus-border-color': '#0078d4',
-    '--tab-active-background': '#1e1e1e',
-    '--tab-active-color': '#ffffff',
-    '--tab-bar-background': '#252526',
-    '--tab-close-hover-background': '#3e3e42'
-  },
-  LIGHT: {
-    '--border-color': '#e1e1e1',
-    '--dimmed-color': '#999999',
-    '--editor-font-family': 'Consolas, Monaco, "Courier New", monospace',
-    '--editor-font-size': '14px',
-    '--focus-border-color': '#0078d4',
-    '--tab-active-background': '#ffffff',
-    '--tab-active-color': '#333333',
-    '--tab-bar-background': '#f3f3f3',
-    '--tab-close-hover-background': '#e1e1e1'
-  }
-};
-const getThemeStyles = (theme = 'DARK') => {
-  const themeVars = THEMES[theme];
-  return Object.entries(themeVars).map(([key, value]) => `${key}: ${value};`).join(' ');
-};
-
-const renderTab = (tab, isActive) => {
-  return {
-    attributes: {
-      [CSS_ATTRIBUTES.DATA_TAB_ID]: tab.id,
-      style: `${CSS_STYLES.TAB_BASE} ${isActive ? CSS_STYLES.TAB_ACTIVE_STYLE : ''}`
-    },
-    childCount: 2,
-    children: [{
-      childCount: 1,
-      children: [tab.isDirty ? `*${tab.title}` : tab.title],
-      className: CSS_CLASSES.TAB_TITLE,
-      type: Span
-    }, {
-      attributes: {
-        [CSS_ATTRIBUTES.DATA_ACTION]: 'close-tab',
-        [CSS_ATTRIBUTES.DATA_TAB_ID]: tab.id,
-        style: CSS_STYLES.TAB_CLOSE_STYLE
-      },
-      childCount: 1,
-      children: ['×'],
-      className: CSS_CLASSES.TAB_CLOSE,
-      type: Button
-    }],
-    className: `${CSS_CLASSES.TAB} ${isActive ? CSS_CLASSES.TAB_ACTIVE : ''}`,
-    type: Div
-  };
-};
-const renderTabBar = group => {
-  return {
-    attributes: {
-      [CSS_ATTRIBUTES.DATA_GROUP_ID]: group.id,
-      style: CSS_STYLES.TAB_BAR_BASE
-    },
-    childCount: group.tabs.length,
-    children: group.tabs.map(tab => renderTab(tab, tab.id === group.activeTabId)),
-    className: CSS_CLASSES.TAB_BAR,
-    type: Div
-  };
-};
-const renderEditor = tab => {
-  if (tab.editorType === 'custom') {
-    return {
-      attributes: {
-        [CSS_ATTRIBUTES.DATA_CUSTOM_EDITOR_ID]: tab.customEditorId,
-        [CSS_ATTRIBUTES.DATA_TAB_ID]: tab.id,
-        style: CSS_STYLES.CUSTOM_EDITOR_STYLE
-      },
-      childCount: 1,
-      children: [`Custom Editor: ${tab.customEditorId}`],
-      className: CSS_CLASSES.CUSTOM_EDITOR,
-      type: Div
-    };
-  }
-  return {
-    attributes: {
-      [CSS_ATTRIBUTES.DATA_LANGUAGE]: tab.language || 'plaintext',
-      [CSS_ATTRIBUTES.DATA_TAB_ID]: tab.id,
-      style: CSS_STYLES.TEXT_EDITOR_STYLE
-    },
-    childCount: 1,
-    children: [{
-      childCount: 1,
-      children: [tab.content || ''],
-      className: CSS_CLASSES.EDITOR_CONTENT,
-      type: Pre
-    }],
-    className: CSS_CLASSES.TEXT_EDITOR,
-    type: Div
-  };
-};
-const renderEditorGroup = group => {
-  const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
-  return {
-    attributes: {
-      [CSS_ATTRIBUTES.DATA_GROUP_ID]: group.id,
-      style: `${CSS_STYLES.EDITOR_GROUP_BASE} flex: ${group.size}; ${group.focused ? CSS_STYLES.EDITOR_GROUP_FOCUSED_STYLE : ''}`
-    },
-    childCount: 2,
-    children: [renderTabBar(group), {
-      childCount: activeTab ? 1 : 1,
-      children: activeTab ? [renderEditor(activeTab)] : [{
-        attributes: {
-          style: CSS_STYLES.EMPTY_EDITOR_STYLE
-        },
-        childCount: 1,
-        children: ['No open tabs'],
-        className: CSS_CLASSES.EMPTY_EDITOR,
-        type: Div
-      }],
-      className: CSS_CLASSES.EDITOR_CONTAINER,
-      type: Div
-    }],
-    className: `${CSS_CLASSES.EDITOR_GROUP} ${group.focused ? CSS_CLASSES.EDITOR_GROUP_FOCUSED : ''}`,
-    type: Div
-  };
-};
-const getMainAreaVirtualDom = state => {
-  return [{
-    attributes: {
-      [CSS_ATTRIBUTES.DATA_DIRECTION]: state.layout.direction,
-      style: getThemeStyles('DARK')
-    },
-    childCount: 1,
-    children: [{
-      attributes: {
-        style: state.layout.direction === 'horizontal' ? CSS_STYLES.FLEX_ROW : CSS_STYLES.FLEX_COLUMN
-      },
-      childCount: state.layout.groups.length,
-      children: state.layout.groups.map(renderEditorGroup),
-      className: CSS_CLASSES.EDITOR_GROUPS_CONTAINER,
-      type: Div
-    }],
-    className: CSS_CLASSES.MAIN_AREA,
-    type: Div
-  }];
-};
-
-const splitEditorGroup = (state, groupId, direction) => {
-  const sourceGroup = state.layout.groups.find(group => group.id === groupId);
-  if (!sourceGroup) {
-    return state;
-  }
-  const newGroupId = `group-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
-  const isHorizontalSplit = direction === 'left' || direction === 'right';
-  const newLayoutDirection = isHorizontalSplit ? 'horizontal' : 'vertical';
-  const updatedGroups = state.layout.groups.map(group => {
-    if (group.id === groupId) {
-      return {
-        ...group,
-        focused: false,
-        size: 50
-      };
-    }
-    return group;
-  });
-  const newGroup = {
-    activeTabId: undefined,
-    focused: true,
-    id: newGroupId,
-    size: 50,
-    tabs: []
-  };
-  let reorderedGroups;
-  if (direction === 'right' || direction === 'down') {
-    reorderedGroups = [...updatedGroups, newGroup];
-  } else {
-    const sourceIndex = updatedGroups.findIndex(group => group.id === groupId);
-    reorderedGroups = [...updatedGroups.slice(0, sourceIndex), newGroup, ...updatedGroups.slice(sourceIndex)];
-  }
-  return {
-    ...state,
-    layout: {
-      activeGroupId: newGroupId,
-      direction: newLayoutDirection,
-      groups: reorderedGroups
-    }
-  };
-};
-
-const switchTab = (state, groupId, tabId) => {
-  const groups = state.layout.groups.map(group => {
-    if (group.id === groupId) {
-      const tabExists = group.tabs.some(tab => tab.id === tabId);
-      if (tabExists) {
-        return {
-          ...group,
-          activeTabId: tabId
-        };
-      }
-    }
-    return group;
-  });
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      groups
-    }
-  };
-};
-
-const handleMainAreaClick = (state, event) => {
-  const {
-    target
-  } = event;
-  if (!target.dataset) {
-    return state;
-  }
-  const {
-    dataset
-  } = target;
-
-  // Handle tab click
-  if (dataset.tabId) {
-    const {
-      groupId
-    } = dataset;
-    if (groupId) {
-      return switchTab(state, groupId, dataset.tabId);
-    }
-  }
-
-  // Handle tab close button
-  if (dataset.action === 'close-tab' && dataset.tabId) {
-    const {
-      groupId
-    } = dataset;
-    if (groupId) {
-      return closeTab(state, groupId, dataset.tabId);
-    }
-  }
-
-  // Handle editor group focus
-  if (dataset.groupId && !dataset.tabId) {
-    return focusEditorGroup(state, dataset.groupId);
-  }
-
-  // Handle split actions
-  if (dataset.action?.startsWith('split-')) {
-    const {
-      groupId
-    } = dataset;
-    if (groupId) {
-      const direction = dataset.action.replace('split-', '');
-      return splitEditorGroup(state, groupId, direction);
-    }
-  }
-  return state;
-};
-
-const handleMainAreaKeyboard = (state, event) => {
-  const {
-    ctrlKey = false,
-    key,
-    metaKey = false,
-    shiftKey = false
-  } = event;
-  const isCtrl = ctrlKey || metaKey;
-  const activeGroup = state.layout.groups.find(group => group.focused);
-  if (!activeGroup) {
-    return state;
-  }
-
-  // Tab navigation
-  if (key === 'Tab' && isCtrl) {
-    const groupIndex = state.layout.groups.findIndex(group => group.id === activeGroup.id);
-    const nextGroupIndex = shiftKey ? (groupIndex - 1 + state.layout.groups.length) % state.layout.groups.length : (groupIndex + 1) % state.layout.groups.length;
-    const nextGroup = state.layout.groups[nextGroupIndex];
-    return focusEditorGroup(state, nextGroup.id);
-  }
-
-  // Switch between tabs within group
-  if (key === 'ArrowLeft' && isCtrl && !shiftKey) {
-    const activeTabIndex = activeGroup.tabs.findIndex(tab => tab.id === activeGroup.activeTabId);
-    if (activeTabIndex > 0) {
-      const prevTab = activeGroup.tabs[activeTabIndex - 1];
-      return switchTab(state, activeGroup.id, prevTab.id);
-    }
-  }
-  if (key === 'ArrowRight' && isCtrl && !shiftKey) {
-    const activeTabIndex = activeGroup.tabs.findIndex(tab => tab.id === activeGroup.activeTabId);
-    if (activeTabIndex < activeGroup.tabs.length - 1) {
-      const nextTab = activeGroup.tabs[activeTabIndex + 1];
-      return switchTab(state, activeGroup.id, nextTab.id);
-    }
-  }
-
-  // Close current tab
-  if (key === 'w' && isCtrl && activeGroup.activeTabId) {
-    return closeTab(state, activeGroup.id, activeGroup.activeTabId);
-  }
-
-  // Split editor
-  if (key === '\\' && isCtrl) {
-    const direction = shiftKey ? 'down' : 'right';
-    return splitEditorGroup(state, activeGroup.id, direction);
-  }
-  return state;
-};
-
-const moveTabToGroup = (state, sourceGroupId, targetGroupId, tabId, targetIndex) => {
-  const sourceGroup = state.layout.groups.find(group => group.id === sourceGroupId);
-  const targetGroup = state.layout.groups.find(group => group.id === targetGroupId);
-  if (!sourceGroup || !targetGroup || sourceGroupId === targetGroupId) {
-    return state;
-  }
-  const tabToMove = sourceGroup.tabs.find(tab => tab.id === tabId);
-  if (!tabToMove) {
-    return state;
-  }
-  const updatedGroups = state.layout.groups.map(group => {
-    if (group.id === sourceGroupId) {
-      const newTabs = group.tabs.filter(tab => tab.id !== tabId);
-      let newActiveTabId = group.activeTabId;
-      if (group.activeTabId === tabId) {
-        if (newTabs.length > 0) {
-          const removedIndex = group.tabs.findIndex(tab => tab.id === tabId);
-          newActiveTabId = newTabs[Math.min(removedIndex, newTabs.length - 1)].id;
-        } else {
-          newActiveTabId = undefined;
-        }
-      }
-      return {
-        ...group,
-        activeTabId: newActiveTabId,
-        tabs: newTabs
-      };
-    }
-    if (group.id === targetGroupId) {
-      const insertIndex = targetIndex === undefined ? group.tabs.length : targetIndex;
-      const newTabs = [...group.tabs];
-      newTabs.splice(insertIndex, 0, tabToMove);
-      return {
-        ...group,
-        activeTabId: tabId,
-        tabs: newTabs
-      };
-    }
-    return group;
-  });
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      activeGroupId: targetGroupId,
-      groups: updatedGroups
-    }
-  };
-};
-
-const startTabDrag = (state, tabId, groupId) => {
-  return {
-    dragState: {
-      draggedTabId: tabId,
-      sourceGroupId: groupId
-    },
-    state
-  };
-};
-const updateTabDrag = (state, dragState, targetGroupId, targetIndex) => {
-  return {
-    ...dragState,
-    targetGroupId,
-    targetIndex
-  };
-};
-const endTabDrag = (state, dragState) => {
-  if (dragState.targetGroupId && dragState.targetGroupId !== dragState.sourceGroupId) {
-    return moveTabToGroup(state, dragState.sourceGroupId, dragState.targetGroupId, dragState.draggedTabId, dragState.targetIndex);
-  }
-  return state;
-};
-
-const openTab = (state, groupId, tab) => {
-  const newTab = {
-    ...tab,
-    id: `tab-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
-  };
-  const groups = state.layout.groups.map(group => {
-    if (group.id === groupId) {
-      return {
-        ...group,
-        activeTabId: newTab.id,
-        tabs: [...group.tabs, newTab]
-      };
-    }
-    return group;
-  });
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      groups
-    }
-  };
-};
-
-const restoreMainAreaState = (savedState, currentState) => {
-  try {
-    const parsed = JSON.parse(savedState);
-    return {
-      ...currentState,
-      layout: parsed.layout
-    };
-  } catch (error) {
-    console.error('Failed to restore main area state:', error);
-    return currentState;
-  }
-};
-
-const saveMainAreaState = state => {
-  return JSON.stringify({
-    layout: state.layout,
-    version: '1.0.0'
-  });
-};
-
-const mainAreaCommandMap = {
-  'MainArea.closeEditorGroup': wrapCommand((state, groupId) => closeEditorGroup(state, groupId)),
-  'MainArea.closeTab': wrapCommand((state, groupId, tabId) => closeTab(state, groupId, tabId)),
-  'MainArea.create': () => {},
-  'MainArea.endTabDrag': wrapCommand((state, dragState) => endTabDrag(state, dragState)),
-  'MainArea.focusEditorGroup': wrapCommand((state, groupId) => focusEditorGroup(state, groupId)),
-  'MainArea.getCommandIds': getCommandIds,
-  'MainArea.getVirtualDom': state => getMainAreaVirtualDom(state),
-  'MainArea.handleClick': wrapCommand((state, event) => handleMainAreaClick(state, event)),
-  'MainArea.handleKeyboard': wrapCommand((state, event) => handleMainAreaKeyboard(state, event)),
-  'MainArea.moveTabToGroup': wrapCommand((state, sourceGroupId, targetGroupId, tabId, targetIndex) => moveTabToGroup(state, sourceGroupId, targetGroupId, tabId, targetIndex)),
-  'MainArea.openTab': wrapCommand((state, groupId, tab) => openTab(state, groupId, tab)),
-  'MainArea.restoreState': wrapCommand((state, savedState) => restoreMainAreaState(savedState, state)),
-  'MainArea.saveState': state => saveMainAreaState(state),
-  'MainArea.splitEditorGroup': wrapCommand((state, groupId, direction) => splitEditorGroup(state, groupId, direction)),
-  'MainArea.startTabDrag': (state, tabId, groupId) => startTabDrag(state, tabId, groupId),
-  'MainArea.switchTab': wrapCommand((state, groupId, tabId) => switchTab(state, groupId, tabId)),
-  'MainArea.terminate': terminate,
-  'MainArea.updateTabDrag': (state, dragState, targetGroupId, targetIndex) => updateTabDrag(state, dragState, targetGroupId, targetIndex)
-};
-
 const main$1 = async () => {
-  registerCommands(mainAreaCommandMap);
+  registerCommands(commandMap);
   const rpc = await WebWorkerRpcClient.create({
-    commandMap: mainAreaCommandMap
+    commandMap: commandMap
   });
   set$1(rpc);
 };

package/package.json

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