@codingame/monaco-vscode-api 26.2.1 → 27.0.0

package/vscode/src/vs/workbench/browser/parts/editor/editorStatus.js

@@ -271,12 +271,12 @@ class StatusInputMode extends Disposable {
         );
     }
 }
-const nlsSingleSelectionRange = ( localize(3448, "Ln {0}, Col {1} ({2} selected)"));
-const nlsSingleSelection = ( localize(3449, "Ln {0}, Col {1}"));
-const nlsMultiSelectionRange = ( localize(3450, "{0} selections ({1} characters selected)"));
-const nlsMultiSelection = ( localize(3451, "{0} selections"));
-const nlsEOLLF = ( localize(3452, "LF"));
-const nlsEOLCRLF = ( localize(3453, "CRLF"));
+const nlsSingleSelectionRange = ( localize(3499, "Ln {0}, Col {1} ({2} selected)"));
+const nlsSingleSelection = ( localize(3500, "Ln {0}, Col {1}"));
+const nlsMultiSelectionRange = ( localize(3501, "{0} selections ({1} characters selected)"));
+const nlsMultiSelection = ( localize(3502, "{0} selections"));
+const nlsEOLLF = ( localize(3503, "LF"));
+const nlsEOLCRLF = ( localize(3504, "CRLF"));
 let EditorStatus = class EditorStatus extends Disposable {
     constructor(
         targetWindowId,
@@ -347,12 +347,12 @@ let EditorStatus = class EditorStatus extends Disposable {
         const activeTextEditorControl = getCodeEditor(this.editorService.activeTextEditorControl);
         if (!activeTextEditorControl) {
             return this.quickInputService.pick([{
-                label: ( localize(3454, "No text editor active at this time"))
+                label: ( localize(3505, "No text editor active at this time"))
             }]);
         }
         if (this.editorService.activeEditor?.isReadonly()) {
             return this.quickInputService.pick([{
-                label: ( localize(3455, "The active code editor is read-only."))
+                label: ( localize(3506, "The active code editor is read-only."))
             }]);
         }
         const picks = ( [
@@ -376,14 +376,14 @@ let EditorStatus = class EditorStatus extends Disposable {
         }));
         picks.splice(3, 0, {
             type: "separator",
-            label: ( localize(3456, "convert file"))
+            label: ( localize(3507, "convert file"))
         });
         picks.unshift({
             type: "separator",
-            label: ( localize(3457, "change view"))
+            label: ( localize(3508, "change view"))
         });
         const action = await this.quickInputService.pick(picks, {
-            placeHolder: ( localize(3458, "Select Action")),
+            placeHolder: ( localize(3509, "Select Action")),
             matchOnDetail: true
         });
         return action?.run();
@@ -391,12 +391,12 @@ let EditorStatus = class EditorStatus extends Disposable {
     updateTabFocusModeElement(visible) {
         if (visible) {
             if (!this.tabFocusModeElement.value) {
-                const text = ( localize(3459, "Tab Moves Focus"));
+                const text = ( localize(3510, "Tab Moves Focus"));
                 this.tabFocusModeElement.value = this.statusbarService.addEntry({
-                    name: ( localize(3460, "Accessibility Mode")),
+                    name: ( localize(3511, "Accessibility Mode")),
                     text,
                     ariaLabel: text,
-                    tooltip: ( localize(3461, "Disable Accessibility Mode")),
+                    tooltip: ( localize(3512, "Disable Accessibility Mode")),
                     command: "editor.action.toggleTabFocusMode",
                     kind: "prominent"
                 }, "status.editor.tabFocusMode", StatusbarAlignment.RIGHT, 100.7);
@@ -408,8 +408,8 @@ let EditorStatus = class EditorStatus extends Disposable {
     updateInputModeElement(inputMode) {
         if (inputMode === "overtype") {
             if (!this.inputModeElement.value) {
-                const text = ( localize(3462, "OVR"));
-                const name = ( localize(3463, "Enable Insert Mode"));
+                const text = ( localize(3513, "OVR"));
+                const name = ( localize(3514, "Enable Insert Mode"));
                 this.inputModeElement.value = this.statusbarService.addEntry({
                     name,
                     text,
@@ -426,12 +426,12 @@ let EditorStatus = class EditorStatus extends Disposable {
     updateColumnSelectionModeElement(visible) {
         if (visible) {
             if (!this.columnSelectionModeElement.value) {
-                const text = ( localize(3464, "Column Selection"));
+                const text = ( localize(3515, "Column Selection"));
                 this.columnSelectionModeElement.value = this.statusbarService.addEntry({
-                    name: ( localize(3465, "Column Selection Mode")),
+                    name: ( localize(3516, "Column Selection Mode")),
                     text,
                     ariaLabel: text,
-                    tooltip: ( localize(3466, "Disable Column Selection Mode")),
+                    tooltip: ( localize(3517, "Disable Column Selection Mode")),
                     command: "editor.action.toggleColumnSelection",
                     kind: "prominent"
                 }, "status.editor.columnSelectionMode", StatusbarAlignment.RIGHT, 100.8);
@@ -451,10 +451,10 @@ let EditorStatus = class EditorStatus extends Disposable {
             return;
         }
         const props = {
-            name: ( localize(3467, "Editor Selection")),
+            name: ( localize(3518, "Editor Selection")),
             text,
             ariaLabel: text,
-            tooltip: ( localize(3468, "Go to Line/Column")),
+            tooltip: ( localize(3519, "Go to Line/Column")),
             command: "workbench.action.gotoLine"
         };
         this.updateElement(
@@ -476,10 +476,10 @@ let EditorStatus = class EditorStatus extends Disposable {
             return;
         }
         const props = {
-            name: ( localize(3469, "Editor Indentation")),
+            name: ( localize(3520, "Editor Indentation")),
             text,
             ariaLabel: text,
-            tooltip: ( localize(3470, "Select Indentation")),
+            tooltip: ( localize(3521, "Select Indentation")),
             command: `changeEditorIndentation${this.targetWindowId}`
         };
         this.updateElement(
@@ -496,10 +496,10 @@ let EditorStatus = class EditorStatus extends Disposable {
             return;
         }
         const props = {
-            name: ( localize(3471, "Editor Encoding")),
+            name: ( localize(3522, "Editor Encoding")),
             text,
             ariaLabel: text,
-            tooltip: ( localize(3472, "Select Encoding")),
+            tooltip: ( localize(3523, "Select Encoding")),
             command: "workbench.action.editor.changeEncoding"
         };
         this.updateElement(
@@ -516,10 +516,10 @@ let EditorStatus = class EditorStatus extends Disposable {
             return;
         }
         const props = {
-            name: ( localize(3473, "Editor End of Line")),
+            name: ( localize(3524, "Editor End of Line")),
             text,
             ariaLabel: text,
-            tooltip: ( localize(3474, "Select End of Line Sequence")),
+            tooltip: ( localize(3525, "Select End of Line Sequence")),
             command: "workbench.action.editor.changeEOL"
         };
         this.updateElement(
@@ -536,10 +536,10 @@ let EditorStatus = class EditorStatus extends Disposable {
             return;
         }
         const props = {
-            name: ( localize(3475, "Editor Language")),
+            name: ( localize(3526, "Editor Language")),
             text,
             ariaLabel: text,
-            tooltip: ( localize(3476, "Select Language Mode")),
+            tooltip: ( localize(3527, "Select Language Mode")),
             command: "workbench.action.editor.changeLanguageMode"
         };
         this.updateElement(
@@ -556,10 +556,10 @@ let EditorStatus = class EditorStatus extends Disposable {
             return;
         }
         const props = {
-            name: ( localize(3477, "File Information")),
+            name: ( localize(3528, "File Information")),
             text,
             ariaLabel: text,
-            tooltip: ( localize(3478, "File Information"))
+            tooltip: ( localize(3529, "File Information"))
         };
         this.updateElement(
             this.metadataElement,
@@ -732,12 +732,12 @@ let EditorStatus = class EditorStatus extends Disposable {
             const model = editorWidget.getModel();
             if (model) {
                 const modelOpts = model.getOptions();
-                update.indentation = (modelOpts.insertSpaces ? modelOpts.tabSize === modelOpts.indentSize ? ( localize(3479, "Spaces: {0}", modelOpts.indentSize)) : ( localize(
-                    3480,
+                update.indentation = (modelOpts.insertSpaces ? modelOpts.tabSize === modelOpts.indentSize ? ( localize(3530, "Spaces: {0}", modelOpts.indentSize)) : ( localize(
+                    3531,
                     "Spaces: {0} (Tab Size: {1})",
                     modelOpts.indentSize,
                     modelOpts.tabSize
-                )) : ( localize(3481, "Tab Size: {0}", modelOpts.tabSize)));
+                )) : ( localize(3532, "Tab Size: {0}", modelOpts.tabSize)));
             }
         }
         this.updateState(update);
@@ -913,13 +913,13 @@ let ShowCurrentMarkerInStatusbarContribution = class ShowCurrentMarkerInStatusba
                 const text = `${this.getType(this.currentMarker)} ${line}`;
                 if (!this.statusBarEntryAccessor.value) {
                     this.statusBarEntryAccessor.value = this.statusbarService.addEntry({
-                        name: ( localize(3482, "Current Problem")),
+                        name: ( localize(3533, "Current Problem")),
                         text,
                         ariaLabel: text
                     }, "statusbar.currentProblem", StatusbarAlignment.LEFT);
                 } else {
                     this.statusBarEntryAccessor.value.update({
-                        name: ( localize(3482, "Current Problem")),
+                        name: ( localize(3533, "Current Problem")),
                         text,
                         ariaLabel: text
                     });
@@ -1017,7 +1017,7 @@ class ChangeLanguageAction extends Action2 {
     constructor() {
         super({
             id: ChangeLanguageAction.ID,
-            title: ( localize2(3483, "Change Language Mode")),
+            title: ( localize2(3534, "Change Language Mode")),
             f1: true,
             keybinding: {
                 weight: KeybindingWeight.WorkbenchContrib,
@@ -1025,9 +1025,9 @@ class ChangeLanguageAction extends Action2 {
             },
             precondition: ContextKeyExpr.not("notebookEditorFocused"),
             metadata: {
-                description: ( localize(3484, "Change the language mode of the active text editor.")),
+                description: ( localize(3535, "Change the language mode of the active text editor.")),
                 args: [{
-                    name: ( localize(3485, "The name of the language mode to change to.")),
+                    name: ( localize(3536, "The name of the language mode to change to.")),
                     constraint: value => typeof value === "string"
                 }]
             }
@@ -1047,7 +1047,7 @@ class ChangeLanguageAction extends Action2 {
         const activeTextEditorControl = getCodeEditor(editorService.activeTextEditorControl);
         if (!activeTextEditorControl) {
             await quickInputService.pick([{
-                label: ( localize(3454, "No text editor active at this time"))
+                label: ( localize(3505, "No text editor active at this time"))
             }]);
             return;
         }
@@ -1075,9 +1075,9 @@ class ChangeLanguageAction extends Action2 {
             const extensions = languageService.getExtensions(languageId).join(" ");
             let description;
             if (currentLanguageName === languageName) {
-                description = ( localize(3486, "({0}) - Configured Language", languageId));
+                description = ( localize(3537, "({0}) - Configured Language", languageId));
             } else {
-                description = ( localize(3487, "({0})", languageId));
+                description = ( localize(3538, "({0})", languageId));
             }
             return {
                 id: languageId,
@@ -1089,7 +1089,7 @@ class ChangeLanguageAction extends Action2 {
         }));
         picks.unshift({
             type: "separator",
-            label: ( localize(3488, "languages (identifier)"))
+            label: ( localize(3539, "languages (identifier)"))
         });
         let configureLanguageAssociations;
         let configureLanguageSettings;
@@ -1099,22 +1099,22 @@ class ChangeLanguageAction extends Action2 {
             if (galleryService.isEnabled()) {
                 galleryAction = toAction({
                     id: "workbench.action.showLanguageExtensions",
-                    label: ( localize(3489, "Search Marketplace Extensions for '{0}'...", ext)),
+                    label: ( localize(3540, "Search Marketplace Extensions for '{0}'...", ext)),
                     run: () => commandService.executeCommand("workbench.extensions.action.showExtensionsForLanguage", ext)
                 });
                 picks.unshift(galleryAction);
             }
             configureLanguageSettings = {
-                label: ( localize(3490, "Configure '{0}' language based settings...", currentLanguageName))
+                label: ( localize(3541, "Configure '{0}' language based settings...", currentLanguageName))
             };
             picks.unshift(configureLanguageSettings);
             configureLanguageAssociations = {
-                label: ( localize(3491, "Configure File Association for '{0}'...", ext))
+                label: ( localize(3542, "Configure File Association for '{0}'...", ext))
             };
             picks.unshift(configureLanguageAssociations);
         }
         const autoDetectLanguage = {
-            label: ( localize(3492, "Auto Detect"))
+            label: ( localize(3543, "Auto Detect"))
         };
         if (textModel && textModel.getValueLength() > 0) {
             picks.unshift(autoDetectLanguage);
@@ -1122,7 +1122,7 @@ class ChangeLanguageAction extends Action2 {
         const pick = typeof languageMode === "string" ? {
             label: languageMode
         } : await quickInputService.pick(picks, {
-            placeHolder: ( localize(3493, "Select Language Mode")),
+            placeHolder: ( localize(3544, "Select Language Mode")),
             matchOnDescription: true
         });
         if (!pick) {
@@ -1217,12 +1217,12 @@ class ChangeLanguageAction extends Action2 {
                 id: languageId,
                 label: languageName,
                 iconClasses: getIconClassesForLanguageId(languageId),
-                description: (languageId === currentAssociation) ? ( localize(3494, "Current Association")) : undefined
+                description: (languageId === currentAssociation) ? ( localize(3545, "Current Association")) : undefined
             };
         }));
         setTimeout(async () => {
             const language = await quickInputService.pick(picks, {
-                placeHolder: ( localize(3495, "Select Language Mode to Associate with '{0}'", extension || base))
+                placeHolder: ( localize(3546, "Select Language Mode to Associate with '{0}'", extension || base))
             });
             if (language) {
                 const fileAssociationsConfig = configurationService.inspect(FILES_ASSOCIATIONS_CONFIG);
@@ -1249,7 +1249,7 @@ class ChangeEOLAction extends Action2 {
     constructor() {
         super({
             id: "workbench.action.editor.changeEOL",
-            title: ( localize2(3496, "Change End of Line Sequence")),
+            title: ( localize2(3547, "Change End of Line Sequence")),
             f1: true
         });
     }
@@ -1259,13 +1259,13 @@ class ChangeEOLAction extends Action2 {
         const activeTextEditorControl = getCodeEditor(editorService.activeTextEditorControl);
         if (!activeTextEditorControl) {
             await quickInputService.pick([{
-                label: ( localize(3454, "No text editor active at this time"))
+                label: ( localize(3505, "No text editor active at this time"))
             }]);
             return;
         }
         if (editorService.activeEditor?.isReadonly()) {
             await quickInputService.pick([{
-                label: ( localize(3455, "The active code editor is read-only."))
+                label: ( localize(3506, "The active code editor is read-only."))
             }]);
             return;
         }
@@ -1279,7 +1279,7 @@ class ChangeEOLAction extends Action2 {
         }];
         const selectedIndex = (textModel?.getEOL() === "\n") ? 0 : 1;
         const eol = await quickInputService.pick(EOLOptions, {
-            placeHolder: ( localize(3497, "Select End of Line Sequence")),
+            placeHolder: ( localize(3548, "Select End of Line Sequence")),
             activeItem: EOLOptions[selectedIndex]
         });
         if (eol) {
@@ -1298,7 +1298,7 @@ class ChangeEncodingAction extends Action2 {
     constructor() {
         super({
             id: "workbench.action.editor.changeEncoding",
-            title: ( localize2(3498, "Change File Encoding")),
+            title: ( localize2(3549, "Change File Encoding")),
             f1: true
         });
     }
@@ -1312,29 +1312,29 @@ class ChangeEncodingAction extends Action2 {
         const activeTextEditorControl = getCodeEditor(editorService.activeTextEditorControl);
         if (!activeTextEditorControl) {
             await quickInputService.pick([{
-                label: ( localize(3454, "No text editor active at this time"))
+                label: ( localize(3505, "No text editor active at this time"))
             }]);
             return;
         }
         const activeEditorPane = editorService.activeEditorPane;
         if (!activeEditorPane) {
             await quickInputService.pick([{
-                label: ( localize(3454, "No text editor active at this time"))
+                label: ( localize(3505, "No text editor active at this time"))
             }]);
             return;
         }
         const encodingSupport = toEditorWithEncodingSupport(activeEditorPane.input);
         if (!encodingSupport) {
             await quickInputService.pick([{
-                label: ( localize(3499, "No file active at this time"))
+                label: ( localize(3550, "No file active at this time"))
             }]);
             return;
         }
         const saveWithEncodingPick = {
-            label: ( localize(3500, "Save with Encoding"))
+            label: ( localize(3551, "Save with Encoding"))
         };
         const reopenWithEncodingPick = {
-            label: ( localize(3501, "Reopen with Encoding"))
+            label: ( localize(3552, "Reopen with Encoding"))
         };
         if (!Language.isDefaultVariant()) {
             const saveWithEncodingAlias = "Save with Encoding";
@@ -1353,7 +1353,7 @@ class ChangeEncodingAction extends Action2 {
             action = reopenWithEncodingPick;
         } else {
             action = await quickInputService.pick([reopenWithEncodingPick, saveWithEncodingPick], {
-                placeHolder: ( localize(3458, "Select Action")),
+                placeHolder: ( localize(3509, "Select Action")),
                 matchOnDetail: true
             });
         }
@@ -1411,11 +1411,11 @@ class ChangeEncodingAction extends Action2 {
             picks.unshift({
                 id: guessedEncoding,
                 label: SUPPORTED_ENCODINGS[guessedEncoding].labelLong,
-                description: ( localize(3502, "Guessed from content"))
+                description: ( localize(3553, "Guessed from content"))
             });
         }
         const encoding = await quickInputService.pick(picks, {
-            placeHolder: isReopenWithEncoding ? ( localize(3503, "Select File Encoding to Reopen File")) : ( localize(3504, "Select File Encoding to Save with")),
+            placeHolder: isReopenWithEncoding ? ( localize(3554, "Select File Encoding to Reopen File")) : ( localize(3555, "Select File Encoding to Save with")),
             activeItem: items[typeof directMatchIndex === "number" ? directMatchIndex : typeof aliasMatchIndex === "number" ? aliasMatchIndex : -1]
         });
         if (!encoding) {
@@ -1431,11 +1431,11 @@ class ChangeEncodingAction extends Action2 {
                     confirmed
                 } = await dialogService.confirm({
                     message: ( localize(
-                        3505,
+                        3556,
                         "Do you want to revert the active text editor and reopen with a different encoding?"
                     )),
-                    detail: ( localize(3506, "This will discard any unsaved changes.")),
-                    primaryButton: ( localize(3507, "Discard Changes and Reopen"))
+                    detail: ( localize(3557, "This will discard any unsaved changes.")),
+                    primaryButton: ( localize(3558, "Discard Changes and Reopen"))
                 });
                 if (!confirmed) {
                     return;

package/vscode/src/vs/workbench/browser/parts/editor/editorTabsControl.js

@@ -23,7 +23,7 @@ import { DraggedEditorGroupIdentifier, isWindowDraggedOver, fillEditorsDragData
 import { EditorPane } from './editorPane.js';
 import { EditorsOrder, EditorInputCapabilities, EditorResourceAccessor, SideBySideEditor, Verbosity } from '../../../common/editor.js';
 import { ResourceContextKey, ActiveEditorPinnedContext, ActiveEditorFirstInGroupContext, ActiveEditorLastInGroupContext, ActiveEditorStickyContext, ActiveEditorAvailableEditorIdsContext, ActiveEditorCanSplitInGroupContext, SideBySideEditorActiveContext, ActiveEditorGroupLockedContext, applyAvailableEditorIds } from '../../../common/contextkeys.js';
-import { AnchorAlignment } from '../../../../base/browser/ui/contextview/contextview.js';
+import '../../../../base/browser/ui/contextview/contextview.js';
 import { assertReturnsDefined } from '../../../../base/common/types.js';
 import { isFirefox } from '../../../../base/browser/browser.js';
 import { isCancellationError } from '../../../../base/common/errors.js';
@@ -38,6 +38,7 @@ import { IHostService } from '../../../services/host/browser/host.service.js';
 import { ServiceCollection } from '../../../../platform/instantiation/common/serviceCollection.js';
 import { MarkdownString } from '../../../../base/common/htmlContent.js';
 import { applyDragImage } from '../../../../base/browser/ui/dnd/dnd.js';
+import { AnchorAlignment } from '../../../../base/common/layout.js';
 
 var EditorTabsControl_1;
 registerCss(editortabscontrol);
@@ -150,7 +151,7 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         this.editorActionsToolbar = this.editorActionsToolbarDisposables.add(this.instantiationService.createInstance(WorkbenchToolBar, container, {
             actionViewItemProvider: (action, options) => this.actionViewItemProvider(action, options),
             orientation: ActionsOrientation.HORIZONTAL,
-            ariaLabel: ( localize(3508, "Editor actions")),
+            ariaLabel: ( localize(3559, "Editor actions")),
             getKeyBinding: action => this.getKeybinding(action),
             actionRunner: this.editorActionsToolbarDisposables.add(( new EditorCommandsContextActionRunner(context))),
             anchorAlignmentProvider: () => AnchorAlignment.RIGHT,
@@ -235,7 +236,7 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         if (this.groupView.activeEditor) {
             let label = this.groupView.activeEditor.getName();
             if (this.groupsView.partOptions.showTabs === "multiple" && this.groupView.count > 1) {
-                label = ( localize(3509, "{0} (+{1})", label, this.groupView.count - 1));
+                label = ( localize(3560, "{0} (+{1})", label, this.groupView.count - 1));
             }
             applyDragImage(e, element, label);
         }

package/vscode/src/vs/workbench/browser/parts/editor/media/modalEditorPart.css

@@ -0,0 +1,142 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/** Modal Background Block */
+.monaco-modal-editor-block {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	/* z-index for modal editors: above titlebar (2500) but below quick input (2550) and dialogs (2575) */
+	z-index: 2540;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* Never allow content to escape above the title bar */
+	overflow: hidden;
+	background: rgba(0, 0, 0, 0.3);
+
+	.modal-editor-shadow {
+		box-shadow: 0 4px 32px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.2));
+		border-radius: 8px;
+		overflow: hidden;
+	}
+}
+
+/** Modal Editor Container */
+.monaco-modal-editor-block .modal-editor-part {
+	display: flex;
+	flex-direction: column;
+	min-width: 400px;
+	min-height: 300px;
+	background-color: var(--vscode-editor-background);
+	border: 1px solid var(--vscode-editorWidget-border, var(--vscode-contrastBorder));
+	border-radius: 8px;
+	overflow: hidden;
+
+	&:focus {
+		outline: none;
+	}
+
+	.content {
+		flex: 1;
+		position: relative;
+		overflow: hidden;
+	}
+}
+
+/** Modal Editor Header */
+.monaco-modal-editor-block .modal-editor-header {
+	display: grid;
+	grid-template-columns: 1fr auto 1fr;
+	align-items: center;
+	height: 32px;
+	min-height: 32px;
+	padding: 0 8px 0 10px;
+	color: var(--vscode-titleBar-activeForeground);
+	background-color: var(--vscode-titleBar-activeBackground);
+	border-bottom: 1px solid var(--vscode-titleBar-border, transparent);
+
+	/* Modal Editor Title */
+	.modal-editor-title {
+		grid-column: 1;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--vscode-titleBar-activeForeground);
+		overflow: hidden;
+
+		.monaco-icon-label {
+			color: inherit;
+			height: 32px;
+			line-height: 32px;
+
+			&::before,
+			& > .monaco-icon-label-iconpath {
+				height: 32px;
+			}
+		}
+	}
+
+	/* Modal Editor Navigation */
+	.modal-editor-navigation {
+		grid-column: 2;
+		display: flex;
+		align-items: center;
+		height: 22px;
+		border-radius: 4px;
+		border: 1px solid var(--vscode-commandCenter-border, transparent);
+		overflow: hidden;
+		user-select: none;
+		-webkit-user-select: none;
+
+		.modal-editor-nav-button.monaco-button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 22px;
+			height: 100%;
+			padding: 0;
+			border: none;
+			border-radius: 0;
+			background: none;
+			color: inherit;
+			opacity: 0.7;
+		}
+
+		.modal-editor-nav-button.monaco-button:hover:not(.disabled) {
+			opacity: 1;
+			background-color: var(--vscode-commandCenter-activeBackground);
+		}
+
+		.modal-editor-nav-button.monaco-button.disabled {
+			opacity: 0.3;
+		}
+
+		.modal-editor-nav-label {
+			font-size: 11px;
+			font-variant-numeric: tabular-nums;
+			opacity: 0.7;
+			white-space: nowrap;
+			padding: 0 6px;
+		}
+	}
+
+	/* Modal Editor Actions */
+	.modal-editor-action-container {
+		grid-column: 3;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+
+		.actions-container {
+			gap: 4px;
+
+			.codicon {
+				color: inherit;
+			}
+		}
+	}
+}

package/vscode/src/vs/workbench/browser/parts/editor/modalEditorPart.d.ts

@@ -0,0 +1,65 @@
+import { Event } from "../../../../base/common/event.js";
+import { DisposableStore } from "../../../../base/common/lifecycle.js";
+import { IConfigurationService } from "../../../../platform/configuration/common/configuration.service.js";
+import { IContextKeyService } from "../../../../platform/contextkey/common/contextkey.service.js";
+import { IInstantiationService } from "../../../../platform/instantiation/common/instantiation.js";
+import { IKeybindingService } from "../../../../platform/keybinding/common/keybinding.service.js";
+import { IStorageService } from "../../../../platform/storage/common/storage.service.js";
+import { IThemeService } from "../../../../platform/theme/common/themeService.service.js";
+import { IEditorGroupView, IEditorPartsView } from "./editor.js";
+import { EditorPart } from "./editorPart.js";
+import { IModalEditorPart } from "../../../services/editor/common/editorGroupsService.js";
+import { IEditorService } from "../../../services/editor/common/editorService.service.js";
+import { IWorkbenchEnvironmentService } from "../../../services/environment/common/environmentService.service.js";
+import { IHostService } from "../../../services/host/browser/host.service.js";
+import { IWorkbenchLayoutService } from "../../../services/layout/browser/layoutService.service.js";
+import { IModalEditorNavigation, IModalEditorPartOptions } from "../../../../platform/editor/common/editor.js";
+export interface ICreateModalEditorPartResult {
+    readonly part: ModalEditorPartImpl;
+    readonly instantiationService: IInstantiationService;
+    readonly disposables: DisposableStore;
+}
+export declare class ModalEditorPart {
+    private readonly editorPartsView;
+    private readonly instantiationService;
+    private readonly editorService;
+    private readonly layoutService;
+    private readonly keybindingService;
+    private readonly hostService;
+    private readonly environmentService;
+    constructor(editorPartsView: IEditorPartsView, instantiationService: IInstantiationService, editorService: IEditorService, layoutService: IWorkbenchLayoutService, keybindingService: IKeybindingService, hostService: IHostService, environmentService: IWorkbenchEnvironmentService);
+    create(options?: IModalEditorPartOptions): Promise<ICreateModalEditorPartResult>;
+}
+declare class ModalEditorPartImpl extends EditorPart implements IModalEditorPart {
+    readonly modalElement: HTMLElement;
+    private static COUNTER;
+    private readonly _onWillClose;
+    readonly onWillClose: Event<void>;
+    private readonly _onDidChangeMaximized;
+    readonly onDidChangeMaximized: Event<boolean>;
+    private readonly _onDidChangeNavigation;
+    readonly onDidChangeNavigation: Event<IModalEditorNavigation | undefined>;
+    private _maximized;
+    get maximized(): boolean;
+    private _navigation;
+    get navigation(): IModalEditorNavigation | undefined;
+    private readonly optionsDisposable;
+    private previousMainWindowActiveElement;
+    constructor(windowId: number, editorPartsView: IEditorPartsView, modalElement: HTMLElement, options: IModalEditorPartOptions | undefined, instantiationService: IInstantiationService, themeService: IThemeService, configurationService: IConfigurationService, storageService: IStorageService, layoutService: IWorkbenchLayoutService, hostService: IHostService, contextKeyService: IContextKeyService);
+    create(parent: HTMLElement, options?: object): void;
+    private enforceModalPartOptions;
+    notifyActiveEditorChanged(): void;
+    updateOptions(options?: IModalEditorPartOptions): void;
+    toggleMaximized(): void;
+    protected handleContextKeys(): void;
+    removeGroup(group: number | IEditorGroupView, preserveFocus?: boolean): void;
+    private doRemoveLastGroup;
+    protected saveState(): void;
+    close(options?: {
+        mergeAllEditorsToMainPart?: boolean;
+    }): boolean;
+    private doClose;
+    private mergeGroupsToMainPart;
+    dispose(): void;
+}
+export {};