@lvce-editor/title-bar-worker 1.1.0 → 1.2.0

package/dist/titleBarWorkerMain.js

@@ -94,6 +94,12 @@ const number = value => {
     throw new AssertionError('expected value to be of type number');
   }
 };
+const array = value => {
+  const type = getType(value);
+  if (type !== 'array') {
+    throw new AssertionError('expected value to be of type array');
+  }
+};
 const string = value => {
   const type = getType(value);
   if (type !== 'string') {
@@ -442,10 +448,10 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set = (id, fn) => {
+const set$1 = (id, fn) => {
   callbacks[id] = fn;
 };
-const get = id => {
+const get$1 = id => {
   return callbacks[id];
 };
 const remove = id => {
@@ -461,13 +467,13 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set(id, resolve);
+  set$1(id, resolve);
   return {
     id,
     promise
   };
 };
-const create$2 = (method, params) => {
+const create$2$1 = (method, params) => {
   const {
     id,
     promise
@@ -618,7 +624,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get(id);
+  const fn = get$1(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -759,7 +765,7 @@ const invokeHelper = async (ipc, method, params, useSendAndTransfer) => {
   const {
     message,
     promise
-  } = create$2(method, params);
+  } = create$2$1(method, params);
   if (useSendAndTransfer && ipc.sendAndTransfer) {
     ipc.sendAndTransfer(message);
   } else {
@@ -843,7 +849,7 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
-const create$1 = async ({
+const create$2 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -855,121 +861,331 @@ const create$1 = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create: create$1
-};
-
-const Enter = 3;
-const Escape = 8;
-const Space = 9;
-const End = 255;
-const Home = 12;
-const LeftArrow = 13;
-const UpArrow = 14;
-const RightArrow = 15;
-const DownArrow = 16;
-const Delete = 18;
-const KeyC = 31;
-const KeyV = 50;
-const F2 = 58;
-const Star = 131;
-
-const CtrlCmd = 1 << 11 >>> 0;
-const Alt = 1 << 9 >>> 0;
-
-const FocusExplorer = 13;
-const FocusExplorerEditBox = 14;
-const FocusTitleBarMenuBar = 26;
-
-const getKeyBindings = () => {
-  return [{
-    key: RightArrow,
-    command: 'Explorer.handleArrowRight',
-    when: FocusExplorer
-  }, {
-    key: LeftArrow,
-    command: 'Explorer.handleArrowLeft',
-    when: FocusExplorer
-  }, {
-    key: Home,
-    command: 'Explorer.focusFirst',
-    when: FocusExplorer
-  }, {
-    key: End,
-    command: 'Explorer.focusLast',
-    when: FocusExplorer
-  }, {
-    key: UpArrow,
-    command: 'Explorer.focusPrevious',
-    when: FocusExplorer
-  }, {
-    key: DownArrow,
-    command: 'Explorer.focusNext',
-    when: FocusExplorer
-  }, {
-    key: CtrlCmd | Star,
-    command: 'Explorer.expandAll',
-    when: FocusExplorer
-  }, {
-    key: Alt | RightArrow,
-    command: 'Explorer.expandRecursively',
-    when: FocusExplorer
-  }, {
-    key: CtrlCmd | LeftArrow,
-    command: 'Explorer.collapseAll',
-    when: FocusExplorer
-  }, {
-    key: CtrlCmd | KeyV,
-    command: 'Explorer.handlePaste',
-    when: FocusExplorer
-  }, {
-    key: CtrlCmd | KeyC,
-    command: 'Explorer.handleCopy',
-    when: FocusExplorer
-  }, {
-    key: F2,
-    command: 'Explorer.rename',
-    when: FocusExplorer
-  }, {
-    key: Escape,
-    command: 'Explorer.cancelEdit',
-    when: FocusExplorerEditBox
-  }, {
-    key: Enter,
-    command: 'Explorer.acceptEdit',
-    when: FocusExplorerEditBox
-  }, {
-    key: Delete,
-    command: 'Explorer.removeDirent',
-    when: FocusExplorer
-  }, {
-    key: Escape,
-    command: 'Explorer.focusNone',
-    when: FocusExplorer
-  }, {
-    key: Space,
-    command: 'Explorer.handleClickCurrentButKeepFocus',
-    when: FocusExplorer
-  }, {
-    key: Enter,
-    command: 'Explorer.handleClickCurrent',
-    when: FocusExplorer
-  }];
+  create: create$2
 };
 
+const Menu$1 = 'menu';
 const MenuBar = 'menubar';
-const MenuItem = 'menuitem';
-
-const HandleClick = 'handleClick';
-const HandleFocusIn = 'handleFocusIn';
-const HandleFocusOut = 'handleFocusOut';
-const HandlePointerOut = 'handlePointerOut';
-const HandlePointerOver = 'handlePointerOver';
-
+const MenuItem$1 = 'menuitem';
+const MenuItemCheckBox = 'menuitemcheckbox';
+const Separator$1 = 'separator';
+
+const Menu = 'Menu';
+const MenuItem = 'MenuItem';
+const MenuItemFocused = 'MenuItemFocused';
+const MenuItemSeparator = 'MenuItemSeparator';
+const MenuItemSeparatorLine = 'MenuItemSeparatorLine';
+const MenuItemSubMenu = 'MenuItemSubMenu';
+const MenuItemSubMenuArrowRight = 'MenuItemSubMenuArrowRight';
 const TitleBarEntryActive = 'TitleBarEntryActive';
 const TitleBarTopLevelEntry = 'TitleBarTopLevelEntry';
 const TitleBarTopLevelEntryLabel = 'TitleBarTopLevelEntryLabel';
 
+const getKeyBindingString = (key, altKey, ctrlKey, shiftKey, metaKey) => {
+  let string = '';
+  if (ctrlKey) {
+    string += 'Ctrl+';
+  }
+  if (shiftKey) {
+    string += 'Shift+';
+  }
+  string += key.toUpperCase();
+  return string;
+};
+
+const Separator = 1;
+const None = 0;
+const SubMenu = 4;
+const Checked = 2;
+const Unchecked = 3;
+const Disabled = 5;
+const RestoreFocus = 6;
+const Ignore = 7;
+
+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 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);
+  return {
+    key,
+    isCtrl,
+    isShift
+  };
+};
+
 const Div = 4;
+const Span = 8;
 const Text = 12;
 
 const text = data => {
@@ -980,6 +1196,165 @@ const text = data => {
   };
 };
 
+const separator = {
+  type: Div,
+  className: MenuItemSeparator,
+  role: Separator$1,
+  childCount: 1
+};
+const separatorLine = {
+  type: Div,
+  className: MenuItemSeparatorLine,
+  childCount: 0
+};
+const checkboxUnchecked = {
+  type: Div,
+  className: MenuItem,
+  role: MenuItemCheckBox,
+  ariaChecked: false,
+  tabIndex: -1,
+  childCount: 1
+};
+const checkboxChecked = {
+  type: Div,
+  className: `${MenuItem} MenuItemCheckMark`,
+  role: MenuItemCheckBox,
+  ariaChecked: true,
+  tabIndex: -1,
+  childCount: 2
+};
+const disabled = {
+  type: Div,
+  className: MenuItem,
+  role: MenuItem$1,
+  tabIndex: -1,
+  disabled: true,
+  childCount: 1
+};
+const arrowRight = {
+  type: Div,
+  className: MenuItemSubMenuArrowRight,
+  childCount: 0
+};
+const getMenuItemSeparatorDom = menuItem => {
+  return [separator, separatorLine];
+};
+const getMenuItemCheckedDom = menuItem => {
+  const {
+    label
+  } = menuItem;
+  return [checkboxChecked, {
+    type: Div,
+    className: 'MenuItemCheckmarkIcon MaskIconCheck'
+  }, text(label)];
+};
+const getMenuItemUncheckedDom = menuItem => {
+  const {
+    label
+  } = menuItem;
+  return [checkboxUnchecked, text(label)];
+};
+const getMenuItemDisabledDom = menuItem => {
+  const {
+    label
+  } = menuItem;
+  return [disabled, text(label)];
+};
+const getMenuItemDefaultDom = menuItem => {
+  const {
+    label,
+    isFocused,
+    key
+  } = menuItem;
+  let className = MenuItem;
+  if (isFocused) {
+    className += ' ' + MenuItemFocused;
+  }
+  const dom = [];
+  dom.push({
+    type: Div,
+    className,
+    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;
+};
+const getMenuItemSubMenuDom = menuItem => {
+  const {
+    label,
+    isFocused,
+    isExpanded,
+    level
+  } = menuItem;
+  let className = MenuItem;
+  className += ' ' + MenuItemSubMenu;
+  if (isFocused) {
+    className += ' ' + MenuItemFocused;
+  }
+  return [{
+    type: Div,
+    className,
+    role: MenuItem$1,
+    tabIndex: -1,
+    ariaHasPopup: true,
+    ariaExpanded: isExpanded,
+    ariaOwns: isExpanded ? `Menu-${level + 1}` : undefined,
+    childCount: 2
+  }, text(label), arrowRight];
+};
+const getMenuItemVirtualDom = menuItem => {
+  const {
+    flags
+  } = menuItem;
+  switch (flags) {
+    case None:
+    case RestoreFocus:
+    case Ignore:
+      return getMenuItemDefaultDom(menuItem);
+    case Separator:
+      return getMenuItemSeparatorDom();
+    case Checked:
+      return getMenuItemCheckedDom(menuItem);
+    case Unchecked:
+      return getMenuItemUncheckedDom(menuItem);
+    case Disabled:
+      return getMenuItemDisabledDom(menuItem);
+    case SubMenu:
+      return getMenuItemSubMenuDom(menuItem);
+    default:
+      return [];
+  }
+};
+const getMenuVirtualDom = menuItems => {
+  const dom = [];
+  dom.push({
+    type: Div,
+    className: Menu,
+    role: Menu$1,
+    tabIndex: -1,
+    childCount: menuItems.length
+  });
+  dom.push(...menuItems.flatMap(getMenuItemVirtualDom));
+  return dom;
+};
+
+const HandleClick = 'handleClick';
+const HandleFocusIn = 'handleFocusIn';
+const HandleFocusOut = 'handleFocusOut';
+const HandlePointerOut = 'handlePointerOut';
+const HandlePointerOver = 'handlePointerOver';
+
 const getItemVirtualDom = item => {
   // @ts-ignore
   const {
@@ -994,7 +1369,7 @@ const getItemVirtualDom = item => {
     className: TitleBarTopLevelEntry,
     ariaHasPopup: true,
     ariaExpanded: isOpen,
-    role: MenuItem,
+    role: MenuItem$1,
     childCount: 1,
     ariaKeyShortcuts: keyboardShortCut
   });
@@ -1035,6 +1410,31 @@ const getTitleBarMenuBarVirtualDom = visibleItems => {
   }, ...getTitleBarMenuBarItemsVirtualDom(visibleItems)];
 };
 
+const getVisible = (items, focusedIndex, expanded, level) => {
+  const visibleItems = [];
+  const {
+    length
+  } = items;
+  for (let i = 0; i < length; i++) {
+    const item = items[i];
+    const {
+      flags,
+      label
+    } = item;
+    visibleItems.push({
+      label,
+      flags,
+      isFocused: i === focusedIndex,
+      isExpanded: i === focusedIndex && expanded,
+      level,
+      key: item.key
+    });
+  }
+  return visibleItems;
+};
+
+const Ellipsis = 'Ellipsis';
+
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1047,10 +1447,292 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
+const About = 'About';
+const CheckForUpdates = 'Check For Updates';
+const ClearRecentlyOpened = 'Clear Recently Opened';
+const Edit$1 = 'Edit';
+const File$1 = 'File';
+const Go$1 = 'Go';
+const Help$1 = 'Help';
+const MoreDot = 'More ...';
+const Run$1 = 'Run';
+const Selection$1 = 'Selection';
+const Terminal$1 = 'Terminal';
+const View$1 = 'View';
+
+const moreDot = () => {
+  return i18nString(MoreDot);
+};
+const clearRecentlyOpened = () => {
+  return i18nString(ClearRecentlyOpened);
+};
+
+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 SetFocusedIndex = 'setFocusedIndex';
+const SetMenus = 'setMenus';
+
+const renderTitleBarEntries = {
+  isEqual(oldState, newState) {
+    return oldState.titleBarEntries === newState.titleBarEntries && oldState.width === newState.width && oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
+  },
+  apply(oldState, newState) {
+    const visibleEntries = getVisibleTitleBarEntries(newState.titleBarEntries, newState.width, newState.focusedIndex, newState.isMenuOpen);
+    const dom = getTitleBarMenuBarVirtualDom(visibleEntries);
+    return ['Viewlet.setDom2', dom];
+  }
+};
+const renderFocusedIndex = {
+  isEqual(oldState, newState) {
+    return oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
+  },
+  apply(oldState, newState) {
+    return [/* method */SetFocusedIndex, /* oldFocusedIndex */oldState.focusedIndex, /* newfocusedIndex */newState.focusedIndex, /* oldIsMenuOpen */oldState.isMenuOpen, /* newIsMenuOpen */newState.isMenuOpen];
+  }
+};
+const renderMenus = {
+  isEqual(oldState, newState) {
+    return oldState.menus === newState.menus;
+  },
+  apply(oldState, newState) {
+    const oldMenus = oldState.menus;
+    const newMenus = newState.menus;
+    const oldLength = oldMenus.length;
+    const newLength = newMenus.length;
+    const commonLength = Math.min(oldLength, newLength);
+    const changes = [];
+    for (let i = 0; i < commonLength; i++) {
+      const oldMenu = oldMenus[i];
+      const newMenu = newMenus[i];
+      if (oldMenu !== newMenu) {
+        const visible = getVisible(newMenu.items, newMenu.focusedIndex, newMenu.expanded, newMenu.level);
+        const dom = getMenuVirtualDom(visible).slice(1);
+        changes.push([/* method */'updateMenu', newMenu, /* newLength */newLength, dom]);
+      }
+    }
+    const difference = newLength - oldLength;
+    if (difference > 0) {
+      const newMenu = newMenus.at(-1);
+      const visible = getVisible(newMenu.items, newMenu.focusedIndex, newMenu.expanded, newMenu.level);
+      const dom = getMenuVirtualDom(visible).slice(1);
+      changes.push(['addMenu', newMenu, dom]);
+    } else if (difference < 0) {
+      changes.push(['closeMenus', newLength]);
+    }
+    return [/* method */SetMenus, /* changes */changes, newState.uid];
+  }
+};
+const render = [renderTitleBarEntries, renderFocusedIndex, renderMenus];
+
+const create$1 = () => {
+  const states = Object.create(null);
+  return {
+    get(uid) {
+      return states[uid];
+    },
+    set(uid, oldState, newState) {
+      states[uid] = {
+        oldState,
+        newState
+      };
+    }
+  };
+};
+
+const {
+  get,
+  set
+} = create$1();
+
+const doRender = async uid => {
+  const {
+    oldState,
+    newState
+  } = get(uid);
+  const commands = [];
+  for (const item of render) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
+    }
+  }
+  return commands;
+};
+
+const commandsIds = ['closeMenu', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusPrevious', 'handleKeyArrowDown', 'handleKeyArrowLeft', 'handleKeyArrowRight', 'handleKeyArrowUp', 'handleKeyEnd', 'handleKeyEnter', 'handleKeyEscape', 'handleKeyHome', 'handleKeySpace', 'handleMenuClick', 'handleMenuMouseOver', 'handleMouseOver', 'handleMouseOut', 'toggleIndex', 'toggleMenu', 'handleClick', 'handleFocus'];
+const getCommandIds = () => {
+  return commandsIds;
+};
+
+const FocusTitleBarMenuBar = 26;
+
+const getKeyBindings = () => {
+  return [{
+    key: DownArrow$1,
+    command: 'TitleBarMenuBar.handleKeyArrowDown',
+    when: FocusTitleBarMenuBar
+  }, {
+    key: UpArrow$1,
+    command: 'TitleBarMenuBar.handleKeyArrowUp',
+    when: FocusTitleBarMenuBar
+  }, {
+    key: RightArrow$1,
+    command: 'TitleBarMenuBar.handleKeyArrowRight',
+    when: FocusTitleBarMenuBar
+  }, {
+    key: LeftArrow$1,
+    command: 'TitleBarMenuBar.handleKeyArrowLeft',
+    when: FocusTitleBarMenuBar
+  }, {
+    key: Space$1,
+    command: 'TitleBarMenuBar.handleKeySpace',
+    when: FocusTitleBarMenuBar
+  }, {
+    key: Home$1,
+    command: 'TitleBarMenuBar.handleKeyHome',
+    when: FocusTitleBarMenuBar
+  }, {
+    key: End$1,
+    command: 'TitleBarMenuBar.handleKeyEnd',
+    when: FocusTitleBarMenuBar
+  }, {
+    key: Escape$1,
+    command: 'TitleBarMenuBar.handleKeyEscape',
+    when: FocusTitleBarMenuBar
+  }];
+};
+
+const getFontString = (fontWeight, fontSize, fontFamily) => {
+  return `${fontWeight} ${fontSize}px ${fontFamily}`;
+};
+
+const state$1 = {
+  ctx: undefined
+};
+const getOrCreate = createCtx => {
+  if (state$1.ctx) {
+    return state$1.ctx;
+  }
+  state$1.ctx = createCtx();
+  return state$1.ctx;
+};
+
+const createCtx = () => {
+  const canvas = new OffscreenCanvas(0, 0);
+  const ctx = /** @type {OffscreenCanvasRenderingContext2D} */canvas.getContext('2d');
+  if (!ctx) {
+    throw new Error('Failed to get canvas context 2d');
+  }
+  return ctx;
+};
+const getContext = () => {
+  const ctx = getOrCreate(createCtx);
+  return ctx;
+};
+
+const px = value => {
+  return `${value}px`;
+};
+
+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);
+  if (typeof letterSpacing !== 'number') {
+    throw new TypeError('letterSpacing must be of type number');
+  }
+  const letterSpacingString = getLetterSpacingString(letterSpacing);
+  const fontString = getFontString(fontWeight, fontSize, fontFamily);
+  const ctx = getContext();
+  // @ts-ignore
+  ctx.letterSpacing = letterSpacingString;
+  ctx.font = fontString;
+  const metrics = ctx.measureText(text);
+  const {
+    width
+  } = metrics;
+  return width;
+};
+
+const measureTitleBarEntryWidth = (label, fontWeight, fontSize, fontFamily, letterSpacing) => {
+  const isMonospaceFont = false;
+  const charWidth = 0;
+  return measureTextWidth(label, fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth);
+};
+
+const addWidths = (entries, labelPadding, fontWeight, fontSize, fontFamily, letterSpacing) => {
+  const withWidths = [];
+  for (const entry of entries) {
+    const textWidth = measureTitleBarEntryWidth(entry.label, fontWeight, fontSize, fontFamily, letterSpacing);
+    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
+  };
+};
+
 /**
  * @enum {string}
  */
-const UiStrings$5 = {
+const UiStrings$2 = {
   Copy: 'Copy',
   CopyLineDown: 'Copy Line Down',
   CopyLineUp: 'Copy Line Up',
@@ -1064,54 +1746,40 @@ const UiStrings$5 = {
   ToggleLineComment: 'Toggle Line Comment',
   Undo: 'Undo'};
 const cut = () => {
-  return i18nString(UiStrings$5.Cut);
+  return i18nString(UiStrings$2.Cut);
 };
 const copy = () => {
-  return i18nString(UiStrings$5.Copy);
+  return i18nString(UiStrings$2.Copy);
 };
 const paste = () => {
-  return i18nString(UiStrings$5.Paste);
+  return i18nString(UiStrings$2.Paste);
 };
 const undo = () => {
-  return i18nString(UiStrings$5.Undo);
+  return i18nString(UiStrings$2.Undo);
 };
 const redo = () => {
-  return i18nString(UiStrings$5.Redo);
+  return i18nString(UiStrings$2.Redo);
 };
 const toggleLineComment = () => {
-  return i18nString(UiStrings$5.ToggleLineComment);
+  return i18nString(UiStrings$2.ToggleLineComment);
 };
 const toggleBlockComment = () => {
-  return i18nString(UiStrings$5.ToggleBlockComment);
+  return i18nString(UiStrings$2.ToggleBlockComment);
 };
 const selectAll = () => {
-  return i18nString(UiStrings$5.SelectAll);
+  return i18nString(UiStrings$2.SelectAll);
 };
 const copyLineUp = () => {
-  return i18nString(UiStrings$5.CopyLineUp);
+  return i18nString(UiStrings$2.CopyLineUp);
 };
 const copyLineDown = () => {
-  return i18nString(UiStrings$5.CopyLineDown);
+  return i18nString(UiStrings$2.CopyLineDown);
 };
 const moveLineUp = () => {
-  return i18nString(UiStrings$5.MoveLineUp);
+  return i18nString(UiStrings$2.MoveLineUp);
 };
 const moveLineDown = () => {
-  return i18nString(UiStrings$5.MoveLineDown);
-};
-
-const Separator = 1;
-const None = 0;
-const SubMenu = 4;
-const Disabled = 5;
-const RestoreFocus = 6;
-const Ignore = 7;
-
-const menuEntrySeparator = {
-  id: 'separator',
-  label: '',
-  flags: Separator,
-  command: ''
+  return i18nString(UiStrings$2.MoveLineDown);
 };
 
 const Edit = 2;
@@ -1125,6 +1793,13 @@ const Terminal = 14;
 const TitleBar = 15;
 const View = 16;
 
+const menuEntrySeparator = {
+  id: 'separator',
+  label: '',
+  flags: Separator,
+  command: ''
+};
+
 const id$9 = Edit;
 const getMenuEntries$c = () => {
   return [{
@@ -1174,7 +1849,7 @@ const MenuEntriesEdit = {
 /**
  * @enum {string}
  */
-const UiStrings$4 = {
+const UiStrings$1 = {
   NewFile: 'New File',
   NewWindow: 'New Window',
   OpenFile: 'Open File',
@@ -1184,25 +1859,25 @@ const UiStrings$4 = {
   SaveAll: 'Save All'
 };
 const newFile = () => {
-  return i18nString(UiStrings$4.NewFile);
+  return i18nString(UiStrings$1.NewFile);
 };
 const newWindow = () => {
-  return i18nString(UiStrings$4.NewWindow);
+  return i18nString(UiStrings$1.NewWindow);
 };
 const openFile = () => {
-  return i18nString(UiStrings$4.OpenFile);
+  return i18nString(UiStrings$1.OpenFile);
 };
 const openFolder = () => {
-  return i18nString(UiStrings$4.OpenFolder);
+  return i18nString(UiStrings$1.OpenFolder);
 };
 const openRecent = () => {
-  return i18nString(UiStrings$4.OpenRecent);
+  return i18nString(UiStrings$1.OpenRecent);
 };
 const save = () => {
-  return i18nString(UiStrings$4.Save);
+  return i18nString(UiStrings$1.Save);
 };
 const saveAll = () => {
-  return i18nString(UiStrings$4.SaveAll);
+  return i18nString(UiStrings$1.SaveAll);
 };
 
 const platform = 1;
@@ -1267,17 +1942,11 @@ const MenuEntriesGo = {
   id: id$7
 };
 
-/**
- * @enum {string}
- */
-const UiStrings$3 = {
-  About: 'About',
-  CheckForUpdates: 'Check For Updates'};
 const checkForUpdates = () => {
-  return i18nString(UiStrings$3.CheckForUpdates);
+  return i18nString(CheckForUpdates);
 };
 const about = () => {
-  return i18nString(UiStrings$3.About);
+  return i18nString(About);
 };
 
 const isAutoUpdateSupported = () => {
@@ -1316,16 +1985,18 @@ const MenuEntriesHelp = {
   id: id$6
 };
 
-const state$1 = {
+const state = {
   rpc: undefined
 };
 const invoke = (method, ...params) => {
-  const rpc = state$1.rpc;
+  const {
+    rpc
+  } = state;
   // @ts-ignore
   return rpc.invoke(method, ...params);
 };
 const setRpc = rpc => {
-  state$1.rpc = rpc;
+  state.rpc = rpc;
 };
 
 const getTitle = uri => {
@@ -1335,20 +2006,6 @@ const getTitle = uri => {
   return uri;
 };
 
-/**
- * @enum {string}
- */
-const UiStrings$2 = {
-  MoreDot: 'More ...',
-  ClearRecentlyOpened: 'Clear Recently Opened'
-};
-const moreDot = () => {
-  return i18nString(UiStrings$2.MoreDot);
-};
-const clearRecentlyOpened = () => {
-  return i18nString(UiStrings$2.ClearRecentlyOpened);
-};
-
 const MAX_MENU_RECENT_ENTRIES = 10;
 const toMenuItem = folder => {
   const label = getTitle(folder);
@@ -1440,11 +2097,11 @@ const MenuEntriesSelection = {
 /**
  * @enum {string}
  */
-const UiStrings$1 = {
+const UiStrings = {
   NewTerminal: 'New Terminal'
 };
 const newTerminal = () => {
-  return i18nString(UiStrings$1.NewTerminal);
+  return i18nString(UiStrings.NewTerminal);
 };
 
 const id$2 = Terminal;
@@ -1464,42 +2121,29 @@ const MenuEntriesTerminal = {
   id: id$2
 };
 
-/**
- * @enum {string}
- */
-const UiStrings = {
-  File: 'File',
-  Edit: 'Edit',
-  Selection: 'Selection',
-  View: 'View',
-  Go: 'Go',
-  Run: 'Run',
-  Terminal: 'Terminal',
-  Help: 'Help'
-};
 const file = () => {
-  return i18nString(UiStrings.File);
+  return i18nString(File$1);
 };
 const edit = () => {
-  return i18nString(UiStrings.Edit);
+  return i18nString(Edit$1);
 };
 const selection = () => {
-  return i18nString(UiStrings.Selection);
+  return i18nString(Selection$1);
 };
 const view = () => {
-  return i18nString(UiStrings.View);
+  return i18nString(View$1);
 };
 const go = () => {
-  return i18nString(UiStrings.Go);
+  return i18nString(Go$1);
 };
 const run = () => {
-  return i18nString(UiStrings.Run);
+  return i18nString(Run$1);
 };
 const terminal = () => {
-  return i18nString(UiStrings.Terminal);
+  return i18nString(Terminal$1);
 };
 const help = () => {
-  return i18nString(UiStrings.Help);
+  return i18nString(Help$1);
 };
 
 const getMenuEntries$4 = () => {
@@ -1616,70 +2260,16 @@ const getMenuEntries = async (id, ...args) => {
   }
 };
 
-const getFontString = (fontWeight, fontSize, fontFamily) => {
-  return `${fontWeight} ${fontSize}px ${fontFamily}`;
-};
-
-const state = {
-  ctx: undefined
-};
-const getOrCreate = createCtx => {
-  if (state.ctx) {
-    return state.ctx;
-  }
-  state.ctx = createCtx();
-  return state.ctx;
-};
-
-const createCtx = () => {
-  const canvas = new OffscreenCanvas(0, 0);
-  const ctx = /** @type {OffscreenCanvasRenderingContext2D} */canvas.getContext('2d');
-  if (!ctx) {
-    throw new Error('Failed to get canvas context 2d');
-  }
-  return ctx;
-};
-const getContext = () => {
-  const ctx = getOrCreate(createCtx);
-  return ctx;
-};
-
-const px = value => {
-  return `${value}px`;
+const saveState = uid => {
+  return {};
 };
 
-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);
-  if (typeof letterSpacing !== 'number') {
-    throw new TypeError('letterSpacing must be of type number');
-  }
-  const letterSpacingString = getLetterSpacingString(letterSpacing);
-  const fontString = getFontString(fontWeight, fontSize, fontFamily);
-  const ctx = getContext();
-  // @ts-ignore
-  ctx.letterSpacing = letterSpacingString;
-  ctx.font = fontString;
-  const metrics = ctx.measureText(text);
-  const width = metrics.width;
-  return width;
-};
-
-const measureTitleBarEntryWidth = (label, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  const isMonospaceFont = false;
-  const charWidth = 0;
-  return measureTextWidth(label, fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth);
+const terminate = () => {
+  globalThis.close();
 };
 
 const create = (id, uri, x, y, width, height) => {
-  return {
+  const state = {
     uid: id,
     titleBarEntries: [],
     focusedIndex: -1,
@@ -1696,35 +2286,8 @@ const create = (id, uri, x, y, width, height) => {
     width,
     height
   };
-};
-const addWidths = (entries, labelPadding, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  const withWidths = [];
-  for (const entry of entries) {
-    const textWidth = measureTitleBarEntryWidth(entry.label, fontWeight, fontSize, fontFamily, letterSpacing);
-    const width = textWidth + labelPadding * 2;
-    withWidths.push({
-      ...entry,
-      width
-    });
-  }
-  return withWidths;
-};
-const loadContent = async state => {
-  const {
-    labelFontFamily,
-    labelFontSize,
-    labelFontWeight,
-    labelLetterSpacing,
-    labelPadding
-  } = state;
-  const titleBarEntries = [];
-  const withWidths = addWidths(titleBarEntries, labelPadding, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
-  // const visible = GetVisibleTitleBarEntries.getVisibleTitleBarEntries(withWidths, width)
-  // console.log({ visible })
-  return {
-    ...state,
-    titleBarEntries: withWidths
-  };
+  set(id, state, state);
+  return state;
 };
 
 const closeMenu = (state, keepFocus) => {
@@ -1756,6 +2319,14 @@ const previous = (items, index) => {
   return index === 0 ? items.length - 1 : index - 1;
 };
 
+const getTotalWidth = entries => {
+  let total = 0;
+  for (const entry of entries) {
+    total += entry.width;
+  }
+  return total;
+};
+
 // TODO lazyload menuEntries and use Command.execute (maybe)
 const MENU_WIDTH = 150;
 const CONTEXT_MENU_ITEM_HEIGHT = 26;
@@ -1836,13 +2407,6 @@ const getIndexToFocusNext = menu => {
 
 // TODO more tests
 
-const getTotalWidth = entries => {
-  let total = 0;
-  for (const entry of entries) {
-    total += entry.width;
-  }
-  return total;
-};
 const openMenuAtIndex = async (state, index, shouldBeFocused) => {
   const {
     titleBarEntries,
@@ -1887,7 +2451,7 @@ const openMenuAtIndex = async (state, index, shouldBeFocused) => {
   };
 };
 
-const focusIndex = (state, index) => {
+const focusIndex = async (state, index) => {
   object(state);
   number(index);
   const {
@@ -2353,7 +2917,7 @@ const handleMouseOverMenuClosed = (state, index) => {
   return focusIndex(state, index);
 };
 
-const handleMouseOverMenuOpen = (state, index) => {
+const handleMouseOverMenuOpen = async (state, index) => {
   if (index === -1) {
     return state;
   }
@@ -2372,36 +2936,51 @@ const toggleMenu = state => {
   return openMenu(state, /* focus */false);
 };
 
+const wrapCommand = fn => {
+  const wrapped = async (uid, ...args) => {
+    const {
+      newState
+    } = get(uid);
+    const newerState = await fn(newState, ...args);
+    set(uid, newState, newerState);
+  };
+  return wrapped;
+};
+
 const commandMap = {
   'TitleBarMenuBar.closeMenu': closeMenu,
   'TitleBarMenuBar.create': create,
-  'TitleBarMenuBar.focus': focus,
-  'TitleBarMenuBar.focusFirst': focusFirst,
-  'TitleBarMenuBar.focusIndex': focusLast,
-  'TitleBarMenuBar.focusLast': focusIndex,
-  'TitleBarMenuBar.focusNext': focusNext,
-  'TitleBarMenuBar.focusPrevious': focusPrevious,
+  '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,
   'TitleBarMenuBar.getMenus': getMenus,
   'TitleBarMenuBar.getVirtualDom': getTitleBarMenuBarVirtualDom,
-  'TitleBarMenuBar.handleClick': handleClick,
-  'TitleBarMenuBar.handleFocus': handleFocus,
-  'TitleBarMenuBar.handleKeyArrowDown': handleKeyArrowDown,
-  'TitleBarMenuBar.handleKeyArrowLeft': handleKeyArrowLeft,
-  'TitleBarMenuBar.handleKeyArrowRight': handleKeyArrowRight,
-  'TitleBarMenuBar.handleKeyArrowUp': handleKeyArrowUp,
-  'TitleBarMenuBar.handleKeyEnd': handleKeyEnd,
-  'TitleBarMenuBar.handleKeyEnter': handleKeyEnter,
-  'TitleBarMenuBar.handleKeyEscape': handleKeyEscape,
-  'TitleBarMenuBar.handleKeyHome': handleKeyHome,
-  'TitleBarMenuBar.handleKeySpace': handleKeySpace,
-  'TitleBarMenuBar.handleMenuClick': handleMenuClick,
-  'TitleBarMenuBar.handleMenuMouseOver': handleMenuMouseOver,
-  'TitleBarMenuBar.handleMouseOut': handleMouseOut,
-  'TitleBarMenuBar.handleMouseOver': handleMouseOver,
-  'TitleBarMenuBar.loadContent': loadContent,
-  'TitleBarMenuBar.toggleIndex': toggleIndex,
-  'TitleBarMenuBar.toggleMenu': toggleMenu
+  'TitleBarMenuBar.handleClick': wrapCommand(handleClick),
+  'TitleBarMenuBar.handleFocus': wrapCommand(handleFocus),
+  '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.saveState': saveState,
+  '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.loadContent': wrapCommand(loadContent),
+  'TitleBarMenuBar.render': doRender,
+  'TitleBarMenuBar.toggleIndex': wrapCommand(toggleIndex),
+  'TitleBarMenuBar.toggleMenu': wrapCommand(toggleMenu),
+  'TitleBarMenuBar.terminate': terminate
 };
 
 const listen = async () => {