@lvce-editor/static-server 0.62.0 → 0.62.2

package/static/{2a5a40f → 41b94d2}/packages/title-bar-worker/dist/titleBarWorkerMain.js

@@ -995,47 +995,224 @@ 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 {
-  get: get$1,
-  set: set$3,
-  getCommandIds,
-  registerCommands,
-  wrapCommand
-} = create$2();
-
 const diff2 = uid => {
   const {
     oldState,
@@ -1044,6 +1221,29 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
+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 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';
@@ -1062,17 +1262,288 @@ const Button = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
 
-const Escape$2 = 8;
-const Space$2 = 9;
-const End$2 = 255;
-const Home$2 = 12;
-const LeftArrow$2 = 13;
-const UpArrow$2 = 14;
-const RightArrow$2 = 15;
-const DownArrow$2 = 16;
-
-const CtrlCmd = 1 << 11 >>> 0;
-const Shift = 1 << 10 >>> 0;
+const Backspace$1 = 1;
+const Tab$1 = 2;
+const Enter$1 = 3;
+const Escape$1 = 8;
+const Space$1 = 9;
+const PageUp$1 = 10;
+const PageDown$1 = 11;
+const End$1 = 255;
+const Home$1 = 12;
+const LeftArrow$1 = 13;
+const UpArrow$1 = 14;
+const RightArrow$1 = 15;
+const DownArrow$1 = 16;
+const Insert$1 = 17;
+const Delete$1 = 18;
+const Digit0$1 = 19;
+const Digit1$1 = 20;
+const Digit2$1 = 21;
+const Digit3$1 = 22;
+const Digit4$1 = 23;
+const Digit5$1 = 24;
+const Digit6$1 = 25;
+const Digit7$1 = 26;
+const Digit8$1 = 27;
+const Digit9$1 = 28;
+const KeyA$1 = 29;
+const KeyB$1 = 30;
+const KeyC$1 = 31;
+const KeyD$1 = 32;
+const KeyE$1 = 33;
+const KeyF$1 = 34;
+const KeyG$1 = 35;
+const KeyH$1 = 36;
+const KeyI$1 = 37;
+const KeyJ$1 = 38;
+const KeyK$1 = 39;
+const KeyL$1 = 40;
+const KeyM$1 = 41;
+const KeyN$1 = 42;
+const KeyO$1 = 43;
+const KeyP$1 = 44;
+const KeyQ$1 = 45;
+const KeyR$1 = 46;
+const KeyS$1 = 47;
+const KeyT$1 = 48;
+const KeyU$1 = 49;
+const KeyV$1 = 50;
+const KeyW$1 = 51;
+const KeyX$1 = 52;
+const KeyY$1 = 53;
+const KeyZ$1 = 54;
+const F1$1 = 57;
+const F2$1 = 58;
+const F3$1 = 59;
+const F4$1 = 60;
+const F5$1 = 61;
+const F6$1 = 62;
+const Equal$1 = 84;
+const Comma$1 = 85;
+const Minus$1 = 86;
+const Backquote$1 = 89;
+const Backslash$1 = 91;
+const Star$1 = 131;
+const Plus$1 = 132;
+
+const Unknown = 'Unknown';
+const Backspace = 'Backspace';
+const Tab = 'Tab';
+const Enter = 'Enter';
+const Escape = 'Escape';
+const Space = 'Space';
+const PageUp = 'PageUp';
+const PageDown = 'PageDown';
+const End = 'End';
+const Home = 'Home';
+const LeftArrow = 'LeftArrow';
+const UpArrow = 'UpArrow';
+const RightArrow = 'RightArrow';
+const DownArrow = 'DownArrow';
+const Insert = 'Insert';
+const Delete = 'Delete';
+const Digit0 = '0';
+const Digit1 = '1';
+const Digit2 = '2';
+const Digit3 = '3';
+const Digit4 = '4';
+const Digit5 = '5';
+const Digit6 = '6';
+const Digit7 = '7';
+const Digit8 = '8';
+const Digit9 = '9';
+const KeyA = 'a';
+const KeyB = 'b';
+const KeyC = 'c';
+const KeyD = 'd';
+const KeyE = 'e';
+const KeyF = 'f';
+const KeyG = 'g';
+const KeyH = 'h';
+const KeyI = 'i';
+const KeyJ = 'j';
+const KeyK = 'k';
+const KeyL = 'l';
+const KeyM = 'm';
+const KeyN = 'n';
+const KeyO = 'o';
+const KeyP = 'p';
+const KeyQ = 'q';
+const KeyR = 'r';
+const KeyS = 's';
+const KeyT = 't';
+const KeyU = 'u';
+const KeyV = 'v';
+const KeyW = 'w';
+const KeyX = 'x';
+const KeyY = 'y';
+const KeyZ = 'z';
+const F1 = 'F1';
+const F2 = 'F2';
+const F3 = 'F3';
+const F4 = 'F4';
+const F5 = 'F5';
+const F6 = 'F6';
+const Equal = '=';
+const Comma = ',';
+const Minus = 'Minus';
+const Backquote = 'Backquote';
+const Backslash = 'Backslash';
+const Star = '*';
+const Plus = '+';
+
+const getKeyCodeString = keyCode => {
+  switch (keyCode) {
+    case Backspace$1:
+      return Backspace;
+    case Tab$1:
+      return Tab;
+    case Escape$1:
+      return Escape;
+    case Enter$1:
+      return Enter;
+    case Space$1:
+      return Space;
+    case PageUp$1:
+      return PageUp;
+    case PageDown$1:
+      return PageDown;
+    case End$1:
+      return End;
+    case Home$1:
+      return Home;
+    case LeftArrow$1:
+      return LeftArrow;
+    case UpArrow$1:
+      return UpArrow;
+    case RightArrow$1:
+      return RightArrow;
+    case DownArrow$1:
+      return DownArrow;
+    case Insert$1:
+      return Insert;
+    case Delete$1:
+      return Delete;
+    case Digit0$1:
+      return Digit0;
+    case Digit1$1:
+      return Digit1;
+    case Digit2$1:
+      return Digit2;
+    case Digit3$1:
+      return Digit3;
+    case Digit4$1:
+      return Digit4;
+    case Digit5$1:
+      return Digit5;
+    case Digit6$1:
+      return Digit6;
+    case Digit7$1:
+      return Digit7;
+    case Digit8$1:
+      return Digit8;
+    case Digit9$1:
+      return Digit9;
+    case KeyA$1:
+      return KeyA;
+    case KeyB$1:
+      return KeyB;
+    case KeyC$1:
+      return KeyC;
+    case KeyD$1:
+      return KeyD;
+    case KeyE$1:
+      return KeyE;
+    case KeyF$1:
+      return KeyF;
+    case KeyG$1:
+      return KeyG;
+    case KeyH$1:
+      return KeyH;
+    case KeyI$1:
+      return KeyI;
+    case KeyJ$1:
+      return KeyJ;
+    case KeyK$1:
+      return KeyK;
+    case KeyL$1:
+      return KeyL;
+    case KeyM$1:
+      return KeyM;
+    case KeyN$1:
+      return KeyN;
+    case KeyO$1:
+      return KeyO;
+    case KeyP$1:
+      return KeyP;
+    case KeyQ$1:
+      return KeyQ;
+    case KeyR$1:
+      return KeyR;
+    case KeyS$1:
+      return KeyS;
+    case KeyT$1:
+      return KeyT;
+    case KeyU$1:
+      return KeyU;
+    case KeyV$1:
+      return KeyV;
+    case KeyW$1:
+      return KeyW;
+    case KeyX$1:
+      return KeyX;
+    case KeyY$1:
+      return KeyY;
+    case KeyZ$1:
+      return KeyZ;
+    case F1$1:
+      return F1;
+    case F2$1:
+      return F2;
+    case F3$1:
+      return F3;
+    case F4$1:
+      return F4;
+    case F5$1:
+      return F5;
+    case F6$1:
+      return F6;
+    case Backslash$1:
+      return Backslash;
+    case Equal$1:
+      return Equal;
+    case Comma$1:
+      return Comma;
+    case Backquote$1:
+      return Backquote;
+    case Plus$1:
+      return Plus;
+    case Star$1:
+      return Star;
+    case Minus$1:
+      return Minus;
+    default:
+      return Unknown;
+  }
+};
+
+const CtrlCmd = 1 << 11 >>> 0;
+const Shift = 1 << 10 >>> 0;
+
+const TitleBar$1 = 15;
+
+const parseKey = rawKey => {
+  const isCtrl = Boolean(rawKey & CtrlCmd);
+  const isShift = Boolean(rawKey & Shift);
+  const keyCode = rawKey & 0x00_00_00_ff;
+  const key = getKeyCodeString(keyCode);
+  return {
+    key,
+    isCtrl,
+    isShift
+  };
+};
 
 const DebugWorker = 55;
 const RendererWorker$1 = 1;
@@ -1097,52 +1568,40 @@ const FocusTitleBarMenuBar = 26;
 
 const getKeyBindings$1 = () => {
   return [{
-    key: DownArrow$2,
-    command: 'TitleBarMenuBar.handleKeyArrowDown',
+    key: DownArrow$1,
+    command: 'TitleBar.handleKeyArrowDown',
     when: FocusTitleBarMenuBar
   }, {
-    key: UpArrow$2,
-    command: 'TitleBarMenuBar.handleKeyArrowUp',
+    key: UpArrow$1,
+    command: 'TitleBar.handleKeyArrowUp',
     when: FocusTitleBarMenuBar
   }, {
-    key: RightArrow$2,
-    command: 'TitleBarMenuBar.handleKeyArrowRight',
+    key: RightArrow$1,
+    command: 'TitleBar.handleKeyArrowRight',
     when: FocusTitleBarMenuBar
   }, {
-    key: LeftArrow$2,
-    command: 'TitleBarMenuBar.handleKeyArrowLeft',
+    key: LeftArrow$1,
+    command: 'TitleBar.handleKeyArrowLeft',
     when: FocusTitleBarMenuBar
   }, {
-    key: Space$2,
-    command: 'TitleBarMenuBar.handleKeySpace',
+    key: Space$1,
+    command: 'TitleBar.handleKeySpace',
     when: FocusTitleBarMenuBar
   }, {
-    key: Home$2,
-    command: 'TitleBarMenuBar.handleKeyHome',
+    key: Home$1,
+    command: 'TitleBar.handleKeyHome',
     when: FocusTitleBarMenuBar
   }, {
-    key: End$2,
-    command: 'TitleBarMenuBar.handleKeyEnd',
+    key: End$1,
+    command: 'TitleBar.handleKeyEnd',
     when: FocusTitleBarMenuBar
   }, {
-    key: Escape$2,
-    command: 'TitleBarMenuBar.handleKeyEscape',
+    key: Escape$1,
+    command: 'TitleBar.handleKeyEscape',
     when: FocusTitleBarMenuBar
   }];
 };
 
-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}
  */
@@ -1196,16 +1655,16 @@ const 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;
 const None = 0;
@@ -1223,7 +1682,7 @@ const menuEntrySeparator = {
   command: ''
 };
 
-const id$9 = Edit$1;
+const id$9 = Edit;
 const getMenuEntries$d = () => {
   return [{
     id: 'undo',
@@ -1307,11 +1766,7 @@ const 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',
@@ -1366,7 +1821,7 @@ const MenuEntriesFile = {
   id: id$8
 };
 
-const id$7 = Go$1;
+const id$7 = Go;
 const getMenuEntries$b = () => {
   return [];
 };
@@ -1377,25 +1832,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 NewTerminal = 'New Terminal';
-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);
 };
@@ -1416,7 +1852,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 = [];
@@ -1917,7 +2353,7 @@ const MenuEntriesOpenRecent = {
   id: id$5
 };
 
-const id$4 = Run$1;
+const id$4 = Run;
 const getMenuEntries$8 = () => {
   return [];
 };
@@ -1928,7 +2364,7 @@ const MenuEntriesRun = {
   id: id$4
 };
 
-const id$3 = Selection$1;
+const id$3 = Selection;
 const getMenuEntries$7 = () => {
   return [{
     id: 'selectAll',
@@ -1964,7 +2400,7 @@ const MenuEntriesSelection = {
   id: id$3
 };
 
-const id$2 = Terminal$1;
+const id$2 = Terminal;
 const getMenuEntries$6 = () => {
   return [{
     id: 'newTerminal',
@@ -1981,73 +2417,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
@@ -2056,27 +2458,27 @@ const getMenuEntries$5 = () => {
 
 const getMenuEntries$4 = () => {
   return [{
-    id: File$2,
+    id: File$1,
     label: file(),
     flags: None
   }, {
-    id: Edit$1,
+    id: Edit,
     label: edit(),
     flags: None
   }, {
-    id: Selection$1,
+    id: Selection,
     label: selection(),
     flags: None
   }, {
-    id: View$1,
+    id: View,
     label: view(),
     flags: None
   }, {
-    id: Go$1,
+    id: Go,
     label: go(),
     flags: None
   }, {
-    id: Help$1,
+    id: Help,
     label: help(),
     flags: None
   }];
@@ -2102,7 +2504,7 @@ const MenuEntriesTitleBar = {
   id: id$1
 };
 
-const id = View$1;
+const id = View;
 const getMenuEntries$2 = () => {
   return [];
 };
@@ -2118,7 +2520,7 @@ const menus$1 = [MenuEntriesEdit, MenuEntriesFile, MenuEntriesGo, MenuEntriesHel
 const getMenuIds = () => {
   return menus$1.map(menu => menu.id);
 };
-const getMenuEntries$1 = (id, platform) => {
+const getMenuEntries$1 = async (id, platform) => {
   const menu = menus$1.find(item => item.id === id);
   if (!menu) {
     return [];
@@ -2126,53 +2528,6 @@ const getMenuEntries$1 = (id, platform) => {
   return menu.getMenuEntries(platform);
 };
 
-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 MaskIconCheck = 'MaskIconCheck';
 const Menu = 'Menu';
 const MenuItem = 'MenuItem';
@@ -2227,13 +2582,13 @@ const getTitleBarButtonsVirtualDom = buttons => {
   }, ...buttons.flatMap(createTitleBarButton)];
 };
 
-const parentNode = {
+const parentNode$1 = {
   type: Div,
   className: mergeClassNames(Viewlet, TitleBarIcon),
   childCount: 1
 };
 const getTitleBarIconVirtualDom = iconSrc => {
-  return [parentNode, {
+  return [parentNode$1, {
     type: Img,
     className: TitleBarIconIcon,
     src: iconSrc,
@@ -2311,8 +2666,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 () => {
@@ -2359,6 +2719,10 @@ const handleContextMenu = state => {
   return state;
 };
 
+const getMenuOffset = (x, clientX, iconWidth) => {
+  return clientX - x - iconWidth;
+};
+
 const getTitleBarIndexFromPosition = (titleBarEntries, x, y) => {
   let currentX = 0;
   for (let i = 0; i < titleBarEntries.length; i++) {
@@ -2490,7 +2854,8 @@ const openMenuAtIndex = async (state, index, shouldBeFocused) => {
   const {
     titleBarEntries,
     titleBarHeight,
-    x
+    x,
+    iconWidth
   } = state;
   // TODO race conditions
   // TODO send renderer process
@@ -2506,7 +2871,7 @@ const openMenuAtIndex = async (state, index, shouldBeFocused) => {
   const offset = totalWidths;
   // TODO race condition: another menu might already be open at this point
 
-  const menuX = x + offset;
+  const menuX = x + offset + iconWidth;
   const menuY = titleBarHeight;
   const width = getMenuWidth();
   const height = getMenuHeight(items);
@@ -2573,7 +2938,13 @@ 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 menuX = getMenuOffset(x, clientX, iconWidth);
+  const index = getTitleBarIndexFromPosition(titleBarEntries, menuX);
   if (index === -1) {
     return state;
   }
@@ -2594,440 +2965,202 @@ 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 menuOffset = getMenuOffset(x, clientX, iconWidth);
+  const index = getTitleBarIndexFromPosition(titleBarEntries, menuOffset);
   if (index === -1) {
     return state;
   }
   return handleMouseOver(state, index);
-};
-
-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 getFontString = (fontWeight, fontSize, fontFamily) => {
-  return `${fontWeight} ${fontSize}px ${fontFamily}`;
-};
-
-const measureTextWidths = (texts, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  if (typeof letterSpacing !== 'number') {
-    throw new TypeError('letterSpacing must be of type number');
-  }
-  const letterSpacingString = px(letterSpacing);
-  const fontString = getFontString(fontWeight, fontSize, fontFamily);
-  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 addWidths = (entries, labelPadding, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  const labels = entries.map(entry => entry.label);
-  const widths = measureTextWidths(labels, fontWeight, fontSize, fontFamily, letterSpacing);
-  const withWidths = [];
-  for (let i = 0; i < entries.length; i++) {
-    const entry = entries[i];
-    const textWidth = widths[i];
-    const width = textWidth + labelPadding * 2;
-    withWidths.push({
-      ...entry,
-      width
-    });
-  }
-  return withWidths;
-};
-
-const loadContent = async (state, titleBarEntries) => {
-  const {
-    labelFontFamily,
-    labelFontSize,
-    labelFontWeight,
-    labelLetterSpacing,
-    labelPadding
-  } = state;
-  const withWidths = addWidths(titleBarEntries, labelPadding, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
-  return {
-    ...state,
-    titleBarEntries: withWidths
-  };
-};
-
-const Ellipsis = 'Ellipsis';
-
-const getVisibleTitleBarEntries = (entries, width, focusedIndex, isMenuOpen) => {
-  array(entries);
-  number(width);
-  let total = 0;
-  const visible = [];
-  for (let i = 0; i < entries.length; i++) {
-    const entry = entries[i];
-    total += entry.width;
-    if (total >= width) {
-      break;
-    }
-    const isOpen = i === focusedIndex && isMenuOpen;
-    const isFocused = i === focusedIndex;
-    visible.push({
-      ...entry,
-      isOpen,
-      isFocused
-    });
-  }
-  const hasOverflow = visible.length < entries.length;
-  if (hasOverflow) {
-    const padding = 8;
-    const moreIconWidth = 22;
-    const totalPadding = padding * 2;
-    const hasStillOverflow = total + moreIconWidth + totalPadding > width;
-    if (hasStillOverflow) {
-      visible.pop();
-    }
-    visible.push({
-      ariaLabel: moreDot(),
-      icon: Ellipsis,
-      label: '',
-      width: moreIconWidth + totalPadding
-    });
-  }
-  return visible;
-};
-
-const renderEntries = (oldState, newState) => {
-  const visibleEntries = getVisibleTitleBarEntries(newState.titleBarEntries, newState.width, newState.focusedIndex, newState.isMenuOpen);
-  const dom = getTitleBarMenuBarVirtualDom(visibleEntries, newState.focusedIndex);
-  return ['Viewlet.setDom2', newState.uid, dom];
-};
-
-const renderFocusedIndex = (oldState, newState) => {
-  if (newState.focusedIndex === -1) {
-    return [];
-  }
-  return ['Viewlet.focusSelector', '.ViewletTitleBarMenuBar'];
-};
-
-const checkboxChecked = {
-  type: Div,
-  className: mergeClassNames(MenuItem, MenuItemCheckMark),
-  role: MenuItemCheckBox,
-  ariaChecked: true,
-  tabIndex: -1,
-  childCount: 2
-};
-const checkMark = {
-  type: Div,
-  className: mergeClassNames(MenuItemCheckmarkIcon, MaskIconCheck)
-};
-const getMenuItemCheckedDom = menuItem => {
-  const {
-    label
-  } = menuItem;
-  return [checkboxChecked, checkMark, text(label)];
-};
-
-const getKeyBindingString = (key, altKey, ctrlKey, shiftKey, metaKey) => {
-  let string = '';
-  if (ctrlKey) {
-    string += 'Ctrl+';
-  }
-  if (shiftKey) {
-    string += 'Shift+';
-  }
-  string += key.toUpperCase();
-  return string;
-};
-
-const Backspace$1 = 1;
-const Tab$1 = 2;
-const Enter$1 = 3;
-const Escape$1 = 8;
-const Space$1 = 9;
-const PageUp$1 = 10;
-const PageDown$1 = 11;
-const End$1 = 255;
-const Home$1 = 12;
-const LeftArrow$1 = 13;
-const UpArrow$1 = 14;
-const RightArrow$1 = 15;
-const DownArrow$1 = 16;
-const Insert$1 = 17;
-const Delete$1 = 18;
-const Digit0$1 = 19;
-const Digit1$1 = 20;
-const Digit2$1 = 21;
-const Digit3$1 = 22;
-const Digit4$1 = 23;
-const Digit5$1 = 24;
-const Digit6$1 = 25;
-const Digit7$1 = 26;
-const Digit8$1 = 27;
-const Digit9$1 = 28;
-const KeyA$1 = 29;
-const KeyB$1 = 30;
-const KeyC$1 = 31;
-const KeyD$1 = 32;
-const KeyE$1 = 33;
-const KeyF$1 = 34;
-const KeyG$1 = 35;
-const KeyH$1 = 36;
-const KeyI$1 = 37;
-const KeyJ$1 = 38;
-const KeyK$1 = 39;
-const KeyL$1 = 40;
-const KeyM$1 = 41;
-const KeyN$1 = 42;
-const KeyO$1 = 43;
-const KeyP$1 = 44;
-const KeyQ$1 = 45;
-const KeyR$1 = 46;
-const KeyS$1 = 47;
-const KeyT$1 = 48;
-const KeyU$1 = 49;
-const KeyV$1 = 50;
-const KeyW$1 = 51;
-const KeyX$1 = 52;
-const KeyY$1 = 53;
-const KeyZ$1 = 54;
-const F1$1 = 57;
-const F2$1 = 58;
-const F3$1 = 59;
-const F4$1 = 60;
-const F5$1 = 61;
-const F6$1 = 62;
-const Equal$1 = 84;
-const Comma$1 = 85;
-const Minus$1 = 86;
-const Backquote$1 = 89;
-const Backslash$1 = 91;
-const Star$1 = 131;
-const Plus$1 = 132;
-
-const Unknown = 'Unknown';
-const Backspace = 'Backspace';
-const Tab = 'Tab';
-const Enter = 'Enter';
-const Escape = 'Escape';
-const Space = 'Space';
-const PageUp = 'PageUp';
-const PageDown = 'PageDown';
-const End = 'End';
-const Home = 'Home';
-const LeftArrow = 'LeftArrow';
-const UpArrow = 'UpArrow';
-const RightArrow = 'RightArrow';
-const DownArrow = 'DownArrow';
-const Insert = 'Insert';
-const Delete = 'Delete';
-const Digit0 = '0';
-const Digit1 = '1';
-const Digit2 = '2';
-const Digit3 = '3';
-const Digit4 = '4';
-const Digit5 = '5';
-const Digit6 = '6';
-const Digit7 = '7';
-const Digit8 = '8';
-const Digit9 = '9';
-const KeyA = 'a';
-const KeyB = 'b';
-const KeyC = 'c';
-const KeyD = 'd';
-const KeyE = 'e';
-const KeyF = 'f';
-const KeyG = 'g';
-const KeyH = 'h';
-const KeyI = 'i';
-const KeyJ = 'j';
-const KeyK = 'k';
-const KeyL = 'l';
-const KeyM = 'm';
-const KeyN = 'n';
-const KeyO = 'o';
-const KeyP = 'p';
-const KeyQ = 'q';
-const KeyR = 'r';
-const KeyS = 's';
-const KeyT = 't';
-const KeyU = 'u';
-const KeyV = 'v';
-const KeyW = 'w';
-const KeyX = 'x';
-const KeyY = 'y';
-const KeyZ = 'z';
-const F1 = 'F1';
-const F2 = 'F2';
-const F3 = 'F3';
-const F4 = 'F4';
-const F5 = 'F5';
-const F6 = 'F6';
-const Equal = '=';
-const Comma = ',';
-const Minus = 'Minus';
-const Backquote = 'Backquote';
-const Backslash = 'Backslash';
-const Star = '*';
-const Plus = '+';
-
-const getKeyCodeString = keyCode => {
-  switch (keyCode) {
-    case Backspace$1:
-      return Backspace;
-    case Tab$1:
-      return Tab;
-    case Escape$1:
-      return Escape;
-    case Enter$1:
-      return Enter;
-    case Space$1:
-      return Space;
-    case PageUp$1:
-      return PageUp;
-    case PageDown$1:
-      return PageDown;
-    case End$1:
-      return End;
-    case Home$1:
-      return Home;
-    case LeftArrow$1:
-      return LeftArrow;
-    case UpArrow$1:
-      return UpArrow;
-    case RightArrow$1:
-      return RightArrow;
-    case DownArrow$1:
-      return DownArrow;
-    case Insert$1:
-      return Insert;
-    case Delete$1:
-      return Delete;
-    case Digit0$1:
-      return Digit0;
-    case Digit1$1:
-      return Digit1;
-    case Digit2$1:
-      return Digit2;
-    case Digit3$1:
-      return Digit3;
-    case Digit4$1:
-      return Digit4;
-    case Digit5$1:
-      return Digit5;
-    case Digit6$1:
-      return Digit6;
-    case Digit7$1:
-      return Digit7;
-    case Digit8$1:
-      return Digit8;
-    case Digit9$1:
-      return Digit9;
-    case KeyA$1:
-      return KeyA;
-    case KeyB$1:
-      return KeyB;
-    case KeyC$1:
-      return KeyC;
-    case KeyD$1:
-      return KeyD;
-    case KeyE$1:
-      return KeyE;
-    case KeyF$1:
-      return KeyF;
-    case KeyG$1:
-      return KeyG;
-    case KeyH$1:
-      return KeyH;
-    case KeyI$1:
-      return KeyI;
-    case KeyJ$1:
-      return KeyJ;
-    case KeyK$1:
-      return KeyK;
-    case KeyL$1:
-      return KeyL;
-    case KeyM$1:
-      return KeyM;
-    case KeyN$1:
-      return KeyN;
-    case KeyO$1:
-      return KeyO;
-    case KeyP$1:
-      return KeyP;
-    case KeyQ$1:
-      return KeyQ;
-    case KeyR$1:
-      return KeyR;
-    case KeyS$1:
-      return KeyS;
-    case KeyT$1:
-      return KeyT;
-    case KeyU$1:
-      return KeyU;
-    case KeyV$1:
-      return KeyV;
-    case KeyW$1:
-      return KeyW;
-    case KeyX$1:
-      return KeyX;
-    case KeyY$1:
-      return KeyY;
-    case KeyZ$1:
-      return KeyZ;
-    case F1$1:
-      return F1;
-    case F2$1:
-      return F2;
-    case F3$1:
-      return F3;
-    case F4$1:
-      return F4;
-    case F5$1:
-      return F5;
-    case F6$1:
-      return F6;
-    case Backslash$1:
-      return Backslash;
-    case Equal$1:
-      return Equal;
-    case Comma$1:
-      return Comma;
-    case Backquote$1:
-      return Backquote;
-    case Plus$1:
-      return Plus;
-    case Star$1:
-      return Star;
-    case Minus$1:
-      return Minus;
-    default:
-      return Unknown;
+};
+
+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 parseKey = rawKey => {
-  number(rawKey);
-  const isCtrl = Boolean(rawKey & CtrlCmd);
-  const isShift = Boolean(rawKey & Shift);
-  const keyCode = rawKey & 0x00_00_00_ff;
-  const key = getKeyCodeString(keyCode);
+const getFontString = (fontWeight, fontSize, fontFamily) => {
+  return `${fontWeight} ${fontSize}px ${fontFamily}`;
+};
+
+const measureTextWidths = (texts, fontWeight, fontSize, fontFamily, letterSpacing) => {
+  if (typeof letterSpacing !== 'number') {
+    throw new TypeError('letterSpacing must be of type number');
+  }
+  const letterSpacingString = px(letterSpacing);
+  const fontString = getFontString(fontWeight, fontSize, fontFamily);
+  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 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 (let i = 0; i < entries.length; i++) {
+    const entry = entries[i];
+    const textWidth = widths[i];
+    const width = textWidth + labelPadding * 2;
+    withWidths.push({
+      ...entry,
+      width
+    });
+  }
+  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 {
-    key,
-    isCtrl,
-    isShift
+    ...state,
+    titleBarEntries: withWidths,
+    buttons,
+    title,
+    iconWidth
+  };
+};
+
+const loadContent = async (state, titleBarEntries) => {
+  const {
+    platform,
+    controlsOverlayEnabled,
+    titleBarStyleCustom,
+    labelFontFamily,
+    labelFontSize,
+    labelFontWeight,
+    labelLetterSpacing,
+    labelPadding
+  } = state;
+  const withWidths = addWidths(titleBarEntries, labelPadding, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
+  const buttons = getTitleBarButtons(platform, controlsOverlayEnabled, titleBarStyleCustom);
+  const title = 'test';
+  return {
+    ...state,
+    titleBarEntries: withWidths,
+    buttons,
+    title
   };
 };
 
+const Ellipsis = 'Ellipsis';
+
+const getVisibleTitleBarEntries = (entries, width, focusedIndex, isMenuOpen) => {
+  array(entries);
+  number(width);
+  let total = 0;
+  const visible = [];
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i];
+    total += entry.width;
+    if (total >= width) {
+      break;
+    }
+    const isOpen = i === focusedIndex && isMenuOpen;
+    const isFocused = i === focusedIndex;
+    visible.push({
+      ...entry,
+      isOpen,
+      isFocused
+    });
+  }
+  const hasOverflow = visible.length < entries.length;
+  if (hasOverflow) {
+    const padding = 8;
+    const moreIconWidth = 22;
+    const totalPadding = padding * 2;
+    const hasStillOverflow = total + moreIconWidth + totalPadding > width;
+    if (hasStillOverflow) {
+      visible.pop();
+    }
+    visible.push({
+      ariaLabel: moreDot(),
+      icon: Ellipsis,
+      label: '',
+      width: moreIconWidth + totalPadding
+    });
+  }
+  return visible;
+};
+
+const renderEntries = (oldState, newState) => {
+  const visibleEntries = getVisibleTitleBarEntries(newState.titleBarEntries, newState.width, newState.focusedIndex, newState.isMenuOpen);
+  const dom = getTitleBarMenuBarVirtualDom(visibleEntries, newState.focusedIndex);
+  return ['Viewlet.setDom2', newState.uid, dom];
+};
+
+const renderFocusedIndex = (oldState, newState) => {
+  if (newState.focusedIndex === -1) {
+    return [];
+  }
+  return ['Viewlet.focusSelector', '.ViewletTitleBarMenuBar'];
+};
+
+const checkboxChecked = {
+  type: Div,
+  className: mergeClassNames(MenuItem, MenuItemCheckMark),
+  role: MenuItemCheckBox,
+  ariaChecked: true,
+  tabIndex: -1,
+  childCount: 2
+};
+const checkMark = {
+  type: Div,
+  className: mergeClassNames(MenuItemCheckmarkIcon, MaskIconCheck)
+};
+const getMenuItemCheckedDom = menuItem => {
+  const {
+    label
+  } = menuItem;
+  return [checkboxChecked, checkMark, text(label)];
+};
+
+const getKeyBindingString = (key, altKey, ctrlKey, shiftKey, metaKey) => {
+  let string = '';
+  if (ctrlKey) {
+    string += 'Ctrl+';
+  }
+  if (shiftKey) {
+    string += 'Shift+';
+  }
+  string += key.toUpperCase();
+  return string;
+};
+
 const getKeyDom = key => {
   const parsedKey = parseKey(key);
   const keyBindingsString = getKeyBindingString(parsedKey.key, false, parsedKey.isCtrl, parsedKey.isShift);
@@ -3263,6 +3396,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,
@@ -3297,40 +3517,35 @@ const renderEventListeners = () => {
   }];
 };
 
+const getTitleBarMenuBarWidth = (width, menuBarX, titleBarButtonsWidth) => {
+  const remainingWidth = width - menuBarX - titleBarButtonsWidth;
+  return remainingWidth;
+};
+const resize = async (state, dimensions) => {
+  const {
+    titleBarIconWidth,
+    titleBarButtonsWidth
+  } = state;
+  const menuBarX = dimensions.x + titleBarIconWidth;
+  const menuBarY = dimensions.y;
+  const menuBarWidth = getTitleBarMenuBarWidth(dimensions.width, menuBarX, titleBarButtonsWidth);
+  const menuBarHeight = dimensions.height;
+  return {
+    ...state,
+    ...dimensions,
+    x: menuBarX,
+    y: menuBarY,
+    width: menuBarWidth,
+    height: menuBarHeight
+  };
+};
+
 const saveState = uid => {
   return {
     x: 1
   };
 };
 
-const DEFAULT_UID = 1;
-const createDefaultState = (uid = DEFAULT_UID) => ({
-  assetDir: '',
-  focusedIndex: -1,
-  height: 30,
-  iconWidth: 30,
-  isMenuOpen: false,
-  itleBarIconEnabled: true,
-  labelFontFamily: 'system-ui, Ubuntu, Droid Sans, sans-serif',
-  labelFontSize: 13,
-  labelFontWeight: 400,
-  labelLetterSpacing: 0,
-  labelPadding: 8,
-  menus: [],
-  titleBarButtonsEnabled: true,
-  titleBarButtonsWidth: 90,
-  titleBarEntries: [],
-  titleBarHeight: 30,
-  titleBarIconWidth: 30,
-  titleBarMenuBarEnabled: true,
-  titleBarTitleEnabled: true,
-  uid,
-  width: 800,
-  x: 0,
-  y: 0,
-  title: ''
-});
-
 const create = (id, uri, x, y, width, height) => {
   const state = {
     ...createDefaultState(),
@@ -3442,8 +3657,14 @@ const handleClick = async (state, button, index) => {
   return toggleIndex(state, index);
 };
 
-const handleClickAt = async (state, button, x, y) => {
-  const index = getTitleBarIndexFromPosition(state.titleBarEntries, x - state.x);
+const handleClickAt = async (state, button, eventX, eventY) => {
+  const {
+    titleBarEntries,
+    x,
+    iconWidth
+  } = state;
+  const menuOffset = getMenuOffset(x, eventX, iconWidth);
+  const index = getTitleBarIndexFromPosition(titleBarEntries, menuOffset);
   if (index === -1) {
     return state;
   }
@@ -3835,54 +4056,75 @@ const toggleMenu = async state => {
 };
 
 const commandMap = {
+  'TitleBar.closeMenu': closeMenu,
+  'TitleBar.create': create,
+  'TitleBar.create3': create3,
+  'TitleBar.diff2': diff2,
+  'TitleBar.diff3': diff3,
+  'TitleBar.focus': wrapCommand(focus),
+  'TitleBar.focusMenuBar': wrapCommand(focus),
+  'TitleBar.focusFirst': wrapCommand(focusFirst),
+  'TitleBar.focusIndex': wrapCommand(focusLast),
+  'TitleBar.focusLast': wrapCommand(focusIndex),
+  'TitleBar.focusNext': wrapCommand(focusNext),
+  'TitleBar.focusPrevious': wrapCommand(focusPrevious),
   'TitleBar.getButtonsVirtualDom': getTitleBarButtonsVirtualDom,
+  'TitleBar.getCommandIds': getCommandIds,
+  'TitleBar.getCommands': getCommandIds,
   'TitleBar.getIconVirtualDom': getTitleBarIconVirtualDom,
+  'TitleBar.getKeyBindings': getKeyBindings$1,
   'TitleBar.getMenuEntries': getMenuEntries$1,
   'TitleBar.getMenuIds': getMenuIds,
+  'TitleBar.getMenus': getMenus,
+  'TitleBar.getTitleBarButtons': getTitleBarButtons,
   'TitleBar.getTitleVirtualDom': getTitleVirtualDom,
+  'TitleBar.getVirtualDom': getTitleBarMenuBarVirtualDom,
   'TitleBar.handleButtonsClick': handleClick$1,
+  'TitleBar.handleClick': wrapCommand(handleClick),
+  'TitleBar.handleClickAt': wrapCommand(handleClickAt),
+  'TitleBar.handleClickClose': wrapCommand(handleClickClose),
+  'TitleBar.handleClickMinimize': wrapCommand(handleClickMinimize),
+  'TitleBar.handleClickToggleMaximize': wrapCommand(handleClickToggleMaximize),
   'TitleBar.handleContextMenu': handleContextMenu,
+  'TitleBar.handleFocus': wrapCommand(handleFocus),
+  'TitleBar.handleFocusOut': wrapCommand(handleFocusOut),
+  'TitleBar.handleKeyArrowDown': wrapCommand(handleKeyArrowDown),
+  'TitleBar.handleKeyArrowLeft': wrapCommand(handleKeyArrowLeft),
+  'TitleBar.handleKeyArrowRight': wrapCommand(handleKeyArrowRight),
+  'TitleBar.handleKeyArrowUp': wrapCommand(handleKeyArrowUp),
+  'TitleBar.handleKeyEnd': wrapCommand(handleKeyEnd),
+  'TitleBar.handleKeyEnter': wrapCommand(handleKeyEnter),
+  'TitleBar.handleKeyEscape': wrapCommand(handleKeyEscape),
+  'TitleBar.handleKeyHome': wrapCommand(handleKeyHome),
+  'TitleBar.handleKeySpace': wrapCommand(handleKeySpace),
+  'TitleBar.handleMenuClick': wrapCommand(handleMenuClick),
+  'TitleBar.handleMenuMouseOver': wrapCommand(handleMenuMouseOver),
+  'TitleBar.handleMouseOut': wrapCommand(handleMouseOut),
+  'TitleBar.handleMouseOver': wrapCommand(handleMouseOver),
+  'TitleBar.handlePointerOut': wrapCommand(handlePointerOut),
+  'TitleBar.handlePointerOver': wrapCommand(handlePointerOver),
+  'TitleBar.loadContent': wrapCommand(loadContent),
+  'TitleBar.loadContent2': wrapCommand(loadContent2),
+  'TitleBar.render2': render2,
+  'TitleBar.render3': render3,
   'TitleBar.renderEventListeners': renderEventListeners,
-  'TitleBarMenuBar.closeMenu': closeMenu,
-  'TitleBarMenuBar.create': create,
-  'TitleBarMenuBar.diff2': diff2,
-  'TitleBarMenuBar.focus': wrapCommand(focus),
-  'TitleBarMenuBar.focusFirst': wrapCommand(focusFirst),
-  'TitleBarMenuBar.focusIndex': wrapCommand(focusLast),
-  'TitleBarMenuBar.focusLast': wrapCommand(focusIndex),
-  'TitleBarMenuBar.focusNext': wrapCommand(focusNext),
-  'TitleBarMenuBar.focusPrevious': wrapCommand(focusPrevious),
-  'TitleBarMenuBar.getCommands': getCommandIds,
-  'TitleBarMenuBar.getKeyBindings': getKeyBindings$1,
-  'TitleBarMenuBar.getMenus': getMenus,
-  'TitleBarMenuBar.getTitleBarButtons': getTitleBarButtons,
-  'TitleBarMenuBar.getVirtualDom': getTitleBarMenuBarVirtualDom,
-  'TitleBarMenuBar.handleClick': wrapCommand(handleClick),
-  'TitleBarMenuBar.handleClickAt': wrapCommand(handleClickAt),
-  'TitleBarMenuBar.handleFocus': wrapCommand(handleFocus),
-  'TitleBarMenuBar.handleFocusOut': wrapCommand(handleFocusOut),
-  'TitleBarMenuBar.handleKeyArrowDown': wrapCommand(handleKeyArrowDown),
-  'TitleBarMenuBar.handleKeyArrowLeft': wrapCommand(handleKeyArrowLeft),
-  'TitleBarMenuBar.handleKeyArrowRight': wrapCommand(handleKeyArrowRight),
-  'TitleBarMenuBar.handleKeyArrowUp': wrapCommand(handleKeyArrowUp),
-  'TitleBarMenuBar.handleKeyEnd': wrapCommand(handleKeyEnd),
-  'TitleBarMenuBar.handleKeyEnter': wrapCommand(handleKeyEnter),
-  'TitleBarMenuBar.handleKeyEscape': wrapCommand(handleKeyEscape),
-  'TitleBarMenuBar.handleKeyHome': wrapCommand(handleKeyHome),
-  'TitleBarMenuBar.handleKeySpace': wrapCommand(handleKeySpace),
-  'TitleBarMenuBar.handleMenuClick': wrapCommand(handleMenuClick),
-  'TitleBarMenuBar.handleMenuMouseOver': wrapCommand(handleMenuMouseOver),
-  'TitleBarMenuBar.handleMouseOut': wrapCommand(handleMouseOut),
-  'TitleBarMenuBar.handleMouseOver': wrapCommand(handleMouseOver),
-  'TitleBarMenuBar.handlePointerOut': wrapCommand(handlePointerOut),
-  'TitleBarMenuBar.handlePointerOver': wrapCommand(handlePointerOver),
-  'TitleBarMenuBar.loadContent': wrapCommand(loadContent),
-  'TitleBarMenuBar.render2': render2,
-  'TitleBarMenuBar.saveState': saveState,
-  'TitleBarMenuBar.terminate': terminate,
-  'TitleBarMenuBar.toggleIndex': wrapCommand(toggleIndex),
-  'TitleBarMenuBar.toggleMenu': wrapCommand(toggleMenu)
-};
+  'TitleBar.resize': wrapCommand(resize),
+  'TitleBar.saveState': saveState,
+  'TitleBar.terminate': terminate,
+  'TitleBar.toggleIndex': wrapCommand(toggleIndex),
+  'TitleBar.toggleMenu': wrapCommand(toggleMenu)
+};
+
+// deprecated, can be removed in the future.
+// currently enabled for backwards compatability
+for (const [key, value] of Object.entries(commandMap)) {
+  const [prefix, name] = key.split('.');
+  if (prefix === 'TitleBar') {
+    const alternate = `TitleBarMenuBar.${name}`;
+    // @ts-ignore
+    commandMap[alternate] = value;
+  }
+}
 
 const listen = async () => {
   registerCommands(commandMap);