From 79690a46f91aaecdaa10bcf23b92eacaa8cf5d94 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Oct 2024 07:47:52 -0400
Subject: [PATCH 1/6] move editor into separate package

---
 apps/svelte.dev/package.json                  |  14 +-
 apps/svelte.dev/src/lib/tutorial/index.d.ts   |   3 +
 .../routes/tutorial/[...slug]/+page.svelte    |  31 +++-
 .../routes/tutorial/[...slug]/Output.svelte   |   2 +-
 .../[...slug]/filetree/Filetree.svelte        |   9 +-
 .../tutorial/[...slug]/filetree/context.js    |   2 +-
 .../routes/tutorial/[...slug]/state.svelte.ts |  44 +----
 packages/editor/.gitignore                    |  22 +++
 packages/editor/.npmrc                        |   1 +
 packages/editor/.prettierignore               |   4 +
 packages/editor/.prettierrc                   |   8 +
 packages/editor/README.md                     |  58 +++++++
 packages/editor/package.json                  |  62 +++++++
 packages/editor/src/app.d.ts                  |  13 ++
 packages/editor/src/app.html                  |  12 ++
 .../editor/src/lib}/Editor.svelte             |   9 +-
 packages/editor/src/lib/Workspace.svelte.ts   |  71 ++++++++
 .../editor/src/lib}/codemirror.css            |   0
 packages/editor/src/lib/index.ts              |   2 +
 packages/editor/src/routes/+page.svelte       |   3 +
 packages/editor/static/favicon.png            | Bin 0 -> 1571 bytes
 packages/editor/svelte.config.js              |  18 ++
 packages/editor/tsconfig.json                 |  15 ++
 packages/editor/vite.config.ts                |   6 +
 pnpm-lock.yaml                                | 162 +++++++++++++-----
 25 files changed, 458 insertions(+), 113 deletions(-)
 create mode 100644 packages/editor/.gitignore
 create mode 100644 packages/editor/.npmrc
 create mode 100644 packages/editor/.prettierignore
 create mode 100644 packages/editor/.prettierrc
 create mode 100644 packages/editor/README.md
 create mode 100644 packages/editor/package.json
 create mode 100644 packages/editor/src/app.d.ts
 create mode 100644 packages/editor/src/app.html
 rename {apps/svelte.dev/src/routes/tutorial/[...slug] => packages/editor/src/lib}/Editor.svelte (96%)
 create mode 100644 packages/editor/src/lib/Workspace.svelte.ts
 rename {apps/svelte.dev/src/routes/tutorial/[...slug] => packages/editor/src/lib}/codemirror.css (100%)
 create mode 100644 packages/editor/src/lib/index.ts
 create mode 100644 packages/editor/src/routes/+page.svelte
 create mode 100644 packages/editor/static/favicon.png
 create mode 100644 packages/editor/svelte.config.js
 create mode 100644 packages/editor/tsconfig.json
 create mode 100644 packages/editor/vite.config.ts

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 74b90edc89..292812aa5c 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -16,23 +16,11 @@
 		"sync-docs": "tsx scripts/sync-docs/index.ts"
 	},
 	"dependencies": {
-		"@codemirror/autocomplete": "^6.9.0",
-		"@codemirror/commands": "^6.2.5",
-		"@codemirror/lang-css": "^6.2.1",
-		"@codemirror/lang-html": "^6.4.6",
-		"@codemirror/lang-javascript": "^6.2.1",
-		"@codemirror/language": "^6.9.0",
-		"@codemirror/lint": "^6.4.1",
-		"@codemirror/search": "^6.5.2",
-		"@codemirror/state": "^6.2.1",
-		"@codemirror/view": "^6.17.1",
 		"@jridgewell/sourcemap-codec": "^1.4.15",
 		"@lezer/common": "^1.0.4",
 		"@lezer/highlight": "^1.1.6",
 		"@lezer/javascript": "^1.4.7",
 		"@lezer/lr": "^1.3.10",
-		"@replit/codemirror-lang-svelte": "^6.0.0",
-		"@replit/codemirror-vim": "^6.0.14",
 		"@rich_harris/svelte-split-pane": "^1.1.3",
 		"@shikijs/twoslash": "^1.22.0",
 		"@sveltejs/amp": "^1.1.3",
@@ -46,10 +34,10 @@
 		"adm-zip": "^0.5.10",
 		"ansi-to-html": "^0.7.2",
 		"base64-js": "^1.5.1",
-		"codemirror": "^6.0.1",
 		"cookie": "^0.7.0",
 		"d3-geo": "^3.1.0",
 		"d3-geo-projection": "^4.0.0",
+		"editor": "workspace:*",
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
 		"port-authority": "^2.0.1",
diff --git a/apps/svelte.dev/src/lib/tutorial/index.d.ts b/apps/svelte.dev/src/lib/tutorial/index.d.ts
index 20b8f8fde2..1070da17d7 100644
--- a/apps/svelte.dev/src/lib/tutorial/index.d.ts
+++ b/apps/svelte.dev/src/lib/tutorial/index.d.ts
@@ -1,5 +1,6 @@
 import type { Writable } from 'svelte/store';
 
+/** @deprecated import type { File } from 'editor' */
 export interface FileStub {
 	type: 'file';
 	name: string;
@@ -8,12 +9,14 @@ export interface FileStub {
 	text: boolean;
 }
 
+/** @deprecated import type { Directory } from 'editor' */
 export interface DirectoryStub {
 	type: 'directory';
 	name: string;
 	basename: string;
 }
 
+/** @deprecated import type { Item } from 'editor' */
 export type Stub = FileStub | DirectoryStub;
 
 export interface Adapter {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index dc96f3c80c..f1b3a0773c 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
-	import { adapter_state, reset } from './adapter.svelte';
-	import Editor from './Editor.svelte';
+	import * as adapter from './adapter.svelte';
+	import { Editor, Workspace } from 'editor';
 	import ContextMenu from './filetree/ContextMenu.svelte';
 	import Filetree from './filetree/Filetree.svelte';
 	import ImageViewer from './ImageViewer.svelte';
 	import Output from './Output.svelte';
 	import { ScreenToggle } from '@sveltejs/site-kit/components';
 	import Sidebar from './Sidebar.svelte';
-	import { solution, Workspace } from './state.svelte';
+	import { solution } from './state.svelte';
 	import { create_directories } from './utils';
 	import { needs_webcontainers, text_files } from './shared';
 	import OutputRollup from './OutputRollup.svelte';
@@ -24,8 +24,6 @@
 
 	let { data }: Props = $props();
 
-	const workspace = new Workspace();
-
 	let path = data.exercise.path;
 	let show_editor = $state(false);
 	let show_filetree = $state(false);
@@ -98,7 +96,7 @@
 		const will_delete = previous_files.some((file) => !(file.name in a));
 
 		if (data.exercise.path !== path || will_delete) paused = true;
-		await reset(workspace.files);
+		await adapter.reset(workspace.files);
 
 		path = data.exercise.path;
 		paused = false;
@@ -185,6 +183,19 @@
 	let a = $derived(create_files(data.exercise.a));
 	let b = $derived(create_files({ ...data.exercise.a, ...data.exercise.b }));
 
+	const workspace = new Workspace({
+		files: Object.values(a),
+		selected_name: data.exercise.focus,
+		onupdate(file) {
+			adapter.update(file);
+		},
+		onreset(items) {
+			adapter.reset(items);
+		}
+	});
+
+	solution.set(b);
+
 	// for the things we can't do with media queries
 	let mobile = $derived(w < 800);
 
@@ -197,7 +208,7 @@
 	});
 
 	$effect(() => {
-		workspace.selected_name = data.exercise.focus;
+		workspace.selected_name = data.exercise.focus; // TODO this probably belongs in afterNavigate
 	});
 
 	let completed = $derived(is_completed(workspace.files, b));
@@ -289,7 +300,11 @@
 							</section>
 
 							<section slot="b" class="editor-container">
-								<Editor exercise={data.exercise} warnings={adapter_state.warnings} {workspace} />
+								<Editor
+									exercise={data.exercise}
+									warnings={adapter.adapter_state.warnings}
+									{workspace}
+								/>
 								<ImageViewer selected={workspace.selected_file} />
 
 								{#if mobile && show_filetree}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index 8c5f544cfd..c606ba42ea 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -11,7 +11,7 @@
 	import Loading from './Loading.svelte';
 	import { adapter_state, subscribe, reset } from './adapter.svelte';
 	import type { Exercise } from '$lib/tutorial';
-	import type { Workspace } from './state.svelte';
+	import type { Workspace } from 'editor';
 
 	interface Props {
 		exercise: Exercise;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
index ebed0321be..cb24593865 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
@@ -4,10 +4,11 @@
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
-	import { solution, Workspace } from '../state.svelte';
+	import { solution } from '../state.svelte';
 	import { create_directories } from '../utils';
 	import { afterNavigate } from '$app/navigation';
-	import type { Exercise, Stub } from '$lib/tutorial';
+	import type { Exercise } from '$lib/tutorial';
+	import type { Workspace, Item } from 'editor';
 
 	interface Props {
 		exercise: Exercise;
@@ -55,7 +56,7 @@
 
 			const basename = name.split('/').pop()!;
 
-			const file: Stub =
+			const file: Item =
 				type === 'file'
 					? { type, name, basename, text: true, contents: '' }
 					: { type, name, basename };
@@ -142,7 +143,7 @@
 		workspace
 	});
 
-	function is_deleted(file: Stub) {
+	function is_deleted(file: Item) {
 		if (file.type === 'directory') return `${file.name}/__delete` in exercise.a;
 		if (file.text) return file.contents.startsWith('__delete');
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js
index 671dace270..4c782c5c90 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js
@@ -7,7 +7,7 @@ import { setContext, getContext } from 'svelte';
  *   rename: (stub: import('$lib/tutorial').Stub, name: string) => Promise<void>;
  *   remove: (stub: import('$lib/tutorial').Stub) => Promise<void>;
  *   select: (name: string) => void;
- *   workspace: import('../state.svelte').Workspace
+ *   workspace: import('editor').Workspace
  * }} FileTreeContext
  */
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
index 1fe616bd52..cd0ae03614 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
@@ -1,44 +1,4 @@
 import { writable } from 'svelte/store';
-import * as adapter from './adapter.svelte';
-import type { FileStub, Stub } from '$lib/tutorial';
+import type { Item } from 'editor';
 
-export class Workspace {
-	files = $state.raw<Stub[]>([]);
-	creating = $state.raw<{ parent: string; type: 'file' | 'directory' } | null>(null);
-	selected_name = $state<string | null>(null);
-
-	get selected_file() {
-		for (const file of this.files) {
-			if (file.name === this.selected_name) return file as FileStub;
-		}
-
-		return null;
-	}
-
-	update_file(file: FileStub) {
-		this.files = this.files.map((old) => {
-			if (old.name === file.name) {
-				return file;
-			}
-			return old;
-		});
-
-		// TODO decouple
-		adapter.update(file);
-	}
-
-	reset_files(new_files: Stub[]) {
-		// if the selected file no longer exists, clear it
-		if (!new_files.find((file) => file.name === this.selected_name)) {
-			this.selected_name = null;
-		}
-
-		this.files = new_files;
-
-		// TODO decouple
-		adapter.reset(new_files);
-	}
-}
-
-// this is separate to the workspace
-export const solution = writable({} as Record<string, Stub>);
+export const solution = writable({} as Record<string, Item>);
diff --git a/packages/editor/.gitignore b/packages/editor/.gitignore
new file mode 100644
index 0000000000..715b548f7b
--- /dev/null
+++ b/packages/editor/.gitignore
@@ -0,0 +1,22 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+/dist
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/packages/editor/.npmrc b/packages/editor/.npmrc
new file mode 100644
index 0000000000..b6f27f1359
--- /dev/null
+++ b/packages/editor/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/packages/editor/.prettierignore b/packages/editor/.prettierignore
new file mode 100644
index 0000000000..ab78a95ddd
--- /dev/null
+++ b/packages/editor/.prettierignore
@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
diff --git a/packages/editor/.prettierrc b/packages/editor/.prettierrc
new file mode 100644
index 0000000000..95730232b6
--- /dev/null
+++ b/packages/editor/.prettierrc
@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
diff --git a/packages/editor/README.md b/packages/editor/README.md
new file mode 100644
index 0000000000..69f4875945
--- /dev/null
+++ b/packages/editor/README.md
@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```
diff --git a/packages/editor/package.json b/packages/editor/package.json
new file mode 100644
index 0000000000..d9a8ef7da9
--- /dev/null
+++ b/packages/editor/package.json
@@ -0,0 +1,62 @@
+{
+	"name": "editor",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./src/lib/index.ts",
+			"svelte": "./src/lib/index.ts"
+		}
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^5.0.0-next.1"
+	},
+	"devDependencies": {
+		"@codemirror/autocomplete": "^6.9.0",
+		"@codemirror/commands": "^6.2.5",
+		"@codemirror/lang-css": "^6.2.1",
+		"@codemirror/lang-html": "^6.4.6",
+		"@codemirror/lang-javascript": "^6.2.1",
+		"@codemirror/language": "^6.9.0",
+		"@codemirror/lint": "^6.4.1",
+		"@codemirror/search": "^6.5.2",
+		"@codemirror/state": "^6.2.1",
+		"@codemirror/view": "^6.17.1",
+		"@replit/codemirror-lang-svelte": "^6.0.0",
+		"@replit/codemirror-vim": "^6.0.14",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/repl": "workspace:*",
+		"@sveltejs/site-kit": "workspace:*",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+		"codemirror": "^6.0.1",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.2.0",
+		"svelte": "^5.0.0-next.1",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.11"
+	},
+	"type": "module"
+}
diff --git a/packages/editor/src/app.d.ts b/packages/editor/src/app.d.ts
new file mode 100644
index 0000000000..743f07b2e5
--- /dev/null
+++ b/packages/editor/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
diff --git a/packages/editor/src/app.html b/packages/editor/src/app.html
new file mode 100644
index 0000000000..f22aeaad5e
--- /dev/null
+++ b/packages/editor/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div>%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte b/packages/editor/src/lib/Editor.svelte
similarity index 96%
rename from apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
rename to packages/editor/src/lib/Editor.svelte
index b7dc3ea591..1400d5daad 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
+++ b/packages/editor/src/lib/Editor.svelte
@@ -13,16 +13,15 @@
 	import { svelteTheme } from '@sveltejs/repl/theme';
 	import { basicSetup } from 'codemirror';
 	import { onMount, tick } from 'svelte';
-	import { Workspace } from './state.svelte';
 	import { autocomplete_for_svelte } from '@sveltejs/site-kit/codemirror';
 	import type { Diagnostic } from '@codemirror/lint';
-	import type { Exercise, Stub } from '$lib/tutorial';
+	import { Workspace, type Item } from './Workspace.svelte.js';
 	import type { Warning } from 'svelte/compiler';
 	import './codemirror.css';
 
 	interface Props {
-		exercise: Exercise;
-		warnings: Record<string, Warning[]>;
+		exercise: any; // TODO this needs to be decoupled
+		warnings: Record<string, Warning[]>; // TODO this should include errors as well
 		workspace: Workspace;
 	}
 
@@ -49,7 +48,7 @@
 
 	let installed_vim = false;
 
-	async function reset(files: Stub[]) {
+	async function reset(files: Item[]) {
 		if (skip_reset) return;
 
 		let should_install_vim = localStorage.getItem('vim') === 'true';
diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
new file mode 100644
index 0000000000..f20fdd02cf
--- /dev/null
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -0,0 +1,71 @@
+export interface File {
+	type: 'file';
+	name: string;
+	basename: string;
+	contents: string;
+	text: boolean;
+}
+
+export interface Directory {
+	type: 'directory';
+	name: string;
+	basename: string;
+}
+
+export type Item = File | Directory;
+
+export class Workspace {
+	files = $state.raw<Item[]>([]);
+	creating = $state.raw<{ parent: string; type: 'file' | 'directory' } | null>(null);
+	selected_name = $state<string | null>(null);
+
+	#onupdate: (file: File) => void;
+	#onreset: (items: Item[]) => void;
+
+	constructor({
+		files,
+		selected_name,
+		onupdate,
+		onreset
+	}: {
+		files: Item[];
+		selected_name: string;
+		onupdate: (file: File) => void;
+		onreset: (items: Item[]) => void;
+	}) {
+		this.files = files;
+		this.selected_name = selected_name;
+		this.#onupdate = onupdate;
+		this.#onreset = onreset;
+	}
+
+	get selected_file() {
+		for (const file of this.files) {
+			if (file.name === this.selected_name) return file as File;
+		}
+
+		return null;
+	}
+
+	update_file(file: File) {
+		this.files = this.files.map((old) => {
+			if (old.name === file.name) {
+				return file;
+			}
+			return old;
+		});
+
+		this.#onupdate(file);
+	}
+
+	reset_files(new_files: Item[]) {
+		// if the selected file no longer exists, clear it
+		if (!new_files.find((file) => file.name === this.selected_name)) {
+			this.selected_name = null;
+		}
+
+		this.files = new_files;
+
+		this.#onreset(new_files);
+	}
+}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css b/packages/editor/src/lib/codemirror.css
similarity index 100%
rename from apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
rename to packages/editor/src/lib/codemirror.css
diff --git a/packages/editor/src/lib/index.ts b/packages/editor/src/lib/index.ts
new file mode 100644
index 0000000000..962edd774b
--- /dev/null
+++ b/packages/editor/src/lib/index.ts
@@ -0,0 +1,2 @@
+export { default as Editor } from './Editor.svelte';
+export * from './Workspace.svelte';
diff --git a/packages/editor/src/routes/+page.svelte b/packages/editor/src/routes/+page.svelte
new file mode 100644
index 0000000000..0a45b69f09
--- /dev/null
+++ b/packages/editor/src/routes/+page.svelte
@@ -0,0 +1,3 @@
+<h1>Welcome to your library project</h1>
+<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
diff --git a/packages/editor/static/favicon.png b/packages/editor/static/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..825b9e65af7c104cfb07089bb28659393b4f2097
GIT binary patch
literal 1571
zcmV+;2Hg3HP)<h;3K|Lk000e1NJLTq004jh004jp1ONa4X*a1r00001b5ch_0Itp)
z=>Px)-AP12RCwC$UE6KzI1p6{F2N<Fgp}YCTtZ542`(WexCEDw|A=A)1A-t30wEX>
z1VK2vi|pOpn{~#djwYcWXTI_im_u^TJgMZ4JMOsSj!0ma>B?-(Hr@X&W@|R-$}W@Z
zg<YDbY-gN-C@$NXr>j#$x=!~7LGqHW?IO8+*oE1MyDp!G=L<gz=E*n%PA*mnuaD-%
zU>0#^lUx?;!fXv@l^6SvTnf^ac{5OurzC#ZMYc20lI%HhX816AYVs1T3heS1*WaWH
z%;x>)-J}YB5#CLzU@GBR6sXYrD>Vw(Fmt#|JP;+}<#6b63Ike{Fuo!?M{yEffez;|
zp!PfsuaC)>h>-AdbnwN13g*1LowNjT5?+lFVd#9$!8Z9HA|$*6dQ8EHLu}U|obW6f
z2%uGv?vr=KNq7YYa2Roj;|zooo<)lf=&2yxM@e`kM$CmCR#x>gI>I|*Ubr({5Y^rb
zghxQU22N}F51}^yfDSt7<V*0Nvi!iKPY@n`1~$se=LwHTOE7`*@+};uU_gT$1{Nib
z9&~5~nc4J(EWez%_f0Ty7T;wB{7s*oNO=9p8(o}N*_V>86oMTc!W&V;d?76)9KXX1
z+6Okem(d}YXmmOiZq$!IPk5t8nnS{%?+vDFz3BevmFN<oPlV?qzG@=jl`t@|E8zV8
zJ4}It4e%+dFPWw16u{sAX42jlFu{_e!AKZE75iV2&Q7>gpIod~R{>@#@5x9zJK<vg
zI0+@80NMa{gtNoRhsR-w%piFI3d-5xrN)R}H!WtK=Gp%dC5(a`Q0V4_vS-mj<((Z~
zbV*PucDY#zFVglY>EHLHv!gHeK~n)Ld!M8DB|Kfe%~123&Hz1Z(86nU7*G5chmyDe
ziV7$pB7pJ=96hpxHv9rCR29%bLOXlKU<_13_M8x)6;P8E1Kz6G<&P?$P^%c!M5`2`
zfY2zg;VK5~^>TJGQzc+33-n~gKt{{of8GzUkWmU110IgI0DLxRIM>0US|TsM=L|@F
z0Bun8U!cRB7-2apz=y-7*UxOxz@Z0)@QM)9wSGki1AZ38ceG7Q72z5`i;i=J`ILzL
z@iUO?SBBG-0cQuo+an4TsL<j(YStU%^TNkjEqg808>y-g-x;8P4UVwk|D8{W@U1Zi
z!M)+jqy@nQ$p?5tsHp-6J304Q={v-B>66$P0IDx&YT(`IcZ~bZfmn11#rXd7<5s}y
zBi9eim&zQc0Dk|2>$bs0PnLmDfMP5lcXRY&cvJ=zKxI^f0%-d$tD!`LBf9^jMSYUA
zI8U?CWdY@}cRq6{5~y+<zzg4N+!Mudx;=&$zSp?cjRmyF-+404b-P66DA17$<$H}=
z7$P4)QXt>)#h1!*-HcGW@+gZ4B};0OnC~`xQOyH19z*TA!!<qA9l$G~6DRxiCy7Vo
zOl^oK!S3XbayWz&p33NSw$lxR1fm)O*rCE0^ZNmk0wnax!!?%g599+O37!666~F(y
z5fq?5T*Fm{^%YR^PiM%z#%x`fAC+;C&`X5JXN_40SieIEXoaUU=*}=c0OC7@a*rFE
z3xr3yyFB~zRl(lNY&B@$Fia%81M!xeIuTYNz!Dz6eBKONjL<@dJdT$H?ShKl6$p=F
ze!fdgzelJI&n`Hk9f}>BJ%9s0V3F?CAJ{hTd#*tf+ur-W9MOURF-@B77_-OshsY}6
zOXRY=5%C^*26z?l)1=$bz30!so5tfABdSYzO+H=CpV~aaUefmjvfZ3Ttu9W&W3Iu6
zROlh0MFA5h;my}8lB0tAV-Rvc2Zs_CCSJnx@d`<ao$!3dCkTn3@aF0ny6VrToO6qA
z-~&2=w&2nT&o5u>**$idgy-iMob4dJWWw|21b4NB=LfsYp0Aeh{Ov)yztQi;eL4y5
zMi>8^SzKqk8~k?UiQK^^-5d8c%bV?$F8%X~czyiaKCI2=UH<v&YL5FIcieFm_zQ2O
VHuiSbmk|H}002ovPDHLkV1f%e^4kCa

literal 0
HcmV?d00001

diff --git a/packages/editor/svelte.config.js b/packages/editor/svelte.config.js
new file mode 100644
index 0000000000..4a82086e24
--- /dev/null
+++ b/packages/editor/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
new file mode 100644
index 0000000000..6f788f1603
--- /dev/null
+++ b/packages/editor/tsconfig.json
@@ -0,0 +1,15 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext"
+	}
+}
diff --git a/packages/editor/vite.config.ts b/packages/editor/vite.config.ts
new file mode 100644
index 0000000000..bbf8c7da43
--- /dev/null
+++ b/packages/editor/vite.config.ts
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8f95cb5bfe..3b98cd8c0d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,36 +14,6 @@ importers:
 
   apps/svelte.dev:
     dependencies:
-      '@codemirror/autocomplete':
-        specifier: ^6.9.0
-        version: 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.28.0)(@lezer/common@1.2.2)
-      '@codemirror/commands':
-        specifier: ^6.2.5
-        version: 6.5.0
-      '@codemirror/lang-css':
-        specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.28.0)
-      '@codemirror/lang-html':
-        specifier: ^6.4.6
-        version: 6.4.9
-      '@codemirror/lang-javascript':
-        specifier: ^6.2.1
-        version: 6.2.2
-      '@codemirror/language':
-        specifier: ^6.9.0
-        version: 6.10.1
-      '@codemirror/lint':
-        specifier: ^6.4.1
-        version: 6.7.0
-      '@codemirror/search':
-        specifier: ^6.5.2
-        version: 6.5.6
-      '@codemirror/state':
-        specifier: ^6.2.1
-        version: 6.4.1
-      '@codemirror/view':
-        specifier: ^6.17.1
-        version: 6.28.0
       '@jridgewell/sourcemap-codec':
         specifier: ^1.4.15
         version: 1.5.0
@@ -59,12 +29,6 @@ importers:
       '@lezer/lr':
         specifier: ^1.3.10
         version: 1.4.1
-      '@replit/codemirror-lang-svelte':
-        specifier: ^6.0.0
-        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.28.0)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.28.0))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.28.0)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
-      '@replit/codemirror-vim':
-        specifier: ^6.0.14
-        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.1)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.28.0)
       '@rich_harris/svelte-split-pane':
         specifier: ^1.1.3
         version: 1.1.3(svelte@5.0.0-next.264)
@@ -104,9 +68,6 @@ importers:
       base64-js:
         specifier: ^1.5.1
         version: 1.5.1
-      codemirror:
-        specifier: ^6.0.1
-        version: 6.0.1(@lezer/common@1.2.2)
       cookie:
         specifier: ^0.7.0
         version: 0.7.2
@@ -116,6 +77,9 @@ importers:
       d3-geo-projection:
         specifier: ^4.0.0
         version: 4.0.0
+      editor:
+        specifier: workspace:*
+        version: link:../../packages/editor
       flexsearch:
         specifier: ^0.7.43
         version: 0.7.43
@@ -232,6 +196,87 @@ importers:
         specifier: ^7.0.4
         version: 7.0.4(rollup@4.21.2)
 
+  packages/editor:
+    devDependencies:
+      '@codemirror/autocomplete':
+        specifier: ^6.9.0
+        version: 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.28.0)(@lezer/common@1.2.2)
+      '@codemirror/commands':
+        specifier: ^6.2.5
+        version: 6.5.0
+      '@codemirror/lang-css':
+        specifier: ^6.2.1
+        version: 6.2.1(@codemirror/view@6.28.0)
+      '@codemirror/lang-html':
+        specifier: ^6.4.6
+        version: 6.4.9
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.1
+        version: 6.2.2
+      '@codemirror/language':
+        specifier: ^6.9.0
+        version: 6.10.1
+      '@codemirror/lint':
+        specifier: ^6.4.1
+        version: 6.7.0
+      '@codemirror/search':
+        specifier: ^6.5.2
+        version: 6.5.6
+      '@codemirror/state':
+        specifier: ^6.2.1
+        version: 6.4.1
+      '@codemirror/view':
+        specifier: ^6.17.1
+        version: 6.28.0
+      '@replit/codemirror-lang-svelte':
+        specifier: ^6.0.0
+        version: 6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.28.0)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.28.0))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.28.0)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)
+      '@replit/codemirror-vim':
+        specifier: ^6.0.14
+        version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.1)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.28.0)
+      '@sveltejs/adapter-auto':
+        specifier: ^3.0.0
+        version: 3.2.0(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+      '@sveltejs/kit':
+        specifier: ^2.0.0
+        version: 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/package':
+        specifier: ^2.0.0
+        version: 2.3.1(svelte@5.0.0-next.264)(typescript@5.5.4)
+      '@sveltejs/repl':
+        specifier: workspace:*
+        version: link:../repl
+      '@sveltejs/site-kit':
+        specifier: workspace:*
+        version: link:../site-kit
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^4.0.0-next.6
+        version: 4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1(@lezer/common@1.2.2)
+      prettier:
+        specifier: ^3.1.1
+        version: 3.3.2
+      prettier-plugin-svelte:
+        specifier: ^3.1.2
+        version: 3.2.4(prettier@3.3.2)(svelte@5.0.0-next.264)
+      publint:
+        specifier: ^0.2.0
+        version: 0.2.11
+      svelte:
+        specifier: ^5.0.0-next.1
+        version: 5.0.0-next.264
+      svelte-check:
+        specifier: ^4.0.0
+        version: 4.0.1(svelte@5.0.0-next.264)(typescript@5.5.4)
+      typescript:
+        specifier: ^5.0.0
+        version: 5.5.4
+      vite:
+        specifier: ^5.0.11
+        version: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
+
   packages/repl:
     dependencies:
       '@codemirror/autocomplete':
@@ -2567,6 +2612,9 @@ packages:
   picocolors@1.0.1:
     resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
 
+  picocolors@1.1.0:
+    resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -2636,6 +2684,11 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
+  publint@0.2.11:
+    resolution: {integrity: sha512-/kxbd+sD/uEG515N/ZYpC6gYs8h89cQ4UIsAq1y6VT4qlNh8xmiSwcP2xU2MbzXFl8J0l2IdONKFweLfYoqhcA==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -4218,6 +4271,11 @@ snapshots:
       '@sveltejs/kit': 2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.260)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.260)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+    dependencies:
+      '@sveltejs/kit': 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      import-meta-resolve: 4.1.0
+
   '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
       '@sveltejs/kit': 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
@@ -4288,6 +4346,17 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@sveltejs/package@2.3.1(svelte@5.0.0-next.264)(typescript@5.5.4)':
+    dependencies:
+      chokidar: 3.6.0
+      kleur: 4.1.5
+      sade: 1.8.1
+      semver: 7.6.2
+      svelte: 5.0.0-next.264
+      svelte2tsx: 0.7.8(svelte@5.0.0-next.264)(typescript@5.5.4)
+    transitivePeerDependencies:
+      - typescript
+
   '@sveltejs/svelte-json-tree@2.2.0(svelte@5.0.0-next.260)':
     dependencies:
       svelte: 5.0.0-next.260
@@ -5416,6 +5485,8 @@ snapshots:
 
   picocolors@1.0.1: {}
 
+  picocolors@1.1.0: {}
+
   picomatch@2.3.1: {}
 
   pify@4.0.1: {}
@@ -5479,6 +5550,12 @@ snapshots:
       picocolors: 1.0.1
       sade: 1.8.1
 
+  publint@0.2.11:
+    dependencies:
+      npm-packlist: 5.1.3
+      picocolors: 1.1.0
+      sade: 1.8.1
+
   queue-microtask@1.2.3: {}
 
   react-is@17.0.2: {}
@@ -5768,6 +5845,13 @@ snapshots:
       svelte: 5.0.0-next.260
       typescript: 5.5.4
 
+  svelte2tsx@0.7.8(svelte@5.0.0-next.264)(typescript@5.5.4):
+    dependencies:
+      dedent-js: 1.0.1
+      pascal-case: 3.1.2
+      svelte: 5.0.0-next.264
+      typescript: 5.5.4
+
   svelte@5.0.0-next.260:
     dependencies:
       '@ampproject/remapping': 2.3.0

From 2a9db30472fef84d00f014d2163e1400876b5205 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Oct 2024 07:57:37 -0400
Subject: [PATCH 2/6] move types over

---
 .../tutorial/adapters/rollup/index.svelte.ts  |  7 +++---
 .../adapters/webcontainer/index.svelte.ts     | 17 ++++++-------
 apps/svelte.dev/src/lib/tutorial/index.d.ts   | 24 +++----------------
 .../routes/tutorial/[...slug]/+page.svelte    | 10 ++++----
 .../tutorial/[...slug]/adapter.svelte.ts      |  7 +++---
 .../tutorial/[...slug]/filetree/File.svelte   |  5 ++--
 .../tutorial/[...slug]/filetree/Folder.svelte | 11 +++++----
 .../tutorial/[...slug]/filetree/context.js    |  4 ++--
 .../src/routes/tutorial/[...slug]/utils.ts    |  6 ++---
 9 files changed, 39 insertions(+), 52 deletions(-)

diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
index 3c56d9a145..7daf5dccd5 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
@@ -1,4 +1,5 @@
-import type { Adapter, FileStub, Stub, Warning } from '$lib/tutorial';
+import type { Adapter, Warning } from '$lib/tutorial';
+import type { File, Item } from 'editor';
 import Bundler from '@sveltejs/repl/bundler';
 // @ts-ignore package exports don't have types
 import * as yootils from 'yootils';
@@ -43,7 +44,7 @@ export async function create(): Promise<Adapter> {
 		const result = await bundler.bundle(
 			[...current_stubs.values()]
 				// TODO we can probably remove all the SvelteKit specific stuff from the tutorial content once this settles down
-				.filter((f): f is FileStub => f.name.startsWith('/src/lib/') && f.type === 'file')
+				.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')
 				.map((f) => ({
 					name: f.name.slice(9).split('.').slice(0, -1).join('.'),
 					source: f.contents,
@@ -85,7 +86,7 @@ export async function create(): Promise<Adapter> {
 	};
 }
 
-function stubs_to_map(files: Stub[], map = new Map<string, Stub>()) {
+function stubs_to_map(files: Item[], map = new Map<string, Item>()) {
 	for (const file of files) {
 		map.set(file.name, file);
 	}
diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
index 4c2f3f2755..31f0b712dc 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
@@ -6,7 +6,8 @@ import * as yootils from 'yootils';
 import { get_depth } from '../../../utils/path.js';
 import { escape_html } from '../../../utils/escape.js';
 import { ready } from '../common/index.js';
-import type { Adapter, FileStub, Stub, Warning } from '$lib/tutorial';
+import type { Adapter, Warning } from '$lib/tutorial';
+import type { Item, File } from 'editor';
 
 const converter = new AnsiToHtml({
 	fg: 'var(--sk-text-3)'
@@ -27,7 +28,7 @@ export async function create(): Promise<Adapter> {
 	state.progress = { value: 0, text: 'loading files' };
 
 	const q = yootils.queue(1);
-	const q_per_file = new Map<string, Array<FileStub>>();
+	const q_per_file = new Map<string, Array<File>>();
 
 	/** Paths and contents of the currently loaded file stubs */
 	let current_stubs = stubs_to_map([]);
@@ -138,7 +139,7 @@ export async function create(): Promise<Adapter> {
 	return {
 		reset: (stubs) => {
 			return q.add(async () => {
-				const to_write: Stub[] = [];
+				const to_write: Item[] = [];
 
 				const force_delete = [];
 
@@ -151,7 +152,7 @@ export async function create(): Promise<Adapter> {
 							continue;
 						}
 
-						const current = current_stubs.get(stub.name) as FileStub;
+						const current = current_stubs.get(stub.name) as File;
 
 						if (current?.contents !== stub.contents) {
 							to_write.push(stub);
@@ -272,7 +273,7 @@ export async function create(): Promise<Adapter> {
 	};
 }
 
-function is_config(file: Stub) {
+function is_config(file: Item) {
 	return file.type === 'file' && is_config_path(file.name);
 }
 
@@ -299,7 +300,7 @@ function wait_for_restart_vite() {
 	});
 }
 
-function convert_stubs_to_tree(stubs: Stub[], depth = 1) {
+function convert_stubs_to_tree(stubs: Item[], depth = 1) {
 	const tree: FileSystemTree = {};
 
 	for (const stub of stubs) {
@@ -319,7 +320,7 @@ function convert_stubs_to_tree(stubs: Stub[], depth = 1) {
 	return tree;
 }
 
-function to_file(file: FileStub) {
+function to_file(file: File) {
 	// special case
 	if (file.name === '/src/app.html' || file.name === '/src/error.html') {
 		const contents = file.contents + '<script type="module" src="/src/__client.js"></script>';
@@ -336,7 +337,7 @@ function to_file(file: FileStub) {
 	};
 }
 
-function stubs_to_map(files: Stub[], map = new Map<string, Stub>()) {
+function stubs_to_map(files: Item[], map = new Map<string, Item>()) {
 	for (const file of files) {
 		map.set(file.name, file);
 	}
diff --git a/apps/svelte.dev/src/lib/tutorial/index.d.ts b/apps/svelte.dev/src/lib/tutorial/index.d.ts
index 1070da17d7..900356b80b 100644
--- a/apps/svelte.dev/src/lib/tutorial/index.d.ts
+++ b/apps/svelte.dev/src/lib/tutorial/index.d.ts
@@ -1,28 +1,10 @@
 import type { Writable } from 'svelte/store';
-
-/** @deprecated import type { File } from 'editor' */
-export interface FileStub {
-	type: 'file';
-	name: string;
-	basename: string;
-	contents: string;
-	text: boolean;
-}
-
-/** @deprecated import type { Directory } from 'editor' */
-export interface DirectoryStub {
-	type: 'directory';
-	name: string;
-	basename: string;
-}
-
-/** @deprecated import type { Item } from 'editor' */
-export type Stub = FileStub | DirectoryStub;
+import type { File, Directory, Item } from 'editor';
 
 export interface Adapter {
 	/** Returns `false` if the reset was in such a way that a reload of the iframe isn't needed */
-	reset(files: Array<Stub>): Promise<boolean>;
-	update(file: FileStub): Promise<boolean>;
+	reset(files: Array<Item>): Promise<boolean>;
+	update(file: File): Promise<boolean>;
 }
 
 export interface Scope {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index f1b3a0773c..42cb7c3bf8 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -15,7 +15,7 @@
 	import OutputRollup from './OutputRollup.svelte';
 	import { page } from '$app/stores';
 	import Controls from './Controls.svelte';
-	import type { Stub } from '$lib/tutorial';
+	import type { Item } from 'editor';
 	import type { Snapshot } from './$types.js';
 
 	interface Props {
@@ -30,10 +30,10 @@
 	let paused = $state(false);
 	let w = $state(1000);
 
-	let previous_files: Stub[] = [];
+	let previous_files: Item[] = [];
 
-	function create_files(map: Record<string, string>): Record<string, Stub> {
-		const files: Record<string, Stub> = {};
+	function create_files(map: Record<string, string>): Record<string, Item> {
+		const files: Record<string, Item> = {};
 
 		const to_delete: string[] = [];
 
@@ -102,7 +102,7 @@
 		paused = false;
 	});
 
-	function is_completed(files: Stub[], solution: Record<string, Stub> | null) {
+	function is_completed(files: Item[], solution: Record<string, Item> | null) {
 		if (!solution) return true;
 
 		for (const file of files) {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts
index b192b96d29..86982e2af9 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts
@@ -2,7 +2,8 @@ import { browser } from '$app/environment';
 import { page } from '$app/stores';
 import type { state as WCState } from '$lib/tutorial/adapters/webcontainer/index.svelte';
 import type { state as RollupState } from '$lib/tutorial/adapters/rollup/index.svelte';
-import type { Adapter, FileStub, Stub } from '$lib/tutorial';
+import type { Adapter } from '$lib/tutorial';
+import type { File, Item } from 'editor';
 import { needs_webcontainers } from './shared';
 
 let initial_load = true;
@@ -111,7 +112,7 @@ function publish(event: EventName) {
 	subscriptions.get(event)?.forEach((fn) => fn());
 }
 
-export async function reset(files: Stub[]) {
+export async function reset(files: Item[]) {
 	try {
 		const adapter = await get_adapter();
 		const should_reload = await adapter.reset(files);
@@ -126,7 +127,7 @@ export async function reset(files: Stub[]) {
 	}
 }
 
-export async function update(file: FileStub) {
+export async function update(file: File) {
 	const adapter = await get_adapter();
 	const should_reload = await adapter.update(file);
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
index 3873c8c44f..53cef27303 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
@@ -3,10 +3,11 @@
 	import Item from './Item.svelte';
 	import file_icon from '$lib/icons/file.svg';
 	import { solution } from '../state.svelte';
-	import type { FileStub, MenuItem } from '$lib/tutorial';
+	import type { MenuItem } from '$lib/tutorial';
+	import type { File } from 'editor';
 
 	interface Props {
-		file: FileStub;
+		file: File;
 		depth: number;
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
index 21f39c4367..9495998d21 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
@@ -7,13 +7,14 @@
 	import folder_closed from '$lib/icons/folder.svg';
 	import folder_open from '$lib/icons/folder-open.svg';
 	import { solution } from '../state.svelte';
-	import type { DirectoryStub, FileStub, MenuItem, Stub } from '$lib/tutorial';
+	import type { MenuItem } from '$lib/tutorial';
+	import type { Directory, File as IFile, Item as IItem } from 'editor';
 
 	interface Props {
-		directory: DirectoryStub;
+		directory: Directory;
 		prefix: string;
 		depth: number;
-		contents: Stub[];
+		contents: IItem[];
 	}
 
 	let { directory, prefix, depth, contents }: Props = $props();
@@ -36,7 +37,7 @@
 
 	let child_files = $derived(
 		children.filter((child) => get_depth(child.name) === segments && child.type === 'file')
-	) as FileStub[];
+	) as IFile[];
 
 	const can_create = $derived.by(() => {
 		const result = {
@@ -156,7 +157,7 @@
 
 	{#each child_directories as directory}
 		<Folder
-			directory={directory as DirectoryStub}
+			directory={directory as Directory}
 			prefix={directory.name + '/'}
 			depth={depth + 1}
 			contents={children}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js
index 4c782c5c90..d4e7c578c3 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js
@@ -4,8 +4,8 @@ import { setContext, getContext } from 'svelte';
  * @typedef {{
  *   collapsed: import('svelte/store').Writable<Record<string, boolean>>;
  *   add: (name: string, type: 'file' | 'directory') => Promise<void>;
- *   rename: (stub: import('$lib/tutorial').Stub, name: string) => Promise<void>;
- *   remove: (stub: import('$lib/tutorial').Stub) => Promise<void>;
+ *   rename: (stub: import('editor').Item, name: string) => Promise<void>;
+ *   remove: (stub: import('editor').Item) => Promise<void>;
  *   select: (name: string) => void;
  *   workspace: import('editor').Workspace
  * }} FileTreeContext
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/utils.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/utils.ts
index 4bd257eaa9..a4b0e3ad61 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/utils.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/utils.ts
@@ -1,6 +1,6 @@
-import type { DirectoryStub, Stub } from '$lib/tutorial';
+import type { Directory, Item } from 'editor';
 
-export function create_directories(name: string, files: Stub[]) {
+export function create_directories(name: string, files: Item[]) {
 	const existing = new Set();
 
 	for (const file of files) {
@@ -9,7 +9,7 @@ export function create_directories(name: string, files: Stub[]) {
 		}
 	}
 
-	const directories: DirectoryStub[] = [];
+	const directories: Directory[] = [];
 
 	const parts = name.split('/');
 	while (parts.length) {

From d538779284d80d5755dcf4a796cc72475f2e9783 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Oct 2024 08:08:43 -0400
Subject: [PATCH 3/6] try this

---
 packages/editor/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor/package.json b/packages/editor/package.json
index d9a8ef7da9..413faaed92 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -11,7 +11,8 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"prepare": "svelte-kit sync"
 	},
 	"exports": {
 		".": {

From 0af162e989af2ba6f19095c9889195d4d0e4ac4d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Oct 2024 08:10:19 -0400
Subject: [PATCH 4/6] gah

---
 packages/editor/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor/package.json b/packages/editor/package.json
index 413faaed92..ca21c790d3 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -24,6 +24,7 @@
 		"**/*.css"
 	],
 	"files": [
+		"src",
 		"dist",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"

From 6f5d833ad2728f56aca5ebad7b12fe1b0888ecc1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Oct 2024 08:14:20 -0400
Subject: [PATCH 5/6] fix

---
 packages/editor/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
index 6f788f1603..d4a5412e42 100644
--- a/packages/editor/tsconfig.json
+++ b/packages/editor/tsconfig.json
@@ -10,6 +10,6 @@
 		"sourceMap": true,
 		"strict": true,
 		"module": "NodeNext",
-		"moduleResolution": "NodeNext"
+		"moduleResolution": "bundler"
 	}
 }

From dda9dfe87be32317b8548aee42584386a7733874 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 16 Oct 2024 08:21:49 -0400
Subject: [PATCH 6/6] oops

---
 .../svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte
index ec7587e031..8d69298a05 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte
@@ -1,5 +1,5 @@
 <script>
-	/** @type {import('$lib/tutorial').FileStub | null} */
+	/** @type {import('editor').File | null} */
 	export let selected;
 
 	const image_types = new Map([