Updates docs

CONTRIBUTING.md

@@ -1,15 +1,17 @@
-# Contributing
+# Contributing / Dev Setup
 
-Checkout [MAINTAINING.md](./MAINTAINING.md) for common maintaining tasks.
+## Source Code Structure
 
-## A brief explanation on the source code structure
+It is important to understand that the Monaco Editor _Core_ is built directly from the [VS Code source code](https://github.com/microsoft/vscode).
+The Monaco Editor then enhances the Monaco Editor Core with some basic language features.
 
-This repository contains source code only for Monaco Editor Languages, the core editor source lives in the [vscode repository](https://github.com/microsoft/vscode).
+This diagram describes the relationships between the repositories and the npm packages:
 
-| repository                                                  | npm module                                                             | explanation                                                             |
-| ----------------------------------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| [vscode](https://github.com/microsoft/vscode)               | [monaco-editor-core](https://www.npmjs.com/package/monaco-editor-core) | editor core functionality (language agnostic) is shipped out of vscode. |
-| [monaco-editor](https://github.com/microsoft/monaco-editor) | [monaco-editor](https://www.npmjs.com/package/monaco-editor)           | the Monaco Editor.                                                      |
+![](./docs/code-structure.dio.svg)
+
+By default, `monaco-editor-core` is installed from npm (through the initial `npm install`), so you can work on Monaco Editor language features without having to build the core editor / VS Code.
+The nightly builds build a fresh version of `monaco-editor-core` from the `main` branch of VS Code.
+For a stable release, the commit specified in `vscodeRef` in [package.json](./package.json) specifies the commit of VS Code that is used to build `monaco-editor-core`.
 
 ## Contributing a new tokenizer / a new language
 
@@ -27,15 +29,62 @@ import './{myLang}/{myLang}.contribution';
 
 ## Debugging / Developing The Core Editor
 
-TODO
+To debug core editor issues.
+
+This can be done directly from the VS Code repository and does not involve the monaco editor repository.
+
+- Clone the [VS Code repository](https://github.com/microsoft/vscode): `git clone https://github.com/microsoft/vscode`
+- Open the repository in VS Code: `code vscode`
+- Run `yarn install`
+- Select and run the launch configuration "Monaco Editor Playground" (this might take a while, as it compiles the sources):
+
+  ![](./docs/launch%20config.png)
+
+- Now you can set breakpoints and change the source code
+
+  ![](./docs/debugging-core.gif)
+
+- Optionally, you can build `monaco-editor-core` and link it to the monaco editor repository:
+
+  ```bash
+  # builds out-monaco-editor-core
+  > yarn gulp editor-distro
+
+  > cd out-monaco-editor-core
+  > npm link
+  > cd ../path/to/monaco-editor
+
+  # symlinks the monaco-editor-core package to the out-monaco-editor-core folder we just built
+  > npm link monaco-editor-core
+  ```
 
 ## Debugging / Developing Language Support
 
-TODO
+To debug bundled languages, such as JSON, HTML or TypeScript/JavaScript.
+
+- Clone the [monaco editor repository](https://github.com/microsoft/monaco-editor): `git clone https://github.com/microsoft/monaco-editor`
+- Open the repository in VS Code: `code monaco-editor`
+- Run `npm install`
+- Select and run the launch configuration "Monaco Editor Playground" (this might take a while, as it compiles the sources):
 
-## Running the editor from source
+  ![](./docs/launch%20config.png)
 
-TODO
+- Now you can set breakpoints and change the source code
+
+  ![](./docs/debugging-languages.gif)
+
+- Optionally, you can build `monaco-editor` and link it if you want to test your changes in a real application:
+
+  ```bash
+  # builds out/monaco-editor
+  > npm run build-monaco-editor
+
+  > cd out/monaco-editor
+  > npm link
+
+  > cd ../path/to/my-app
+  > npm link monaco-editor
+  ```
 
 ## Running the editor tests
 
@@ -53,4 +102,14 @@ TODO
 
 ## Running the website locally
 
-TOD
+```bash
+cd website
+yarn install
+yarn watch
+```
+
+No webpack logs the path to the website.
+
+## Maintaining
+
+Checkout [MAINTAINING.md](./MAINTAINING.md) for common maintaining tasks (for maintainers only).

MAINTAINING.md

@@ -1,6 +1,6 @@
 # Maintaining
 
-(For maintainers)
+(For maintainers only)
 
 - [P1 Inbox Queue](https://github.com/microsoft/monaco-editor/issues?q=is%3Aissue+is%3Aopen+-label%3Afeature-request+-label%3Aquestion+-label%3Aupstream+-label%3A%22help+wanted%22+-label%3A%22info-needed%22+-label%3A%22as-designed%22+-label%3Abug+-label%3A*question+)
 - [Inbox Queue](https://github.com/microsoft/monaco-editor/issues?q=is%3Aissue+is%3Aopen+no%3Aassignee+-label%3Afeature-request+-label%3Aquestion+-label%3Aupstream+-label%3A%22help+wanted%22+-label%3A%22info-needed%22+-label%3A%22as-designed%22+)

README.md

@@ -1,29 +1,32 @@
 # Monaco Editor
 
-[![Build Status](https://dev.azure.com/ms/monaco-editor/_apis/build/status/microsoft.monaco-editor?label=website)](https://dev.azure.com/ms/monaco-editor/_build/latest?definitionId=3)
+[![Versions](https://img.shields.io/npm/v/monaco-editor)](https://www.npmjs.com/package/monaco-editor)
+[![Versions](https://img.shields.io/npm/v/monaco-editor/next)](https://www.npmjs.com/package/monaco-editor)
+[![Feature Requests](https://img.shields.io/github/issues/microsoft/monaco-editor/feature-request.svg)](https://github.com/microsoft/monaco-editor/issues?q=is%3Aopen+is%3Aissue+label%3Afeature-request+sort%3Areactions-%2B1-desc)
+[![Bugs](https://img.shields.io/github/issues/microsoft/monaco-editor/bug.svg)](https://github.com/microsoft/monaco-editor/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3Abug)
 
-The Monaco Editor is the code editor which powers [VS Code](https://github.com/microsoft/vscode), with the features better described [here](https://code.visualstudio.com/docs/editor/editingevolved).
-
-Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the `monaco-editor` npm module and the implementation for various language supports.
+The Monaco Editor is the fully featured code editor from [VS Code](https://github.com/microsoft/vscode). Check out the [VS Code docs](https://code.visualstudio.com/docs/editor/editingevolved) to see some of the supported features.
 
 ![image](https://user-images.githubusercontent.com/5047891/94183711-290c0780-fea3-11ea-90e3-c88ff9d21bd6.png)
 
 ## Try it out
 
-Try the editor out [on our website](https://microsoft.github.io/monaco-editor/playground.html).
+Try out the editor and see various examples [in our interactive playground](https://microsoft.github.io/monaco-editor/playground.html).
+
+The playground is the best way to learn about how to use the editor, which features is supports, to try out different versions and to create minimal reproducible examples for bug reports.
 
 ## Installing
 
 ```
-$ npm install monaco-editor
+> npm install monaco-editor
 ```
 
 You will get:
 
-- inside `esm`: ESM version of the editor (compatible with e.g. webpack)
-- inside `dev`: AMD bundled, not minified
-- inside `min`: AMD bundled, and minified
-- inside `min-maps`: source maps for `min`
+- inside `/esm`: ESM version of the editor (compatible with e.g. webpack)
+- inside `/dev`: AMD bundled, not minified
+- inside `/min`: AMD bundled, and minified
+- inside `/min-maps`: source maps for `min`
 - `monaco.d.ts`: this specifies the API of the editor (this is what is actually versioned, everything else is considered private and might break with any release).
 
 It is recommended to develop against the `dev` version, and in production to use the `min` version.
@@ -79,9 +82,10 @@ No.
 
 - Please see https://github.com/bolinfest/monaco-tm which puts together `monaco-editor`, `vscode-oniguruma` and `vscode-textmate` to get TM grammar support in the editor.
 
-## Development setup
+## Contributing / Local Development
 
-Please see [CONTRIBUTING](./CONTRIBUTING.md)
+We are welcoming contributions from the community!
+Please see [CONTRIBUTING](./CONTRIBUTING.md) for details how you can contribute effectively, how you can run the editor from sources and how you can debug and fix issues.
 
 ## Code of Conduct
 

docs/code-structure.dio.svg

@@ -0,0 +1,275 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="601px" height="391px" viewBox="-0.5 -0.5 601 391" content="&lt;mxfile&gt;&lt;diagram id=&quot;cU4r2CM7fKKh95v30pN0&quot; name=&quot;Page-1&quot;&gt;1Vpdk9osFP41XrqThBj1sqvd9qKd6XTfmbaXmKChjSED8au//j0kkA+IdtXo7t6sgcAJPOechwfYAZqt9584zuKvLCLJwHOi/QDNB57nOhMHfmTNoayZ+KpixWmkGtUVz/Qv0T1V7YZGRLQa5owlOc3alSFLUxLmrTrMOdu1my1Z0v5qhlfEqngOcWLX/qBRHqtZeOO6/jOhq1h/2Q2m5Zs11o3VTESMI7ZrVKGPAzTjjOXl03o/I4kET+NS9ns68rYaGCdp/pIOHlLjyA96ciSCuapiylL4eYzzdQIlFx7JnuY/4dl5GKnSr8abuXSxowsHXUhzfmh0ksVfzXd1t6Kk+5VDk+M5OjtVJdiGh7pVoCIC8xXRzcYVthCUhK0JfAfacJLgnG7b9rGKjlXVrgYQHhSG3Xgir7SxxclGWf3G2bYIVxhSTOrByrjjneh/wQtImBbsOKGrFJ5DmDnhULElPKcQkR/UizWNImnjkRNB/+JFYU+CmDGa5sWMRo+D0byCVRog+0FHuqjOdZA2AS8DxkZSWXIeIJnLXiq3FSAvRlqZ/iaHXdsdul7L6tD32ybYcinA26arqhG+yHs6dBre+0Tzz5sF1H0nGRM0Z3KUQQJoPC7Ae8FKPq1pyJlgS/j+01aEwHeWX3cxzclzhoso3QEttv171CdWsB+F3tXuUhAFU1Xe1RTlauaNG/QUONfHvTu2kEuzdTH+8I9kUxszluKQDUkkMR2GjJ+N2ZImyYwlkEQVUZlZkbPsNuBWK9a/wHWdPtCdXh+XLbzPhbob1w4H9AA1mvw7jpHfBbXbA9TazxcG8ivkPZq28XIdryM2gxslPhrdV0B4ZykIkkYfpN6TK2eChaBhWflEk7YHzhUZlexsiIyGgLtMZBRdYbz40Gig1u+jK6M/NphpZCg+sz0y2k8cw9/lCC5dQ5G9EjQUUILT1aZII2dJcL7htSASdmrRNEw2EU1X0Oi/QwYSnNMM5jKTgSxDqngKhSgffguW2kZwGsE7BtqLi85Yfctyq0yvE3ILTYO2MlLGr9VbuovWW1p/9aq39EcasfIEezHCbS+CKcHDV6DXkdPOl3HXyu90sOuoj9XIv5RdG9xaM203u0ZYxCTSBm7GmF4f7GgFanUmoOnM1FslQ6te10WrrcLmRAAlLSSJxYCZPIaAP4sNTaJ3RzVlrJ2gGteZGJsw1AvXGNJ6aBjoh2nsffkppinWGXu1uL+Yuy/bjC9lGyXLzhVz47PE3J14SgnaXo+PLlJ2gdbWmtrMszwzjwLnVPvrlZ29NZqTLVTMSQbIkzQ8vD/SO+LZivTGAGubnrx+SK9tdHIDzkPBxel8h2y+awK/ztYsMBMSnU7gkaFlpqjnBJ5YCaxONR7KrdM7S94ywE9tjnyt2Qxtce3uqG01GN9CsYxsxUKTjvMnMHTSi7cXLYH7iqIF3fkG640cQKE3cwBl7sCm0/MOoIz217OcbyWOdQVXXjc4+sy2PoF6bwx4+jZu6Dw4vtvrfdxNBYt9HCRimmUg+o+76A4Xa+aJadfFWtf5un8+vUGxvvwvIaz/hQJ9/B8=&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <path d="M 90 60 L 90 143.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 90 148.88 L 86.5 141.88 L 90 143.63 L 93.5 141.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 74px; margin-left: 80px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
+                                Provides the source for
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="80" y="77" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
+                    Provides the source for
+                </text>
+            </switch>
+        </g>
+        <rect x="0" y="0" width="180" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 30px; margin-left: 1px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                GitHub Repository
+                                <br/>
+                                microsoft/vscode
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="90" y="34" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    GitHub Repository...
+                </text>
+            </switch>
+        </g>
+        <rect x="0" y="150" width="180" height="100" fill="none" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 157px; margin-left: 1px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                npm package
+                                <br/>
+                                monaco-editor-core
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="90" y="169" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    npm package...
+                </text>
+            </switch>
+        </g>
+        <rect x="260" y="0" width="340" height="110" fill="none" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 338px; height: 1px; padding-top: 7px; margin-left: 261px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                GitHub Repository
+                                <br/>
+                                microsoft/monaco-editor
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="430" y="19" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    GitHub Repository...
+                </text>
+            </switch>
+        </g>
+        <rect x="270" y="330" width="160" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 360px; margin-left: 271px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                npm package
+                                <br/>
+                                monaco-editor
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="350" y="364" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    npm package...
+                </text>
+            </switch>
+        </g>
+        <path d="M 430 100 L 358 154 Q 350 160 342 166 L 318 184 Q 310 190 310 200 L 310 323.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 310 328.88 L 306.5 321.88 L 310 323.63 L 313.5 321.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 231px; margin-left: 290px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
+                                Provides language feature sources
+                                <br/>
+                                including TypeScript, html, css, json
+                                <br/>
+                                and others
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="290" y="234" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
+                    Provides language feature sources...
+                </text>
+            </switch>
+        </g>
+        <rect x="380" y="50" width="100" height="50" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 75px; margin-left: 381px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Folder
+                                <br/>
+                                /src
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="430" y="79" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Folder...
+                </text>
+            </switch>
+        </g>
+        <path d="M 270 75 L 96.25 108.78" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
+        <path d="M 91.1 109.79 L 97.3 105.01 L 96.25 108.78 L 98.64 111.89 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 91px; margin-left: 190px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
+                                Describe how to build
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="190" y="94" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
+                    Describe how to build
+                </text>
+            </switch>
+        </g>
+        <rect x="270" y="50" width="100" height="50" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 75px; margin-left: 271px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Folder
+                                <br/>
+                                /scripts
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="320" y="79" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Folder...
+                </text>
+            </switch>
+        </g>
+        <path d="M 515 100 L 515 120 Q 515 130 505 130 L 150 130 Q 140 130 138.27 136.91 L 136.54 143.82" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
+        <path d="M 135.27 148.92 L 133.57 141.28 L 136.54 143.82 L 140.36 142.97 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 120px; margin-left: 181px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
+                                Dev Dependency
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="181" y="124" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
+                    Dev Dependency
+                </text>
+            </switch>
+        </g>
+        <path d="M 540 100 L 540 130 Q 540 140 531.68 145.55 L 398.32 234.45 Q 390 240 390 250 L 390 323.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 390 328.88 L 386.5 321.88 L 390 323.63 L 393.5 321.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 300px; margin-left: 391px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
+                                package.json
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="391" y="303" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
+                    package.json
+                </text>
+            </switch>
+        </g>
+        <rect x="490" y="50" width="100" height="50" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 75px; margin-left: 491px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                File
+                                <br/>
+                                /package.json
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="540" y="79" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    File...
+                </text>
+            </switch>
+        </g>
+        <path d="M 90 240 L 90 290 Q 90 300 100 300 L 300 300 Q 310 300 310 310 L 310 323.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 310 328.88 L 306.5 321.88 L 310 323.63 L 313.5 321.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 290px; margin-left: 179px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
+                                Provides the core editor sources
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="179" y="294" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
+                    Provides the core editor sources
+                </text>
+            </switch>
+        </g>
+        <rect x="10" y="200" width="160" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 220px; margin-left: 11px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                shipped sources
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="90" y="224" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    shipped sources
+                </text>
+            </switch>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>

docs/out-folders.dio.svg

@@ -0,0 +1,285 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="771px" height="431px" viewBox="-0.5 -0.5 771 431" content="&lt;mxfile&gt;&lt;diagram id=&quot;cU4r2CM7fKKh95v30pN0&quot; name=&quot;Page-1&quot;&gt;1VpLk6I6FP41bKZKCxKey7ZtZxbTVVPVi3tniZDW3AFiRWx1fv0cJEEgofGBo3fV5JATcx7fx5dUG/g53X3l4Wr5ymKSGMiMdwaeGghZKHDhT2HZC4tp+qVlwWksbEfDG/1N5ERh3dCYrBsTc8aSnK6axohlGYnyhi3knG2b095Z0vzVVbggiuEtChPV+g+N82Vp9ZF3tH8jdLGUv2y5QfkmDeVkEcl6GcZsWzPhFwM/c8by8indPZOkyJ7MS+k363hbbYyTLD/FwRYb+wiTjQguW6WHJaJfRRaQm8BCkzmHp0XxlLIsjNiIxDRnXASR72VmtkuakzdwLsZbKD94LPM0gZEFjx+E5xTy+JTQRQa2nBUT3mmSPLMElsPTjGXgOhG7gulk1xmaVSUMWo2wlOR8D1OEg2s5pYvsMkfkfHssGcJizrJWLhSIiaFok0W19jGT8CCSeRiy+X9FoyEzCeckKd3KRWSmUW2zogi1vJEYGkwMRQpqaSM7mv9be/4Jz+bYEaNpEbApB3s5yGDHhdPIHJumJS2lK/ZsaTh6H0YN9x+EU4iccGHsKAFEwjY8EqEIEOQhXxAxS6C7CPLTynGShDn9aKJMVwXh+oPRLD9WvCqcrHi7kOWehFerltU2dOWFoaiwHkZYQVG+jhRwFPF/L/ujXt1QgCGCrBapVlCS0jgu1phwsqa/w/lhvaIeqyKSQ2zOxHCm2gqhTigJdhTrNQhIhyfoI2QjwRdXVkpCU3qw9/c1ObMmKpcpRSDr+YYCtyPz5e1VW45zMeedCDqziTenB22XAis4EVgi7cAEVUOcV8EnzsN9bYLovG4ouk0oItNpfod65mPLbHVDuYOW96D941zYIbWu+Fl79RgdYlk34d5z+8HyWvUNPqnvBbVzP8H+0+v0MajYGYqKzbFtO0114wzCy5JQxKKjW9C0p5QKPNZc/Vz2aMlORCj57cyj39ILrqoQLanU6wrRHUogztgGbLMkzBYbUNsAoFmYxqNKPMic+bUwVPE4rOi+KqMY9acU6VLqn5/SPlFm+4N88m/5xW+xci/BByrBY19fkJOZoCO7SjrVk6K2f+ebDBgSeHdG1qlSAM7gNYlFEnSNe4MmrJqrrwkvwLV6BDeVoB+t63qaTEqGhoywh5YRJ+dTlv/kvisY1PAmMfkwECxvpjQzPFUC3KUV8al8OEgrov97K9p/pRUvUrROS9E6PSec9vyhFbCl3kGcc5M3ihgnSrs8kLJoaTXb1mg1TwMkyx4CSerdQkVCrQvR2aNQj+v0U4/l34h6sH96wq7RCdfdEDv9OuFmGbLvqRPQbeQp1uhT2xuCnVU6bd31KleKHXe919K8/J0LaVt3DPwyjsflFmr4CWpbOvvENwA2Kn6tLvBUbAQaaOCrz3Hak7IHMc0qWi0WqDFrBSnrzkmzWmrPDv5W0lR6ufQ283EPvzZW2eXq0+9lpNAiH8fu0X6t+Z/ebl9GItVHtGoA/GBgcPD9wKC9c9SrkXJco+S7qxIN8w6lSmB4/F+DsvGO/7KBX/4A&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <rect x="535" y="0" width="235" height="290" fill="none" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 233px; height: 1px; padding-top: 7px; margin-left: 536px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                npm package
+                                <br/>
+                                monaco-editor
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="653" y="19" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    npm package...
+                </text>
+            </switch>
+        </g>
+        <path d="M 120 40 L 233.41 39.92" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 238.66 39.92 L 231.66 43.43 L 233.41 39.92 L 231.66 36.43 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 40px; margin-left: 180px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
+                                tsc
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="180" y="44" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
+                    tsc
+                </text>
+            </switch>
+        </g>
+        <path d="M 120 55 L 170 55 Q 180 55 180 65 L 180 150 Q 180 160 190 160 L 233.63 160" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 238.88 160 L 231.88 163.5 L 233.63 160 L 231.88 156.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 110px; margin-left: 180px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
+                                esbuild ESM
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="180" y="113" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
+                    esbuild ESM
+                </text>
+            </switch>
+        </g>
+        <path d="M 90 70 L 90 230 Q 90 240 100 240 L 233.63 240" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 238.88 240 L 231.88 243.5 L 233.63 240 L 231.88 236.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 231px; margin-left: 181px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
+                                esbuild AMD
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="181" y="234" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
+                    esbuild AMD
+                </text>
+            </switch>
+        </g>
+        <rect x="0" y="10" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 40px; margin-left: 1px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                /src
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="60" y="44" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    /src
+                </text>
+            </switch>
+        </g>
+        <rect x="240" y="10" width="220" height="80" fill="none" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 218px; height: 1px; padding-top: 17px; margin-left: 241px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                /out/languages/amd-tsc
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="350" y="29" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    /out/languages/amd-tsc
+                </text>
+            </switch>
+        </g>
+        <path d="M 460 160 L 563.63 160" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 568.88 160 L 561.88 163.5 L 563.63 160 L 561.88 156.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="240" y="130" width="220" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 218px; height: 1px; padding-top: 160px; margin-left: 241px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                /out/languages/bundled/esm
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="350" y="164" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    /out/languages/bundled/esm
+                </text>
+            </switch>
+        </g>
+        <path d="M 460 240 L 563.63 240" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 568.88 240 L 561.88 243.5 L 563.63 240 L 561.88 236.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="240" y="210" width="220" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 218px; height: 1px; padding-top: 240px; margin-left: 241px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                /out/languages/bundled/amd-{dev, min}
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="350" y="244" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    /out/languages/bundled/amd-{dev, min}
+                </text>
+            </switch>
+        </g>
+        <path d="M 130 355 L 480 355 Q 490 355 490 345 L 490 250 Q 490 240 500 240 L 563.63 240" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 568.88 240 L 561.88 243.5 L 563.63 240 L 561.88 236.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="0" y="290" width="170" height="140" fill="none" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 297px; margin-left: 1px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                npm package
+                                <br/>
+                                monaco-editor-core
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="85" y="309" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    npm package...
+                </text>
+            </switch>
+        </g>
+        <rect x="570" y="210" width="180" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 240px; margin-left: 571px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                /out/monaco-editor/{dev, min}
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="660" y="244" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    /out/monaco-editor/{dev, min}
+                </text>
+            </switch>
+        </g>
+        <rect x="570" y="130" width="180" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 160px; margin-left: 571px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                /out/monaco-editor/esm
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="660" y="164" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    /out/monaco-editor/esm
+                </text>
+            </switch>
+        </g>
+        <path d="M 450 65 L 480 65 Q 490 65 500 65 L 563.63 65" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 568.88 65 L 561.88 68.5 L 563.63 65 L 561.88 61.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="360" y="50" width="90" height="30" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 65px; margin-left: 361px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                *.d.ts
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="405" y="69" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    *.d.ts
+                </text>
+            </switch>
+        </g>
+        <rect x="40" y="340" width="90" height="30" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 355px; margin-left: 41px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                {/dev, /min}
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="85" y="359" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    {/dev, /min}
+                </text>
+            </switch>
+        </g>
+        <path d="M 130 395 L 500 395 Q 510 395 510 385 L 510 170 Q 510 160 520 160 L 563.63 160" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 568.88 160 L 561.88 163.5 L 563.63 160 L 561.88 156.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="40" y="380" width="90" height="30" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 395px; margin-left: 41px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                esm
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="85" y="399" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    esm
+                </text>
+            </switch>
+        </g>
+        <rect x="570" y="50" width="180" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 80px; margin-left: 571px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                /out/monaco-editor/monaco.d.ts
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="660" y="84" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    /out/monaco-editor/monaco.d.ts
+                </text>
+            </switch>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>