@lvce-editor/server 0.10.4 → 0.10.6

package/static/{a06e404 → 7860a11}/css/App.css

@@ -351,7 +351,7 @@ body {
 /*************/
 @font-face {
   font-family: 'Fira Code';
-  src: url(/a06e404/fonts/FiraCode-VariableFont.ttf) format('truetype');
+  src: url(/7860a11/fonts/FiraCode-VariableFont.ttf) format('truetype');
 }
 
 /* TODO check if contain strict also makes sense for html and body */
@@ -362,7 +362,6 @@ body {
 }
 
 body {
-  /* font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; */
   font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
   user-select: none;
 }
@@ -370,12 +369,9 @@ body {
 #Workbench {
   width: 100%;
   height: 100%;
-  /* width: 800px;
-  height: 600px; */
   contain: strict;
   font-size: 13px;
   line-height: 1.4;
-  /* display: grid; */
 }
 
 #TitleBar,
@@ -404,6 +400,7 @@ body {
    */
   position: fixed;
   backface-visibility: hidden;
+  will-change: transform;
 }
 
 .Hidden {
@@ -414,19 +411,6 @@ body {
   display: none !important;
 }
 
-/* TODO */
-*::-webkit-scrollbar {
-  /* width: 10px; */
-}
-*::-webkit-scrollbar-track {
-  /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
-}
-
-*::-webkit-scrollbar-thumb {
-  /* background-color: rgba(57, 71, 71, 0.6); */
-  /* outline: 1px solid slategrey; */
-}
-
 /*
  * Using the will-change attribute creates a separate layer.
  * Updating that layer will be faster since only that layer needs style recalculation and repainting (instead of the whole page)
@@ -523,13 +507,13 @@ body {
 }
 
 .MaskIconMinimize {
-  -webkit-mask-image: url(/a06e404/icons/chrome-minimize.svg);
+  -webkit-mask-image: url(/7860a11/icons/chrome-minimize.svg);
 }
 .MaskIconToggleMaximize {
-  -webkit-mask-image: url(/a06e404/icons/chrome-maximize.svg);
+  -webkit-mask-image: url(/7860a11/icons/chrome-maximize.svg);
 }
 .MaskIconClose {
-  -webkit-mask-image: url(/a06e404/icons/chrome-close.svg);
+  -webkit-mask-image: url(/7860a11/icons/chrome-close.svg);
 }
 /*************/
 /* ViewletTitleBar.css */
@@ -573,7 +557,6 @@ body {
   color: var(--StatusBarForeground, rgb(98, 112, 106));
   display: flex;
   justify-content: space-between;
-  box-sizing: border-box;
 }
 
 #StatusBarItemsLeft,
@@ -631,7 +614,7 @@ body {
 /*************/
 /* ViewletSourceControl.css */
 /*************/
-.Viewlet[data-viewlet-id='SourceControl']:focus {
+.SourceControl:focus {
   outline: 1px solid red;
   outline-offset: -1px;
 }
@@ -663,6 +646,49 @@ body {
   contain: strict;
 }
 /*************/
+/* ViewletSideBar.css */
+/*************/
+#SideBar {
+  background: var(--SideBarBackground, rgb(30, 35, 36));
+  color: var(--SideBarForeground, white);
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+}
+
+#SideBarTitleArea {
+  contain: strict;
+  padding: 0 8px;
+  line-height: 35px;
+  display: grid;
+  height: 35px;
+  grid-template-columns: auto 1fr;
+}
+
+#SideBarTitleAreaTitle {
+  font-size: 11px;
+  cursor: default;
+  font-weight: 400;
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  padding-left: 12px;
+}
+
+/* TODO */
+#SideBarTitleAreaButtons {
+  display: none;
+}
+
+#SideBarContent {
+  contain: strict;
+  /* padding: 10px; */
+  /* height: 100%; */
+  flex: 1;
+}
+/*************/
 /* ViewletSearch.css */
 /*************/
 .SearchHeader {
@@ -682,12 +708,12 @@ body {
 /*************/
 /* ViewletRunAndDebug.css */
 /*************/
-.Viewlet[data-viewlet-id='RunAndDebug'] {
+.RunAndDebug {
 }
 /*************/
 /* ViewletReferences.css */
 /*************/
-.Viewlet[data-viewlet-id='Locations'] {
+.Locations {
   display: flex;
   flex-direction: column;
 }
@@ -710,9 +736,155 @@ body {
   color: white;
 }
 /*************/
+/* ViewletQuickPick.css */
+/*************/
+/* TODO commit 9fcc3db9e37ec708459f3ba96715ca1286fc53b4 might be a bit faster
+   for quickpick to open (3.3ms recalculcate style vs 4.2ms now)  */
+
+/* TODO recalculate style is really slow in chrome for unknown reasons */
+#QuickPick {
+  position: absolute;
+  width: 600px;
+  top: 50px;
+  left: 50%;
+  margin-left: -300px; /* TODO maybe this should be 301px because of padding to be centered */
+  padding: 0 1px 6px;
+  background: var(--QuickPickBackground);
+  color: var(--ListForeground);
+  box-sizing: border-box;
+  /* TODO is this useful? */
+  contain: content;
+  /* TODO is this useful? */
+  /* transform: translate3d(0, 0, 0); */
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  pointer-events: all;
+  /* inset: 0; */
+  /* will-change: transform; */
+  box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px 2px;
+}
+
+#QuickPickHeader {
+  /* width: 100%; */
+  display: flex;
+  /* margin: 6px 6px 0; */
+  padding: 6px 6px 0;
+  /* contain: strict; */
+  height: 30px;
+  contain: strict;
+  /* margin-bottom: -2px; */
+}
+
+#QuickPickItems {
+  outline: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  contain: strict;
+}
+
+.ScrollWrapper {
+  width: 100%;
+  height: 220px;
+  /* TODO check if this makes a difference */
+  /* will-change: transform; needed for effective scrolling */
+  /* contain: strict; */
+  position: relative;
+  z-index: -1;
+}
+
+.Row {
+}
+
+.QuickPickItem {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  width: 100%;
+  height: 22px;
+  font-size: 13px;
+  margin: 0;
+  padding: 0 6px;
+  contain: strict;
+  gap: 4px;
+}
+
+
+.QuickPickItem:hover {
+  background: var(--ListHoverBackground);
+  color: var(--ListHoverForeground);
+}
+
+#QuickPickItemActive {
+  color: var(--ListActiveSelectionForeground);
+  background: var(--ListActiveSelectionBackground);
+}
+
+
+.QuickPickItemDescription {
+  font-size: 0.8rem;
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+#QuickPickCount {
+  /* Screen Reader Only */
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+/* TODO don't do nesting */
+.QuickPickItem .highlight {
+  color: darkgoldenrod;
+}
+
+/* TODO different way to check if it is file, className may be faster  */
+.QuickPickItem[data-language-id]::before {
+  content: ' ';
+  contain: strict;
+  width: 22px;
+  height: 22px;
+  background-size: 16px;
+  background-position: 0;
+  background-repeat: no-repeat;
+  padding-right: 6px;
+  width: 16px;
+  height: 22px;
+  line-height: inherit !important;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  vertical-align: top;
+  flex-shrink: 0;
+  background-size: cover;
+  background-size: 16px;
+  background-position: 0;
+}
+
+.QuickPickItem [class^='Icon'] {
+  contain: strict;
+  pointer-events: none;
+  background-size: 16px;
+  background-position: 0;
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+/* TODO remove icon from dom when it is not needed */
+.Iconundefined {
+  display: none;
+}
+/*************/
 /* ViewletProblems.css */
 /*************/
-.Viewlet[data-viewlet-id='Problems'] {
+.Problems {
   color: white;
 }
 /*************/
@@ -725,7 +897,7 @@ body {
   background: var(--PanelBackground);
 }
 
-.Viewlet[data-viewlet-id='Panel'] {
+.Panel {
   background: var(--PanelBackground);
 }
 
@@ -766,7 +938,7 @@ body {
 /*************/
 /* ViewletOutput.css */
 /*************/
-.Viewlet[data-viewlet-id='Output']:focus {
+.Output:focus {
   outline: 1px solid red;
   outline-offset: -1px;
 }
@@ -807,7 +979,7 @@ body {
   --KeyBindingsEditorColor: #e1e2de;
 }
 
-.Viewlet[data-viewlet-id='KeyBindings'] {
+.KeyBindings {
   color: var(--KeyBindingsEditorColor);
 }
 
@@ -880,14 +1052,13 @@ body {
 /*************/
 /* progress bar based on the vscode progress bar https://github.com/microsoft/vscode/blob/main/src/vs/base/browser/ui/progressbar/progressbar.css */
 
-.Viewlet[data-viewlet-id='Extensions'] {
+.Extensions {
   padding-top: 5px;
   display: flex;
   flex-direction: column;
 }
 
-/* .Viewlet[data-viewlet='Extensions']::before, */
-.Viewlet[data-viewlet='Extensions'][aria-busy='true']::before {
+.Extensions[aria-busy='true']::before {
   content: '';
   position: absolute;
   display: block;
@@ -1066,8 +1237,8 @@ body {
   height: 16px;
   contain: strict;
   background: #c5c5c5;
-  -webkit-mask: url(/a06e404/icons/settings-gear.svg) 50% 50% / 16px no-repeat;
-  mask: url(/a06e404/icons/settings-gear.svg) 50% 50% / 16px no-repeat;
+  -webkit-mask: url(/7860a11/icons/settings-gear.svg) 50% 50% / 16px no-repeat;
+  mask: url(/7860a11/icons/settings-gear.svg) 50% 50% / 16px no-repeat;
 }
 
 .NegativeMargin {
@@ -1076,7 +1247,7 @@ body {
 /*************/
 /* ViewletExtensionDetail.css */
 /*************/
-[data-viewlet-id='ExtensionDetail'] {
+.ExtensionDetail {
   color: white;
   user-select: text;
   overflow-y: auto;
@@ -1090,19 +1261,19 @@ body {
   flex-direction: column;
 }
 
-[data-viewlet-id='ExtensionDetail']::-webkit-scrollbar {
+.ExtensionDetail::-webkit-scrollbar {
   width: 10px;
 }
 
-[data-viewlet-id='ExtensionDetail']::-webkit-scrollbar-track {
+.ExtensionDetail::-webkit-scrollbar-track {
   background: transparent;
 }
 
-[data-viewlet-id='ExtensionDetail']::-webkit-scrollbar-thumb {
+.ExtensionDetail::-webkit-scrollbar-thumb {
   background: var(--EditorScrollBarBackground);
 }
 
-[data-viewlet-id='ExtensionDetail']::-webkit-scrollbar-thumb:hover {
+.ExtensionDetail::-webkit-scrollbar-thumb:hover {
 }
 
 .ExtensionDetailHeader {
@@ -1285,7 +1456,7 @@ body {
 /*************/
 /* ViewletEditorImage.css */
 /*************/
-[data-viewlet-id='EditorImage'] {
+.EditorImage {
   cursor: grab;
   touch-action: none;
 }
@@ -1305,13 +1476,13 @@ body {
   transform-origin: top left;
 }
 
-
 .Dragging {
-  cursor: grabbing ;
-}/*************/
+  cursor: grabbing;
+}
+/*************/
 /* ViewletEditorFindWidget.css */
 /*************/
-[data-viewlet-id='EditorFindWidget'] {
+.EditorFindWidget {
   background: var(--ActivityBarBackground);
   z-index: 1;
   color: wheat;
@@ -1348,318 +1519,205 @@ body {
   outline-offset: -1px;
 }
 /*************/
-/* ViewletDebugConsole.css */
+/* ViewletEditorCompletion.css */
 /*************/
-.Viewlet[data-viewlet-id='DebugConsole'] {
-  color: white;
-}
-/*************/
-/* ViewletActivityBar.css */
-/*************/
-#ActivityBar {
-  background: var(--ActivityBarBackground);
-  color: var(--ActivityBarForeground);
-  contain: strict;
+#Completions {
+  background: var(--CompletionListBackground, #282e2f);
+  color: var(--CompletionListForeground, white);
+  user-select: none;
+  font-size: 15px;
+  pointer-events: all;
+  border: 1px solid;
+  border-color: var(--CompletionListBorder, #95a29d);
+  font-family: var(--EditorFontFamily);
 }
 
-#ActivityBar {
-  /* display: grid; */
-  /* align-content: space-between; */
+.EditorCompletionItem {
+  height: 20px;
+  width: 100%;
   display: flex;
-  flex-direction: column;
-}
-
-/* #ActivityBar:focus-within {
-  border: 1px solid rgba(62, 100, 170, 0.575);
-} */
-
-/* #ActivityBarItemsTop,
-#ActivityBarItemsBottom {
-  contain: content;
-  display: grid;
-  grid-auto-rows: 48px;
-} */
-
-.ActivityBarItem {
-  position: relative;
-  outline: none;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: 24px;
-  mask-size: 24px;
-  /* background: var(--ActivityBarBackground); */
-  position: relative;
-  width: 48px;
-  height: 48px;
+  align-items: center;
+  white-space: nowrap;
   contain: strict;
-  /* margin-top: 100px; */
-  flex-shrink: 0;
+  gap: 5px;
 }
 
-.ActivityBarItem[data-viewlet-id='Settings'] {
-  margin-top: auto;
+.EditorCompletionItem:hover {
+  background: var(--CompletionListItemHoverBackground, rgba(64, 92, 80, 0.2));
 }
 
-.ActivityBarItem:hover {
-  /* background: #878f8c; */
+[class^='ColoredMaskIcon'] {
+  width: 20px;
+  height: 20px;
+  contain: strict;
+  display: block;
+  background: currentColor;
+  color: var(--TitleBarForeground, rgb(204, 204, 204));
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 16px;
+  -webkit-mask-position: 50% 50%;
+  pointer-events: none;
 }
 
-.ActivityBarItem[aria-selected='true'],
-.ActivityBarItem:hover {
-  color: var(--ActivityBarActiveForeground);
+.EditorCompletionItem.Focused,
+#CompletionListItemActive {
+  background: var(--CompletionListItemActiveBackground, #405c50);
+  color: var(--CompletionListItemActiveForeground);
 }
 
-.ActivityBarItem[aria-selected='true'] {
-  background: var(--ActivityBarActiveBackground);
-}
+/* TODO maybe put this all into editor */
 
-.ActivityBarItem:focus-visible {
-  /* background: var(--ActivityBarActiveBackground); */
-  color: var(--ActivityBarActiveForeground);
+/* Rename Widget */
+.RenameWidget {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: auto;
 }
 
-.ActivityBarItemIcon {
+/* Error Widget */
+.EditorWidgetError {
   position: absolute;
-  inset: 0;
-  background: currentColor;
-  /* filter: 1; */
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: 24px;
-  mask-size: 24px;
+  top: 0;
+  left: 0;
+  color: white;
+  background: rgb(37, 35, 35);
+  pointer-events: auto;
 }
 
-/* .ActivityBarItem:focus .ActivityBarItemIcon,
-.ActivityBarItem:hover .ActivityBarItemIcon,
-.ActivityBarItem[aria-selected] .ActivityBarItemIcon {
-  filter: none;
-} */
-
-.ActivityBarItemBadge {
-  background: var(--BadgeBackground);
-  border-radius: 100%;
-  height: 20px;
-  width: 20px;
-  line-height: 20px;
-  text-align: center;
+/* Alert  */
+.AriaAlert {
   position: absolute;
-  right: 0px;
-  bottom: 0px;
-  color: var(--BadgeForeground);
-  font-size: 9px;
-  font-weight: 600;
-}
-/*************/
-/* Viewlet.css */
-/*************/
-.Viewlet {
-  contain: strict;
-  width: 100%;
-  height: 100%;
+  left: -999em;
+  top: 0;
 }
 
-.ViewletError {
-  color: lightgray;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 1rem;
-  width: 100%;
-  text-align: center;
+.monaco-aria-container {
+  width: 0;
+  height: 0;
 }
 /*************/
-/* SideBar.css */
+/* ViewletDebugConsole.css */
 /*************/
-#SideBar {
-  background: var(--SideBarBackground, rgb(30, 35, 36));
-  color: var(--SideBarForeground, white);
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-}
-
-#SideBarTitleArea {
-  contain: strict;
-  padding: 0 8px;
-  line-height: 35px;
-  display: grid;
-  height: 35px;
-  grid-template-columns: auto 1fr;
-}
-
-#SideBarTitleAreaTitle {
-  font-size: 11px;
-  cursor: default;
-  font-weight: 400;
-  margin: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  padding-left: 12px;
-}
-
-/* TODO */
-#SideBarTitleAreaButtons {
-  display: none;
-}
-
-#SideBarContent {
-  contain: strict;
-  /* padding: 10px; */
-  /* height: 100%; */
-  flex: 1;
+.DebugConsole {
+  color: white;
 }
 /*************/
-/* QuickPick.css */
-/*************/
-/* TODO commit 9fcc3db9e37ec708459f3ba96715ca1286fc53b4 might be a bit faster
-   for quickpick to open (3.3ms recalculcate style vs 4.2ms now)  */
-
-/* TODO recalculate style is really slow in chrome for unknown reasons */
-#QuickPick {
-  position: absolute;
-  width: 600px;
-  top: 50px;
-  left: 50%;
-  margin-left: -300px; /* TODO maybe this should be 301px because of padding to be centered */
-  padding: 0 1px 6px;
-  background: var(--QuickPickBackground);
-  color: var(--ListForeground);
-  box-sizing: border-box;
-  /* TODO is this useful? */
-  contain: content;
-  /* TODO is this useful? */
-  /* transform: translate3d(0, 0, 0); */
-  display: flex;
-  flex-direction: column;
-  row-gap: 4px;
-  pointer-events: all;
-  /* inset: 0; */
-  /* will-change: transform; */
-  box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px 2px;
+/* ViewletActivityBar.css */
+/*************/
+#ActivityBar {
+  background: var(--ActivityBarBackground);
+  color: var(--ActivityBarForeground);
 }
 
-#QuickPickHeader {
-  /* width: 100%; */
+#ActivityBar {
+  /* display: grid; */
+  /* align-content: space-between; */
   display: flex;
-  /* margin: 6px 6px 0; */
-  padding: 6px 6px 0;
-  /* contain: strict; */
-  height: 30px;
-  contain: strict;
-  /* margin-bottom: -2px; */
+  flex-direction: column;
 }
 
-#QuickPickItems {
-  outline: 0;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  contain: strict;
-}
+/* #ActivityBar:focus-within {
+  border: 1px solid rgba(62, 100, 170, 0.575);
+} */
 
-.ScrollWrapper {
-  width: 100%;
-  height: 220px;
-  /* TODO check if this makes a difference */
-  /* will-change: transform; needed for effective scrolling */
-  /* contain: strict; */
+/* #ActivityBarItemsTop,
+#ActivityBarItemsBottom {
+  contain: content;
+  display: grid;
+  grid-auto-rows: 48px;
+} */
+
+.ActivityBarItem {
   position: relative;
-  z-index: -1;
+  outline: none;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 24px;
+  mask-size: 24px;
+  /* background: var(--ActivityBarBackground); */
+  position: relative;
+  width: 48px;
+  height: 48px;
+  contain: strict;
+  /* margin-top: 100px; */
+  flex-shrink: 0;
 }
 
-.Row {
+.ActivityBarItem[title='Settings'] {
+  margin-top: auto;
 }
 
-.QuickPickItem {
-  display: flex;
-  white-space: nowrap;
-  align-items: center;
-  width: 100%;
-  height: 22px;
-  font-size: 13px;
-  margin: 0;
-  padding: 0 6px;
-  contain: strict;
-  gap: 4px;
+.ActivityBarItem:hover {
+  /* background: #878f8c; */
 }
 
-
-.QuickPickItem:hover {
-  background: var(--ListHoverBackground);
-  color: var(--ListHoverForeground);
+.ActivityBarItem[aria-selected='true'],
+.ActivityBarItem:hover {
+  color: var(--ActivityBarActiveForeground);
 }
 
-#QuickPickItemActive {
-  color: var(--ListActiveSelectionForeground);
-  background: var(--ListActiveSelectionBackground);
+.ActivityBarItem[aria-selected='true'] {
+  background: var(--ActivityBarActiveBackground);
 }
 
-
-.QuickPickItemDescription {
-  font-size: 0.8rem;
-  opacity: 0.7;
-  pointer-events: none;
+.ActivityBarItem:focus-visible {
+  /* background: var(--ActivityBarActiveBackground); */
+  color: var(--ActivityBarActiveForeground);
 }
 
-#QuickPickCount {
-  /* Screen Reader Only */
+.ActivityBarItemIcon {
   position: absolute;
-  left: -10000px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+  inset: 0;
+  background: currentColor;
+  /* filter: 1; */
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 24px;
+  mask-size: 24px;
 }
 
-/* TODO don't do nesting */
-.QuickPickItem .highlight {
-  color: darkgoldenrod;
-}
+/* .ActivityBarItem:focus .ActivityBarItemIcon,
+.ActivityBarItem:hover .ActivityBarItemIcon,
+.ActivityBarItem[aria-selected] .ActivityBarItemIcon {
+  filter: none;
+} */
 
-/* TODO different way to check if it is file, className may be faster  */
-.QuickPickItem[data-language-id]::before {
-  content: ' ';
-  contain: strict;
-  width: 22px;
-  height: 22px;
-  background-size: 16px;
-  background-position: 0;
-  background-repeat: no-repeat;
-  padding-right: 6px;
-  width: 16px;
-  height: 22px;
-  line-height: inherit !important;
-  display: inline-block;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  vertical-align: top;
-  flex-shrink: 0;
-  background-size: cover;
-  background-size: 16px;
-  background-position: 0;
+.ActivityBarItemBadge {
+  background: var(--BadgeBackground);
+  border-radius: 100%;
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  text-align: center;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  color: var(--BadgeForeground);
+  font-size: 9px;
+  font-weight: 600;
 }
-
-.QuickPickItem [class^='Icon'] {
+/*************/
+/* Viewlet.css */
+/*************/
+.Viewlet {
   contain: strict;
-  pointer-events: none;
-  background-size: 16px;
-  background-position: 0;
-  background-repeat: no-repeat;
-  width: 16px;
-  height: 22px;
-  flex-shrink: 0;
+  flex: 1;
 }
 
-/* TODO remove icon from dom when it is not needed */
-.Iconundefined {
-  display: none;
+.ViewletError {
+  color: lightgray;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 1rem;
+  width: 100%;
+  text-align: center;
 }
 /*************/
 /* Notification.css */
@@ -1811,7 +1869,7 @@ body {
   width: 0.75rem;
   height: 0.75rem;
   background: orchid;
-  -webkit-mask-image: url(/a06e404/icons/check.svg);
+  -webkit-mask-image: url(/7860a11/icons/check.svg);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
@@ -1826,7 +1884,7 @@ body {
   height: 16px;
   content: '';
   display: block;
-  -webkit-mask-image: url(/a06e404/icons/chevron-right.svg);
+  -webkit-mask-image: url(/7860a11/icons/chevron-right.svg);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
@@ -2559,18 +2617,19 @@ body {
 #MainContent {
   contain: strict;
   flex: 1;
+  display: flex;
 }
 
-.Viewlet[data-viewlet-id='EditorText'] {
+.EditorText {
   color: white;
   white-space: pre;
 }
 
-.Viewlet[data-viewlet-id='EditorImage'] {
+.EditorImage {
   max-width: 100%;
 }
 
-.Viewlet[data-viewlet-id='Clock'] {
+.Clock {
   color: white;
 }
 /*************/
@@ -2731,7 +2790,6 @@ body {
   ); /* TODO variable name should match class name */
   /* TODO investigate perf */
   /* contain: children; */
-  /* transform: translate3d(0, 0, 0); */
 }
 
 .MainTab {
@@ -2809,7 +2867,7 @@ body {
   position: absolute;
   inset: 0;
   background: var(--TabActiveForeground);
-  -webkit-mask-image: url(/a06e404/icons/icon-close.svg);
+  -webkit-mask-image: url(/7860a11/icons/icon-close.svg);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
@@ -2848,84 +2906,6 @@ body {
   background: lightblue;
 }
 /*************/
-/* EditorCompletion.css */
-/*************/
-#Completions {
-  background: var(--CompletionListBackground, #282e2f);
-  color: var(--CompletionListForeground, white);
-  user-select: none;
-  font-size: 15px;
-  pointer-events: all;
-  border: 1px solid;
-  border-color: var(--CompletionListBorder, #95a29d);
-  font-family: var(--EditorFontFamily);
-}
-
-.EditorCompletionItem {
-  height: 20px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  contain: strict;
-  gap: 5px;
-}
-
-.EditorCompletionItem:hover {
-  background: var(--CompletionListItemHoverBackground, rgba(64, 92, 80, 0.2));
-}
-
-[class^='ColoredMaskIcon'] {
-  width: 20px;
-  height: 20px;
-  contain: strict;
-  display: block;
-  background: currentColor;
-  color: var(--TitleBarForeground, rgb(204, 204, 204));
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-size: 16px;
-  -webkit-mask-position: 50% 50%;
-  pointer-events: none;
-}
-
-.EditorCompletionItem.Focused,
-#CompletionListItemActive {
-  background: var(--CompletionListItemActiveBackground, #405c50);
-  color: var(--CompletionListItemActiveForeground);
-}
-
-/* TODO maybe put this all into editor */
-
-/* Rename Widget */
-.RenameWidget {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: auto;
-}
-
-/* Error Widget */
-.EditorWidgetError {
-  position: absolute;
-  top: 0;
-  left: 0;
-  color: white;
-  background: rgb(37, 35, 35);
-  pointer-events: auto;
-}
-
-/* Alert  */
-.AriaAlert {
-  position: absolute;
-  left: -999em;
-  top: 0;
-}
-
-.monaco-aria-container {
-  width: 0;
-  height: 0;
-}
-/*************/
 /* Editor.css */
 /*************/
 /* TODO this should not be global */
@@ -2941,7 +2921,6 @@ body {
   white-space: pre;
   font-size: var(--EditorFontSize);
   letter-spacing: var(--EditorLetterSpacing);
-  contain: strict;
   tab-size: 2;
   font-display: block;
   cursor: text;