@lvce-editor/static-server 0.61.16 → 0.62.1

package/static/{7697c47 → 20b9c92}/packages/title-bar-worker/dist/titleBarWorkerMain.js

@@ -61,7 +61,7 @@ class AssertionError extends Error {
   }
 }
 const Object$1 = 1;
-const Number = 2;
+const Number$1 = 2;
 const Array$1 = 3;
 const String = 4;
 const Boolean$1 = 5;
@@ -71,7 +71,7 @@ const Unknown$1 = 8;
 const getType = value => {
   switch (typeof value) {
     case 'number':
-      return Number;
+      return Number$1;
     case 'function':
       return Function;
     case 'string':
@@ -98,7 +98,7 @@ const object = value => {
 };
 const number = value => {
   const type = getType(value);
-  if (type !== Number) {
+  if (type !== Number$1) {
     throw new AssertionError('expected value to be of type number');
   }
 };
@@ -108,18 +108,6 @@ const array = value => {
     throw new AssertionError('expected value to be of type array');
   }
 };
-const string = value => {
-  const type = getType(value);
-  if (type !== String) {
-    throw new AssertionError('expected value to be of type string');
-  }
-};
-const boolean = value => {
-  const type = getType(value);
-  if (type !== Boolean$1) {
-    throw new AssertionError('expected value to be of type boolean');
-  }
-};
 
 const isMessagePort = value => {
   return value && value instanceof MessagePort;
@@ -903,60 +891,328 @@ const WebWorkerRpcClient = {
   __proto__: null,
   create: create$3
 };
+const createMockRpc = ({
+  commandMap
+}) => {
+  const invocations = [];
+  const invoke = (method, ...params) => {
+    invocations.push([method, ...params]);
+    const command = commandMap[method];
+    if (!command) {
+      throw new Error(`command ${method} not found`);
+    }
+    return command(...params);
+  };
+  const mockRpc = {
+    invoke,
+    invokeAndTransfer: invoke,
+    invocations
+  };
+  return mockRpc;
+};
+
+const toCommandId = key => {
+  const dotIndex = key.indexOf('.');
+  return key.slice(dotIndex + 1);
+};
+const create$2 = () => {
+  const states = Object.create(null);
+  const commandMapRef = {};
+  return {
+    get(uid) {
+      return states[uid];
+    },
+    set(uid, oldState, newState) {
+      states[uid] = {
+        oldState,
+        newState
+      };
+    },
+    dispose(uid) {
+      delete states[uid];
+    },
+    getKeys() {
+      return Object.keys(states).map(key => {
+        return Number.parseInt(key);
+      });
+    },
+    clear() {
+      for (const key of Object.keys(states)) {
+        delete states[key];
+      }
+    },
+    wrapCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const {
+          newState
+        } = states[uid];
+        const newerState = await fn(newState, ...args);
+        if (newState === newerState) {
+          return;
+        }
+        const latest = states[uid];
+        states[uid] = {
+          oldState: latest.oldState,
+          newState: newerState
+        };
+      };
+      return wrapped;
+    },
+    wrapGetter(fn) {
+      const wrapped = (uid, ...args) => {
+        const {
+          newState
+        } = states[uid];
+        return fn(newState, ...args);
+      };
+      return wrapped;
+    },
+    diff(uid, modules, numbers) {
+      const {
+        oldState,
+        newState
+      } = states[uid];
+      const diffResult = [];
+      for (let i = 0; i < modules.length; i++) {
+        const fn = modules[i];
+        if (!fn(oldState, newState)) {
+          diffResult.push(numbers[i]);
+        }
+      }
+      return diffResult;
+    },
+    getCommandIds() {
+      const keys = Object.keys(commandMapRef);
+      const ids = keys.map(toCommandId);
+      return ids;
+    },
+    registerCommands(commandMap) {
+      Object.assign(commandMapRef, commandMap);
+    }
+  };
+};
+const terminate = () => {
+  globalThis.close();
+};
+
+const Web = 1;
+const Electron = 2;
+const Remote = 3;
+
+const DEFAULT_UID = 1;
+const createDefaultState = (uid = DEFAULT_UID) => ({
+  assetDir: '',
+  buttons: [],
+  controlsOverlayEnabled: false,
+  focusedIndex: -1,
+  height: 30,
+  iconWidth: 30,
+  isMenuOpen: false,
+  labelFontFamily: 'system-ui, Ubuntu, Droid Sans, sans-serif',
+  labelFontSize: 13,
+  labelFontWeight: 400,
+  labelLetterSpacing: 0,
+  labelPadding: 8,
+  menus: [],
+  platform: Electron,
+  title: '',
+  titleBarButtons: [],
+  titleBarButtonsEnabled: true,
+  titleBarButtonsWidth: 90,
+  titleBarEntries: [],
+  titleBarHeight: 30,
+  titleBarIconEnabled: true,
+  titleBarIconWidth: 30,
+  titleBarMenuBarEnabled: true,
+  titleBarStyleCustom: true,
+  titleBarTitleEnabled: true,
+  uid,
+  width: 800,
+  x: 0,
+  y: 0
+});
+
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const About = 'About';
+const CheckForUpdates = 'Check For Updates';
+const ClearRecentlyOpened = 'Clear Recently Opened';
+const Close = 'Close';
+const Edit$1 = 'Edit';
+const File$2 = 'File';
+const Go$1 = 'Go';
+const Help$1 = 'Help';
+const Maximize = 'Maximize';
+const Minimize = 'Minimize';
+const MoreDot = 'More ...';
+const NewTerminal = 'New Terminal';
+const OpenProcessExplorer = 'Open Process Explorer';
+const Run$1 = 'Run';
+const Selection$1 = 'Selection';
+const Terminal$1 = 'Terminal';
+const ToggleDeveloperTools = 'Toggle Developer Tools';
+const View$1 = 'View';
+
+const file = () => {
+  return i18nString(File$2);
+};
+const edit = () => {
+  return i18nString(Edit$1);
+};
+const selection = () => {
+  return i18nString(Selection$1);
+};
+const view = () => {
+  return i18nString(View$1);
+};
+const go = () => {
+  return i18nString(Go$1);
+};
+const run = () => {
+  return i18nString(Run$1);
+};
+const terminal = () => {
+  return i18nString(Terminal$1);
+};
+const help = () => {
+  return i18nString(Help$1);
+};
+const minimize$1 = () => {
+  return i18nString(Minimize);
+};
+const maximize$1 = () => {
+  return i18nString(Maximize);
+};
+const close$1 = () => {
+  return i18nString(Close);
+};
+
+const getTitleBarButtonsElectron = (controlsOverlayEnabled, titleBarStyleCustom) => {
+  if (controlsOverlayEnabled) {
+    return [];
+  }
+  if (titleBarStyleCustom) {
+    // TODO don't render title bar buttons on windows when electron window controls overlay is enabled
+    return [{
+      label: minimize$1(),
+      icon: 'Minimize',
+      id: 'Minimize',
+      onClick: 'handleClickMinimize'
+    }, {
+      label: maximize$1(),
+      icon: 'Maximize',
+      id: 'ToggleMaximize',
+      onClick: 'handleClickToggleMaximize'
+    }, {
+      label: close$1(),
+      icon: 'ChromeClose',
+      id: 'Close',
+      onClick: 'handleClickClose'
+    }];
+  }
+  return [];
+};
+
+const getTitleBarButtonsRemote = () => {
+  return [];
+};
+
+const getTitleBarButtonsWeb = () => {
+  return [];
+};
+
+const getTitleBarButtons = (platform, controlsOverlayEnabled, titleBarStyleCustom) => {
+  switch (platform) {
+    case Electron:
+      return getTitleBarButtonsElectron(controlsOverlayEnabled, titleBarStyleCustom);
+    case Web:
+      return getTitleBarButtonsWeb();
+    case Remote:
+      return getTitleBarButtonsRemote();
+    default:
+      return [];
+  }
+};
+
+const {
+  get: get$1,
+  set: set$3,
+  getCommandIds,
+  registerCommands,
+  wrapCommand
+} = create$2();
+
+const create3 = (id, uri, x, y, width, height, platform, controlsOverlayEnabled, titleBarStyleCustom) => {
+  const titleBarButtons = getTitleBarButtons(platform, controlsOverlayEnabled, titleBarStyleCustom);
+  const state = {
+    ...createDefaultState(),
+    uid: id,
+    titleBarEntries: [],
+    focusedIndex: -1,
+    isMenuOpen: false,
+    menus: [],
+    labelFontWeight: 400,
+    labelFontSize: 13,
+    labelFontFamily: 'system-ui, Ubuntu, Droid Sans, sans-serif',
+    labelPadding: 8,
+    labelLetterSpacing: 0,
+    titleBarHeight: height,
+    x,
+    y,
+    width,
+    height,
+    iconWidth: 30,
+    platform,
+    controlsOverlayEnabled,
+    titleBarStyleCustom,
+    titleBarButtons
+  };
+  set$3(id, state, state);
+  return state;
+};
 
 const RenderEntries = 1;
 const RenderFocusedIndex = 2;
 const RenderMenus = 3;
 
-const diffType$2 = RenderEntries;
-const isEqual$2 = (oldState, newState) => {
+const isEqual$3 = (oldState, newState) => {
   return oldState.titleBarEntries === newState.titleBarEntries && oldState.width === newState.width && oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
 };
 
-const diffType$1 = RenderFocusedIndex;
-const isEqual$1 = (oldState, newState) => {
+const diffType$2 = RenderFocusedIndex;
+const isEqual$2 = (oldState, newState) => {
   return oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
 };
 
-const diffType = RenderMenus;
-const isEqual = (oldState, newState) => {
+const diffType$1 = RenderMenus;
+const isEqual$1 = (oldState, newState) => {
   return oldState.menus === newState.menus;
 };
 
-const modules = [isEqual$2, isEqual$1, isEqual];
-const numbers = [diffType$2, diffType$1, diffType];
+const modules$1 = [isEqual$3, isEqual$2, isEqual$1];
+const numbers$1 = [RenderEntries, RenderFocusedIndex, RenderMenus];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
-  for (let i = 0; i < modules.length; i++) {
-    const fn = modules[i];
+  for (let i = 0; i < modules$1.length; i++) {
+    const fn = modules$1[i];
     if (!fn(oldState, newState)) {
-      diffResult.push(numbers[i]);
+      diffResult.push(numbers$1[i]);
     }
   }
   return diffResult;
 };
 
-const create$2 = () => {
-  const states = Object.create(null);
-  return {
-    get(uid) {
-      return states[uid];
-    },
-    set(uid, oldState, newState) {
-      states[uid] = {
-        oldState,
-        newState
-      };
-    }
-  };
-};
-
-const {
-  get: get$1,
-  set: set$3
-} = create$2();
-
 const diff2 = uid => {
   const {
     oldState,
@@ -965,13 +1221,46 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
-const commandsIds = ['closeMenu', 'handleClickAt', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusPrevious', 'handleClick', 'handleFocus', 'handleFocusOut', 'handleKeyArrowDown', 'handleKeyArrowLeft', 'handleKeyArrowRight', 'handleKeyArrowUp', 'handleKeyEnd', 'handleKeyEnter', 'handleKeyEscape', 'handleKeyHome', 'handleKeySpace', 'handleMenuClick', 'handleMenuMouseOver', 'handleMouseOut', 'handleMouseOver', 'handlePointerOver', 'handlePointerOut', 'toggleIndex', 'toggleMenu'];
+const diffType = RenderEntries;
+const isEqual = (oldState, newState) => {
+  return oldState.titleBarEntries === newState.titleBarEntries && oldState.width === newState.width && oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen && oldState.assetDir === newState.assetDir && oldState.titleBarIconEnabled === newState.titleBarIconEnabled && oldState.title === newState.title && oldState.titleBarTitleEnabled === newState.titleBarTitleEnabled && oldState.platform === newState.platform && oldState.controlsOverlayEnabled === newState.controlsOverlayEnabled && oldState.titleBarStyleCustom === newState.titleBarStyleCustom && oldState.titleBarButtonsEnabled === newState.titleBarButtonsEnabled && oldState.titleBarButtons === newState.titleBarButtons;
+};
 
-const getCommandIds = () => {
-  return commandsIds;
+const modules = [isEqual, isEqual$2, isEqual$1];
+const numbers = [diffType, diffType$2, diffType$1];
+
+const diff3 = uid => {
+  const {
+    oldState,
+    newState
+  } = get$1(uid);
+  const diffResult = [];
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
+    }
+  }
+  return diffResult;
 };
 
+const Menu$1 = 'menu';
+const MenuBar = 'menubar';
+const MenuItem$1 = 'menuitem';
+const MenuItemCheckBox = 'menuitemcheckbox';
+const None$1 = 'none';
+const Separator$1 = 'separator';
+
+const Button$1 = 1;
+const Div = 4;
+const Span = 8;
 const Text = 12;
+const I = 16;
+const Img = 17;
+
+const Button = 'event.button';
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
 
 const Escape$2 = 8;
 const Space$2 = 9;
@@ -985,6 +1274,8 @@ const DownArrow$2 = 16;
 const CtrlCmd = 1 << 11 >>> 0;
 const Shift = 1 << 10 >>> 0;
 
+const TitleBar$1 = 15;
+
 const DebugWorker = 55;
 const RendererWorker$1 = 1;
 
@@ -992,6 +1283,10 @@ const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
 
+const px = value => {
+  return `${value}px`;
+};
+
 const text = data => {
   return {
     type: Text,
@@ -1038,22 +1333,10 @@ const getKeyBindings$1 = () => {
   }];
 };
 
-const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
-const i18nString = (key, placeholders = emptyObject) => {
-  if (placeholders === emptyObject) {
-    return key;
-  }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
-};
-
 /**
  * @enum {string}
  */
-const UiStrings$2 = {
+const UiStrings$1 = {
   Copy: 'Copy',
   CopyLineDown: 'Copy Line Down',
   CopyLineUp: 'Copy Line Up',
@@ -1067,55 +1350,55 @@ const UiStrings$2 = {
   ToggleLineComment: 'Toggle Line Comment',
   Undo: 'Undo'};
 const cut = () => {
-  return i18nString(UiStrings$2.Cut);
+  return i18nString(UiStrings$1.Cut);
 };
 const copy = () => {
-  return i18nString(UiStrings$2.Copy);
+  return i18nString(UiStrings$1.Copy);
 };
 const paste = () => {
-  return i18nString(UiStrings$2.Paste);
+  return i18nString(UiStrings$1.Paste);
 };
 const undo = () => {
-  return i18nString(UiStrings$2.Undo);
+  return i18nString(UiStrings$1.Undo);
 };
 const redo = () => {
-  return i18nString(UiStrings$2.Redo);
+  return i18nString(UiStrings$1.Redo);
 };
 const toggleLineComment = () => {
-  return i18nString(UiStrings$2.ToggleLineComment);
+  return i18nString(UiStrings$1.ToggleLineComment);
 };
 const toggleBlockComment = () => {
-  return i18nString(UiStrings$2.ToggleBlockComment);
+  return i18nString(UiStrings$1.ToggleBlockComment);
 };
 const selectAll = () => {
-  return i18nString(UiStrings$2.SelectAll);
+  return i18nString(UiStrings$1.SelectAll);
 };
 const copyLineUp = () => {
-  return i18nString(UiStrings$2.CopyLineUp);
+  return i18nString(UiStrings$1.CopyLineUp);
 };
 const copyLineDown = () => {
-  return i18nString(UiStrings$2.CopyLineDown);
+  return i18nString(UiStrings$1.CopyLineDown);
 };
 const moveLineUp = () => {
-  return i18nString(UiStrings$2.MoveLineUp);
+  return i18nString(UiStrings$1.MoveLineUp);
 };
 const moveLineDown = () => {
-  return i18nString(UiStrings$2.MoveLineDown);
+  return i18nString(UiStrings$1.MoveLineDown);
 };
 
-const Edit$1 = 2;
-const File$2 = 5;
-const Go$1 = 6;
-const Help$1 = 7;
+const Edit = 2;
+const File$1 = 5;
+const Go = 6;
+const Help = 7;
 const OpenRecent = 9;
-const Run$1 = 10;
-const Selection$1 = 11;
-const Terminal$1 = 14;
+const Run = 10;
+const Selection = 11;
+const Terminal = 14;
 const TitleBar = 15;
-const View$1 = 16;
+const View = 16;
 
-const Separator$1 = 1;
-const None$1 = 0;
+const Separator = 1;
+const None = 0;
 const SubMenu = 4;
 const Checked = 2;
 const Unchecked = 3;
@@ -1126,11 +1409,11 @@ const Ignore = 7;
 const menuEntrySeparator = {
   id: 'separator',
   label: '',
-  flags: Separator$1,
+  flags: Separator,
   command: ''
 };
 
-const id$9 = Edit$1;
+const id$9 = Edit;
 const getMenuEntries$d = () => {
   return [{
     id: 'undo',
@@ -1145,27 +1428,27 @@ const getMenuEntries$d = () => {
   }, menuEntrySeparator, {
     id: 'cut',
     label: cut(),
-    flags: None$1,
+    flags: None,
     command: /* Editor.cut */'Editor.cut'
   }, {
     id: 'copy',
     label: copy(),
-    flags: None$1,
+    flags: None,
     command: /* Editor.copy */'Editor.copy'
   }, {
     id: 'paste',
     label: paste(),
-    flags: None$1,
+    flags: None,
     command: /* Editor.paste */'Editor.paste'
   }, menuEntrySeparator, {
     id: 'toggle-line-comment',
     label: toggleLineComment(),
-    flags: None$1,
+    flags: None,
     command: /* Editor.toggleLineComment */'Editor.toggleLineComment'
   }, {
     id: 'toggle-block-comment',
     label: toggleBlockComment(),
-    flags: None$1,
+    flags: None,
     command: /* Editor.toggleBlockComment */'Editor.toggleBlockComment'
   }];
 };
@@ -1179,7 +1462,7 @@ const MenuEntriesEdit = {
 /**
  * @enum {string}
  */
-const UiStrings$1 = {
+const UiStrings = {
   NewFile: 'New File',
   NewWindow: 'New Window',
   OpenFile: 'Open File',
@@ -1190,50 +1473,46 @@ const UiStrings$1 = {
   SaveAll: 'Save All'
 };
 const newFile = () => {
-  return i18nString(UiStrings$1.NewFile);
+  return i18nString(UiStrings.NewFile);
 };
 const newWindow = () => {
-  return i18nString(UiStrings$1.NewWindow);
+  return i18nString(UiStrings.NewWindow);
 };
 const openFile = () => {
-  return i18nString(UiStrings$1.OpenFile);
+  return i18nString(UiStrings.OpenFile);
 };
 const openFolder = () => {
-  return i18nString(UiStrings$1.OpenFolder);
+  return i18nString(UiStrings.OpenFolder);
 };
 const openRecent = () => {
-  return i18nString(UiStrings$1.OpenRecent);
+  return i18nString(UiStrings.OpenRecent);
 };
 const save = () => {
-  return i18nString(UiStrings$1.Save);
+  return i18nString(UiStrings.Save);
 };
 const saveAll = () => {
-  return i18nString(UiStrings$1.SaveAll);
+  return i18nString(UiStrings.SaveAll);
 };
 const exit = () => {
-  return i18nString(UiStrings$1.Exit);
+  return i18nString(UiStrings.Exit);
 };
 
-const Web = 1;
-const Electron = 2;
-const Remote = 3;
-
-const id$8 = File$2;
+const id$8 = File$1;
 const getMenuEntries$c = platform => {
   const entries = [{
     id: 'newFile',
     label: newFile(),
-    flags: None$1,
+    flags: None,
     command: '-1'
   }, {
     id: 'newWindow',
     label: newWindow(),
-    flags: None$1,
+    flags: None,
     command: /* Window.openNew */'Window.openNew'
   }, menuEntrySeparator, {
     id: 'openFile',
     label: openFile(),
-    flags: None$1,
+    flags: None,
     command: 'Dialog.openFile'
   }, {
     id: 'openFolder',
@@ -1248,12 +1527,12 @@ const getMenuEntries$c = platform => {
   }, menuEntrySeparator, {
     id: 'save',
     label: save(),
-    flags: None$1,
+    flags: None,
     command: 'Main.save'
   }, {
     id: 'saveAll',
     label: saveAll(),
-    flags: None$1,
+    flags: None,
     command: 'Main.saveAll'
   }];
   if (platform === Electron) {
@@ -1273,7 +1552,7 @@ const MenuEntriesFile = {
   id: id$8
 };
 
-const id$7 = Go$1;
+const id$7 = Go;
 const getMenuEntries$b = () => {
   return [];
 };
@@ -1284,24 +1563,6 @@ const MenuEntriesGo = {
   id: id$7
 };
 
-const About = 'About';
-const CheckForUpdates = 'Check For Updates';
-const ClearRecentlyOpened = 'Clear Recently Opened';
-const Close = 'Close';
-const Edit = 'Edit';
-const File$1 = 'File';
-const Go = 'Go';
-const Help = 'Help';
-const Maximize = 'Maximize';
-const Minimize = 'Minimize';
-const MoreDot = 'More ...';
-const OpenProcessExplorer = 'Open Process Explorer';
-const Run = 'Run';
-const Selection = 'Selection';
-const Terminal = 'Terminal';
-const ToggleDeveloperTools = 'Toggle Developer Tools';
-const View = 'View';
-
 const toggleDeveloperTools = () => {
   return i18nString(ToggleDeveloperTools);
 };
@@ -1322,7 +1583,7 @@ const isAutoUpdateSupported = platform => {
   return false;
 };
 
-const id$6 = Help$1;
+const id$6 = Help;
 const getMenuEntries$a = async platform => {
   const autoUpdateSupported = isAutoUpdateSupported(platform);
   const entries = [];
@@ -1330,7 +1591,7 @@ const getMenuEntries$a = async platform => {
     entries.push({
       id: 'toggleDeveloperTools',
       label: toggleDeveloperTools(),
-      flags: None$1,
+      flags: None,
       command: 'Developer.toggleDeveloperTools'
     }, {
       id: 'openProcessExplorer',
@@ -1353,7 +1614,7 @@ const getMenuEntries$a = async platform => {
   entries.push({
     id: 'about',
     label: about(),
-    flags: None$1,
+    flags: None,
     command: 'About.showAbout'
   });
   return entries;
@@ -1459,6 +1720,11 @@ const sendMessagePortToMarkdownWorker = async (port, rpcId) => {
   // @ts-ignore
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToMarkdownWorker', port, command, rpcId);
 };
+const sendMessagePortToIconThemeWorker = async (port, rpcId) => {
+  const command = 'IconTheme.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToIconThemeWorker', port, command, rpcId);
+};
 const sendMessagePortToFileSystemWorker = async (port, rpcId) => {
   const command = 'FileSystem.handleMessagePort';
   // @ts-ignore
@@ -1658,6 +1924,13 @@ const getLogsDir = async () => {
   // @ts-ignore
   return invoke$1('PlatformPaths.getLogsDir');
 };
+const registerMockRpc = commandMap => {
+  const mockRpc = createMockRpc({
+    commandMap
+  });
+  set$1(mockRpc);
+  return mockRpc;
+};
 
 const RendererWorker = {
   __proto__: null,
@@ -1707,6 +1980,7 @@ const RendererWorker = {
   openUrl,
   openWidget,
   readFile,
+  registerMockRpc,
   registerWebViewInterceptor,
   renderMarkdown,
   rerenderEditor,
@@ -1717,6 +1991,7 @@ const RendererWorker = {
   sendMessagePortToErrorWorker,
   sendMessagePortToExtensionHostWorker,
   sendMessagePortToFileSystemWorker,
+  sendMessagePortToIconThemeWorker,
   sendMessagePortToMarkdownWorker,
   sendMessagePortToRendererProcess,
   sendMessagePortToSearchProcess,
@@ -1776,7 +2051,7 @@ const toMenuItem = folder => {
   const label = getTitle(homeDir, folder);
   return {
     label,
-    flags: None$1,
+    flags: None,
     command: 'Workspace.setPath',
     args: [folder]
   };
@@ -1792,12 +2067,12 @@ const getMenuEntries$9 = async () => {
   items.push({
     id: 'more',
     label: moreDot(),
-    flags: None$1,
+    flags: None,
     command: 'QuickPick.showRecent'
   }, menuEntrySeparator, {
     id: 'clearRecentlyOpened',
     label: clearRecentlyOpened(),
-    flags: None$1,
+    flags: None,
     command: 'RecentlyOpened.clearRecentlyOpened'
   });
   return items;
@@ -1809,7 +2084,7 @@ const MenuEntriesOpenRecent = {
   id: id$5
 };
 
-const id$4 = Run$1;
+const id$4 = Run;
 const getMenuEntries$8 = () => {
   return [];
 };
@@ -1820,22 +2095,22 @@ const MenuEntriesRun = {
   id: id$4
 };
 
-const id$3 = Selection$1;
+const id$3 = Selection;
 const getMenuEntries$7 = () => {
   return [{
     id: 'selectAll',
     label: selectAll(),
-    flags: None$1,
+    flags: None,
     command: 'Editor.selectAll'
   }, {
     id: 'copyLineUp',
     label: copyLineUp(),
-    flags: None$1,
+    flags: None,
     command: 'Editor.copyLineUp'
   }, {
     id: 'copyLineDown',
     label: copyLineDown(),
-    flags: None$1,
+    flags: None,
     command: 'Editor.copyLineDown'
   }, {
     id: 'moveLineUp',
@@ -1856,22 +2131,12 @@ const MenuEntriesSelection = {
   id: id$3
 };
 
-/**
- * @enum {string}
- */
-const UiStrings = {
-  NewTerminal: 'New Terminal'
-};
-const newTerminal = () => {
-  return i18nString(UiStrings.NewTerminal);
-};
-
-const id$2 = Terminal$1;
+const id$2 = Terminal;
 const getMenuEntries$6 = () => {
   return [{
     id: 'newTerminal',
-    label: newTerminal(),
-    flags: None$1,
+    label: i18nString(NewTerminal),
+    flags: None,
     command: 'Layout.togglePanel',
     args: ['Terminal']
   }];
@@ -1883,73 +2148,39 @@ const MenuEntriesTerminal = {
   id: id$2
 };
 
-const file = () => {
-  return i18nString(File$1);
-};
-const edit = () => {
-  return i18nString(Edit);
-};
-const selection = () => {
-  return i18nString(Selection);
-};
-const view = () => {
-  return i18nString(View);
-};
-const go = () => {
-  return i18nString(Go);
-};
-const run = () => {
-  return i18nString(Run);
-};
-const terminal = () => {
-  return i18nString(Terminal);
-};
-const help = () => {
-  return i18nString(Help);
-};
-const minimize$1 = () => {
-  return i18nString(Minimize);
-};
-const maximize$1 = () => {
-  return i18nString(Maximize);
-};
-const close$1 = () => {
-  return i18nString(Close);
-};
-
 const getMenuEntries$5 = () => {
   return [{
-    id: File$2,
+    id: File$1,
     label: file(),
     flags: SubMenu
   }, {
-    id: Edit$1,
+    id: Edit,
     label: edit(),
     flags: SubMenu
   }, {
-    id: Selection$1,
+    id: Selection,
     label: selection(),
     flags: SubMenu
   }, {
-    id: View$1,
+    id: View,
     label: view(),
     flags: SubMenu
   }, {
-    id: Go$1,
+    id: Go,
     label: go(),
     flags: SubMenu
   }, {
-    id: Run$1,
+    id: Run,
     label: run(),
     keyboardShortCut: 'Alt+r',
     flags: SubMenu
   }, {
-    id: Terminal$1,
+    id: Terminal,
     label: terminal(),
     keyboardShortCut: 'Alt+t',
     flags: SubMenu
   }, {
-    id: Help$1,
+    id: Help,
     label: help(),
     keyboardShortCut: 'Alt+h',
     flags: SubMenu
@@ -1958,29 +2189,29 @@ const getMenuEntries$5 = () => {
 
 const getMenuEntries$4 = () => {
   return [{
-    id: File$2,
+    id: File$1,
     label: file(),
-    flags: None$1
+    flags: None
   }, {
-    id: Edit$1,
+    id: Edit,
     label: edit(),
-    flags: None$1
+    flags: None
   }, {
-    id: Selection$1,
+    id: Selection,
     label: selection(),
-    flags: None$1
+    flags: None
   }, {
-    id: View$1,
+    id: View,
     label: view(),
-    flags: None$1
+    flags: None
   }, {
-    id: Go$1,
+    id: Go,
     label: go(),
-    flags: None$1
+    flags: None
   }, {
-    id: Help$1,
+    id: Help,
     label: help(),
-    flags: None$1
+    flags: None
   }];
 };
 
@@ -2004,7 +2235,7 @@ const MenuEntriesTitleBar = {
   id: id$1
 };
 
-const id = View$1;
+const id = View;
 const getMenuEntries$2 = () => {
   return [];
 };
@@ -2028,53 +2259,9 @@ const getMenuEntries$1 = (id, platform) => {
   return menu.getMenuEntries(platform);
 };
 
-const getTitleBarButtonsWeb = () => {
-  return [];
-};
-const getTitleBarButtonsRemote = () => {
-  return [];
-};
-const getTitleBarButtonsElectron = (controlsOverlayEnabled, titleBarStyleCustom) => {
-  if (controlsOverlayEnabled) {
-    return [];
-  }
-  if (titleBarStyleCustom) {
-    // TODO don't render title bar buttons on windows when electron window controls overlay is enabled
-    return [{
-      label: minimize$1(),
-      icon: 'Minimize',
-      id: 'Minimize',
-      onClick: 'handleClickMinimize'
-    }, {
-      label: maximize$1(),
-      icon: 'Maximize',
-      id: 'ToggleMaximize',
-      onClick: 'handleClickToggleMaximize'
-    }, {
-      label: close$1(),
-      icon: 'ChromeClose',
-      id: 'Close',
-      onClick: 'handleClickClose'
-    }];
-  }
-  return [];
-};
-const getTitleBarButtons = (platform, controlsOverlayEnabled, titleBarStyleCustom) => {
-  switch (platform) {
-    case Electron:
-      return getTitleBarButtonsElectron(controlsOverlayEnabled, titleBarStyleCustom);
-    case Web:
-      return getTitleBarButtonsWeb();
-    case Remote:
-      return getTitleBarButtonsRemote();
-    default:
-      return [];
-  }
-};
-
 const MaskIconCheck = 'MaskIconCheck';
-const Menu$1 = 'Menu';
-const MenuItem$1 = 'MenuItem';
+const Menu = 'Menu';
+const MenuItem = 'MenuItem';
 const MenuItemCheckMark = 'MenuItemCheckMark';
 const MenuItemCheckmarkIcon = 'MenuItemCheckmarkIcon';
 const MenuItemFocused = 'MenuItemFocused';
@@ -2092,24 +2279,11 @@ const TitleBarTopLevelEntry = 'TitleBarTopLevelEntry';
 const TitleBarTopLevelEntryLabel = 'TitleBarTopLevelEntryLabel';
 const Viewlet = 'Viewlet';
 
-const Menu = 'menu';
-const MenuBar = 'menubar';
-const MenuItem = 'menuitem';
-const MenuItemCheckBox = 'menuitemcheckbox';
-const None = 'none';
-const Separator = 'separator';
-
-const Button = 1;
-const Div = 4;
-const I = 16;
-const Img = 17;
-const Span = 8;
-
 const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: `MaskIcon MaskIcon${icon}`,
-    role: None,
+    role: None$1,
     childCount: 0
   };
 };
@@ -2122,7 +2296,7 @@ const createTitleBarButton = button => {
     onClick
   } = button;
   const dom = [{
-    type: Button,
+    type: Button$1,
     className: `TitleBarButton TitleBarButton${id}`,
     ariaLabel: label,
     childCount: 1,
@@ -2132,20 +2306,20 @@ const createTitleBarButton = button => {
 };
 
 const getTitleBarButtonsVirtualDom = buttons => {
-  const dom = [{
+  return [{
     type: Div,
     className: mergeClassNames(Viewlet, TitleBarButtons),
     childCount: buttons.length
   }, ...buttons.flatMap(createTitleBarButton)];
-  return dom;
 };
 
+const parentNode$1 = {
+  type: Div,
+  className: mergeClassNames(Viewlet, TitleBarIcon),
+  childCount: 1
+};
 const getTitleBarIconVirtualDom = iconSrc => {
-  return [{
-    type: Div,
-    className: mergeClassNames(Viewlet, TitleBarIcon),
-    childCount: 1
-  }, {
+  return [parentNode$1, {
     type: Img,
     className: TitleBarIconIcon,
     src: iconSrc,
@@ -2154,16 +2328,16 @@ const getTitleBarIconVirtualDom = iconSrc => {
   }];
 };
 
-const HandleClick = 'handleClick';
-const HandleClickMinimize = 'handleClickMinimize';
-const HandleClickToggleClose = 'handleClickToggleClose';
-const HandleClickToggleMaximize = 'handleClickToggleMaximize';
-const HandleFocusIn = 'handleFocusIn';
-const HandleFocusOut = 'handleFocusOut';
-const HandlePointerOut = 'handlePointerOut';
-const HandlePointerOver = 'handlePointerOver';
-const HandleMenuClick = 'handleMenuClick';
-const HandleMenuMouseOver = 'handleMenuMouseOver';
+const HandleClick = 1;
+const HandleClickMinimize = 2;
+const HandleClickToggleClose = 3;
+const HandleClickToggleMaximize = 4;
+const HandleFocusIn = 5;
+const HandleFocusOut = 6;
+const HandlePointerOut = 7;
+const HandlePointerOver = 8;
+const HandleMenuClick = 9;
+const HandleMenuMouseOver = 10;
 
 const getItemVirtualDom = item => {
   // @ts-ignore
@@ -2173,13 +2347,14 @@ const getItemVirtualDom = item => {
     isOpen,
     isFocused
   } = item;
+  // TODO avoid mutation
   const dom = [];
   dom.push({
     type: Div,
     className: TitleBarTopLevelEntry,
     ariaHasPopup: true,
     ariaExpanded: isOpen,
-    role: MenuItem,
+    role: MenuItem$1,
     childCount: 1,
     ariaKeyShortcuts: keyboardShortCut
   });
@@ -2222,8 +2397,13 @@ const getTitleBarMenuBarVirtualDom = (visibleItems, focusedIndex) => {
   }, ...getTitleBarMenuBarItemsVirtualDom(visibleItems)];
 };
 
+const parentNode = {
+  type: Div,
+  className: 'TitleBarTitle',
+  childCount: 1
+};
 const getTitleVirtualDom = title => {
-  return [text(title)];
+  return [parentNode, text(title)];
 };
 
 const maximize = async () => {
@@ -2252,7 +2432,8 @@ const handleClickToggleMaximize = async state => {
   return state;
 };
 
-const handleClick$1 = (state, className) => {
+// TODO use button name property
+const handleClick$1 = async (state, className) => {
   if (className.includes('Minimize')) {
     return handleClickMinimize(state);
   }
@@ -2298,7 +2479,7 @@ const getMenuHeight = items => {
   let height = CONTEXT_MENU_PADDING;
   for (const item of items) {
     switch (item.flags) {
-      case Separator$1:
+      case Separator:
         height += CONTEXT_MENU_SEPARATOR_HEIGHT;
         break;
       default:
@@ -2354,7 +2535,7 @@ const getIndexToFocusPrevious = menu => {
 };
 const canBeFocused = item => {
   switch (item.flags) {
-    case Separator$1:
+    case Separator:
     case Disabled:
       return false;
     default:
@@ -2483,11 +2664,16 @@ const ifElse = (menuOpenFunction, menuClosedFunction) => {
 const handleMouseOut = ifElse(handleMouseOutMenuOpen, handleMouseOutMenuClosed);
 
 const handlePointerOut = (state, clientX, clientY) => {
-  const index = getTitleBarIndexFromPosition(state.titleBarEntries, clientX - state.x);
+  const {
+    x,
+    iconWidth,
+    titleBarEntries
+  } = state;
+  const index = getTitleBarIndexFromPosition(titleBarEntries, clientX - x - iconWidth);
   if (index === -1) {
     return state;
   }
-  return handleMouseOut(state, index);
+  return handleMouseOut(state);
 };
 
 const handleMouseOverMenuClosed = (state, index) => {
@@ -2504,81 +2690,61 @@ const handleMouseOverMenuOpen = async (state, index) => {
 const handleMouseOver = ifElse(handleMouseOverMenuOpen, handleMouseOverMenuClosed);
 
 const handlePointerOver = (state, clientX, clientY) => {
-  const index = getTitleBarIndexFromPosition(state.titleBarEntries, clientX - state.x);
+  const {
+    titleBarEntries,
+    x,
+    iconWidth
+  } = state;
+  const index = getTitleBarIndexFromPosition(titleBarEntries, clientX - x - iconWidth);
   if (index === -1) {
     return state;
   }
   return handleMouseOver(state, index);
 };
 
-const getFontString = (fontWeight, fontSize, fontFamily) => {
-  return `${fontWeight} ${fontSize}px ${fontFamily}`;
-};
-
-const createTextMeasureContext = () => {
+const createTextMeasureContext = (letterSpacing, font) => {
   const canvas = new OffscreenCanvas(0, 0);
   const ctx = canvas.getContext('2d');
   if (!ctx) {
     throw new Error('Failed to get canvas context 2d');
   }
+  ctx.letterSpacing = letterSpacing;
+  ctx.font = font;
   return ctx;
 };
 
-const state = {
-  ctx: undefined
-};
-const getOrCreate = createCtx => {
-  if (state.ctx) {
-    return state.ctx;
-  }
-  state.ctx = createCtx();
-  return state.ctx;
-};
-
-const getContext = () => {
-  const ctx = getOrCreate(createTextMeasureContext);
-  return ctx;
-};
-
-const px = value => {
-  return `${value}px`;
+const getFontString = (fontWeight, fontSize, fontFamily) => {
+  return `${fontWeight} ${fontSize}px ${fontFamily}`;
 };
 
-const getLetterSpacingString = letterSpacing => {
-  return px(letterSpacing);
-};
-const measureTextWidth = (text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
-  string(text);
-  number(fontWeight);
-  number(fontSize);
-  string(fontFamily);
-  boolean(isMonoSpaceFont);
-  number(charWidth);
+const measureTextWidths = (texts, fontWeight, fontSize, fontFamily, letterSpacing) => {
   if (typeof letterSpacing !== 'number') {
     throw new TypeError('letterSpacing must be of type number');
   }
-  const letterSpacingString = getLetterSpacingString(letterSpacing);
+  const letterSpacingString = px(letterSpacing);
   const fontString = getFontString(fontWeight, fontSize, fontFamily);
-  const ctx = getContext();
-  ctx.letterSpacing = letterSpacingString;
-  ctx.font = fontString;
-  const metrics = ctx.measureText(text);
-  const {
-    width
-  } = metrics;
-  return width;
+  const ctx = createTextMeasureContext(letterSpacingString, fontString);
+  const widths = [];
+  for (const text of texts) {
+    const metrics = ctx.measureText(text);
+    const {
+      width
+    } = metrics;
+    widths.push(width);
+  }
+  return widths;
 };
 
-const measureTitleBarEntryWidth = (label, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  const isMonospaceFont = false;
-  const charWidth = 0;
-  return measureTextWidth(label, fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth);
+const getLabel = entry => {
+  return entry.label;
 };
-
 const addWidths = (entries, labelPadding, fontWeight, fontSize, fontFamily, letterSpacing) => {
+  const labels = entries.map(getLabel);
+  const widths = measureTextWidths(labels, fontWeight, fontSize, fontFamily, letterSpacing);
   const withWidths = [];
-  for (const entry of entries) {
-    const textWidth = measureTitleBarEntryWidth(entry.label, fontWeight, fontSize, fontFamily, letterSpacing);
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i];
+    const textWidth = widths[i];
     const width = textWidth + labelPadding * 2;
     withWidths.push({
       ...entry,
@@ -2588,8 +2754,36 @@ const addWidths = (entries, labelPadding, fontWeight, fontSize, fontFamily, lett
   return withWidths;
 };
 
+const loadContent2 = async state => {
+  const {
+    platform,
+    controlsOverlayEnabled,
+    titleBarStyleCustom,
+    labelFontFamily,
+    labelFontSize,
+    labelFontWeight,
+    labelLetterSpacing,
+    labelPadding
+  } = state;
+  const titleBarEntries = await getMenuEntries(TitleBar$1);
+  const withWidths = addWidths(titleBarEntries, labelPadding, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
+  const buttons = getTitleBarButtons(platform, controlsOverlayEnabled, titleBarStyleCustom);
+  const title = 'test';
+  const iconWidth = 30;
+  return {
+    ...state,
+    titleBarEntries: withWidths,
+    buttons,
+    title,
+    iconWidth
+  };
+};
+
 const loadContent = async (state, titleBarEntries) => {
   const {
+    platform,
+    controlsOverlayEnabled,
+    titleBarStyleCustom,
     labelFontFamily,
     labelFontSize,
     labelFontWeight,
@@ -2597,9 +2791,13 @@ const loadContent = async (state, titleBarEntries) => {
     labelPadding
   } = state;
   const withWidths = addWidths(titleBarEntries, labelPadding, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
+  const buttons = getTitleBarButtons(platform, controlsOverlayEnabled, titleBarStyleCustom);
+  const title = 'test';
   return {
     ...state,
-    titleBarEntries: withWidths
+    titleBarEntries: withWidths,
+    buttons,
+    title
   };
 };
 
@@ -2658,7 +2856,7 @@ const renderFocusedIndex = (oldState, newState) => {
 
 const checkboxChecked = {
   type: Div,
-  className: mergeClassNames(MenuItem$1, MenuItemCheckMark),
+  className: mergeClassNames(MenuItem, MenuItemCheckMark),
   role: MenuItemCheckBox,
   ariaChecked: true,
   tabIndex: -1,
@@ -2966,41 +3164,45 @@ const parseKey = rawKey => {
   };
 };
 
+const getKeyDom = key => {
+  const parsedKey = parseKey(key);
+  const keyBindingsString = getKeyBindingString(parsedKey.key, false, parsedKey.isCtrl, parsedKey.isShift);
+  return [{
+    type: Span,
+    className: MenuItemKeyBinding,
+    childCount: 1
+  }, text(keyBindingsString)];
+};
+
+const classNameFocused = mergeClassNames(MenuItem, MenuItemFocused);
+const getMenuItemClassName = isFocused => {
+  if (isFocused) {
+    return classNameFocused;
+  }
+  return MenuItem;
+};
 const getMenuItemDefaultDom = menuItem => {
   const {
     label,
     isFocused,
     key
   } = menuItem;
-  let className = MenuItem$1;
-  if (isFocused) {
-    className += ' ' + MenuItemFocused;
-  }
-  const dom = [];
-  dom.push({
+  const className = getMenuItemClassName(isFocused);
+  const keyDom = key ? getKeyDom(key) : [];
+  const childCount = key ? 2 : 1;
+  return [{
     type: Div,
     className,
-    role: MenuItem,
+    role: MenuItem$1,
     tabIndex: -1,
-    childCount: 1
-  }, text(label));
-  if (key) {
-    dom[0].childCount++;
-    const parsedKey = parseKey(key);
-    const keyBindingsString = getKeyBindingString(parsedKey.key, false, parsedKey.isCtrl, parsedKey.isShift);
-    dom.push({
-      type: Span,
-      className: MenuItemKeyBinding,
-      childCount: 1
-    }, text(keyBindingsString));
-  }
-  return dom;
+    childCount
+  }, text(label), ...keyDom];
 };
 
 const disabled = {
   type: Div,
-  className: MenuItem$1,
-  role: MenuItem,
+  className: MenuItem,
+  role: MenuItem$1,
   tabIndex: -1,
   disabled: true,
   childCount: 1
@@ -3019,7 +3221,7 @@ const getMenuItemsNoopDom = () => {
 const separator = {
   type: Div,
   className: MenuItemSeparator,
-  role: Separator,
+  role: Separator$1,
   childCount: 1
 };
 const separatorLine = {
@@ -3043,15 +3245,12 @@ const getMenuItemSubMenuDom = menuItem => {
     isExpanded,
     level
   } = menuItem;
-  let className = MenuItem$1;
-  className += ' ' + MenuItemSubMenu;
-  if (isFocused) {
-    className += ' ' + MenuItemFocused;
-  }
+  const baseClassName = mergeClassNames(MenuItem, MenuItemSubMenu);
+  const className = isFocused ? mergeClassNames(baseClassName, MenuItemFocused) : baseClassName;
   return [{
     type: Div,
     className,
-    role: MenuItem,
+    role: MenuItem$1,
     tabIndex: -1,
     ariaHasPopup: true,
     ariaExpanded: isExpanded,
@@ -3062,7 +3261,7 @@ const getMenuItemSubMenuDom = menuItem => {
 
 const checkboxUnchecked = {
   type: Div,
-  className: MenuItem$1,
+  className: MenuItem,
   role: MenuItemCheckBox,
   ariaChecked: false,
   tabIndex: -1,
@@ -3077,11 +3276,11 @@ const getMenuItemUncheckedDom = menuItem => {
 
 const getMenuItemRenderer = flags => {
   switch (flags) {
-    case None$1:
+    case None:
     case RestoreFocus:
     case Ignore:
       return getMenuItemDefaultDom;
-    case Separator$1:
+    case Separator:
       return getMenuItemSeparatorDom;
     case Checked:
       return getMenuItemCheckedDom;
@@ -3107,8 +3306,8 @@ const getMenuItemVirtualDom = menuItem => {
 const getMenuVirtualDom = menuItems => {
   const dom = [{
     type: Div,
-    className: Menu$1,
-    role: Menu,
+    className: Menu,
+    role: Menu$1,
     tabIndex: -1,
     childCount: menuItems.length
   }, ...menuItems.flatMap(getMenuItemVirtualDom)];
@@ -3200,6 +3399,93 @@ const render2 = async (uid, diffResult) => {
   return commands;
 };
 
+const getIcon = assetDir => {
+  return `${assetDir}/icons/icon.svg`;
+};
+
+const getTitleBarVirtualDom = state => {
+  const {
+    titleBarEntries,
+    width,
+    focusedIndex,
+    isMenuOpen,
+    assetDir,
+    title,
+    titleBarButtons
+  } = state;
+  const dom = [];
+  dom.push({
+    type: Div,
+    className: 'Viewlet TitleBar',
+    id: 'TitleBar',
+    role: 'contentinfo',
+    ariaLabel: 'Title Bar',
+    childCount: 4
+  });
+
+  // Add icon if enabled
+  if (state.titleBarIconEnabled) {
+    const iconSrc = getIcon(assetDir);
+    const iconDom = getTitleBarIconVirtualDom(iconSrc);
+    dom.push(...iconDom);
+  }
+
+  // Add menu bar if enabled
+  if (state.titleBarMenuBarEnabled) {
+    const visibleEntries = getVisibleTitleBarEntries(titleBarEntries, width, focusedIndex, isMenuOpen);
+    const menuBarDom = getTitleBarMenuBarVirtualDom(visibleEntries, focusedIndex);
+    dom.push(...menuBarDom);
+  }
+
+  // Add title if enabled
+  if (state.titleBarTitleEnabled) {
+    const titleDom = getTitleVirtualDom(title);
+    dom.push(...titleDom);
+  }
+
+  // Add buttons if enabled
+  if (state.titleBarButtonsEnabled) {
+    const buttonsDom = getTitleBarButtonsVirtualDom(titleBarButtons);
+    dom.push(...buttonsDom);
+  }
+  return dom;
+};
+
+const renderTitleBar = (oldState, newState) => {
+  const dom = getTitleBarVirtualDom(newState);
+  return ['Viewlet.setDom2', newState.uid, dom];
+};
+
+const getRenderer3 = diffType => {
+  switch (diffType) {
+    case RenderEntries:
+      return renderTitleBar;
+    case RenderFocusedIndex:
+      return renderFocusedIndex;
+    case RenderMenus:
+      return renderMenus;
+    default:
+      throw new Error('unknown renderer');
+  }
+};
+
+const render3 = async (uid, diffResult) => {
+  const {
+    oldState,
+    newState
+  } = get$1(uid);
+  set$3(uid, newState, newState);
+  const commands = [];
+  for (const item of diffResult) {
+    const fn = getRenderer3(item);
+    const result = fn(oldState, newState);
+    if (result.length > 0) {
+      commands.push(result);
+    }
+  }
+  return commands;
+};
+
 const renderEventListeners = () => {
   return [{
     name: HandleClickMinimize,
@@ -3215,22 +3501,22 @@ const renderEventListeners = () => {
     params: ['handleFocus']
   }, {
     name: HandleMenuClick,
-    params: ['handleMenuClick', 'event.clientX', 'event.clientY']
+    params: ['handleMenuClick', ClientX, ClientY]
   }, {
     name: HandleMenuMouseOver,
-    params: ['handleMenuMouseOver', 'event.clientX', 'event.clientY']
+    params: ['handleMenuMouseOver', ClientX, ClientY]
   }, {
     name: HandleClick,
-    params: ['handleClickAt', 'event.button', 'event.clientX', 'event.clientY']
+    params: ['handleClickAt', Button, ClientX, ClientY]
   }, {
     name: HandlePointerOut,
-    params: ['handlePointerOut', 'event.clientX', 'event.clientY']
+    params: ['handlePointerOut', ClientX, ClientY]
   }, {
     name: HandlePointerOver,
-    params: ['handlePointerOver', 'event.clientX', 'event.clientY']
+    params: ['handlePointerOver', ClientX, ClientY]
   }, {
     name: HandleFocusOut,
-    params: ['handleFocusOut', 'event.clientX', 'event.clientY'] // TODO maybe check relatedTarget
+    params: ['handleFocusOut', ClientX, ClientY] // TODO maybe check relatedTarget
   }];
 };
 
@@ -3240,12 +3526,9 @@ const saveState = uid => {
   };
 };
 
-const terminate = () => {
-  globalThis.close();
-};
-
 const create = (id, uri, x, y, width, height) => {
   const state = {
+    ...createDefaultState(),
     uid: id,
     titleBarEntries: [],
     focusedIndex: -1,
@@ -3260,7 +3543,8 @@ const create = (id, uri, x, y, width, height) => {
     x,
     y,
     width,
-    height
+    height,
+    iconWidth: 30
   };
   set$3(id, state, state);
   return state;
@@ -3377,10 +3661,7 @@ const handleFocusOut = async state => {
   return state;
 };
 
-/**
- * @param {boolean} focus
- */
-const openMenu = (state, focus) => {
+const openMenu = async (state, focus) => {
   const {
     focusedIndex
   } = state;
@@ -3433,7 +3714,7 @@ const closeOneMenu = state => {
   };
 };
 
-const handleKeyArrowLeftMenuOpen = state => {
+const handleKeyArrowLeftMenuOpen = async state => {
   const {
     menus
   } = state;
@@ -3650,7 +3931,7 @@ const handleMenuClick = async (state, level, index) => {
     return state;
   }
   switch (item.flags) {
-    case None$1:
+    case None:
       return selectIndexNone(state, item);
     case SubMenu:
       return selectIndexSubMenu(state, menu, index);
@@ -3738,7 +4019,7 @@ const handleMenuMouseOver = async (state, level, index) => {
   };
 };
 
-const toggleMenu = state => {
+const toggleMenu = async state => {
   const {
     isMenuOpen
   } = state;
@@ -3748,29 +4029,21 @@ const toggleMenu = state => {
   return openMenu(state, /* focus */false);
 };
 
-const wrapCommand = fn => {
-  const wrapped = async (uid, ...args) => {
-    const {
-      newState
-    } = get$1(uid);
-    const newerState = await fn(newState, ...args);
-    if (newState === newerState) {
-      return;
-    }
-    const latest = get$1(uid);
-    set$3(uid, latest.oldState, newerState);
-  };
-  return wrapped;
-};
-
 const commandMap = {
+  'TitleBar.create3': create3,
+  'TitleBar.diff3': diff3,
   'TitleBar.getButtonsVirtualDom': getTitleBarButtonsVirtualDom,
   'TitleBar.getIconVirtualDom': getTitleBarIconVirtualDom,
   'TitleBar.getMenuEntries': getMenuEntries$1,
   'TitleBar.getMenuIds': getMenuIds,
   'TitleBar.getTitleVirtualDom': getTitleVirtualDom,
+  'TitleBar.loadContent2': wrapCommand(loadContent2),
   'TitleBar.handleButtonsClick': handleClick$1,
+  'TitleBar.handleClickClose': wrapCommand(handleClickClose),
+  'TitleBar.handleClickMinimize': wrapCommand(handleClickMinimize),
+  'TitleBar.handleClickToggleMaximize': wrapCommand(handleClickToggleMaximize),
   'TitleBar.handleContextMenu': handleContextMenu,
+  'TitleBar.render3': render3,
   'TitleBar.renderEventListeners': renderEventListeners,
   'TitleBarMenuBar.closeMenu': closeMenu,
   'TitleBarMenuBar.create': create,
@@ -3782,6 +4055,7 @@ const commandMap = {
   'TitleBarMenuBar.focusNext': wrapCommand(focusNext),
   'TitleBarMenuBar.focusPrevious': wrapCommand(focusPrevious),
   'TitleBarMenuBar.getCommands': getCommandIds,
+  'TitleBarMenuBar.getCommandIds': getCommandIds,
   'TitleBarMenuBar.getKeyBindings': getKeyBindings$1,
   'TitleBarMenuBar.getMenus': getMenus,
   'TitleBarMenuBar.getTitleBarButtons': getTitleBarButtons,
@@ -3812,8 +4086,17 @@ const commandMap = {
   'TitleBarMenuBar.toggleIndex': wrapCommand(toggleIndex),
   'TitleBarMenuBar.toggleMenu': wrapCommand(toggleMenu)
 };
+for (const [key, value] of Object.entries(commandMap)) {
+  const [prefix, name] = key.split('.');
+  if (prefix === 'TitleBarMenuBar') {
+    const alternate = `TitleBar.${name}`;
+    // @ts-ignore
+    commandMap[alternate] = value;
+  }
+}
 
 const listen = async () => {
+  registerCommands(commandMap);
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });