@lvce-editor/renderer-process 22.0.0 → 22.2.0

package/dist/rendererProcessMain.js

@@ -10,7 +10,7 @@ class AssertionError extends Error {
   }
 }
 const Object$1 = 1;
-const Number = 2;
+const Number$1 = 2;
 const Array$1 = 3;
 const String$1 = 4;
 const Boolean$1 = 5;
@@ -20,7 +20,7 @@ const Unknown$1 = 8;
 const getType = value => {
   switch (typeof value) {
     case 'number':
-      return Number;
+      return Number$1;
     case 'function':
       return Function;
     case 'string':
@@ -47,7 +47,7 @@ const object = value => {
 };
 const number = value => {
   const type = getType(value);
-  if (type !== Number) {
+  if (type !== Number$1) {
     throw new AssertionError('expected value to be of type number');
   }
 };
@@ -63,6 +63,12 @@ const string = value => {
     throw new AssertionError('expected value to be of type string');
   }
 };
+const boolean = value => {
+  const type = getType(value);
+  if (type !== Boolean$1) {
+    throw new AssertionError('expected value to be of type boolean');
+  }
+};
 
 const readText = async () => {
   return navigator.clipboard.readText();
@@ -661,6 +667,7 @@ const setProp = ($Element, key, value, eventMap, newEventMap) => {
     case 'onMouseMove':
     case 'onMouseOut':
     case 'onMouseOver':
+    case 'onMouseUp':
     case 'onPointerDown':
     case 'onPointerMove':
     case 'onPointerOut':
@@ -857,7 +864,7 @@ const enabled = () => {
   return ignore;
 };
 let id$1 = 0;
-const create$D = () => {
+const create$E = () => {
   return ++id$1;
 };
 const state$8 = Object.create(null);
@@ -872,7 +879,7 @@ const getFileHandles$1 = async ids => {
   return handles;
 };
 const add = promise => {
-  const id = create$D();
+  const id = create$E();
   state$8[id] = promise;
   return id;
 };
@@ -1518,7 +1525,7 @@ const getWorkerDisplayName$1 = name => {
   }
   return `${name} worker`;
 };
-const create$C = async ({
+const create$D = async ({
   name,
   url
 }) => {
@@ -1585,7 +1592,7 @@ const wrap = worker => {
 
 const IpcParentWithModuleWorker$2 = {
   __proto__: null,
-  create: create$C,
+  create: create$D,
   wrap
 };
 
@@ -1593,7 +1600,7 @@ const isMessagePort$1 = value => {
   return value instanceof MessagePort;
 };
 
-const create$B = async ({
+const create$C = async ({
   url
 }) => {
   string(url);
@@ -1614,10 +1621,10 @@ const create$B = async ({
 
 const IpcParentWithMessagePort$2 = {
   __proto__: null,
-  create: create$B
+  create: create$C
 };
 
-const create$A = async url => {
+const create$B = async url => {
   const referencePort = await new Promise(resolve => {
     globalThis.acceptReferencePort = resolve;
     import(url);
@@ -1628,7 +1635,7 @@ const create$A = async url => {
 
 const IpcParentWithReferencePort = {
   __proto__: null,
-  create: create$A
+  create: create$B
 };
 
 const normalizeLine = line => {
@@ -2397,7 +2404,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(id, errorProperty);
 };
-const create$z = (message, result) => {
+const create$A = (message, result) => {
   return {
     jsonrpc: Two$1,
     id: message.id,
@@ -2406,7 +2413,7 @@ const create$z = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$z(message, resultProperty);
+  return create$A(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -2733,7 +2740,7 @@ const PlainMessagePortRpcParent = {
 };
 
 // TODO add test
-const create$y = async ({
+const create$z = async ({
   name,
   port,
   url
@@ -2749,7 +2756,7 @@ const create$y = async ({
 
 const IpcParentWithModuleWorkerWithMessagePort = {
   __proto__: null,
-  create: create$y
+  create: create$z
 };
 
 const Web = 1;
@@ -2782,7 +2789,7 @@ const platform = getPlatform();
 const isElectron = platform === Electron;
 
 // TODO use handleIncomingIpc function
-const create$x = async ({
+const create$y = async ({
   ipcId,
   port
 }) => {
@@ -2800,7 +2807,7 @@ const create$x = async ({
 
 const IpcParentWithElectron = {
   __proto__: null,
-  create: create$x
+  create: create$y
 };
 
 const getModule = method => {
@@ -2911,7 +2918,7 @@ const hydrate$3 = async () => {
 };
 
 // TODO needed?
-const dispose$h = () => {
+const dispose$i = () => {
   if (state$7.rpc) {
     // @ts-expect-error
     state$7.rpc.dispose();
@@ -2936,7 +2943,7 @@ const invokeAndTransfer = (method, ...params) => {
 
 const RendererWorker = {
   __proto__: null,
-  dispose: dispose$h,
+  dispose: dispose$i,
   hydrate: hydrate$3,
   invoke: invoke$1,
   invokeAndTransfer,
@@ -2945,7 +2952,7 @@ const RendererWorker = {
   state: state$7
 };
 
-const create$w = async ({
+const create$x = async ({
   method,
   ...options
 }) => {
@@ -3066,7 +3073,7 @@ const create$Notification = message => {
   $Notification.textContent = message;
   return $Notification;
 };
-const create$v = (type, message) => {
+const create$w = (type, message) => {
   // TODO this pattern might be also useful for activitybar, sidebar etc., creating elements as late as possible, only when actually needed
   const $Notification = create$Notification(message);
   append$1($Notification);
@@ -3111,7 +3118,7 @@ const createWithOptions = (type, message, options) => {
   const $Notification = create$NotificationWithOptions(message, options);
   append$1($Notification);
 };
-const dispose$g = id => {
+const dispose$h = id => {
   // const $Notification = state.$Notifications
 };
 
@@ -3128,7 +3135,7 @@ const set$6 = (canvasId, canvas) => {
 const get$4 = id => {
   return get$5(id);
 };
-const create$u = async (canvasId, objectId) => {
+const create$v = async (canvasId, objectId) => {
   const canvas = document.createElement('canvas');
   const offscreenCanvas = canvas.transferControlToOffscreen();
   set$6(canvasId, canvas);
@@ -3256,7 +3263,7 @@ const getElement = () => {
   return state$4.$PreviousFocusElement;
 };
 
-const focus$d = $Element => {
+const focus$e = $Element => {
   if ($Element === document.activeElement) {
     return;
   }
@@ -3425,10 +3432,10 @@ const handleMouseLeave = event => {
 const handleKeyDown$5 = event => {
   state$3.handleKeyDown(event);
 };
-const handleFocusOut = event => {
+const handleFocusOut$1 = event => {
   state$3.handleFocusOut(event);
 };
-const create$Menu = () => {
+const create$Menu$1 = () => {
   // TODO set aria label on menu (e.g. File, Edit, Selection)
   const $Menu = document.createElement('ul');
   $Menu.className = 'Menu';
@@ -3447,7 +3454,7 @@ const create$Menu = () => {
   //   passive: true,
   // })
   $Menu.onkeydown = handleKeyDown$5;
-  $Menu.addEventListener(FocusOut, handleFocusOut);
+  $Menu.addEventListener(FocusOut, handleFocusOut$1);
   $Menu.oncontextmenu = handleContextMenu$8;
   // $ContextMenu.onfocus = handleFocus
   // $ContextMenu.onblur = handleBlur
@@ -3489,7 +3496,7 @@ const showMenu = (x, y, width, height, items, level, parentIndex = -1, dom, mous
     state$3.$BackDrop = $BackDrop;
     append$1($BackDrop);
   }
-  const $Menu = create$Menu();
+  const $Menu = create$Menu$1();
   renderInto($Menu, dom);
   setXAndY($Menu, x, y);
   $Menu.id = `Menu-${level}`;
@@ -3505,7 +3512,7 @@ const showMenu = (x, y, width, height, items, level, parentIndex = -1, dom, mous
   state$3.$$Menus.push($Menu);
   append$1($Menu);
   if (level === 0) {
-    focus$d($Menu);
+    focus$e($Menu);
     send('Focus.setFocus', FocusMenu);
   }
 };
@@ -4230,6 +4237,12 @@ const transferToWebView = objectId => {
   }, '*', [port]);
 };
 
+const attachEvents$6 = ($Node, eventMap) => {
+  for (const [key, value] of Object.entries(eventMap)) {
+    $Node.addEventListener(key, value);
+  }
+};
+
 const set$3 = setComponentUid;
 const get = getComponentUid;
 const fromEvent = getComponentUidFromEvent;
@@ -4299,7 +4312,7 @@ const showError = (message, y, x) => {
     $ImagePreviewImage
   };
 };
-const create$t = (uri, top, left) => {
+const create$u = (uri, top, left) => {
   const $ImagePreviewImage = document.createElement('img');
   $ImagePreviewImage.className = 'ImagePreviewImage';
   $ImagePreviewImage.src = uri;
@@ -4324,14 +4337,14 @@ const create$t = (uri, top, left) => {
 const update = (state, uri) => {
   state.$ImagePreviewImage.uri = uri;
 };
-const dispose$f = state => {
+const dispose$g = state => {
   remove$1(state.$ImagePreview);
 };
 
 const ImagePreview$1 = {
   __proto__: null,
-  create: create$t,
-  dispose: dispose$f,
+  create: create$u,
+  dispose: dispose$g,
   showError,
   update
 };
@@ -4387,7 +4400,7 @@ const handleContextMenu$7 = event => {
   } = event;
   return ['handleContextMenu', button, clientX, clientY];
 };
-const returnValue$7 = true;
+const returnValue$8 = true;
 
 const ViewletActivityBarEvents = {
   __proto__: null,
@@ -4395,14 +4408,14 @@ const ViewletActivityBarEvents = {
   handleContextMenu: handleContextMenu$7,
   handleFocus: handleFocus$9,
   handleMouseDown: handleMouseDown$3,
-  returnValue: returnValue$7
+  returnValue: returnValue$8
 };
 
-const Events$4 = ViewletActivityBarEvents;
+const Events$5 = ViewletActivityBarEvents;
 
 const ViewletActivityBar = {
   __proto__: null,
-  Events: Events$4
+  Events: Events$5
 };
 
 const executeViewletCommand = (uid, command, ...args) => {
@@ -4427,7 +4440,7 @@ const forwardViewletCommand = name => {
 forwardViewletCommand('clearFilter');
 forwardViewletCommand('close');
 forwardViewletCommand('closeEditor');
-forwardViewletCommand('closeMenu');
+const closeMenu$1 = forwardViewletCommand('closeMenu');
 forwardViewletCommand('compositionEnd');
 forwardViewletCommand('compositionStart');
 forwardViewletCommand('compositionUpdate');
@@ -4441,7 +4454,7 @@ forwardViewletCommand('handleBeforeInput');
 forwardViewletCommand('handleBeforeInputFromContentEditable');
 const handleBlur$8 = forwardViewletCommand('handleBlur');
 const handleButtonClick = forwardViewletCommand('handleButtonClick');
-const handleClick$5 = forwardViewletCommand('handleClick');
+const handleClick$6 = forwardViewletCommand('handleClick');
 const handleClickAction$2 = forwardViewletCommand('handleClickAction');
 forwardViewletCommand('handleClickAdd');
 const handleClickAt$3 = forwardViewletCommand('handleClickAt');
@@ -4468,15 +4481,15 @@ forwardViewletCommand('handleClickDisable');
 forwardViewletCommand('handleClickUninstall');
 forwardViewletCommand('handleFilterInput');
 const handleFocus$8 = forwardViewletCommand('handleFocus');
-const handleFocusIn$3 = forwardViewletCommand('handleFocusIn');
+const handleFocusIn$4 = forwardViewletCommand('handleFocusIn');
 forwardViewletCommand('handleIconError');
 const handleImageError = forwardViewletCommand('handleImageError');
 const handleInput$6 = forwardViewletCommand('handleInput');
 const handleKeyDown$4 = forwardViewletCommand('handleKeyDown');
 forwardViewletCommand('handleListBlur');
 forwardViewletCommand('handleListFocus');
-forwardViewletCommand('handleMenuClick');
-forwardViewletCommand('handleMenuMouseOver');
+const handleMenuClick$1 = forwardViewletCommand('handleMenuClick');
+const handleMenuMouseOver$1 = forwardViewletCommand('handleMenuMouseOver');
 const handleMouseDown$2 = forwardViewletCommand('handleMouseDown');
 forwardViewletCommand('handleMouseMove');
 const handleMouseOut$1 = forwardViewletCommand('handleMouseOut');
@@ -4548,21 +4561,21 @@ const ViewletAudioEvents = {
   handleAudioError
 };
 
-const Events$3 = ViewletAudioEvents;
+const Events$4 = ViewletAudioEvents;
 
 const ViewletAudio = {
   __proto__: null,
-  Events: Events$3
+  Events: Events$4
 };
 
-const create$s = () => {
+const create$t = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet Clock';
   return {
     $Viewlet
   };
 };
-const dispose$e = state => {};
+const dispose$f = state => {};
 const refresh$4 = () => {};
 const setTime = (state, time) => {
   object(state);
@@ -4572,8 +4585,8 @@ const setTime = (state, time) => {
 
 const ViewletClock = {
   __proto__: null,
-  create: create$s,
-  dispose: dispose$e,
+  create: create$t,
+  dispose: dispose$f,
   refresh: refresh$4,
   setTime
 };
@@ -4601,7 +4614,7 @@ const stopTracking$1 = ($Target, pointerId, handlePointerMove, handlePointerUp)
   // TODO use pointerlost event instead
   $Target.removeEventListener(PointerUp, handlePointerUp);
 };
-const create$r = (pointerDown, pointerMove, pointerUp) => {
+const create$s = (pointerDown, pointerMove, pointerUp) => {
   const shared = (fn, event) => {
     const message = fn(event);
     if (!message || message.length === 0) {
@@ -4634,7 +4647,7 @@ const create$r = (pointerDown, pointerMove, pointerUp) => {
 };
 
 const handleOffset = 20;
-const handleSliderPointerDown = create$r(event => {
+const handleSliderPointerDown = create$s(event => {
   const {
     clientX,
     clientY
@@ -4658,12 +4671,12 @@ const handlePointerDown$2 = event => {
   }
   return [];
 };
-const returnValue$6 = true;
+const returnValue$7 = true;
 
 const ViewletColorPickerEvents = {
   __proto__: null,
   handlePointerDown: handlePointerDown$2,
-  returnValue: returnValue$6
+  returnValue: returnValue$7
 };
 
 const setColor = (state, color) => {
@@ -4716,14 +4729,14 @@ const ViewletDebugConsoleEvents = {
   handleInput: handleInput$5
 };
 
-const create$q = () => {
+const create$r = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet DebugConsole';
   return {
     $Viewlet
   };
 };
-const setDom$8 = (state, dom) => {
+const setDom$9 = (state, dom) => {
   const {
     $Viewlet
   } = state;
@@ -4732,8 +4745,8 @@ const setDom$8 = (state, dom) => {
 
 const ViewletDebugConsole = {
   __proto__: null,
-  create: create$q,
-  setDom: setDom$8
+  create: create$r,
+  setDom: setDom$9
 };
 
 const handleKeyDown$3 = event => {
@@ -4769,7 +4782,7 @@ const setValue$2 = (state, value) => {
   const $Input = $Viewlet.querySelector('input');
   $Input.value = value;
 };
-const focus$c = state => {
+const focus$d = state => {
   const {
     $Viewlet
   } = state;
@@ -4780,7 +4793,7 @@ const focus$c = state => {
 const ViewletDefineKeyBinding = {
   __proto__: null,
   Events: ViewletDefineKeyBindingEvents,
-  focus: focus$c,
+  focus: focus$d,
   setValue: setValue$2
 };
 
@@ -4793,7 +4806,7 @@ const setMaskImage = ($Element, icon) => {
   }
 };
 
-const create$p = icon => {
+const create$q = icon => {
   const $Icon = document.createElement('div');
   $Icon.className = 'MaskIcon';
   setMaskImage($Icon, icon);
@@ -4803,7 +4816,7 @@ const create$p = icon => {
 
 const create$Button = (label, icon) => {
   // TODO icon div might not be needed (unnecessary html element)
-  const $Icon = create$p(icon);
+  const $Icon = create$q(icon);
   const $Button = document.createElement('button');
   $Button.className = 'IconButton';
   $Button.title = label;
@@ -4812,19 +4825,19 @@ const create$Button = (label, icon) => {
   return $Button;
 };
 
-const handleClick$4 = index => {
+const handleClick$5 = index => {
   send(/* Dialog.handleClick */'Dialog.handleClick', /* index */index);
 };
 
-const handleClick$3 = event => {
+const handleClick$4 = event => {
   const {
     target
   } = event;
   const index = getNodeIndex(target);
-  handleClick$4(index);
+  handleClick$5(index);
 };
 
-const create$o = () => {
+const create$p = () => {
   const $DialogTitle = document.createElement('h2');
   $DialogTitle.id = 'DialogTitle';
   const $DialogCloseButton = create$Button('Close', 'Close');
@@ -4851,7 +4864,7 @@ const create$o = () => {
   $Dialog.setAttribute(AriaLabelledBy, 'DialogTitle');
   $Dialog.setAttribute(AriaDescribedBy, 'DialogBodyErrorMessage');
   $Dialog.append($DialogHeader, $DialogBody);
-  $Dialog.onclick = handleClick$3;
+  $Dialog.onclick = handleClick$4;
   return {
     $DialogBodyErrorCodeFrame,
     $DialogBodyErrorMessage,
@@ -4905,7 +4918,7 @@ const setErrorStack = (state, errorStack) => {
 
 const ViewletDialog = {
   __proto__: null,
-  create: create$o,
+  create: create$p,
   postAppend,
   setButtons,
   setCodeFrame,
@@ -4968,7 +4981,7 @@ const handleContextMenu$5 = event => {
   } = event;
   return ['handleContextMenu', button, clientX, clientY];
 };
-const handleSashCornerPointerDown = create$r(event => {
+const handleSashCornerPointerDown = create$s(event => {
   const {
     clientX,
     clientY
@@ -4987,7 +5000,7 @@ const handleSashCornerPointerDown = create$r(event => {
   } = event;
   return ['handleSashCornerPointerUp', clientX, clientY];
 });
-const returnValue$5 = true;
+const returnValue$6 = true;
 
 const ViewletE2eTestEvents = {
   __proto__: null,
@@ -4995,7 +5008,7 @@ const ViewletE2eTestEvents = {
   handleContextMenu: handleContextMenu$5,
   handleLoad: handleLoad$3,
   handleSashCornerPointerDown,
-  returnValue: returnValue$5
+  returnValue: returnValue$6
 };
 
 // TODO could use browser view when running in electron
@@ -5065,14 +5078,14 @@ const handleContextMenu$4 = event => {
   } = event;
   return ['handleContextMenu', button, clientX, clientY];
 };
-const returnValue$4 = true;
+const returnValue$5 = true;
 
 const ViewletE2eTestsEvents = {
   __proto__: null,
   handleClickAt: handleClickAt$1,
   handleContextMenu: handleContextMenu$4,
   handleLoad: handleLoad$2,
-  returnValue: returnValue$4
+  returnValue: returnValue$5
 };
 
 const sendToIframe = (contentWindow, message, origin, transfer) => {
@@ -5137,10 +5150,10 @@ const ViewletE2eTests = {
 
 const Script = 2;
 
-const handleFocusIn$2 = event => {
+const handleFocusIn$3 = event => {
   preventDefault(event);
   const uid = fromEvent(event);
-  handleFocusIn$3(uid);
+  handleFocusIn$4(uid);
 };
 const handleBlur$6 = event => {
   preventDefault(event);
@@ -5151,7 +5164,7 @@ const handleBlur$6 = event => {
 const ViewletEditorCodeGeneratorEvents = {
   __proto__: null,
   handleBlur: handleBlur$6,
-  handleFocusIn: handleFocusIn$2
+  handleFocusIn: handleFocusIn$3
 };
 
 const setBounds$9 = (state, x, y, width, height) => {
@@ -5167,10 +5180,10 @@ const appendWidget$5 = state => {
   } = state;
   append$1($Viewlet);
 };
-const dispose$d = state => {
+const dispose$e = state => {
   remove$1(state.$Viewlet);
 };
-const focus$b = (state, key, source) => {
+const focus$c = (state, key, source) => {
   if (!key) {
     return;
   }
@@ -5193,17 +5206,11 @@ const ViewletEditorCodeGenerator = {
   __proto__: null,
   Events: ViewletEditorCodeGeneratorEvents,
   appendWidget: appendWidget$5,
-  dispose: dispose$d,
-  focus: focus$b,
+  dispose: dispose$e,
+  focus: focus$c,
   setBounds: setBounds$9
 };
 
-const attachEvents$6 = ($Node, eventMap) => {
-  for (const [key, value] of Object.entries(eventMap)) {
-    $Node.addEventListener(key, value);
-  }
-};
-
 const Passive = {
   passive: true
 };
@@ -5317,7 +5324,7 @@ const setNegativeMargin = (state, negativeMargin) => {
   setTop($ListItems, negativeMargin);
 };
 
-const create$n = () => {
+const create$o = () => {
   const $ListItems = document.createElement('div');
   $ListItems.className = 'ListItems';
   $ListItems.role = ListBox;
@@ -5358,7 +5365,7 @@ const attachEvents$5 = state => {
 // TODO show should be passed active cursor position
 // this would make this function easier to test as it would avoid dependency on globals of other files
 
-const setDom$7 = (state, dom) => {
+const setDom$8 = (state, dom) => {
   const {
     $ListItems,
     $Viewlet
@@ -5370,7 +5377,7 @@ const setDom$7 = (state, dom) => {
   // TODO recycle nodes
   // TODO set right aria attributes on $EditorInput
 };
-const dispose$c = state => {
+const dispose$d = state => {
   remove$1(state.$Viewlet);
   // state.$EditorInput.removeAttribute('aria-activedescendant')
 };
@@ -5401,12 +5408,12 @@ const setBounds$8 = (state, x, y, width, height) => {
 const ViewletEditorCompletion = {
   __proto__: null,
   attachEvents: attachEvents$5,
-  create: create$n,
-  dispose: dispose$c,
+  create: create$o,
+  dispose: dispose$d,
   handleError: handleError$6,
   setBounds: setBounds$8,
   setContentHeight,
-  setDom: setDom$7,
+  setDom: setDom$8,
   setNegativeMargin,
   setScrollBar: setScrollBar$2,
   setSize,
@@ -5416,15 +5423,15 @@ const ViewletEditorCompletion = {
 const handleClose = () => {
   return ['closeDetails'];
 };
-const returnValue$3 = true;
+const returnValue$4 = true;
 
 const ViewletEditorCompletionDetailsEvents = {
   __proto__: null,
   handleClose,
-  returnValue: returnValue$3
+  returnValue: returnValue$4
 };
 
-const create$m = () => {
+const create$n = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorCompletionDetails';
   $Viewlet.id = 'CompletionsDetails';
@@ -5435,7 +5442,7 @@ const create$m = () => {
 const attachEvents$4 = state => {
   // TODO
 };
-const setDom$6 = (state, dom) => {
+const setDom$7 = (state, dom) => {
   const {
     $Viewlet
   } = state;
@@ -5450,7 +5457,7 @@ const appendWidget$4 = state => {
   } = state;
   append$1($Viewlet);
 };
-const dispose$b = state => {
+const dispose$c = state => {
   remove$1(state.$Viewlet);
 };
 const setBounds$7 = (state, x, y, width, height) => {
@@ -5465,10 +5472,10 @@ const ViewletEditorCompletionDetails = {
   Events: ViewletEditorCompletionDetailsEvents,
   appendWidget: appendWidget$4,
   attachEvents: attachEvents$4,
-  create: create$m,
-  dispose: dispose$b,
+  create: create$n,
+  dispose: dispose$c,
   setBounds: setBounds$7,
-  setDom: setDom$6
+  setDom: setDom$7
 };
 
 // TODO not sure whether created dom node
@@ -5484,14 +5491,14 @@ const ViewletEditorCompletionDetails = {
 
 // TODO aria alert
 
-const create$l = () => {
+const create$m = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorError';
   return {
     $Viewlet
   };
 };
-const setDom$5 = (state, dom) => {
+const setDom$6 = (state, dom) => {
   const {
     $Viewlet
   } = state;
@@ -5506,13 +5513,13 @@ const setBounds$6 = (state, x, y, width, height) => {
 
 const ViewletEditorError = {
   __proto__: null,
-  create: create$l,
+  create: create$m,
   setBounds: setBounds$6,
-  setDom: setDom$5
+  setDom: setDom$6
 };
 
-const returnValue$2 = true;
-const handleSashPointerDown$2 = create$r(event => {
+const returnValue$3 = true;
+const handleSashPointerDown$2 = create$s(event => {
   const {
     clientX,
     clientY
@@ -5535,7 +5542,7 @@ const handleSashPointerDown$2 = create$r(event => {
 const ViewletEditorHoverEvents = {
   __proto__: null,
   handleSashPointerDown: handleSashPointerDown$2,
-  returnValue: returnValue$2
+  returnValue: returnValue$3
 };
 
 const setBounds$5 = (state, x, y, width, height) => {
@@ -5551,7 +5558,7 @@ const appendWidget$3 = state => {
   } = state;
   append$1($Viewlet);
 };
-const setDom$4 = (state, dom) => {
+const setDom$5 = (state, dom) => {
   const {
     $Viewlet
   } = state;
@@ -5563,7 +5570,7 @@ const ViewletEditorHover = {
   Events: ViewletEditorHoverEvents,
   appendWidget: appendWidget$3,
   setBounds: setBounds$5,
-  setDom: setDom$4
+  setDom: setDom$5
 };
 
 const LeftClick = 0;
@@ -5665,7 +5672,7 @@ const handleFocus$6 = event => {
   handleFocus$8(uid);
 };
 
-const create$k = () => {
+const create$l = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorImage';
   return {
@@ -5698,7 +5705,7 @@ const setDragging = (state, isDragging) => {
   } = state;
   $Viewlet.classList.toggle('Dragging', isDragging);
 };
-const setDom$3 = (state, dom) => {
+const setDom$4 = (state, dom) => {
   const {
     $Viewlet
   } = state;
@@ -5708,13 +5715,13 @@ const setDom$3 = (state, dom) => {
 const ViewletEditorImage = {
   __proto__: null,
   attachEvents: attachEvents$3,
-  create: create$k,
-  setDom: setDom$3,
+  create: create$l,
+  setDom: setDom$4,
   setDragging,
   setTransform
 };
 
-const create$j = () => {
+const create$k = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorText';
   $Viewlet.textContent = 'loading...';
@@ -5722,7 +5729,7 @@ const create$j = () => {
     $Viewlet
   };
 };
-const dispose$a = state => {};
+const dispose$b = state => {};
 const refresh$3 = (state, context) => {
   object(state);
   string(context.content);
@@ -5731,20 +5738,20 @@ const refresh$3 = (state, context) => {
 
 const ViewletEditorPlainText = {
   __proto__: null,
-  create: create$j,
-  dispose: dispose$a,
+  create: create$k,
+  dispose: dispose$b,
   refresh: refresh$3
 };
 
-const handleFocusIn$1 = event => {
+const handleFocusIn$2 = event => {
   preventDefault(event);
   const uid = fromEvent(event);
-  handleFocusIn$3(uid);
+  handleFocusIn$4(uid);
 };
 
 const ViewletEditorSourceActionsEvents = {
   __proto__: null,
-  handleFocusIn: handleFocusIn$1
+  handleFocusIn: handleFocusIn$2
 };
 
 const setBounds$4 = (state, x, y, width, height) => {
@@ -5760,7 +5767,7 @@ const appendWidget$2 = state => {
   } = state;
   append$1($Viewlet);
 };
-const dispose$9 = state => {
+const dispose$a = state => {
   remove$1(state.$Viewlet);
 };
 
@@ -5768,7 +5775,7 @@ const ViewletEditorSourceActions = {
   __proto__: null,
   Events: ViewletEditorSourceActionsEvents,
   appendWidget: appendWidget$2,
-  dispose: dispose$9,
+  dispose: dispose$a,
   setBounds: setBounds$4
 };
 
@@ -6002,7 +6009,7 @@ const handlePaste = event => {
   const text = getText(clipboardData);
   return ['paste', text];
 };
-const handleScrollBarVerticalPointerDown = create$r(event => {
+const handleScrollBarVerticalPointerDown = create$s(event => {
   const {
     clientY
   } = event;
@@ -6125,7 +6132,7 @@ const setLineInfos = (state, dom) => {
 // 1. create -> only create dom elements
 // 2. render -> fill elements with attributes and data
 // that way all dom nodes can be recycled
-const create$i = () => {
+const create$j = () => {
   const $EditorInput = document.createElement('textarea');
   $EditorInput.className = 'EditorInput';
   $EditorInput.ariaAutoComplete = List;
@@ -6271,7 +6278,7 @@ const setSelections$1 = (state, cursorInfos, selectionInfos) => {
   setCursors(state, cursorInfos);
   setSelections$2(state, selectionInfos);
 };
-const setFocused$1 = async (state, isFocused) => {
+const setFocused$2 = async (state, isFocused) => {
   const {
     $EditorInput
   } = state;
@@ -6292,7 +6299,7 @@ const setDecorationsDom$1 = (state, decorations) => {
   setDecorationsDom$2(state, decorations);
 };
 
-const create$h = create$i;
+const create$i = create$j;
 const setText$1 = setText$2;
 const setSelections = setSelections$1;
 const setIncrementalEdits = setIncrementalEdits$1;
@@ -6328,20 +6335,20 @@ const hideOverlayMessage = state => {
     }
   }
 };
-const setFocused = setFocused$1;
-const focus$a = setFocused$1;
+const setFocused$1 = setFocused$2;
+const focus$b = setFocused$2;
 const setDecorationsDom = setDecorationsDom$1;
 
 const ViewletEditorText = {
   __proto__: null,
-  create: create$h,
-  focus: focus$a,
+  create: create$i,
+  focus: focus$b,
   handleError: handleError$4,
   hideOverlayMessage,
   highlightAsLink,
   renderGutter,
   setDecorationsDom,
-  setFocused,
+  setFocused: setFocused$1,
   setIncrementalEdits,
   setScrollBar,
   setScrollBarHorizontal,
@@ -6350,7 +6357,7 @@ const ViewletEditorText = {
   showOverlayMessage
 };
 
-const create$g = () => {
+const create$h = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorTextError';
   return {
@@ -6366,11 +6373,11 @@ const setMessage$3 = (state, message) => {
 
 const ViewletEditorTextError = {
   __proto__: null,
-  create: create$g,
+  create: create$h,
   setMessage: setMessage$3
 };
 
-const create$f = () => {
+const create$g = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorWidgetError EditorOverlayMessage';
   return {
@@ -6393,12 +6400,12 @@ const setBounds$3 = (state, x, y, width, height) => {
 
 const ViewletEditorWidgetError = {
   __proto__: null,
-  create: create$f,
+  create: create$g,
   setBounds: setBounds$3,
   setMessage: setMessage$2
 };
 
-const create$e = () => {
+const create$f = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.dataset.viewlet = 'Empty';
   $Viewlet.className = 'Viewlet';
@@ -6407,18 +6414,18 @@ const create$e = () => {
   };
 };
 const refresh$2 = (state, context) => {};
-const focus$9 = state => {};
-const dispose$8 = state => {};
+const focus$a = state => {};
+const dispose$9 = state => {};
 
 const ViewletEmpty = {
   __proto__: null,
-  create: create$e,
-  dispose: dispose$8,
-  focus: focus$9,
+  create: create$f,
+  dispose: dispose$9,
+  focus: focus$a,
   refresh: refresh$2
 };
 
-const create$d = () => {
+const create$e = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EmptyEditor';
   return {
@@ -6428,10 +6435,10 @@ const create$d = () => {
 
 const ViewletEmptyEditor = {
   __proto__: null,
-  create: create$d
+  create: create$e
 };
 
-const create$c = () => {
+const create$d = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet Error';
   return {
@@ -6447,7 +6454,7 @@ const setMessage$1 = (state, message) => {
 
 const ViewletError = {
   __proto__: null,
-  create: create$c,
+  create: create$d,
   setMessage: setMessage$1
 };
 
@@ -6517,7 +6524,7 @@ const handleFocusClose = event => {
 const handleFocusReplaceAll = event => {
   return ['FindWidget.handleFocusReplaceAll'];
 };
-const returnValue$1 = true;
+const returnValue$2 = true;
 
 const ViewletFindWidgetEvents = {
   __proto__: null,
@@ -6537,10 +6544,10 @@ const ViewletFindWidgetEvents = {
   handleReplaceFocus,
   handleReplaceInput,
   handleToggleReplaceFocus,
-  returnValue: returnValue$1
+  returnValue: returnValue$2
 };
 
-const create$b = () => {
+const create$c = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet FindWidget';
   $Viewlet.role = Group;
@@ -6548,7 +6555,7 @@ const create$b = () => {
     $Viewlet
   };
 };
-const focus$8 = (state, key, source) => {
+const focus$9 = (state, key, source) => {
   if (!key) {
     return;
   }
@@ -6582,7 +6589,7 @@ const appendWidget$1 = state => {
   } = state;
   append$1($Viewlet);
 };
-const setDom$2 = (state, dom) => {
+const setDom$3 = (state, dom) => {
   const {
     $Viewlet
   } = state;
@@ -6594,20 +6601,20 @@ const setBounds$2 = (state, x, y, width, height) => {
   } = state;
   setBounds$a($Viewlet, x, y, width, height);
 };
-const dispose$7 = state => {
+const dispose$8 = state => {
   remove$1(state.$Viewlet);
 };
-const Events$2 = ViewletFindWidgetEvents;
+const Events$3 = ViewletFindWidgetEvents;
 
 const ViewletFindWidget = {
   __proto__: null,
-  Events: Events$2,
+  Events: Events$3,
   appendWidget: appendWidget$1,
-  create: create$b,
-  dispose: dispose$7,
-  focus: focus$8,
+  create: create$c,
+  dispose: dispose$8,
+  focus: focus$9,
   setBounds: setBounds$2,
-  setDom: setDom$2,
+  setDom: setDom$3,
   setValue: setValue$1
 };
 
@@ -6629,7 +6636,7 @@ const ViewletLocationsEvents = {
   handleLocationsMouseDown
 };
 
-const setFocusedIndex = (state, oldFocusedIndex, newFocusedIndex) => {
+const setFocusedIndex$1 = (state, oldFocusedIndex, newFocusedIndex) => {
   const {
     $Viewlet
   } = state;
@@ -6652,7 +6659,7 @@ const handleError$3 = (state, message) => {
   } = state;
   $Message.textContent = message;
 };
-const focus$7 = state => {
+const focus$8 = state => {
   const {
     $Locations
   } = state;
@@ -6664,9 +6671,9 @@ const focus$7 = state => {
 const ViewletImplementations = {
   __proto__: null,
   Events: ViewletLocationsEvents,
-  focus: focus$7,
+  focus: focus$8,
   handleError: handleError$3,
-  setFocusedIndex
+  setFocusedIndex: setFocusedIndex$1
 };
 
 const handleScrollBarPointerDown = event => {
@@ -6757,11 +6764,11 @@ const setColumnWidths = (state, columnWidth1, columnWidth2, columnWidth3) => {
   $Resizer1.style.left = `${paddingLeft + columnWidth1}px`;
   $Resizer2.style.left = `${paddingLeft + columnWidth1 + columnWidth2}px`;
 };
-const Events$1 = ViewletkeyBindingsEvents;
+const Events$2 = ViewletkeyBindingsEvents;
 
 const ViewletKeyBindings = {
   __proto__: null,
-  Events: Events$1,
+  Events: Events$2,
   setColumnWidths,
   setScrollBar: setScrollBar$2,
   setSize,
@@ -7266,7 +7273,7 @@ const handleBlur$3 = () => {
 const handleKeyDown$1 = handleKeyDown$2;
 const handleKeyUp = handleKeyUp$1;
 
-const create$a = () => {
+const create$b = () => {
   // TODO use aria role splitter once supported https://github.com/w3c/aria/issues/1348
   const $SashSideBar = document.createElement('div');
   $SashSideBar.className = 'Viewlet Sash SashVertical';
@@ -7322,7 +7329,7 @@ const setSashes = (state, sashSideBar, sashPanel) => {
 const ViewletLayout = {
   __proto__: null,
   attachEvents: attachEvents$2,
-  create: create$a,
+  create: create$b,
   setSashes
 };
 
@@ -7362,7 +7369,12 @@ const StatusBar = 'StatusBar';
 const Storage = 'Storage';
 const Terminal = 'Terminal';
 const Terminals = 'Terminals';
+const TitleBar = 'TitleBar';
+const TitleBarButtons = 'TitleBarButtons';
+const TitleBarIcon = 'TitleBarIcon';
+const TitleBarMenuBar = 'TitleBarMenuBar';
 const Video = 'Video';
+const TitleBarTitle = 'TitleBarTitle';
 const EditorSourceActions = 'EditorSourceActions';
 const E2eTests = 'E2eTests';
 const E2eTest = 'E2eTest';
@@ -7372,7 +7384,7 @@ const EditorTextError = 'EditorTextError';
 const EditorRename = 'EditorRename';
 const EditorCodeGenerator = 'EditorCodeGenerator';
 
-const create$9 = () => {
+const create$a = () => {
   const $ViewletOutputContent = document.createElement('div');
   $ViewletOutputContent.className = 'OutputContent';
   $ViewletOutputContent.role = Log;
@@ -7404,9 +7416,9 @@ const handleError$2 = (state, error) => {
   string(error);
   state.content.textContent = error;
 };
-const focus$6 = state => {
+const focus$7 = state => {
   object(state);
-  focus$d(state.$ViewletOutputContent);
+  focus$e(state.$ViewletOutputContent);
   send('Focus.setFocus', FocusOutput);
 };
 
@@ -7419,15 +7431,15 @@ const disposeFindWidget = state => {
     return;
   }
 };
-const dispose$6 = state => {};
+const dispose$7 = state => {};
 
 const ViewletOutput = {
   __proto__: null,
   clear: clear$1,
-  create: create$9,
-  dispose: dispose$6,
+  create: create$a,
+  dispose: dispose$7,
   disposeFindWidget,
-  focus: focus$6,
+  focus: focus$7,
   handleError: handleError$2,
   openFindWidget,
   setText
@@ -7478,7 +7490,7 @@ const UiStrings = {
   Close: 'Close',
   Maximize: 'Maximize'
 };
-const create$8 = () => {
+const create$9 = () => {
   const $PanelTabs = document.createElement('div');
   $PanelTabs.className = 'PanelTabs';
   $PanelTabs.role = TabList;
@@ -7540,14 +7552,14 @@ const setTabsDom$1 = (state, dom) => {
 };
 
 // TODO add test for focus method
-const focus$5 = state => {
+const focus$6 = state => {
   object(state);
   if (!state.currentViewlet) {
     return;
   }
   state.currentViewlet.factory.focus(state.currentViewlet.state);
 };
-const dispose$5 = state => {
+const dispose$6 = state => {
   if (state.$PanelContent) {
     state.$PanelContent.remove();
     state.$PanelContent = undefined;
@@ -7592,9 +7604,9 @@ const setActionsDom$1 = (state, actions, childUid) => {
 const ViewletPanel = {
   __proto__: null,
   attachEvents: attachEvents$1,
-  create: create$8,
-  dispose: dispose$5,
-  focus: focus$5,
+  create: create$9,
+  dispose: dispose$6,
+  focus: focus$6,
   setActionsDom: setActionsDom$1,
   setSelectedIndex,
   setTabsDom: setTabsDom$1
@@ -7603,9 +7615,9 @@ const ViewletPanel = {
 const ViewletReferences = {
   __proto__: null,
   Events: ViewletLocationsEvents,
-  focus: focus$7,
+  focus: focus$8,
   handleError: handleError$3,
-  setFocusedIndex
+  setFocusedIndex: setFocusedIndex$1
 };
 
 const ViewletRunAndDebug = {
@@ -7620,7 +7632,7 @@ const handleLoadedMetaData = event => {
   target.play();
 };
 
-const create$7 = () => {
+const create$8 = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet ScreenCapture';
   return {
@@ -7640,7 +7652,7 @@ const setScreenCapture = (state, id) => {
 
 const ViewletScreenCapture = {
   __proto__: null,
-  create: create$7,
+  create: create$8,
   setScreenCapture
 };
 
@@ -7660,7 +7672,7 @@ const handleHeaderClick = event => {
   }
 };
 
-const create$6 = () => {
+const create$7 = () => {
   const $SideBarTitleAreaTitle = document.createElement('h2');
   $SideBarTitleAreaTitle.className = 'SideBarTitleAreaTitle';
   const $SideBarTitleArea = document.createElement('div');
@@ -7689,7 +7701,7 @@ const attachEvents = state => {
     [Click]: handleHeaderClick
   });
 };
-const dispose$4 = state => {
+const dispose$5 = state => {
   object(state);
   state.$SideBar.replaceChildren();
 };
@@ -7717,16 +7729,16 @@ const setActionsDom = (state, actions, parentId, eventMap = {}) => {
   }
   state.$Actions = $NewViewlet;
 };
-const focus$4 = async () => {
+const focus$5 = async () => {
   // await
 };
 
 const ViewletSideBar = {
   __proto__: null,
   attachEvents,
-  create: create$6,
-  dispose: dispose$4,
-  focus: focus$4,
+  create: create$7,
+  dispose: dispose$5,
+  focus: focus$5,
   setActionsDom,
   setTitle
 };
@@ -7838,7 +7850,7 @@ const getButtonIndex = $Node => {
   }
   return index;
 };
-const handleClick$2 = event => {
+const handleClick$3 = event => {
   const {
     target
   } = event;
@@ -7856,7 +7868,7 @@ const handleClick$2 = event => {
   if (index === -1) {
     return;
   }
-  handleClick$5(uid, index);
+  handleClick$6(uid, index);
 };
 const handleMouseOver = event => {
   const {
@@ -7900,7 +7912,7 @@ const handleInput$1 = event => {
 
 const ViewletSourceControlEvents = {
   __proto__: null,
-  handleClick: handleClick$2,
+  handleClick: handleClick$3,
   handleContextMenu: handleContextMenu$1,
   handleFocus,
   handleInput: handleInput$1,
@@ -7909,7 +7921,7 @@ const ViewletSourceControlEvents = {
   handleWheel: handleWheel$3
 };
 
-const focus$3 = state => {
+const focus$4 = state => {
   const {
     $Viewlet
   } = state;
@@ -7919,24 +7931,24 @@ const focus$3 = state => {
 const ViewletSourceControl = {
   __proto__: null,
   Events: ViewletSourceControlEvents,
-  focus: focus$3
+  focus: focus$4
 };
 
-const handleClick$1 = event => {
+const handleClick$2 = event => {
   const uid = fromEvent(event);
   const {
     clientX,
     clientY
   } = event;
-  handleClick$5(uid, clientX, clientY);
+  handleClick$6(uid, clientX, clientY);
 };
 
 const ViewletStatusBarEvents = {
   __proto__: null,
-  handleClick: handleClick$1
+  handleClick: handleClick$2
 };
 
-const create$5 = () => {
+const create$6 = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.id = 'StatusBar';
   $Viewlet.className = 'Viewlet StatusBar';
@@ -7944,18 +7956,18 @@ const create$5 = () => {
   $Viewlet.role = Status;
   $Viewlet.ariaRoleDescription = StatusBar$1;
   $Viewlet.ariaLive = 'off'; // see https://github.com/microsoft/vscode/issues/94677
-  $Viewlet.addEventListener('click', handleClick$1);
+  $Viewlet.addEventListener('click', handleClick$2);
   return {
     $Viewlet
   };
 };
-const setDom$1 = (state, dom) => {
+const setDom$2 = (state, dom) => {
   const {
     $Viewlet
   } = state;
   renderInto($Viewlet, dom, ViewletStatusBarEvents);
 };
-const focus$2 = state => {
+const focus$3 = state => {
   object(state);
   const {
     $Viewlet
@@ -7965,26 +7977,26 @@ const focus$2 = state => {
 
 const ViewletStatusBar = {
   __proto__: null,
-  create: create$5,
-  focus: focus$2,
-  setDom: setDom$1
+  create: create$6,
+  focus: focus$3,
+  setDom: setDom$2
 };
 
-const handleClick = event => {
+const handleClick$1 = event => {
   const uid = fromEvent(event);
-  handleClick$5(uid);
+  handleClick$6(uid);
 };
 
 const ViewletStorageEvents = {
   __proto__: null,
-  handleClick
+  handleClick: handleClick$1
 };
 
-const Events = ViewletStorageEvents;
+const Events$1 = ViewletStorageEvents;
 
 const ViewletStorage = {
   __proto__: null,
-  Events
+  Events: Events$1
 };
 
 const handleClickTab = event => {
@@ -7996,7 +8008,7 @@ const handleClickTab = event => {
   handleClickTab$2(uid, index);
 };
 
-const create$4 = () => {
+const create$5 = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet Terminals';
   return {
@@ -8023,10 +8035,421 @@ const setTabsDom = (state, dom) => {
 
 const ViewletTerminals = {
   __proto__: null,
-  create: create$4,
+  create: create$5,
   setTabsDom
 };
 
+const isInsideTitleBarMenu = $Element => {
+  return $Element.classList.contains('MenuItem') || $Element.classList.contains('Menu') || $Element.classList.contains('TitleBarTopLevelEntry') || $Element.classList.contains('TitleBarMenuBar');
+};
+const handleFocusOut = event => {
+  const {
+    relatedTarget,
+    target
+  } = event;
+  if (relatedTarget && isInsideTitleBarMenu(relatedTarget)) {
+    return;
+  }
+  if (target && isInsideTitleBarMenu(target)) {
+    return;
+  }
+  const uid = fromEvent(event);
+  closeMenu$1(uid);
+};
+const handlePointerOver = event => {
+  const {
+    target
+  } = event;
+  const index = getIndex(target);
+  const uid = fromEvent(event);
+  handleMouseOver$1(uid, index);
+};
+const handlePointerOut = event => {
+  const {
+    target
+  } = event;
+  const index = getIndex(target);
+  const uid = fromEvent(event);
+  handleMouseOut$1(uid, index);
+};
+const getIndex = $Target => {
+  if ($Target.classList.contains('TitleBarTopLevelEntry')) {
+    return getNodeIndex($Target);
+  }
+  return -1;
+};
+const handleClick = event => {
+  const {
+    button,
+    target
+  } = event;
+  const index = getIndex(target);
+  const uid = fromEvent(event);
+  handleClick$6(uid, button, index);
+};
+const getLevelAndIndex = event => {
+  const {
+    target
+  } = event;
+  const $Menu = target.closest('.Menu');
+  const index = findIndex($Menu, target);
+  const {
+    id
+  } = $Menu;
+  const level = Number.parseInt(id.slice(5));
+  return {
+    index,
+    level
+  };
+};
+const handleMenuMouseOver = event => {
+  // TODO just send pixel coordinates instead
+  const {
+    index,
+    level
+  } = getLevelAndIndex(event);
+  const uid = fromEvent(event);
+  handleMenuMouseOver$1(uid, level, index);
+};
+const handleMenuClick = event => {
+  const {
+    index,
+    level
+  } = getLevelAndIndex(event);
+  const uid = fromEvent(event);
+  handleMenuClick$1(uid, level, index);
+};
+const handleFocusIn$1 = event => {
+  const uid = fromEvent(event);
+  handleFocus$8(uid);
+};
+
+const ViewletTitleBarMenuBarEvents = {
+  __proto__: null,
+  handleClick,
+  handleFocusIn: handleFocusIn$1,
+  handleFocusOut,
+  handleMenuClick,
+  handleMenuMouseOver,
+  handlePointerOut,
+  handlePointerOver
+};
+
+const activeId = 'TitleBarEntryActive';
+const dispose$4 = state => {};
+const focus$2 = state => {
+  const {
+    $TitleBarMenuBar
+  } = state;
+  $TitleBarMenuBar.firstChild.focus();
+};
+
+// TODO set proper tabIndex 0 to focused item https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
+
+// TODO screenreader doesn't read top level label
+// when menu is open,
+// first item is selected,
+// right is clicked it just reads
+// "Expanded" instead of "Selection Expanded"
+
+// TODO sometimes screenreader reads too much (e.g. "File, expanded, opens menu, expanded")
+
+// TODO don't focus on separators
+
+// TODO don't focus on hover
+// only focus on hover when it has already focus or the menu has focus
+
+// TODO title bar menu bar is very inefficient:
+
+// before: 5 times recalculate style
+// 1.37ms Recalculate style
+// 83us Update Layer tree
+// 0.34ms paint
+// 0.79ms composite layer
+// 0.23ms Hit test
+// 1.42ms Recalculate style
+// 1.44ms Recalculate style
+// 2.08ms Recalculate style
+// 0.44ms Recalculate style
+// 0.52ms Layout
+// 0.16ms Update Layer Tree
+// 48us hit test
+// 16us Update Layer Tree
+// 0.36ms paint
+// 0.33ms composite layer
+
+// now: 2 recalculate styles
+// 0.43ms recalculate style
+// 0.53ms recalculate style
+// 0.19ms layout
+// 0.16ms update layer tree
+// 30us hit test
+// 17us update layer tree
+// 0.17ms paint
+// 0.19ms composite layers
+
+const setFocusedIndex = (state, unFocusIndex, focusIndex, oldIsMenuOpen, newIsMenuOpen) => {
+  object(state);
+  number(unFocusIndex);
+  number(focusIndex);
+  const {
+    $Viewlet
+  } = state;
+  if (focusIndex !== -1) {
+    $Viewlet.focus();
+    $Viewlet.setAttribute(AriaActiveDescendant, activeId);
+  }
+};
+
+// TODO the focus variable is confusing: false means keep focus in menubar, true means focus the menu
+const openMenu = (state, unFocusIndex, index, level, menuItems, menuFocusedIndex, focus, x, y, width, height) => {
+  object(state);
+  number(unFocusIndex);
+  number(index);
+  number(level);
+  array(menuItems);
+  number(menuFocusedIndex);
+  boolean(focus);
+  number(x);
+  number(y);
+  number(width);
+  number(height);
+  const {
+    $Viewlet
+  } = state;
+  // TODO this code is very unclean
+  $Viewlet.addEventListener('mouseenter', handlePointerOver, {
+    capture: true
+  });
+  if (unFocusIndex !== -1) {
+    $Viewlet.children[unFocusIndex].ariaExpanded = False;
+    $Viewlet.children[unFocusIndex].removeAttribute(AriaOwns);
+  }
+  $Viewlet.children[index].ariaExpanded = True;
+  const $$Menus = state$3.$$Menus;
+  state$3.$$Menus = [];
+  // @ts-expect-error
+  showControlled({
+    $Parent: $Viewlet.children[index],
+    handleFocusOut: handleFocusOut,
+    height,
+    items: menuItems,
+    level,
+    width,
+    x,
+    y
+  });
+  if (menuFocusedIndex !== -1) {
+    focusIndex(0, -1, menuFocusedIndex);
+  }
+  for (const $Menu of $$Menus) {
+    remove$1($Menu);
+  }
+};
+
+// TODO there need to be two variants of closeMenu: one just closes menu, another close menu and focuses top level entry
+const closeMenu = (state, unFocusIndex, index) => {
+  const {
+    $Viewlet
+  } = state;
+  if (unFocusIndex !== -1) {
+    $Viewlet.children[unFocusIndex].ariaExpanded = False;
+    $Viewlet.children[unFocusIndex].removeAttribute(AriaOwns);
+  }
+  if (index !== -1) {
+    $Viewlet.children[index].focus();
+  }
+  hide(/* restoreFocus */false);
+  $Viewlet.removeEventListener('mouseenter', handlePointerOver, {
+    capture: true
+  });
+};
+const create$Menu = () => {
+  const $Menu = document.createElement('div');
+  $Menu.className = 'Menu';
+  $Menu.role = Menu;
+  $Menu.tabIndex = -1;
+  // $ContextMenu.onmousedown = contextMenuHandleMouseDown
+  // TODO mousedown vs click? (click is usually better but mousedown is faster, why wait 100ms?)
+  // $Menu.addEventListener('mousedown', handleMouseDown)
+  // $Menu.addEventListener('mouseenter', handleMouseEnter, {
+  //   capture: true,
+  // })
+  // $Menu.addEventListener('mouseleave', handleMouseLeave, {
+  //   capture: true,
+  // })
+  // $Menu.addEventListener('mousemove', handleMouseMove, {
+  //   passive: true,
+  // })
+  // $Menu.onkeydown = handleKeyDown
+  // $Menu.addEventListener('focusout', handleFocusOut)
+  // $Menu.oncontextmenu = handleContextMenu
+  // $ContextMenu.onfocus = handleFocus
+  // $ContextMenu.onblur = handleBlur
+  return $Menu;
+};
+
+// TODO recycle menus
+const setMenus = (state, changes, uid) => {
+  array(changes);
+  number(uid);
+  state.$$Menus ||= [];
+  const {
+    $$Menus
+  } = state;
+  for (const change of changes) {
+    const type = change[0];
+    switch (type) {
+      case 'addMenu':
+        {
+          const menu = change[1];
+          const dom = change[2];
+          const $Menu = create$Menu();
+          set$3($Menu, uid);
+          $Menu.onmouseover = handleMenuMouseOver;
+          $Menu.onclick = handleMenuClick;
+          const {
+            focusedIndex,
+            height,
+            level,
+            width,
+            x,
+            y
+          } = menu;
+          setBounds$a($Menu, x, y, width, height);
+          renderInto($Menu, dom);
+          $Menu.id = `Menu-${level}`;
+          append$1($Menu);
+          if (focusedIndex !== -1) {
+            const $Child = $Menu.children[focusedIndex];
+            // @ts-expect-error
+            $Child.focus();
+          }
+          $$Menus.push($Menu);
+          break;
+        }
+      case 'closeMenus':
+        {
+          const keepCount = change[1];
+          const $$ToDispose = $$Menus.slice(keepCount);
+          for (const $ToDispose of $$ToDispose) {
+            remove$1($ToDispose);
+          }
+          $$Menus.length = keepCount;
+          break;
+        }
+      case 'updateMenu':
+        {
+          const menu = change[1];
+          const newLength = change[2];
+          const dom = change[3];
+          const {
+            focusedIndex,
+            height,
+            level,
+            width,
+            x,
+            y
+          } = menu;
+          const $Menu = $$Menus[level];
+          setBounds$a($Menu, x, y, width, height);
+          renderInto($Menu, dom);
+          if (level === newLength - 1) {
+            if (focusedIndex === -1) {
+              $Menu.focus();
+            } else {
+              const $Child = $Menu.children[focusedIndex];
+              $Child.focus();
+            }
+          }
+          break;
+        }
+      // No default
+    }
+  }
+};
+
+const ViewletTitleBarMenuBar = {
+  __proto__: null,
+  Events: ViewletTitleBarMenuBarEvents,
+  closeMenu,
+  dispose: dispose$4,
+  focus: focus$2,
+  openMenu,
+  setFocusedIndex,
+  setMenus
+};
+
+const activeClassName = 'TitleBarActive';
+const setFocused = (state, isFocused) => {
+  const {
+    $Viewlet
+  } = state;
+  $Viewlet.classList.toggle(activeClassName, isFocused);
+};
+
+const ViewletTitleBar = {
+  __proto__: null,
+  Events: ViewletTitleBarMenuBarEvents,
+  closeMenu,
+  dispose: dispose$4,
+  focus: focus$2,
+  openMenu,
+  setFocused,
+  setFocusedIndex,
+  setMenus
+};
+
+/**
+ *
+ * @param {MouseEvent} event
+ */
+const handleTitleBarButtonsClick = event => {
+  const {
+    target
+  } = event;
+  return ['handleClick', target.className];
+};
+const returnValue$1 = true;
+
+const ViewletTitleBarButtonsEvents = {
+  __proto__: null,
+  handleTitleBarButtonsClick,
+  returnValue: returnValue$1
+};
+
+const ViewletTitleBarButtons = {
+  __proto__: null,
+  Events: ViewletTitleBarButtonsEvents
+};
+
+const Events = {};
+
+const ViewletTitleBarIcon = {
+  __proto__: null,
+  Events
+};
+
+const create$4 = () => {
+  const $Viewlet = document.createElement('div');
+  $Viewlet.className = 'Viewlet TitleBarTitle';
+  return {
+    $Viewlet
+  };
+};
+const setDom$1 = (state, dom) => {
+  const {
+    $Viewlet
+  } = state;
+  renderInto($Viewlet, dom);
+};
+
+const ViewletTitleBarTitle = {
+  __proto__: null,
+  create: create$4,
+  setDom: setDom$1
+};
+
 const handleVideoError$1 = (code, message) => {
   send('Video.handleVideoError', code, message);
 };
@@ -8259,6 +8682,16 @@ const load$1 = moduleId => {
       return Promise.resolve().then(function () { return ViewletTerminal; });
     case Terminals:
       return ViewletTerminals;
+    case TitleBar:
+      return ViewletTitleBar;
+    case TitleBarButtons:
+      return ViewletTitleBarButtons;
+    case TitleBarIcon:
+      return ViewletTitleBarIcon;
+    case TitleBarMenuBar:
+      return ViewletTitleBarMenuBar;
+    case TitleBarTitle:
+      return ViewletTitleBarTitle;
     case Video:
       return ViewletVideo;
     case WebView:
@@ -8575,6 +9008,15 @@ const move = async (uid, selector, target) => {
   // @ts-ignore
   $Target.moveBefore($Source, null);
 };
+const attachWindowEvents = () => {
+  attachEvents$6(window, {
+    [Blur]: handleBlur$3,
+    [Focus]: handleFocus$2,
+    [KeyDown]: handleKeyDown$1,
+    [KeyUp]: handleKeyUp,
+    [Resize]: handleResize
+  });
+};
 
 // TODO this code is bad
 const sendMultiple = commands => {
@@ -8613,6 +9055,10 @@ const sendMultiple = commands => {
           ariaAnnounce(viewletId);
           break;
         }
+      case 'Viewlet.attachWindowEvents':
+        // @ts-ignore
+        attachWindowEvents(viewletId, method, ...args);
+        break;
       case 'Viewlet.create':
         {
           create$3(viewletId, method);
@@ -8879,6 +9325,8 @@ const getFn = command => {
       return appendViewlet;
     case 'Viewlet.ariaAnnounce':
       return ariaAnnounce;
+    case 'Viewlet.attachWindowEvents':
+      return attachWindowEvents;
     case 'Viewlet.create':
       return create$3;
     case 'Viewlet.createFunctionalRoot':
@@ -9162,7 +9610,7 @@ const commandMap = {
   'GetFilePathElectron.getFilePathElectron': getFilePathElectron,
   'HandleMessagePort.handleMessagePort': handleMessagePort,
   'InitData.getInitData': getInitData,
-  'IpcParent.create': create$w,
+  'IpcParent.create': create$x,
   'KeyBindings.setIdentifiers': setIdentifiers,
   'Layout.getBounds': getBounds,
   'Location.getHref': getHref,
@@ -9177,10 +9625,10 @@ const commandMap = {
   'Menu.showControlled': showControlled,
   'Menu.showMenu': showMenu,
   'Meta.setThemeColor': setThemeColor,
-  'Notification.create': create$v,
+  'Notification.create': create$w,
   'Notification.createWithOptions': createWithOptions,
-  'Notification.dispose': dispose$g,
-  'OffscreenCanvas.create': create$u,
+  'Notification.dispose': dispose$h,
+  'OffscreenCanvas.create': create$v,
   'OffscreenCanvas.create2': create2,
   'Open.openUrl': openUrl,
   'Performance.getMemory': getMemory,
@@ -9241,7 +9689,7 @@ const getConfiguredEditorWorkerUrl = () => {
 const editorWorkerUrl = getConfiguredEditorWorkerUrl() || `${assetDir}/packages/renderer-worker/node_modules/@lvce-editor/editor-worker/dist/editorWorkerMain.js`;
 
 const launchEditorWorker = async port => {
-  const ipc = await create$w({
+  const ipc = await create$x({
     method: ModuleWorkerWithMessagePort,
     name: 'Editor Worker',
     port,
@@ -9269,7 +9717,7 @@ const extensionHostWorkerUrl = getConfiguredExtensionHostWorkerUrl() || `${asset
 
 const launchExtensionHostWorker = async port => {
   const name = isElectron ? 'Extension Host (Electron)' : 'Extension Host';
-  const ipc = await create$w({
+  const ipc = await create$x({
     method: ModuleWorkerWithMessagePort,
     name,
     port,
@@ -9297,7 +9745,7 @@ const getConfiguredSyntaxHighlightingWorkerUrl = () => {
 const syntaxHighlightingWorkerUrl = getConfiguredSyntaxHighlightingWorkerUrl() || `${assetDir}/packages/renderer-worker/node_modules/@lvce-editor/syntax-highlighting-worker/dist/syntaxHighlightingWorkerMain.js`;
 
 const launchSyntaxHighlightingWorker = async port => {
-  const ipc = await create$w({
+  const ipc = await create$x({
     method: ModuleWorkerWithMessagePort,
     name: 'Syntax Highlighting Worker',
     port,
@@ -9330,7 +9778,7 @@ const launchWorkers = () => {
 const handleFocusIn = event => {
   preventDefault(event);
   const uid = fromEvent(event);
-  handleFocusIn$3(uid);
+  handleFocusIn$4(uid);
 };
 const handleBlur$1 = event => {
   const uid = fromEvent(event);
@@ -9693,6 +10141,7 @@ const main = async () => {
   state$1.modules[EditorRename] = ViewletEditorRename;
   state$1.modules[EditorSourceActions] = ViewletEditorSourceActions;
   state$1.modules[FindWidget] = ViewletFindWidget;
+  state$1.modules[TitleBar] = ViewletTitleBar;
   // TODO this is discovered very late
   await launchWorkers();
   setIpc(RendererWorker);