@lvce-editor/title-bar-worker 4.23.0 → 4.25.0

package/dist/titleBarWorkerMain.js

@@ -745,7 +745,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(id, errorProperty);
 };
-const create$9 = (message, result) => {
+const create$a = (message, result) => {
   return {
     id: message.id,
     jsonrpc: Two$1,
@@ -754,7 +754,7 @@ const create$9 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$9(message, resultProperty);
+  return create$a(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -848,7 +848,7 @@ const handleJsonRpcMessage = async (...args) => {
 
 const Two = '2.0';
 
-const create$8 = (method, params) => {
+const create$9 = (method, params) => {
   return {
     jsonrpc: Two,
     method,
@@ -856,7 +856,7 @@ const create$8 = (method, params) => {
   };
 };
 
-const create$7 = (id, method, params) => {
+const create$8 = (id, method, params) => {
   const message = {
     id,
     jsonrpc: Two,
@@ -867,12 +867,12 @@ const create$7 = (id, method, params) => {
 };
 
 let id = 0;
-const create$6 = () => {
+const create$7 = () => {
   return ++id;
 };
 
 const registerPromise = map => {
-  const id = create$6();
+  const id = create$7();
   const {
     promise,
     resolve
@@ -889,7 +889,7 @@ const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer)
     id,
     promise
   } = registerPromise(callbacks);
-  const message = create$7(id, method, params);
+  const message = create$8(id, method, params);
   if (useSendAndTransfer && ipc.sendAndTransfer) {
     ipc.sendAndTransfer(message);
   } else {
@@ -925,7 +925,7 @@ const createRpc = ipc => {
      * @deprecated
      */
     send(method, ...params) {
-      const message = create$8(method, params);
+      const message = create$9(method, params);
       ipc.send(message);
     }
   };
@@ -965,7 +965,7 @@ const listen$1 = async (module, options) => {
   return ipc;
 };
 
-const create$5 = async ({
+const create$6 = async ({
   commandMap,
   isMessagePortOpen = true,
   messagePort
@@ -983,7 +983,7 @@ const create$5 = async ({
   return rpc;
 };
 
-const create$4 = async ({
+const create$5 = async ({
   commandMap,
   isMessagePortOpen,
   send
@@ -993,13 +993,55 @@ const create$4 = async ({
     port2
   } = new MessageChannel();
   await send(port1);
-  return create$5({
+  return create$6({
     commandMap,
     isMessagePortOpen,
     messagePort: port2
   });
 };
 
+const createSharedLazyRpc = factory => {
+  let rpcPromise;
+  const getOrCreate = () => {
+    if (!rpcPromise) {
+      rpcPromise = factory();
+    }
+    return rpcPromise;
+  };
+  return {
+    async dispose() {
+      const rpc = await getOrCreate();
+      await rpc.dispose();
+    },
+    async invoke(method, ...params) {
+      const rpc = await getOrCreate();
+      return rpc.invoke(method, ...params);
+    },
+    async invokeAndTransfer(method, ...params) {
+      const rpc = await getOrCreate();
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    async send(method, ...params) {
+      const rpc = await getOrCreate();
+      rpc.send(method, ...params);
+    }
+  };
+};
+
+const create$4 = async ({
+  commandMap,
+  isMessagePortOpen,
+  send
+}) => {
+  return createSharedLazyRpc(() => {
+    return create$5({
+      commandMap,
+      isMessagePortOpen,
+      send
+    });
+  });
+};
+
 const create$3 = async ({
   commandMap
 }) => {
@@ -1032,7 +1074,7 @@ const createMockRpc = ({
 };
 
 const rpcs = Object.create(null);
-const set$4 = (id, rpc) => {
+const set$5 = (id, rpc) => {
   rpcs[id] = rpc;
 };
 const get$1 = id => {
@@ -1065,7 +1107,7 @@ const create$2 = rpcId => {
       const mockRpc = createMockRpc({
         commandMap
       });
-      set$4(rpcId, mockRpc);
+      set$5(rpcId, mockRpc);
       // @ts-ignore
       mockRpc[Symbol.dispose] = () => {
         remove(rpcId);
@@ -1074,7 +1116,7 @@ const create$2 = rpcId => {
       return mockRpc;
     },
     set(rpc) {
-      set$4(rpcId, rpc);
+      set$5(rpcId, rpc);
     }
   };
 };
@@ -1495,6 +1537,7 @@ const parseKey = rawKey => {
 
 const Electron$1 = 2;
 
+const MainProcess = -5;
 const RendererProcess = 1670;
 const RendererWorker = 1;
 
@@ -1504,6 +1547,11 @@ const SetFocusContext = 'Viewlet.setFocusContext';
 
 const FocusTitleBarMenuBar = 26;
 
+const {
+  invoke: invoke$3,
+  set: set$4
+} = create$2(MainProcess);
+
 const {
   invoke: invoke$2,
   set: set$3
@@ -1580,9 +1628,6 @@ const sendMessagePortToTextMeasurementWorker = async port => {
   const command = 'TextMeasurement.handleMessagePort';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToTextMeasurementWorker', port, command, 0);
 };
-const getWindowId$1 = async () => {
-  return invoke$1('GetWindowId.getWindowId');
-};
 const minimizeWindow = async () => {
   return invoke$1('ElectronWindow.minimize');
 };
@@ -3203,11 +3248,18 @@ const getEntryMap = async (state, menuIds, platform) => {
   return map;
 };
 
-// TODO cache window id
-
-const getWindowId = async () => {
-  const windowId = await getWindowId$1();
-  return windowId;
+const send = async port => {
+  await invokeAndTransfer('SendMessagePortToMainProcess.sendMessagePortToMainProcess', port, 'HandleElectronMessagePort.handleElectronMessagePort', 0);
+};
+const initializeMainProcess = async () => {
+  if (get$1(MainProcess)) {
+    return;
+  }
+  const rpc = await create$4({
+    commandMap: {},
+    send
+  });
+  set$4(rpc);
 };
 
 // based on https://www.electronjs.org/docs/latest/api/menu-item#new-menuitemoptions
@@ -3349,8 +3401,8 @@ const toElectronMenu = (map, rootId) => {
 };
 
 const setItems = async items => {
-  const windowId = await getWindowId();
-  return invoke$1('WebView.compatSharedProcessInvoke', 'ElectronApplicationMenu.setItems', windowId, items);
+  await initializeMainProcess();
+  return invoke$3('ElectronApplicationMenu.setItems', items);
 };
 const hydrate = async state => {
   const {
@@ -3376,6 +3428,33 @@ const getComponentState = uid => {
   return get(uid).newState;
 };
 
+const MaskIconCheck = 'MaskIconCheck';
+const MaskIcon = 'MaskIcon';
+const Menu = 'Menu';
+const MenuItem = 'MenuItem';
+const MenuItemCheckMark = 'MenuItemCheckMark';
+const MenuItemCheckmarkIcon = 'MenuItemCheckmarkIcon';
+const MenuItemDisabled = 'MenuItemDisabled';
+const MenuItemFocused = 'MenuItemFocused';
+const MenuItemKeyBinding = 'MenuItemKeyBinding';
+const MenuItemSeparator = 'MenuItemSeparator';
+const MenuItemSeparatorLine = 'MenuItemSeparatorLine';
+const MenuItemSubMenu = 'MenuItemSubMenu';
+const MenuItemSubMenuArrowRight = 'MenuItemSubMenuArrowRight';
+const TitleBar = 'TitleBar';
+const TitleBarButton = 'TitleBarButton';
+const TitleBarButtons = 'TitleBarButtons';
+const TitleBarCommandCenter = 'TitleBarCommandCenter';
+const TitleBarEntryActive = 'TitleBarEntryActive';
+const TitleBarIcon = 'TitleBarIcon';
+const TitleBarIconIcon = 'TitleBarIconIcon';
+const TitleBarMenuBar = 'TitleBarMenuBar';
+const TitleBarTopLevelEntry = 'TitleBarTopLevelEntry';
+const TitleBarTopLevelEntryLabel = 'TitleBarTopLevelEntryLabel';
+const Viewlet = 'Viewlet';
+
+const Focusable = 0;
+
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
@@ -3390,213 +3469,153 @@ const text = data => {
 
 new Set(Object.values(VirtualDomElements));
 
-const getKeyBindings = () => {
+const getCommandCenterVirtualDom = commandCenterEnabled => {
+  if (!commandCenterEnabled) {
+    return [];
+  }
   return [{
-    command: 'TitleBar.handleKeyArrowDown',
-    key: DownArrow$1,
-    when: FocusTitleBarMenuBar
-  }, {
-    command: 'TitleBar.handleKeyArrowUp',
-    key: UpArrow$1,
-    when: FocusTitleBarMenuBar
-  }, {
-    command: 'TitleBar.handleKeyArrowRight',
-    key: RightArrow$1,
-    when: FocusTitleBarMenuBar
-  }, {
-    command: 'TitleBar.handleKeyArrowLeft',
-    key: LeftArrow$1,
-    when: FocusTitleBarMenuBar
-  }, {
-    command: 'TitleBar.handleKeyEnter',
-    key: Enter$1,
-    when: FocusTitleBarMenuBar
-  }, {
-    command: 'TitleBar.handleKeySpace',
-    key: Space$1,
-    when: FocusTitleBarMenuBar
-  }, {
-    command: 'TitleBar.handleKeyHome',
-    key: Home$1,
-    when: FocusTitleBarMenuBar
-  }, {
-    command: 'TitleBar.handleKeyEnd',
-    key: End$1,
-    when: FocusTitleBarMenuBar
-  }, {
-    command: 'TitleBar.handleKeyEscape',
-    key: Escape$1,
-    when: FocusTitleBarMenuBar
-  }];
-};
-
-const maximize = async () => {
-  await maximizeWindow();
-};
-const minimize = async () => {
-  await minimizeWindow();
-};
-const close = async () => {
-  await closeWindow();
+    ariaLabel: commandCenter(),
+    childCount: 1,
+    className: TitleBarCommandCenter,
+    onClick: HandleCommandCenterClick,
+    onKeyDown: HandleCommandCenterKeyDown,
+    role: Button$2,
+    tabIndex: Focusable,
+    type: Div
+  }, text(search())];
 };
 
-const handleClickClose = async state => {
-  await close();
-  return state;
+const getIcon = assetDir => {
+  return `${assetDir}/icons/icon.svg`;
 };
 
-const handleClickMinimize = async state => {
-  await minimize();
-  return state;
+const getIconVirtualDom = (icon, type = Div) => {
+  return {
+    childCount: 0,
+    className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
+    role: None$1,
+    type
+  };
 };
 
-const handleClickToggleMaximize = async state => {
-  const fn = maximize;
-  await fn();
-  return state;
+const createTitleBarButton = button => {
+  const {
+    icon,
+    id,
+    label,
+    onClick
+  } = button;
+  const dom = [{
+    ariaLabel: label,
+    childCount: 1,
+    className: mergeClassNames(TitleBarButton, `TitleBarButton${id}`),
+    name: id,
+    onClick,
+    type: Button$1
+  }, getIconVirtualDom(icon, I)];
+  return dom;
 };
 
-const handleClick$1 = async (state, buttonName) => {
-  if (buttonName === 'Minimize') {
-    return handleClickMinimize(state);
-  }
-  if (buttonName === 'ToggleMaximize') {
-    return handleClickToggleMaximize(state);
-  }
-  if (buttonName === 'Close') {
-    return handleClickClose(state);
+const getTitleBarButtonsVirtualDom = (buttonsEnabled, buttons) => {
+  if (!buttonsEnabled) {
+    return [];
   }
-  return state;
+  return [{
+    childCount: buttons.length,
+    className: mergeClassNames(Viewlet, TitleBarButtons),
+    type: Div
+  }, ...buttons.flatMap(createTitleBarButton)];
 };
 
-const commandCenterItems = [{
-  command: 'QuickPick.showFile',
-  label: 'Go to File'
-}, {
-  command: 'QuickPick.showCommands',
-  label: 'Show and Run Commands'
-}, {
-  args: ['Search'],
-  command: 'Layout.openSideBarViewlet',
-  label: 'Search for Text'
-}, {
-  args: ['symbol'],
-  command: 'QuickPick.show',
-  label: 'Go to Symbol in Editor'
-}, {
-  args: ['Run And Debug'],
-  command: 'Layout.openSideBarViewlet',
-  label: 'Start Debugging'
-}, {
-  command: 'QuickPick.showCommands',
-  label: 'Run Task'
-}, {
-  command: 'QuickPick.showEverything',
-  label: 'More'
-}];
-const handleCommandCenterClick = async state => {
-  await invoke$1('QuickPick.show', 'custom', commandCenterItems, undefined, {
-    executeItemCommand: true,
-    mode: 'quickPick',
-    placeholder: 'Search files by name (append : to go to line or @ to go to symbol)',
-    waitUntil: 'visible'
-  });
-  return state;
+const parentNode$1 = {
+  childCount: 1,
+  className: mergeClassNames(Viewlet, TitleBarIcon),
+  type: Div
 };
-
-const handleCommandCenterKeyDown = async (state, key) => {
-  if (key !== 'Enter' && key !== ' ' && key !== 'Space') {
-    return state;
+const getTitleBarIconVirtualDom = (titleBarIconEnabled, iconSrc) => {
+  if (!titleBarIconEnabled) {
+    return [];
   }
-  return handleCommandCenterClick(state);
+  return [parentNode$1, {
+    alt: '',
+    childCount: 0,
+    className: TitleBarIconIcon,
+    src: iconSrc,
+    type: Img
+  }];
 };
 
-const show2 = async (uid, menuId, x, y, args) => {
-  await showContextMenu2(uid, menuId, x, y, args);
+const activeEntryLabelNode = {
+  childCount: 1,
+  className: TitleBarTopLevelEntryLabel,
+  type: Div
 };
-
-const handleContextMenu = async (state, button, eventX, eventY) => {
-  const {
-    uid
-  } = state;
-  await show2(uid, MenuIdTitleBarContextMenu, eventX, eventY, {
-    menuId: MenuIdTitleBarContextMenu
-  });
-  return state;
+const getActiveEntryLabelDom = isFocused => {
+  if (!isFocused) {
+    return [];
+  }
+  return [activeEntryLabelNode];
 };
-
-const handleElectronMenuClick = async (state, label) => {
+const getItemVirtualDom = item => {
   const {
-    commandMap
-  } = state;
-  const commandPair = commandMap[label];
-  if (!commandPair) {
-    throw new Error(`no command found for ${label}`);
-  }
-  const {
-    args = [],
-    command
-  } = commandPair;
-  await invoke$1(command, ...args);
-  return state;
-};
-
-const state = {
-  connected: false
-};
-const isConnected = () => {
-  const {
-    connected
-  } = state;
-  return connected;
-};
-const invoke = (method, ...params) => {
-  return invoke$2(method, ...params);
+    ariaLabel,
+    isFocused,
+    isOpen,
+    keyboardShortCut,
+    label
+  } = item;
+  const className = isFocused ? mergeClassNames(TitleBarTopLevelEntry, TitleBarEntryActive) : TitleBarTopLevelEntry;
+  return [{
+    ariaExpanded: isOpen,
+    ariaHasPopup: true,
+    ariaKeyShortcuts: keyboardShortCut,
+    ariaLabel: ariaLabel || label,
+    ariaOwns: isOpen ? 'Menu-0' : undefined,
+    childCount: 1,
+    className,
+    id: isFocused ? 'TitleBarEntryActive' : undefined,
+    name: label,
+    // TODO have separate name attribute
+    role: MenuItem$1,
+    type: Button$1
+  }, ...getActiveEntryLabelDom(isFocused), text(label)];
 };
-const set = rpc => {
-  set$3(rpc);
-  state.connected = true;
+const getTitleBarMenuBarItemsVirtualDom = visibleItems => {
+  const dom = visibleItems.flatMap(getItemVirtualDom);
+  return dom;
 };
 
-const commandQueues = new Map();
-const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess = true) => {
-  const executeViewletCommand = async (uid, command, ...args) => {
-    const fn = viewletCommandMap[`TitleBar.${command}`];
-    if (typeof fn !== 'function') {
-      throw new TypeError(`Viewlet command not found: ${command}`);
-    }
-    const previous = commandQueues.get(uid);
-    const {
-      promise: next,
-      resolve
-    } = Promise.withResolvers();
-    commandQueues.set(uid, next);
-    if (previous) {
-      await previous;
-    }
-    try {
-      await fn(uid, ...args);
-      await invoke$1('Viewlet.requestRender', uid);
-    } finally {
-      resolve();
-      if (commandQueues.get(uid) === next) {
-        commandQueues.delete(uid);
-      }
-    }
-  };
-  const rpc = await create$5({
-    commandMap: {
-      'Viewlet.executeViewletCommand': executeViewletCommand
-    },
-    messagePort: port
-  });
-  if (setAsRendererProcess) {
-    set(rpc);
+const activeId = 'TitleBarEntryActive';
+const getTitleBarMenuBarVirtualDom = (menuBarEnabled, visibleItems, focusedIndex) => {
+  if (!menuBarEnabled) {
+    return [];
   }
+  return [{
+    ariaActivedescendant: focusedIndex === -1 ? '' : activeId,
+    childCount: visibleItems.length,
+    className: mergeClassNames(Viewlet, TitleBarMenuBar),
+    onContextMenu: HandleContextMenu,
+    onFocusIn: HandleFocusIn,
+    onFocusOut: HandleFocusOut,
+    onMouseDown: HandleClick,
+    onPointerOut: HandlePointerOut,
+    onPointerOver: HandlePointerOver,
+    role: MenuBar$1,
+    tabIndex: 0,
+    type: Div
+  }, ...getTitleBarMenuBarItemsVirtualDom(visibleItems)];
 };
 
-const getMenuOffset = (x, clientX, iconWidth) => {
-  return clientX - x - iconWidth;
+const parentNode = {
+  childCount: 1,
+  className: 'TitleBarTitle',
+  type: Div
+};
+const getTitleVirtualDom = (titleBarTitleEnabled, title) => {
+  if (!titleBarTitleEnabled) {
+    return [];
+  }
+  return [parentNode, text(title)];
 };
 
 const Ellipsis = 'Ellipsis';
@@ -3651,11 +3670,269 @@ const getVisibleTitleBarEntries = (entries, width, focusedIndex, isMenuOpen) =>
     while (visible.length > 0 && getTotalWidth$1(visible) + MoreEntryWidth > width) {
       visible.pop();
     }
-    const hiddenEntries = entries.slice(visible.length);
-    const overflowIndex = visible.length;
-    visible.push(createOverflowEntry(hiddenEntries, overflowIndex, focusedIndex, isMenuOpen));
+    const hiddenEntries = entries.slice(visible.length);
+    const overflowIndex = visible.length;
+    visible.push(createOverflowEntry(hiddenEntries, overflowIndex, focusedIndex, isMenuOpen));
+  }
+  return visible;
+};
+
+const emptyTitleBarNode = {
+  childCount: 0,
+  type: Div
+};
+const getTitleBarVirtualDom = state => {
+  const {
+    assetDir,
+    commandCenterEnabled,
+    focusedIndex,
+    isMenuOpen,
+    platform,
+    title,
+    titleBarButtons,
+    titleBarButtonsEnabled,
+    titleBarEntries,
+    titleBarIconEnabled,
+    titleBarMenuBarEnabled,
+    titleBarStyleCustom,
+    titleBarTitleEnabled,
+    width
+  } = state;
+  if (platform === Electron$1 && !titleBarStyleCustom) {
+    return [emptyTitleBarNode];
+  }
+  const iconSrc = getIcon(assetDir);
+  const visibleEntries = getVisibleTitleBarEntries(titleBarEntries, width, focusedIndex, isMenuOpen);
+  const titleEnabled = titleBarTitleEnabled && !commandCenterEnabled;
+  const childCount = Number(titleBarIconEnabled) + Number(titleBarMenuBarEnabled) + Number(commandCenterEnabled) + Number(titleEnabled) + Number(titleBarButtonsEnabled);
+  return [{
+    ariaLabel: titleBar(),
+    childCount,
+    className: mergeClassNames(Viewlet, TitleBar),
+    id: 'TitleBar',
+    onContextMenu: HandleTitleBarContextMenu,
+    role: ContentInfo,
+    type: Div
+  }, ...getTitleBarIconVirtualDom(titleBarIconEnabled, iconSrc), ...getTitleBarMenuBarVirtualDom(titleBarMenuBarEnabled, visibleEntries, focusedIndex), ...getCommandCenterVirtualDom(commandCenterEnabled), ...getTitleVirtualDom(titleEnabled, title), ...getTitleBarButtonsVirtualDom(titleBarButtonsEnabled, titleBarButtons)];
+};
+
+const renderTitleBar = (oldState, newState) => {
+  const dom = getTitleBarVirtualDom(newState);
+  return [SetDom2, newState.uid, dom];
+};
+
+const getComponentDom = uid => {
+  const state = getComponentState(uid);
+  return renderTitleBar(state, state)[2];
+};
+
+const getKeyBindings = () => {
+  return [{
+    command: 'TitleBar.handleKeyArrowDown',
+    key: DownArrow$1,
+    when: FocusTitleBarMenuBar
+  }, {
+    command: 'TitleBar.handleKeyArrowUp',
+    key: UpArrow$1,
+    when: FocusTitleBarMenuBar
+  }, {
+    command: 'TitleBar.handleKeyArrowRight',
+    key: RightArrow$1,
+    when: FocusTitleBarMenuBar
+  }, {
+    command: 'TitleBar.handleKeyArrowLeft',
+    key: LeftArrow$1,
+    when: FocusTitleBarMenuBar
+  }, {
+    command: 'TitleBar.handleKeyEnter',
+    key: Enter$1,
+    when: FocusTitleBarMenuBar
+  }, {
+    command: 'TitleBar.handleKeySpace',
+    key: Space$1,
+    when: FocusTitleBarMenuBar
+  }, {
+    command: 'TitleBar.handleKeyHome',
+    key: Home$1,
+    when: FocusTitleBarMenuBar
+  }, {
+    command: 'TitleBar.handleKeyEnd',
+    key: End$1,
+    when: FocusTitleBarMenuBar
+  }, {
+    command: 'TitleBar.handleKeyEscape',
+    key: Escape$1,
+    when: FocusTitleBarMenuBar
+  }];
+};
+
+const maximize = async () => {
+  await maximizeWindow();
+};
+const minimize = async () => {
+  await minimizeWindow();
+};
+const close = async () => {
+  await closeWindow();
+};
+
+const handleClickClose = async state => {
+  await close();
+  return state;
+};
+
+const handleClickMinimize = async state => {
+  await minimize();
+  return state;
+};
+
+const handleClickToggleMaximize = async state => {
+  const fn = maximize;
+  await fn();
+  return state;
+};
+
+const handleClick$1 = async (state, buttonName) => {
+  if (buttonName === 'Minimize') {
+    return handleClickMinimize(state);
+  }
+  if (buttonName === 'ToggleMaximize') {
+    return handleClickToggleMaximize(state);
+  }
+  if (buttonName === 'Close') {
+    return handleClickClose(state);
+  }
+  return state;
+};
+
+const commandCenterItems = [{
+  command: 'QuickPick.showFile',
+  label: 'Go to File'
+}, {
+  command: 'QuickPick.showCommands',
+  label: 'Show and Run Commands'
+}, {
+  args: ['Search'],
+  command: 'Layout.openSideBarViewlet',
+  label: 'Search for Text'
+}, {
+  args: ['symbol'],
+  command: 'QuickPick.show',
+  label: 'Go to Symbol in Editor'
+}, {
+  args: ['Run And Debug'],
+  command: 'Layout.openSideBarViewlet',
+  label: 'Start Debugging'
+}, {
+  command: 'QuickPick.showCommands',
+  label: 'Run Task'
+}, {
+  command: 'QuickPick.showEverything',
+  label: 'More'
+}];
+const handleCommandCenterClick = async state => {
+  await invoke$1('QuickPick.show', 'custom', commandCenterItems, undefined, {
+    executeItemCommand: true,
+    mode: 'quickPick',
+    placeholder: 'Search files by name (append : to go to line or @ to go to symbol)',
+    waitUntil: 'visible'
+  });
+  return state;
+};
+
+const handleCommandCenterKeyDown = async (state, key) => {
+  if (key !== 'Enter' && key !== ' ' && key !== 'Space') {
+    return state;
+  }
+  return handleCommandCenterClick(state);
+};
+
+const show2 = async (uid, menuId, x, y, args) => {
+  await showContextMenu2(uid, menuId, x, y, args);
+};
+
+const handleContextMenu = async (state, button, eventX, eventY) => {
+  const {
+    uid
+  } = state;
+  await show2(uid, MenuIdTitleBarContextMenu, eventX, eventY, {
+    menuId: MenuIdTitleBarContextMenu
+  });
+  return state;
+};
+
+const handleElectronMenuClick = async (state, label) => {
+  const {
+    commandMap
+  } = state;
+  const commandPair = commandMap[label];
+  if (!commandPair) {
+    throw new Error(`no command found for ${label}`);
+  }
+  const {
+    args = [],
+    command
+  } = commandPair;
+  await invoke$1(command, ...args);
+  return state;
+};
+
+const state = {
+  connected: false
+};
+const isConnected = () => {
+  const {
+    connected
+  } = state;
+  return connected;
+};
+const invoke = (method, ...params) => {
+  return invoke$2(method, ...params);
+};
+const set = rpc => {
+  set$3(rpc);
+  state.connected = true;
+};
+
+const commandQueues = new Map();
+const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess = true) => {
+  const executeViewletCommand = async (uid, command, ...args) => {
+    const fn = viewletCommandMap[`TitleBar.${command}`];
+    if (typeof fn !== 'function') {
+      throw new TypeError(`Viewlet command not found: ${command}`);
+    }
+    const previous = commandQueues.get(uid);
+    const {
+      promise: next,
+      resolve
+    } = Promise.withResolvers();
+    commandQueues.set(uid, next);
+    if (previous) {
+      await previous;
+    }
+    try {
+      await fn(uid, ...args);
+      await invoke$1('Viewlet.requestRender', uid);
+    } finally {
+      resolve();
+      if (commandQueues.get(uid) === next) {
+        commandQueues.delete(uid);
+      }
+    }
+  };
+  const rpc = await create$6({
+    commandMap: {
+      'Viewlet.executeViewletCommand': executeViewletCommand
+    },
+    messagePort: port
+  });
+  if (setAsRendererProcess) {
+    set(rpc);
   }
-  return visible;
+};
+
+const getMenuOffset = (x, clientX, iconWidth) => {
+  return clientX - x - iconWidth;
 };
 
 const getNavigableTitleBarEntries = state => {
@@ -4017,7 +4294,7 @@ const getTitle = (workspaceUri, titleTemplate, appName) => {
 };
 
 const launchTextMeasurementWorker = async () => {
-  const rpc = await create$4({
+  const rpc = await create$5({
     commandMap: {},
     async send(port) {
       await sendMessagePortToTextMeasurementWorker(port);
@@ -4061,7 +4338,9 @@ const handleWorkspaceChange = async (state, uri) => {
     labelFontSize,
     labelFontWeight,
     labelLetterSpacing,
-    titleTemplate
+    titleTemplate,
+    titleWidth: oldTitleWidth,
+    width
   } = state;
   const title = getTitle(uri, titleTemplate, appName);
   const titleWidth = await measureTitleWidth(title, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
@@ -4069,6 +4348,8 @@ const handleWorkspaceChange = async (state, uri) => {
     ...state,
     title,
     titleWidth,
+    // The title is centered, so half its width change becomes available to the menu.
+    width: width + (oldTitleWidth - titleWidth) / 2,
     workspaceUri: uri
   };
 };
@@ -4188,31 +4469,6 @@ const renderFocusedIndex = (oldState, newState) => {
   return [FocusSelector, newState.uid, '.ViewletTitleBarMenuBar'];
 };
 
-const MaskIconCheck = 'MaskIconCheck';
-const MaskIcon = 'MaskIcon';
-const Menu = 'Menu';
-const MenuItem = 'MenuItem';
-const MenuItemCheckMark = 'MenuItemCheckMark';
-const MenuItemCheckmarkIcon = 'MenuItemCheckmarkIcon';
-const MenuItemDisabled = 'MenuItemDisabled';
-const MenuItemFocused = 'MenuItemFocused';
-const MenuItemKeyBinding = 'MenuItemKeyBinding';
-const MenuItemSeparator = 'MenuItemSeparator';
-const MenuItemSeparatorLine = 'MenuItemSeparatorLine';
-const MenuItemSubMenu = 'MenuItemSubMenu';
-const MenuItemSubMenuArrowRight = 'MenuItemSubMenuArrowRight';
-const TitleBar = 'TitleBar';
-const TitleBarButton = 'TitleBarButton';
-const TitleBarButtons = 'TitleBarButtons';
-const TitleBarCommandCenter = 'TitleBarCommandCenter';
-const TitleBarEntryActive = 'TitleBarEntryActive';
-const TitleBarIcon = 'TitleBarIcon';
-const TitleBarIconIcon = 'TitleBarIconIcon';
-const TitleBarMenuBar = 'TitleBarMenuBar';
-const TitleBarTopLevelEntry = 'TitleBarTopLevelEntry';
-const TitleBarTopLevelEntryLabel = 'TitleBarTopLevelEntryLabel';
-const Viewlet = 'Viewlet';
-
 const getKeyBindingString = (key, altKey, ctrlKey, shiftKey, metaKey) => {
   let string = '';
   if (ctrlKey) {
@@ -4494,201 +4750,6 @@ const renderMenus = (oldState, newState) => {
   return ['Viewlet.send', uid, /* method */SetMenus, /* changes */changes, uid];
 };
 
-const Focusable = 0;
-
-const getCommandCenterVirtualDom = commandCenterEnabled => {
-  if (!commandCenterEnabled) {
-    return [];
-  }
-  return [{
-    ariaLabel: commandCenter(),
-    childCount: 1,
-    className: TitleBarCommandCenter,
-    onClick: HandleCommandCenterClick,
-    onKeyDown: HandleCommandCenterKeyDown,
-    role: Button$2,
-    tabIndex: Focusable,
-    type: Div
-  }, text(search())];
-};
-
-const getIcon = assetDir => {
-  return `${assetDir}/icons/icon.svg`;
-};
-
-const getIconVirtualDom = (icon, type = Div) => {
-  return {
-    childCount: 0,
-    className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
-    role: None$1,
-    type
-  };
-};
-
-const createTitleBarButton = button => {
-  const {
-    icon,
-    id,
-    label,
-    onClick
-  } = button;
-  const dom = [{
-    ariaLabel: label,
-    childCount: 1,
-    className: mergeClassNames(TitleBarButton, `TitleBarButton${id}`),
-    name: id,
-    onClick,
-    type: Button$1
-  }, getIconVirtualDom(icon, I)];
-  return dom;
-};
-
-const getTitleBarButtonsVirtualDom = (buttonsEnabled, buttons) => {
-  if (!buttonsEnabled) {
-    return [];
-  }
-  return [{
-    childCount: buttons.length,
-    className: mergeClassNames(Viewlet, TitleBarButtons),
-    type: Div
-  }, ...buttons.flatMap(createTitleBarButton)];
-};
-
-const parentNode$1 = {
-  childCount: 1,
-  className: mergeClassNames(Viewlet, TitleBarIcon),
-  type: Div
-};
-const getTitleBarIconVirtualDom = (titleBarIconEnabled, iconSrc) => {
-  if (!titleBarIconEnabled) {
-    return [];
-  }
-  return [parentNode$1, {
-    alt: '',
-    childCount: 0,
-    className: TitleBarIconIcon,
-    src: iconSrc,
-    type: Img
-  }];
-};
-
-const activeEntryLabelNode = {
-  childCount: 1,
-  className: TitleBarTopLevelEntryLabel,
-  type: Div
-};
-const getActiveEntryLabelDom = isFocused => {
-  if (!isFocused) {
-    return [];
-  }
-  return [activeEntryLabelNode];
-};
-const getItemVirtualDom = item => {
-  const {
-    ariaLabel,
-    isFocused,
-    isOpen,
-    keyboardShortCut,
-    label
-  } = item;
-  const className = isFocused ? mergeClassNames(TitleBarTopLevelEntry, TitleBarEntryActive) : TitleBarTopLevelEntry;
-  return [{
-    ariaExpanded: isOpen,
-    ariaHasPopup: true,
-    ariaKeyShortcuts: keyboardShortCut,
-    ariaLabel: ariaLabel || label,
-    ariaOwns: isOpen ? 'Menu-0' : undefined,
-    childCount: 1,
-    className,
-    id: isFocused ? 'TitleBarEntryActive' : undefined,
-    name: label,
-    // TODO have separate name attribute
-    role: MenuItem$1,
-    type: Button$1
-  }, ...getActiveEntryLabelDom(isFocused), text(label)];
-};
-const getTitleBarMenuBarItemsVirtualDom = visibleItems => {
-  const dom = visibleItems.flatMap(getItemVirtualDom);
-  return dom;
-};
-
-const activeId = 'TitleBarEntryActive';
-const getTitleBarMenuBarVirtualDom = (menuBarEnabled, visibleItems, focusedIndex) => {
-  if (!menuBarEnabled) {
-    return [];
-  }
-  return [{
-    ariaActivedescendant: focusedIndex === -1 ? '' : activeId,
-    childCount: visibleItems.length,
-    className: mergeClassNames(Viewlet, TitleBarMenuBar),
-    onContextMenu: HandleContextMenu,
-    onFocusIn: HandleFocusIn,
-    onFocusOut: HandleFocusOut,
-    onMouseDown: HandleClick,
-    onPointerOut: HandlePointerOut,
-    onPointerOver: HandlePointerOver,
-    role: MenuBar$1,
-    tabIndex: 0,
-    type: Div
-  }, ...getTitleBarMenuBarItemsVirtualDom(visibleItems)];
-};
-
-const parentNode = {
-  childCount: 1,
-  className: 'TitleBarTitle',
-  type: Div
-};
-const getTitleVirtualDom = (titleBarTitleEnabled, title) => {
-  if (!titleBarTitleEnabled) {
-    return [];
-  }
-  return [parentNode, text(title)];
-};
-
-const emptyTitleBarNode = {
-  childCount: 0,
-  type: Div
-};
-const getTitleBarVirtualDom = state => {
-  const {
-    assetDir,
-    commandCenterEnabled,
-    focusedIndex,
-    isMenuOpen,
-    platform,
-    title,
-    titleBarButtons,
-    titleBarButtonsEnabled,
-    titleBarEntries,
-    titleBarIconEnabled,
-    titleBarMenuBarEnabled,
-    titleBarStyleCustom,
-    titleBarTitleEnabled,
-    width
-  } = state;
-  if (platform === Electron$1 && !titleBarStyleCustom) {
-    return [emptyTitleBarNode];
-  }
-  const iconSrc = getIcon(assetDir);
-  const visibleEntries = getVisibleTitleBarEntries(titleBarEntries, width, focusedIndex, isMenuOpen);
-  const titleEnabled = titleBarTitleEnabled && !commandCenterEnabled;
-  const childCount = Number(titleBarIconEnabled) + Number(titleBarMenuBarEnabled) + Number(commandCenterEnabled) + Number(titleEnabled) + Number(titleBarButtonsEnabled);
-  return [{
-    ariaLabel: titleBar(),
-    childCount,
-    className: mergeClassNames(Viewlet, TitleBar),
-    id: 'TitleBar',
-    onContextMenu: HandleTitleBarContextMenu,
-    role: ContentInfo,
-    type: Div
-  }, ...getTitleBarIconVirtualDom(titleBarIconEnabled, iconSrc), ...getTitleBarMenuBarVirtualDom(titleBarMenuBarEnabled, visibleEntries, focusedIndex), ...getCommandCenterVirtualDom(commandCenterEnabled), ...getTitleVirtualDom(titleEnabled, title), ...getTitleBarButtonsVirtualDom(titleBarButtonsEnabled, titleBarButtons)];
-};
-
-const renderTitleBar = (oldState, newState) => {
-  const dom = getTitleBarVirtualDom(newState);
-  return [SetDom2, newState.uid, dom];
-};
-
 const getRenderer3 = diffType => {
   switch (diffType) {
     case RenderEntries:
@@ -4837,6 +4898,8 @@ const setTitleTemplate = async (state, titleTemplate) => {
     labelFontSize,
     labelFontWeight,
     labelLetterSpacing,
+    titleWidth: oldTitleWidth,
+    width,
     workspaceUri
   } = state;
   const title = getTitle(workspaceUri, titleTemplate, appName);
@@ -4845,7 +4908,9 @@ const setTitleTemplate = async (state, titleTemplate) => {
     ...state,
     title,
     titleTemplate,
-    titleWidth
+    titleWidth,
+    // The title is centered, so half its width change becomes available to the menu.
+    width: width + (oldTitleWidth - titleWidth) / 2
   };
 };
 
@@ -5543,6 +5608,7 @@ const commandMap = {
   'TitleBar.focusPrevious': wrapCommand(focusPrevious),
   'TitleBar.getCommandIds': getCommandIds,
   'TitleBar.getCommands': getCommandIds,
+  'TitleBar.getComponentDom': getComponentDom,
   'TitleBar.getComponentState': getComponentState,
   'TitleBar.getKeyBindings': getKeyBindings,
   'TitleBar.getMenuEntries2': wrapGetter(getMenuEntries2),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/title-bar-worker",
-  "version": "4.23.0",
+  "version": "4.25.0",
   "description": "Title Bar Worker",
   "repository": {
     "type": "git",