@lvce-editor/title-bar-worker 3.18.0 → 3.20.0

package/dist/titleBarWorkerMain.js

@@ -518,6 +518,27 @@ const IpcParentWithMessagePort$1 = {
   wrap: wrap$5
 };
 
+class CommandNotFoundError extends Error {
+  constructor(command) {
+    super(`Command not found ${command}`);
+    this.name = 'CommandNotFoundError';
+  }
+}
+const commands = Object.create(null);
+const register = commandMap => {
+  Object.assign(commands, commandMap);
+};
+const getCommand = key => {
+  return commands[key];
+};
+const execute = (command, ...args) => {
+  const fn = getCommand(command);
+  if (!fn) {
+    throw new CommandNotFoundError(command);
+  }
+  return fn(...args);
+};
+
 const Two$1 = '2.0';
 const callbacks = Object.create(null);
 const get$2 = id => {
@@ -542,12 +563,12 @@ const getErrorConstructor = (message, type) => {
     switch (type) {
       case DomException:
         return DOMException;
-      case TypeError$1:
-        return TypeError;
-      case SyntaxError$1:
-        return SyntaxError;
       case ReferenceError$1:
         return ReferenceError;
+      case SyntaxError$1:
+        return SyntaxError;
+      case TypeError$1:
+        return TypeError;
       default:
         return Error;
     }
@@ -703,27 +724,27 @@ const getErrorProperty = (error, prettyError) => {
   if (error && error.code === E_COMMAND_NOT_FOUND) {
     return {
       code: MethodNotFound,
-      message: error.message,
-      data: error.stack
+      data: error.stack,
+      message: error.message
     };
   }
   return {
     code: Custom,
-    message: prettyError.message,
     data: {
-      stack: getStack(prettyError),
-      codeFrame: prettyError.codeFrame,
-      type: getErrorType(prettyError),
       code: prettyError.code,
-      name: prettyError.name
-    }
+      codeFrame: prettyError.codeFrame,
+      name: prettyError.name,
+      stack: getStack(prettyError),
+      type: getErrorType(prettyError)
+    },
+    message: prettyError.message
   };
 };
 const create$1$1 = (id, error) => {
   return {
-    jsonrpc: Two$1,
+    error,
     id,
-    error
+    jsonrpc: Two$1
   };
 };
 const getErrorResponse = (id, error, preparePrettyError, logError) => {
@@ -732,27 +753,27 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(id, errorProperty);
 };
-const create$4 = (message, result) => {
+const create$9 = (message, result) => {
   return {
-    jsonrpc: Two$1,
     id: message.id,
+    jsonrpc: Two$1,
     result: result ?? null
   };
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$4(message, resultProperty);
+  return create$9(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
-    jsonrpc: Two$1,
-    id,
     error: {
       code: Custom,
+      data: error,
       // @ts-ignore
-      message: error.message,
-      data: error
-    }
+      message: error.message
+    },
+    id,
+    jsonrpc: Two$1
   };
 };
 const getResponse = async (message, ipc, execute, preparePrettyError, logError, requiresSocket) => {
@@ -782,35 +803,35 @@ const normalizeParams = args => {
   if (args.length === 1) {
     const options = args[0];
     return {
+      execute: options.execute,
       ipc: options.ipc,
+      logError: options.logError || defaultLogError,
       message: options.message,
-      execute: options.execute,
-      resolve: options.resolve || defaultResolve,
       preparePrettyError: options.preparePrettyError || defaultPreparePrettyError,
-      logError: options.logError || defaultLogError,
-      requiresSocket: options.requiresSocket || defaultRequiresSocket
+      requiresSocket: options.requiresSocket || defaultRequiresSocket,
+      resolve: options.resolve || defaultResolve
     };
   }
   return {
+    execute: args[2],
     ipc: args[0],
+    logError: args[5],
     message: args[1],
-    execute: args[2],
-    resolve: args[3],
     preparePrettyError: args[4],
-    logError: args[5],
-    requiresSocket: args[6]
+    requiresSocket: args[6],
+    resolve: args[3]
   };
 };
 const handleJsonRpcMessage = async (...args) => {
   const options = normalizeParams(args);
   const {
-    message,
-    ipc,
     execute,
-    resolve,
-    preparePrettyError,
+    ipc,
     logError,
-    requiresSocket
+    message,
+    preparePrettyError,
+    requiresSocket,
+    resolve
   } = options;
   if ('id' in message) {
     if ('method' in message) {
@@ -833,36 +854,17 @@ const handleJsonRpcMessage = async (...args) => {
   throw new JsonRpcError('unexpected message');
 };
 
-class CommandNotFoundError extends Error {
-  constructor(command) {
-    super(`Command not found ${command}`);
-    this.name = 'CommandNotFoundError';
-  }
-}
-const commands = Object.create(null);
-const register = commandMap => {
-  Object.assign(commands, commandMap);
-};
-const getCommand = key => {
-  return commands[key];
-};
-const execute = (command, ...args) => {
-  const fn = getCommand(command);
-  if (!fn) {
-    throw new CommandNotFoundError(command);
-  }
-  return fn(...args);
-};
-
 const Two = '2.0';
-const create$t = (method, params) => {
+
+const create$8 = (method, params) => {
   return {
     jsonrpc: Two,
     method,
     params
   };
 };
-const create$s = (id, method, params) => {
+
+const create$7 = (id, method, params) => {
   const message = {
     id,
     jsonrpc: Two,
@@ -871,15 +873,14 @@ const create$s = (id, method, params) => {
   };
   return message;
 };
+
 let id = 0;
-const create$r = () => {
+const create$6 = () => {
   return ++id;
 };
 
-/* eslint-disable n/no-unsupported-features/es-syntax */
-
 const registerPromise = map => {
-  const id = create$r();
+  const id = create$6();
   const {
     promise,
     resolve
@@ -891,13 +892,12 @@ const registerPromise = map => {
   };
 };
 
-// @ts-ignore
 const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer) => {
   const {
     id,
     promise
   } = registerPromise(callbacks);
-  const message = create$s(id, method, params);
+  const message = create$7(id, method, params);
   if (useSendAndTransfer && ipc.sendAndTransfer) {
     ipc.sendAndTransfer(message);
   } else {
@@ -933,12 +933,13 @@ const createRpc = ipc => {
      * @deprecated
      */
     send(method, ...params) {
-      const message = create$t(method, params);
+      const message = create$8(method, params);
       ipc.send(message);
     }
   };
   return rpc;
 };
+
 const requiresSocket = () => {
   return false;
 };
@@ -953,6 +954,7 @@ const handleMessage = event => {
   const actualExecute = event?.target?.execute || execute;
   return handleJsonRpcMessage(event.target, event.data, actualExecute, event.target._resolve, preparePrettyError, logError, actualRequiresSocket);
 };
+
 const handleIpc = ipc => {
   if ('addEventListener' in ipc) {
     ipc.addEventListener('message', handleMessage);
@@ -961,6 +963,7 @@ const handleIpc = ipc => {
     ipc.on('message', handleMessage);
   }
 };
+
 const listen$1 = async (module, options) => {
   const rawIpc = await module.listen(options);
   if (module.signal) {
@@ -969,6 +972,7 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
+
 const create$5 = async ({
   commandMap,
   isMessagePortOpen = true,
@@ -986,7 +990,8 @@ const create$5 = async ({
   messagePort.start();
   return rpc;
 };
-const create$3 = async ({
+
+const create$4 = async ({
   commandMap,
   isMessagePortOpen,
   send
@@ -1002,11 +1007,8 @@ const create$3 = async ({
     messagePort: port2
   });
 };
-const TransferMessagePortRpcParent = {
-  __proto__: null,
-  create: create$3
-};
-const create$2$1 = async ({
+
+const create$3 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -1016,10 +1018,7 @@ const create$2$1 = async ({
   const rpc = createRpc(ipc);
   return rpc;
 };
-const WebWorkerRpcClient = {
-  __proto__: null,
-  create: create$2$1
-};
+
 const createMockRpc = ({
   commandMap
 }) => {
@@ -1040,6 +1039,54 @@ const createMockRpc = ({
   return mockRpc;
 };
 
+const rpcs = Object.create(null);
+const set$2 = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get$1 = id => {
+  return rpcs[id];
+};
+const remove = id => {
+  delete rpcs[id];
+};
+
+/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+const create$2 = rpcId => {
+  return {
+    async dispose() {
+      const rpc = get$1(rpcId);
+      await rpc.dispose();
+    },
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
+    },
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    registerMockRpc(commandMap) {
+      const mockRpc = createMockRpc({
+        commandMap
+      });
+      set$2(rpcId, mockRpc);
+      // @ts-ignore
+      mockRpc[Symbol.dispose] = () => {
+        remove(rpcId);
+      };
+      // @ts-ignore
+      return mockRpc;
+    },
+    set(rpc) {
+      set$2(rpcId, rpc);
+    }
+  };
+};
+
 const ContentInfo = 'contentinfo';
 const Menu$1 = 'menu';
 const MenuBar$1 = 'menubar';
@@ -1337,7 +1384,7 @@ const OpenRecent$1 = 9;
 const Run$2 = 10;
 const Selection$2 = 11;
 const Terminal$2 = 14;
-const TitleBar$1 = 15;
+const TitleBar$3 = 15;
 const View$2 = 16;
 const TitleBarContextMenu = 90;
 
@@ -1365,54 +1412,6 @@ const SetFocusContext = 'Viewlet.setFocusContext';
 
 const FocusTitleBarMenuBar = 26;
 
-const rpcs = Object.create(null);
-const set$2 = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get$1 = id => {
-  return rpcs[id];
-};
-const remove = id => {
-  delete rpcs[id];
-};
-
-/* eslint-disable  @typescript-eslint/explicit-function-return-type */
-const create$2 = rpcId => {
-  return {
-    async dispose() {
-      const rpc = get$1(rpcId);
-      await rpc.dispose();
-    },
-    // @ts-ignore
-    invoke(method, ...params) {
-      const rpc = get$1(rpcId);
-      // @ts-ignore
-      return rpc.invoke(method, ...params);
-    },
-    // @ts-ignore
-    invokeAndTransfer(method, ...params) {
-      const rpc = get$1(rpcId);
-      // @ts-ignore
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    registerMockRpc(commandMap) {
-      const mockRpc = createMockRpc({
-        commandMap
-      });
-      set$2(rpcId, mockRpc);
-      // @ts-ignore
-      mockRpc[Symbol.dispose] = () => {
-        remove(rpcId);
-      };
-      // @ts-ignore
-      return mockRpc;
-    },
-    set(rpc) {
-      set$2(rpcId, rpc);
-    }
-  };
-};
-
 const {
   invoke,
   invokeAndTransfer,
@@ -1423,24 +1422,22 @@ const showContextMenu2 = async (uid, menuId, x, y, args) => {
   number(menuId);
   number(x);
   number(y);
-  // @ts-ignore
   await invoke('ContextMenu.show2', uid, menuId, x, y, args);
 };
 const sendMessagePortToTextMeasurementWorker = async port => {
   const command = 'TextMeasurement.handleMessagePort';
-  // @ts-ignore
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToTextMeasurementWorker', port, command, 0);
 };
+const getWindowId$1 = async () => {
+  return invoke('GetWindowId.getWindowId');
+};
 const minimizeWindow = async () => {
-  // @ts-ignore
   return invoke('ElectronWindow.minimize');
 };
 const maximizeWindow = async () => {
-  // @ts-ignore
   return invoke('ElectronWindow.maximize');
 };
 const closeWindow = async () => {
-  // @ts-ignore
   return invoke('ElectronWindow.close');
 };
 
@@ -1484,7 +1481,7 @@ const create$1 = () => {
     },
     getKeys() {
       return Object.keys(states).map(key => {
-        return Number.parseInt(key);
+        return Number.parseFloat(key);
       });
     },
     registerCommands(commandMap) {
@@ -1526,6 +1523,37 @@ const create$1 = () => {
         return fn(newState, ...args);
       };
       return wrapped;
+    },
+    wrapLoadContent(fn) {
+      const wrapped = async (uid, ...args) => {
+        const {
+          newState,
+          oldState
+        } = states[uid];
+        const result = await fn(newState, ...args);
+        const {
+          error,
+          state
+        } = result;
+        if (oldState === state || newState === state) {
+          return {
+            error
+          };
+        }
+        const latestOld = states[uid];
+        const latestNew = {
+          ...latestOld.newState,
+          ...state
+        };
+        states[uid] = {
+          newState: latestNew,
+          oldState: latestOld.oldState
+        };
+        return {
+          error
+        };
+      };
+      return wrapped;
     }
   };
 };
@@ -1538,7 +1566,9 @@ const Electron = 2;
 const Remote = 3;
 
 const DEFAULT_UID = 1;
+const DEFAULT_APP_NAME = 'Lvce Editor';
 const createDefaultState = (uid = DEFAULT_UID) => ({
+  appName: DEFAULT_APP_NAME,
   assetDir: '',
   buttons: [],
   commandCenterEnabled: false,
@@ -1587,6 +1617,7 @@ const HandlePointerOver = 8;
 const HandleMenuClick = 9;
 const HandleMenuMouseOver = 10;
 const HandleContextMenu = 11;
+const HandleTitleBarContextMenu = 12;
 
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
@@ -1601,13 +1632,19 @@ const i18nString = (key, placeholders = emptyObject) => {
 };
 
 const About = 'About';
+const Appearance = 'Appearance';
+const Chat = 'Chat';
 const CheckForUpdates = 'Check For Updates';
 const ClearRecentlyOpened = 'Clear Recently Opened';
 const Close = 'Close';
 const Exit = 'Exit';
+const TitleBar$2 = 'Title Bar';
 const MenuBar = 'Menu Bar';
 const CommandCenter = 'Command Center';
+const CommandPalette = 'Command Palette';
 const Edit$1 = 'Edit';
+const EditorLayout = 'Editor Layout';
+const Explorer = 'Explorer';
 const File$2 = 'File';
 const Go$1 = 'Go';
 const Help$2 = 'Help';
@@ -1615,12 +1652,19 @@ const Maximize = 'Maximize';
 const Minimize = 'Minimize';
 const MoreDot = 'More ...';
 const NewTerminal = 'New Terminal';
+const OpenView = 'Open View';
 const OpenProcessExplorer = 'Open Process Explorer';
+const Output = 'Output';
+const Problems = 'Problems';
 const Run$1 = 'Run';
+const Search = 'Search';
 const Selection$1 = 'Selection';
+const SourceControl = 'Source Control';
 const Terminal$1 = 'Terminal';
 const ToggleDeveloperTools = 'Toggle Developer Tools';
 const View$1 = 'View';
+const WordWrap = 'Word Wrap';
+const Extensions = 'Extensions';
 const AddCursorAbove = 'Add Cursor Above';
 const AddCursorBelow = 'Add Cursor Below';
 const AddCursorsToLineEnds = 'Add Cursors to Line ends';
@@ -1676,6 +1720,9 @@ const maximize$1 = () => {
 const close$1 = () => {
   return i18nString(Close);
 };
+const titleBar = () => {
+  return i18nString(TitleBar$2);
+};
 const menuBar = () => {
   return i18nString(MenuBar);
 };
@@ -1870,8 +1917,14 @@ const getMenuEntriesTitleBarContextMenu = async state => {
 };
 
 const MenuIdTitleBarContextMenu = 50;
+const MenuIdAppearance = 'appearance';
+const MenuIdEditorLayout = 'editorLayout';
 const getMenuIds = () => {
-  return [Edit$2, File$3, Go$2, Help$3, OpenRecent$1, Run$2, Selection$2, Terminal$2, TitleBar$1, View$2, MenuIdTitleBarContextMenu, TitleBarContextMenu];
+  return [Edit$2, File$3, Go$2, Help$3, OpenRecent$1, Run$2, Selection$2, Terminal$2, TitleBar$3, View$2, MenuIdTitleBarContextMenu, TitleBarContextMenu];
+};
+
+const getMenuEntries$e = () => {
+  return [];
 };
 
 const cut = () => {
@@ -1945,7 +1998,7 @@ const menuEntrySeparator = {
   label: ''
 };
 
-const getMenuEntries$c = () => {
+const getMenuEntries$d = () => {
   return [{
     command: /* TODO */'-1',
     flags: None,
@@ -1984,6 +2037,10 @@ const getMenuEntries$c = () => {
   }];
 };
 
+const getMenuEntries$c = () => {
+  return [];
+};
+
 /**
  * @enum {string}
  */
@@ -2029,7 +2086,7 @@ const OpenRecent = 9;
 const Run = 10;
 const Selection = 11;
 const Terminal = 14;
-const TitleBar = 15;
+const TitleBar$1 = 15;
 const View = 16;
 
 const getMenuEntries$b = platform => {
@@ -2382,13 +2439,84 @@ const getMenuEntries$2 = async platform => {
 };
 
 const getMenuEntries$1 = () => {
-  return [];
+  return [{
+    command: 'Command.openCommandPalette',
+    flags: None,
+    id: 'commandPalette',
+    label: i18nString(CommandPalette)
+  }, {
+    command: 'View.openView',
+    flags: None,
+    id: 'openView',
+    label: i18nString(OpenView)
+  }, menuEntrySeparator, {
+    command: '',
+    flags: SubMenu$1,
+    id: 'appearance',
+    label: i18nString(Appearance)
+  }, {
+    command: '',
+    flags: SubMenu$1,
+    id: 'editorLayout',
+    label: i18nString(EditorLayout)
+  }, menuEntrySeparator, {
+    command: 'Explorer.focus',
+    flags: None,
+    id: 'explorer',
+    label: i18nString(Explorer)
+  }, {
+    command: 'Search.focus',
+    flags: None,
+    id: 'search',
+    label: i18nString(Search)
+  }, {
+    command: 'SourceControl.focus',
+    flags: None,
+    id: 'sourceControl',
+    label: i18nString(SourceControl)
+  }, {
+    command: 'Run.focus',
+    flags: None,
+    id: 'run',
+    label: i18nString(Run$1)
+  }, {
+    command: 'Extensions.focus',
+    flags: None,
+    id: 'extensions',
+    label: i18nString(Extensions)
+  }, menuEntrySeparator, {
+    command: 'Chat.focus',
+    flags: None,
+    id: 'chat',
+    label: i18nString(Chat)
+  }, menuEntrySeparator, {
+    command: 'Problems.toggle',
+    flags: None,
+    id: 'problems',
+    label: i18nString(Problems)
+  }, {
+    command: 'Output.toggle',
+    flags: None,
+    id: 'output',
+    label: i18nString(Output)
+  }, {
+    args: ['Terminal'],
+    command: 'Layout.togglePanel',
+    flags: None,
+    id: 'terminal',
+    label: i18nString(Terminal$1)
+  }, {
+    command: 'Editor.toggleWordWrap',
+    flags: None,
+    id: 'wordWrap',
+    label: i18nString(WordWrap)
+  }];
 };
 
 const getMenuEntries2 = async (state, props) => {
   switch (props.menuId) {
     case Edit$2:
-      return getMenuEntries$c();
+      return getMenuEntries$d();
     case File$3:
       return getMenuEntries$b(props.platform);
     case Go$2:
@@ -2403,13 +2531,19 @@ const getMenuEntries2 = async (state, props) => {
       return getMenuEntries$6();
     case Terminal$2:
       return getMenuEntries$5();
-    case TitleBar$1:
+    case TitleBar$3:
       return getMenuEntries$2(props.platform);
     case TitleBarContextMenu:
     case MenuIdTitleBarContextMenu:
       return getMenuEntriesTitleBarContextMenu(state);
     case View$2:
       return getMenuEntries$1();
+    // @ts-ignore
+    case MenuIdAppearance:
+      return getMenuEntries$e();
+    // @ts-ignore
+    case MenuIdEditorLayout:
+      return getMenuEntries$c();
     default:
       return [];
   }
@@ -2431,7 +2565,7 @@ const getEntryMap = async (state, menuIds, platform) => {
 // TODO cache window id
 
 const getWindowId = async () => {
-  const windowId = await invoke('GetWindowId.getWindowId');
+  const windowId = await getWindowId$1();
   return windowId;
 };
 
@@ -2535,7 +2669,6 @@ const toElectronMenuItem = entry => {
 const toElectronMenuInternal = (commandMap, map, id, electronMenu) => {
   object(commandMap);
   object(map);
-  number(id);
   array(electronMenu);
   const entries = map[id];
   array(entries);
@@ -2547,7 +2680,7 @@ const toElectronMenuInternal = (commandMap, map, id, electronMenu) => {
       };
     }
     const electronEntry = toElectronMenuItem(entry);
-    if (entry.flags === SubMenu$2) {
+    if (entry.flags === SubMenu$2 && entry.id !== undefined && map[entry.id]) {
       toElectronMenuInternal(commandMap, map, entry.id, electronEntry.submenu);
     }
     electronMenu.push(electronEntry);
@@ -2581,7 +2714,7 @@ const hydrate = async state => {
   const {
     commandMap,
     electronMenu
-  } = toElectronMenu(map, TitleBar);
+  } = toElectronMenu(map, TitleBar$1);
   await setItems(electronMenu);
   // TODO get all menu items
   // TODO send menu items to electron
@@ -2670,15 +2803,14 @@ const handleClickToggleMaximize = async state => {
   return state;
 };
 
-// TODO use button name property
-const handleClick$1 = async (state, className) => {
-  if (className.includes('Minimize')) {
+const handleClick$1 = async (state, buttonName) => {
+  if (buttonName === 'Minimize') {
     return handleClickMinimize(state);
   }
-  if (className.includes('Maximize') || className.includes('Restore')) {
+  if (buttonName === 'ToggleMaximize') {
     return handleClickToggleMaximize(state);
   }
-  if (className.includes('Close')) {
+  if (buttonName === 'Close') {
     return handleClickClose(state);
   }
   return state;
@@ -2951,6 +3083,10 @@ const handlePointerOver = (state, name) => {
   return handleMouseOver(state, index);
 };
 
+const handleTitleBarContextMenu = async state => {
+  return state;
+};
+
 /**
  * Parses a title template string and replaces special variables with their values.
  * Supported variables:
@@ -2988,11 +3124,9 @@ const getTitle = (workspaceUri, titleTemplate, appName) => {
   return parseTitleTemplate(titleTemplate, folderName, appName);
 };
 
-const APP_NAME$2 = 'Lvce Editor';
-
 // TODO in the future, it could also be a multi-root workspace
 const handleWorkspaceChange = async (state, uri) => {
-  const title = getTitle(uri, state.titleTemplate, APP_NAME$2);
+  const title = getTitle(uri, state.titleTemplate, state.appName);
   return {
     ...state,
     title,
@@ -3030,7 +3164,7 @@ const getFontString = (fontWeight, fontSize, fontFamily) => {
 };
 
 const launchTextMeasurementWorker = async () => {
-  const rpc = await TransferMessagePortRpcParent.create({
+  const rpc = await create$4({
     commandMap: {},
     async send(port) {
       await sendMessagePortToTextMeasurementWorker(port);
@@ -3103,7 +3237,6 @@ const getWorkspaceUri = () => {
   return invoke('Workspace.getUri');
 };
 
-const APP_NAME$1 = 'Lvce Editor';
 const loadContent2 = async state => {
   const {
     controlsOverlayEnabled,
@@ -3119,7 +3252,7 @@ const loadContent2 = async state => {
   const withWidths = await addWidths(titleBarEntries, labelPadding, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
   const buttons = getTitleBarButtons(platform, controlsOverlayEnabled, titleBarStyleCustom);
   const workspaceUri = await getWorkspaceUri();
-  const title = getTitle(workspaceUri, state.titleTemplate, APP_NAME$1);
+  const title = getTitle(workspaceUri, state.titleTemplate, state.appName);
   const iconWidth = 30;
 
   // TODO load preferences here
@@ -3162,6 +3295,7 @@ const MenuItemSeparator = 'MenuItemSeparator';
 const MenuItemSeparatorLine = 'MenuItemSeparatorLine';
 const MenuItemSubMenu = 'MenuItemSubMenu';
 const MenuItemSubMenuArrowRight = 'MenuItemSubMenuArrowRight';
+const TitleBar = 'TitleBar';
 const TitleBarButtons = 'TitleBarButtons';
 const TitleBarEntryActive = 'TitleBarEntryActive';
 const TitleBarIcon = 'TitleBarIcon';
@@ -3433,6 +3567,7 @@ const createTitleBarButton = button => {
     ariaLabel: label,
     childCount: 1,
     className: `TitleBarButton TitleBarButton${id}`,
+    name: id,
     onClick,
     type: Button$1
   }, getIconVirtualDom(icon, I)];
@@ -3600,11 +3735,11 @@ const getTitleBarVirtualDom = state => {
   const iconSrc = getIcon(assetDir);
   const visibleEntries = getVisibleTitleBarEntries(titleBarEntries, width, focusedIndex, isMenuOpen);
   return [{
-    ariaLabel: 'Title Bar',
-    // TODO i18n string
+    ariaLabel: titleBar(),
     childCount: 4,
-    className: 'Viewlet TitleBar',
+    className: mergeClassNames(Viewlet, TitleBar),
     id: 'TitleBar',
+    onContextMenu: HandleTitleBarContextMenu,
     role: ContentInfo,
     type: Div
   }, ...getTitleBarIconVirtualDom(titleBarIconEnabled, iconSrc), ...getTitleBarMenuBarVirtualDom(titleBarMenuBarEnabled, visibleEntries, focusedIndex), ...getTitleVirtualDom(titleBarTitleEnabled, title), ...getTitleBarButtonsVirtualDom(titleBarButtonsEnabled, titleBarButtons)];
@@ -3654,6 +3789,10 @@ const renderEventListeners = () => {
   }, {
     name: HandleContextMenu,
     params: ['handleContextMenu', Button, ClientX, ClientY]
+  }, {
+    name: HandleTitleBarContextMenu,
+    params: ['handleTitleBarContextMenu'],
+    preventDefault: true
   }, {
     name: HandleClickClose,
     params: ['handleClickClose']
@@ -3722,9 +3861,8 @@ const setPlatform = (state, platform) => {
   };
 };
 
-const APP_NAME = 'Lvce Editor';
 const setTitleTemplate = (state, titleTemplate) => {
-  const title = getTitle(state.workspaceUri, titleTemplate, APP_NAME);
+  const title = getTitle(state.workspaceUri, titleTemplate, state.appName);
   return {
     ...state,
     title,
@@ -3956,7 +4094,7 @@ const handleKeyArrowLeft = ifElse(handleKeyArrowLeftMenuOpen, handleKeyArrowLeft
 const getFn = id => {
   switch (id) {
     case Edit$2:
-      return getMenuEntries$c;
+      return getMenuEntries$d;
     case File$3:
       return getMenuEntries$b;
     case Go$2:
@@ -3971,10 +4109,14 @@ const getFn = id => {
       return getMenuEntries$6;
     case Terminal$2:
       return getMenuEntries$5;
-    case TitleBar$1:
+    case TitleBar$3:
       return getMenuEntries$2;
     case View$2:
       return getMenuEntries$1;
+    case MenuIdAppearance:
+      return getMenuEntries$e;
+    case MenuIdEditorLayout:
+      return getMenuEntries$c;
     default:
       return undefined;
   }
@@ -4358,6 +4500,7 @@ const commandMap = {
   'TitleBar.handleMouseOver': wrapCommand(handleMouseOver),
   'TitleBar.handlePointerOut': wrapCommand(handlePointerOut),
   'TitleBar.handlePointerOver': wrapCommand(handlePointerOver),
+  'TitleBar.handleTitleBarContextMenu': wrapCommand(handleTitleBarContextMenu),
   'TitleBar.handleWorkspaceChange': wrapCommand(handleWorkspaceChange),
   'TitleBar.hideCommandCenter': wrapCommand(hideCommandCenter),
   'TitleBar.hideMenuBar': wrapCommand(hideMenuBar),
@@ -4378,7 +4521,7 @@ const commandMap = {
 
 const listen = async () => {
   registerCommands(commandMap);
-  const rpc = await WebWorkerRpcClient.create({
+  const rpc = await create$3({
     commandMap: commandMap
   });
   set$1(rpc);

package/package.json

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