@lvce-editor/server 0.7.2 → 0.7.4

package/static/{18087fa → ce25a54}/packages/renderer-process/dist/rendererProcessMain.js

@@ -4,8 +4,8 @@ var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
 var __export = (target, all) => {
-  for (var name21 in all)
-    __defProp(target, name21, { get: all[name21], enumerable: true });
+  for (var name22 in all)
+    __defProp(target, name22, { get: all[name22], enumerable: true });
 };
 
 // src/parts/Css/Css.js
@@ -474,7 +474,7 @@ var init_Platform = __esm({
     state4 = {
       getAssetDir() {
         if (true) {
-          return "/18087fa";
+          return "/ce25a54";
         }
         if (platform === "electron") {
           return "../../../../..";
@@ -758,6 +758,9 @@ var init_AriaAlert = __esm({
       $New.textContent = message;
     };
     alert3 = (message) => {
+      if (!message) {
+        return;
+      }
       if (!state6.$AriaMessages) {
         state6.$AriaAlert1 = create$AriaAlert();
         state6.$AriaAlert2 = create$AriaAlert();
@@ -1575,7 +1578,7 @@ var init_MenuItem = __esm({
       return item.label;
     };
     create$MenuItem = (item) => {
-      const $MenuItem = document.createElement("li");
+      const $MenuItem = document.createElement("div");
       switch (item.flags) {
         case None:
         case RestoreFocus:
@@ -1817,7 +1820,7 @@ var init_Menu = __esm({
       x,
       y,
       items,
-      handleKeyDown: handleKeyDown4,
+      handleKeyDown: handleKeyDown3,
       handleFocusOut: handleFocusOut3,
       $Parent,
       level,
@@ -1827,7 +1830,7 @@ var init_Menu = __esm({
       showMenu(x, y, width, height, items, level);
       state8.$Parent = $Parent;
       state8.handleFocusOut = handleFocusOut3;
-      state8.handleKeyDown = handleKeyDown4;
+      state8.handleKeyDown = handleKeyDown3;
       if ($Parent) {
         $Parent.setAttribute("aria-owns", "Menu");
       } else {
@@ -2352,7 +2355,7 @@ __export(ConditionErrors_exports, {
   toHaveText: () => toHaveText2,
   toHaveValue: () => toHaveValue2
 });
-var toBeVisible2, toHaveValue2, printLocator, toHaveText2, toHaveAttribute2, toHaveCount2, toBeFocused2, toHaveClass2, toHaveId2, toBeHidden2, toHaveCss2;
+var toBeVisible2, toHaveValue2, printLocator, toHaveText2, toHaveAttribute2, toHaveCount2, stringifyElement, toBeFocused2, toHaveClass2, toHaveId2, toBeHidden2, toHaveCss2;
 var init_ConditionErrors = __esm({
   "src/parts/TestFrameWork/ConditionErrors.js"() {
     "use strict";
@@ -2364,9 +2367,12 @@ var init_ConditionErrors = __esm({
       return `expected selector ${locator._selector} to have value ${value}`;
     };
     printLocator = (locator) => {
-      if (locator._nth) {
+      if (locator._nth !== -1) {
         return `${locator._selector}:nth(${locator._nth})`;
       }
+      if (locator._hasText) {
+        return `${locator._selector} "${locator._hasText}"`;
+      }
       return `${locator._selector}`;
     };
     toHaveText2 = (locator, { text: text2 }) => {
@@ -2396,9 +2402,23 @@ var init_ConditionErrors = __esm({
       const locatorString = printLocator(locator);
       return `expected ${locatorString} to have count ${count}`;
     };
+    stringifyElement = (element) => {
+      if (element.id) {
+        return `#${element.id}`;
+      }
+      if (element.className) {
+        return `.${element.className}`;
+      }
+      if (element === document.body) {
+        return "document.body";
+      }
+      return element.tagName;
+    };
     toBeFocused2 = (locator) => {
       const locatorString = printLocator(locator);
-      return `expected ${locatorString} to be focused`;
+      const activeElement = document.activeElement;
+      const stringifiedActiveElement = stringifyElement(activeElement);
+      return `expected ${locatorString} to be focused but active element is ${stringifiedActiveElement}`;
     };
     toHaveClass2 = (locator, { className }) => {
       const [element] = querySelector(locator._selector);
@@ -2619,7 +2639,7 @@ var init_TestFrameWork_ipc = __esm({
 });
 
 // src/parts/ViewletModuleId/ViewletModuleId.js
-var ActivityBar, Clock, DebugConsole, EditorCompletion, EditorImage, EditorPlainText, EditorText, Empty, Explorer, Extensions, ImagePreview2, Implementations, KeyBindings2, Main, Output, Panel2, Problems, QuickPick, References, RunAndDebug, Search, SideBar, SourceControl, StatusBar, Terminal, TitleBar, EditorFindWidget, ExtensionDetail;
+var ActivityBar, Clock, DebugConsole, EditorCompletion, EditorImage, EditorPlainText, EditorText, Empty, Explorer, Extensions, ImagePreview2, Implementations, KeyBindings2, Main, Output, Panel2, Problems, QuickPick, References, RunAndDebug, Search, SideBar, SourceControl, StatusBar, Terminal, TitleBar, EditorFindWidget, ExtensionDetail, TitleBarMenuBar, TitleBarButtons;
 var init_ViewletModuleId = __esm({
   "src/parts/ViewletModuleId/ViewletModuleId.js"() {
     "use strict";
@@ -2651,6 +2671,8 @@ var init_ViewletModuleId = __esm({
     TitleBar = "TitleBar";
     EditorFindWidget = "EditorFindWidget";
     ExtensionDetail = "ExtensionDetail";
+    TitleBarMenuBar = "TitleBarMenuBar";
+    TitleBarButtons = "TitleBarButtons";
   }
 });
 
@@ -2999,9 +3021,9 @@ var init_ViewletExplorer = __esm({
       $InputBox.remove();
       return $InputBox.value;
     };
-    showRenameInputBox = (state14, index, name21) => {
+    showRenameInputBox = (state14, index, name22) => {
       const $InputBox = create3();
-      $InputBox.value = name21;
+      $InputBox.value = name22;
       const $Dirent = state14.$Viewlet.children[index];
       $Dirent.replaceWith($InputBox);
       $InputBox.select();
@@ -4621,7 +4643,7 @@ var init_termterm = __esm({
     };
     createTerminal = (root, { handleInput: handleInput7, bell = noop, setWindowTitle = noop }) => {
       let focused = false;
-      const handleKeyDown4 = (event) => {
+      const handleKeyDown3 = (event) => {
         const transformedKey = transformKey(event);
         if (transformedKey) {
           handleInput7(transformedKey);
@@ -4654,7 +4676,7 @@ var init_termterm = __esm({
       textarea.className = "TerminalTextArea";
       $Layers.append(canvasText, canvasCursor);
       root.append(textarea, $Layers);
-      textarea.onkeydown = handleKeyDown4;
+      textarea.onkeydown = handleKeyDown3;
       textarea.addEventListener("beforeinput", handleBeforeInput3);
       root.onmousedown = (event) => {
         event.preventDefault();
@@ -5021,7 +5043,7 @@ var init_ViewletTerminal = __esm({
 });
 
 // src/parts/ViewletExtensions/ViewletExtensionsEvents.js
-var DEFAULT_ICON_SRC, handleScrollBarThumbPointerMove, handleScrollBarThumbPointerUp, handleScrollBarPointerDown, handleFocus4, getNodeIndex3, handleClick3, handleContextMenuMouse3, handleContextMenuKeyboard3, handleContextMenu4, handleWheel2, handleInput4, handleIconError, handleScroll, toArray, handleTouchMove, handleTouchStart, handleTouchEnd;
+var DEFAULT_ICON_SRC, handleScrollBarThumbPointerMove, handleScrollBarThumbPointerUp, handleScrollBarPointerDown, handleFocus4, getNodeIndex3, handlePointerDownExtension, handlePointerDownExtensionDetail, handlePointerDownExtensionAuthorName, handlePointerDown, handleContextMenuMouse3, handleContextMenuKeyboard3, handleContextMenu4, handleWheel2, handleInput4, handleIconError, handleScroll, toArray, handleTouchMove, handleTouchStart, handleTouchEnd;
 var init_ViewletExtensionsEvents = __esm({
   "src/parts/ViewletExtensions/ViewletExtensionsEvents.js"() {
     "use strict";
@@ -5065,45 +5087,54 @@ var init_ViewletExtensionsEvents = __esm({
       }
       return index;
     };
-    handleClick3 = (event) => {
-      const $Target = event.target;
-      console.log($Target);
-      switch ($Target.className) {
-        case "Extension": {
-          const index = getNodeIndex3($Target);
-          send(
-            "Extensions.handleClick",
-            index
-          );
+    handlePointerDownExtension = ($Target) => {
+      const index = getNodeIndex3($Target);
+      send(
+        "Extensions.handleClick",
+        index
+      );
+    };
+    handlePointerDownExtensionDetail = ($Target) => {
+      const index = getNodeIndex3($Target.parentNode.parentNode);
+      send(
+        "Extensions.handleClick",
+        index
+      );
+    };
+    handlePointerDownExtensionAuthorName = ($Target) => {
+      const index = getNodeIndex3($Target.parentNode.parentNode.parentNode);
+      send(
+        "Extensions.handleClick",
+        index
+      );
+    };
+    handlePointerDown = (event) => {
+      const { target, button } = event;
+      if (button !== LeftClick) {
+        return;
+      }
+      switch (target.className) {
+        case "ExtensionListItem":
+          handlePointerDownExtension(target);
           break;
-        }
         case "ExtensionName":
         case "ExtensionDescription":
-        case "ExtensionFooter": {
-          const index = getNodeIndex3($Target.parentNode.parentNode);
-          send(
-            "Extensions.handleClick",
-            index
-          );
+        case "ExtensionFooter":
+          handlePointerDownExtensionDetail(target);
           break;
-        }
-        case "ExtensionAuthorName": {
-          const index = getNodeIndex3($Target.parentNode.parentNode.parentNode);
-          send(
-            "Extensions.handleClick",
-            index
-          );
+        case "ExtensionAuthorName":
+          handlePointerDownExtensionAuthorName(target);
           break;
-        }
         default:
           break;
       }
     };
     handleContextMenuMouse3 = (event) => {
+      const { clientX, clientY } = event;
       send(
         "Extensions.handleContextMenu",
-        event.clientX,
-        event.clientY
+        clientX,
+        clientY
       );
     };
     handleContextMenuKeyboard3 = (event) => {
@@ -5252,7 +5283,7 @@ var init_ViewletExtensions = __esm({
       $ExtensionList.ariaLabel = "Extensions";
       $ExtensionList.role = "list";
       $ExtensionList.oncontextmenu = handleContextMenu4;
-      $ExtensionList.onclick = handleClick3;
+      $ExtensionList.onpointerdown = handlePointerDown;
       $ExtensionList.onfocus = handleFocus4;
       $ExtensionList.onscroll = handleScroll;
       $ExtensionList.addEventListener(
@@ -6634,7 +6665,7 @@ var init_ViewletEditorText = __esm({
 });
 
 // src/parts/ViewletEditorImage/ViewletEditorImageEvents.js
-var handlePointerMove2, handlePointerUp, handlePointerDown, handleWheel4, handleContextMenu6;
+var handlePointerMove2, handlePointerUp, handlePointerDown2, handleWheel4, handleContextMenu6;
 var init_ViewletEditorImageEvents = __esm({
   "src/parts/ViewletEditorImage/ViewletEditorImageEvents.js"() {
     "use strict";
@@ -6662,7 +6693,7 @@ var init_ViewletEditorImageEvents = __esm({
         clientY
       );
     };
-    handlePointerDown = (event) => {
+    handlePointerDown2 = (event) => {
       const { pointerId, clientX, clientY, target, button } = event;
       if (button !== LeftClick) {
         return;
@@ -6720,7 +6751,7 @@ var init_ViewletEditorImage = __esm({
       $Viewlet.className = "Viewlet";
       $Viewlet.dataset.viewletId = "EditorImage";
       $Viewlet.append($ImageWrapper);
-      $Viewlet.onpointerdown = handlePointerDown;
+      $Viewlet.onpointerdown = handlePointerDown2;
       $Viewlet.onpointerup = handlePointerUp;
       $Viewlet.addEventListener(
         "pointermove",
@@ -6827,12 +6858,12 @@ var init_ViewletSideBar = __esm({
       object(state14);
       state14.$SideBar.replaceChildren();
     };
-    appendViewlet = (state14, name21, $Viewlet) => {
+    appendViewlet = (state14, name22, $Viewlet) => {
       object(state14);
-      string(name21);
+      string(name22);
       const $SideBarTitleAreaTitle = state14.$SideBarTitleAreaTitle;
-      $SideBarTitleAreaTitle.title = name21;
-      $SideBarTitleAreaTitle.textContent = name21;
+      $SideBarTitleAreaTitle.title = name22;
+      $SideBarTitleAreaTitle.textContent = name22;
       $Viewlet.id = "SideBarContent";
       if (state14.$SideBarContent) {
         state14.$SideBarContent.replaceWith($Viewlet);
@@ -6916,9 +6947,9 @@ var init_ViewletPanel = __esm({
     setTabs = (state14, tabs) => {
       state14.$PanelTabs.append(...tabs.map(create$PanelTab));
     };
-    appendViewlet2 = (state14, name21, $Viewlet) => {
+    appendViewlet2 = (state14, name22, $Viewlet) => {
       object(state14);
-      string(name21);
+      string(name22);
       object($Viewlet);
       $Viewlet.id = "PanelContent";
       if (state14.$PanelContent) {
@@ -7431,7 +7462,7 @@ __export(ViewletStatusBar_exports, {
   focus: () => focus16,
   setItems: () => setItems2
 });
-var getIconClassName, getMaskImageUrl, create$StatusBarItem, handleClick4, create27, clearNode, setItems2, focus16;
+var getIconClassName, getMaskImageUrl, create$StatusBarItem, handleClick3, create27, clearNode, setItems2, focus16;
 var init_ViewletStatusBar = __esm({
   "src/parts/ViewletStatusBar/ViewletStatusBar.js"() {
     "use strict";
@@ -7484,7 +7515,7 @@ var init_ViewletStatusBar = __esm({
       }
       return $StatusBarItem;
     };
-    handleClick4 = (event) => {
+    handleClick3 = (event) => {
       const $Target = event.target;
       if ($Target.className !== "StatusBarItem") {
         return;
@@ -7498,7 +7529,7 @@ var init_ViewletStatusBar = __esm({
       const $StatusBarItemsRight = document.createElement("ul");
       $StatusBarItemsRight.id = "StatusBarItemsRight";
       const $StatusBar = state9.$StatusBar;
-      $StatusBar.onclick = handleClick4;
+      $StatusBar.onclick = handleClick3;
       $StatusBar.tabIndex = 0;
       $StatusBar.role = "status";
       $StatusBar.ariaLive = "off";
@@ -7529,113 +7560,162 @@ var init_ViewletStatusBar = __esm({
   }
 });
 
-// src/parts/TitleBarMenuBar/TitleBarMenuBarEvents.js
-var isInsideTitleBarMenu, handleFocusOut2, handleKeyDown3, handleMouseEnter3, getNodeIndex6, getIndex2, handleClick5;
-var init_TitleBarMenuBarEvents = __esm({
-  "src/parts/TitleBarMenuBar/TitleBarMenuBarEvents.js"() {
+// src/parts/ViewletTitleBar/ViewletTitleBar.js
+var ViewletTitleBar_exports = {};
+__export(ViewletTitleBar_exports, {
+  create: () => create28
+});
+var create28;
+var init_ViewletTitleBar = __esm({
+  "src/parts/ViewletTitleBar/ViewletTitleBar.js"() {
+    "use strict";
+    init_Layout();
+    create28 = () => {
+      const $TitleBar = state9.$TitleBar;
+      $TitleBar.ariaLabel = "Title Bar";
+      $TitleBar.role = "contentinfo";
+      return {
+        $TitleBar,
+        $Viewlet: $TitleBar
+      };
+    };
+  }
+});
+
+// src/parts/Editor/EditorHelper.js
+var state10, setState;
+var init_EditorHelper = __esm({
+  "src/parts/Editor/EditorHelper.js"() {
+    "use strict";
+    state10 = {
+      editorStates: /* @__PURE__ */ Object.create(null)
+    };
+    setState = (id, editorState) => {
+      state10.editorStates[id] = editorState;
+    };
+  }
+});
+
+// src/parts/EditorTab/EditorTab.js
+var getFileName2, handleEditorTabsContextMenu, handleMouseDown6, create29, create$Tab, render$Tab, addOne;
+var init_EditorTab = __esm({
+  "src/parts/EditorTab/EditorTab.js"() {
     "use strict";
     init_RendererWorker();
     init_MouseEventType();
-    isInsideTitleBarMenu = ($Element) => {
-      return $Element.classList.contains("MenuItem") || $Element.classList.contains("Menu");
+    getFileName2 = (uri) => {
+      return uri.slice(uri.lastIndexOf("/") + 1);
     };
-    handleFocusOut2 = (event) => {
-      const $ActiveElement = event.relatedTarget;
-      if ($ActiveElement && isInsideTitleBarMenu($ActiveElement)) {
-        console.log("RETURN");
-        return;
-      }
+    handleEditorTabsContextMenu = (event) => {
+      event.preventDefault();
+      const x = event.clientX;
+      const y = event.clientY;
       send(
-        "TitleBarMenuBar.closeMenu",
-        false
+        "Main.handleTabContextMenu",
+        x,
+        y
       );
     };
-    handleKeyDown3 = (event) => {
-      switch (event.key) {
-        case "ArrowDown":
-          event.preventDefault();
-          event.stopPropagation();
-          send(
-            "TitleBarMenuBar.handleKeyArrowDown"
-          );
-          break;
-        case "ArrowUp":
-          event.preventDefault();
-          event.stopPropagation();
-          send(
-            "TitleBarMenuBar.handleKeyArrowUp"
-          );
-          break;
-        case "ArrowRight":
-          console.log("arrow right");
-          event.preventDefault();
-          event.stopPropagation();
-          send(
-            "TitleBarMenuBar.handleKeyArrowRight"
-          );
-          break;
-        case "ArrowLeft":
-          event.preventDefault();
-          event.stopPropagation();
-          send(
-            "TitleBarMenuBar.handleKeyArrowLeft"
-          );
-          break;
-        case "Enter":
-          event.preventDefault();
-          event.stopPropagation();
-          send(
-            "TitleBarMenuBar.handleKeyEnter"
-          );
-          break;
-        case " ":
-          event.preventDefault();
-          event.stopPropagation();
-          send(
-            "TitleBarMenuBar.handleKeySpace"
-          );
-          break;
-        case "Home":
-        case "PageUp":
-          event.preventDefault();
-          event.stopPropagation();
-          send(
-            "TitleBarMenuBar.handleKeyHome"
-          );
-          break;
-        case "End":
-        case "PageDown":
-          event.preventDefault();
-          event.stopPropagation();
-          send(
-            "TitleBarMenuBar.handleKeyEnd"
-          );
+    handleMouseDown6 = (event) => {
+      event.preventDefault();
+      const $Target = event.target;
+      console.log({ $Target });
+      switch (event.button) {
+        case LeftClick:
+          console.log("left click");
           break;
-        case "Escape":
-          event.preventDefault();
-          event.stopPropagation();
-          send(
-            "TitleBarMenuBar.handleKeyEscape"
-          );
+        case MiddleClick:
+          send("Main.closeFocusedEditor");
           break;
         default:
           break;
       }
     };
-    handleMouseEnter3 = (event) => {
-      const $Target = event.target;
-      const index = getIndex2($Target);
-      if (index === -1) {
-        return;
-      }
-      const enterX = event.clientX;
-      const enterY = event.clientY;
-      send(
-        "TitleBarMenuBar.focusIndex",
-        index,
-        enterX,
-        enterY
-      );
+    create29 = () => {
+      const $EditorTabs = document.createElement("ul");
+      $EditorTabs.className = "EditorTabs";
+      $EditorTabs.oncontextmenu = handleEditorTabsContextMenu;
+      $EditorTabs.onmousedown = handleMouseDown6;
+      return $EditorTabs;
+    };
+    create$Tab = () => {
+      const $Tab = document.createElement("li");
+      $Tab.role = "tab";
+      $Tab.className = "EditorTab";
+      $Tab.ariaSelected = "true";
+      $Tab.tabIndex = 0;
+      $Tab.setAttribute("aria-description", "");
+      const $TabLabel = document.createElement("span");
+      return $Tab;
+    };
+    render$Tab = ($Tab, id, uri, languageId) => {
+      const fileName = getFileName2(uri);
+      $Tab.textContent = fileName;
+      $Tab.title = uri;
+      $Tab.dataset.languageId = languageId;
+      $Tab.dataset.fileName = fileName;
+    };
+    addOne = ($EditorTabs, id, uri, languageId) => {
+      const $EditorTab = create$Tab();
+      render$Tab($EditorTab, id, uri, languageId);
+      $EditorTabs.append($EditorTab);
+    };
+  }
+});
+
+// src/parts/EditorGroup/EditorGroup.js
+var create30, addOne2, replaceOne;
+var init_EditorGroup = __esm({
+  "src/parts/EditorGroup/EditorGroup.js"() {
+    "use strict";
+    init_Editor();
+    init_EditorHelper();
+    init_EditorTab();
+    init_Layout();
+    init_RendererWorker();
+    create30 = () => {
+      const $EditorTabs = create29();
+      const $Editors = document.createElement("div");
+      $Editors.className = "Editors";
+      state9.$Main.append($EditorTabs, $Editors);
+      return {
+        $EditorTabs,
+        $Editors
+      };
+    };
+    addOne2 = (state14, id, uri, languageId) => {
+      addOne(state14.$EditorTabs, id, uri, languageId);
+      const editorState = create19();
+      setState(id, editorState);
+      mount(editorState, state14.$Editors);
+      return editorState;
+    };
+    replaceOne = (state14, id, uri, languageId) => {
+      console.log("replace one");
+      addOne(state14.$EditorTabs, id, uri, languageId);
+    };
+  }
+});
+
+// src/parts/ViewletMain/ViewletMainEvents.js
+var handleDragOver2, handleDrop2, getNodeIndex6, getIndex2, handleTabCloseButtonMouseDown, handleTabMouseDown, handleTabsMouseDown, handleTabsContextMenu;
+var init_ViewletMainEvents = __esm({
+  "src/parts/ViewletMain/ViewletMainEvents.js"() {
+    "use strict";
+    init_EditorGroup();
+    init_Layout();
+    init_RendererWorker();
+    init_Viewlet();
+    init_MouseEventType();
+    handleDragOver2 = (event) => {
+      event.preventDefault();
+      state9.$Main.classList.add("DropTarget");
+    };
+    handleDrop2 = async (event) => {
+      console.log("[main] drop");
+      event.preventDefault();
+      state9.$Main.classList.remove("DropTarget");
+      send("Main.handleDrop");
     };
     getNodeIndex6 = ($Node) => {
       let index = 0;
@@ -7646,410 +7726,17 @@ var init_TitleBarMenuBarEvents = __esm({
     };
     getIndex2 = ($Target) => {
       switch ($Target.className) {
-        case "TitleBarTopLevelEntry":
+        case "EditorTabCloseButton":
+          return getNodeIndex6($Target.parentNode);
+        case "MainTab":
           return getNodeIndex6($Target);
         default:
           return -1;
       }
     };
-    handleClick5 = (event) => {
-      if (event.button !== LeftClick) {
-        return;
-      }
-      const $Target = event.target;
-      const index = getIndex2($Target);
-      if (index === -1) {
-        return;
-      }
+    handleTabCloseButtonMouseDown = (event, index) => {
       send(
-        "TitleBarMenuBar.toggleIndex",
-        index
-      );
-    };
-  }
-});
-
-// src/parts/TitleBarMenuBar/TitleBarMenuBar.js
-var create$TopLevelEntry, getMenuEntryBounds, focusIndex2, openMenu, closeMenu, create28, setEntries;
-var init_TitleBarMenuBar = __esm({
-  "src/parts/TitleBarMenuBar/TitleBarMenuBar.js"() {
-    "use strict";
-    init_Assert();
-    init_Menu();
-    init_Widget();
-    init_TitleBarMenuBarEvents();
-    create$TopLevelEntry = (item) => {
-      const $TitleBarTopLevelEntry = document.createElement("li");
-      $TitleBarTopLevelEntry.className = "TitleBarTopLevelEntry";
-      $TitleBarTopLevelEntry.tabIndex = -1;
-      $TitleBarTopLevelEntry.ariaHasPopup = "true";
-      $TitleBarTopLevelEntry.ariaExpanded = "false";
-      $TitleBarTopLevelEntry.role = "menuitem";
-      if (item.keyboardShortCut) {
-        $TitleBarTopLevelEntry.ariaKeyShortcuts = item.keyboardShortCut;
-      }
-      $TitleBarTopLevelEntry.textContent = item.name;
-      $TitleBarTopLevelEntry.dataset.id = item.id;
-      $TitleBarTopLevelEntry.id = `MenuItem-${item.id}`;
-      return $TitleBarTopLevelEntry;
-    };
-    getMenuEntryBounds = (state14, index) => {
-      const { $TitleBarMenu } = state14;
-      const $MenuEntry = $TitleBarMenu.children[index];
-      const rect = $MenuEntry.getBoundingClientRect();
-      return {
-        left: rect.left,
-        bottom: rect.bottom
-      };
-    };
-    focusIndex2 = (state14, unFocusIndex, focusIndex4) => {
-      object(state14);
-      number(unFocusIndex);
-      number(focusIndex4);
-      const { $TitleBarMenu } = state14;
-      if (unFocusIndex !== -1) {
-        $TitleBarMenu.children[unFocusIndex].ariaExpanded = "false";
-        $TitleBarMenu.children[unFocusIndex].removeAttribute("aria-owns");
-      }
-      if (focusIndex4 !== -1) {
-        $TitleBarMenu.children[focusIndex4].focus();
-      }
-    };
-    openMenu = (state14, unFocusIndex, index, level, menuItems, menuFocusedIndex, focus22, x, y, width, height) => {
-      object(state14);
-      number(unFocusIndex);
-      number(index);
-      number(level);
-      array(menuItems);
-      number(menuFocusedIndex);
-      boolean(focus22);
-      number(x);
-      number(y);
-      number(width);
-      number(height);
-      const { $TitleBarMenu } = state14;
-      $TitleBarMenu.addEventListener(
-        "mouseenter",
-        handleMouseEnter3,
-        {
-          capture: true
-        }
-      );
-      if (unFocusIndex !== -1) {
-        $TitleBarMenu.children[unFocusIndex].ariaExpanded = "false";
-        $TitleBarMenu.children[unFocusIndex].removeAttribute("aria-owns");
-      }
-      $TitleBarMenu.children[index].ariaExpanded = "true";
-      const $$Menus = state8.$$Menus;
-      state8.$$Menus = [];
-      showControlled({
-        x,
-        y,
-        width,
-        height,
-        items: menuItems,
-        handleKeyDown: handleKeyDown3,
-        handleFocusOut: handleFocusOut2,
-        $Parent: state14.$TitleBarMenu.children[index],
-        level
-      });
-      if (menuFocusedIndex !== -1) {
-        focusIndex(0, -1, menuFocusedIndex);
-      }
-      for (const $Menu of $$Menus) {
-        remove($Menu);
-      }
-    };
-    closeMenu = (state14, unFocusIndex, index) => {
-      const { $TitleBarMenu } = state14;
-      if (unFocusIndex !== -1) {
-        $TitleBarMenu.children[unFocusIndex].ariaExpanded = "false";
-        $TitleBarMenu.children[unFocusIndex].removeAttribute("aria-owns");
-      }
-      if (index !== -1) {
-        state14.$TitleBarMenu.children[index].focus();
-      }
-      hide(false);
-      $TitleBarMenu.removeEventListener(
-        "mouseenter",
-        handleMouseEnter3,
-        {
-          capture: true
-        }
-      );
-    };
-    create28 = () => {
-      const $TitleBarMenu = document.createElement("ul");
-      $TitleBarMenu.id = "TitleBarMenu";
-      $TitleBarMenu.role = "menubar";
-      $TitleBarMenu.onkeydown = handleKeyDown3;
-      $TitleBarMenu.onmousedown = handleClick5;
-      $TitleBarMenu.addEventListener(
-        "focusout",
-        handleFocusOut2
-      );
-      return $TitleBarMenu;
-    };
-    setEntries = (state14, titleBarEntries) => {
-      const { $TitleBarMenu } = state14;
-      $TitleBarMenu.append(...titleBarEntries.map(create$TopLevelEntry));
-    };
-  }
-});
-
-// src/parts/ViewletTitleBar/ViewletTitleBarEvents.js
-var handleTitleBarButtonClickMinmize, handleTitleBarButtonClickToggleMaximize, handleTitleBarButtonClickClose, handleTitleBarButtonsClick;
-var init_ViewletTitleBarEvents = __esm({
-  "src/parts/ViewletTitleBar/ViewletTitleBarEvents.js"() {
-    "use strict";
-    init_RendererWorker();
-    handleTitleBarButtonClickMinmize = () => {
-      send("TitleBar.handleTitleBarButtonClickMinimize");
-    };
-    handleTitleBarButtonClickToggleMaximize = () => {
-      send("TitleBar.handleTitleBarButtonClickToggleMaximize");
-    };
-    handleTitleBarButtonClickClose = () => {
-      send("TitleBar.handleTitleBarButtonClickClose");
-    };
-    handleTitleBarButtonsClick = (event) => {
-      const { target } = event;
-      const { id } = target;
-      switch (id) {
-        case "TitleBarButtonMinimize":
-          handleTitleBarButtonClickMinmize();
-          break;
-        case "TitleBarButtonToggleMaximize":
-          handleTitleBarButtonClickToggleMaximize();
-          break;
-        case "TitleBarButtonClose":
-          handleTitleBarButtonClickClose();
-          break;
-        default:
-          break;
-      }
-    };
-  }
-});
-
-// src/parts/ViewletTitleBar/ViewletTitleBar.js
-var ViewletTitleBar_exports = {};
-__export(ViewletTitleBar_exports, {
-  create: () => create29,
-  dispose: () => dispose21,
-  focus: () => focus17,
-  menuClose: () => menuClose,
-  menuFocusIndex: () => menuFocusIndex,
-  menuGetEntryBounds: () => menuGetEntryBounds,
-  menuOpen: () => menuOpen,
-  menuSetEntries: () => menuSetEntries,
-  setButtons: () => setButtons
-});
-var create29, dispose21, focus17, menuSetEntries, menuFocusIndex, menuOpen, menuClose, menuGetEntryBounds, setButtons;
-var init_ViewletTitleBar = __esm({
-  "src/parts/ViewletTitleBar/ViewletTitleBar.js"() {
-    "use strict";
-    init_Layout();
-    init_TitleBarMenuBar();
-    init_ViewletTitleBarEvents();
-    create29 = () => {
-      const $TitleBarMenu = create28();
-      const $TitleBar = state9.$TitleBar;
-      $TitleBar.ariaLabel = "Title Bar";
-      $TitleBar.role = "contentinfo";
-      $TitleBar.append($TitleBarMenu);
-      return {
-        $TitleBar,
-        $TitleBarMenu
-      };
-    };
-    dispose21 = (state14) => {
-    };
-    focus17 = (state14) => {
-      state14.$TitleBarMenu.firstChild.focus();
-    };
-    menuSetEntries = setEntries;
-    menuFocusIndex = focusIndex2;
-    menuOpen = openMenu;
-    menuClose = closeMenu;
-    menuGetEntryBounds = getMenuEntryBounds;
-    setButtons = (state14, buttons) => {
-      const { $TitleBar } = state14;
-      if (buttons.length > 0) {
-        const $TitleBarButtons = document.createElement("div");
-        $TitleBarButtons.id = "TitleBarButtons";
-        for (const button of buttons) {
-          const $Icon = document.createElement("i");
-          $Icon.className = `MaskIcon${button.icon}`;
-          const $TitleBarButton = document.createElement("button");
-          $TitleBarButton.className = "TitleBarButton";
-          $TitleBarButton.id = `TitleBarButton${button.id}`;
-          $TitleBarButton.ariaLabel = button.label;
-          $TitleBarButton.append($Icon);
-          $TitleBarButtons.append($TitleBarButton);
-        }
-        $TitleBarButtons.onmousedown = handleTitleBarButtonsClick;
-        $TitleBar.append($TitleBarButtons);
-      }
-    };
-  }
-});
-
-// src/parts/Editor/EditorHelper.js
-var state10, setState;
-var init_EditorHelper = __esm({
-  "src/parts/Editor/EditorHelper.js"() {
-    "use strict";
-    state10 = {
-      editorStates: /* @__PURE__ */ Object.create(null)
-    };
-    setState = (id, editorState) => {
-      state10.editorStates[id] = editorState;
-    };
-  }
-});
-
-// src/parts/EditorTab/EditorTab.js
-var getFileName2, handleEditorTabsContextMenu, handleMouseDown6, create30, create$Tab, render$Tab, addOne;
-var init_EditorTab = __esm({
-  "src/parts/EditorTab/EditorTab.js"() {
-    "use strict";
-    init_RendererWorker();
-    init_MouseEventType();
-    getFileName2 = (uri) => {
-      return uri.slice(uri.lastIndexOf("/") + 1);
-    };
-    handleEditorTabsContextMenu = (event) => {
-      event.preventDefault();
-      const x = event.clientX;
-      const y = event.clientY;
-      send(
-        "Main.handleTabContextMenu",
-        x,
-        y
-      );
-    };
-    handleMouseDown6 = (event) => {
-      event.preventDefault();
-      const $Target = event.target;
-      console.log({ $Target });
-      switch (event.button) {
-        case LeftClick:
-          console.log("left click");
-          break;
-        case MiddleClick:
-          send("Main.closeFocusedEditor");
-          break;
-        default:
-          break;
-      }
-    };
-    create30 = () => {
-      const $EditorTabs = document.createElement("ul");
-      $EditorTabs.className = "EditorTabs";
-      $EditorTabs.oncontextmenu = handleEditorTabsContextMenu;
-      $EditorTabs.onmousedown = handleMouseDown6;
-      return $EditorTabs;
-    };
-    create$Tab = () => {
-      const $Tab = document.createElement("li");
-      $Tab.role = "tab";
-      $Tab.className = "EditorTab";
-      $Tab.ariaSelected = "true";
-      $Tab.tabIndex = 0;
-      $Tab.setAttribute("aria-description", "");
-      const $TabLabel = document.createElement("span");
-      return $Tab;
-    };
-    render$Tab = ($Tab, id, uri, languageId) => {
-      const fileName = getFileName2(uri);
-      $Tab.textContent = fileName;
-      $Tab.title = uri;
-      $Tab.dataset.languageId = languageId;
-      $Tab.dataset.fileName = fileName;
-    };
-    addOne = ($EditorTabs, id, uri, languageId) => {
-      const $EditorTab = create$Tab();
-      render$Tab($EditorTab, id, uri, languageId);
-      $EditorTabs.append($EditorTab);
-    };
-  }
-});
-
-// src/parts/EditorGroup/EditorGroup.js
-var create31, addOne2, replaceOne;
-var init_EditorGroup = __esm({
-  "src/parts/EditorGroup/EditorGroup.js"() {
-    "use strict";
-    init_Editor();
-    init_EditorHelper();
-    init_EditorTab();
-    init_Layout();
-    init_RendererWorker();
-    create31 = () => {
-      const $EditorTabs = create30();
-      const $Editors = document.createElement("div");
-      $Editors.className = "Editors";
-      state9.$Main.append($EditorTabs, $Editors);
-      return {
-        $EditorTabs,
-        $Editors
-      };
-    };
-    addOne2 = (state14, id, uri, languageId) => {
-      addOne(state14.$EditorTabs, id, uri, languageId);
-      const editorState = create19();
-      setState(id, editorState);
-      mount(editorState, state14.$Editors);
-      return editorState;
-    };
-    replaceOne = (state14, id, uri, languageId) => {
-      console.log("replace one");
-      addOne(state14.$EditorTabs, id, uri, languageId);
-    };
-  }
-});
-
-// src/parts/ViewletMain/ViewletMainEvents.js
-var handleDragOver2, handleDrop2, getNodeIndex7, getIndex3, handleTabCloseButtonMouseDown, handleTabMouseDown, handleTabsMouseDown, handleTabsContextMenu;
-var init_ViewletMainEvents = __esm({
-  "src/parts/ViewletMain/ViewletMainEvents.js"() {
-    "use strict";
-    init_EditorGroup();
-    init_Layout();
-    init_RendererWorker();
-    init_Viewlet();
-    init_MouseEventType();
-    handleDragOver2 = (event) => {
-      event.preventDefault();
-      state9.$Main.classList.add("DropTarget");
-    };
-    handleDrop2 = async (event) => {
-      console.log("[main] drop");
-      event.preventDefault();
-      state9.$Main.classList.remove("DropTarget");
-      send("Main.handleDrop");
-    };
-    getNodeIndex7 = ($Node) => {
-      let index = 0;
-      while ($Node = $Node.previousElementSibling) {
-        index++;
-      }
-      return index;
-    };
-    getIndex3 = ($Target) => {
-      switch ($Target.className) {
-        case "EditorTabCloseButton":
-          return getNodeIndex7($Target.parentNode);
-        case "MainTab":
-          return getNodeIndex7($Target);
-        default:
-          return -1;
-      }
-    };
-    handleTabCloseButtonMouseDown = (event, index) => {
-      send(
-        "Main.closeEditor",
+        "Main.closeEditor",
         index
       );
     };
@@ -8075,7 +7762,7 @@ var init_ViewletMainEvents = __esm({
     };
     handleTabsMouseDown = (event) => {
       const $Target = event.target;
-      const index = getIndex3($Target);
+      const index = getIndex2($Target);
       if (index === -1) {
         return;
       }
@@ -8093,7 +7780,7 @@ var init_ViewletMainEvents = __esm({
     };
     handleTabsContextMenu = (event) => {
       const $Target = event.target;
-      const index = getIndex3($Target);
+      const index = getIndex2($Target);
       if (index === -1) {
         return;
       }
@@ -8122,16 +7809,16 @@ __export(ViewletMain_exports, {
   closeTabsLeft: () => closeTabsLeft,
   closeTabsRight: () => closeTabsRight,
   closeViewletAndTab: () => closeViewletAndTab,
-  create: () => create32,
-  dispose: () => dispose22,
-  focus: () => focus18,
+  create: () => create31,
+  dispose: () => dispose21,
+  focus: () => focus17,
   focusAnotherTab: () => focusAnotherTab,
   openAnotherTab: () => openAnotherTab,
   openEditor: () => openEditor,
   openViewlet: () => openViewlet,
   replaceEditor: () => replaceEditor
 });
-var create$MainTabs, create32, dispose22, replaceEditor, addEditor, openEditor, closeAllViewlets, closeViewletAndTab, focus18, openViewlet, create$MainContent, appendViewlet3, openAnotherTab, closeOneTab, closeOneTabOnly, focusAnotherTab, closeOthers, closeTabsRight, closeTabsLeft;
+var create$MainTabs, create31, dispose21, replaceEditor, addEditor, openEditor, closeAllViewlets, closeViewletAndTab, focus17, openViewlet, create$MainContent, appendViewlet3, openAnotherTab, closeOneTab, closeOneTabOnly, focusAnotherTab, closeOthers, closeTabsRight, closeTabsLeft;
 var init_ViewletMain = __esm({
   "src/parts/ViewletMain/ViewletMain.js"() {
     "use strict";
@@ -8146,7 +7833,7 @@ var init_ViewletMain = __esm({
       $MainTabs.oncontextmenu = handleTabsContextMenu;
       return $MainTabs;
     };
-    create32 = () => {
+    create31 = () => {
       const $Main = state9.$Main;
       $Main.ondrop = handleDrop2;
       $Main.ondragover = handleDragOver2;
@@ -8157,7 +7844,7 @@ var init_ViewletMain = __esm({
         $MainTabs: void 0
       };
     };
-    dispose22 = (state14) => {
+    dispose21 = (state14) => {
       console.log(state14);
       state14.$MainContent.remove();
       state14.$MainContent = void 0;
@@ -8172,7 +7859,7 @@ var init_ViewletMain = __esm({
     };
     openEditor = async (state14, id, uri, languageId) => {
       console.log("open editor", id, uri, languageId);
-      state14.editorGroup = create31();
+      state14.editorGroup = create30();
       state14.activeEditorState = addOne2(
         state14.editorGroup,
         id,
@@ -8194,7 +7881,7 @@ var init_ViewletMain = __esm({
       state14.$MainTabs.remove();
       state14.$MainTabs = void 0;
     };
-    focus18 = () => {
+    focus17 = () => {
       console.log("todo focus main");
     };
     openViewlet = (state14, tabLabel, tabTitle, oldActiveIndex) => {
@@ -8251,18 +7938,18 @@ var init_ViewletMain = __esm({
       state14.$MainTabs.children[unFocusIndex].ariaSelected = "false";
       state14.$MainTabs.append($Tab);
     };
-    closeOneTab = (state14, closeIndex, focusIndex4) => {
+    closeOneTab = (state14, closeIndex, focusIndex2) => {
       state14.$MainTabs.children[closeIndex].remove();
-      state14.$MainTabs.children[focusIndex4].ariaSelected = "true";
+      state14.$MainTabs.children[focusIndex2].ariaSelected = "true";
     };
     closeOneTabOnly = (state14, closeIndex) => {
       state14.$MainTabs.children[closeIndex].remove();
     };
-    focusAnotherTab = (state14, unFocusIndex, focusIndex4) => {
+    focusAnotherTab = (state14, unFocusIndex, focusIndex2) => {
       state14.$MainTabs.children[unFocusIndex].ariaSelected = "false";
-      state14.$MainTabs.children[focusIndex4].ariaSelected = "true";
+      state14.$MainTabs.children[focusIndex2].ariaSelected = "true";
     };
-    closeOthers = (state14, keepIndex, focusIndex4) => {
+    closeOthers = (state14, keepIndex, focusIndex2) => {
       for (let i = state14.$MainTabs.children.length - 1; i >= 0; i--) {
         const $Tab = state14.$MainTabs.children[i];
         if (i === keepIndex) {
@@ -8294,44 +7981,30 @@ var init_ViewletMain = __esm({
   }
 });
 
-// src/parts/ViewletEditorCompletion/ViewletEditorCompletion.js
-var ViewletEditorCompletion_exports = {};
-__export(ViewletEditorCompletion_exports, {
-  create: () => create33,
-  dispose: () => dispose23,
-  focusIndex: () => focusIndex3,
-  handleError: () => handleError5,
-  move: () => move,
-  name: () => name14,
-  setItems: () => setItems3,
-  setPosition: () => setPosition2,
-  showLoading: () => showLoading
-});
-var name14, getNodeIndex8, getIndex4, handleMousedown3, create$CompletionItem, create33, setPosition2, setItems3, move, dispose23, focusIndex3, showLoading, handleError5;
-var init_ViewletEditorCompletion = __esm({
-  "src/parts/ViewletEditorCompletion/ViewletEditorCompletion.js"() {
+// src/parts/ViewletEditorCompletion/ViewletEditorCompletionEvents.js
+var getNodeIndex7, getIndex3, handleMousedown3, handleWheel6;
+var init_ViewletEditorCompletionEvents = __esm({
+  "src/parts/ViewletEditorCompletion/ViewletEditorCompletionEvents.js"() {
     "use strict";
-    init_Focus();
     init_RendererWorker();
-    init_Widget();
-    name14 = "EditorCompletion";
-    getNodeIndex8 = ($Node) => {
+    init_WheelEventType();
+    getNodeIndex7 = ($Node) => {
       let index = 0;
       while ($Node = $Node.previousElementSibling) {
         index++;
       }
       return index;
     };
-    getIndex4 = ($Target) => {
+    getIndex3 = ($Target) => {
       if ($Target.classList.contains("EditorCompletionItem")) {
-        return getNodeIndex8($Target);
+        return getNodeIndex7($Target);
       }
       return -1;
     };
     handleMousedown3 = (event) => {
       event.preventDefault();
       const $Target = event.target;
-      const index = getIndex4($Target);
+      const index = getIndex3($Target);
       if (index === -1) {
         return;
       }
@@ -8340,30 +8013,79 @@ var init_ViewletEditorCompletion = __esm({
         index
       );
     };
+    handleWheel6 = (event) => {
+      switch (event.deltaMode) {
+        case DomDeltaLine:
+          send(
+            "EditorCompletion.handleWheel",
+            event.deltaY
+          );
+          break;
+        case DomDeltaPixel:
+          send(
+            "EditorCompletion.handleWheel",
+            event.deltaY
+          );
+          break;
+        default:
+          break;
+      }
+    };
+  }
+});
+
+// src/parts/ViewletEditorCompletion/ViewletEditorCompletion.js
+var ViewletEditorCompletion_exports = {};
+__export(ViewletEditorCompletion_exports, {
+  create: () => create32,
+  dispose: () => dispose22,
+  handleError: () => handleError5,
+  name: () => name14,
+  setFocusedIndex: () => setFocusedIndex6,
+  setItems: () => setItems3,
+  showLoading: () => showLoading
+});
+var name14, create$CompletionItem, create32, setItems3, dispose22, setFocusedIndex6, showLoading, handleError5;
+var init_ViewletEditorCompletion = __esm({
+  "src/parts/ViewletEditorCompletion/ViewletEditorCompletion.js"() {
+    "use strict";
+    init_Focus();
+    init_Widget();
+    init_ViewletEditorCompletionEvents();
+    name14 = "EditorCompletion";
     create$CompletionItem = (item, index) => {
-      const $CompletionItem = document.createElement("li");
-      $CompletionItem.textContent = item.label;
+      const $CompletionItemText = document.createElement("div");
+      $CompletionItemText.className = "Label";
+      $CompletionItemText.textContent = item.label;
+      const $Icon = document.createElement("div");
+      $Icon.className = "ColoredMaskIcon";
+      $Icon.style.webkitMaskImage = `url('${item.icon}')`;
+      const $CompletionItem = document.createElement("div");
       $CompletionItem.role = "option";
       $CompletionItem.id = `CompletionItem-${index}`;
-      $CompletionItem.className = `EditorCompletionItem Icon${item.icon}`;
+      $CompletionItem.className = `EditorCompletionItem`;
+      $CompletionItem.append($Icon, $CompletionItemText);
       return $CompletionItem;
     };
-    create33 = () => {
-      const $Viewlet = document.createElement("ul");
-      $Viewlet.className = "Viewlet Completions";
+    create32 = () => {
+      const $Viewlet = document.createElement("div");
+      $Viewlet.className = "Viewlet";
       $Viewlet.dataset.viewletId = name14;
       $Viewlet.id = "Completions";
       $Viewlet.role = "listbox";
       $Viewlet.ariaLabel = "Suggest";
       $Viewlet.onmousedown = handleMousedown3;
+      $Viewlet.addEventListener(
+        "wheel",
+        handleWheel6,
+        {
+          passive: true
+        }
+      );
       return {
         $Viewlet
       };
     };
-    setPosition2 = (state14, x, y) => {
-      const { $Viewlet } = state14;
-      $Viewlet.style.transform = `translate(${x}px, ${y}px)`;
-    };
     setItems3 = (state14, items, reason, focusedIndex) => {
       console.log("COMPLETION SHOW", items);
       const { $Viewlet } = state14;
@@ -8378,17 +8100,13 @@ var init_ViewletEditorCompletion = __esm({
       }
       $Viewlet.replaceChildren(...items.map(create$CompletionItem));
       append($Viewlet);
-      focusIndex3(state14, 0, 0);
-    };
-    move = (state14, x, y) => {
-      const { $Viewlet } = state14;
-      $Viewlet.style.transform = `translate(${x}px, ${y}px)`;
+      setFocusedIndex6(state14, 0, 0);
     };
-    dispose23 = (state14) => {
+    dispose22 = (state14) => {
       remove(state14.$Viewlet);
       removeAdditionalFocus("editorCompletions");
     };
-    focusIndex3 = (state14, oldIndex, newIndex) => {
+    setFocusedIndex6 = (state14, oldIndex, newIndex) => {
       const $Viewlet = state14.$Viewlet;
       if (oldIndex !== -1) {
         const $OldItem = $Viewlet.children[oldIndex];
@@ -8417,14 +8135,14 @@ var init_ViewletEditorCompletion = __esm({
 });
 
 // src/parts/ViewletLocations/ViewletLocations.js
-var getNodeIndex9, handleLocationsMouseDown, create34, create$Location, render$Location, render$Locations, setLocations, setMessage3, setFocusedIndex6, handleError6, focus19;
+var getNodeIndex8, handleLocationsMouseDown, create33, create$Location, render$Location, render$Locations, setLocations, setMessage3, setFocusedIndex7, handleError6, focus18;
 var init_ViewletLocations = __esm({
   "src/parts/ViewletLocations/ViewletLocations.js"() {
     "use strict";
     init_RendererWorker();
     init_Focus();
     init_MouseEventType();
-    getNodeIndex9 = ($Node) => {
+    getNodeIndex8 = ($Node) => {
       let index = 0;
       while ($Node = $Node.previousElementSibling) {
         index++;
@@ -8437,7 +8155,7 @@ var init_ViewletLocations = __esm({
       }
       const $Target = event.target;
       if ($Target.classList.contains("TreeItem")) {
-        const index = getNodeIndex9($Target);
+        const index = getNodeIndex8($Target);
         send(
           "Locations.selectIndex",
           index
@@ -8449,7 +8167,7 @@ var init_ViewletLocations = __esm({
         );
       }
     };
-    create34 = () => {
+    create33 = () => {
       const $Message = document.createElement("div");
       $Message.className = "LocationsMessage";
       $Message.id = "LocationsMessage";
@@ -8518,7 +8236,7 @@ var init_ViewletLocations = __esm({
       const { $Message } = state14;
       $Message.textContent = message;
     };
-    setFocusedIndex6 = (state14, oldFocusedIndex, newFocusedIndex) => {
+    setFocusedIndex7 = (state14, oldFocusedIndex, newFocusedIndex) => {
       const { $Locations } = state14;
       if (oldFocusedIndex === -1) {
         $Locations.classList.remove("FocusOutline");
@@ -8539,7 +8257,7 @@ var init_ViewletLocations = __esm({
       const { $Message } = state14;
       $Message.textContent = message;
     };
-    focus19 = (state14) => {
+    focus18 = (state14) => {
       const { $Locations } = state14;
       $Locations.classList.add("FocusOutline");
       $Locations.focus();
@@ -8551,11 +8269,11 @@ var init_ViewletLocations = __esm({
 // src/parts/ViewletReferences/ViewletReferences.js
 var ViewletReferences_exports = {};
 __export(ViewletReferences_exports, {
-  create: () => create34,
-  focus: () => focus19,
+  create: () => create33,
+  focus: () => focus18,
   handleError: () => handleError6,
   name: () => name15,
-  setFocusedIndex: () => setFocusedIndex6,
+  setFocusedIndex: () => setFocusedIndex7,
   setLocations: () => setLocations,
   setMessage: () => setMessage3
 });
@@ -8571,11 +8289,11 @@ var init_ViewletReferences = __esm({
 // src/parts/ViewletImplementations/ViewletImplementations.js
 var ViewletImplementations_exports = {};
 __export(ViewletImplementations_exports, {
-  create: () => create34,
-  focus: () => focus19,
+  create: () => create33,
+  focus: () => focus18,
   handleError: () => handleError6,
   name: () => name16,
-  setFocusedIndex: () => setFocusedIndex6,
+  setFocusedIndex: () => setFocusedIndex7,
   setLocations: () => setLocations,
   setMessage: () => setMessage3
 });
@@ -8591,18 +8309,18 @@ var init_ViewletImplementations = __esm({
 // src/parts/ViewletEditorPlainText/ViewletEditorPlainText.js
 var ViewletEditorPlainText_exports = {};
 __export(ViewletEditorPlainText_exports, {
-  create: () => create35,
-  dispose: () => dispose24,
+  create: () => create34,
+  dispose: () => dispose23,
   name: () => name17,
   refresh: () => refresh7
 });
-var name17, create35, dispose24, refresh7;
+var name17, create34, dispose23, refresh7;
 var init_ViewletEditorPlainText = __esm({
   "src/parts/ViewletEditorPlainText/ViewletEditorPlainText.js"() {
     "use strict";
     init_Assert();
     name17 = "EditorPlainText";
-    create35 = () => {
+    create34 = () => {
       const $Viewlet = document.createElement("div");
       $Viewlet.className = "Viewlet";
       $Viewlet.dataset.viewletId = "EditorText";
@@ -8611,7 +8329,7 @@ var init_ViewletEditorPlainText = __esm({
         $Viewlet
       };
     };
-    dispose24 = (state14) => {
+    dispose23 = (state14) => {
     };
     refresh7 = (state14, context) => {
       object(state14);
@@ -8622,7 +8340,7 @@ var init_ViewletEditorPlainText = __esm({
 });
 
 // src/parts/ViewletKeyBindings/ViewletKeyBindingsEvents.js
-var handleInput5, handleWheel6;
+var handleInput5, handleWheel7;
 var init_ViewletKeyBindingsEvents = __esm({
   "src/parts/ViewletKeyBindings/ViewletKeyBindingsEvents.js"() {
     "use strict";
@@ -8633,7 +8351,7 @@ var init_ViewletKeyBindingsEvents = __esm({
       const value = $Target.value;
       send("KeyBindings.handleInput", value);
     };
-    handleWheel6 = (event) => {
+    handleWheel7 = (event) => {
       const { deltaMode, deltaY } = event;
       switch (deltaMode) {
         case DomDeltaLine:
@@ -8792,12 +8510,12 @@ var init_VirtualDom = __esm({
 // src/parts/ViewletKeyBindings/ViewletKeyBindings.js
 var ViewletKeyBindings_exports = {};
 __export(ViewletKeyBindings_exports, {
-  create: () => create36,
+  create: () => create35,
   name: () => name18,
   setTableDom: () => setTableDom,
   setValue: () => setValue3
 });
-var name18, create36, setTableDom, setValue3;
+var name18, create35, setTableDom, setValue3;
 var init_ViewletKeyBindings = __esm({
   "src/parts/ViewletKeyBindings/ViewletKeyBindings.js"() {
     "use strict";
@@ -8805,10 +8523,11 @@ var init_ViewletKeyBindings = __esm({
     init_ViewletKeyBindingsEvents();
     init_VirtualDom();
     name18 = "KeyBindings";
-    create36 = () => {
+    create35 = () => {
       const $InputBox = create3();
       $InputBox.type = "search";
       $InputBox.placeholder = "Search Key Bindings";
+      $InputBox.ariaDescription = "Results will update as you type";
       $InputBox.oninput = handleInput5;
       const $KeyBindingsHeader = document.createElement("div");
       $KeyBindingsHeader.className = "KeyBindingsHeader";
@@ -8817,7 +8536,7 @@ var init_ViewletKeyBindings = __esm({
       $KeyBindingsTableWrapper.className = "KeyBindingsTableWrapper";
       $KeyBindingsTableWrapper.addEventListener(
         "wheel",
-        handleWheel6,
+        handleWheel7,
         { passive: true }
       );
       const $Viewlet = document.createElement("div");
@@ -8844,7 +8563,7 @@ var init_ViewletKeyBindings = __esm({
 });
 
 // src/parts/ViewletEditorFindWidget/ViewletEditorFindWidgetEvents.js
-var handleInput6, handleClickClose, handleClickPreviousMatch, handleClickNextMatch, handleClick6;
+var handleInput6, handleClickClose, handleClickPreviousMatch, handleClickNextMatch, handleClick4;
 var init_ViewletEditorFindWidgetEvents = __esm({
   "src/parts/ViewletEditorFindWidget/ViewletEditorFindWidgetEvents.js"() {
     "use strict";
@@ -8866,7 +8585,7 @@ var init_ViewletEditorFindWidgetEvents = __esm({
       event.preventDefault();
       send("EditorFindWidget.focusNext");
     };
-    handleClick6 = (event) => {
+    handleClick4 = (event) => {
       const { target } = event;
       const { title } = target;
       switch (title) {
@@ -8889,14 +8608,14 @@ var init_ViewletEditorFindWidgetEvents = __esm({
 // src/parts/ViewletEditorFindWidget/ViewletEditorFindWidget.js
 var ViewletEditorFindWidget_exports = {};
 __export(ViewletEditorFindWidget_exports, {
-  create: () => create37,
-  dispose: () => dispose25,
-  focus: () => focus20,
+  create: () => create36,
+  dispose: () => dispose24,
+  focus: () => focus19,
   name: () => name19,
   setMatchCountText: () => setMatchCountText,
   setValue: () => setValue4
 });
-var name19, UiStrings, Icons, create$Button, create37, focus20, setValue4, setMatchCountText, dispose25;
+var name19, UiStrings, Icons, create$Button, create36, focus19, setValue4, setMatchCountText, dispose24;
 var init_ViewletEditorFindWidget = __esm({
   "src/parts/ViewletEditorFindWidget/ViewletEditorFindWidget.js"() {
     "use strict";
@@ -8928,7 +8647,7 @@ var init_ViewletEditorFindWidget = __esm({
       $Button.append($Icon);
       return $Button;
     };
-    create37 = () => {
+    create36 = () => {
       const $InputBox = create3();
       $InputBox.oninput = handleInput6;
       $InputBox.ariaLabel = "Find";
@@ -8943,7 +8662,7 @@ var init_ViewletEditorFindWidget = __esm({
       );
       const $ButtonClose = create$Button(UiStrings.Close, Icons.Close);
       const $Viewlet = document.createElement("div");
-      $Viewlet.onclick = handleClick6;
+      $Viewlet.onclick = handleClick4;
       $Viewlet.className = "Viewlet";
       $Viewlet.dataset.viewletId = "EditorFindWidget";
       $Viewlet.append(
@@ -8963,7 +8682,7 @@ var init_ViewletEditorFindWidget = __esm({
         $ButtonFocusPrevious
       };
     };
-    focus20 = (state14) => {
+    focus19 = (state14) => {
       const { $InputBox } = state14;
       $InputBox.focus();
       setFocus("EditorFindWidget");
@@ -8976,7 +8695,7 @@ var init_ViewletEditorFindWidget = __esm({
       const { $MatchCountText } = state14;
       $MatchCountText.nodeValue = value;
     };
-    dispose25 = () => {
+    dispose24 = () => {
     };
   }
 });
@@ -8996,19 +8715,19 @@ var init_ViewletExtensionDetailEvents = __esm({
 // src/parts/ViewletExtensionDetail/ViewletExtensionDetail.js
 var ViewletExtensionDetail_exports = {};
 __export(ViewletExtensionDetail_exports, {
-  create: () => create38,
+  create: () => create37,
   name: () => name20,
   setIconSrc: () => setIconSrc,
   setName: () => setName,
   setReadmeHtml: () => setReadmeHtml
 });
-var name20, create38, setName, setReadmeHtml, setIconSrc;
+var name20, create37, setName, setReadmeHtml, setIconSrc;
 var init_ViewletExtensionDetail = __esm({
   "src/parts/ViewletExtensionDetail/ViewletExtensionDetail.js"() {
     "use strict";
     init_ViewletExtensionDetailEvents();
     name20 = "ExtensionDetail";
-    create38 = () => {
+    create37 = () => {
       const $NameText = document.createTextNode("");
       const $Name = document.createElement("h3");
       $Name.className = "ExtensionDetailName";
@@ -9039,9 +8758,9 @@ var init_ViewletExtensionDetail = __esm({
         $ExtensionDetailIcon
       };
     };
-    setName = (state14, name21) => {
+    setName = (state14, name22) => {
       const { $NameText } = state14;
-      $NameText.nodeValue = name21;
+      $NameText.nodeValue = name22;
     };
     setReadmeHtml = (state14, sanitizedHtml) => {
       const { $ReadmeHtml } = state14;
@@ -9054,6 +8773,431 @@ var init_ViewletExtensionDetail = __esm({
   }
 });
 
+// src/parts/ViewletTitleBarButtons/ViewletTitleBarButtonsEvents.js
+var handleClickMinmize, handleClickToggleMaximize, handleClickClose2, handleTitleBarButtonsClick;
+var init_ViewletTitleBarButtonsEvents = __esm({
+  "src/parts/ViewletTitleBarButtons/ViewletTitleBarButtonsEvents.js"() {
+    "use strict";
+    init_RendererWorker();
+    handleClickMinmize = () => {
+      send("TitleBarButtons.handleClickMinimize");
+    };
+    handleClickToggleMaximize = () => {
+      send("TitleBarButtons.handleClickToggleMaximize");
+    };
+    handleClickClose2 = () => {
+      send("TitleBarButtons.handleClickClose");
+    };
+    handleTitleBarButtonsClick = (event) => {
+      const { target } = event;
+      const { id } = target;
+      switch (id) {
+        case "TitleBarButtonMinimize":
+          handleClickMinmize();
+          break;
+        case "TitleBarButtonToggleMaximize":
+          handleClickToggleMaximize();
+          break;
+        case "TitleBarButtonClose":
+          handleClickClose2();
+          break;
+        default:
+          break;
+      }
+    };
+  }
+});
+
+// src/parts/ViewletTitleBarButtons/ViewletTitleBarButtons.js
+var ViewletTitleBarButtons_exports = {};
+__export(ViewletTitleBarButtons_exports, {
+  create: () => create38,
+  dispose: () => dispose25,
+  name: () => name21,
+  setButtons: () => setButtons
+});
+var name21, create$TitleBarButton, create38, dispose25, setButtons;
+var init_ViewletTitleBarButtons = __esm({
+  "src/parts/ViewletTitleBarButtons/ViewletTitleBarButtons.js"() {
+    "use strict";
+    init_ViewletTitleBarButtonsEvents();
+    name21 = "TitleBarButtons";
+    create$TitleBarButton = (id, icon, label) => {
+      const $Icon = document.createElement("i");
+      $Icon.className = `MaskIcon${icon}`;
+      const $TitleBarButton = document.createElement("button");
+      $TitleBarButton.className = "TitleBarButton";
+      $TitleBarButton.id = `TitleBarButton${id}`;
+      $TitleBarButton.ariaLabel = label;
+      $TitleBarButton.append($Icon);
+      return $TitleBarButton;
+    };
+    create38 = () => {
+      const $ButtonMinimize = create$TitleBarButton(
+        "Minimize",
+        "Minimize",
+        "Minimize"
+      );
+      const $ButtonToggleMaximize = create$TitleBarButton(
+        "ToggleMaximize",
+        "ToggleMaximize",
+        "Toggle Maximize"
+      );
+      const $ButtonClose = create$TitleBarButton("Close", "Close", "Close");
+      const $TitleBarButtons = document.createElement("div");
+      $TitleBarButtons.id = "TitleBarButtons";
+      $TitleBarButtons.onmousedown = handleTitleBarButtonsClick;
+      $TitleBarButtons.append($ButtonMinimize, $ButtonToggleMaximize, $ButtonClose);
+      return {
+        $TitleBarButtons,
+        $Viewlet: $TitleBarButtons
+      };
+    };
+    dispose25 = (state14) => {
+    };
+    setButtons = (state14, buttons) => {
+      const { $TitleBarButtons } = state14;
+      for (const button of buttons) {
+        const $Icon = document.createElement("i");
+        $Icon.className = `MaskIcon${button.icon}`;
+        const $TitleBarButton = document.createElement("button");
+        $TitleBarButton.className = "TitleBarButton";
+        $TitleBarButton.id = `TitleBarButton${button.id}`;
+        $TitleBarButton.ariaLabel = button.label;
+        $TitleBarButton.append($Icon);
+        $TitleBarButtons.append($TitleBarButton);
+      }
+    };
+  }
+});
+
+// src/parts/ViewletTitleBarMenuBar/ViewletTitleBarMenuBarEvents.js
+var isInsideTitleBarMenu, handleFocusOut2, handleMouseOver, getNodeIndex9, getIndex4, handleClick5, getLevelAndIndex, handleMenuMouseOver, handleMenuMouseDown, handleFocus6;
+var init_ViewletTitleBarMenuBarEvents = __esm({
+  "src/parts/ViewletTitleBarMenuBar/ViewletTitleBarMenuBarEvents.js"() {
+    "use strict";
+    init_RendererWorker();
+    init_MouseEventType();
+    init_Focus();
+    init_findIndex();
+    isInsideTitleBarMenu = ($Element) => {
+      return $Element.classList.contains("MenuItem") || $Element.classList.contains("Menu") || $Element.classList.contains("TitleBarTopLevelEntry");
+    };
+    handleFocusOut2 = (event) => {
+      const $ActiveElement = event.relatedTarget;
+      if ($ActiveElement && isInsideTitleBarMenu($ActiveElement)) {
+        return;
+      }
+      send(
+        "TitleBarMenuBar.closeMenu",
+        false
+      );
+    };
+    handleMouseOver = (event) => {
+      const { target, clientX, clientY } = event;
+      const index = getIndex4(target);
+      if (index === -1) {
+        return;
+      }
+      send(
+        "TitleBarMenuBar.handleMouseOver",
+        index,
+        clientX,
+        clientY
+      );
+    };
+    getNodeIndex9 = ($Node) => {
+      let index = 0;
+      while ($Node = $Node.previousElementSibling) {
+        index++;
+      }
+      return index;
+    };
+    getIndex4 = ($Target) => {
+      switch ($Target.className) {
+        case "TitleBarTopLevelEntry":
+          return getNodeIndex9($Target);
+        default:
+          return -1;
+      }
+    };
+    handleClick5 = (event) => {
+      const { button, target } = event;
+      if (button !== LeftClick) {
+        return;
+      }
+      const index = getIndex4(target);
+      if (index === -1) {
+        return;
+      }
+      send(
+        "TitleBarMenuBar.toggleIndex",
+        index
+      );
+    };
+    getLevelAndIndex = (event) => {
+      const { target } = event;
+      const $Menu = target.closest(".Menu");
+      const index = findIndex2($Menu, target);
+      const { id } = $Menu;
+      const level = parseInt(id.slice(5));
+      return {
+        level,
+        index
+      };
+    };
+    handleMenuMouseOver = (event) => {
+      const { level, index } = getLevelAndIndex(event);
+      send(
+        "TitleBarMenuBar.handleMenuMouseOver",
+        level,
+        index
+      );
+    };
+    handleMenuMouseDown = (event) => {
+      const { level, index } = getLevelAndIndex(event);
+      send(
+        "TitleBarMenuBar.handleMenuMouseDown",
+        level,
+        index
+      );
+    };
+    handleFocus6 = () => {
+      setFocus("TitleBarMenuBar");
+    };
+  }
+});
+
+// src/parts/ViewletTitleBarMenuBar/ViewletTitleBarMenuBar.js
+var ViewletTitleBarMenuBar_exports = {};
+__export(ViewletTitleBarMenuBar_exports, {
+  closeMenu: () => closeMenu,
+  create: () => create39,
+  dispose: () => dispose26,
+  focus: () => focus20,
+  getMenuEntryBounds: () => getMenuEntryBounds,
+  openMenu: () => openMenu,
+  setEntries: () => setEntries,
+  setFocusedIndex: () => setFocusedIndex8,
+  setMenus: () => setMenus
+});
+var activeId4, create39, dispose26, focus20, create$TopLevelEntry, getMenuEntryBounds, setFocusedIndex8, openMenu, closeMenu, setEntries, create$Menu2, setMenus;
+var init_ViewletTitleBarMenuBar = __esm({
+  "src/parts/ViewletTitleBarMenuBar/ViewletTitleBarMenuBar.js"() {
+    "use strict";
+    init_Assert();
+    init_ViewletTitleBarMenuBarEvents();
+    init_Menu();
+    init_Widget();
+    init_MenuItem();
+    activeId4 = "TitleBarEntryActive";
+    create39 = () => {
+      const $TitleBarMenuBar = document.createElement("div");
+      $TitleBarMenuBar.id = "TitleBarMenuBar";
+      $TitleBarMenuBar.role = "menubar";
+      $TitleBarMenuBar.tabIndex = 0;
+      $TitleBarMenuBar.onmousedown = handleClick5;
+      $TitleBarMenuBar.addEventListener(
+        "focusout",
+        handleFocusOut2
+      );
+      $TitleBarMenuBar.addEventListener(
+        "focusin",
+        handleFocus6
+      );
+      $TitleBarMenuBar.onmouseover = handleMouseOver;
+      return {
+        $Viewlet: $TitleBarMenuBar,
+        $TitleBarMenuBar,
+        $$Menus: []
+      };
+    };
+    dispose26 = (state14) => {
+    };
+    focus20 = (state14) => {
+      const { $TitleBarMenuBar } = state14;
+      $TitleBarMenuBar.firstChild.focus();
+    };
+    create$TopLevelEntry = (item) => {
+      const $TitleBarTopLevelEntry = document.createElement("div");
+      $TitleBarTopLevelEntry.className = "TitleBarTopLevelEntry";
+      $TitleBarTopLevelEntry.ariaHasPopup = "true";
+      $TitleBarTopLevelEntry.ariaExpanded = "false";
+      $TitleBarTopLevelEntry.role = "menuitem";
+      if (item.keyboardShortCut) {
+        $TitleBarTopLevelEntry.ariaKeyShortcuts = item.keyboardShortCut;
+      }
+      $TitleBarTopLevelEntry.textContent = item.name;
+      return $TitleBarTopLevelEntry;
+    };
+    getMenuEntryBounds = (state14, index) => {
+      const { $TitleBarMenuBar } = state14;
+      const $MenuEntry = $TitleBarMenuBar.children[index];
+      const rect = $MenuEntry.getBoundingClientRect();
+      return {
+        left: rect.left,
+        bottom: rect.bottom
+      };
+    };
+    setFocusedIndex8 = (state14, unFocusIndex, focusIndex2, oldIsMenuOpen, newIsMenuOpen) => {
+      object(state14);
+      number(unFocusIndex);
+      number(focusIndex2);
+      const { $TitleBarMenuBar } = state14;
+      if (unFocusIndex !== -1) {
+        const $Child = $TitleBarMenuBar.children[unFocusIndex];
+        $Child.ariaExpanded = "false";
+        $Child.removeAttribute("aria-owns");
+        $Child.removeAttribute("id");
+      }
+      if (focusIndex2 !== -1) {
+        const $Child = $TitleBarMenuBar.children[focusIndex2];
+        $Child.id = activeId4;
+        $TitleBarMenuBar.focus();
+        $TitleBarMenuBar.setAttribute("aria-activedescendant", activeId4);
+        if (newIsMenuOpen) {
+          $Child.setAttribute("aria-owns", "Menu-0");
+          $Child.ariaExpanded = "true";
+        }
+      }
+    };
+    openMenu = (state14, unFocusIndex, index, level, menuItems, menuFocusedIndex, focus22, x, y, width, height) => {
+      object(state14);
+      number(unFocusIndex);
+      number(index);
+      number(level);
+      array(menuItems);
+      number(menuFocusedIndex);
+      boolean(focus22);
+      number(x);
+      number(y);
+      number(width);
+      number(height);
+      const { $TitleBarMenuBar } = state14;
+      $TitleBarMenuBar.addEventListener(
+        "mouseenter",
+        handleMouseOver,
+        {
+          capture: true
+        }
+      );
+      if (unFocusIndex !== -1) {
+        $TitleBarMenuBar.children[unFocusIndex].ariaExpanded = "false";
+        $TitleBarMenuBar.children[unFocusIndex].removeAttribute("aria-owns");
+      }
+      $TitleBarMenuBar.children[index].ariaExpanded = "true";
+      const $$Menus = state8.$$Menus;
+      state8.$$Menus = [];
+      showControlled({
+        x,
+        y,
+        width,
+        height,
+        items: menuItems,
+        handleFocusOut: handleFocusOut2,
+        $Parent: $TitleBarMenuBar.children[index],
+        level
+      });
+      if (menuFocusedIndex !== -1) {
+        focusIndex(0, -1, menuFocusedIndex);
+      }
+      for (const $Menu of $$Menus) {
+        remove($Menu);
+      }
+    };
+    closeMenu = (state14, unFocusIndex, index) => {
+      const { $TitleBarMenuBar } = state14;
+      if (unFocusIndex !== -1) {
+        $TitleBarMenuBar.children[unFocusIndex].ariaExpanded = "false";
+        $TitleBarMenuBar.children[unFocusIndex].removeAttribute("aria-owns");
+      }
+      if (index !== -1) {
+        $TitleBarMenuBar.children[index].focus();
+      }
+      hide(false);
+      $TitleBarMenuBar.removeEventListener(
+        "mouseenter",
+        handleMouseOver,
+        {
+          capture: true
+        }
+      );
+    };
+    setEntries = (state14, titleBarEntries) => {
+      const { $TitleBarMenuBar } = state14;
+      $TitleBarMenuBar.append(...titleBarEntries.map(create$TopLevelEntry));
+    };
+    create$Menu2 = () => {
+      const $Menu = document.createElement("div");
+      $Menu.className = "Menu";
+      $Menu.role = "menu";
+      $Menu.tabIndex = -1;
+      return $Menu;
+    };
+    setMenus = (state14, changes) => {
+      const { $$Menus } = state14;
+      for (const change of changes) {
+        const type2 = change[0];
+        if (type2 === "addMenu") {
+          const menu = change[1];
+          const $Menu = create$Menu2();
+          $Menu.onmouseover = handleMenuMouseOver;
+          $Menu.onmousedown = handleMenuMouseDown;
+          const { top, left, width, height, level, focusedIndex } = menu;
+          $Menu.style.width = `${width}px`;
+          $Menu.style.height = `${height}px`;
+          $Menu.style.top = `${top}px`;
+          $Menu.style.left = `${left}px`;
+          $Menu.append(...menu.items.map(create$MenuItem));
+          $Menu.id = `Menu-${level}`;
+          append($Menu);
+          if (focusedIndex !== -1) {
+            const $Child = $Menu.children[focusedIndex];
+            $Child.classList.add("Focused");
+            $Child.focus();
+          }
+          $$Menus.push($Menu);
+        } else if (type2 === "updateMenu") {
+          const menu = change[1];
+          const newLength = change[2];
+          const replaceItems = change[3];
+          const { level, top, left, width, height, focusedIndex, items, expanded } = menu;
+          const $Menu = $$Menus[level];
+          $Menu.style.width = `${width}px`;
+          $Menu.style.height = `${height}px`;
+          $Menu.style.top = `${top}px`;
+          $Menu.style.left = `${left}px`;
+          const $$Children = items.map(create$MenuItem);
+          if (focusedIndex !== -1) {
+            const $Child = $$Children[focusedIndex];
+            $Child.classList.add("Focused");
+            if (expanded) {
+              $Child.ariaExpanded = true;
+              $Child.setAttribute("aria-owns", `Menu-${level + 1}`);
+            }
+          }
+          $Menu.replaceChildren(...$$Children);
+          if (level === newLength - 1) {
+            if (focusedIndex === -1) {
+              $Menu.focus();
+            } else {
+              const $Child = $Menu.children[focusedIndex];
+              $Child.focus();
+            }
+          }
+        } else if (type2 === "closeMenus") {
+          const keepCount = change[1];
+          const $$ToDispose = $$Menus.slice(keepCount);
+          for (const $ToDispose of $$ToDispose) {
+            remove($ToDispose);
+          }
+          $$Menus.length = keepCount;
+        }
+      }
+    };
+  }
+});
+
 // src/parts/ViewletModule/ViewletModule.js
 var load;
 var init_ViewletModule = __esm({
@@ -9118,6 +9262,10 @@ var init_ViewletModule = __esm({
           return Promise.resolve().then(() => (init_ViewletEditorFindWidget(), ViewletEditorFindWidget_exports));
         case ExtensionDetail:
           return Promise.resolve().then(() => (init_ViewletExtensionDetail(), ViewletExtensionDetail_exports));
+        case TitleBarButtons:
+          return Promise.resolve().then(() => (init_ViewletTitleBarButtons(), ViewletTitleBarButtons_exports));
+        case TitleBarMenuBar:
+          return Promise.resolve().then(() => (init_ViewletTitleBarMenuBar(), ViewletTitleBarMenuBar_exports));
         default:
           throw new Error("unknown module");
       }
@@ -9126,7 +9274,7 @@ var init_ViewletModule = __esm({
 });
 
 // src/parts/Viewlet/Viewlet.js
-var state11, load2, create39, loadModule, invoke, focus21, refresh8, sendMultiple, dispose26, handleError7, appendViewlet4, ariaAnnounce, executeCommands, show, setBounds;
+var state11, load2, create40, loadModule, invoke, focus21, refresh8, sendMultiple, dispose27, handleError7, appendViewlet4, ariaAnnounce, append3, executeCommands, show, setBounds;
 var init_Viewlet = __esm({
   "src/parts/Viewlet/Viewlet.js"() {
     "use strict";
@@ -9146,7 +9294,7 @@ var init_Viewlet = __esm({
         factory: module
       };
     };
-    create39 = (id) => {
+    create40 = (id) => {
       const module = state11.modules[id];
       state11.instances[id] = {
         state: module.create(),
@@ -9190,12 +9338,18 @@ var init_Viewlet = __esm({
         const [_, viewletId, method, ...args] = command;
         if (_ === "Viewlet.ariaAnnounce") {
           ariaAnnounce(viewletId);
+        } else if (_ === "Viewlet.setBounds") {
+          setBounds(viewletId, method, ...args);
+        } else if (_ === "Viewlet.create") {
+          create40(viewletId);
+        } else if (_ === "Viewlet.append") {
+          append3(viewletId, method);
         } else {
           invoke(viewletId, method, ...args);
         }
       }
     };
-    dispose26 = (id) => {
+    dispose27 = (id) => {
       string(id);
       const instance = state11.instances[id];
       if (!instance) {
@@ -9252,11 +9406,18 @@ var init_Viewlet = __esm({
       const AriaAlert = await Promise.resolve().then(() => (init_AriaAlert(), AriaAlert_exports));
       AriaAlert.alert(message);
     };
+    append3 = (parentId, childId) => {
+      const parentInstance = state11.instances[parentId];
+      const $Parent = parentInstance.state.$Viewlet;
+      const childInstance = state11.instances[childId];
+      const $Child = childInstance.state.$Viewlet;
+      $Parent.append($Child);
+    };
     executeCommands = (commands) => {
       for (const [command, ...args] of commands) {
         switch (command) {
           case "Viewlet.create":
-            create39(...args);
+            create40(...args);
             break;
           case "Viewlet.send":
             invoke(...args);
@@ -9265,7 +9426,7 @@ var init_Viewlet = __esm({
             show(...args);
             break;
           case "Viewlet.dispose":
-            dispose26(...args);
+            dispose27(...args);
             break;
           case "Viewlet.setBounds":
             setBounds(...args);
@@ -9273,6 +9434,9 @@ var init_Viewlet = __esm({
           case "Viewlet.ariaAnnounce":
             ariaAnnounce(...args);
             break;
+          case "Viewlet.append":
+            append3(...args);
+            break;
           default:
             throw new Error(`unknown command ${command}`);
         }
@@ -9310,7 +9474,7 @@ var init_Viewlet_ipc = __esm({
     init_Viewlet();
     Commands26 = {
       "Viewlet.appendViewlet": appendViewlet4,
-      "Viewlet.dispose": dispose26,
+      "Viewlet.dispose": dispose27,
       "Viewlet.executeCommands": executeCommands,
       "Viewlet.focus": focus21,
       "Viewlet.handleError": handleError7,
@@ -9565,7 +9729,7 @@ function addToSet(set2, array2, transformCaseFunc) {
   return set2;
 }
 function clone(object2) {
-  var newObject = create40(null);
+  var newObject = create41(null);
   var property;
   for (property in object2) {
     if (apply(hasOwnProperty, object2, [property])) {
@@ -9863,10 +10027,10 @@ function createDOMPurify() {
       }
     }
   };
-  var _removeAttribute = function _removeAttribute2(name21, node) {
+  var _removeAttribute = function _removeAttribute2(name22, node) {
     try {
       arrayPush(DOMPurify.removed, {
-        attribute: node.getAttributeNode(name21),
+        attribute: node.getAttributeNode(name22),
         from: node
       });
     } catch (_) {
@@ -9875,8 +10039,8 @@ function createDOMPurify() {
         from: node
       });
     }
-    node.removeAttribute(name21);
-    if (name21 === "is" && !ALLOWED_ATTR[name21]) {
+    node.removeAttribute(name22);
+    if (name22 === "is" && !ALLOWED_ATTR[name22]) {
       if (RETURN_DOM || RETURN_DOM_FRAGMENT) {
         try {
           _forceRemove(node);
@@ -9884,7 +10048,7 @@ function createDOMPurify() {
         }
       } else {
         try {
-          node.setAttribute(name21, "");
+          node.setAttribute(name22, "");
         } catch (_) {
         }
       }
@@ -10059,9 +10223,9 @@ function createDOMPurify() {
     l = attributes.length;
     while (l--) {
       attr = attributes[l];
-      var _attr = attr, name21 = _attr.name, namespaceURI = _attr.namespaceURI;
-      value = name21 === "value" ? attr.value : stringTrim(attr.value);
-      lcName = transformCaseFunc(name21);
+      var _attr = attr, name22 = _attr.name, namespaceURI = _attr.namespaceURI;
+      value = name22 === "value" ? attr.value : stringTrim(attr.value);
+      lcName = transformCaseFunc(name22);
       hookEvent.attrName = lcName;
       hookEvent.attrValue = value;
       hookEvent.keepAttr = true;
@@ -10071,12 +10235,12 @@ function createDOMPurify() {
       if (hookEvent.forceKeepAttr) {
         continue;
       }
-      _removeAttribute(name21, currentNode);
+      _removeAttribute(name22, currentNode);
       if (!hookEvent.keepAttr) {
         continue;
       }
       if (regExpTest(/\/>/i, value)) {
-        _removeAttribute(name21, currentNode);
+        _removeAttribute(name22, currentNode);
         continue;
       }
       if (SAFE_FOR_TEMPLATES) {
@@ -10088,7 +10252,7 @@ function createDOMPurify() {
         continue;
       }
       if (SANITIZE_NAMED_PROPS && (lcName === "id" || lcName === "name")) {
-        _removeAttribute(name21, currentNode);
+        _removeAttribute(name22, currentNode);
         value = SANITIZE_NAMED_PROPS_PREFIX + value;
       }
       if (trustedTypesPolicy && _typeof(trustedTypes) === "object" && typeof trustedTypes.getAttributeType === "function") {
@@ -10107,9 +10271,9 @@ function createDOMPurify() {
       }
       try {
         if (namespaceURI) {
-          currentNode.setAttributeNS(namespaceURI, name21, value);
+          currentNode.setAttributeNS(namespaceURI, name22, value);
         } else {
-          currentNode.setAttribute(name21, value);
+          currentNode.setAttribute(name22, value);
         }
         arrayPop(DOMPurify.removed);
       } catch (_) {
@@ -10281,7 +10445,7 @@ function createDOMPurify() {
   };
   return DOMPurify;
 }
-var hasOwnProperty, setPrototypeOf, isFrozen, getPrototypeOf, getOwnPropertyDescriptor, freeze, seal, create40, _ref, apply, construct, arrayForEach, arrayPop, arrayPush, stringToLowerCase, stringMatch, stringReplace, stringIndexOf, stringTrim, regExpTest, typeErrorCreate, html$1, svg$1, svgFilters, svgDisallowed, mathMl$1, mathMlDisallowed, text, html, svg, mathMl, xml, MUSTACHE_EXPR, ERB_EXPR, DATA_ATTR, ARIA_ATTR, IS_ALLOWED_URI, IS_SCRIPT_OR_DATA, ATTR_WHITESPACE, DOCTYPE_NAME, getGlobal, _createTrustedTypesPolicy, purify, dompurify_default;
+var hasOwnProperty, setPrototypeOf, isFrozen, getPrototypeOf, getOwnPropertyDescriptor, freeze, seal, create41, _ref, apply, construct, arrayForEach, arrayPop, arrayPush, stringToLowerCase, stringMatch, stringReplace, stringIndexOf, stringTrim, regExpTest, typeErrorCreate, html$1, svg$1, svgFilters, svgDisallowed, mathMl$1, mathMlDisallowed, text, html, svg, mathMl, xml, MUSTACHE_EXPR, ERB_EXPR, DATA_ATTR, ARIA_ATTR, IS_ALLOWED_URI, IS_SCRIPT_OR_DATA, ATTR_WHITESPACE, DOCTYPE_NAME, getGlobal, _createTrustedTypesPolicy, purify, dompurify_default;
 var init_dompurify = __esm({
   "static/js/dompurify.js"() {
     "use strict";
@@ -10292,7 +10456,7 @@ var init_dompurify = __esm({
     getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
     freeze = Object.freeze;
     seal = Object.seal;
-    create40 = Object.create;
+    create41 = Object.create;
     _ref = typeof Reflect !== "undefined" && Reflect;
     apply = _ref.apply;
     construct = _ref.construct;
@@ -10710,14 +10874,14 @@ var init_JsonRpcError = __esm({
 // src/parts/IpcParent/IpcParentWithMessagePort.js
 var IpcParentWithMessagePort_exports = {};
 __export(IpcParentWithMessagePort_exports, {
-  create: () => create41
+  create: () => create42
 });
-var create41;
+var create42;
 var init_IpcParentWithMessagePort = __esm({
   "src/parts/IpcParent/IpcParentWithMessagePort.js"() {
     "use strict";
     init_Assert();
-    create41 = async ({ url }) => {
+    create42 = async ({ url }) => {
       string(url);
       const port = await new Promise((resolve2) => {
         globalThis.acceptPort = resolve2;
@@ -10732,23 +10896,23 @@ var init_IpcParentWithMessagePort = __esm({
 // src/parts/IpcParent/IpcParentWithModuleWorker.js
 var IpcParentWithModuleWorker_exports = {};
 __export(IpcParentWithModuleWorker_exports, {
-  create: () => create42
+  create: () => create43
 });
-var getDisplayName, tryToGetActualErrorMessage, isFirefoxError, create42;
+var getDisplayName, tryToGetActualErrorMessage, isFirefoxError, create43;
 var init_IpcParentWithModuleWorker = __esm({
   "src/parts/IpcParent/IpcParentWithModuleWorker.js"() {
     "use strict";
-    getDisplayName = (name21) => {
-      if (!name21) {
+    getDisplayName = (name22) => {
+      if (!name22) {
         return "<unknown> worker";
       }
-      if (name21.endsWith("Worker")) {
-        return name21.toLowerCase();
+      if (name22.endsWith("Worker")) {
+        return name22.toLowerCase();
       }
-      return `${name21} worker`;
+      return `${name22} worker`;
     };
-    tryToGetActualErrorMessage = async ({ url, name: name21 }) => {
-      const displayName = getDisplayName(name21);
+    tryToGetActualErrorMessage = async ({ url, name: name22 }) => {
+      const displayName = getDisplayName(name22);
       try {
         await import(url);
         return `Failed to start ${displayName}: Unknown Error`;
@@ -10775,11 +10939,11 @@ var init_IpcParentWithModuleWorker = __esm({
         "SyntaxError: export declarations may only appear at top level of a module"
       ].includes(message);
     };
-    create42 = async ({ url, name: name21 }) => {
+    create43 = async ({ url, name: name22 }) => {
       try {
         const worker = new Worker(url, {
           type: "module",
-          name: name21
+          name: name22
         });
         await new Promise((resolve2, reject) => {
           const cleanup = () => {
@@ -10802,7 +10966,7 @@ var init_IpcParentWithModuleWorker = __esm({
             } else {
               const actualErrorMessage = await tryToGetActualErrorMessage({
                 url,
-                name: name21
+                name: name22
               });
               reject(new Error(actualErrorMessage));
             }
@@ -10825,13 +10989,13 @@ var init_IpcParentWithModuleWorker = __esm({
 // src/parts/IpcParent/IpcParentWithReferencePort.js
 var IpcParentWithReferencePort_exports = {};
 __export(IpcParentWithReferencePort_exports, {
-  create: () => create43
+  create: () => create44
 });
-var create43;
+var create44;
 var init_IpcParentWithReferencePort = __esm({
   "src/parts/IpcParent/IpcParentWithReferencePort.js"() {
     "use strict";
-    create43 = async (url) => {
+    create44 = async (url) => {
       const referencePort = await new Promise((resolve2) => {
         globalThis.acceptReferencePort = resolve2;
         import(url);
@@ -10843,7 +11007,7 @@ var init_IpcParentWithReferencePort = __esm({
 });
 
 // src/parts/IpcParent/IpcParent.js
-var Methods, METHOD_PREFERRED, getModule, create44;
+var Methods, METHOD_PREFERRED, getModule, create45;
 var init_IpcParent = __esm({
   "src/parts/IpcParent/IpcParent.js"() {
     "use strict";
@@ -10865,7 +11029,7 @@ var init_IpcParent = __esm({
           throw new Error("unknown method");
       }
     };
-    create44 = async ({ method, ...options }) => {
+    create45 = async ({ method, ...options }) => {
       const module = await getModule();
       return module.create(options);
     };
@@ -10942,7 +11106,7 @@ var init_RendererWorker = __esm({
       throw new JsonRpcError("unexpected message from renderer worker");
     };
     getIpc = async () => {
-      const rendererWorker = await create44({
+      const rendererWorker = await create45({
         method: Methods.ModuleWorker,
         url: getRendererWorkerUrl(),
         name: "Renderer Worker"