@lvce-editor/main-area-worker 1.1.0 → 1.3.0

package/dist/mainAreaWorkerMain.js

@@ -508,7 +508,7 @@ const IpcParentWithMessagePort$1 = {
 
 const Two$1 = '2.0';
 const callbacks = Object.create(null);
-const get$3 = id => {
+const get$2 = id => {
   return callbacks[id];
 };
 const remove$1 = id => {
@@ -657,7 +657,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$3(id);
+  const fn = get$2(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -1028,8 +1028,6 @@ const createMockRpc = ({
   return mockRpc;
 };
 
-const Button$1 = 'button';
-
 const Button = 1;
 const Div = 4;
 const Span = 8;
@@ -1047,7 +1045,7 @@ const rpcs = Object.create(null);
 const set$3 = (id, rpc) => {
   rpcs[id] = rpc;
 };
-const get$2 = id => {
+const get$1 = id => {
   return rpcs[id];
 };
 const remove = id => {
@@ -1058,18 +1056,18 @@ const remove = id => {
 const create$2 = rpcId => {
   return {
     async dispose() {
-      const rpc = get$2(rpcId);
+      const rpc = get$1(rpcId);
       await rpc.dispose();
     },
     // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get$2(rpcId);
+      const rpc = get$1(rpcId);
       // @ts-ignore
       return rpc.invoke(method, ...params);
     },
     // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get$2(rpcId);
+      const rpc = get$1(rpcId);
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
@@ -1092,12 +1090,10 @@ const create$2 = rpcId => {
 };
 
 const {
-  invoke: invoke$1,
   set: set$2
 } = create$2(ExtensionHostWorker);
 
 const {
-  invoke,
   invokeAndTransfer,
   set: set$1
 } = create$2(RendererWorker);
@@ -1105,12 +1101,6 @@ const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
   const command = 'HandleMessagePort.handleMessagePort2';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
 };
-const activateByEvent$1 = (event, assetDir, platform) => {
-  return invoke('ExtensionHostManagement.activateByEvent', event, assetDir, platform);
-};
-const getPreference = async key => {
-  return await invoke('Preferences.get', key);
-};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1198,11 +1188,11 @@ const terminate = () => {
 };
 
 const {
-  get: get$1,
-  getCommandIds: getCommandIds$1,
-  registerCommands: registerCommands$1,
+  get,
+  getCommandIds,
+  registerCommands,
   set,
-  wrapCommand: wrapCommand$1} = create$1();
+  wrapCommand} = create$1();
 
 const create = (uid, uri, x, y, width, height, platform, assetDir) => {
   const state = {
@@ -1216,7 +1206,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
 };
 
 const isEqual = (oldState, newState) => {
-  return oldState.statusBarItemsLeft === newState.statusBarItemsLeft && oldState.statusBarItemsRight === newState.statusBarItemsRight;
+  return oldState.layout === newState.layout;
 };
 
 const RenderItems = 4;
@@ -1239,65 +1229,15 @@ const diff2 = uid => {
   const {
     newState,
     oldState
-  } = get$1(uid);
+  } = get(uid);
   const result = diff(oldState, newState);
   return result;
 };
 
-const getMatchingItem = (itemsLeft, itemsRight, name) => {
-  for (const item of itemsLeft) {
-    if (item.name === name) {
-      return item;
-    }
-  }
-  for (const item of itemsRight) {
-    if (item.name === name) {
-      return item;
-    }
-  }
-  return undefined;
-};
-
-const handleClickExtensionStatusBarItem = async name => {
-  // @ts-ignore
-  await invoke$1(`ExtensionHostStatusBar.executeCommand`, name);
-};
-
-const handleClickNotification = async () => {
-  // TODO toggle notifications
-};
-
-const handleClickProblems = async () => {
-  // @ts-ignore
-  await invoke('Layout.showPanel');
-  // @ts-ignore
-  await invoke('Panel.toggleView', 'Problems');
-};
-
-const Notifications = 'Notifications';
-const Problems = 'Problems';
-
 const handleClick = async (state, name) => {
   if (!name) {
     return state;
   }
-  const {
-    statusBarItemsLeft,
-    statusBarItemsRight
-  } = state;
-  const item = getMatchingItem(statusBarItemsLeft, statusBarItemsRight, name);
-  if (!item) {
-    return state;
-  }
-  if (item.name === Notifications) {
-    await handleClickNotification();
-  } else if (item.name === Problems) {
-    await handleClickProblems();
-  } else {
-    await handleClickExtensionStatusBarItem(name);
-  }
-  // TODO
-  // sendExtensionWorker([/* statusBarItemHandleClick */ 7657, /* name */ name])
   return state;
 };
 
@@ -1323,199 +1263,34 @@ const initialize = async () => {
   set$2(rpc);
 };
 
-const getIndex = (items, item) => {
-  for (let i = 0; i < items.length; i++) {
-    if (items[i].name === item.name) {
-      return i;
-    }
-  }
-  return -1;
-};
-
-const updateArray = (items, newItem) => {
-  const index = getIndex(items, newItem);
-  const before = items.slice(0, index);
-  const after = items.slice(index + 1);
-  return [...before, newItem, ...after];
-};
-
-const itemLeftUpdate = (state, newItem) => {
-  return {
-    ...state,
-    statusBarItemsLeft: updateArray([...state.statusBarItemsLeft], newItem)
-  };
-};
-
-const itemRightCreate = (state, newItem) => {
-  const {
-    statusBarItemsRight
-  } = state;
-  const newStatusBarItemsRight = [...statusBarItemsRight, newItem];
-  return {
-    ...state,
-    statusBarItemsRight: newStatusBarItemsRight
-  };
-};
-
-const itemRightUpdate = (state, newItem) => {
-  const {
-    statusBarItemsRight
-  } = state;
-  const newStatusBarItemsRight = updateArray([...statusBarItemsRight], newItem);
-  return {
-    ...state,
-    statusBarItemsRight: newStatusBarItemsRight
-  };
-};
-
-const ProblemsErrorIcon = 'ProblemsErrorIcon';
-const ProblemsWarningIcon = 'ProblemsWarningIcon';
-const StatusBarItem = 'StatusBarItem';
-const StatusBarItemsLeft = 'StatusBarItemsLeft';
-const StatusBarItemsRight = 'StatusBarItemsRight';
-
-const OnStatusBarItem = 'onStatusBarItem';
-
-const GetStatusBarItems = 'ExtensionHost.getStatusBarItems2';
-
-const activateByEvent = (event, assetDir, platform) => {
-  // @ts-ignore
-  return activateByEvent$1(event, assetDir, platform);
-};
-
-const executeProviders = async ({
-  assetDir,
-  combineResults,
-  event,
-  method,
-  noProviderFoundMessage = 'No provider found',
-  noProviderFoundResult,
-  params,
-  platform
-}) => {
-  await activateByEvent(event, assetDir, platform);
-  // @ts-ignore
-  const result = await invoke$1(method, ...params);
-  return result;
-};
-
-const combineResults = results => {
-  return results.flat();
-};
-const getStatusBarItems$1 = (assetDir, platform) => {
-  return executeProviders({
-    assetDir,
-    combineResults,
-    event: OnStatusBarItem,
-    method: GetStatusBarItems,
-    noProviderFoundMessage: 'No status bar item provider found',
-    noProviderFoundResult: [],
-    params: [],
-    platform
-  });
-};
-
-const toStatusBarItem = uiStatusBarItem => {
-  const elements = [];
-  if (uiStatusBarItem.icon) {
-    elements.push({
-      type: 'icon',
-      value: uiStatusBarItem.icon
-    });
-  }
-  if (uiStatusBarItem.text) {
-    elements.push({
-      type: 'text',
-      value: uiStatusBarItem.text
-    });
-  }
-  if (elements.length === 0) {
-    elements.push({
-      type: 'text',
-      value: ''
-    });
-  }
-  return {
-    command: uiStatusBarItem.command || undefined,
-    elements,
-    name: uiStatusBarItem.name,
-    tooltip: uiStatusBarItem.tooltip
-  };
-};
-
-const toUiStatusBarItem = extensionHostStatusBarItem => {
-  return {
-    command: extensionHostStatusBarItem.command || '',
-    icon: extensionHostStatusBarItem.icon || '',
-    name: extensionHostStatusBarItem.id || extensionHostStatusBarItem.name || '',
-    text: extensionHostStatusBarItem.text || '',
-    tooltip: extensionHostStatusBarItem.tooltip || ''
-  };
-};
-
-const toUiStatusBarItems = statusBarItems => {
-  if (!statusBarItems) {
-    return [];
-  }
-  return statusBarItems.map(toUiStatusBarItem);
-};
-
-const getStatusBarItems = async (showItems, assetDir, platform) => {
-  if (!showItems) {
-    return [];
-  }
-  await activateByEvent('onSourceControl', assetDir, platform);
-  const extensionStatusBarItems = await getStatusBarItems$1(assetDir, platform);
-  const uiStatusBarItems = toUiStatusBarItems(extensionStatusBarItems);
-  const extraItems = [{
-    command: undefined,
-    elements: [{
-      type: 'text',
-      value: 'Notifications'
-    }],
-    name: Notifications,
-    tooltip: ''
+const loadContent = async state => {
+  const tabs = [{
+    content: '',
+    editorType: 'text',
+    id: '1',
+    isDirty: false,
+    title: 'tab 1'
   }, {
-    command: undefined,
-    elements: [{
-      type: 'icon',
-      value: ProblemsErrorIcon
-    }, {
-      type: 'text',
-      value: '0'
-    }, {
-      type: 'icon',
-      value: ProblemsWarningIcon
-    }, {
-      type: 'text',
-      value: '0'
-    }],
-    name: Problems,
-    tooltip: ''
+    content: '',
+    editorType: 'text',
+    id: '2',
+    isDirty: false,
+    title: 'tab 2'
   }];
-  return [...uiStatusBarItems.map(toStatusBarItem), ...extraItems];
-};
-
-const get = async key => {
-  return getPreference(key);
-};
-
-const itemsVisible = async () => {
-  const statusBarItemsPreference = (await get('statusBar.itemsVisible')) ?? true;
-  return statusBarItemsPreference;
-};
-
-const loadContent = async state => {
-  const {
-    assetDir,
-    platform
-  } = state;
-  const statusBarItemsPreference = await itemsVisible();
-  const statusBarItems = await getStatusBarItems(statusBarItemsPreference, assetDir, platform);
   return {
     ...state,
-    statusBarItemsLeft: [...statusBarItems],
-    statusBarItemsRight: []
+    layout: {
+      activeGroupId: '0',
+      direction: 'horizontal',
+      groups: [{
+        activeTabId: '',
+        direction: 'horizontal',
+        focused: false,
+        id: '0',
+        size: 300,
+        tabs
+      }]
+    }
   };
 };
 
@@ -1527,77 +1302,92 @@ const text = data => {
   };
 };
 
-const HandleClick = 11;
-
-const getElementVirtualDom = element => {
-  if (element.type === 'text') {
-    return [text(element.value)];
-  }
-  if (element.type === 'icon') {
-    return [{
-      childCount: 0,
-      className: element.value,
-      type: Div
-    }];
-  }
-  return [];
+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',
+  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 getStatusBarItemVirtualDom = statusBarItem => {
-  const {
-    elements,
-    name,
-    tooltip
-  } = statusBarItem;
-  const elementNodes = elements.flatMap(getElementVirtualDom);
+
+const renderTab = (tab, isActive) => {
   return [{
-    childCount: elementNodes.length,
-    className: StatusBarItem,
-    name,
-    role: Button$1,
-    tabIndex: -1,
-    title: tooltip,
+    childCount: 2,
+    className: `${CSS_CLASSES.TAB} ${isActive ? CSS_CLASSES.TAB_ACTIVE : ''}`,
+    type: Div
+  }, {
+    childCount: 1,
+    className: CSS_CLASSES.TAB_TITLE,
+    type: Span
+  }, text(tab.isDirty ? `*${tab.title}` : tab.title), {
+    childCount: 1,
+    className: CSS_CLASSES.TAB_CLOSE,
     type: Button
-  }, ...elementNodes];
+  }, text('×')];
 };
-
-const getStatusBarItemsVirtualDom = (items, className) => {
-  if (items.length === 0) {
-    return [];
-  }
+const renderTabBar = group => {
   return [{
-    childCount: items.length,
-    className,
+    childCount: group.tabs.length,
+    className: CSS_CLASSES.TAB_BAR,
     type: Div
-  }, ...items.flatMap(getStatusBarItemVirtualDom)];
+  }, ...group.tabs.flatMap(tab => renderTab(tab, tab.id === group.activeTabId))];
 };
-
-const getChildCount = (leftCount, rightCount) => {
-  let count = 0;
-  if (leftCount > 0) {
-    count++;
-  }
-  if (rightCount > 0) {
-    count++;
+const renderEditor = tab => {
+  if (tab.editorType === 'custom') {
+    return [{
+      childCount: 1,
+      className: CSS_CLASSES.CUSTOM_EDITOR,
+      type: Div
+    }, text(`Custom Editor: ${tab.customEditorId}`)];
   }
-  return count;
+  return [{
+    childCount: 1,
+    className: CSS_CLASSES.TEXT_EDITOR,
+    type: Div
+  }, {
+    childCount: 1,
+    className: CSS_CLASSES.EDITOR_CONTENT,
+    type: Pre
+  }, text(tab.content || '')];
+};
+const renderEditorGroup = group => {
+  const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
+  return [{
+    childCount: 2,
+    className: `${CSS_CLASSES.EDITOR_GROUP} ${group.focused ? CSS_CLASSES.EDITOR_GROUP_FOCUSED : ''}`,
+    type: Div
+  }, ...renderTabBar(group), {
+    childCount: activeTab ? 1 : 1,
+    className: CSS_CLASSES.EDITOR_CONTAINER,
+    type: Div
+  }, ...renderEditor(activeTab)];
 };
-const getStatusBarVirtualDom = (statusBarItemsLeft, statusBarItemsRight) => {
-  const dom = [{
-    childCount: getChildCount(statusBarItemsLeft.length, statusBarItemsRight.length),
-    className: 'StatusBar',
-    onClick: HandleClick,
+const getMainAreaVirtualDom = layout => {
+  return [{
+    childCount: 1,
+    className: CSS_CLASSES.MAIN_AREA,
+    type: Div
+  }, {
+    childCount: layout.groups.length,
+    className: CSS_CLASSES.EDITOR_GROUPS_CONTAINER,
     type: Div
-  }, ...getStatusBarItemsVirtualDom(statusBarItemsLeft, StatusBarItemsLeft), ...getStatusBarItemsVirtualDom(statusBarItemsRight, StatusBarItemsRight)];
-  return dom;
+  }, ...layout.groups.flatMap(renderEditorGroup)];
 };
 
 const renderItems = (oldState, newState) => {
   const {
-    statusBarItemsLeft,
-    statusBarItemsRight,
+    layout,
     uid
   } = newState;
-  const dom = getStatusBarVirtualDom(statusBarItemsLeft, statusBarItemsRight);
+  const dom = getMainAreaVirtualDom(layout);
   return [SetDom2, uid, dom];
 };
 
@@ -1626,12 +1416,14 @@ const render2 = (uid, diffResult) => {
   const {
     newState,
     oldState
-  } = get$1(uid);
+  } = get(uid);
   set(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
 
+const HandleClick = 11;
+
 const renderEventListeners = () => {
   return [{
     name: HandleClick,
@@ -1648,7 +1440,7 @@ const resize = (state, dimensions) => {
 
 const saveState = uid => {
   number(uid);
-  const value = get$1(uid);
+  const value = get(uid);
   const {
     newState
   } = value;
@@ -1663,24 +1455,21 @@ const saveState = uid => {
 };
 
 const commandMap = {
-  'StatusBar.create': create,
-  'StatusBar.diff2': diff2,
-  'StatusBar.getCommandIds': getCommandIds$1,
-  'StatusBar.handleClick': wrapCommand$1(handleClick),
-  'StatusBar.initialize': initialize,
-  'StatusBar.itemLeftUpdate': wrapCommand$1(itemLeftUpdate),
-  'StatusBar.itemRightCreate': wrapCommand$1(itemRightCreate),
-  'StatusBar.itemRightUpdate': wrapCommand$1(itemRightUpdate),
-  'StatusBar.loadContent': wrapCommand$1(loadContent),
-  'StatusBar.render2': render2,
-  'StatusBar.renderEventListeners': renderEventListeners,
-  'StatusBar.resize': wrapCommand$1(resize),
-  'StatusBar.saveState': saveState,
-  'StatusBar.terminate': terminate
+  'MainArea.create': create,
+  'MainArea.diff2': diff2,
+  'MainArea.getCommandIds': getCommandIds,
+  'MainArea.handleClick': wrapCommand(handleClick),
+  'MainArea.initialize': initialize,
+  'MainArea.loadContent': wrapCommand(loadContent),
+  'MainArea.render2': render2,
+  'MainArea.renderEventListeners': renderEventListeners,
+  'MainArea.resize': wrapCommand(resize),
+  'MainArea.saveState': saveState,
+  'MainArea.terminate': terminate
 };
 
 const listen = async () => {
-  registerCommands$1(commandMap);
+  registerCommands(commandMap);
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
@@ -1691,565 +1480,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 {
-  getCommandIds,
-  registerCommands,
-  wrapCommand} = create$1();
-
-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.1.0",
+  "version": "1.3.0",
   "description": "Main Area Worker",
   "repository": {
     "type": "git",