docs: migrate to xterm namespaced imports (#63)

Author: crutchcorn

docs/tutorial/6-connect-a-terminal.md

@@ -16,7 +16,7 @@ Your Express app is up and running and the preview window updates automatically
 The terminal frontend component that we will use is [`Xterm.js`](https://xtermjs.org). It's the same terminal that is used by Visual Studio Code and many other web-based IDEs. To install it, run the following command in your development terminal:
 
 ```bash
-npm install xterm
+npm install @xterm/xterm
 ```
 
 ## 2. Build terminal scaffolding
@@ -62,7 +62,7 @@ First of all, import `Xterm.js`. To do so, add an import statement at the top of
 
 :::code-group
 ```js [main.js]
-import { Terminal } from 'xterm'
+import { Terminal } from '@xterm/xterm'
 ```
 :::
 
@@ -105,7 +105,7 @@ The terminal looks a bit plain now. Fortunately, `Xterm.js` ships its own CSS st
 
 :::code-group
 ```js [main.js]
-import 'xterm/css/xterm.css';
+import '@xterm/xterm/css/xterm.css';
 ```
 :::
 

docs/tutorial/7-add-interactivity.md

@@ -144,27 +144,27 @@ With this change, you hooked up your terminal to the shell running in the WebCon
 ![The commands typed in the terminal](./images/20-typing.png)
 
 
-## 4. Add `xterm-addon-fit`
+## 4. Add `@xterm/addon-fit`
 
 You might've noticed that resizing the window doesn't redraw the terminal output. If you make the window very narrow, lines that are too long don't wrap to the next line, which is not a good UX practice. For example, look at the highlightened line:
 
 ![The browser window is very narrow now and the terminal features a line that either disappears or when highlightened sticks out](./images/21-line-sticking-out.png)
 
 To fix this, you'll need to make the WebContainer process aware of the size of the terminal.
 
-First of all, let's make sure that the terminal itself gets adjusted properly when resizing the window. To do that, you can use the [`xterm-addon-fit`](http://xtermjs.org/docs/api/addons/fit/) plugin for `Xterm.js` which adjusts the terminal columns and rows depending on the element it's rendered in.
+First of all, let's make sure that the terminal itself gets adjusted properly when resizing the window. To do that, you can use the [`@xterm/addon-fit`](http://xtermjs.org/docs/api/addons/fit/) plugin for `Xterm.js` which adjusts the terminal columns and rows depending on the element it's rendered in.
 
 First, install the plugin:
 
 ```bash
-npm install xterm-addon-fit
+npm install @xterm/addon-fit
 ```
 
 And import it at the top of your `main.js` file.
 
 :::code-group
 ```js [main.js]
-import { FitAddon } from 'xterm-addon-fit';
+import { FitAddon } from '@xterm/addon-fit';
 ```
 :::