From 1e982c1e6d33e03d3f0939cf66c79db7adb1df08 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Wed, 5 Apr 2023 15:51:47 +0530
Subject: [PATCH 01/15] chore: Run prettier

---
 sites/svelte.dev/src/routes/docs/+page.svelte | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/sites/svelte.dev/src/routes/docs/+page.svelte b/sites/svelte.dev/src/routes/docs/+page.svelte
index ec6a29bfa8..f6ef383623 100644
--- a/sites/svelte.dev/src/routes/docs/+page.svelte
+++ b/sites/svelte.dev/src/routes/docs/+page.svelte
@@ -130,7 +130,7 @@
 		'accessibility-warnings-a11y-role-supports-aria-props',
 		'accessibility-warnings-a11y-structure',
 		'accessibility-warnings-a11y-unknown-aria-attribute',
-		'accessibility-warnings-a11y-unknown-role',
+		'accessibility-warnings-a11y-unknown-role'
 	];
 
 	/** @type {Map<RegExp, string>}*/
@@ -154,7 +154,7 @@
 		[/template-syntax-(const|debug|html)$/i, 'special-tags#$1'],
 		[
 			/template-syntax-(tags|attributes-and-props|text-expressions|comments)$/i,
-			'dot-svelte-files#$1',
+			'dot-svelte-files#$1'
 		],
 		// !!!! This one should stay at the bottom of `template-syntax`, or it may end up hijacking logic blocks and special tags
 		[/template-syntax-(.+)/i, 'special-elements#$1'],
@@ -164,7 +164,7 @@
 		[/run-time-(client-side-component-api)-?(.*)/i, '$1#$2'],
 		[
 			/run-time-(svelte-easing|server-side-component-api|custom-element-api|svelte-register)$/i,
-			'$1',
+			'$1'
 		],
 		// Catch all, should be at the end or will include store, motion, transition and other modules starting with svelte
 		[/run-time-(svelte)(?:-(.+))?/i, '$1#$2'],
@@ -173,7 +173,7 @@
 		[/compile-time-?(.*)/i, 'svelte-compiler#$1'],
 
 		// Accessibility warnings
-		[/(accessibility-warnings)-?(.+)/i, '$1#$2'],
+		[/(accessibility-warnings)-?(.+)/i, '$1#$2']
 	]);
 
 	function get_old_new_ids_map() {
@@ -199,7 +199,6 @@
 	}
 
 	function getURlToRedirectTo() {
-		console.log(get_old_new_ids_map());
 		const hash = $page.url.hash.replace(/^#/i, '');
 
 		if (!hash) return '/docs/introduction';
@@ -212,5 +211,8 @@
 		return `/docs/${old_new_map.get(hash)}`;
 	}
 
-	onMount(() => goto(getURlToRedirectTo(), { replaceState: true }));
+	onMount(() => {
+		console.log(get_old_new_ids_map());
+		goto(getURlToRedirectTo(), { replaceState: true });
+	});
 </script>

From 99979959c04616142cbc104a22af0edf53eb1635 Mon Sep 17 00:00:00 2001
From: Puru Vijay <47742487+PuruVJ@users.noreply.github.com>
Date: Wed, 5 Apr 2023 21:36:59 +0530
Subject: [PATCH 02/15] Update readme (#8453)

---
 sites/svelte.dev/README.md                    | 154 +++++++++++++++++-
 sites/svelte.dev/src/routes/blog/+page.svelte |   1 -
 2 files changed, 148 insertions(+), 7 deletions(-)

diff --git a/sites/svelte.dev/README.md b/sites/svelte.dev/README.md
index 47cc33dd74..085ad9d53e 100644
--- a/sites/svelte.dev/README.md
+++ b/sites/svelte.dev/README.md
@@ -9,16 +9,16 @@ If you do want to use a database, set it up on [Supabase](https://supabase.com)
 Run the site sub-project:
 
 ```bash
-pnpm install
-pnpm dev
+npm install
+npm run dev
 ```
 
 and navigate to [localhost:5173](http://localhost:5173).
 
-The first time you run the site locally, it will update the list of Contributors and REPL dependencies. After this it won't run again unless you force it by running:
+The first time you run the site locally, it will update the list of Contributors, REPL dependencies and examples data that is used on the [examples page](https://svelte-dev-2.vercel.app/examples). After this it won't run again unless you force it by running:
 
 ```bash
-pnpm update
+npm run update
 ```
 
 ## Running using the local copy of Svelte
@@ -56,11 +56,153 @@ The GitHub app requires a specific callback URL, and so cannot be used with the
 
 ## Building the site
 
-To build the website, run `pnpm build`. The output can be found in `build`.
+To build the website, run `npm run build`. The output can be found in `.vercel`.
 
 ## Testing
 
-Tests can be run using `pnpm test`.
+Tests can be run using `npm run test`.
+
+## Docs & other content
+
+All the docs, examples, tutorials, FAQ live in the [site/content](../../site/content) directory, outside the site sub-project. If you modify these, and your app server is running, you will need to reload the page to see the changes.
+
+Following are the file structures of the different kind of documentations
+
+### Docs structure
+
+```txt
+- site/content/docs
+  - 01-getting-started                  <- Category
+    - meta.json                           <- Metadata
+    - 01-introduction.md                  <- Page
+  - 02-template-syntax                  <- Category
+    - meta.json                           <- Metadata
+    - 01-logic-blocks.md                  <- Page
+    - 02-special-tags.md                  <- Page
+    - 03-element-directives.md            <- Page
+```
+
+If you are creating a new page, it must be within a category. That is, you can't have a .md file in the `docs` directory's root level. You may have a category without any pages in it, but you can't have a page without a category. You can add the new page in an existing category, or create your own, for example:
+
+```txt
+- site/content/docs
+  <!-- Rest of the docs -->
++ - 07-my-new-category                  <- Category
++   - 01-my-new-page.md                  <- Page
+```
+
+The numbers in front of category folders and page files are just for ordering the content. They may not be consecutive. Their only purpose exists for the docs author to decide how the content is arranged.
+
+> Because of hardcoded regex in docs processing code, the numbers prefixed to pages are REQUIRED and _must be two digits_.
+
+The name of the file is what determines the URL of the page. For example, the URL of `01-introduction.md` is `https://svelte.dev/docs/introduction`. The URL of `02-special-tags.md` is `https://svelte.dev/docs/special-tags`. Even though these are in categories, the URL does not contain the category name. Keep this in mind when creating new pages, as two pages with same slug in different categories will clash.
+
+**meta.json** files contain data about the current category. At the time of writing it only has one field: `title`
+
+```json
+{
+	"title": "Getting Started"
+}
+```
+
+This `title` field is used as category text in the sidebar on docs page.
+
+Every single .md file in the docs must have frontmatter with `title` in it. For example, this is how the frontmatter of `02-logic-blocks.md` looks like:
+
+```md
+---
+title: .svelte files
+---
+
+Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
+
+All three sections — script, styles and markup — are optional.
+
+<!-- REST OF THE CONTENT -->
+```
+
+You need not specify a h1 tag(or in markdown, a `#`). The `title` field in the frontmatter will be used as the h1 tag.
+
+The headings in the document must start from h2(`##`). That is, you can't have an h1 tag in the document. h2(`##`), h3(`###`), h4(`####`) and h5(`#####`) are all valid.
+
+#### Processing
+
+Docs are processed in the [`src/lib/server/docs`](./src/lib/server/docs) folder. `get-docs-data.js` is responsible for reading the docs from filesystem and accumulating the metadata in forms of arrays and objects. `docs/index.js` has the code responsible for _rendering_ the markdown files into HTML. These functions are then imported into [src/routes/docs/+layout.server.js](./src/routes/docs/+layout.server.js) and used to generate docs list, and similarly in [src/routes/docs/%5Bslug%5D/+page.server.js](./src/routes/docs/%5Bslug%5D/%2Bpage.server.js) and are rendered there.
+
+### Tutorial structure
+
+```txt
+- site/content/tutorial
+  - 01-introduction                   <- Category
+    - meta.json                           <- Metadata
+    - 01-basics                       <- Page's content folder
+      - text.md                           <- Text content of tutorial
+      - app-a                             <- The initial app folder
+        - App.svelte
+        - store.js
+      - app-b                             <- The final app folder. Not always present
+        - App.svelte
+        - store.js
+```
+
+Similar to how docs are structured, only difference is that the pages are in a folders, and their content is in a `text.md` file. Alongside, are two folders, _app-a_ and _app-b_. These are the initial and final apps respectively. The initial app is the one that the tutorial shows, and the final app is the one that the tutorial switches to after user clicks on the **Show me** button.
+
+> app-b is not always there. This means that the _Show me_ button is not present for that page.
+
+The naming scheme of docs is followed here as well. The numbers in front of the folders are just for ordering the content. They may not be consecutive. Their only purpose exists for the tutorial author to decide how the content is arranged. _And they are compulsary_.
+
+#### Processing
+
+Tutorials are processed in the [`src/lib/server/tutorial`](./src/lib/server/tutorial) folder. `get-tutorial-data.js` is responsible for reading the tutorials from filesystem and accumulating the metadata in forms of arrays and objects. `tutorial/index.js` has the code responsible for _rendering_ the markdown files into HTML. These functions are then imported into [src/routes/tutorial/+layout.server.js](./src/routes/tutorial/%2Blayout.server.js) and used to generate tutorial list, and similarly in [src/routes/tutorial/%5Bslug%5D/+page.server.js](./src/routes/tutorial/%5Bslug%5D/%2Bpage.server.js) and are rendered there.
+
+### Examples structure
+
+```txt
+- site/content/examples
+  - 00-introduction                   <- Category
+    - meta.json                           <- Metadata
+    - 00-hello-world                    <- Page's content folder
+      - meta.json                           <- Metadata
+      - App.svelte                        <- code files
+  - 01-reactivity                     <- Category
+    - meta.json                           <- Metadata
+    - 00-reactive-assignments         <- Page's content folder
+      - meta.json                           <- Metadata
+      - App.svelte                          <- code files
+```
+
+Similar to the tutorial, only difference: There is no `text.md`, and the code files are kept right in the folder, not in `app-` folder.
+
+Same naming scheme as docs and tutorial is followed.
+
+#### Processing
+
+Examples are processed in the [`src/lib/server/examples`](./src/lib/server/examples) folder. `get-examples-data.js` is responsible for reading the examples from filesystem and accumulating the metadata in forms of arrays and objects. `examples/index.js` has the code responsible for _rendering_ the markdown files into HTML. These functions are then imported into [src/routes/examples/%5Bslug%5D/+page.server.js](./src/routes/examples/%5Bslug%5D/%2Bpage.server.js) and are rendered there.
+
+### Blog structure
+
+```txt
+- site/content/blog
+  - 2019-01-01-my-first-post.md
+  - 2019-01-02-my-second-post.md
+```
+
+Compared to the rest of the content, blog posts are not in a folder. They are placed at the root of `site/content/blog` folder. The name of the file is the date of the post, followed by the slug of the post. The slug is the URL where the blog post is available. For example, the slug of `2019-01-01-my-first-post.md` is `my-first-post`.
+
+All the metadata about the blog post is mentioned in the frontematter of a post. For example, this is how the frontmatter of [2023-03-09-zero-config-type-safety.md](../../site/content/blog/2023-03-09-zero-config-type-safety.md) looks like:
+
+```md
+---
+title: Zero-effort type safety
+description: More convenience and correctness, less boilerplate
+author: Simon Holthausen
+authorURL: https://twitter.com/dummdidumm_
+---
+```
+
+#### Processing
+
+Blog posts are processed in the [`src/lib/server/blog`](./src/lib/server/blog) folder. `get-blog-data.js` is responsible for reading the blog posts from filesystem and accumulating the metadata in forms of arrays and objects. `blog/index.js` has the code responsible for _rendering_ the markdown files into HTML. These functions are then imported into [src/routes/blog/+page.svelte](./src/routes/blog/%2Bpage.server.js), where they show the list of blogs. The rendering function is imported in [src/routes/blog/%5Bslug%5D/+page.server.js](./src/routes/blog/%5Bslug%5D/%2Bpage.server.js) and renders the individual blog post there.
 
 ## Translating the API docs
 
diff --git a/sites/svelte.dev/src/routes/blog/+page.svelte b/sites/svelte.dev/src/routes/blog/+page.svelte
index 119cbd2e93..ddb748bea3 100644
--- a/sites/svelte.dev/src/routes/blog/+page.svelte
+++ b/sites/svelte.dev/src/routes/blog/+page.svelte
@@ -1,5 +1,4 @@
 <script>
-	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
 

From def1890f4ff0cccb9573bfc79984fbe1258ed318 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 11 Apr 2023 02:25:53 -0700
Subject: [PATCH 03/15] chore: bump @jridgewell/sourcemap-codec (#8458)

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2c894b1605..3f32f9633f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
         "@rollup/plugin-commonjs": "^11.0.0",
         "@rollup/plugin-json": "^6.0.0",
         "@rollup/plugin-node-resolve": "^11.2.1",
@@ -184,9 +184,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
       "dev": true
     },
     "node_modules/@nodelib/fs.scandir": {
@@ -5499,9 +5499,9 @@
       "dev": true
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
       "dev": true
     },
     "@nodelib/fs.scandir": {
diff --git a/package.json b/package.json
index dc44115e39..25aafb817a 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,7 @@
   "homepage": "https://svelte.dev",
   "devDependencies": {
     "@ampproject/remapping": "^0.3.0",
-    "@jridgewell/sourcemap-codec": "^1.4.14",
+    "@jridgewell/sourcemap-codec": "^1.4.15",
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",

From 3a7685fef554f0ae2480146eb7c2d0ec944b28ac Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 11 Apr 2023 11:44:19 +0200
Subject: [PATCH 04/15] fix: special-case width/height attribute during spread
 (#8412)

fixes #6752

---------

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Tan Li Hau <tanhauhau@users.noreply.github.com>
---
 src/runtime/internal/dom.ts                           | 11 ++++++++++-
 .../samples/spread-width-height-attributes/_config.js |  4 ++++
 .../spread-width-height-attributes/main.svelte        |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/spread-width-height-attributes/_config.js
 create mode 100644 test/runtime/samples/spread-width-height-attributes/main.svelte

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 34049b3580..8a78accb50 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -306,6 +306,15 @@ export function attr(node: Element, attribute: string, value?: string) {
 	else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value);
 }
 
+/** 
+ * List of attributes that should always be set through the attr method,
+ * because updating them through the property setter doesn't work reliably.
+ * In the example of `width`/`height`, the problem is that the setter only
+ * accepts numeric values, but the attribute can also be set to a string like `50%`.
+ * If this list becomes too big, rethink this approach.
+ */
+const always_set_through_set_attribute = ['width', 'height'];
+
 export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
 	// @ts-ignore
 	const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
@@ -316,7 +325,7 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes
 			node.style.cssText = attributes[key];
 		} else if (key === '__value') {
 			(node as any).value = node[key] = attributes[key];
-		} else if (descriptors[key] && descriptors[key].set) {
+		} else if (descriptors[key] && descriptors[key].set && always_set_through_set_attribute.indexOf(key) === -1) {
 			node[key] = attributes[key];
 		} else {
 			attr(node, key, attributes[key]);
diff --git a/test/runtime/samples/spread-width-height-attributes/_config.js b/test/runtime/samples/spread-width-height-attributes/_config.js
new file mode 100644
index 0000000000..cf2dc7efde
--- /dev/null
+++ b/test/runtime/samples/spread-width-height-attributes/_config.js
@@ -0,0 +1,4 @@
+export default {
+	// https://github.com/sveltejs/svelte/issues/6752
+	html: '<img height="100%" width="100%" alt="" />'
+};
diff --git a/test/runtime/samples/spread-width-height-attributes/main.svelte b/test/runtime/samples/spread-width-height-attributes/main.svelte
new file mode 100644
index 0000000000..b91b008457
--- /dev/null
+++ b/test/runtime/samples/spread-width-height-attributes/main.svelte
@@ -0,0 +1 @@
+<img height="100%" width="100%" alt="" {...$$restProps} />

From 0adc09da9714bb0fcc7fafdbee569ea7cad4fae5 Mon Sep 17 00:00:00 2001
From: Cymaera <69355340+TheCymaera@users.noreply.github.com>
Date: Tue, 11 Apr 2023 18:17:58 +0800
Subject: [PATCH 05/15] feat: add support for resize observer bindings (#8022)

Implements ResizeObserver bindings: #5524 (comment)
Continuation of: #5963
Related to #7583

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 elements/index.d.ts                           |  5 ++
 src/compiler/compile/nodes/Binding.ts         |  3 +-
 src/compiler/compile/nodes/Element.ts         |  7 +-
 .../render_dom/wrappers/Element/Binding.ts    |  8 ++-
 .../render_dom/wrappers/Element/index.ts      | 32 +++++++--
 src/compiler/utils/patterns.ts                |  6 ++
 .../internal/ResizeObserverSingleton.ts       | 67 +++++++++++++++++++
 src/runtime/internal/dom.ts                   |  8 ++-
 8 files changed, 127 insertions(+), 9 deletions(-)
 create mode 100644 src/runtime/internal/ResizeObserverSingleton.ts

diff --git a/elements/index.d.ts b/elements/index.d.ts
index 7595d767bf..ac32ae94c3 100644
--- a/elements/index.d.ts
+++ b/elements/index.d.ts
@@ -546,6 +546,11 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	 */
 	'bind:innerText'?: string | undefined | null;
 
+	readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null;
+	readonly 'bind:contentBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
+	readonly 'bind:borderBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
+	readonly 'bind:devicePixelContentBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
+
 	// SvelteKit
 	'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
 	'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
index 0c29f7ec67..303506222f 100644
--- a/src/compiler/compile/nodes/Binding.ts
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -3,7 +3,7 @@ import get_object from '../utils/get_object';
 import Expression from './shared/Expression';
 import Component from '../Component';
 import TemplateScope from './shared/TemplateScope';
-import { regex_dimensions } from '../../utils/patterns';
+import { regex_dimensions, regex_box_size } from '../../utils/patterns';
 import { Node as ESTreeNode } from 'estree';
 import { TemplateNode } from '../../interfaces';
 import Element from './Element';
@@ -92,6 +92,7 @@ export default class Binding extends Node {
 
 		this.is_readonly =
 			regex_dimensions.test(this.name) ||
+			regex_box_size.test(this.name) ||
 			(isElement(parent) &&
 				((parent.is_media_node() && read_only_media_attributes.has(this.name)) ||
 					(parent.name === 'input' && type === 'file')) /* TODO others? */);
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 1678ea1caa..2410904d63 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -12,7 +12,7 @@ import Text from './Text';
 import { namespaces } from '../../utils/namespaces';
 import map_children from './shared/map_children';
 import { is_name_contenteditable, get_contenteditable_attr } from '../utils/contenteditable';
-import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character } from '../../utils/patterns';
+import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character, regex_box_size } from '../../utils/patterns';
 import fuzzymatch from '../../utils/fuzzymatch';
 import list from '../../utils/list';
 import Let from './Let';
@@ -1090,7 +1090,10 @@ export default class Element extends Node {
 				} else if (contenteditable && !contenteditable.is_static) {
 					return component.error(contenteditable, compiler_errors.dynamic_contenteditable_attribute);
 				}
-			} else if (name !== 'this') {
+			} else if (
+				name !== 'this' &&
+				!regex_box_size.test(name)
+			) {
 				return component.error(binding, compiler_errors.invalid_binding(binding.name));
 			}
 		});
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
index 642e4694b1..01da1f0e12 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
@@ -11,6 +11,7 @@ import { Node, Identifier } from 'estree';
 import add_to_set from '../../../utils/add_to_set';
 import mark_each_block_bindings from '../shared/mark_each_block_bindings';
 import handle_select_value_binding from './handle_select_value_binding';
+import { regex_box_size } from '../../../../utils/patterns';
 
 export default class BindingWrapper {
 	node: Binding;
@@ -455,7 +456,12 @@ function get_value_from_dom(
 		return x`$$value`;
 	}
 
-	// <select bind:value='selected'>
+	// <div bind:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize>
+	if (regex_box_size.test(name)) {
+		return x`@ResizeObserverSingleton.entries.get(this)?.${name}`;
+	}
+
+	// <select bind:value='selected>
 	if (node.name === 'select') {
 		return node.get_static_attribute_value('multiple') === true ?
 			x`@select_multiple_value(this)` :
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 7a0bdbaa06..0f1faa8f5e 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -12,7 +12,7 @@ import { namespaces } from '../../../../utils/namespaces';
 import AttributeWrapper from './Attribute';
 import StyleAttributeWrapper from './StyleAttribute';
 import SpreadAttributeWrapper from './SpreadAttribute';
-import { regex_dimensions, regex_starts_with_newline, regex_backslashes } from '../../../../utils/patterns';
+import { regex_dimensions, regex_starts_with_newline, regex_backslashes, regex_border_box_size, regex_content_box_size, regex_device_pixel_content_box_size, regex_content_rect } from '../../../../utils/patterns';
 import Binding from './Binding';
 import add_to_set from '../../../utils/add_to_set';
 import { add_event_handler } from '../shared/add_event_handlers';
@@ -64,11 +64,29 @@ const events = [
 		filter: (node: Element, _name: string) =>
 			node.name === 'input' && node.get_static_attribute_value('type') === 'range'
 	},
+	// resize events
 	{
 		event_names: ['elementresize'],
 		filter: (_node: Element, name: string) =>
 			regex_dimensions.test(name)
 	},
+	{
+		event_names: ['elementresizecontentbox'],
+		filter: (_node: Element, name: string) =>
+			regex_content_rect.test(name) ?? regex_content_box_size.test(name)
+	},
+
+	{
+		event_names: ['elementresizeborderbox'],
+		filter: (_node: Element, name: string) => 
+			regex_border_box_size.test(name)
+	},
+
+	{
+		event_names: ['elementresizedevicepixelcontentbox'],
+		filter: (_node: Element, name: string) =>
+			regex_device_pixel_content_box_size.test(name)
+	},
 	// media events
 	{
 		event_names: ['timeupdate'],
@@ -747,13 +765,19 @@ export default class ElementWrapper extends Wrapper {
 		`);
 
 		binding_group.events.forEach(name => {
-			if (name === 'elementresize') {
-				// special case
+			const resizeListenerFunctions = {
+				elementresize: 'add_iframe_resize_listener',
+				elementresizecontentbox: 'resize_observer_content_box.observe',
+				elementresizeborderbox: 'resize_observer_border_box.observe',
+				elementresizedevicepixelcontentbox: 'resize_observer_device_pixel_content_box.observe'
+			};
+
+			if (name in resizeListenerFunctions) {
 				const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`);
 				block.add_variable(resize_listener);
 
 				block.chunks.mount.push(
-					b`${resize_listener} = @add_resize_listener(${this.var}, ${callee}.bind(${this.var}));`
+					b`${resize_listener} = @${resizeListenerFunctions[name]}(${this.var}, ${callee}.bind(${this.var}));`
 				);
 
 				block.chunks.destroy.push(
diff --git a/src/compiler/utils/patterns.ts b/src/compiler/utils/patterns.ts
index 9429d47227..f0fb08c7c9 100644
--- a/src/compiler/utils/patterns.ts
+++ b/src/compiler/utils/patterns.ts
@@ -22,3 +22,9 @@ export const regex_ends_with_underscore = /_$/;
 export const regex_invalid_variable_identifier_characters = /[^a-zA-Z0-9_$]/g;
 
 export const regex_dimensions = /^(?:offset|client)(?:Width|Height)$/;
+
+export const regex_content_rect = /^(?:contentRect)$/;
+export const regex_content_box_size = /^(?:contentBoxSize)$/;
+export const regex_border_box_size = /^(?:borderBoxSize)$/;
+export const regex_device_pixel_content_box_size = /^(?:devicePixelContentBoxSize)$/;
+export const regex_box_size = /^(?:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize)$/;
diff --git a/src/runtime/internal/ResizeObserverSingleton.ts b/src/runtime/internal/ResizeObserverSingleton.ts
new file mode 100644
index 0000000000..6d1e5b567b
--- /dev/null
+++ b/src/runtime/internal/ResizeObserverSingleton.ts
@@ -0,0 +1,67 @@
+/**
+ * Resize observer singleton.
+ * One listener per element only!
+ * https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
+ */
+export class ResizeObserverSingleton {
+	constructor(readonly options?: ResizeObserverOptions) {}
+
+	observe(element: Element, listener: Listener) {
+		this._listeners.set(element, listener);
+		this._getObserver().observe(element, this.options);
+		return () => {
+			this._listeners.delete(element);
+			this._observer.unobserve(element); // this line can probably be removed
+		};
+	}
+
+	static readonly entries: WeakMap<Element, ResizeObserverEntry> = 'WeakMap' in globalThis ? new WeakMap() : undefined;
+
+	private readonly _listeners: WeakMap<Element, Listener> = 'WeakMap' in globalThis ? new WeakMap() : undefined;
+	private _observer?: ResizeObserver;
+	private _getObserver() {
+		return this._observer ?? (this._observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				ResizeObserverSingleton.entries.set(entry.target, entry);
+				this._listeners.get(entry.target)?.(entry);
+			}
+		}));
+	}
+}
+
+type Listener = (entry: ResizeObserverEntry)=>any;
+
+// TODO: Remove this
+interface ResizeObserverSize {
+    readonly blockSize: number;
+    readonly inlineSize: number;
+}
+
+interface ResizeObserverEntry {
+    readonly borderBoxSize: readonly ResizeObserverSize[];
+    readonly contentBoxSize: readonly ResizeObserverSize[];
+    readonly contentRect: DOMRectReadOnly;
+    readonly devicePixelContentBoxSize: readonly ResizeObserverSize[];
+    readonly target: Element;
+}
+
+type ResizeObserverBoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box';
+
+interface ResizeObserverOptions {
+    box?: ResizeObserverBoxOptions;
+}
+
+interface ResizeObserver {
+    disconnect(): void;
+    observe(target: Element, options?: ResizeObserverOptions): void;
+    unobserve(target: Element): void;
+}
+
+interface ResizeObserverCallback {
+    (entries: ResizeObserverEntry[], observer: ResizeObserver): void;
+}
+
+declare let ResizeObserver: {
+    prototype: ResizeObserver;
+    new(callback: ResizeObserverCallback): ResizeObserver;
+};
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 8a78accb50..4ffa9e4742 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -1,3 +1,4 @@
+import { ResizeObserverSingleton } from './ResizeObserverSingleton';
 import { contenteditable_truthy_values, has_prop } from './utils';
 
 // Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM
@@ -698,7 +699,7 @@ export function is_crossorigin() {
 	return crossorigin;
 }
 
-export function add_resize_listener(node: HTMLElement, fn: () => void) {
+export function add_iframe_resize_listener(node: HTMLElement, fn: () => void) {
 	const computed_style = getComputedStyle(node);
 
 	if (computed_style.position === 'static') {
@@ -746,6 +747,11 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
 	};
 }
 
+export const resize_observer_content_box = new ResizeObserverSingleton({ box: 'content-box' });
+export const resize_observer_border_box = new ResizeObserverSingleton({ box: 'border-box' });
+export const resize_observer_device_pixel_content_box = new ResizeObserverSingleton({ box: 'device-pixel-content-box' });
+export { ResizeObserverSingleton };
+
 export function toggle_class(element, name, toggle) {
 	element.classList[toggle ? 'add' : 'remove'](name);
 }

From 56351a3fabbc8ebd44723aa724b8050ab19a6dcd Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 11 Apr 2023 12:19:30 +0200
Subject: [PATCH 06/15] chore: update changelog

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d5568dce50..ea9545aa65 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Svelte changelog
 
+## Unreleased
+
+* Handle `width`/`height` attributes when spreading ([#6752](https://github.com/sveltejs/svelte/issues/6752))
+* Add support for resize observer bindings (`<div bind:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize>`) ([#8022](https://github.com/sveltejs/svelte/pull/8022))
+
 ## 3.58.0
 
 * Add `bind:innerText` for `contenteditable` elements ([#3311](https://github.com/sveltejs/svelte/issues/3311))

From cd690e025bb2ad2e50cfc417d4b58408c779f080 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james@jamesscottbrown.com>
Date: Tue, 11 Apr 2023 13:05:22 +0100
Subject: [PATCH 07/15] docs: clarify meaning of "this" in a comment (#8478)

---
 site/content/docs/02-component-format.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/02-component-format.md b/site/content/docs/02-component-format.md
index d9f7a35662..f1563a62c6 100644
--- a/site/content/docs/02-component-format.md
+++ b/site/content/docs/02-component-format.md
@@ -286,7 +286,7 @@ You cannot `export default`, since the default export is the component itself.
 <script context="module">
 	let totalComponents = 0;
 
-	// this allows an importer to do e.g.
+	// the export keyword allows this function to imported with e.g.
 	// `import Example, { alertTotal } from './Example.svelte'`
 	export function alertTotal() {
 		alert(totalComponents);

From 009ce45e634810b01cca113dc7cb0ff581cd6cf7 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 11 Apr 2023 10:14:14 -0700
Subject: [PATCH 08/15] site: tweak content layout (#8483)

---
 ...velte-files.md => 01-svelte-components.md} | 133 +----------------
 .../02-template-syntax/02-basic-markup.md     | 134 ++++++++++++++++++
 ...{02-logic-blocks.md => 03-logic-blocks.md} |   0
 ...{03-special-tags.md => 04-special-tags.md} |   0
 ...directives.md => 05-element-directives.md} |   0
 ...rectives.md => 06-component-directives.md} |   0
 ...ial-elements.md => 07-special-elements.md} |   0
 sites/svelte.dev/package-lock.json            |   8 +-
 sites/svelte.dev/package.json                 |   2 +-
 9 files changed, 140 insertions(+), 137 deletions(-)
 rename site/content/docs/02-template-syntax/{01-dot-svelte-files.md => 01-svelte-components.md} (71%)
 create mode 100644 site/content/docs/02-template-syntax/02-basic-markup.md
 rename site/content/docs/02-template-syntax/{02-logic-blocks.md => 03-logic-blocks.md} (100%)
 rename site/content/docs/02-template-syntax/{03-special-tags.md => 04-special-tags.md} (100%)
 rename site/content/docs/02-template-syntax/{04-element-directives.md => 05-element-directives.md} (100%)
 rename site/content/docs/02-template-syntax/{05-component-directives.md => 06-component-directives.md} (100%)
 rename site/content/docs/02-template-syntax/{06-special-elements.md => 07-special-elements.md} (100%)

diff --git a/site/content/docs/02-template-syntax/01-dot-svelte-files.md b/site/content/docs/02-template-syntax/01-svelte-components.md
similarity index 71%
rename from site/content/docs/02-template-syntax/01-dot-svelte-files.md
rename to site/content/docs/02-template-syntax/01-svelte-components.md
index 18c76b3944..e0774e548e 100644
--- a/site/content/docs/02-template-syntax/01-dot-svelte-files.md
+++ b/site/content/docs/02-template-syntax/01-svelte-components.md
@@ -1,5 +1,5 @@
 ---
-title: .svelte files
+title: Svelte components
 ---
 
 Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
@@ -340,134 +340,3 @@ In that case, the `<style>` tag will be inserted as-is into the DOM, no scoping
 	</style>
 </div>
 ```
-
-## Tags
-
-A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag, such as `<Widget>` or `<Namespace.Widget>`, indicates a _component_.
-
-```svelte
-<script>
-	import Widget from './Widget.svelte';
-</script>
-
-<div>
-	<Widget />
-</div>
-```
-
-## Attributes and props
-
-By default, attributes work exactly like their HTML counterparts.
-
-```svelte
-<div class="foo">
-	<button disabled>can't touch this</button>
-</div>
-```
-
-As in HTML, values may be unquoted.
-
-```svelte
-<input type="checkbox" />
-```
-
-Attribute values can contain JavaScript expressions.
-
-```svelte
-<a href="page/{p}">page {p}</a>
-```
-
-Or they can _be_ JavaScript expressions.
-
-```svelte
-<button disabled={!clickable}>...</button>
-```
-
-Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
-
-All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).
-
-```svelte
-<input required={false} placeholder="This input field is not required" />
-<div title={null}>This div has no title attribute</div>
-```
-
-An expression might include characters that would cause syntax highlighting to fail in regular HTML, so quoting the value is permitted. The quotes do not affect how the value is parsed:
-
-```svelte
-<button disabled={number !== 42}>...</button>
-```
-
-When the attribute name and value match (`name={name}`), they can be replaced with `{name}`.
-
-```svelte
-<!-- These are equivalent -->
-<button {disabled}>...</button>
-<button {disabled}>...</button>
-```
-
-By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
-
-As with elements, `name={name}` can be replaced with the `{name}` shorthand.
-
-```svelte
-<Widget foo={bar} answer={42} text="hello" />
-```
-
-_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
-
-An element or component can have multiple spread attributes, interspersed with regular ones.
-
-```svelte
-<Widget {...things} />
-```
-
-_`$$props`_ references all props that are passed to a component, including ones that are not declared with `export`. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.
-
-```svelte
-<Widget {...$$props} />
-```
-
-_`$$restProps`_ contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same optimisation problems as _`$$props`_, and is likewise not recommended.
-
-```svelte
-<input {...$$restProps} />
-```
-
-> The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable.
-
-> Sometimes, the attribute order matters as Svelte sets attributes sequentially in JavaScript. For example, `<input type="range" min="0" max="1" value={0.5} step="0.1"/>`, Svelte will attempt to set the value to `1` (rounding up from 0.5 as the step by default is 1), and then set the step to `0.1`. To fix this, change it to `<input type="range" min="0" max="1" step="0.1" value={0.5}/>`.
-
-> Another example is `<img src="..." loading="lazy" />`. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to `<img loading="lazy" src="...">` to make the image lazily loaded.
-
-## Text expressions
-
-```svelte
-{expression}
-```
-
-Text can also contain JavaScript expressions:
-
-> If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
-
-```svelte
-<h1>Hello {name}!</h1>
-<p>{a} + {b} = {a + b}.</p>
-
-<div>{/^[A-Za-z ]+$/.test(value) ? x : y}</div>
-```
-
-## Comments
-
-You can use HTML comments inside components.
-
-```svelte
-<!-- this is a comment! --><h1>Hello world</h1>
-```
-
-Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
-
-```svelte
-<!-- svelte-ignore a11y-autofocus -->
-<input bind:value={name} autofocus />
-```
diff --git a/site/content/docs/02-template-syntax/02-basic-markup.md b/site/content/docs/02-template-syntax/02-basic-markup.md
new file mode 100644
index 0000000000..83f11861e5
--- /dev/null
+++ b/site/content/docs/02-template-syntax/02-basic-markup.md
@@ -0,0 +1,134 @@
+---
+title: Basic markup
+---
+
+## Tags
+
+A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag, such as `<Widget>` or `<Namespace.Widget>`, indicates a _component_.
+
+```svelte
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget />
+</div>
+```
+
+## Attributes and props
+
+By default, attributes work exactly like their HTML counterparts.
+
+```svelte
+<div class="foo">
+	<button disabled>can't touch this</button>
+</div>
+```
+
+As in HTML, values may be unquoted.
+
+```svelte
+<input type="checkbox" />
+```
+
+Attribute values can contain JavaScript expressions.
+
+```svelte
+<a href="page/{p}">page {p}</a>
+```
+
+Or they can _be_ JavaScript expressions.
+
+```svelte
+<button disabled={!clickable}>...</button>
+```
+
+Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
+
+All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).
+
+```svelte
+<input required={false} placeholder="This input field is not required" />
+<div title={null}>This div has no title attribute</div>
+```
+
+An expression might include characters that would cause syntax highlighting to fail in regular HTML, so quoting the value is permitted. The quotes do not affect how the value is parsed:
+
+```svelte
+<button disabled={number !== 42}>...</button>
+```
+
+When the attribute name and value match (`name={name}`), they can be replaced with `{name}`.
+
+```svelte
+<!-- These are equivalent -->
+<button {disabled}>...</button>
+<button {disabled}>...</button>
+```
+
+By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
+
+As with elements, `name={name}` can be replaced with the `{name}` shorthand.
+
+```svelte
+<Widget foo={bar} answer={42} text="hello" />
+```
+
+_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
+
+An element or component can have multiple spread attributes, interspersed with regular ones.
+
+```svelte
+<Widget {...things} />
+```
+
+_`$$props`_ references all props that are passed to a component, including ones that are not declared with `export`. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.
+
+```svelte
+<Widget {...$$props} />
+```
+
+_`$$restProps`_ contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same optimisation problems as _`$$props`_, and is likewise not recommended.
+
+```svelte
+<input {...$$restProps} />
+```
+
+> The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable.
+
+> Sometimes, the attribute order matters as Svelte sets attributes sequentially in JavaScript. For example, `<input type="range" min="0" max="1" value={0.5} step="0.1"/>`, Svelte will attempt to set the value to `1` (rounding up from 0.5 as the step by default is 1), and then set the step to `0.1`. To fix this, change it to `<input type="range" min="0" max="1" step="0.1" value={0.5}/>`.
+
+> Another example is `<img src="..." loading="lazy" />`. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to `<img loading="lazy" src="...">` to make the image lazily loaded.
+
+## Text expressions
+
+```svelte
+{expression}
+```
+
+Text can also contain JavaScript expressions:
+
+> If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
+
+```svelte
+<h1>Hello {name}!</h1>
+<p>{a} + {b} = {a + b}.</p>
+
+<div>{/^[A-Za-z ]+$/.test(value) ? x : y}</div>
+```
+
+## Comments
+
+You can use HTML comments inside components.
+
+```svelte
+<!-- this is a comment! --><h1>Hello world</h1>
+```
+
+Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
+
+```svelte
+<!-- svelte-ignore a11y-autofocus -->
+<input bind:value={name} autofocus />
+```
diff --git a/site/content/docs/02-template-syntax/02-logic-blocks.md b/site/content/docs/02-template-syntax/03-logic-blocks.md
similarity index 100%
rename from site/content/docs/02-template-syntax/02-logic-blocks.md
rename to site/content/docs/02-template-syntax/03-logic-blocks.md
diff --git a/site/content/docs/02-template-syntax/03-special-tags.md b/site/content/docs/02-template-syntax/04-special-tags.md
similarity index 100%
rename from site/content/docs/02-template-syntax/03-special-tags.md
rename to site/content/docs/02-template-syntax/04-special-tags.md
diff --git a/site/content/docs/02-template-syntax/04-element-directives.md b/site/content/docs/02-template-syntax/05-element-directives.md
similarity index 100%
rename from site/content/docs/02-template-syntax/04-element-directives.md
rename to site/content/docs/02-template-syntax/05-element-directives.md
diff --git a/site/content/docs/02-template-syntax/05-component-directives.md b/site/content/docs/02-template-syntax/06-component-directives.md
similarity index 100%
rename from site/content/docs/02-template-syntax/05-component-directives.md
rename to site/content/docs/02-template-syntax/06-component-directives.md
diff --git a/site/content/docs/02-template-syntax/06-special-elements.md b/site/content/docs/02-template-syntax/07-special-elements.md
similarity index 100%
rename from site/content/docs/02-template-syntax/06-special-elements.md
rename to site/content/docs/02-template-syntax/07-special-elements.md
diff --git a/sites/svelte.dev/package-lock.json b/sites/svelte.dev/package-lock.json
index 3ea482a9b5..2ac8620774 100644
--- a/sites/svelte.dev/package-lock.json
+++ b/sites/svelte.dev/package-lock.json
@@ -20,7 +20,7 @@
 			"devDependencies": {
 				"@resvg/resvg-js": "^2.4.1",
 				"@sveltejs/adapter-vercel": "^2.4.1",
-				"@sveltejs/kit": "^1.15.1",
+				"@sveltejs/kit": "^1.15.4",
 				"@sveltejs/site-kit": "^3.4.0",
 				"@sveltejs/vite-plugin-svelte": "^2.0.4",
 				"@types/marked": "^4.0.8",
@@ -1248,9 +1248,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "1.15.1",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.1.tgz",
-			"integrity": "sha512-Wexy3N+COoClTuRawVJRbLoH5HFxNrXG3uoHt/Yd5IGx8WAcJM9Nj/CcBLw/tjCR9uDDYMnx27HxuPy3YIYQUA==",
+			"version": "1.15.4",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.4.tgz",
+			"integrity": "sha512-m+Tid9nbtFawmiu85lDlal0AQ7UeuV48UsuKMe06QLr3ntMQSUzIPqyswNRZqFrar6NhVTUXQ0aO61M3U4MWpQ==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json
index 6a3104aa3a..543264f913 100644
--- a/sites/svelte.dev/package.json
+++ b/sites/svelte.dev/package.json
@@ -28,7 +28,7 @@
 	"devDependencies": {
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-vercel": "^2.4.1",
-		"@sveltejs/kit": "^1.15.1",
+		"@sveltejs/kit": "^1.15.4",
 		"@sveltejs/site-kit": "^3.4.0",
 		"@sveltejs/vite-plugin-svelte": "^2.0.4",
 		"@types/marked": "^4.0.8",

From ec733593e6165fa51c4a2d8a4c9cb973549cef0c Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Tue, 11 Apr 2023 23:18:26 +0530
Subject: [PATCH 09/15] fix: Old site redirects

---
 sites/svelte.dev/src/routes/docs/+page.svelte | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/sites/svelte.dev/src/routes/docs/+page.svelte b/sites/svelte.dev/src/routes/docs/+page.svelte
index f6ef383623..da1672c297 100644
--- a/sites/svelte.dev/src/routes/docs/+page.svelte
+++ b/sites/svelte.dev/src/routes/docs/+page.svelte
@@ -137,14 +137,15 @@
 	const pages_regex_map = new Map([
 		// Basic ones
 		[/(before-we-begin|getting-started)$/i, 'introduction'],
-		[/(component-format|template-syntax)$/i, 'dot-svelte-files'],
+		[/template-syntax$/i, 'basic-markup'],
+		[/component-format$/i, 'svelte-components'],
 		[/run-time$/i, 'svelte'],
 		[/compile-time$/i, 'svelte-compiler'],
 		[/(accessibility-warnings)$/i, '$1'],
 
 		// component-format-
-		[/component-format-(script|style|script-context-module)$/i, 'dot-svelte-files#$1'],
-		[/component-format-(?:script)(?:-?(.*))$/i, 'dot-svelte-files#$1'],
+		[/component-format-(script|style|script-context-module)$/i, 'svelte-components#$1'],
+		[/component-format-(?:script)(?:-?(.*))$/i, 'svelte-components#$1'],
 
 		// template-syntax
 		[/template-syntax-((?:element|component)-directives)-?(.*)/i, '$1#$2'],
@@ -152,10 +153,7 @@
 		[/template-syntax-(?:slot)-?(.*)/i, 'special-elements#$1'],
 		[/template-syntax-(if|each|await|key)$/i, 'logic-blocks#$1'],
 		[/template-syntax-(const|debug|html)$/i, 'special-tags#$1'],
-		[
-			/template-syntax-(tags|attributes-and-props|text-expressions|comments)$/i,
-			'dot-svelte-files#$1'
-		],
+		[/template-syntax-(tags|attributes-and-props|text-expressions|comments)$/i, 'basic-markup#$1'],
 		// !!!! This one should stay at the bottom of `template-syntax`, or it may end up hijacking logic blocks and special tags
 		[/template-syntax-(.+)/i, 'special-elements#$1'],
 

From 71d173a4c0c48205f98b71015ebc8ee0cfadcb7a Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Tue, 11 Apr 2023 23:25:20 +0530
Subject: [PATCH 10/15] feat: Add home slot

---
 sites/svelte.dev/src/routes/+layout.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index 6d48972e86..8c96bed230 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -16,7 +16,11 @@
 
 <div style:display={$page.url.pathname !== '/docs' ? 'contents' : 'none'}>
 	<Shell nav_visible={$page.url.pathname !== '/repl/embed'}>
-		<Nav logo="/svelte-logo.svg">
+		<Nav>
+			<svelte:fragment slot="home">
+				<strong>svelte</strong>.dev
+			</svelte:fragment>
+
 			<svelte:fragment slot="nav-center">
 				{#if $page.url.pathname !== '/search'}
 					<li><Search /></li>

From 9425f18e52477193ea04b129ccb4a1a61a86cecf Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 11 Apr 2023 20:14:56 +0200
Subject: [PATCH 11/15] fix: observer PR cleanup (#8484)

leftovers from #8022
---
 .../render_dom/wrappers/Element/index.ts      | 35 +++++++++++++------
 .../internal/ResizeObserverSingleton.ts       | 10 +++---
 src/runtime/internal/dom.ts                   |  6 ++--
 test/js/samples/bind-width-height/expected.js |  4 +--
 test/js/samples/video-bindings/expected.js    |  4 +--
 5 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 0f1faa8f5e..cefebfcff3 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -765,20 +765,33 @@ export default class ElementWrapper extends Wrapper {
 		`);
 
 		binding_group.events.forEach(name => {
-			const resizeListenerFunctions = {
-				elementresize: 'add_iframe_resize_listener',
-				elementresizecontentbox: 'resize_observer_content_box.observe',
-				elementresizeborderbox: 'resize_observer_border_box.observe',
-				elementresizedevicepixelcontentbox: 'resize_observer_device_pixel_content_box.observe'
-			};
-
-			if (name in resizeListenerFunctions) {
+			if (['elementresize', 'elementresizecontentbox', 'elementresizeborderbox', 'elementresizedevicepixelcontentbox'].indexOf(name) !== -1) {
 				const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`);
 				block.add_variable(resize_listener);
 
-				block.chunks.mount.push(
-					b`${resize_listener} = @${resizeListenerFunctions[name]}(${this.var}, ${callee}.bind(${this.var}));`
-				);
+				// Can't dynamically do `@fn[name]`, code-red doesn't know how to resolve it
+				switch (name) {
+					case 'elementresize':
+						block.chunks.mount.push(
+							b`${resize_listener} = @add_iframe_resize_listener(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+					case 'elementresizecontentbox':
+						block.chunks.mount.push(
+							b`${resize_listener} = @resize_observer_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+					case 'elementresizeborderbox':
+						block.chunks.mount.push(
+							b`${resize_listener} = @resize_observer_border_box.observe(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+					case 'elementresizedevicepixelcontentbox':
+						block.chunks.mount.push(
+							b`${resize_listener} = @resize_observer_device_pixel_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+				}
 
 				block.chunks.destroy.push(
 					b`${resize_listener}();`
diff --git a/src/runtime/internal/ResizeObserverSingleton.ts b/src/runtime/internal/ResizeObserverSingleton.ts
index 6d1e5b567b..773f68e4ff 100644
--- a/src/runtime/internal/ResizeObserverSingleton.ts
+++ b/src/runtime/internal/ResizeObserverSingleton.ts
@@ -1,3 +1,5 @@
+import { globals } from './globals';
+
 /**
  * Resize observer singleton.
  * One listener per element only!
@@ -15,19 +17,19 @@ export class ResizeObserverSingleton {
 		};
 	}
 
-	static readonly entries: WeakMap<Element, ResizeObserverEntry> = 'WeakMap' in globalThis ? new WeakMap() : undefined;
-
-	private readonly _listeners: WeakMap<Element, Listener> = 'WeakMap' in globalThis ? new WeakMap() : undefined;
+	private readonly _listeners: WeakMap<Element, Listener> = 'WeakMap' in globals ? new WeakMap() : undefined;
 	private _observer?: ResizeObserver;
 	private _getObserver() {
 		return this._observer ?? (this._observer = new ResizeObserver((entries) => {
 			for (const entry of entries) {
-				ResizeObserverSingleton.entries.set(entry.target, entry);
+				(ResizeObserverSingleton as any).entries.set(entry.target, entry);
 				this._listeners.get(entry.target)?.(entry);
 			}
 		}));
 	}
 }
+// Needs to be written like this to pass the tree-shake-test
+(ResizeObserverSingleton as any).entries = 'WeakMap' in globals ? new WeakMap() : undefined;
 
 type Listener = (entry: ResizeObserverEntry)=>any;
 
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 4ffa9e4742..c025313c15 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -747,9 +747,9 @@ export function add_iframe_resize_listener(node: HTMLElement, fn: () => void) {
 	};
 }
 
-export const resize_observer_content_box = new ResizeObserverSingleton({ box: 'content-box' });
-export const resize_observer_border_box = new ResizeObserverSingleton({ box: 'border-box' });
-export const resize_observer_device_pixel_content_box = new ResizeObserverSingleton({ box: 'device-pixel-content-box' });
+export const resize_observer_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'content-box' });
+export const resize_observer_border_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'border-box' });
+export const resize_observer_device_pixel_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'device-pixel-content-box' });
 export { ResizeObserverSingleton };
 
 export function toggle_class(element, name, toggle) {
diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js
index 8966e57c9c..287c1b95b8 100644
--- a/test/js/samples/bind-width-height/expected.js
+++ b/test/js/samples/bind-width-height/expected.js
@@ -1,8 +1,8 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
+	add_iframe_resize_listener,
 	add_render_callback,
-	add_resize_listener,
 	detach,
 	element,
 	init,
@@ -23,7 +23,7 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[2].bind(div));
+			div_resize_listener = add_iframe_resize_listener(div, /*div_elementresize_handler*/ ctx[2].bind(div));
 		},
 		p: noop,
 		i: noop,
diff --git a/test/js/samples/video-bindings/expected.js b/test/js/samples/video-bindings/expected.js
index fe30240bfc..4ef1c2f7d8 100644
--- a/test/js/samples/video-bindings/expected.js
+++ b/test/js/samples/video-bindings/expected.js
@@ -1,8 +1,8 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
+	add_iframe_resize_listener,
 	add_render_callback,
-	add_resize_listener,
 	detach,
 	element,
 	init,
@@ -42,7 +42,7 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			insert(target, video, anchor);
-			video_resize_listener = add_resize_listener(video, /*video_elementresize_handler*/ ctx[7].bind(video));
+			video_resize_listener = add_iframe_resize_listener(video, /*video_elementresize_handler*/ ctx[7].bind(video));
 
 			if (!mounted) {
 				dispose = [

From 92e62c93165da9dc5b39271bc490703b20e9bfda Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Wed, 12 Apr 2023 15:06:31 +0530
Subject: [PATCH 12/15] Update deps

---
 sites/svelte.dev/package-lock.json | 78 ++++++++++++++++++------------
 sites/svelte.dev/package.json      |  9 ++--
 2 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/sites/svelte.dev/package-lock.json b/sites/svelte.dev/package-lock.json
index 2ac8620774..e5bb3b6b75 100644
--- a/sites/svelte.dev/package-lock.json
+++ b/sites/svelte.dev/package-lock.json
@@ -8,7 +8,7 @@
 			"name": "svelte.dev",
 			"version": "1.0.0",
 			"dependencies": {
-				"@supabase/supabase-js": "^2.14.0",
+				"@supabase/supabase-js": "^2.19.0",
 				"@sveltejs/repl": "^0.2.0",
 				"cookie": "^0.5.0",
 				"devalue": "^4.3.0",
@@ -21,8 +21,7 @@
 				"@resvg/resvg-js": "^2.4.1",
 				"@sveltejs/adapter-vercel": "^2.4.1",
 				"@sveltejs/kit": "^1.15.4",
-				"@sveltejs/site-kit": "^3.4.0",
-				"@sveltejs/vite-plugin-svelte": "^2.0.4",
+				"@sveltejs/site-kit": "^4.0.2",
 				"@types/marked": "^4.0.8",
 				"@types/prismjs": "^1.26.0",
 				"degit": "^2.8.4",
@@ -34,14 +33,14 @@
 				"prettier-plugin-svelte": "^2.10.0",
 				"prism-svelte": "^0.5.0",
 				"prismjs": "^1.29.0",
-				"satori": "^0.4.4",
+				"satori": "^0.4.7",
 				"satori-html": "^0.3.2",
 				"shelljs": "^0.8.5",
 				"shiki": "^0.14.1",
 				"shiki-twoslash": "^3.1.1",
 				"svelte": "^3.58.0",
 				"svelte-check": "^3.2.0",
-				"typescript": "^5.0.3",
+				"typescript": "^5.0.4",
 				"vite": "^4.2.1",
 				"vite-imagetools": "^4.0.18"
 			}
@@ -1188,9 +1187,9 @@
 			}
 		},
 		"node_modules/@supabase/gotrue-js": {
-			"version": "2.20.0",
-			"resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.20.0.tgz",
-			"integrity": "sha512-dbbEXrzb6OdWeYJQ8VYnJj2sMiZYw8XGj1B5rZlbcjDxkW0Za04x+wWn6g6T5/6RwNm2kReqgAR5ufYeCPuCDA==",
+			"version": "2.22.0",
+			"resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.22.0.tgz",
+			"integrity": "sha512-YBxg1AoMgXSFbEuamMyuJhKwscmK/eCkL8K7CenCjJJRVKfNHDYkM9F7VX9+atDDY6ejufdYz1auVfsqRrt9pQ==",
 			"dependencies": {
 				"cross-fetch": "^3.1.5"
 			}
@@ -1204,9 +1203,9 @@
 			}
 		},
 		"node_modules/@supabase/realtime-js": {
-			"version": "2.7.1",
-			"resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.1.tgz",
-			"integrity": "sha512-WC0yPArBF/wPXwxKWTrRSMWWnFQCbhhUsX0u42x4OqUdDJtow6rzvDIZHWFZLh85UUBYIQ2++AabSNgzd3ubQg==",
+			"version": "2.7.2",
+			"resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.2.tgz",
+			"integrity": "sha512-Fi6xAl5PUkqnjl3wo4rdcQIbMG3+yTRX1aUZe/yfvTG84RMvmCXJ1yN6MmafVLeZpU1xkaz5Vx4L0tnHcLiy6w==",
 			"dependencies": {
 				"@types/phoenix": "^1.5.4",
 				"@types/websocket": "^1.0.3",
@@ -1214,23 +1213,23 @@
 			}
 		},
 		"node_modules/@supabase/storage-js": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.3.1.tgz",
-			"integrity": "sha512-BaPIvyvjuZW1V0CnfGKUZyzpBUXnsh0XD8eqTOYd+MdiGPmIPI0vtwnT4fAoK8mipp1vpcN62EVQaqeUnWXPtQ==",
+			"version": "2.5.0",
+			"resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.0.tgz",
+			"integrity": "sha512-6brHcFA8Ba8tDw72/mSf+pIgDfWQYkd9BjAra/RSAA0uCy84kALGnxIpxsf6mv40ka2GNRzstRGIKRlUdJgi/g==",
 			"dependencies": {
 				"cross-fetch": "^3.1.5"
 			}
 		},
 		"node_modules/@supabase/supabase-js": {
-			"version": "2.14.0",
-			"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.14.0.tgz",
-			"integrity": "sha512-pdcYDaxTUqv5A8NqDnLn731rTP0Wm469H+0ag6Jb8YpWR95rmusfpGY7vrykWXvdnvCMxoG6eEwSF9vQtxVrow==",
+			"version": "2.19.0",
+			"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.19.0.tgz",
+			"integrity": "sha512-LO+uMy4lnmLvpdF5vGSEQgurxoj8qx4LiZve555JeAnrnuyubvDLZ8Kk5nU0+9KRi4VGQIeD5znqMh0OaACj4w==",
 			"dependencies": {
 				"@supabase/functions-js": "^2.1.0",
-				"@supabase/gotrue-js": "^2.18.1",
+				"@supabase/gotrue-js": "^2.22.0",
 				"@supabase/postgrest-js": "^1.1.1",
-				"@supabase/realtime-js": "^2.7.1",
-				"@supabase/storage-js": "^2.3.1",
+				"@supabase/realtime-js": "^2.7.2",
+				"@supabase/storage-js": "^2.4.0",
 				"cross-fetch": "^3.1.5"
 			}
 		},
@@ -1300,10 +1299,13 @@
 			"integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw=="
 		},
 		"node_modules/@sveltejs/site-kit": {
-			"version": "3.4.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.4.0.tgz",
-			"integrity": "sha512-jMwL8eWNBN0WeWoO8qXx8zUvDywiittc4GGNfX1CXwC6i2bgbrfHke+RrZmNxOrMeSgDcoCnYL0kKZmmg6al7w==",
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-4.0.2.tgz",
+			"integrity": "sha512-gqxBMZW5ZiO61m7Bn4x0fMUJC1M27ku1u7u0KJrg0zRSN3Zu30VdwE1SwWO4ueKxOxLXD2gzfUMdvoez7ZoBuQ==",
 			"dev": true,
+			"dependencies": {
+				"svelte-local-storage-store": "^0.4.0"
+			},
 			"peerDependencies": {
 				"@sveltejs/kit": "^1.0.0",
 				"svelte": "^3.54.0"
@@ -1359,9 +1361,9 @@
 			"integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q=="
 		},
 		"node_modules/@types/phoenix": {
-			"version": "1.5.5",
-			"resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.5.tgz",
-			"integrity": "sha512-1eWWT19k0L4ZiTvdXjAvJ9KvW0B8SdiVftQmFPJGTEx78Q4PCSIQDpz+EfkFVR1N4U9gREjlW4JXL8YCIlY0bw=="
+			"version": "1.5.6",
+			"resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.6.tgz",
+			"integrity": "sha512-e7jZ6I9uyRGsg7MNwQcarmBvRlbGb9DibbocE9crVnxqsy6C23RMxLWbJ2CQ3vgCW7taoL1L+F02EcjA6ld7XA=="
 		},
 		"node_modules/@types/prismjs": {
 			"version": "1.26.0",
@@ -3621,9 +3623,9 @@
 			}
 		},
 		"node_modules/satori": {
-			"version": "0.4.4",
-			"resolved": "https://registry.npmjs.org/satori/-/satori-0.4.4.tgz",
-			"integrity": "sha512-UCgoY7CXibFQmgI4ay4QSWUOca07nI9pY56w8NKrBq+bkGgiMbcPXZWj9bxukyJkEl/cgAICGjjxvwlDF2NYRw==",
+			"version": "0.4.7",
+			"resolved": "https://registry.npmjs.org/satori/-/satori-0.4.7.tgz",
+			"integrity": "sha512-angaQXTa5geGKxSD9+n85GlH71SfPJTMmrUJf76PZeV4gXWz8aOAxSEH0M1Ok/yUacrWxVto0WjV7iGkK0h3CQ==",
 			"dev": true,
 			"dependencies": {
 				"@shuding/opentype.js": "1.4.0-beta.0",
@@ -4023,6 +4025,18 @@
 			"resolved": "https://registry.npmjs.org/svelte-json-tree/-/svelte-json-tree-1.0.0.tgz",
 			"integrity": "sha512-scs1OdkC8uFpTN4MX0yKkOzZ1/EG3eP1ARC+xcFthXp2IfcwBaXgab0FqA4Am0vQwffNNB+1Gd1LFkJBlynWTA=="
 		},
+		"node_modules/svelte-local-storage-store": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/svelte-local-storage-store/-/svelte-local-storage-store-0.4.0.tgz",
+			"integrity": "sha512-ctPykTt4S3BE5bF0mfV0jKiUR1qlmqLvnAkQvYHLeb9wRyO1MdIFDVI23X+TZEFleATHkTaOpYZswIvf3b2tWA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.14"
+			},
+			"peerDependencies": {
+				"svelte": "^3.48.0"
+			}
+		},
 		"node_modules/svelte-preprocess": {
 			"version": "5.0.3",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.3.tgz",
@@ -4257,9 +4271,9 @@
 			}
 		},
 		"node_modules/typescript": {
-			"version": "5.0.3",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.3.tgz",
-			"integrity": "sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==",
+			"version": "5.0.4",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
+			"integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
 			"dev": true,
 			"bin": {
 				"tsc": "bin/tsc",
diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json
index 543264f913..b9d50845d9 100644
--- a/sites/svelte.dev/package.json
+++ b/sites/svelte.dev/package.json
@@ -16,7 +16,7 @@
 		"test": "uvu -r ts-node/register src/lib/server/markdown"
 	},
 	"dependencies": {
-		"@supabase/supabase-js": "^2.14.0",
+		"@supabase/supabase-js": "^2.20.0",
 		"@sveltejs/repl": "^0.2.0",
 		"cookie": "^0.5.0",
 		"devalue": "^4.3.0",
@@ -29,8 +29,7 @@
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-vercel": "^2.4.1",
 		"@sveltejs/kit": "^1.15.4",
-		"@sveltejs/site-kit": "^3.4.0",
-		"@sveltejs/vite-plugin-svelte": "^2.0.4",
+		"@sveltejs/site-kit": "^4.0.2",
 		"@types/marked": "^4.0.8",
 		"@types/prismjs": "^1.26.0",
 		"degit": "^2.8.4",
@@ -42,14 +41,14 @@
 		"prettier-plugin-svelte": "^2.10.0",
 		"prism-svelte": "^0.5.0",
 		"prismjs": "^1.29.0",
-		"satori": "^0.4.4",
+		"satori": "^0.4.7",
 		"satori-html": "^0.3.2",
 		"shelljs": "^0.8.5",
 		"shiki": "^0.14.1",
 		"shiki-twoslash": "^3.1.1",
 		"svelte": "^3.58.0",
 		"svelte-check": "^3.2.0",
-		"typescript": "^5.0.3",
+		"typescript": "^5.0.4",
 		"vite": "^4.2.1",
 		"vite-imagetools": "^4.0.18"
 	}

From 36658da3f20b4a884c4625806fa56d40dbd090ea Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Wed, 12 Apr 2023 17:08:06 +0530
Subject: [PATCH 13/15] Fix broken links

---
 site/content/docs/02-template-syntax/01-svelte-components.md  | 2 +-
 site/content/docs/03-runtime/02-svelte-store.md               | 4 ++--
 .../docs/04-compiler-and-api/04-custom-elements-api.md        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/02-template-syntax/01-svelte-components.md b/site/content/docs/02-template-syntax/01-svelte-components.md
index e0774e548e..6c4786fe03 100644
--- a/site/content/docs/02-template-syntax/01-svelte-components.md
+++ b/site/content/docs/02-template-syntax/01-svelte-components.md
@@ -24,7 +24,7 @@ A `<script>` block contains JavaScript that runs when a component instance is cr
 
 ### 1. `export` creates a component prop
 
-Svelte uses the `export` keyword to mark a variable declaration as a _property_ or _prop_, which means it becomes accessible to consumers of the component (see the section on [attributes and props](#attributes-and-props) for more information).
+Svelte uses the `export` keyword to mark a variable declaration as a _property_ or _prop_, which means it becomes accessible to consumers of the component (see the section on [attributes and props](/docs/basic-markup#attributes-and-props) for more information).
 
 ```svelte
 <script>
diff --git a/site/content/docs/03-runtime/02-svelte-store.md b/site/content/docs/03-runtime/02-svelte-store.md
index 5f143b738c..cb0a8a448d 100644
--- a/site/content/docs/03-runtime/02-svelte-store.md
+++ b/site/content/docs/03-runtime/02-svelte-store.md
@@ -4,9 +4,9 @@ title: 'svelte/store'
 
 The `svelte/store` module exports functions for creating [readable](/docs/svelte-store#readable), [writable](/docs/svelte-store#writable) and [derived](/docs/svelte-store#derived) stores.
 
-Keep in mind that you don't _have_ to use these functions to enjoy the [reactive `$store` syntax](/docs/dot-svelte-files#4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/svelte-store#derived).
+Keep in mind that you don't _have_ to use these functions to enjoy the [reactive `$store` syntax](/docs/svelte-components#4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/svelte-store#derived).
 
-This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs/dot-svelte-files#4-prefix-stores-with-$-to-access-their-values) to see what a correct implementation looks like.
+This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs/svelte-components#4-prefix-stores-with-$-to-access-their-values) to see what a correct implementation looks like.
 
 ## `writable`
 
diff --git a/site/content/docs/04-compiler-and-api/04-custom-elements-api.md b/site/content/docs/04-compiler-and-api/04-custom-elements-api.md
index 288715f3a5..86ddc410f7 100644
--- a/site/content/docs/04-compiler-and-api/04-custom-elements-api.md
+++ b/site/content/docs/04-compiler-and-api/04-custom-elements-api.md
@@ -33,7 +33,7 @@ document.body.innerHTML = `
 `;
 ```
 
-By default, custom elements are compiled with `accessors: true`, which means that any [props](/docs/dot-svelte-files#attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
+By default, custom elements are compiled with `accessors: true`, which means that any [props](/docs/basic-markup#attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
 
 To prevent this, add `accessors={false}` to `<svelte:options>`.
 

From 92a06e971c79dbfca9dec21d4f20a1ab0c64d4f8 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Sat, 15 Apr 2023 12:16:00 +0530
Subject: [PATCH 14/15] chore: run npm install

---
 sites/svelte.dev/package-lock.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/sites/svelte.dev/package-lock.json b/sites/svelte.dev/package-lock.json
index e5bb3b6b75..5a3db27696 100644
--- a/sites/svelte.dev/package-lock.json
+++ b/sites/svelte.dev/package-lock.json
@@ -8,7 +8,7 @@
 			"name": "svelte.dev",
 			"version": "1.0.0",
 			"dependencies": {
-				"@supabase/supabase-js": "^2.19.0",
+				"@supabase/supabase-js": "^2.20.0",
 				"@sveltejs/repl": "^0.2.0",
 				"cookie": "^0.5.0",
 				"devalue": "^4.3.0",
@@ -1213,23 +1213,23 @@
 			}
 		},
 		"node_modules/@supabase/storage-js": {
-			"version": "2.5.0",
-			"resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.0.tgz",
-			"integrity": "sha512-6brHcFA8Ba8tDw72/mSf+pIgDfWQYkd9BjAra/RSAA0uCy84kALGnxIpxsf6mv40ka2GNRzstRGIKRlUdJgi/g==",
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.1.tgz",
+			"integrity": "sha512-nkR0fQA9ScAtIKA3vNoPEqbZv1k5B5HVRYEvRWdlP6mUpFphM9TwPL2jZ/ztNGMTG5xT6SrHr+H7Ykz8qzbhjw==",
 			"dependencies": {
 				"cross-fetch": "^3.1.5"
 			}
 		},
 		"node_modules/@supabase/supabase-js": {
-			"version": "2.19.0",
-			"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.19.0.tgz",
-			"integrity": "sha512-LO+uMy4lnmLvpdF5vGSEQgurxoj8qx4LiZve555JeAnrnuyubvDLZ8Kk5nU0+9KRi4VGQIeD5znqMh0OaACj4w==",
+			"version": "2.20.0",
+			"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.20.0.tgz",
+			"integrity": "sha512-6sNX4WEaVBbmOS1K2U3PcpAhp0FcjVo1FRSEoj4N+NZ6DIokX+yut8IBhF176pg5kFCdFIL2wyNhf3SltREmWw==",
 			"dependencies": {
 				"@supabase/functions-js": "^2.1.0",
 				"@supabase/gotrue-js": "^2.22.0",
 				"@supabase/postgrest-js": "^1.1.1",
 				"@supabase/realtime-js": "^2.7.2",
-				"@supabase/storage-js": "^2.4.0",
+				"@supabase/storage-js": "^2.5.1",
 				"cross-fetch": "^3.1.5"
 			}
 		},

From 45f2890261a8e8e120a9cbf4b10d653aab2347dd Mon Sep 17 00:00:00 2001
From: Puru Vijay <47742487+PuruVJ@users.noreply.github.com>
Date: Tue, 18 Apr 2023 05:04:46 +0530
Subject: [PATCH 15/15] feat(site-2): Remove legacy site-kit stuff (#8501)

* Push

* Update site-kit

* Update svelte REPL

* Remove rollup URL

* meh

* Modify sidebar colors

* Bump deps
---
 sites/svelte.dev/package-lock.json            | 210 +++++++-----------
 sites/svelte.dev/package.json                 |  12 +-
 .../lib/components/PreloadingIndicator.svelte |   2 +-
 .../src/lib/components/ReplWidget.svelte      |   8 +-
 .../src/routes/(authed)/apps/+page.svelte     |  26 +--
 .../routes/(authed)/repl/[id]/+page.svelte    |   7 +-
 .../(authed)/repl/[id]/AppControls.svelte     |  22 +-
 .../routes/(authed)/repl/[id]/UserMenu.svelte |   6 +-
 .../routes/(authed)/repl/embed/+page.svelte   |   2 +-
 sites/svelte.dev/src/routes/+error.svelte     |   6 +-
 sites/svelte.dev/src/routes/+page.svelte      |   6 +-
 .../src/routes/_components/Demo.svelte        |  18 +-
 .../src/routes/_components/Example.svelte     |   2 +-
 .../src/routes/_components/Hero.svelte        |  15 +-
 .../src/routes/_components/Section.svelte     |   2 +-
 sites/svelte.dev/src/routes/blog/+page.svelte |   4 +-
 .../src/routes/blog/[slug]/+page.svelte       |   4 +-
 .../src/routes/examples/[slug]/+page.svelte   |   4 +-
 .../examples/[slug]/TableOfContents.svelte    |   2 +-
 sites/svelte.dev/src/routes/faq/+page.svelte  |   3 +-
 .../src/routes/tutorial/[slug]/+page.svelte   |  22 +-
 sites/svelte.dev/tsconfig.json                |   3 +-
 22 files changed, 173 insertions(+), 213 deletions(-)

diff --git a/sites/svelte.dev/package-lock.json b/sites/svelte.dev/package-lock.json
index 5a3db27696..7597fc98b9 100644
--- a/sites/svelte.dev/package-lock.json
+++ b/sites/svelte.dev/package-lock.json
@@ -9,7 +9,7 @@
 			"version": "1.0.0",
 			"dependencies": {
 				"@supabase/supabase-js": "^2.20.0",
-				"@sveltejs/repl": "^0.2.0",
+				"@sveltejs/repl": "^0.4.0",
 				"cookie": "^0.5.0",
 				"devalue": "^4.3.0",
 				"do-not-zip": "^1.0.0",
@@ -20,8 +20,8 @@
 			"devDependencies": {
 				"@resvg/resvg-js": "^2.4.1",
 				"@sveltejs/adapter-vercel": "^2.4.1",
-				"@sveltejs/kit": "^1.15.4",
-				"@sveltejs/site-kit": "^4.0.2",
+				"@sveltejs/kit": "^1.15.6",
+				"@sveltejs/site-kit": "^5.0.1",
 				"@types/marked": "^4.0.8",
 				"@types/prismjs": "^1.26.0",
 				"degit": "^2.8.4",
@@ -33,7 +33,7 @@
 				"prettier-plugin-svelte": "^2.10.0",
 				"prism-svelte": "^0.5.0",
 				"prismjs": "^1.29.0",
-				"satori": "^0.4.7",
+				"satori": "^0.4.11",
 				"satori-html": "^0.3.2",
 				"shelljs": "^0.8.5",
 				"shiki": "^0.14.1",
@@ -42,7 +42,7 @@
 				"svelte-check": "^3.2.0",
 				"typescript": "^5.0.4",
 				"vite": "^4.2.1",
-				"vite-imagetools": "^4.0.18"
+				"vite-imagetools": "^4.0.19"
 			}
 		},
 		"node_modules/@esbuild/android-arm": {
@@ -829,8 +829,7 @@
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.14",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-			"dev": true
+			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.17",
@@ -920,8 +919,7 @@
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.21",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
-			"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
-			"dev": true
+			"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
 		},
 		"node_modules/@resvg/resvg-js": {
 			"version": "2.4.1",
@@ -1139,9 +1137,9 @@
 			}
 		},
 		"node_modules/@rollup/browser": {
-			"version": "3.20.2",
-			"resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.20.2.tgz",
-			"integrity": "sha512-cW9g80ZjKnI91OvmTtb/NDB/N2XusFT6MopIQZSGSUE0y0I5I+OY2tZJFz1rSzJ2s2viyBFsbVAjgiI/6nkB+A=="
+			"version": "3.20.4",
+			"resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.20.4.tgz",
+			"integrity": "sha512-SjDJ0Q8Lo6g+hArFM7SwOUUkWpNV+YnOtiLwEqYrzw4yH36XGgkK0v9qwRQp2K73xq+d07TB41zCUL3ttW25sQ=="
 		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "4.2.1",
@@ -1247,10 +1245,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "1.15.4",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.4.tgz",
-			"integrity": "sha512-m+Tid9nbtFawmiu85lDlal0AQ7UeuV48UsuKMe06QLr3ntMQSUzIPqyswNRZqFrar6NhVTUXQ0aO61M3U4MWpQ==",
-			"dev": true,
+			"version": "1.15.6",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.6.tgz",
+			"integrity": "sha512-nXAVKq4veZqztZbPRDMpZszerSuZk3dMZmIoYc/6YvctYYkZS0cdQy5qfeGQ404wXRonCpaCQb0lUrdJZ81f9A==",
 			"hasInstallScript": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte": "^2.0.0",
@@ -1279,31 +1276,30 @@
 			}
 		},
 		"node_modules/@sveltejs/repl": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.2.0.tgz",
-			"integrity": "sha512-TWla1fYIl1mBKcQwBPtH1imal50vmg+OuXcUBprFzieFGeQsX96TpTboxNJkf5fwfLIkHUYT5nS4Jh+VYWB0vA==",
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.4.0.tgz",
+			"integrity": "sha512-rx0PepYzLaGCQRbRbMUflKhCqz94Yf+4yov9M9+Qgbb07/5a6fKTito8oYrVRhhh+K/fAJz4lEqif80kuTZg1g==",
 			"dependencies": {
-				"@rollup/browser": "^3.15.0",
-				"@sveltejs/site-kit": "3.2.2",
+				"@rollup/browser": "^3.20.4",
+				"@sveltejs/site-kit": "5.0.1",
 				"acorn": "^8.8.2",
-				"codemirror": "5.65.1",
+				"codemirror": "5.65.12",
+				"esm-env": "^1.0.0",
 				"estree-walker": "^3.0.3",
-				"resolve.exports": "^2.0.0",
+				"resolve.exports": "^2.0.2",
 				"svelte-json-tree": "^1.0.0",
 				"yootils": "^0.3.1"
+			},
+			"peerDependencies": {
+				"svelte": "^3.50.0"
 			}
 		},
-		"node_modules/@sveltejs/repl/node_modules/@sveltejs/site-kit": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.2.2.tgz",
-			"integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw=="
-		},
 		"node_modules/@sveltejs/site-kit": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-4.0.2.tgz",
-			"integrity": "sha512-gqxBMZW5ZiO61m7Bn4x0fMUJC1M27ku1u7u0KJrg0zRSN3Zu30VdwE1SwWO4ueKxOxLXD2gzfUMdvoez7ZoBuQ==",
-			"dev": true,
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-5.0.1.tgz",
+			"integrity": "sha512-6LYCxTGzhC/LhObYc3Mazk4HSi/KjdZ+fURpbvi9tppMk4lfGJb3ajLvGoo0k8t0vBEwrN16Hf/JChgkFOorFg==",
 			"dependencies": {
+				"esm-env": "^1.0.0",
 				"svelte-local-storage-store": "^0.4.0"
 			},
 			"peerDependencies": {
@@ -1315,7 +1311,6 @@
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.0.4.tgz",
 			"integrity": "sha512-pjqhW00KwK2uzDGEr+yJBwut+D+4XfJO/+bHHdHzPRXn9+1Jeq5JcFHyrUiYaXgHtyhX0RsllCTm4ssAx4ZY7Q==",
-			"dev": true,
 			"dependencies": {
 				"debug": "^4.3.4",
 				"deepmerge": "^4.3.1",
@@ -1341,8 +1336,7 @@
 		"node_modules/@types/cookie": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz",
-			"integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==",
-			"dev": true
+			"integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g=="
 		},
 		"node_modules/@types/estree": {
 			"version": "1.0.0",
@@ -1499,7 +1493,7 @@
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
 			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"normalize-path": "^3.0.0",
 				"picomatch": "^2.0.4"
@@ -1563,7 +1557,7 @@
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
 			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -1608,7 +1602,7 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"fill-range": "^7.0.1"
 			},
@@ -1674,7 +1668,6 @@
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
 			"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-			"dev": true,
 			"dependencies": {
 				"streamsearch": "^1.1.0"
 			},
@@ -1704,7 +1697,7 @@
 			"version": "3.5.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
 			"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-			"dev": true,
+			"devOptional": true,
 			"funding": [
 				{
 					"type": "individual",
@@ -1737,9 +1730,9 @@
 			}
 		},
 		"node_modules/codemirror": {
-			"version": "5.65.1",
-			"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
-			"integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
+			"version": "5.65.12",
+			"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.12.tgz",
+			"integrity": "sha512-z2jlHBocElRnPYysN2HAuhXbO3DNB0bcSKmNz3hcWR2Js2Dkhc1bEOxG93Z3DeUrnm+qx56XOY5wQmbP5KY0sw=="
 		},
 		"node_modules/color": {
 			"version": "4.2.3",
@@ -1892,7 +1885,6 @@
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
 			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-			"dev": true,
 			"dependencies": {
 				"ms": "2.1.2"
 			},
@@ -1933,7 +1925,6 @@
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
 			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2093,8 +2084,7 @@
 		"node_modules/esm-env": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
-			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==",
-			"dev": true
+			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA=="
 		},
 		"node_modules/estree-walker": {
 			"version": "3.0.3",
@@ -2222,7 +2212,7 @@
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
 			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
 			},
@@ -2295,7 +2285,6 @@
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
 			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-			"dev": true,
 			"hasInstallScript": true,
 			"optional": true,
 			"os": [
@@ -2308,8 +2297,7 @@
 		"node_modules/function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-			"dev": true
+			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
 		},
 		"node_modules/gauge": {
 			"version": "3.0.2",
@@ -2371,7 +2359,7 @@
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"is-glob": "^4.0.1"
 			},
@@ -2392,14 +2380,12 @@
 		"node_modules/globalyzer": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
-			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
-			"dev": true
+			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
 		},
 		"node_modules/globrex": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
-			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
-			"dev": true
+			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
 		},
 		"node_modules/graceful-fs": {
 			"version": "4.2.11",
@@ -2411,7 +2397,6 @@
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-			"dev": true,
 			"dependencies": {
 				"function-bind": "^1.1.1"
 			},
@@ -2485,6 +2470,13 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+			"integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+			"optional": true,
+			"peer": true
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2551,7 +2543,7 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
 			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"binary-extensions": "^2.0.0"
 			},
@@ -2563,7 +2555,6 @@
 			"version": "2.11.0",
 			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
 			"integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
-			"dev": true,
 			"dependencies": {
 				"has": "^1.0.3"
 			},
@@ -2575,7 +2566,7 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
 			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2599,7 +2590,7 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
 			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"is-extglob": "^2.1.1"
 			},
@@ -2611,7 +2602,7 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=0.12.0"
 			}
@@ -2679,7 +2670,6 @@
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
 			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -2756,7 +2746,6 @@
 			"version": "0.30.0",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
 			"integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.13"
 			},
@@ -2826,7 +2815,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
 			"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-			"dev": true,
 			"bin": {
 				"mime": "cli.js"
 			},
@@ -2944,7 +2932,6 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
 			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
-			"dev": true,
 			"engines": {
 				"node": ">=4"
 			}
@@ -2953,7 +2940,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
 			"integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
-			"dev": true,
 			"engines": {
 				"node": ">=10"
 			}
@@ -2961,14 +2947,12 @@
 		"node_modules/ms": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-			"dev": true
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
 		},
 		"node_modules/nanoid": {
 			"version": "3.3.6",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
 			"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -3077,7 +3061,7 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
 			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -3176,8 +3160,7 @@
 		"node_modules/path-parse": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-			"dev": true
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
 		},
 		"node_modules/peek-readable": {
 			"version": "4.1.0",
@@ -3201,14 +3184,13 @@
 		"node_modules/picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-			"dev": true
+			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
 		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=8.6"
 			},
@@ -3250,7 +3232,6 @@
 			"version": "8.4.21",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
 			"integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -3430,7 +3411,7 @@
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
 			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"picomatch": "^2.2.1"
 			},
@@ -3460,7 +3441,6 @@
 			"version": "1.22.1",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
 			"integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
-			"dev": true,
 			"dependencies": {
 				"is-core-module": "^2.9.0",
 				"path-parse": "^1.0.7",
@@ -3519,7 +3499,6 @@
 			"version": "3.20.2",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz",
 			"integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==",
-			"dev": true,
 			"bin": {
 				"rollup": "dist/bin/rollup"
 			},
@@ -3558,7 +3537,6 @@
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
 			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
-			"dev": true,
 			"dependencies": {
 				"mri": "^1.1.0"
 			},
@@ -3622,10 +3600,28 @@
 				"rimraf": "bin.js"
 			}
 		},
+		"node_modules/sass": {
+			"version": "1.62.0",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.62.0.tgz",
+			"integrity": "sha512-Q4USplo4pLYgCi+XlipZCWUQz5pkg/ruSSgJ0WRDSb/+3z9tXUOkQ7QPYn4XrhZKYAK4HlpaQecRwKLJX6+DBg==",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/satori": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/satori/-/satori-0.4.7.tgz",
-			"integrity": "sha512-angaQXTa5geGKxSD9+n85GlH71SfPJTMmrUJf76PZeV4gXWz8aOAxSEH0M1Ok/yUacrWxVto0WjV7iGkK0h3CQ==",
+			"version": "0.4.11",
+			"resolved": "https://registry.npmjs.org/satori/-/satori-0.4.11.tgz",
+			"integrity": "sha512-Ev8xEkDkURnEz/qWeGLWss3BkbfeoSfB0tXTqijfLrdaOsUyTW4SQmEtvF5atoYw/8GgS1Nq2sJMXX4BXhyFPg==",
 			"dev": true,
 			"dependencies": {
 				"@shuding/opentype.js": "1.4.0-beta.0",
@@ -3680,8 +3676,7 @@
 		"node_modules/set-cookie-parser": {
 			"version": "2.6.0",
 			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
-			"integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==",
-			"dev": true
+			"integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
 		},
 		"node_modules/sharp": {
 			"version": "0.31.3",
@@ -3831,7 +3826,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
 			"integrity": "sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==",
-			"dev": true,
 			"dependencies": {
 				"@polka/url": "^1.0.0-next.20",
 				"mrmime": "^1.0.0",
@@ -3860,7 +3854,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
 			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -3875,7 +3868,6 @@
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
 			"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-			"dev": true,
 			"engines": {
 				"node": ">=10.0.0"
 			}
@@ -3969,7 +3961,6 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
 			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -3981,7 +3972,6 @@
 			"version": "3.58.0",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.58.0.tgz",
 			"integrity": "sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==",
-			"dev": true,
 			"engines": {
 				"node": ">= 8"
 			}
@@ -4012,7 +4002,6 @@
 			"version": "0.15.1",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",
 			"integrity": "sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==",
-			"dev": true,
 			"engines": {
 				"node": "^12.20 || ^14.13.1 || >= 16"
 			},
@@ -4029,7 +4018,6 @@
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/svelte-local-storage-store/-/svelte-local-storage-store-0.4.0.tgz",
 			"integrity": "sha512-ctPykTt4S3BE5bF0mfV0jKiUR1qlmqLvnAkQvYHLeb9wRyO1MdIFDVI23X+TZEFleATHkTaOpYZswIvf3b2tWA==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.14"
 			},
@@ -4184,7 +4172,6 @@
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
 			"integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
-			"dev": true,
 			"dependencies": {
 				"globalyzer": "0.1.0",
 				"globrex": "^0.1.2"
@@ -4206,7 +4193,7 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
 			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"is-number": "^7.0.0"
 			},
@@ -4235,7 +4222,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.0.tgz",
 			"integrity": "sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -4293,7 +4279,6 @@
 			"version": "5.20.0",
 			"resolved": "https://registry.npmjs.org/undici/-/undici-5.20.0.tgz",
 			"integrity": "sha512-J3j60dYzuo6Eevbawwp1sdg16k5Tf768bxYK4TUJRH7cBM4kFCbf3mOnM/0E3vQYXvpxITbbWmBafaDbxLDz3g==",
-			"dev": true,
 			"dependencies": {
 				"busboy": "^1.6.0"
 			},
@@ -4348,7 +4333,6 @@
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz",
 			"integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==",
-			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.17.5",
 				"postcss": "^8.4.21",
@@ -4394,9 +4378,9 @@
 			}
 		},
 		"node_modules/vite-imagetools": {
-			"version": "4.0.18",
-			"resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-4.0.18.tgz",
-			"integrity": "sha512-PpvOy7eDQadfuJNarwPU9X8nK0AjtRsyxhfMjqg/wrAyssNgeaZWMGlWQK/U3YhV9+wpdV5Mep8FZvGa31IY1Q==",
+			"version": "4.0.19",
+			"resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-4.0.19.tgz",
+			"integrity": "sha512-vZaPsjLDgEqZrbj+ZsniRKthmoj4mvVrMOK/FZhRAbrVB4LOsil0BO2Gcq20e/JRlom4DzqtLw1UQUkfcqgCrA==",
 			"dev": true,
 			"dependencies": {
 				"@rollup/pluginutils": "^5.0.0",
@@ -4441,7 +4425,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -4457,7 +4440,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -4473,7 +4455,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -4489,7 +4470,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -4505,7 +4485,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -4521,7 +4500,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -4537,7 +4515,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -4553,7 +4530,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -4569,7 +4545,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -4585,7 +4560,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -4601,7 +4575,6 @@
 			"cpu": [
 				"loong64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -4617,7 +4590,6 @@
 			"cpu": [
 				"mips64el"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -4633,7 +4605,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -4649,7 +4620,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -4665,7 +4635,6 @@
 			"cpu": [
 				"s390x"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -4681,7 +4650,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -4697,7 +4665,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"netbsd"
@@ -4713,7 +4680,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"openbsd"
@@ -4729,7 +4695,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"sunos"
@@ -4745,7 +4710,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -4761,7 +4725,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -4777,7 +4740,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -4790,7 +4752,6 @@
 			"version": "0.17.15",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.15.tgz",
 			"integrity": "sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==",
-			"dev": true,
 			"hasInstallScript": true,
 			"bin": {
 				"esbuild": "bin/esbuild"
@@ -4827,7 +4788,6 @@
 			"version": "0.2.4",
 			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.4.tgz",
 			"integrity": "sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==",
-			"dev": true,
 			"peerDependencies": {
 				"vite": "^3.0.0 || ^4.0.0"
 			},
diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json
index b9d50845d9..a66e601c53 100644
--- a/sites/svelte.dev/package.json
+++ b/sites/svelte.dev/package.json
@@ -17,7 +17,7 @@
 	},
 	"dependencies": {
 		"@supabase/supabase-js": "^2.20.0",
-		"@sveltejs/repl": "^0.2.0",
+		"@sveltejs/repl": "^0.4.0",
 		"cookie": "^0.5.0",
 		"devalue": "^4.3.0",
 		"do-not-zip": "^1.0.0",
@@ -27,9 +27,9 @@
 	},
 	"devDependencies": {
 		"@resvg/resvg-js": "^2.4.1",
-		"@sveltejs/adapter-vercel": "^2.4.1",
-		"@sveltejs/kit": "^1.15.4",
-		"@sveltejs/site-kit": "^4.0.2",
+		"@sveltejs/adapter-vercel": "^2.4.2",
+		"@sveltejs/kit": "^1.15.7",
+		"@sveltejs/site-kit": "^5.0.3",
 		"@types/marked": "^4.0.8",
 		"@types/prismjs": "^1.26.0",
 		"degit": "^2.8.4",
@@ -41,7 +41,7 @@
 		"prettier-plugin-svelte": "^2.10.0",
 		"prism-svelte": "^0.5.0",
 		"prismjs": "^1.29.0",
-		"satori": "^0.4.7",
+		"satori": "^0.4.11",
 		"satori-html": "^0.3.2",
 		"shelljs": "^0.8.5",
 		"shiki": "^0.14.1",
@@ -50,6 +50,6 @@
 		"svelte-check": "^3.2.0",
 		"typescript": "^5.0.4",
 		"vite": "^4.2.1",
-		"vite-imagetools": "^4.0.18"
+		"vite-imagetools": "^4.0.19"
 	}
 }
diff --git a/sites/svelte.dev/src/lib/components/PreloadingIndicator.svelte b/sites/svelte.dev/src/lib/components/PreloadingIndicator.svelte
index c6f8487e00..96a960063c 100644
--- a/sites/svelte.dev/src/lib/components/PreloadingIndicator.svelte
+++ b/sites/svelte.dev/src/lib/components/PreloadingIndicator.svelte
@@ -42,7 +42,7 @@
 		left: 0;
 		top: 0;
 		height: 100%;
-		background-color: var(--prime);
+		background-color: var(--sk-theme-1);
 		transition: width 0.4s;
 	}
 
diff --git a/sites/svelte.dev/src/lib/components/ReplWidget.svelte b/sites/svelte.dev/src/lib/components/ReplWidget.svelte
index 9c855e52e1..67786474db 100644
--- a/sites/svelte.dev/src/lib/components/ReplWidget.svelte
+++ b/sites/svelte.dev/src/lib/components/ReplWidget.svelte
@@ -42,7 +42,7 @@
 							return {
 								name: file.slice(0, dot),
 								type: file.slice(dot + 1),
-								source,
+								source
 							};
 						})
 						.filter((x) => x.type === 'svelte' || x.type === 'js')
@@ -63,7 +63,7 @@
 			);
 
 			repl.set({
-				components,
+				components
 			});
 		}
 	}
@@ -80,10 +80,8 @@
 		browser && version === 'local'
 			? `${location.origin}/repl/local`
 			: `https://unpkg.com/svelte@${version}`;
-
-	const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`;
 </script>
 
 {#if browser}
-	<Repl bind:this={repl} {svelteUrl} {rollupUrl} embedded relaxed />
+	<Repl bind:this={repl} {svelteUrl} embedded relaxed />
 {/if}
diff --git a/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte b/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte
index df5d7d51fa..bbdeb57a1c 100644
--- a/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -26,11 +26,11 @@
 		const res = await fetch(`/apps/destroy`, {
 			method: 'POST',
 			headers: {
-				'content-type': 'application/json',
+				'content-type': 'application/json'
 			},
 			body: JSON.stringify({
-				ids: selected,
-			}),
+				ids: selected
+			})
 		});
 
 		if (res.ok) {
@@ -142,8 +142,8 @@
 
 <style>
 	.apps {
-		padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
-		max-width: var(--main-width);
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
+		max-width: var(--sk-page-main-width);
 		margin: 0 auto;
 	}
 
@@ -161,7 +161,7 @@
 		padding: 0 0 0 3.2rem;
 		position: relative;
 		margin: 1rem 0;
-		color: var(--text);
+		color: var(--sk-text-2);
 	}
 
 	.avatar {
@@ -217,7 +217,7 @@
 		line-height: 1;
 		display: flex;
 		border: 1px solid #eee;
-		border-radius: var(--border-r);
+		border-radius: var(--sk-border-radius);
 		z-index: 2;
 	}
 
@@ -226,7 +226,7 @@
 		gap: 1rem;
 		padding: 0 1rem;
 		height: 100%;
-		border-radius: var(--border-r);
+		border-radius: var(--sk-border-radius);
 		align-items: center;
 	}
 
@@ -247,8 +247,8 @@
 	}
 
 	h2 {
-		color: var(--text);
-		font-size: var(--h5);
+		color: var(--sk-text-2);
+		font-size: var(--sk-text-s);
 		font-weight: 400;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -256,11 +256,11 @@
 
 	li a {
 		display: block;
-		background: var(--back-light);
+		background: var(--sk-back-3);
 		padding: 1rem 3rem 1rem 1rem;
 		height: 100%;
 		line-height: 1;
-		border-radius: var(--border-r);
+		border-radius: var(--sk-border-radius);
 		text-decoration: none;
 	}
 
@@ -282,7 +282,7 @@
 	}
 
 	ul:not(.selecting) li:hover a {
-		background-color: var(--second);
+		background-color: var(--sk-theme-2);
 		color: white;
 	}
 
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
index a75118ce9b..67ad294a53 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
@@ -6,7 +6,6 @@
 	import { mapbox_setup } from '../../../../config.js';
 	import AppControls from './AppControls.svelte';
 
-	/** @type {import('./$types').PageData} */
 	export let data;
 
 	let version = data.version;
@@ -41,7 +40,7 @@
 
 	afterNavigate(() => {
 		repl.set({
-			components: data.gist.components,
+			components: data.gist.components
 		});
 	});
 
@@ -99,11 +98,11 @@
 <style>
 	.repl-outer {
 		position: relative;
-		height: calc(100vh - var(--nav-h));
+		height: calc(100vh - var(--sk-nav-height));
 		--app-controls-h: 5.6rem;
 		--pane-controls-h: 4.2rem;
 		overflow: hidden;
-		background-color: var(--back);
+		background-color: var(--sk-back-1);
 		padding: var(--app-controls-h) 0 0 0;
 		/* margin: 0 calc(var(--side-nav) * -1); */
 		box-sizing: border-box;
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
index 2d6978d172..4023ca73f6 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
@@ -45,15 +45,15 @@
 				method: 'POST',
 				credentials: 'include',
 				headers: {
-					'Content-Type': 'application/json',
+					'Content-Type': 'application/json'
 				},
 				body: JSON.stringify({
 					name,
 					files: components.map((component) => ({
 						name: `${component.name}.${component.type}`,
-						source: component.source,
-					})),
-				}),
+						source: component.source
+					}))
+				})
 			});
 
 			if (r.status < 200 || r.status >= 300) {
@@ -110,15 +110,15 @@
 				method: 'PUT',
 				credentials: 'include',
 				headers: {
-					'Content-Type': 'application/json',
+					'Content-Type': 'application/json'
 				},
 				body: JSON.stringify({
 					name,
 					files: components.map((component) => ({
 						name: `${component.name}.${component.type}`,
-						source: component.source,
-					})),
-				}),
+						source: component.source
+					}))
+				})
 			});
 
 			if (r.status < 200 || r.status >= 300) {
@@ -164,7 +164,7 @@
 		files.push(
 			...components.map((component) => ({
 				path: `src/${component.name}.${component.type}`,
-				data: component.source,
+				data: component.source
 			}))
 		);
 		files.push({
@@ -175,7 +175,7 @@ var app = new App({
 	target: document.body
 });
 
-export default app;`,
+export default app;`
 		});
 
 		downloadBlob(doNotZip.toBlob(files), 'svelte-app.zip');
@@ -242,7 +242,7 @@ export default app;`,
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0.6rem var(--side-nav);
+		padding: 0.6rem var(--sk-page-padding-side);
 		background-color: var(--sk-back-4);
 		color: var(--sk-text-1);
 		white-space: nowrap;
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte
index db18240795..96124ead4f 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/UserMenu.svelte
@@ -47,7 +47,7 @@
 		/* position: relative; padding: 0 2em 0 0; */
 		line-height: 1;
 		display: none;
-		font-family: var(--font);
+		font-family: var(--sk-font);
 		font-size: 1.6rem;
 		opacity: 0.7;
 	}
@@ -72,7 +72,7 @@
 		min-width: 10em;
 		top: 3rem;
 		right: -1.6rem;
-		background-color: var(--second);
+		background-color: var(--sk-theme-2);
 		padding: 0.8rem 1.6rem;
 		z-index: 99;
 		text-align: left;
@@ -84,7 +84,7 @@
 	.menu button,
 	.menu a {
 		background-color: transparent;
-		font-family: var(--font);
+		font-family: var(--sk-font);
 		font-size: 1.6rem;
 		opacity: 0.7;
 		padding: 0.4rem 0;
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte b/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte
index 4e2287e350..43fed8a1cb 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/embed/+page.svelte
@@ -26,7 +26,7 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background-color: var(--back);
+		background-color: var(--sk-back-1);
 		overflow: hidden;
 		box-sizing: border-box;
 		--pane-controls-h: 4.2rem;
diff --git a/sites/svelte.dev/src/routes/+error.svelte b/sites/svelte.dev/src/routes/+error.svelte
index 107f2bc326..10056317b4 100644
--- a/sites/svelte.dev/src/routes/+error.svelte
+++ b/sites/svelte.dev/src/routes/+error.svelte
@@ -45,7 +45,7 @@
 
 <style>
 	.container {
-		padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
 	}
 
 	h1,
@@ -64,10 +64,10 @@
 	}
 
 	.error {
-		background-color: var(--second);
+		background-color: var(--sk-theme-2);
 		color: white;
 		padding: 12px 16px;
-		font: 600 16px/1.7 var(--font);
+		font: 600 16px/1.7 var(--sk-font);
 		border-radius: 2px;
 	}
 </style>
diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index 295b543b15..5506f9ae55 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/sites/svelte.dev/src/routes/+page.svelte
@@ -123,12 +123,12 @@ npm run dev
 	section {
 		position: relative;
 		margin: 10rem auto;
-		padding: 0 var(--side-nav);
+		padding: 0 var(--sk-page-padding-side);
 		max-width: 120rem;
 	}
 
 	.blurb-shifter {
-		margin-top: calc(-10rem + var(--side-nav));
+		margin-top: calc(-10rem + var(--sk-page-padding-side));
 	}
 
 	footer {
@@ -139,7 +139,7 @@ npm run dev
 	}
 
 	footer a {
-		color: var(--text);
+		color: var(--sk-text-2);
 		padding: 0.5rem 1rem;
 		display: block;
 	}
diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte
index 39dad28649..39f7e7a51b 100644
--- a/sites/svelte.dev/src/routes/_components/Demo.svelte
+++ b/sites/svelte.dev/src/routes/_components/Demo.svelte
@@ -6,26 +6,26 @@
 		{
 			id: 'hello-world',
 			title: 'Hello World',
-			description: 'Svelte components are built on top of HTML. Just add data.',
+			description: 'Svelte components are built on top of HTML. Just add data.'
 		},
 		{
 			id: 'nested-components',
 			title: 'Scoped CSS',
 			description:
-				'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a >.',
+				'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a >.'
 		},
 		{
 			id: 'reactive-assignments',
 			title: 'Reactivity',
 			description:
-				'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.',
+				'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.'
 		},
 		{
 			id: 'svg-transitions',
 			title: 'Transitions',
 			description:
-				'Build beautiful UIs with a powerful, performant transition engine built right into the framework.',
-		},
+				'Build beautiful UIs with a powerful, performant transition engine built right into the framework.'
+		}
 	];
 
 	let selected = examples[0];
@@ -80,14 +80,14 @@
 		grid-template-columns: 4fr 1fr;
 		color: white;
 		align-items: center;
-		font-size: var(--h5);
+		font-size: var(--sk-text-s);
 	}
 
 	.tabs {
 		display: grid;
 		grid-template-columns: repeat(4, 1fr);
 		height: 100%;
-		border-radius: var(--border-r) var(--border-r) 0 0;
+		border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
 		background-color: rgba(255, 255, 255, 0.1);
 	}
 
@@ -98,7 +98,7 @@
 		height: 100%;
 		align-items: center;
 		justify-content: center;
-		border-radius: var(--border-r) var(--border-r) 0 0;
+		border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
 	}
 
 	button:hover {
@@ -143,7 +143,7 @@
 
 	@media (min-width: 960px) {
 		.controls {
-			font-size: var(--h4);
+			font-size: var(--sk-text-s);
 		}
 
 		.large-show {
diff --git a/sites/svelte.dev/src/routes/_components/Example.svelte b/sites/svelte.dev/src/routes/_components/Example.svelte
index 408a43271a..d1bc494875 100644
--- a/sites/svelte.dev/src/routes/_components/Example.svelte
+++ b/sites/svelte.dev/src/routes/_components/Example.svelte
@@ -17,7 +17,7 @@
 	.repl-container {
 		width: 100%;
 		height: 420px;
-		border-radius: var(--border-r);
+		border-radius: var(--sk-border-radius);
 		overflow: hidden;
 	}
 </style>
diff --git a/sites/svelte.dev/src/routes/_components/Hero.svelte b/sites/svelte.dev/src/routes/_components/Hero.svelte
index 324cb367c2..55d10c2992 100644
--- a/sites/svelte.dev/src/routes/_components/Hero.svelte
+++ b/sites/svelte.dev/src/routes/_components/Hero.svelte
@@ -6,7 +6,11 @@
 
 <div class="hero">
 	<strong>Cybernetically enhanced web apps</strong>
-	<Image src={Machine} alt="The Svelte compiler packaging up your component code" --max-height="65vh" />
+	<Image
+		src={Machine}
+		alt="The Svelte compiler packaging up your component code"
+		--max-height="65vh"
+	/>
 	<img alt="Svelte logotype" class="logotype" src={SvelteLogotype} />
 </div>
 
@@ -22,13 +26,13 @@
 
 	strong {
 		position: absolute;
-		font-size: min(4vw, var(--h4));
+		font-size: min(4vw, var(--sk-text-s));
 		max-width: 10em;
 		text-transform: uppercase;
 		font-weight: 700;
 		color: var(--sk-text-2);
 		letter-spacing: 0.05em;
-		left: max(var(--side-nav), 10%);
+		left: max(var(--sk-page-padding-side), 10%);
 		top: 25%;
 	}
 
@@ -55,15 +59,14 @@
 
 		.logotype,
 		strong {
-			left: calc(var(--side-nav) + 4rem);
-			/* left: calc(50% - 56rem + var(--side-nav)); */
+			left: calc(var(--sk-page-padding-side) + 4rem);
 		}
 	}
 
 	@media (min-width: 1200px) {
 		strong,
 		.logotype {
-			left: calc(50% - 56rem + var(--side-nav));
+			left: calc(50% - 56rem + var(--sk-page-padding-side));
 		}
 	}
 
diff --git a/sites/svelte.dev/src/routes/_components/Section.svelte b/sites/svelte.dev/src/routes/_components/Section.svelte
index 71f64891d8..e32ec7f35a 100644
--- a/sites/svelte.dev/src/routes/_components/Section.svelte
+++ b/sites/svelte.dev/src/routes/_components/Section.svelte
@@ -10,7 +10,7 @@
 
 	.inner {
 		max-width: 120rem;
-		padding: 0 var(--side-nav);
+		padding: 0 var(--sk-page-padding-side);
 		margin: 0 auto;
 	}
 </style>
diff --git a/sites/svelte.dev/src/routes/blog/+page.svelte b/sites/svelte.dev/src/routes/blog/+page.svelte
index ddb748bea3..f6a675e7e5 100644
--- a/sites/svelte.dev/src/routes/blog/+page.svelte
+++ b/sites/svelte.dev/src/routes/blog/+page.svelte
@@ -36,7 +36,7 @@
 		grid-gap: 1em;
 		min-height: calc(100vh - var(--sk-nav-height));
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
-		max-width: var(--main-width);
+		max-width: var(--sk-page-main-width);
 		margin: 0 auto;
 	}
 
@@ -52,7 +52,7 @@
 	.post:first-child {
 		margin: 0 0 2rem 0;
 		padding: 0 0 4rem 0;
-		border-bottom: var(--border-w) solid #6767785b; /* based on --second */
+		border-bottom: var(--sk-thick-border-width) solid #6767785b; /* based on --second */
 	}
 
 	.post:first-child h2 {
diff --git a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
index 3860149f30..ad1bcfd029 100644
--- a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -36,7 +36,7 @@
 <style>
 	.post {
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
-		max-width: var(--main-width);
+		max-width: var(--sk-page-main-width);
 		margin: 0 auto;
 	}
 
@@ -155,7 +155,7 @@
 	@media (min-width: 910px) {
 		.post :global(.max) {
 			width: calc(100vw - 2 * var(--sk-page-padding-side));
-			margin: 0 calc(var(--main-width) / 2 - 50vw);
+			margin: 0 calc(var(--sk-page-main-width) / 2 - 50vw);
 			text-align: center;
 		}
 
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
index 35749fbebe..e453c02ff5 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
@@ -18,7 +18,7 @@
 	const clone = (file) => ({
 		name: file.name.replace(/.\w+$/, ''),
 		type: file.type,
-		source: file.content,
+		source: file.content
 	});
 
 	$: mobile = width < 768; // note: same as per media query below
@@ -112,7 +112,7 @@
 			height: 100%;
 			display: grid;
 			/* TODO */
-			grid-template-columns: var(--sidebar-mid-w) auto;
+			grid-template-columns: 36rem auto;
 			grid-auto-rows: 100%;
 			transition: none;
 		}
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/TableOfContents.svelte b/sites/svelte.dev/src/routes/examples/[slug]/TableOfContents.svelte
index fefa85070a..1aa8a7965a 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/TableOfContents.svelte
+++ b/sites/svelte.dev/src/routes/examples/[slug]/TableOfContents.svelte
@@ -50,7 +50,7 @@
 		overflow-y: auto;
 		height: 100%;
 		border-right: 1px solid var(--sk-back-4);
-		background-color: var(--sk-back-4);
+		background-color: var(--sk-back-3);
 		color: var(--sk-text-2);
 		padding: 3rem 3rem 0 3rem;
 		margin: 0;
diff --git a/sites/svelte.dev/src/routes/faq/+page.svelte b/sites/svelte.dev/src/routes/faq/+page.svelte
index 523cd9727d..45cce24598 100644
--- a/sites/svelte.dev/src/routes/faq/+page.svelte
+++ b/sites/svelte.dev/src/routes/faq/+page.svelte
@@ -34,8 +34,7 @@
 		grid-gap: 1em;
 		min-height: calc(100vh - var(--sk-nav-height));
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
-		/* TODO: REMOVE */
-		max-width: var(--main-width);
+		max-width: var(--sk-page-main-width);
 		margin: 0 auto;
 		tab-size: 2;
 	}
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
index a0f39caa46..2d8f88a875 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -1,10 +1,9 @@
 <script>
-	import Repl from '@sveltejs/repl';
-	import ScreenToggle from '$lib/components/ScreenToggle.svelte';
-	import TableOfContents from './TableOfContents.svelte';
-
 	import { browser } from '$app/environment';
+	import ScreenToggle from '$lib/components/ScreenToggle.svelte';
+	import Repl from '@sveltejs/repl';
 	import { mapbox_setup, svelteUrl } from '../../../config.js';
+	import TableOfContents from './TableOfContents.svelte';
 
 	import '@sveltejs/site-kit/styles/code.css';
 
@@ -32,7 +31,7 @@
 				slug: chapter.slug,
 				section,
 				chapter,
-				prev,
+				prev
 			};
 
 			lookup.set(chapter.slug, obj);
@@ -54,13 +53,13 @@
 	const clone = (file) => ({
 		name: file.name.replace(/.\w+$/, ''),
 		type: file.type,
-		source: file.content,
+		source: file.content
 	});
 
 	$: if (repl) {
 		completed = false;
 		repl.set({
-			components: data.tutorial.initial.map(clone),
+			components: data.tutorial.initial.map(clone)
 		});
 	}
 
@@ -68,13 +67,13 @@
 
 	function reset() {
 		repl.update({
-			components: data.tutorial.initial.map(clone),
+			components: data.tutorial.initial.map(clone)
 		});
 	}
 
 	function complete() {
 		repl.update({
-			components: data.tutorial.complete.map(clone),
+			components: data.tutorial.complete.map(clone)
 		});
 	}
 
@@ -188,7 +187,7 @@
 			height: 100%;
 			display: grid;
 			/* TODO */
-			grid-template-columns: minmax(33.333%, var(--sidebar-large-w)) auto;
+			grid-template-columns: minmax(33.333%, 48rem) auto;
 			grid-auto-rows: 100%;
 			transition: none;
 		}
@@ -204,7 +203,7 @@
 		flex-direction: column;
 		height: 100%;
 		border-right: 1px solid var(--sk-back-4);
-		background-color: var(--sk-back-4);
+		background-color: var(--sk-back-3);
 		color: var(--sk-text-2);
 	}
 
@@ -287,6 +286,7 @@
 		padding: 1rem 1rem;
 		box-shadow: inset 1px 1px 6px hsla(205.7, 63.6%, 30.8%, 0.06);
 		border-radius: 0.5rem;
+		--shiki-color-background: var(--sk-back-1);
 	}
 
 	.controls {
diff --git a/sites/svelte.dev/tsconfig.json b/sites/svelte.dev/tsconfig.json
index 6484f32c51..d6cd561d05 100644
--- a/sites/svelte.dev/tsconfig.json
+++ b/sites/svelte.dev/tsconfig.json
@@ -3,6 +3,7 @@
 	"compilerOptions": {
 		"allowJs": true,
 		"checkJs": true,
-		"allowSyntheticDefaultImports": true
+		"allowSyntheticDefaultImports": true,
+		"moduleResolution": "bundler"
 	}
 }