Replace the Vue frontend with Svelte

frontend/src/components/Editor.svelte

@@ -0,0 +1,300 @@
+<script lang="ts">
+	import { onMount, onDestroy, setContext } from "svelte";
+
+	import { type createEditor } from "@/wasm-communication/editor";
+	import { operatingSystem } from "@/utility-functions/platform";
+	import { createClipboardManager } from "@/io-managers/clipboard";
+	import { createDragManager } from "@/io-managers/drag";
+	import { createHyperlinkManager } from "@/io-managers/hyperlinks";
+	import { createInputManager } from "@/io-managers/input";
+	import { createLocalizationManager } from "@/io-managers/localization";
+	import { createPanicManager } from "@/io-managers/panic";
+	import { createPersistenceManager } from "@/io-managers/persistence";
+	import { createDialogState } from "@/state-providers/dialog";
+	import { createDocumentState } from "@/state-providers/document";
+	import { createFontsState } from "@/state-providers/fonts";
+	import { createFullscreenState } from "@/state-providers/fullscreen";
+	import { createNodeGraphState } from "@/state-providers/node-graph";
+	import { createPortfolioState } from "@/state-providers/portfolio";
+	import { createWorkspaceState } from "@/state-providers/workspace";
+
+	import MainWindow from "@/components/window/MainWindow.svelte";
+
+	// Graphite WASM editor instance
+	export let editor: ReturnType<typeof createEditor>;
+	setContext("editor", editor);
+
+	// State provider systems
+	let dialog = createDialogState(editor);
+	setContext("dialog", dialog);
+	let document = createDocumentState(editor);
+	setContext("document", document);
+	let fonts = createFontsState(editor);
+	setContext("fonts", fonts);
+	let fullscreen = createFullscreenState(editor);
+	setContext("fullscreen", fullscreen);
+	let nodeGraph = createNodeGraphState(editor);
+	setContext("nodeGraph", nodeGraph);
+	let portfolio = createPortfolioState(editor);
+	setContext("portfolio", portfolio);
+	let workspace = createWorkspaceState(editor);
+	setContext("workspace", workspace);
+
+	// Initialize managers, which are isolated systems that subscribe to backend messages to link them to browser API functionality (like JS events, IndexedDB, etc.)
+	createClipboardManager(editor);
+	createHyperlinkManager(editor);
+	createLocalizationManager(editor);
+	createPanicManager(editor, dialog);
+	createPersistenceManager(editor, portfolio);
+	let dragManagerDestructor = createDragManager();
+	let inputManagerDestructor = createInputManager(editor, dialog, portfolio, fullscreen);
+
+	onMount(() => {
+		// Initialize certain setup tasks required by the editor backend to be ready for the user now that the frontend is ready
+		editor.instance.initAfterFrontendReady(operatingSystem());
+	});
+
+	onDestroy(() => {
+		// Call the destructor for each manager
+		dragManagerDestructor();
+		inputManagerDestructor();
+	});
+</script>
+
+<MainWindow />
+
+<style lang="scss" global>
+	// Disable the spinning loading indicator
+	body::after {
+		content: none !important;
+	}
+
+	:root {
+		// Replace usage of `-rgb` variants with CSS color() function to calculate alpha when browsers support it
+		// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
+		--color-0-black: #000;
+		--color-0-black-rgb: 0, 0, 0;
+		--color-1-nearblack: #111;
+		--color-1-nearblack-rgb: 17, 17, 17;
+		--color-2-mildblack: #222;
+		--color-2-mildblack-rgb: 34, 34, 34;
+		--color-3-darkgray: #333;
+		--color-3-darkgray-rgb: 51, 51, 51;
+		--color-4-dimgray: #444;
+		--color-4-dimgray-rgb: 68, 68, 68;
+		--color-5-dullgray: #555;
+		--color-5-dullgray-rgb: 85, 85, 85;
+		--color-6-lowergray: #666;
+		--color-6-lowergray-rgb: 102, 102, 102;
+		--color-7-middlegray: #777;
+		--color-7-middlegray-rgb: 109, 109, 109;
+		--color-8-uppergray: #888;
+		--color-8-uppergray-rgb: 136, 136, 136;
+		--color-9-palegray: #999;
+		--color-9-palegray-rgb: 153, 153, 153;
+		--color-a-softgray: #aaa;
+		--color-a-softgray-rgb: 170, 170, 170;
+		--color-b-lightgray: #bbb;
+		--color-b-lightgray-rgb: 187, 187, 187;
+		--color-c-brightgray: #ccc;
+		--color-c-brightgray-rgb: 204, 204, 204;
+		--color-d-mildwhite: #ddd;
+		--color-d-mildwhite-rgb: 221, 221, 221;
+		--color-e-nearwhite: #eee;
+		--color-e-nearwhite-rgb: 238, 238, 238;
+		--color-f-white: #fff;
+		--color-f-white-rgb: 255, 255, 255;
+
+		--color-data-general: #c5c5c5;
+		--color-data-general-dim: #767676;
+		--color-data-vector: #65bbe5;
+		--color-data-vector-dim: #4b778c;
+		--color-data-raster: #e4bb72;
+		--color-data-raster-dim: #8b7752;
+		--color-data-mask: #8d85c7;
+		--color-data-number: #d6536e;
+		--color-data-number-dim: #803242;
+		--color-data-vec2: #cc00ff;
+		--color-data-vec2-dim: #71008d;
+		--color-data-color: #70a898;
+		--color-data-color-dim: #43645b;
+
+		--color-none: white;
+		--color-none-repeat: no-repeat;
+		--color-none-position: center center;
+		// 24px tall, 48px wide
+		--color-none-size-24px: 60px 24px;
+		--color-none-image-24px: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 24"><line stroke="red" stroke-width="4px" x1="0" y1="27" x2="60" y2="-3" /></svg>');
+		// 32px tall, 64px wide
+		--color-none-size-32px: 80px 32px;
+		--color-none-image-32px: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>');
+
+		--color-transparent-checkered-background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
+			linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(#ffffff, #ffffff);
+		--color-transparent-checkered-background-size: 16px 16px;
+		--color-transparent-checkered-background-position: 0 0, 8px 8px;
+
+		--icon-expand-collapse-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23eee" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>');
+		--icon-expand-collapse-arrow-hover: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23fff" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>');
+	}
+
+	html,
+	body {
+		margin: 0;
+		height: 100%;
+		background: var(--color-2-mildblack);
+		overscroll-behavior: none;
+		-webkit-user-select: none; // Required as of Safari 15.0 (Graphite's minimum version) through the latest release
+		user-select: none;
+	}
+
+	// The default value of `auto` from the CSS spec is a footgun with flexbox layouts:
+	// https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+	* {
+		min-width: 0;
+		min-height: 0;
+	}
+
+	html,
+	body,
+	input,
+	textarea,
+	button {
+		font-family: "Source Sans Pro", Arial, sans-serif;
+		font-weight: 400;
+		font-size: 14px;
+		line-height: 1;
+		color: var(--color-e-nearwhite);
+	}
+
+	svg,
+	img {
+		display: block;
+	}
+
+	.sharp-right-corners.sharp-right-corners.sharp-right-corners.sharp-right-corners {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	.layout-row,
+	.layout-col {
+		.scrollable-x,
+		.scrollable-y {
+			// Firefox (standardized in CSS, but less capable)
+			scrollbar-width: thin;
+			scrollbar-width: 6px;
+			scrollbar-gutter: 6px;
+			scrollbar-color: var(--color-5-dullgray) transparent;
+
+			&:not(:hover) {
+				scrollbar-width: none;
+			}
+
+			// WebKit (only in Chromium/Safari but more capable)
+			&::-webkit-scrollbar {
+				width: calc(2px + 6px + 2px);
+				height: calc(2px + 6px + 2px);
+			}
+
+			&:not(:hover)::-webkit-scrollbar {
+				width: 0;
+				height: 0;
+			}
+
+			&::-webkit-scrollbar-track {
+				box-shadow: inset 0 0 0 1px var(--color-5-dullgray);
+				border: 2px solid transparent;
+				border-radius: 10px;
+
+				&:hover {
+					box-shadow: inset 0 0 0 1px var(--color-6-lowergray);
+				}
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background-clip: padding-box;
+				background-color: var(--color-5-dullgray);
+				border: 2px solid transparent;
+				border-radius: 10px;
+				margin: 2px;
+
+				&:hover {
+					background-color: var(--color-6-lowergray);
+				}
+			}
+
+			&::-webkit-scrollbar-corner {
+				background: none;
+			}
+		}
+
+		.scrollable-x.scrollable-y {
+			// Standard
+			overflow: auto;
+			// WebKit
+			overflow: overlay;
+		}
+
+		.scrollable-x:not(.scrollable-y) {
+			// Standard
+			overflow: auto hidden;
+			// WebKit
+			overflow-x: overlay;
+		}
+
+		.scrollable-y:not(.scrollable-x) {
+			// Standard
+			overflow: hidden auto;
+			// WebKit
+			overflow-y: overlay;
+		}
+	}
+
+	// List of all elements that should show an outline when focused by tabbing or by clicking the element
+	.dropdown-input .dropdown-box,
+	.font-input .dropdown-box {
+		&:focus {
+			outline: 1px dashed var(--color-e-nearwhite);
+			outline-offset: -1px;
+		}
+	}
+
+	// List of all elements that should show an outline when focused by tabbing, but not by clicking the element
+	.icon-button,
+	.text-button,
+	.popover-button,
+	.color-input > button,
+	.color-picker .preset-color,
+	.swatch-pair .swatch > button,
+	.radio-input button,
+	.menu-list,
+	.menu-bar-input .entry,
+	.layer-tree .expand-arrow,
+	.widget-section .header {
+		&:focus-visible {
+			outline: 1px dashed var(--color-e-nearwhite);
+			outline-offset: -1px;
+		}
+
+		// Variant: dark outline over light colors
+		&.preset-color.white,
+		&.text-button.emphasized {
+			&:focus-visible {
+				outline: 1px dashed var(--color-2-mildblack);
+			}
+		}
+	}
+
+	// Checkbox needs to apply the focus outline to its sibling label
+	.optional-input input:focus-visible + label,
+	.checkbox-input input:focus-visible + label {
+		outline: 1px dashed var(--color-e-nearwhite);
+		outline-offset: -1px;
+	}
+
+	// Variant: dark outline over light colors (when the checkbox is checked)
+	:not(.optional-input) > .checkbox-input input:focus-visible + label.checked {
+		outline: 1px dashed var(--color-2-mildblack);
+	}
+</style>

frontend/src/components/README.md

@@ -1,47 +1,60 @@
-# Overview of `/frontend/src/components/`
-Each component represents a (usually reusable) part of the Graphite Editor GUI. These all get mounted within the Vue entry point, `App.vue`, in the `/src` directory above this one.
+# Overview of `/frontend-svelte/src/components/`
+
+Each component represents a (usually reusable) part of the Graphite Editor GUI. These all get mounted in `Editor.svelte` (in the `/src` directory above this one).
 
 ## Floating Menus: `floating-menus/`
+
 The temporary UI areas with dark backgrounds which hover over the top of the editor window content. Examples include popovers, dropdown menu selectors, and dialog modals.
 
 ## Layout: `layout/`
+
 Useful containers that control the flow of content held within.
 
 ## Panels: `panels/`
+
 The dockable tabbed regions like the Document, Properties, Layer Tree, and Node Graph panels.
 
 ## Widgets: `widgets/`
+
 The interactive input items used to display information and provide user control.
 
 ## Window: `window/`
+
 The building blocks for the Title Bar, Workspace, and Status Bar within an editor application window.
 
 # Vue tips and tricks
+
 This section contains a growing list of quick reference information for helpful Vue solutions and best practices. Feel free to add to this to help contributors learn things, or yourself remember tricks you'll likely forget in a few months.
 
 ## Bi-directional props
-The component declares this:
-```ts
-export default defineComponent({
-	emits: ["update:theBidirectionalProperty"],
-	props: {
-		theBidirectionalProperty: { type: Number as PropType<number>, required: false },
-	},
-	watch: {
-		// Called only when `theBidirectionalProperty` is changed from outside this component (with v-model)
-		theBidirectionalProperty(newSelectedIndex: number | undefined) {
 
-		},
-	},
-	methods: {
-		doSomething() {
-			this.$emit("update:theBidirectionalProperty", SOME_NEW_VALUE);
-		},
-	},
-});
+The component declares this:
+
+```ts
+// The dispatcher that sends the changed value as a custom event to the parent
+const dispatch = createEventDispatcher<{ theBidirectionalProperty: number }>();
+
+// The prop
+export let theBidirectionalProperty: number;
+
+// Called only when `theBidirectionalProperty` is changed from outside this component via its props
+$: console.log(theBidirectionalProperty);
+
+// Example of a method that would update the value
+function doSomething() {
+	dispatch("theBidirectionalProperty", SOME_NEW_VALUE);
+},
 ```
 
 Users of the component do this for `theCorrespondingDataEntry` to be a two-way binding:
-```html
-<DropdownInput v-model:theBidirectionalProperty="theCorrespondingDataEntry" />
+
+```ts
+let theCorrespondingDataEntry = 42;
+```
+
+```svelte
+<DropdownInput
+	theBidirectionalProperty={theCorrespondingDataEntry}
+	on:theBidirectionalProperty={({ detail }) => { theCorrespondingDataEntry = detail; }}
+/>
 ```

frontend/src/components/floating-menus/DialogModal.svelte

@@ -1,101 +1,97 @@
 <script lang="ts">
-import { defineComponent } from "vue";
+	import { getContext, onMount } from "svelte";
 
-import FloatingMenu from "@/components/layout/FloatingMenu.vue";
-import LayoutCol from "@/components/layout/LayoutCol.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import TextButton from "@/components/widgets/buttons/TextButton.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
+	import FloatingMenu from "@/components/layout/FloatingMenu.svelte";
+	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
+	import { type DialogState } from "@/state-providers/dialog";
 
-export default defineComponent({
-	inject: ["dialog"],
-	methods: {
-		dismiss() {
-			this.dialog.dismissDialog();
-		},
-	},
-	mounted() {
-		// Focus the first button in the popup
-		const dialogModal: HTMLDivElement | undefined = this.$el;
-		const emphasizedOrFirstButton = (dialogModal?.querySelector("[data-emphasized]") || dialogModal?.querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
-		emphasizedOrFirstButton?.focus();
-	},
-	components: {
-		FloatingMenu,
-		IconLabel,
-		LayoutCol,
-		LayoutRow,
-		TextButton,
-		WidgetLayout,
-	},
-});
-</script>
+	const dialog = getContext<DialogState>("dialog");
 
-<template>
-	<FloatingMenu :open="true" class="dialog-modal" :type="'Dialog'" :direction="'Center'" data-dialog-modal>
-		<LayoutRow>
-			<LayoutCol class="icon-column">
-				<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
-				<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
-			</LayoutCol>
-			<LayoutCol class="main-column">
-				<WidgetLayout v-if="dialog.state.widgets.layout.length > 0" :layout="dialog.state.widgets" class="details" />
-				<LayoutRow v-if="(dialog.state.jsCallbackBasedButtons?.length || NaN) > 0" class="panic-buttons-row">
-					<TextButton v-for="(button, index) in dialog.state.jsCallbackBasedButtons" :key="index" :action="() => button.callback?.()" v-bind="button.props" />
-				</LayoutRow>
-			</LayoutCol>
-		</LayoutRow>
-	</FloatingMenu>
-</template>
+	let self: FloatingMenu;
 
-<style lang="scss">
-.dialog-modal {
-	position: absolute;
-	pointer-events: none;
-	width: 100%;
-	height: 100%;
-
-	> .floating-menu-container > .floating-menu-content {
-		pointer-events: auto;
-		padding: 24px;
+	export function dismiss() {
+		dialog.dismissDialog();
 	}
 
-	.icon-column {
-		margin-right: 24px;
+	onMount(() => {
+		// Focus the first button in the popup
+		const emphasizedOrFirstButton = (self.div().querySelector("[data-emphasized]") || self.div().querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
+		emphasizedOrFirstButton?.focus();
+	});
+</script>
 
-		.icon-label {
-			width: 80px;
-			height: 80px;
+<FloatingMenu open={true} class="dialog-modal" type="Dialog" direction="Center" bind:this={self} data-dialog-modal>
+	<LayoutRow>
+		<LayoutCol class="icon-column">
+			<!-- `$dialog.icon` class exists to provide special sizing in CSS to specific icons -->
+			<IconLabel icon={$dialog.icon} class={$dialog.icon.toLowerCase()} />
+		</LayoutCol>
+		<LayoutCol class="main-column">
+			{#if $dialog.widgets.layout.length > 0}
+				<WidgetLayout layout={$dialog.widgets} class="details" />
+			{/if}
+			{#if ($dialog.jsCallbackBasedButtons?.length || NaN) > 0}
+				<LayoutRow class="panic-buttons-row">
+					{#each $dialog.jsCallbackBasedButtons || [] as button, index (index)}
+						<TextButton action={() => button.callback?.()} {...button.props} />
+					{/each}
+				</LayoutRow>
+			{/if}
+		</LayoutCol>
+	</LayoutRow>
+</FloatingMenu>
 
-			&.file,
-			&.copy {
-				width: 60px;
+<style lang="scss" global>
+	.dialog-modal {
+		position: absolute;
+		pointer-events: none;
+		width: 100%;
+		height: 100%;
 
-				svg {
-					width: 80px;
-					height: 80px;
-					margin: 0 -10px;
+		> .floating-menu-container > .floating-menu-content {
+			pointer-events: auto;
+			padding: 24px;
+		}
+
+		.icon-column {
+			margin-right: 24px;
+
+			.icon-label {
+				width: 80px;
+				height: 80px;
+
+				&.file,
+				&.copy {
+					width: 60px;
+
+					svg {
+						width: 80px;
+						height: 80px;
+						margin: 0 -10px;
+					}
 				}
 			}
 		}
-	}
 
-	.main-column {
-		margin: -4px 0;
+		.main-column {
+			margin: -4px 0;
 
-		.details.text-label {
-			-webkit-user-select: text; // Required as of Safari 15.0 (Graphite's minimum version) through the latest release
-			user-select: text;
-			white-space: pre-wrap;
-			max-width: 400px;
-			height: auto;
-		}
+			.details.text-label {
+				-webkit-user-select: text; // Required as of Safari 15.0 (Graphite's minimum version) through the latest release
+				user-select: text;
+				white-space: pre-wrap;
+				max-width: 400px;
+				height: auto;
+			}
 
-		.panic-buttons-row {
-			height: 32px;
-			align-items: center;
+			.panic-buttons-row {
+				height: 32px;
+				align-items: center;
+			}
 		}
 	}
-}
 </style>

frontend/src/components/floating-menus/EyedropperPreview.svelte

@@ -1,139 +1,134 @@
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
+<script lang="ts" context="module">
+	// Should be equal to the width and height of the canvas in the CSS
+	const ZOOM_WINDOW_DIMENSIONS_EXPANDED = 110;
+	// Should be equal to the width and height of the `.pixel-outline` div in the CSS, and should be evenly divisible into the number above
+	const UPSCALE_FACTOR = 10;
 
-import FloatingMenu from "@/components/layout/FloatingMenu.vue";
-
-// Should be equal to the width and height of the canvas in the CSS above
-const ZOOM_WINDOW_DIMENSIONS_EXPANDED = 110;
-// SHould be equal to the width and height of the `.pixel-outline` div in the CSS above, and should be evenly divisible into the number above
-const UPSCALE_FACTOR = 10;
-
-export const ZOOM_WINDOW_DIMENSIONS = ZOOM_WINDOW_DIMENSIONS_EXPANDED / UPSCALE_FACTOR;
-
-const temporaryCanvas = document.createElement("canvas");
-
-export default defineComponent({
-	props: {
-		imageData: { type: Object as PropType<ImageData> },
-		colorChoice: { type: String as PropType<string>, required: true },
-		primaryColor: { type: String as PropType<string>, required: true },
-		secondaryColor: { type: String as PropType<string>, required: true },
-	},
-	mounted() {
-		this.displayImageDataPreview(this.imageData);
-	},
-	watch: {
-		imageData(imageData: ImageData | undefined) {
-			this.displayImageDataPreview(imageData);
-		},
-	},
-	methods: {
-		displayImageDataPreview(imageData: ImageData | undefined) {
-			const canvas = this.$refs.zoomPreviewCanvas as HTMLCanvasElement | undefined;
-			if (!canvas) return;
-
-			canvas.width = ZOOM_WINDOW_DIMENSIONS;
-			canvas.height = ZOOM_WINDOW_DIMENSIONS;
-			const context = canvas.getContext("2d");
-
-			temporaryCanvas.width = ZOOM_WINDOW_DIMENSIONS;
-			temporaryCanvas.height = ZOOM_WINDOW_DIMENSIONS;
-			const temporaryContext = temporaryCanvas.getContext("2d");
-
-			if (!imageData || !context || !temporaryContext) return;
-
-			temporaryContext.putImageData(imageData, 0, 0, 0, 0, ZOOM_WINDOW_DIMENSIONS, ZOOM_WINDOW_DIMENSIONS);
-
-			context.fillStyle = "black";
-			context.fillRect(0, 0, ZOOM_WINDOW_DIMENSIONS, ZOOM_WINDOW_DIMENSIONS);
-
-			context.drawImage(temporaryCanvas, 0, 0);
-		},
-	},
-	components: {
-		FloatingMenu,
-	},
-});
+	export const ZOOM_WINDOW_DIMENSIONS = ZOOM_WINDOW_DIMENSIONS_EXPANDED / UPSCALE_FACTOR;
 </script>
 
-<template>
-	<FloatingMenu
-		:open="true"
-		class="eyedropper-preview"
-		:type="'Cursor'"
-		:style="{ '--ring-color-primary': primaryColor, '--ring-color-secondary': secondaryColor, '--ring-color-choice': colorChoice }"
-	>
-		<div class="ring">
-			<div class="canvas-container">
-				<canvas ref="zoomPreviewCanvas"></canvas>
-				<div class="pixel-outline"></div>
-			</div>
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	import FloatingMenu from "@/components/layout/FloatingMenu.svelte";
+
+	const temporaryCanvas = document.createElement("canvas");
+
+	let zoomPreviewCanvas: HTMLCanvasElement;
+
+	export let imageData: ImageData | undefined = undefined;
+	export let colorChoice: string;
+	export let primaryColor: string;
+	export let secondaryColor: string;
+	export let x: number;
+	export let y: number;
+
+	$: watchImageData(imageData);
+
+	function watchImageData(imageData: ImageData | undefined) {
+		displayImageDataPreview(imageData);
+	}
+
+	function displayImageDataPreview(imageData: ImageData | undefined) {
+		zoomPreviewCanvas.width = ZOOM_WINDOW_DIMENSIONS;
+		zoomPreviewCanvas.height = ZOOM_WINDOW_DIMENSIONS;
+		const context = zoomPreviewCanvas.getContext("2d");
+
+		temporaryCanvas.width = ZOOM_WINDOW_DIMENSIONS;
+		temporaryCanvas.height = ZOOM_WINDOW_DIMENSIONS;
+		const temporaryContext = temporaryCanvas.getContext("2d");
+
+		if (!imageData || !context || !temporaryContext) return;
+
+		temporaryContext.putImageData(imageData, 0, 0, 0, 0, ZOOM_WINDOW_DIMENSIONS, ZOOM_WINDOW_DIMENSIONS);
+
+		context.fillStyle = "black";
+		context.fillRect(0, 0, ZOOM_WINDOW_DIMENSIONS, ZOOM_WINDOW_DIMENSIONS);
+
+		context.drawImage(temporaryCanvas, 0, 0);
+	}
+
+	onMount(() => {
+		displayImageDataPreview(imageData);
+	});
+</script>
+
+<FloatingMenu
+	open={true}
+	class="eyedropper-preview"
+	type="Cursor"
+	styles={{ "--ring-color-primary": primaryColor, "--ring-color-secondary": secondaryColor, "--ring-color-choice": colorChoice, left: x + "px", top: y + "px" }}
+>
+	<div class="ring">
+		<div class="canvas-container">
+			<canvas bind:this={zoomPreviewCanvas} />
+			<div class="pixel-outline" />
 		</div>
-	</FloatingMenu>
-</template>
+	</div>
+</FloatingMenu>
 
-<style lang="scss">
-.eyedropper-preview {
-	pointer-events: none;
+<style lang="scss" global>
+	.eyedropper-preview {
+		pointer-events: none;
 
-	.ring {
-		transform: translate(0, -50%) rotate(45deg);
-		position: relative;
-		background: var(--ring-color-choice);
-		padding: 16px;
-		border: 8px solid;
-		border-radius: 50%;
-		border-top-color: var(--ring-color-primary);
-		border-left-color: var(--ring-color-primary);
-		border-bottom-color: var(--ring-color-secondary);
-		border-right-color: var(--ring-color-secondary);
-
-		&::after {
-			content: "";
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			top: -8px;
-			left: -8px;
-			padding: 8px;
+		.ring {
+			transform: translate(0, -50%) rotate(45deg);
+			position: relative;
+			background: var(--ring-color-choice);
+			padding: 16px;
+			border: 8px solid;
 			border-radius: 50%;
-			box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 8px rgba(0, 0, 0, 0.25);
-		}
-
-		.canvas-container {
-			transform: rotate(-45deg);
-
-			canvas {
-				display: block;
-				width: 110px;
-				height: 110px;
-				border-radius: 50%;
-				image-rendering: pixelated;
-			}
+			border-top-color: var(--ring-color-primary);
+			border-left-color: var(--ring-color-primary);
+			border-bottom-color: var(--ring-color-secondary);
+			border-right-color: var(--ring-color-secondary);
 
 			&::after {
 				content: "";
 				position: absolute;
-				top: 0;
-				left: 0;
 				width: 100%;
 				height: 100%;
+				top: -8px;
+				left: -8px;
+				padding: 8px;
 				border-radius: 50%;
-				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0 8px rgba(0, 0, 0, 0.25);
+				box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 8px rgba(0, 0, 0, 0.25);
 			}
 
-			.pixel-outline {
-				position: absolute;
-				left: 50%;
-				top: 50%;
-				transform: translate(-50%, -50%);
-				--outline-width: 2;
-				margin-top: calc(-1px * (var(--outline-width) / 2));
-				width: calc(10px - (var(--outline-width) * 1px));
-				height: calc(10px - var(--outline-width) * 1px);
-				border: calc(var(--outline-width) * 1px) solid var(--color-0-black);
+			.canvas-container {
+				transform: rotate(-45deg);
+
+				canvas {
+					display: block;
+					width: 110px;
+					height: 110px;
+					border-radius: 50%;
+					image-rendering: pixelated;
+				}
+
+				&::after {
+					content: "";
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					border-radius: 50%;
+					box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0 8px rgba(0, 0, 0, 0.25);
+				}
+
+				.pixel-outline {
+					position: absolute;
+					left: 50%;
+					top: 50%;
+					transform: translate(-50%, -50%);
+					--outline-width: 2;
+					margin-top: calc(-1px * (var(--outline-width) / 2));
+					width: calc(10px - (var(--outline-width) * 1px));
+					height: calc(10px - var(--outline-width) * 1px);
+					border: calc(var(--outline-width) * 1px) solid var(--color-0-black);
+				}
 			}
 		}
 	}
-}
 </style>

frontend/src/components/floating-menus/MenuList.svelte

@@ -1,359 +1,351 @@
+<svelte:options accessors={true} />
+
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import { type MenuListEntry } from "@/wasm-communication/messages";
+	import { type MenuListEntry } from "@/wasm-communication/messages";
 
-import FloatingMenu, { type MenuDirection } from "@/components/layout/FloatingMenu.vue";
-import LayoutCol from "@/components/layout/LayoutCol.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import Separator from "@/components/widgets/labels/Separator.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
+	import FloatingMenu, { type MenuDirection } from "@/components/layout/FloatingMenu.svelte";
+	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import Separator from "@/components/widgets/labels/Separator.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-type MenuListInstance = InstanceType<typeof MenuList>;
+	let self: FloatingMenu;
+	let scroller: LayoutCol;
 
-const MenuList = defineComponent({
-	emits: ["update:open", "update:activeEntry", "naturalWidth"],
-	props: {
-		entries: { type: Array as PropType<MenuListEntry[][]>, required: true },
-		activeEntry: { type: Object as PropType<MenuListEntry>, required: false },
-		open: { type: Boolean as PropType<boolean>, required: true },
-		direction: { type: String as PropType<MenuDirection>, default: "Bottom" },
-		minWidth: { type: Number as PropType<number>, default: 0 },
-		drawIcon: { type: Boolean as PropType<boolean>, default: false },
-		interactive: { type: Boolean as PropType<boolean>, default: false },
-		scrollableY: { type: Boolean as PropType<boolean>, default: false },
-		virtualScrollingEntryHeight: { type: Number as PropType<number>, default: 0 },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-	},
-	data() {
-		return {
-			isOpen: this.open,
-			highlighted: this.activeEntry as MenuListEntry | undefined,
-			virtualScrollingEntriesStart: 0,
+	// emits: ["update:open", "update:activeEntry", "naturalWidth"],
+	const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry }>();
+
+	export let entries: MenuListEntry[][];
+	export let activeEntry: MenuListEntry | undefined = undefined;
+	export let open: boolean;
+	export let direction: MenuDirection = "Bottom";
+	export let minWidth = 0;
+	export let drawIcon = false;
+	export let interactive = false;
+	export let scrollableY = false;
+	export let virtualScrollingEntryHeight = 0;
+	export let tooltip: string | undefined = undefined;
+
+	let highlighted = activeEntry as MenuListEntry | undefined;
+	let virtualScrollingEntriesStart = 0;
+
+	// Called only when `open` is changed from outside this component
+	$: watchOpen(open);
+	$: watchRemeasureWidth(entries, drawIcon);
+	$: virtualScrollingTotalHeight = entries.length === 0 ? 0 : entries[0].length * virtualScrollingEntryHeight;
+	$: virtualScrollingStartIndex = Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0;
+	$: virtualScrollingEndIndex = entries.length === 0 ? 0 : Math.min(entries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
+
+	function watchOpen(open: boolean) {
+		highlighted = activeEntry;
+		dispatch("open", open);
+	}
+
+	function watchRemeasureWidth(_: MenuListEntry[][], __: boolean) {
+		self?.measureAndEmitNaturalWidth();
+	}
+
+	function onScroll(e: Event) {
+		if (!virtualScrollingEntryHeight) return;
+		virtualScrollingEntriesStart = (e.target as HTMLElement)?.scrollTop || 0;
+	}
+
+	function onEntryClick(menuListEntry: MenuListEntry): void {
+		// Call the action if available
+		if (menuListEntry.action) menuListEntry.action();
+
+		// Notify the parent about the clicked entry as the new active entry
+		dispatch("activeEntry", menuListEntry);
+
+		// Close the containing menu
+		if (menuListEntry.ref) menuListEntry.ref.open = false;
+		dispatch("open", false);
+		open = false;
+	}
+
+	function onEntryPointerEnter(menuListEntry: MenuListEntry): void {
+		if (!menuListEntry.children?.length) return;
+
+		if (menuListEntry.ref) menuListEntry.ref.open = true;
+		else dispatch("open", true);
+	}
+
+	function onEntryPointerLeave(menuListEntry: MenuListEntry): void {
+		if (!menuListEntry.children?.length) return;
+
+		if (menuListEntry.ref) menuListEntry.ref.open = false;
+		else dispatch("open", false);
+	}
+
+	function isEntryOpen(menuListEntry: MenuListEntry): boolean {
+		if (!menuListEntry.children?.length) return false;
+
+		return menuListEntry.ref?.open || false;
+	}
+
+	/// Handles keyboard navigation for the menu. Returns if the entire menu stack should be dismissed
+	export function keydown(e: KeyboardEvent, submenu: boolean): boolean {
+		// Interactive menus should keep the active entry the same as the highlighted one
+		if (interactive) highlighted = activeEntry;
+
+		const menuOpen = open;
+		const flatEntries = entries.flat().filter((entry) => !entry.disabled);
+		const openChild = flatEntries.findIndex((entry) => entry.children?.length && entry.ref?.open);
+
+		const openSubmenu = (highlighted: MenuListEntry): void => {
+			if (highlighted.ref && highlighted.children?.length) {
+				highlighted.ref.open = true;
+
+				// Highlight first item
+				highlighted.ref.setHighlighted(highlighted.children[0][0]);
+			}
 		};
-	},
-	watch: {
-		// Called only when `open` is changed from outside this component (with v-model)
-		open(newOpen: boolean) {
-			this.isOpen = newOpen;
-			this.highlighted = this.activeEntry;
-		},
-		isOpen(newIsOpen: boolean) {
-			this.$emit("update:open", newIsOpen);
-		},
-		entries() {
-			(this.$refs.floatingMenu as typeof FloatingMenu | undefined)?.measureAndEmitNaturalWidth();
-		},
-		drawIcon() {
-			(this.$refs.floatingMenu as typeof FloatingMenu | undefined)?.measureAndEmitNaturalWidth();
-		},
-	},
-	methods: {
-		scrollViewTo(distanceDown: number): void {
-			const scroller: HTMLDivElement | undefined = (this.$refs.scroller as typeof LayoutCol | undefined)?.$el;
-			scroller?.scrollTo(0, distanceDown);
-		},
-		onEntryClick(menuListEntry: MenuListEntry): void {
-			// Call the action if available
-			if (menuListEntry.action) menuListEntry.action();
 
-			// Emit the clicked entry as the new active entry
-			this.$emit("update:activeEntry", menuListEntry);
+		if (!menuOpen && (e.key === " " || e.key === "Enter")) {
+			// Allow opening menu with space or enter
+			open = true;
+			highlighted = activeEntry;
+		} else if (menuOpen && openChild >= 0) {
+			// Redirect the keyboard navigation to a submenu if one is open
+			const shouldCloseStack = flatEntries[openChild].ref?.keydown(e, true);
 
-			// Close the containing menu
-			if (menuListEntry.ref) menuListEntry.ref.isOpen = false;
-			this.$emit("update:open", false);
-			this.isOpen = false; // TODO: This is a hack for MenuBarInput submenus, remove it when we get rid of using `ref`
-		},
-		onEntryPointerEnter(menuListEntry: MenuListEntry): void {
-			if (!menuListEntry.children?.length) return;
+			// Highlight the menu item in the parent list that corresponds with the open submenu
+			if (e.key !== "Escape" && highlighted) setHighlighted(flatEntries[openChild]);
 
-			if (menuListEntry.ref) menuListEntry.ref.isOpen = true;
-			else this.$emit("update:open", true);
-		},
-		onEntryPointerLeave(menuListEntry: MenuListEntry): void {
-			if (!menuListEntry.children?.length) return;
-
-			if (menuListEntry.ref) menuListEntry.ref.isOpen = false;
-			else this.$emit("update:open", false);
-		},
-		isEntryOpen(menuListEntry: MenuListEntry): boolean {
-			if (!menuListEntry.children?.length) return false;
-
-			return this.open;
-		},
-		/// Handles keyboard navigation for the menu. Returns if the entire menu stack should be dismissed
-		keydown(e: KeyboardEvent, submenu: boolean): boolean {
-			// Interactive menus should keep the active entry the same as the highlighted one
-			if (this.interactive) this.highlighted = this.activeEntry;
-
-			const menuOpen = this.isOpen;
-			const flatEntries = this.entries.flat().filter((entry) => !entry.disabled);
-			const openChild = flatEntries.findIndex((entry) => entry.children?.length && entry.ref?.isOpen);
-
-			const openSubmenu = (highlighted: MenuListEntry): void => {
-				if (highlighted.ref && highlighted.children?.length) {
-					highlighted.ref.isOpen = true;
-
-					// Highlight first item
-					highlighted.ref.setHighlighted(highlighted.children[0][0]);
-				}
-			};
-
-			if (!menuOpen && (e.key === " " || e.key === "Enter")) {
-				// Allow opening menu with space or enter
-				this.isOpen = true;
-				this.highlighted = this.activeEntry;
-			} else if (menuOpen && openChild >= 0) {
-				// Redirect the keyboard navigation to a submenu if one is open
-				const shouldCloseStack = flatEntries[openChild].ref?.keydown(e, true);
-
-				// Highlight the menu item in the parent list that corresponds with the open submenu
-				if (e.key !== "Escape" && this.highlighted) this.setHighlighted(flatEntries[openChild]);
-
-				// Handle the child closing the entire menu stack
-				if (shouldCloseStack) {
-					this.isOpen = false;
-					return true;
-				}
-			} else if ((menuOpen || this.interactive) && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-				// Navigate to the next and previous entries with arrow keys
-
-				let newIndex = e.key === "ArrowUp" ? flatEntries.length - 1 : 0;
-				if (this.highlighted) {
-					const index = this.highlighted ? flatEntries.map((entry) => entry.label).indexOf(this.highlighted.label) : 0;
-					newIndex = index + (e.key === "ArrowUp" ? -1 : 1);
-
-					// Interactive dropdowns should lock at the end whereas other dropdowns should loop
-					if (this.interactive) newIndex = Math.min(flatEntries.length - 1, Math.max(0, newIndex));
-					else newIndex = (newIndex + flatEntries.length) % flatEntries.length;
-				}
-
-				const newEntry = flatEntries[newIndex];
-				this.setHighlighted(newEntry);
-			} else if (menuOpen && e.key === "Escape") {
-				// Close menu with escape key
-				this.isOpen = false;
-
-				// Reset active to before open
-				this.setHighlighted(this.activeEntry);
-			} else if (menuOpen && this.highlighted && e.key === "Enter") {
-				// Handle clicking on an option if enter is pressed
-				if (!this.highlighted.children?.length) this.onEntryClick(this.highlighted);
-				else openSubmenu(this.highlighted);
-
-				// Stop the event from triggering a press on a new dialog
-				e.preventDefault();
-
-				// Enter should close the entire menu stack
+			// Handle the child closing the entire menu stack
+			if (shouldCloseStack) {
+				open = false;
 				return true;
-			} else if (menuOpen && this.highlighted && e.key === "ArrowRight") {
-				// Right arrow opens a submenu
-				openSubmenu(this.highlighted);
-			} else if (menuOpen && e.key === "ArrowLeft") {
-				// Left arrow closes a submenu
-				if (submenu) this.isOpen = false;
+			}
+		} else if ((menuOpen || interactive) && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+			// Navigate to the next and previous entries with arrow keys
+
+			let newIndex = e.key === "ArrowUp" ? flatEntries.length - 1 : 0;
+			if (highlighted) {
+				const index = highlighted ? flatEntries.map((entry) => entry.label).indexOf(highlighted.label) : 0;
+				newIndex = index + (e.key === "ArrowUp" ? -1 : 1);
+
+				// Interactive dropdowns should lock at the end whereas other dropdowns should loop
+				if (interactive) newIndex = Math.min(flatEntries.length - 1, Math.max(0, newIndex));
+				else newIndex = (newIndex + flatEntries.length) % flatEntries.length;
 			}
 
-			// By default, keep the menu stack open
-			return false;
-		},
-		setHighlighted(newHighlight: MenuListEntry | undefined) {
-			this.highlighted = newHighlight;
-			// Interactive menus should keep the active entry the same as the highlighted one
-			if (this.interactive && newHighlight?.value !== this.activeEntry?.value) this.$emit("update:activeEntry", newHighlight);
-		},
-		onScroll(e: Event) {
-			if (!this.virtualScrollingEntryHeight) return;
-			this.virtualScrollingEntriesStart = (e.target as HTMLElement)?.scrollTop || 0;
-		},
-	},
-	computed: {
-		virtualScrollingTotalHeight() {
-			return this.entries[0].length * this.virtualScrollingEntryHeight;
-		},
-		virtualScrollingStartIndex() {
-			return Math.floor(this.virtualScrollingEntriesStart / this.virtualScrollingEntryHeight);
-		},
-		virtualScrollingEndIndex() {
-			return Math.min(this.entries[0].length, this.virtualScrollingStartIndex + 1 + 400 / this.virtualScrollingEntryHeight);
-		},
-	},
-	components: {
-		FloatingMenu,
-		IconLabel,
-		LayoutCol,
-		LayoutRow,
-		Separator,
-		TextLabel,
-		UserInputLabel,
-	},
-});
-export default MenuList;
+			const newEntry = flatEntries[newIndex];
+			setHighlighted(newEntry);
+		} else if (menuOpen && e.key === "Escape") {
+			// Close menu with escape key
+			open = false;
+
+			// Reset active to before open
+			setHighlighted(activeEntry);
+		} else if (menuOpen && highlighted && e.key === "Enter") {
+			// Handle clicking on an option if enter is pressed
+			if (!highlighted.children?.length) onEntryClick(highlighted);
+			else openSubmenu(highlighted);
+
+			// Stop the event from triggering a press on a new dialog
+			e.preventDefault();
+
+			// Enter should close the entire menu stack
+			return true;
+		} else if (menuOpen && highlighted && e.key === "ArrowRight") {
+			// Right arrow opens a submenu
+			openSubmenu(highlighted);
+		} else if (menuOpen && e.key === "ArrowLeft") {
+			// Left arrow closes a submenu
+			if (submenu) open = false;
+		}
+
+		// By default, keep the menu stack open
+		return false;
+	}
+
+	export function setHighlighted(newHighlight: MenuListEntry | undefined) {
+		highlighted = newHighlight;
+		// Interactive menus should keep the active entry the same as the highlighted one
+		if (interactive && newHighlight?.value !== activeEntry?.value && newHighlight) dispatch("activeEntry", newHighlight);
+	}
+
+	export function scrollViewTo(distanceDown: number): void {
+		scroller.div().scrollTo(0, distanceDown);
+	}
 </script>
 
-<template>
-	<FloatingMenu
-		class="menu-list"
-		v-model:open="isOpen"
-		@naturalWidth="(newNaturalWidth: number) => $emit('naturalWidth', newNaturalWidth)"
-		:type="'Dropdown'"
-		:windowEdgeMargin="0"
-		:escapeCloses="false"
-		v-bind="{ direction, scrollableY: scrollableY && virtualScrollingEntryHeight === 0, minWidth }"
-		ref="floatingMenu"
+<FloatingMenu
+	class="menu-list"
+	{open}
+	on:open={({ detail }) => (open = detail)}
+	on:naturalWidth
+	type="Dropdown"
+	windowEdgeMargin={0}
+	escapeCloses={false}
+	{direction}
+	{minWidth}
+	scrollableY={scrollableY && virtualScrollingEntryHeight === 0}
+	bind:this={self}
+>
+	<!-- If we put the scrollableY on the layoutcol for non-font dropdowns then for some reason it always creates a tiny scrollbar.
+	However when we are using the virtual scrolling then we need the layoutcol to be scrolling so we can bind the events without using $refs. -->
+	<LayoutCol
+		bind:this={scroller}
+		scrollableY={scrollableY && virtualScrollingEntryHeight !== 0}
+		on:scroll={onScroll}
+		styles={{ "min-width": virtualScrollingEntryHeight ? `${minWidth}px` : `inherit` }}
 	>
-		<!-- If we put the scrollableY on the layoutcol for non-font dropdowns then for some reason it always creates a tiny scrollbar.
-		However when we are using the virtual scrolling then we need the layoutcol to be scrolling so we can bind the events without using $refs. -->
-		<LayoutCol ref="scroller" :scrollableY="scrollableY && virtualScrollingEntryHeight !== 0" @scroll="onScroll" :style="{ minWidth: virtualScrollingEntryHeight ? `${minWidth}px` : `inherit` }">
-			<LayoutRow v-if="virtualScrollingEntryHeight" class="scroll-spacer" :style="{ height: `${virtualScrollingStartIndex * virtualScrollingEntryHeight}px` }"></LayoutRow>
-			<template v-for="(section, sectionIndex) in entries" :key="sectionIndex">
-				<Separator :type="'List'" :direction="'Vertical'" v-if="sectionIndex > 0" />
+		{#if virtualScrollingEntryHeight}
+			<LayoutRow class="scroll-spacer" styles={{ height: `${virtualScrollingStartIndex * virtualScrollingEntryHeight}px` }} />
+		{/if}
+		{#each entries as section, sectionIndex (sectionIndex)}
+			{#if sectionIndex > 0}
+				<Separator type="List" direction="Vertical" />
+			{/if}
+			{#each virtualScrollingEntryHeight ? section.slice(virtualScrollingStartIndex, virtualScrollingEndIndex) : section as entry, entryIndex (entryIndex + (virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0))}
 				<LayoutRow
-					v-for="(entry, entryIndex) in virtualScrollingEntryHeight ? section.slice(virtualScrollingStartIndex, virtualScrollingEndIndex) : section"
-					:key="entryIndex + (virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0)"
 					class="row"
-					:class="{ open: isEntryOpen(entry), active: entry.label === highlighted?.label, disabled: entry.disabled }"
-					:style="{ height: virtualScrollingEntryHeight || '20px' }"
-					:title="tooltip"
-					@click="() => !entry.disabled && onEntryClick(entry)"
-					@pointerenter="() => !entry.disabled && onEntryPointerEnter(entry)"
-					@pointerleave="() => !entry.disabled && onEntryPointerLeave(entry)"
+					classes={{ open: isEntryOpen(entry), active: entry.label === highlighted?.label, disabled: Boolean(entry.disabled) }}
+					styles={{ height: virtualScrollingEntryHeight || "20px" }}
+					{tooltip}
+					on:click={() => !entry.disabled && onEntryClick(entry)}
+					on:pointerenter={() => !entry.disabled && onEntryPointerEnter(entry)}
+					on:pointerleave={() => !entry.disabled && onEntryPointerLeave(entry)}
 				>
-					<IconLabel v-if="entry.icon && drawIcon" :icon="entry.icon" class="entry-icon" />
-					<div v-else-if="drawIcon" class="no-icon"></div>
+					{#if entry.icon && drawIcon}
+						<IconLabel icon={entry.icon} class="entry-icon" />
+					{:else if drawIcon}
+						<div class="no-icon" />
+					{/if}
 
-					<link v-if="entry.font" rel="stylesheet" :href="entry.font?.toString()" />
+					{#if entry.font}
+						<link rel="stylesheet" href={entry.font?.toString()} />
+					{/if}
 
-					<TextLabel class="entry-label" :style="{ fontFamily: `${!entry.font ? 'inherit' : entry.value}` }">{{ entry.label }}</TextLabel>
+					<TextLabel class="entry-label" styles={{ "font-family": `${!entry.font ? "inherit" : entry.value}` }}>{entry.label}</TextLabel>
 
-					<UserInputLabel v-if="entry.shortcut?.keys.length" :keysWithLabelsGroups="[entry.shortcut.keys]" :requiresLock="entry.shortcutRequiresLock" />
+					{#if entry.shortcut?.keys.length}
+						<UserInputLabel keysWithLabelsGroups={[entry.shortcut.keys]} requiresLock={entry.shortcutRequiresLock} />
+					{/if}
 
-					<div class="submenu-arrow" v-if="entry.children?.length"></div>
-					<div class="no-submenu-arrow" v-else></div>
+					{#if entry.children?.length}
+						<div class="submenu-arrow" />
+					{:else}
+						<div class="no-submenu-arrow" />
+					{/if}
 
-					<MenuList
-						v-if="entry.children"
-						@naturalWidth="(newNaturalWidth: number) => $emit('naturalWidth', newNaturalWidth)"
-						:open="entry.ref?.open || false"
-						:direction="'TopRight'"
-						:entries="entry.children"
-						v-bind="{ minWidth, drawIcon, scrollableY }"
-						:ref="(ref: MenuListInstance): void => (ref && (entry.ref = ref), undefined)"
-					/>
+					{#if entry.children}
+						<svelte:self on:naturalWidth open={entry.ref?.open || false} direction="TopRight" entries={entry.children} {minWidth} {drawIcon} {scrollableY} bind:this={entry.ref} />
+					{/if}
 				</LayoutRow>
-			</template>
-			<LayoutRow
-				v-if="virtualScrollingEntryHeight"
-				class="scroll-spacer"
-				:style="{ height: `${virtualScrollingTotalHeight - virtualScrollingEndIndex * virtualScrollingEntryHeight}px` }"
-			></LayoutRow>
-		</LayoutCol>
-	</FloatingMenu>
-</template>
+			{/each}
+		{/each}
+		{#if virtualScrollingEntryHeight}
+			<LayoutRow class="scroll-spacer" styles={{ height: `${virtualScrollingTotalHeight - virtualScrollingEndIndex * virtualScrollingEntryHeight}px` }} />
+		{/if}
+	</LayoutCol>
+</FloatingMenu>
 
-<style lang="scss">
-.menu-list {
-	.floating-menu-container .floating-menu-content {
-		padding: 4px 0;
+<style lang="scss" global>
+	.menu-list {
+		.floating-menu-container .floating-menu-content {
+			padding: 4px 0;
 
-		.separator div {
-			background: var(--color-4-dimgray);
-		}
+			.separator div {
+				background: var(--color-4-dimgray);
+			}
 
-		.scroll-spacer {
-			flex: 0 0 auto;
-		}
-
-		.row {
-			height: 20px;
-			align-items: center;
-			white-space: nowrap;
-			position: relative;
-			flex: 0 0 auto;
-
-			& > * {
+			.scroll-spacer {
 				flex: 0 0 auto;
 			}
 
-			.entry-icon svg {
-				fill: var(--color-e-nearwhite);
-			}
+			.row {
+				height: 20px;
+				align-items: center;
+				white-space: nowrap;
+				position: relative;
+				flex: 0 0 auto;
 
-			.no-icon {
-				width: 16px;
-			}
-
-			.entry-label {
-				flex: 1 1 100%;
-				margin-left: 8px;
-			}
-
-			.entry-icon,
-			.no-icon {
-				margin: 0 4px;
-
-				& + .entry-label {
-					margin-left: 0;
+				& > * {
+					flex: 0 0 auto;
 				}
-			}
-
-			.user-input-label {
-				margin-left: 16px;
-			}
-
-			.submenu-arrow {
-				width: 0;
-				height: 0;
-				border-style: solid;
-				border-width: 3px 0 3px 6px;
-				border-color: transparent transparent transparent var(--color-e-nearwhite);
-			}
-
-			.no-submenu-arrow {
-				width: 6px;
-			}
-
-			.submenu-arrow,
-			.no-submenu-arrow {
-				margin-left: 6px;
-				margin-right: 4px;
-			}
-
-			&:hover,
-			&.open {
-				background: var(--color-6-lowergray);
-				color: var(--color-f-white);
 
 				.entry-icon svg {
-					fill: var(--color-f-white);
-				}
-			}
-
-			&.active {
-				background: var(--color-e-nearwhite);
-				color: var(--color-2-mildblack);
-
-				.entry-icon svg {
-					fill: var(--color-2-mildblack);
-				}
-			}
-
-			&.disabled {
-				color: var(--color-8-uppergray);
-
-				&:hover {
-					background: none;
+					fill: var(--color-e-nearwhite);
 				}
 
-				svg {
-					fill: var(--color-8-uppergray);
+				.no-icon {
+					width: 16px;
+				}
+
+				.entry-label {
+					flex: 1 1 100%;
+					margin-left: 8px;
+				}
+
+				.entry-icon,
+				.no-icon {
+					margin: 0 4px;
+
+					& + .entry-label {
+						margin-left: 0;
+					}
+				}
+
+				.user-input-label {
+					margin-left: 16px;
+				}
+
+				.submenu-arrow {
+					width: 0;
+					height: 0;
+					border-style: solid;
+					border-width: 3px 0 3px 6px;
+					border-color: transparent transparent transparent var(--color-e-nearwhite);
+				}
+
+				.no-submenu-arrow {
+					width: 6px;
+				}
+
+				.submenu-arrow,
+				.no-submenu-arrow {
+					margin-left: 6px;
+					margin-right: 4px;
+				}
+
+				&:hover,
+				&.open {
+					background: var(--color-6-lowergray);
+					color: var(--color-f-white);
+
+					.entry-icon svg {
+						fill: var(--color-f-white);
+					}
+				}
+
+				&.active {
+					background: var(--color-e-nearwhite);
+					color: var(--color-2-mildblack);
+
+					.entry-icon svg {
+						fill: var(--color-2-mildblack);
+					}
+				}
+
+				&.disabled {
+					color: var(--color-8-uppergray);
+
+					&:hover {
+						background: none;
+					}
+
+					svg {
+						fill: var(--color-8-uppergray);
+					}
 				}
 			}
 		}
 	}
-}
 </style>

frontend/src/components/layout/LayoutCol.svelte

@@ -1,35 +1,89 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	let className = "";
+	export { className as class };
+	export let classes: Record<string, boolean> = {};
+	let styleName = "";
+	export { styleName as style };
+	export let styles: Record<string, string | number | undefined> = {};
+	export let tooltip: string | undefined = undefined;
+	export let scrollableX: boolean = false;
+	export let scrollableY: boolean = false;
 
-export default defineComponent({
-	props: {
-		scrollableX: { type: Boolean as PropType<boolean>, default: false },
-		scrollableY: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-	},
-});
+	let self: HTMLDivElement;
+
+	$: extraClasses = Object.entries(classes)
+		.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
+		.join(" ");
+	$: extraStyles = Object.entries(styles)
+		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
+		.join(" ");
+
+	export function div(): HTMLDivElement {
+		return self;
+	}
 </script>
 
-<template>
-	<div
-		class="layout-col"
-		:class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }"
-		:data-scrollable-x="scrollableX || undefined"
-		:data-scrollable-y="scrollableY || undefined"
-		:title="tooltip"
-	>
-		<slot></slot>
-	</div>
-</template>
+<div
+	class={`layout-col ${className} ${extraClasses}`.trim()}
+	class:scrollable-x={scrollableX}
+	class:scrollable-y={scrollableY}
+	style={`${styleName} ${extraStyles}`.trim() || undefined}
+	title={tooltip}
+	bind:this={self}
+	on:focus
+	on:blur
+	on:fullscreenchange
+	on:fullscreenerror
+	on:scroll
+	on:cut
+	on:copy
+	on:paste
+	on:keydown
+	on:keypress
+	on:keyup
+	on:auxclick
+	on:click
+	on:contextmenu
+	on:dblclick
+	on:mousedown
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:mouseover
+	on:mouseout
+	on:mouseup
+	on:select
+	on:wheel
+	on:drag
+	on:dragend
+	on:dragenter
+	on:dragstart
+	on:dragleave
+	on:dragover
+	on:drop
+	on:touchcancel
+	on:touchend
+	on:touchmove
+	on:touchstart
+	on:pointerover
+	on:pointerenter
+	on:pointerdown
+	on:pointermove
+	on:pointerup
+	on:pointercancel
+	on:pointerout
+	on:pointerleave
+	on:gotpointercapture
+	on:lostpointercapture
+	{...$$restProps}
+>
+	<slot />
+</div>
 
-<style lang="scss">
-.layout-col {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-
-	.spacer {
-		flex: 1 1 100%;
+<style lang="scss" global>
+	.layout-col {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
 	}
-}
 </style>

frontend/src/components/layout/LayoutRow.svelte

@@ -1,35 +1,89 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	let className = "";
+	export { className as class };
+	export let classes: Record<string, boolean> = {};
+	let styleName = "";
+	export { styleName as style };
+	export let styles: Record<string, string | number | undefined> = {};
+	export let tooltip: string | undefined = undefined;
+	export let scrollableX: boolean = false;
+	export let scrollableY: boolean = false;
 
-export default defineComponent({
-	props: {
-		scrollableX: { type: Boolean as PropType<boolean>, default: false },
-		scrollableY: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-	},
-});
+	let self: HTMLDivElement;
+
+	$: extraClasses = Object.entries(classes)
+		.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
+		.join(" ");
+	$: extraStyles = Object.entries(styles)
+		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
+		.join(" ");
+
+	export function div(): HTMLDivElement {
+		return self;
+	}
 </script>
 
-<template>
-	<div
-		class="layout-row"
-		:class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }"
-		:data-scrollable-x="scrollableX || undefined"
-		:data-scrollable-y="scrollableY || undefined"
-		:title="tooltip"
-	>
-		<slot></slot>
-	</div>
-</template>
+<div
+	class={`layout-row ${className} ${extraClasses}`.trim()}
+	class:scrollable-x={scrollableX}
+	class:scrollable-y={scrollableY}
+	style={`${styleName} ${extraStyles}`.trim() || undefined}
+	title={tooltip}
+	bind:this={self}
+	on:focus
+	on:blur
+	on:fullscreenchange
+	on:fullscreenerror
+	on:scroll
+	on:cut
+	on:copy
+	on:paste
+	on:keydown
+	on:keypress
+	on:keyup
+	on:auxclick
+	on:click
+	on:contextmenu
+	on:dblclick
+	on:mousedown
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:mouseover
+	on:mouseout
+	on:mouseup
+	on:select
+	on:wheel
+	on:drag
+	on:dragend
+	on:dragenter
+	on:dragstart
+	on:dragleave
+	on:dragover
+	on:drop
+	on:touchcancel
+	on:touchend
+	on:touchmove
+	on:touchstart
+	on:pointerover
+	on:pointerenter
+	on:pointerdown
+	on:pointermove
+	on:pointerup
+	on:pointercancel
+	on:pointerout
+	on:pointerleave
+	on:gotpointercapture
+	on:lostpointercapture
+	{...$$restProps}
+>
+	<slot />
+</div>
 
-<style lang="scss">
-.layout-row {
-	display: flex;
-	flex-direction: row;
-	flex-grow: 1;
-
-	.spacer {
-		flex: 1 1 100%;
+<style lang="scss" global>
+	.layout-row {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
 	}
-}
 </style>

frontend/src/components/panels/Properties.svelte

@@ -1,68 +1,60 @@
 <script lang="ts">
-import { defineComponent } from "vue";
+	import { getContext, onMount } from "svelte";
 
-import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@/wasm-communication/messages";
+	import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@/wasm-communication/messages";
 
-import LayoutCol from "@/components/layout/LayoutCol.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
+	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
+	import { type Editor } from "@/wasm-communication/editor";
 
-export default defineComponent({
-	inject: ["editor", "dialog"],
-	data() {
-		return {
-			propertiesOptionsLayout: defaultWidgetLayout(),
-			propertiesSectionsLayout: defaultWidgetLayout(),
-		};
-	},
-	mounted() {
-		this.editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelOptionsLayout, (updatePropertyPanelOptionsLayout) => {
-			patchWidgetLayout(this.propertiesOptionsLayout, updatePropertyPanelOptionsLayout);
+	const editor = getContext<Editor>("editor");
+
+	let propertiesOptionsLayout = defaultWidgetLayout();
+	let propertiesSectionsLayout = defaultWidgetLayout();
+
+	onMount(() => {
+		editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelOptionsLayout, (updatePropertyPanelOptionsLayout) => {
+			patchWidgetLayout(propertiesOptionsLayout, updatePropertyPanelOptionsLayout);
+			propertiesOptionsLayout = propertiesOptionsLayout;
 		});
 
-		this.editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
-			patchWidgetLayout(this.propertiesSectionsLayout, updatePropertyPanelSectionsLayout);
+		editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
+			patchWidgetLayout(propertiesSectionsLayout, updatePropertyPanelSectionsLayout);
+			propertiesSectionsLayout = propertiesSectionsLayout;
 		});
-	},
-	components: {
-		LayoutCol,
-		LayoutRow,
-		WidgetLayout,
-	},
-});
+	});
 </script>
 
-<template>
-	<LayoutCol class="properties">
-		<LayoutRow class="options-bar">
-			<WidgetLayout :layout="propertiesOptionsLayout" />
-		</LayoutRow>
-		<LayoutRow class="sections" :scrollableY="true">
-			<WidgetLayout :layout="propertiesSectionsLayout" />
-		</LayoutRow>
-	</LayoutCol>
-</template>
+<LayoutCol class="properties">
+	<LayoutRow class="options-bar">
+		<WidgetLayout layout={propertiesOptionsLayout} />
+	</LayoutRow>
+	<LayoutRow class="sections" scrollableY={true}>
+		<WidgetLayout layout={propertiesSectionsLayout} />
+	</LayoutRow>
+</LayoutCol>
 
-<style lang="scss">
-.properties {
-	height: 100%;
+<style lang="scss" global>
+	.properties {
+		height: 100%;
 
-	.widget-layout {
-		flex: 1 1 100%;
-		margin: 0 4px;
+		.widget-layout {
+			flex: 1 1 100%;
+			margin: 0 4px;
+		}
+
+		.options-bar {
+			height: 32px;
+			flex: 0 0 auto;
+		}
+
+		.sections {
+			flex: 1 1 100%;
+		}
+
+		.text-button {
+			flex-basis: 0;
+		}
 	}
-
-	.options-bar {
-		height: 32px;
-		flex: 0 0 auto;
-	}
-
-	.sections {
-		flex: 1 1 100%;
-	}
-
-	.text-button {
-		flex-basis: 0;
-	}
-}
 </style>

frontend/src/components/widgets/WidgetLayout.svelte

@@ -1,44 +1,37 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { isWidgetColumn, isWidgetRow, isWidgetSection, type WidgetLayout } from "@/wasm-communication/messages";
 
-import { isWidgetColumn, isWidgetRow, isWidgetSection, type LayoutGroup, type WidgetLayout } from "@/wasm-communication/messages";
+	import WidgetSection from "@/components/widgets/groups/WidgetSection.svelte";
+	import WidgetRow from "@/components/widgets/WidgetRow.svelte";
 
-import WidgetSection from "@/components/widgets/groups/WidgetSection.vue";
-import WidgetRow from "@/components/widgets/WidgetRow.vue";
+	export let layout: WidgetLayout;
+	let className = "";
+	export { className as class };
+	export let classes: Record<string, boolean> = {};
 
-export default defineComponent({
-	props: {
-		layout: { type: Object as PropType<WidgetLayout>, required: true },
-	},
-	methods: {
-		layoutGroupType(layoutRow: LayoutGroup): unknown {
-			if (isWidgetColumn(layoutRow)) return WidgetRow;
-			if (isWidgetRow(layoutRow)) return WidgetRow;
-			if (isWidgetSection(layoutRow)) return WidgetSection;
-
-			throw new Error("Layout row type does not exist");
-		},
-	},
-	components: {
-		WidgetRow,
-		WidgetSection,
-	},
-});
+	$: extraClasses = Object.entries(classes)
+		.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
+		.join(" ");
 </script>
 
-<!-- TODO: Refactor this component (together with `WidgetRow.vue`) to be more logically consistent with our layout definition goals, in terms of naming and capabilities -->
+<!-- TODO: Refactor this component (together with `WidgetRow.svelte`) to be more logically consistent with our layout definition goals, in terms of naming and capabilities -->
+<div class={`widget-layout ${className} ${extraClasses}`.trim()}>
+	{#each layout.layout as layoutGroup, index (index)}
+		{#if isWidgetColumn(layoutGroup) || isWidgetRow(layoutGroup)}
+			<WidgetRow widgetData={layoutGroup} layoutTarget={layout.layoutTarget} />
+		{:else if isWidgetSection(layoutGroup)}
+			<WidgetSection widgetData={layoutGroup} layoutTarget={layout.layoutTarget} />
+		{:else}
+			<span style="color: #d6536e">Error: The widget row that belongs here has an invalid layout group type</span>
+		{/if}
+	{/each}
+</div>
 
-<template>
-	<div class="widget-layout">
-		<component :is="layoutGroupType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layout.layoutTarget" v-for="(layoutRow, index) in layout.layout" :key="index" />
-	</div>
-</template>
-
-<style lang="scss">
-.widget-layout {
-	height: 100%;
-	flex: 0 0 auto;
-	display: flex;
-	flex-direction: column;
-}
+<style lang="scss" global>
+	.widget-layout {
+		height: 100%;
+		flex: 0 0 auto;
+		display: flex;
+		flex-direction: column;
+	}
 </style>

frontend/src/components/widgets/WidgetRow.svelte

@@ -1,213 +1,235 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { debouncer } from "@/utility-functions/debounce";
+	import { narrowWidgetProps, Widget } from "@/wasm-communication/messages";
+	import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@/wasm-communication/messages";
 
-import { debouncer } from "@/components/widgets/debounce";
-import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow, type Widget } from "@/wasm-communication/messages";
+	import PivotAssist from "@/components/widgets/assists/PivotAssist.svelte";
+	import BreadcrumbTrailButtons from "@/components/widgets/buttons/BreadcrumbTrailButtons.svelte";
+	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
+	import ParameterExposeButton from "@/components/widgets/buttons/ParameterExposeButton.svelte";
+	import PopoverButton from "@/components/widgets/buttons/PopoverButton.svelte";
+	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
+	import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.svelte";
+	import ColorInput from "@/components/widgets/inputs/ColorInput.svelte";
+	import DropdownInput from "@/components/widgets/inputs/DropdownInput.svelte";
+	import FontInput from "@/components/widgets/inputs/FontInput.svelte";
+	import LayerReferenceInput from "@/components/widgets/inputs/LayerReferenceInput.svelte";
+	import NumberInput from "@/components/widgets/inputs/NumberInput.svelte";
+	import OptionalInput from "@/components/widgets/inputs/OptionalInput.svelte";
+	import RadioInput from "@/components/widgets/inputs/RadioInput.svelte";
+	import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.svelte";
+	import TextAreaInput from "@/components/widgets/inputs/TextAreaInput.svelte";
+	import TextInput from "@/components/widgets/inputs/TextInput.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import Separator from "@/components/widgets/labels/Separator.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import { getContext } from "svelte";
+	import { type Editor } from "@/wasm-communication/editor";
 
-import PivotAssist from "@/components/widgets/assists/PivotAssist.vue";
-import BreadcrumbTrailButtons from "@/components/widgets/buttons/BreadcrumbTrailButtons.vue";
-import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import ParameterExposeButton from "@/components/widgets/buttons/ParameterExposeButton.vue";
-import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
-import TextButton from "@/components/widgets/buttons/TextButton.vue";
-import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
-import ColorInput from "@/components/widgets/inputs/ColorInput.vue";
-import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
-import FontInput from "@/components/widgets/inputs/FontInput.vue";
-import LayerReferenceInput from "@/components/widgets/inputs/LayerReferenceInput.vue";
-import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
-import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
-import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
-import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
-import TextAreaInput from "@/components/widgets/inputs/TextAreaInput.vue";
-import TextInput from "@/components/widgets/inputs/TextInput.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import Separator from "@/components/widgets/labels/Separator.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	const SUFFIX_WIDGETS = ["PopoverButton"];
 
-const SUFFIX_WIDGETS = ["PopoverButton"];
+	const editor = getContext<Editor>("editor");
 
-export default defineComponent({
-	inject: ["editor"],
-	props: {
-		widgetData: { type: Object as PropType<WidgetColumn | WidgetRow>, required: true },
-		layoutTarget: { required: true },
-	},
-	data() {
-		return {
-			open: false,
-		};
-	},
-	computed: {
-		direction(): "column" | "row" | "ERROR" {
-			if (isWidgetColumn(this.widgetData)) return "column";
-			if (isWidgetRow(this.widgetData)) return "row";
-			return "ERROR";
-		},
-		widgets() {
-			let widgets: Widget[] = [];
-			if (isWidgetColumn(this.widgetData)) widgets = this.widgetData.columnWidgets;
-			if (isWidgetRow(this.widgetData)) widgets = this.widgetData.rowWidgets;
-			return widgets;
-		},
-		widgetsAndNextSiblingIsSuffix(): [Widget, boolean][] {
-			return this.widgets.map((widget, index): [Widget, boolean] => {
-				// A suffix widget is one that joins up with this widget at the end with only a 1px gap.
-				// It uses the CSS sibling selector to give its own left edge corners zero radius.
-				// But this JS is needed to set its preceding sibling widget's right edge corners to zero radius.
-				const nextSiblingIsSuffix = SUFFIX_WIDGETS.includes(this.widgets[index + 1]?.props.kind);
+	export let widgetData: WidgetColumn | WidgetRow;
+	export let layoutTarget: any;
 
-				return [widget, nextSiblingIsSuffix];
-			});
-		},
-	},
-	methods: {
-		updateLayout(index: number, value: unknown) {
-			this.editor.instance.updateLayout(this.layoutTarget, this.widgets[index].widgetId, value);
-		},
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		withoutValue(props: Record<string, any>): Record<string, unknown> {
-			const { value: _, ...rest } = props;
-			return rest;
-		},
-		debouncer,
-	},
-	components: {
-		BreadcrumbTrailButtons,
-		CheckboxInput,
-		ColorInput,
-		DropdownInput,
-		FontInput,
-		IconButton,
-		IconLabel,
-		LayerReferenceInput,
-		NumberInput,
-		OptionalInput,
-		ParameterExposeButton,
-		PivotAssist,
-		PopoverButton,
-		RadioInput,
-		Separator,
-		SwatchPairInput,
-		TextAreaInput,
-		TextButton,
-		TextInput,
-		TextLabel,
-	},
-});
+	$: direction = watchDirection(widgetData);
+	$: widgets = watchWidgets(widgetData);
+	$: widgetsAndNextSiblingIsSuffix = watchWidgetsAndNextSiblingIsSuffix(widgets);
+
+	function watchDirection(widgetData: WidgetRow | WidgetColumn): "row" | "column" | "ERROR" {
+		if (isWidgetRow(widgetData)) return "row";
+		if (isWidgetColumn(widgetData)) return "column";
+		return "ERROR";
+	}
+
+	function watchWidgets(widgetData: WidgetRow | WidgetColumn): Widget[] {
+		let widgets: Widget[] = [];
+		if (isWidgetRow(widgetData)) widgets = widgetData.rowWidgets;
+		else if (isWidgetColumn(widgetData)) widgets = widgetData.columnWidgets;
+		return widgets;
+	}
+
+	function watchWidgetsAndNextSiblingIsSuffix(widgets: Widget[]): [Widget, boolean][] {
+		return widgets.map((widget, index): [Widget, boolean] => {
+			// A suffix widget is one that joins up with this widget at the end with only a 1px gap.
+			// It uses the CSS sibling selector to give its own left edge corners zero radius.
+			// But this JS is needed to set its preceding sibling widget's right edge corners to zero radius.
+			const nextSiblingIsSuffix = SUFFIX_WIDGETS.includes(widgets[index + 1]?.props.kind);
+
+			return [widget, nextSiblingIsSuffix];
+		});
+	}
+
+	function updateLayout(index: number, value: unknown) {
+		editor.instance.updateLayout(layoutTarget, widgets[index].widgetId, value);
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	// function exclude<T extends Record<string, any>>(props: T, additional?: (keyof T)[]): Pick<T, Exclude<keyof T, "kind" | (typeof additional extends Array<infer K> ? K : never)>> {
+	// 	const exclusions = ["kind", ...(additional || [])];
+
+	// 	return Object.fromEntries(Object.entries(props).filter((entry) => !exclusions.includes(entry[0]))) as any;
+	// }
+
+	// TODO: This seems to work, but verify the correctness and terseness of this, it's adapted from https://stackoverflow.com/a/67434028/775283
+	function exclude<T extends object>(props: T, additional?: (keyof T)[]): Omit<T, typeof additional extends Array<infer K> ? K : never> {
+		const exclusions = ["kind", ...(additional || [])];
+
+		return Object.fromEntries(Object.entries(props).filter((entry) => !exclusions.includes(entry[0]))) as any;
+	}
 </script>
 
-<!-- TODO: Refactor this component to use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
-<!-- TODO: Also rename this component, and probably move the `widget-${direction}` wrapper to be part of `WidgetLayout.vue` as part of its refactor -->
+<!-- TODO: Refactor this component to use `<svelte:component this={attributesObject} />` to avoid all the separate conditional components -->
+<!-- TODO: Also rename this component, and probably move the `widget-${direction}` wrapper to be part of `WidgetLayout.svelte` as part of its refactor -->
 
-<template>
-	<div :class="`widget-${direction}`">
-		<template v-for="([component, nextIsSuffix], index) in widgetsAndNextSiblingIsSuffix" :key="index">
-			<CheckboxInput v-if="component.props.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(index, value)" />
-			<ColorInput
-				v-if="component.props.kind === 'ColorInput'"
-				v-bind="component.props"
-				v-model:open="open"
-				@update:value="(value: unknown) => updateLayout(index, value)"
-				:sharpRightCorners="nextIsSuffix"
-			/>
-			<DropdownInput
-				v-if="component.props.kind === 'DropdownInput'"
-				v-bind="component.props"
-				v-model:open="open"
-				@update:selectedIndex="(value: number) => updateLayout(index, value)"
-				:sharpRightCorners="nextIsSuffix"
-			/>
-			<FontInput
-				v-if="component.props.kind === 'FontInput'"
-				v-bind="component.props"
-				v-model:open="open"
-				@changeFont="(value: unknown) => updateLayout(index, value)"
-				:sharpRightCorners="nextIsSuffix"
-			/>
-			<ParameterExposeButton v-if="component.props.kind === 'ParameterExposeButton'" v-bind="component.props" :action="() => updateLayout(index, undefined)" />
-			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(index, undefined)" :sharpRightCorners="nextIsSuffix" />
-			<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
-			<LayerReferenceInput v-if="component.props.kind === 'LayerReferenceInput'" v-bind="component.props" @update:value="(value: BigUint64Array) => updateLayout(index, value)" />
+<div class={`widget-${direction}`}>
+	{#each widgetsAndNextSiblingIsSuffix as [component, nextIsSuffix], index (index)}
+		{@const checkboxInput = narrowWidgetProps(component.props, "CheckboxInput")}
+		{#if checkboxInput}
+			<CheckboxInput {...exclude(checkboxInput)} on:checked={({ detail }) => updateLayout(index, detail)} />
+		{/if}
+		{@const colorInput = narrowWidgetProps(component.props, "ColorInput")}
+		{#if colorInput}
+			<ColorInput {...exclude(colorInput)} on:value={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} />
+		{/if}
+		{@const dropdownInput = narrowWidgetProps(component.props, "DropdownInput")}
+		{#if dropdownInput}
+			<DropdownInput {...exclude(dropdownInput)} on:selectedIndex={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} />
+		{/if}
+		{@const fontInput = narrowWidgetProps(component.props, "FontInput")}
+		{#if fontInput}
+			<FontInput {...exclude(fontInput)} on:changeFont={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} />
+		{/if}
+		{@const parameterExposeButton = narrowWidgetProps(component.props, "ParameterExposeButton")}
+		{#if parameterExposeButton}
+			<ParameterExposeButton {...exclude(parameterExposeButton)} action={() => updateLayout(index, undefined)} />
+		{/if}
+		{@const iconButton = narrowWidgetProps(component.props, "IconButton")}
+		{#if iconButton}
+			<IconButton {...exclude(iconButton)} action={() => updateLayout(index, undefined)} sharpRightCorners={nextIsSuffix} />
+		{/if}
+		{@const iconLabel = narrowWidgetProps(component.props, "IconLabel")}
+		{#if iconLabel}
+			<IconLabel {...exclude(iconLabel)} />
+		{/if}
+		{@const layerReferenceInput = narrowWidgetProps(component.props, "LayerReferenceInput")}
+		{#if layerReferenceInput}
+			<LayerReferenceInput {...exclude(layerReferenceInput)} on:value={({ detail }) => updateLayout(index, detail)} />
+		{/if}
+		{@const numberInput = narrowWidgetProps(component.props, "NumberInput")}
+		{#if numberInput}
 			<NumberInput
-				v-if="component.props.kind === 'NumberInput'"
-				v-bind="component.props"
-				@update:value="debouncer((value: number) => updateLayout(index, value)).updateValue"
-				:incrementCallbackIncrease="() => updateLayout(index, 'Increment')"
-				:incrementCallbackDecrease="() => updateLayout(index, 'Decrement')"
-				:sharpRightCorners="nextIsSuffix"
+				{...exclude(numberInput)}
+				on:value={({ detail }) => debouncer((value) => updateLayout(index, value)).updateValue(detail)}
+				incrementCallbackIncrease={() => updateLayout(index, "Increment")}
+				incrementCallbackDecrease={() => updateLayout(index, "Decrement")}
+				sharpRightCorners={nextIsSuffix}
 			/>
-			<OptionalInput v-if="component.props.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(index, value)" />
-			<PivotAssist v-if="component.props.kind === 'PivotAssist'" v-bind="component.props" @update:position="(value: string) => updateLayout(index, value)" />
-			<PopoverButton v-if="component.props.kind === 'PopoverButton'" v-bind="component.props">
-				<TextLabel :bold="true">{{ (component.props as any).header }}</TextLabel>
-				<TextLabel :multiline="true">{{ (component.props as any).text }}</TextLabel>
+		{/if}
+		{@const optionalInput = narrowWidgetProps(component.props, "OptionalInput")}
+		{#if optionalInput}
+			<OptionalInput {...exclude(optionalInput)} on:checked={({ detail }) => updateLayout(index, detail)} />
+		{/if}
+		{@const pivotAssist = narrowWidgetProps(component.props, "PivotAssist")}
+		{#if pivotAssist}
+			<PivotAssist {...exclude(pivotAssist)} on:position={({ detail }) => updateLayout(index, detail)} />
+		{/if}
+		{@const popoverButton = narrowWidgetProps(component.props, "PopoverButton")}
+		{#if popoverButton}
+			<PopoverButton {...exclude(popoverButton, ["header", "text"])}>
+				<TextLabel bold={true}>{popoverButton.header}</TextLabel>
+				<TextLabel multiline={true}>{popoverButton.text}</TextLabel>
 			</PopoverButton>
-			<RadioInput v-if="component.props.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(index, value)" :sharpRightCorners="nextIsSuffix" />
-			<Separator v-if="component.props.kind === 'Separator'" v-bind="component.props" />
-			<SwatchPairInput v-if="component.props.kind === 'SwatchPairInput'" v-bind="component.props" />
-			<TextAreaInput v-if="component.props.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(index, value)" />
-			<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(index, undefined)" :sharpRightCorners="nextIsSuffix" />
-			<BreadcrumbTrailButtons v-if="component.props.kind === 'BreadcrumbTrailButtons'" v-bind="component.props" :action="(index: number) => updateLayout(index, index)" />
-			<TextInput v-if="component.props.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(index, value)" :sharpRightCorners="nextIsSuffix" />
-			<TextLabel v-if="component.props.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ (component.props as any).value }}</TextLabel>
-		</template>
-	</div>
-</template>
+		{/if}
+		{@const radioInput = narrowWidgetProps(component.props, "RadioInput")}
+		{#if radioInput}
+			<RadioInput {...exclude(radioInput)} on:selectedIndex={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} />
+		{/if}
+		{@const separator = narrowWidgetProps(component.props, "Separator")}
+		{#if separator}
+			<Separator {...exclude(separator)} />
+		{/if}
+		{@const swatchPairInput = narrowWidgetProps(component.props, "SwatchPairInput")}
+		{#if swatchPairInput}
+			<SwatchPairInput {...exclude(swatchPairInput)} />
+		{/if}
+		{@const textAreaInput = narrowWidgetProps(component.props, "TextAreaInput")}
+		{#if textAreaInput}
+			<TextAreaInput {...exclude(textAreaInput)} on:commitText={({ detail }) => updateLayout(index, detail)} />
+		{/if}
+		{@const textButton = narrowWidgetProps(component.props, "TextButton")}
+		{#if textButton}
+			<TextButton {...exclude(textButton)} action={() => updateLayout(index, undefined)} sharpRightCorners={nextIsSuffix} />
+		{/if}
+		{@const breadcrumbTrailButtons = narrowWidgetProps(component.props, "BreadcrumbTrailButtons")}
+		{#if breadcrumbTrailButtons}
+			<BreadcrumbTrailButtons {...exclude(breadcrumbTrailButtons)} action={(index) => updateLayout(index, index)} />
+		{/if}
+		{@const textInput = narrowWidgetProps(component.props, "TextInput")}
+		{#if textInput}
+			<TextInput {...exclude(textInput)} on:commitText={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} />
+		{/if}
+		{@const textLabel = narrowWidgetProps(component.props, "TextLabel")}
+		{#if textLabel}
+			<TextLabel {...exclude(textLabel, ["value"])}>{textLabel.value}</TextLabel>
+		{/if}
+	{/each}
+</div>
 
-<style lang="scss">
-.widget-column {
-	flex: 0 0 auto;
-	display: flex;
-	flex-direction: column;
-}
-
-.widget-row {
-	flex: 0 0 auto;
-	display: flex;
-	min-height: 32px;
-
-	> * {
-		--widget-height: 24px;
-		margin: calc((24px - var(--widget-height)) / 2 + 4px) 0;
-		min-height: var(--widget-height);
-
-		&:not(.multiline) {
-			line-height: var(--widget-height);
-		}
-
-		&.icon-label.size-12 {
-			--widget-height: 12px;
-		}
-
-		&.icon-label.size-16 {
-			--widget-height: 16px;
-		}
+<style lang="scss" global>
+	.widget-column {
+		flex: 0 0 auto;
+		display: flex;
+		flex-direction: column;
 	}
 
-	// TODO: Target this in a better way than using the tooltip, which will break if changed, or when localized/translated
-	.checkbox-input [title="Preserve Aspect Ratio"] {
-		margin-bottom: -32px;
-		position: relative;
+	.widget-row {
+		flex: 0 0 auto;
+		display: flex;
+		min-height: 32px;
 
-		&::before,
-		&::after {
-			content: "";
-			pointer-events: none;
-			position: absolute;
-			left: 8px;
-			width: 1px;
-			height: 16px;
-			background: var(--color-7-middlegray);
+		> * {
+			--widget-height: 24px;
+			margin: calc((24px - var(--widget-height)) / 2 + 4px) 0;
+			min-height: var(--widget-height);
+
+			&:not(.multiline) {
+				line-height: var(--widget-height);
+			}
+
+			&.icon-label.size-12 {
+				--widget-height: 12px;
+			}
+
+			&.icon-label.size-16 {
+				--widget-height: 16px;
+			}
 		}
 
-		&::before {
-			top: calc(-4px - 16px);
-		}
+		// TODO: Target this in a better way than using the tooltip, which will break if changed, or when localized/translated
+		.checkbox-input [title="Preserve Aspect Ratio"] {
+			margin-bottom: -32px;
+			position: relative;
 
-		&::after {
-			bottom: calc(-4px - 16px);
+			&::before,
+			&::after {
+				content: "";
+				pointer-events: none;
+				position: absolute;
+				left: 8px;
+				width: 1px;
+				height: 16px;
+				background: var(--color-7-middlegray);
+			}
+
+			&::before {
+				top: calc(-4px - 16px);
+			}
+
+			&::after {
+				bottom: calc(-4px - 16px);
+			}
 		}
 	}
-}
 </style>

frontend/src/components/widgets/assists/PivotAssist.svelte

@@ -1,122 +1,116 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import { type PivotPosition } from "@/wasm-communication/messages";
+	import { type PivotPosition } from "@/wasm-communication/messages";
 
-export default defineComponent({
-	emits: ["update:position"],
-	props: {
-		position: { type: String as PropType<string>, required: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-	},
-	methods: {
-		setPosition(newPosition: PivotPosition) {
-			this.$emit("update:position", newPosition);
-		},
-	},
-});
+	// emits: ["update:position"],
+	const dispatch = createEventDispatcher<{ position: PivotPosition }>();
+
+	export let position: string;
+	export let disabled = false;
+
+	function setPosition(newPosition: PivotPosition) {
+		dispatch("position", newPosition);
+	}
 </script>
 
-<template>
-	<div class="pivot-assist" :class="{ disabled }">
-		<button @click="setPosition('TopLeft')" class="row-1 col-1" :class="{ active: position === 'TopLeft' }" tabindex="-1" :disabled="disabled"><div></div></button>
-		<button @click="setPosition('TopCenter')" class="row-1 col-2" :class="{ active: position === 'TopCenter' }" tabindex="-1" :disabled="disabled"><div></div></button>
-		<button @click="setPosition('TopRight')" class="row-1 col-3" :class="{ active: position === 'TopRight' }" tabindex="-1" :disabled="disabled"><div></div></button>
-		<button @click="setPosition('CenterLeft')" class="row-2 col-1" :class="{ active: position === 'CenterLeft' }" tabindex="-1" :disabled="disabled"><div></div></button>
-		<button @click="setPosition('Center')" class="row-2 col-2" :class="{ active: position === 'Center' }" tabindex="-1" :disabled="disabled"><div></div></button>
-		<button @click="setPosition('CenterRight')" class="row-2 col-3" :class="{ active: position === 'CenterRight' }" tabindex="-1" :disabled="disabled"><div></div></button>
-		<button @click="setPosition('BottomLeft')" class="row-3 col-1" :class="{ active: position === 'BottomLeft' }" tabindex="-1" :disabled="disabled"><div></div></button>
-		<button @click="setPosition('BottomCenter')" class="row-3 col-2" :class="{ active: position === 'BottomCenter' }" tabindex="-1" :disabled="disabled"><div></div></button>
-		<button @click="setPosition('BottomRight')" class="row-3 col-3" :class="{ active: position === 'BottomRight' }" tabindex="-1" :disabled="disabled"><div></div></button>
-	</div>
-</template>
+<div class="pivot-assist" class:disabled>
+	<button on:click={() => setPosition("TopLeft")} class="row-1 col-1" class:active={position === "TopLeft"} tabindex="-1" {disabled}><div /></button>
+	<button on:click={() => setPosition("TopCenter")} class="row-1 col-2" class:active={position === "TopCenter"} tabindex="-1" {disabled}><div /></button>
+	<button on:click={() => setPosition("TopRight")} class="row-1 col-3" class:active={position === "TopRight"} tabindex="-1" {disabled}><div /></button>
+	<button on:click={() => setPosition("CenterLeft")} class="row-2 col-1" class:active={position === "CenterLeft"} tabindex="-1" {disabled}><div /></button>
+	<button on:click={() => setPosition("Center")} class="row-2 col-2" class:active={position === "Center"} tabindex="-1" {disabled}><div /></button>
+	<button on:click={() => setPosition("CenterRight")} class="row-2 col-3" class:active={position === "CenterRight"} tabindex="-1" {disabled}><div /></button>
+	<button on:click={() => setPosition("BottomLeft")} class="row-3 col-1" class:active={position === "BottomLeft"} tabindex="-1" {disabled}><div /></button>
+	<button on:click={() => setPosition("BottomCenter")} class="row-3 col-2" class:active={position === "BottomCenter"} tabindex="-1" {disabled}><div /></button>
+	<button on:click={() => setPosition("BottomRight")} class="row-3 col-3" class:active={position === "BottomRight"} tabindex="-1" {disabled}><div /></button>
+</div>
 
-<style lang="scss">
-.pivot-assist {
-	position: relative;
-	flex: 0 0 auto;
-	width: 24px;
-	height: 24px;
-	--pivot-border-color: var(--color-5-dullgray);
-	--pivot-fill-active: var(--color-e-nearwhite);
+<style lang="scss" global>
+	.pivot-assist {
+		position: relative;
+		flex: 0 0 auto;
+		width: 24px;
+		height: 24px;
+		--pivot-border-color: var(--color-5-dullgray);
+		--pivot-fill-active: var(--color-e-nearwhite);
 
-	button {
-		position: absolute;
-		width: 5px;
-		height: 5px;
-		margin: 0;
-		padding: 0;
-		background: var(--color-1-nearblack);
-		border: 1px solid var(--pivot-border-color);
+		button {
+			position: absolute;
+			width: 5px;
+			height: 5px;
+			margin: 0;
+			padding: 0;
+			background: var(--color-1-nearblack);
+			border: 1px solid var(--pivot-border-color);
 
-		&.active {
+			&.active {
+				border-color: transparent;
+				background: var(--pivot-fill-active);
+			}
+
+			&.col-1::before,
+			&.col-2::before {
+				content: "";
+				pointer-events: none;
+				width: 2px;
+				height: 0;
+				border-top: 1px solid var(--pivot-border-color);
+				position: absolute;
+				top: 1px;
+				right: -3px;
+			}
+
+			&.row-1::after,
+			&.row-2::after {
+				content: "";
+				pointer-events: none;
+				width: 0;
+				height: 2px;
+				border-left: 1px solid var(--pivot-border-color);
+				position: absolute;
+				bottom: -3px;
+				right: 1px;
+			}
+
+			&.row-1 {
+				top: 3px;
+			}
+			&.col-1 {
+				left: 3px;
+			}
+
+			&.row-2 {
+				top: 10px;
+			}
+			&.col-2 {
+				left: 10px;
+			}
+
+			&.row-3 {
+				top: 17px;
+			}
+			&.col-3 {
+				left: 17px;
+			}
+
+			// Click targets that extend 1px beyond the borders of each square
+			div {
+				width: 100%;
+				height: 100%;
+				padding: 2px;
+				margin: -2px;
+			}
+		}
+
+		&:not(.disabled) button:not(.active):hover {
 			border-color: transparent;
-			background: var(--pivot-fill-active);
+			background: var(--color-6-lowergray);
 		}
 
-		&.col-1::before,
-		&.col-2::before {
-			content: "";
-			pointer-events: none;
-			width: 2px;
-			height: 0;
-			border-top: 1px solid var(--pivot-border-color);
-			position: absolute;
-			top: 1px;
-			right: -3px;
-		}
-
-		&.row-1::after,
-		&.row-2::after {
-			content: "";
-			pointer-events: none;
-			width: 0;
-			height: 2px;
-			border-left: 1px solid var(--pivot-border-color);
-			position: absolute;
-			bottom: -3px;
-			right: 1px;
-		}
-
-		&.row-1 {
-			top: 3px;
-		}
-		&.col-1 {
-			left: 3px;
-		}
-
-		&.row-2 {
-			top: 10px;
-		}
-		&.col-2 {
-			left: 10px;
-		}
-
-		&.row-3 {
-			top: 17px;
-		}
-		&.col-3 {
-			left: 17px;
-		}
-
-		// Click targets that extend 1px beyond the borders of each square
-		div {
-			width: 100%;
-			height: 100%;
-			padding: 2px;
-			margin: -2px;
+		&.disabled button {
+			--pivot-border-color: var(--color-4-dimgray);
+			--pivot-fill-active: var(--color-8-uppergray);
 		}
 	}
-
-	&:not(.disabled) button:not(.active):hover {
-		border-color: transparent;
-		background: var(--color-6-lowergray);
-	}
-
-	&.disabled button {
-		--pivot-border-color: var(--color-4-dimgray);
-		--pivot-fill-active: var(--color-8-uppergray);
-	}
-}
 </style>
-

frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte

@@ -1,81 +1,63 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import TextButton from "@/components/widgets/buttons/TextButton.vue";
-
-export default defineComponent({
-	props: {
-		labels: { type: Array as PropType<string[]>, required: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-
-		// Callbacks
-		action: { type: Function as PropType<(index: number) => void>, required: true },
-	},
-	components: {
-		LayoutRow,
-		TextButton,
-	},
-});
+	export let labels: string[];
+	export let disabled = false;
+	export let tooltip: string | undefined = undefined;
+	// Callbacks
+	export let action: (index: number) => void;
 </script>
 
-<template>
-	<LayoutRow class="breadcrumb-trail-buttons" :title="tooltip">
-		<TextButton
-			v-for="(label, index) in labels"
-			:key="index"
-			:label="label"
-			:emphasized="index === labels.length - 1"
-			:disabled="disabled"
-			:action="() => !disabled && index !== labels.length - 1 && action(index)"
-		/>
-	</LayoutRow>
-</template>
+<LayoutRow class="breadcrumb-trail-buttons" {tooltip}>
+	{#each labels as label, index (index)}
+		<TextButton {label} emphasized={index === labels.length - 1} {disabled} action={() => !disabled && index !== labels.length - 1 && action(index)} />
+	{/each}
+</LayoutRow>
 
-<style lang="scss">
-.breadcrumb-trail-buttons {
-	.text-button {
-		position: relative;
+<style lang="scss" global>
+	.breadcrumb-trail-buttons {
+		.text-button {
+			position: relative;
 
-		&:not(:first-of-type) {
-			border-top-left-radius: 0;
-			border-bottom-left-radius: 0;
+			&:not(:first-of-type) {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
 
-			&::before {
-				content: "";
-				position: absolute;
-				top: 0;
-				left: -4px;
-				width: 0;
-				height: 0;
-				border-style: solid;
-				border-width: 12px 0 12px 4px;
-				border-color: var(--button-background-color) var(--button-background-color) var(--button-background-color) transparent;
+				&::before {
+					content: "";
+					position: absolute;
+					top: 0;
+					left: -4px;
+					width: 0;
+					height: 0;
+					border-style: solid;
+					border-width: 12px 0 12px 4px;
+					border-color: var(--button-background-color) var(--button-background-color) var(--button-background-color) transparent;
+				}
 			}
-		}
 
-		&:not(:last-of-type) {
-			border-top-right-radius: 0;
-			border-bottom-right-radius: 0;
+			&:not(:last-of-type) {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
 
-			&::after {
-				content: "";
-				position: absolute;
-				top: 0;
-				right: -4px;
-				width: 0;
-				height: 0;
-				border-style: solid;
-				border-width: 12px 0 12px 4px;
-				border-color: transparent transparent transparent var(--button-background-color);
+				&::after {
+					content: "";
+					position: absolute;
+					top: 0;
+					right: -4px;
+					width: 0;
+					height: 0;
+					border-style: solid;
+					border-width: 12px 0 12px 4px;
+					border-color: transparent transparent transparent var(--button-background-color);
+				}
 			}
-		}
 
-		&:last-of-type {
-			// Make this non-functional button not change color on hover
-			pointer-events: none;
+			&:last-of-type {
+				// Make this non-functional button not change color on hover
+				pointer-events: none;
+			}
 		}
 	}
-}
 </style>

frontend/src/components/widgets/buttons/IconButton.svelte

@@ -1,103 +1,104 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { type IconName, type IconSize } from "@/utility-functions/icons";
 
-import { type IconName, type IconSize } from "@/utility-functions/icons";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
 
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+	export let icon: IconName;
+	export let size: IconSize;
+	export let disabled = false;
+	export let active = false;
+	export let tooltip: string | undefined = undefined;
+	export let sharpRightCorners = false;
+	// Callbacks
+	export let action: (e?: MouseEvent) => void;
 
-export default defineComponent({
-	props: {
-		icon: { type: String as PropType<IconName>, required: true },
-		size: { type: Number as PropType<IconSize>, required: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		active: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
+	let className = "";
+	export { className as class };
+	export let classes: Record<string, boolean> = {};
 
-		// Callbacks
-		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
-	},
-	components: { IconLabel },
-});
+	$: extraClasses = Object.entries(classes)
+		.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
+		.join(" ");
 </script>
 
-<template>
-	<button
-		class="icon-button"
-		:class="[`size-${size}`, { disabled, active, 'sharp-right-corners': sharpRightCorners }]"
-		@click="(e: MouseEvent) => action(e)"
-		:disabled="disabled"
-		:title="tooltip"
-		:tabindex="active ? -1 : 0"
-	>
-		<IconLabel :icon="icon" />
-	</button>
-</template>
+<button
+	class={`icon-button size-${size} ${className} ${extraClasses}`.trim()}
+	class:disabled
+	class:active
+	class:sharp-right-corners={sharpRightCorners}
+	on:click={action}
+	{disabled}
+	title={tooltip}
+	tabindex={active ? -1 : 0}
+	{...$$restProps}
+>
+	<IconLabel {icon} />
+</button>
 
-<style lang="scss">
-.icon-button {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex: 0 0 auto;
-	margin: 0;
-	padding: 0;
-	border: none;
-	border-radius: 2px;
-	background: none;
-
-	svg {
-		fill: var(--color-e-nearwhite);
-	}
-
-	// The `where` pseudo-class does not contribtue to specificity
-	& + :where(.icon-button) {
-		margin-left: 0;
-	}
-
-	&:hover {
-		background: var(--color-6-lowergray);
-		color: var(--color-f-white);
-
-		svg {
-			fill: var(--color-f-white);
-		}
-	}
-
-	&.disabled {
+<style lang="scss" global>
+	.icon-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex: 0 0 auto;
+		margin: 0;
+		padding: 0;
+		border: none;
+		border-radius: 2px;
 		background: none;
 
 		svg {
-			fill: var(--color-8-uppergray);
+			fill: var(--color-e-nearwhite);
+		}
+
+		// The `where` pseudo-class does not contribtue to specificity
+		& + :where(.icon-button) {
+			margin-left: 0;
+		}
+
+		&:hover {
+			background: var(--color-6-lowergray);
+			color: var(--color-f-white);
+
+			svg {
+				fill: var(--color-f-white);
+			}
+		}
+
+		&.disabled {
+			background: none;
+
+			svg {
+				fill: var(--color-8-uppergray);
+			}
+		}
+
+		&.active {
+			background: var(--color-e-nearwhite);
+
+			svg {
+				fill: var(--color-2-mildblack);
+			}
+		}
+
+		&.size-12 {
+			width: 12px;
+			height: 12px;
+		}
+
+		&.size-16 {
+			width: 16px;
+			height: 16px;
+		}
+
+		&.size-24 {
+			width: 24px;
+			height: 24px;
+		}
+
+		&.size-32 {
+			width: 32px;
+			height: 32px;
 		}
 	}
-
-	&.active {
-		background: var(--color-e-nearwhite);
-
-		svg {
-			fill: var(--color-2-mildblack);
-		}
-	}
-
-	&.size-12 {
-		width: 12px;
-		height: 12px;
-	}
-
-	&.size-16 {
-		width: 16px;
-		height: 16px;
-	}
-
-	&.size-24 {
-		width: 24px;
-		height: 24px;
-	}
-
-	&.size-32 {
-		width: 32px;
-		height: 32px;
-	}
-}
 </style>

frontend/src/components/widgets/buttons/ParameterExposeButton.svelte

@@ -1,59 +1,49 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-
-export default defineComponent({
-	props: {
-		exposed: { type: Boolean as PropType<boolean>, required: true },
-		dataType: { type: String as PropType<string>, required: true },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-
-		// Callbacks
-		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
-	},
-	components: { LayoutRow },
-});
+	export let exposed: boolean;
+	export let dataType: string;
+	export let tooltip: string | undefined = undefined;
+	// Callbacks
+	export let action: (e?: MouseEvent) => void;
 </script>
 
-<template>
-	<LayoutRow class="parameter-expose-button">
-		<button :class="{ exposed }" :style="{ '--data-type-color': `var(--color-data-${dataType})` }" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="0"></button>
-	</LayoutRow>
-</template>
+<LayoutRow class="parameter-expose-button">
+	<button class:exposed style:--data-type-color={`var(--color-data-${dataType})`} on:click={action} title={tooltip} tabindex="0" />
+</LayoutRow>
 
-<style lang="scss">
-.parameter-expose-button {
-	display: flex;
-	align-items: center;
-	flex: 0 0 auto;
-	max-height: 24px;
-
-	button {
+<style lang="scss" global>
+	.parameter-expose-button {
+		display: flex;
+		align-items: center;
 		flex: 0 0 auto;
-		width: 8px;
-		height: 8px;
-		margin: 0;
-		padding: 0;
-		border: none;
-		border-radius: 50%;
+		max-height: 24px;
 
-		&:not(.exposed) {
-			background: none;
-			border: 1px solid var(--data-type-color);
+		button {
+			flex: 0 0 auto;
+			width: 8px;
+			height: 8px;
+			margin: 0;
+			padding: 0;
+			border: none;
+			border-radius: 50%;
 
-			&:hover {
-				background: var(--color-6-lowergray);
+			&:not(.exposed) {
+				background: none;
+				border: 1px solid var(--data-type-color);
+
+				&:hover {
+					background: var(--color-6-lowergray);
+				}
 			}
-		}
 
-		&.exposed {
-			background: var(--data-type-color);
+			&.exposed {
+				background: var(--data-type-color);
 
-			&:hover {
-				border: 1px solid var(--color-f-white);
+				&:hover {
+					border: 1px solid var(--color-f-white);
+				}
 			}
 		}
 	}
-}
 </style>

frontend/src/components/widgets/buttons/PopoverButton.svelte

@@ -1,90 +1,71 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { type IconName } from "@/utility-functions/icons";
 
-import { type IconName } from "@/utility-functions/icons";
+	import FloatingMenu from "@/components/layout/FloatingMenu.svelte";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
 
-import FloatingMenu from "@/components/layout/FloatingMenu.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconButton from "@/components/widgets/buttons/IconButton.vue";
+	export let icon: IconName = "DropdownArrow";
+	export let tooltip: string | undefined = undefined;
+	export let disabled = false;
+	// Callbacks
+	export let action: (() => void) | undefined = undefined;
 
-export default defineComponent({
-	props: {
-		icon: { type: String as PropType<IconName>, default: "DropdownArrow" },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
+	let open = false;
 
-		// Callbacks
-		action: { type: Function as PropType<() => void>, required: false },
-	},
-	data() {
-		return {
-			open: false,
-		};
-	},
-	methods: {
-		onClick() {
-			this.open = true;
-
-			this.action?.();
-		},
-	},
-	components: {
-		FloatingMenu,
-		IconButton,
-		LayoutRow,
-	},
-});
+	function onClick() {
+		open = true;
+		action?.();
+	}
 </script>
 
-<template>
-	<LayoutRow class="popover-button">
-		<IconButton :class="{ open }" :disabled="disabled" :action="() => onClick()" :icon="icon" :size="16" data-floating-menu-spawner :tooltip="tooltip" />
-		<FloatingMenu v-model:open="open" :type="'Popover'" :direction="'Bottom'">
-			<slot></slot>
-		</FloatingMenu>
-	</LayoutRow>
-</template>
+<LayoutRow class="popover-button">
+	<IconButton classes={{ open }} {disabled} action={() => onClick()} icon={icon || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
+	<FloatingMenu {open} on:open={({ detail }) => (open = detail)} type="Popover" direction="Bottom">
+		<slot />
+	</FloatingMenu>
+</LayoutRow>
 
-<style lang="scss">
-.popover-button {
-	position: relative;
-	width: 16px;
-	height: 24px;
-	flex: 0 0 auto;
+<style lang="scss" global>
+	.popover-button {
+		position: relative;
+		width: 16px;
+		height: 24px;
+		flex: 0 0 auto;
 
-	.floating-menu {
-		left: 50%;
-		bottom: 0;
-	}
-
-	.icon-button {
-		width: 100%;
-		height: 100%;
-		padding: 0;
-		border: none;
-		border-radius: 2px;
-		background: var(--color-1-nearblack);
-		fill: var(--color-e-nearwhite);
-
-		&:hover,
-		&.open {
-			background: var(--color-6-lowergray);
-			fill: var(--color-f-white);
+		.floating-menu {
+			left: 50%;
+			bottom: 0;
 		}
 
-		&.disabled {
-			background: var(--color-2-mildblack);
-			fill: var(--color-8-uppergray);
+		.icon-button.icon-button {
+			width: 100%;
+			height: 100%;
+			padding: 0;
+			border: none;
+			border-radius: 2px;
+			background: var(--color-1-nearblack);
+			fill: var(--color-e-nearwhite);
+
+			&:hover,
+			&.open {
+				background: var(--color-6-lowergray);
+				fill: var(--color-f-white);
+			}
+
+			&.disabled {
+				background: var(--color-2-mildblack);
+				fill: var(--color-8-uppergray);
+			}
+		}
+
+		// TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last
+		div[class*="-input"] + & {
+			margin-left: 1px;
+
+			.icon-button {
+				border-radius: 0 2px 2px 0;
+			}
 		}
 	}
-
-	// TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last
-	div[class*="-input"] + & {
-		margin-left: 1px;
-
-		.icon-button {
-			border-radius: 0 2px 2px 0;
-		}
-	}
-}
 </style>

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -1,99 +1,92 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { type IconName } from "@/utility-functions/icons";
 
-import { type IconName } from "@/utility-functions/icons";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
 
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	export let label: string;
+	export let icon: IconName | undefined = undefined;
+	export let emphasized: boolean = false;
+	export let minWidth: number = 0;
+	export let disabled: boolean = false;
+	export let tooltip: string | undefined = undefined;
+	export let sharpRightCorners: boolean = false;
 
-export default defineComponent({
-	props: {
-		label: { type: String as PropType<string>, required: true },
-		icon: { type: String as PropType<IconName | undefined>, required: false },
-		emphasized: { type: Boolean as PropType<boolean>, default: false },
-		minWidth: { type: Number as PropType<number>, default: 0 },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
-
-		// Callbacks
-		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
-	},
-	components: {
-		IconLabel,
-		TextLabel,
-	},
-});
+	// Callbacks
+	// TODO: Replace this with an event binding (and on other components that do this)
+	export let action: (e: MouseEvent) => void;
 </script>
 
-<template>
-	<button
-		class="text-button"
-		:class="{ emphasized, disabled, 'sharp-right-corners': sharpRightCorners }"
-		:data-emphasized="emphasized || undefined"
-		:data-disabled="disabled || undefined"
-		data-text-button
-		:title="tooltip"
-		:style="{ 'min-width': minWidth > 0 ? `${minWidth}px` : undefined }"
-		@click="(e: MouseEvent) => action(e)"
-		:tabindex="disabled ? -1 : 0"
-	>
-		<IconLabel v-if="icon" :icon="icon" />
-		<TextLabel>{{ label }}</TextLabel>
-	</button>
-</template>
+<button
+	class="text-button"
+	class:emphasized
+	class:disabled
+	class:sharp-right-corners={sharpRightCorners}
+	style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
+	title={tooltip}
+	data-emphasized={emphasized || undefined}
+	data-disabled={disabled || undefined}
+	data-text-button
+	tabindex={disabled ? -1 : 0}
+	on:click={action}
+>
+	{#if icon}
+		<IconLabel {icon} />
+	{/if}
+	<TextLabel>{label}</TextLabel>
+</button>
 
-<style lang="scss">
-.text-button {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex: 0 0 auto;
-	height: 24px;
-	margin: 0;
-	padding: 0 8px;
-	box-sizing: border-box;
-	border: none;
-	border-radius: 2px;
-	background: var(--button-background-color);
-	color: var(--button-text-color);
-	--button-background-color: var(--color-5-dullgray);
-	--button-text-color: var(--color-e-nearwhite);
-
-	&:hover {
-		--button-background-color: var(--color-6-lowergray);
-		--button-text-color: var(--color-f-white);
-	}
-
-	&.disabled {
-		--button-background-color: var(--color-4-dimgray);
-		--button-text-color: var(--color-8-uppergray);
-	}
-
-	&.emphasized {
-		--button-background-color: var(--color-e-nearwhite);
-		--button-text-color: var(--color-2-mildblack);
+<style lang="scss" global>
+	.text-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex: 0 0 auto;
+		height: 24px;
+		margin: 0;
+		padding: 0 8px;
+		box-sizing: border-box;
+		border: none;
+		border-radius: 2px;
+		background: var(--button-background-color);
+		color: var(--button-text-color);
+		--button-background-color: var(--color-5-dullgray);
+		--button-text-color: var(--color-e-nearwhite);
 
 		&:hover {
-			--button-background-color: var(--color-f-white);
+			--button-background-color: var(--color-6-lowergray);
+			--button-text-color: var(--color-f-white);
 		}
 
 		&.disabled {
-			--button-background-color: var(--color-8-uppergray);
+			--button-background-color: var(--color-4-dimgray);
+			--button-text-color: var(--color-8-uppergray);
+		}
+
+		&.emphasized {
+			--button-background-color: var(--color-e-nearwhite);
+			--button-text-color: var(--color-2-mildblack);
+
+			&:hover {
+				--button-background-color: var(--color-f-white);
+			}
+
+			&.disabled {
+				--button-background-color: var(--color-8-uppergray);
+			}
+		}
+
+		& + .text-button {
+			margin-left: 8px;
+		}
+
+		.icon-label {
+			position: relative;
+			left: -4px;
+		}
+
+		.text-label {
+			overflow: hidden;
 		}
 	}
-
-	& + .text-button {
-		margin-left: 8px;
-	}
-
-	.icon-label {
-		position: relative;
-		left: -4px;
-	}
-
-	.text-label {
-		overflow: hidden;
-	}
-}
 </style>

frontend/src/components/widgets/debounce.ts

@@ -1,31 +0,0 @@
-export type Debouncer = ReturnType<typeof debouncer>;
-
-export type DebouncerOptions = {
-	debounceTime: number;
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function debouncer<T>(callFn: (value: T) => unknown, { debounceTime = 60 }: Partial<DebouncerOptions> = {}) {
-	let currentValue: T | undefined;
-
-	const emitValue = (): void => {
-		if (currentValue === undefined) {
-			throw new Error("Tried to emit undefined value from debouncer. This should never be possible");
-		}
-		const emittingValue = currentValue;
-		currentValue = undefined;
-		callFn(emittingValue);
-	};
-
-	const updateValue = (newValue: T): void => {
-		if (currentValue !== undefined) {
-			currentValue = newValue;
-			return;
-		}
-
-		currentValue = newValue;
-		setTimeout(emitValue, debounceTime);
-	};
-
-	return { updateValue };
-}

frontend/src/components/widgets/groups/WidgetSection.svelte

@@ -1,165 +1,147 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { isWidgetRow, isWidgetSection, type LayoutGroup, type WidgetSection as WidgetSectionFromJsMessages } from "@/wasm-communication/messages";
 
-import { isWidgetRow, isWidgetSection, type LayoutGroup, type WidgetSection as WidgetSectionFromJsMessages } from "@/wasm-communication/messages";
+	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import WidgetRow from "@/components/widgets/WidgetRow.svelte";
+	import { getContext } from "svelte";
+	import { type Editor } from "@/wasm-communication/editor";
 
-import LayoutCol from "@/components/layout/LayoutCol.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-import WidgetRow from "@/components/widgets/WidgetRow.vue";
+	const editor = getContext<Editor>("editor");
 
-const WidgetSection = defineComponent({
-	name: "WidgetSection",
-	inject: ["editor"],
-	props: {
-		widgetData: { type: Object as PropType<WidgetSectionFromJsMessages>, required: true },
-		layoutTarget: { required: true },
-	},
-	data: () => ({
-		isWidgetRow,
-		isWidgetSection,
-		expanded: true,
-	}),
-	methods: {
-		updateLayout(widgetId: bigint, value: unknown) {
-			this.editor.instance.updateLayout(this.layoutTarget, widgetId, value);
-		},
-		layoutGroupType(layoutGroup: LayoutGroup): unknown {
-			if (isWidgetRow(layoutGroup)) return WidgetRow;
-			if (isWidgetSection(layoutGroup)) return WidgetSection;
+	export let widgetData: WidgetSectionFromJsMessages;
+	export let layoutTarget: any; // TODO: Give type
 
-			throw new Error("Layout row type does not exist");
-		},
-	},
-	components: {
-		LayoutCol,
-		LayoutRow,
-		TextLabel,
-		WidgetRow,
-	},
-});
-export default WidgetSection;
+	let expanded = true;
 </script>
 
 <!-- TODO: Implement collapsable sections with properties system -->
-<template>
-	<LayoutCol class="widget-section">
-		<button class="header" :class="{ expanded }" @click.stop="() => (expanded = !expanded)" tabindex="0">
-			<div class="expand-arrow"></div>
-			<TextLabel :bold="true">{{ widgetData.name }}</TextLabel>
-		</button>
-		<LayoutCol class="body" v-if="expanded">
-			<component :is="layoutGroupType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layoutTarget" v-for="(layoutRow, index) in widgetData.layout" :key="index"></component>
+<LayoutCol class="widget-section">
+	<button class="header" class:expanded on:click|stopPropagation={() => (expanded = !expanded)} tabindex="0">
+		<div class="expand-arrow" />
+		<TextLabel bold={true}>{widgetData.name}</TextLabel>
+	</button>
+	{#if expanded}
+		<LayoutCol class="body">
+			{#each widgetData.layout as layoutGroup, index (index)}
+				{#if isWidgetRow(layoutGroup)}
+					<WidgetRow widgetData={layoutGroup} {layoutTarget} />
+				{:else if isWidgetSection(layoutGroup)}
+					<svelte:self widgetData={layoutGroup} {layoutTarget} />
+				{:else}
+					<span style="color: #d6536e">Error: The widget that belongs here has an invalid layout group type</span>
+				{/if}
+			{/each}
 		</LayoutCol>
-	</LayoutCol>
-</template>
+	{/if}
+</LayoutCol>
 
-<style lang="scss">
-.widget-section {
-	flex: 0 0 auto;
+<style lang="scss" global>
+	.widget-section {
+		flex: 0 0 auto;
 
-	.header {
-		text-align: left;
-		align-items: center;
-		display: flex;
-		flex: 0 0 24px;
-		padding: 0 8px;
-		margin-bottom: 4px;
-		border: 0;
-		border-radius: 4px;
-		background: var(--color-5-dullgray);
-
-		.expand-arrow {
-			width: 8px;
-			height: 8px;
-			margin: 0;
-			padding: 0;
-			position: relative;
-			flex: 0 0 auto;
-			display: flex;
+		.header {
+			text-align: left;
 			align-items: center;
-			justify-content: center;
+			display: flex;
+			flex: 0 0 24px;
+			padding: 0 8px;
+			margin-bottom: 4px;
+			border: 0;
+			border-radius: 4px;
+			background: var(--color-5-dullgray);
 
-			&::after {
-				content: "";
-				position: absolute;
+			.expand-arrow {
 				width: 8px;
 				height: 8px;
-				background: var(--icon-expand-collapse-arrow);
+				margin: 0;
+				padding: 0;
+				position: relative;
+				flex: 0 0 auto;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				&::after {
+					content: "";
+					position: absolute;
+					width: 8px;
+					height: 8px;
+					background: var(--icon-expand-collapse-arrow);
+				}
 			}
-		}
 
-		&.expanded {
-			border-radius: 4px 4px 0 0;
-			margin-bottom: 0;
+			&.expanded {
+				border-radius: 4px 4px 0 0;
+				margin-bottom: 0;
 
-			.expand-arrow::after {
-				transform: rotate(90deg);
-			}
-		}
-
-		.text-label {
-			height: 18px;
-			margin-left: 8px;
-			display: inline-block;
-		}
-
-		&:hover {
-			background: var(--color-6-lowergray);
-
-			.expand-arrow::after {
-				background: var(--icon-expand-collapse-arrow-hover);
+				.expand-arrow::after {
+					transform: rotate(90deg);
+				}
 			}
 
 			.text-label {
-				color: var(--color-f-white);
+				height: 18px;
+				margin-left: 8px;
+				display: inline-block;
 			}
 
-			+ .body {
-				border: 1px solid var(--color-6-lowergray);
+			&:hover {
+				background: var(--color-6-lowergray);
+
+				.expand-arrow::after {
+					background: var(--icon-expand-collapse-arrow-hover);
+				}
+
+				.text-label {
+					color: var(--color-f-white);
+				}
+
+				+ .body {
+					border: 1px solid var(--color-6-lowergray);
+				}
+			}
+		}
+
+		.body {
+			padding: 0 7px;
+			padding-top: 1px;
+			margin-top: -1px;
+			margin-bottom: 4px;
+			border: 1px solid var(--color-5-dullgray);
+			border-radius: 0 0 4px 4px;
+			overflow: hidden;
+
+			.widget-row {
+				&:first-child {
+					margin-top: calc(4px - 1px);
+				}
+
+				&:last-child {
+					margin-bottom: calc(4px - 1px);
+				}
+
+				> .text-button:first-child {
+					margin-left: 16px;
+				}
+
+				> .text-label:first-of-type {
+					flex: 0 0 25%;
+					margin-left: 16px;
+				}
+
+				> .parameter-expose-button ~ .text-label:first-of-type {
+					margin-left: 0;
+				}
+
+				> .text-button {
+					flex-grow: 1;
+				}
+
+				> .radio-input button {
+					flex: 1 1 100%;
+				}
 			}
 		}
 	}
-
-	.body {
-		padding: 0 7px;
-		padding-top: 1px;
-		margin-top: -1px;
-		margin-bottom: 4px;
-		border: 1px solid var(--color-5-dullgray);
-		border-radius: 0 0 4px 4px;
-		overflow: hidden;
-
-		.widget-row {
-			&:first-child {
-				margin-top: calc(4px - 1px);
-			}
-
-			&:last-child {
-				margin-bottom: calc(4px - 1px);
-			}
-
-			> .text-button:first-child {
-				margin-left: 16px;
-			}
-
-			> .text-label:first-of-type {
-				flex: 0 0 25%;
-				margin-left: 16px;
-			}
-
-			> .parameter-expose-button ~ .text-label:first-of-type {
-				margin-left: 0;
-			}
-
-			> .text-button {
-				flex-grow: 1;
-			}
-
-			> .radio-input button {
-				flex: 1 1 100%;
-			}
-		}
-	}
-}
 </style>

frontend/src/components/widgets/inputs/CheckboxInput.svelte

@@ -1,127 +1,109 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import { type IconName } from "@/utility-functions/icons";
+	import { type IconName } from "@/utility-functions/icons";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
 
-export default defineComponent({
-	emits: ["update:checked"],
-	props: {
-		checked: { type: Boolean as PropType<boolean>, default: false },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		icon: { type: String as PropType<IconName>, default: "Checkmark" },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-	},
-	data() {
-		return {
-			id: `${Math.random()}`.substring(2),
-		};
-	},
-	computed: {
-		displayIcon(): IconName {
-			if (!this.checked && this.icon === "Checkmark") return "Empty12px";
+	// emits: ["update:checked"],
+	const dispatch = createEventDispatcher<{ checked: boolean }>();
 
-			return this.icon;
-		},
-	},
-	methods: {
-		isChecked() {
-			return this.checked;
-		},
-		toggleCheckboxFromLabel(e: KeyboardEvent) {
-			const target = (e.target || undefined) as HTMLLabelElement | undefined;
-			const previousSibling = (target?.previousSibling || undefined) as HTMLInputElement | undefined;
-			previousSibling?.click();
-		},
-	},
-	components: {
-		IconLabel,
-		LayoutRow,
-	},
-});
+	export let checked = false;
+	export let disabled = false;
+	export let icon: IconName = "Checkmark";
+	export let tooltip: string | undefined = undefined;
+
+	let inputElement: HTMLInputElement;
+	let id = `${Math.random()}`.substring(2);
+
+	$: displayIcon = (!checked && icon === "Checkmark" ? "Empty12px" : icon) as IconName;
+
+	export function isChecked() {
+		return checked;
+	}
+
+	export function input(): HTMLInputElement {
+		return inputElement;
+	}
+
+	function toggleCheckboxFromLabel(e: KeyboardEvent) {
+		const target = (e.target || undefined) as HTMLLabelElement | undefined;
+		const previousSibling = (target?.previousSibling || undefined) as HTMLInputElement | undefined;
+		previousSibling?.click();
+	}
 </script>
 
-<template>
-	<LayoutRow class="checkbox-input">
-		<input
-			type="checkbox"
-			:id="`checkbox-input-${id}`"
-			:checked="checked"
-			@change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)"
-			:disabled="disabled"
-			:tabindex="disabled ? -1 : 0"
-		/>
-		<label :class="{ disabled, checked }" :for="`checkbox-input-${id}`" @keydown.enter="(e) => toggleCheckboxFromLabel(e)" :title="tooltip">
-			<LayoutRow class="checkbox-box">
-				<IconLabel :icon="displayIcon" />
-			</LayoutRow>
-		</label>
-	</LayoutRow>
-</template>
+<LayoutRow class="checkbox-input">
+	<input type="checkbox" id={`checkbox-input-${id}`} {checked} on:change={(e) => dispatch("checked", inputElement.checked)} {disabled} tabindex={disabled ? -1 : 0} bind:this={inputElement} />
+	<label class:disabled class:checked for={`checkbox-input-${id}`} on:keydown={(e) => e.key === "Enter" && toggleCheckboxFromLabel(e)} title={tooltip}>
+		<LayoutRow class="checkbox-box">
+			<IconLabel icon={displayIcon} />
+		</LayoutRow>
+	</label>
+</LayoutRow>
 
-<style lang="scss">
-.checkbox-input {
-	flex: 0 0 auto;
-	align-items: center;
+<style lang="scss" global>
+	.checkbox-input {
+		flex: 0 0 auto;
+		align-items: center;
 
-	input {
-		// We can't use `display: none` because it must be visible to work as a tabbale input that accepts a space bar actuation
-		width: 0;
-		height: 0;
-		margin: 0;
-		opacity: 0;
-	}
+		input {
+			// We can't use `display: none` because it must be visible to work as a tabbale input that accepts a space bar actuation
+			width: 0;
+			height: 0;
+			margin: 0;
+			opacity: 0;
+		}
 
-	// Unchecked
-	label {
-		display: flex;
-		height: 16px;
-		// Provides rounded corners for the :focus outline
-		border-radius: 2px;
-
-		.checkbox-box {
-			flex: 0 0 auto;
-			background: var(--color-5-dullgray);
-			padding: 2px;
+		// Unchecked
+		label {
+			display: flex;
+			height: 16px;
+			// Provides rounded corners for the :focus outline
 			border-radius: 2px;
 
-			.icon-label {
-				fill: var(--color-8-uppergray);
+			.checkbox-box {
+				flex: 0 0 auto;
+				background: var(--color-5-dullgray);
+				padding: 2px;
+				border-radius: 2px;
+
+				.icon-label {
+					fill: var(--color-8-uppergray);
+				}
+			}
+
+			// Hovered
+			&:hover .checkbox-box {
+				background: var(--color-6-lowergray);
+			}
+
+			// Disabled
+			&.disabled .checkbox-box {
+				background: var(--color-4-dimgray);
 			}
 		}
 
-		// Hovered
-		&:hover .checkbox-box {
-			background: var(--color-6-lowergray);
-		}
+		// Checked
+		input:checked + label {
+			.checkbox-box {
+				background: var(--color-e-nearwhite);
 
-		// Disabled
-		&.disabled .checkbox-box {
-			background: var(--color-4-dimgray);
-		}
-	}
+				.icon-label {
+					fill: var(--color-2-mildblack);
+				}
+			}
 
-	// Checked
-	input:checked + label {
-		.checkbox-box {
-			background: var(--color-e-nearwhite);
+			// Hovered
+			&:hover .checkbox-box {
+				background: var(--color-f-white);
+			}
 
-			.icon-label {
-				fill: var(--color-2-mildblack);
+			// Hovered
+			&.disabled .checkbox-box {
+				background: var(--color-8-uppergray);
 			}
 		}
-
-		// Hovered
-		&:hover .checkbox-box {
-			background: var(--color-f-white);
-		}
-
-		// Hovered
-		&.disabled .checkbox-box {
-			background: var(--color-8-uppergray);
-		}
 	}
-}
 </style>

frontend/src/components/widgets/inputs/ColorInput.svelte

@@ -1,133 +1,113 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import { Color } from "@/wasm-communication/messages";
+	import { Color } from "@/wasm-communication/messages";
 
-import ColorPicker from "@/components/floating-menus/ColorPicker.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	import ColorPicker from "@/components/floating-menus/ColorPicker.svelte";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
 
-export default defineComponent({
-	emits: ["update:value", "update:open"],
-	props: {
-		value: { type: Color as PropType<Color>, required: true },
-		noTransparency: { type: Boolean as PropType<boolean>, default: false }, // TODO: Rename to allowTransparency, also implement allowNone
-		disabled: { type: Boolean as PropType<boolean>, default: false }, // TODO: Design and implement
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
+	// emits: ["update:value"],
+	const dispatch = createEventDispatcher<{ value: Color }>();
 
-		// Bound through `v-model`
-		// TODO: See if this should be made to follow the pattern of DropdownInput.vue so this could be removed
-		open: { type: Boolean as PropType<boolean>, required: true },
-	},
-	data() {
-		return {
-			isOpen: false,
-		};
-	},
-	watch: {
-		// Called only when `open` is changed from outside this component (with v-model)
-		open(newOpen: boolean) {
-			this.isOpen = newOpen;
-		},
-		isOpen(newIsOpen: boolean) {
-			this.$emit("update:open", newIsOpen);
-		},
-	},
-	methods: {
-		colorPickerUpdated(color: Color) {
-			this.$emit("update:value", color);
-		},
-	},
-	computed: {
-		chip() {
-			return undefined;
-		},
-	},
-	components: {
-		ColorPicker,
-		LayoutRow,
-		TextLabel,
-	},
-});
+	let open = false;
+
+	export let value: Color;
+	export let noTransparency = false; // TODO: Rename to allowTransparency, also implement allowNone
+	export let disabled = false; // TODO: Design and implement
+	export let tooltip: string | undefined = undefined;
+	export let sharpRightCorners = false;
+
+	// TODO: Implement
+	$: chip = undefined;
 </script>
 
-<template>
-	<LayoutRow class="color-input" :class="{ 'sharp-right-corners': sharpRightCorners }" :title="tooltip">
-		<button
-			:class="{ none: value.none, 'sharp-right-corners': sharpRightCorners }"
-			:style="{ '--chosen-color': value.toHexOptionalAlpha() }"
-			@click="() => $emit('update:open', true)"
-			tabindex="0"
-			data-floating-menu-spawner
-		>
-			<TextLabel :bold="true" class="chip" v-if="chip">{{ chip }}</TextLabel>
-		</button>
-		<ColorPicker v-model:open="isOpen" :color="value" @update:color="(color: Color) => colorPickerUpdated(color)" :allowNone="true" />
-	</LayoutRow>
-</template>
+<LayoutRow class="color-input" classes={{ "sharp-right-corners": sharpRightCorners }} {tooltip}>
+	<button
+		class:none={value.none}
+		class:sharp-right-corners={sharpRightCorners}
+		style:--chosen-color={value.toHexOptionalAlpha()}
+		on:click={() => (open = true)}
+		tabindex="0"
+		data-floating-menu-spawner
+	>
+		{#if chip}
+			<TextLabel class="chip" bold={true}>{chip}</TextLabel>
+		{/if}
+	</button>
+	<ColorPicker
+		{open}
+		on:open={({ detail }) => (open = detail)}
+		color={value}
+		on:color={({ detail }) => {
+			value = detail;
+			dispatch("value", detail);
+		}}
+		allowNone={true}
+	/>
+</LayoutRow>
 
-<style lang="scss">
-.color-input {
-	box-sizing: border-box;
-	position: relative;
-	border: 1px solid var(--color-5-dullgray);
-	border-radius: 2px;
-	padding: 1px;
-
-	> button {
+<style lang="scss" global>
+	.color-input {
+		box-sizing: border-box;
 		position: relative;
-		overflow: hidden;
-		border: none;
-		margin: 0;
-		padding: 0;
-		width: 100%;
-		height: 100%;
-		border-radius: 1px;
+		border: 1px solid var(--color-5-dullgray);
+		border-radius: 2px;
+		padding: 1px;
 
-		&::before {
-			content: "";
-			position: absolute;
+		> button {
+			position: relative;
+			overflow: hidden;
+			border: none;
+			margin: 0;
+			padding: 0;
 			width: 100%;
 			height: 100%;
-			padding: 2px;
-			top: -2px;
-			left: -2px;
-			background: linear-gradient(var(--chosen-color), var(--chosen-color)), var(--color-transparent-checkered-background);
-			background-size: var(--color-transparent-checkered-background-size);
-			background-position: var(--color-transparent-checkered-background-position);
+			border-radius: 1px;
+
+			&::before {
+				content: "";
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				padding: 2px;
+				top: -2px;
+				left: -2px;
+				background: linear-gradient(var(--chosen-color), var(--chosen-color)), var(--color-transparent-checkered-background);
+				background-size: var(--color-transparent-checkered-background-size);
+				background-position: var(--color-transparent-checkered-background-position);
+			}
+
+			&.none {
+				background: var(--color-none);
+				background-repeat: var(--color-none-repeat);
+				background-position: var(--color-none-position);
+				background-size: var(--color-none-size-24px);
+				background-image: var(--color-none-image-24px);
+			}
+
+			.chip {
+				position: absolute;
+				bottom: -1px;
+				right: 0;
+				height: 13px;
+				line-height: 13px;
+				background: var(--color-f-white);
+				color: var(--color-2-mildblack);
+				border-radius: 4px 0 0 0;
+				padding: 0 4px;
+				font-size: 10px;
+				box-shadow: 0 0 2px var(--color-3-darkgray);
+			}
 		}
 
-		&.none {
-			background: var(--color-none);
-			background-repeat: var(--color-none-repeat);
-			background-position: var(--color-none-position);
-			background-size: var(--color-none-size-24px);
-			background-image: var(--color-none-image-24px);
+		&.color-input.color-input > button {
+			outline-offset: 0;
 		}
 
-		.chip {
-			position: absolute;
-			bottom: -1px;
-			right: 0;
-			height: 13px;
-			line-height: 13px;
-			background: var(--color-f-white);
-			color: var(--color-2-mildblack);
-			border-radius: 4px 0 0 0;
-			padding: 0 4px;
-			font-size: 10px;
-			box-shadow: 0 0 2px var(--color-3-darkgray);
+		> .floating-menu {
+			left: 50%;
+			bottom: 0;
 		}
 	}
-
-	&.color-input.color-input > button {
-		outline-offset: 0;
-	}
-
-	> .floating-menu {
-		left: 50%;
-		bottom: 0;
-	}
-}
 </style>

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -1,174 +1,163 @@
 <script lang="ts">
-import { defineComponent, type PropType, toRaw } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import { type MenuListEntry } from "@/wasm-communication/messages";
+	import { type MenuListEntry } from "@/wasm-communication/messages";
 
-import MenuList from "@/components/floating-menus/MenuList.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	import MenuList from "@/components/floating-menus/MenuList.svelte";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
 
-const DASH_ENTRY = { label: "-" };
+	const DASH_ENTRY = { label: "-" };
 
-export default defineComponent({
-	emits: ["update:selectedIndex"],
-	props: {
-		entries: { type: Array as PropType<MenuListEntry[][]>, required: true },
-		selectedIndex: { type: Number as PropType<number>, required: false }, // When not provided, a dash is displayed
-		drawIcon: { type: Boolean as PropType<boolean>, default: false },
-		interactive: { type: Boolean as PropType<boolean>, default: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
-	},
-	data() {
-		return {
-			activeEntry: this.makeActiveEntry(this.selectedIndex),
-			activeEntrySkipWatcher: false,
-			open: false,
-			minWidth: 0,
-		};
-	},
-	watch: {
-		// Called only when `selectedIndex` is changed from outside this component (with v-model)
-		selectedIndex() {
-			this.activeEntrySkipWatcher = true;
-			this.activeEntry = this.makeActiveEntry();
-		},
-		// Called when `activeEntry` is changed by the `v-model` on this component's MenuList component, or by the `selectedIndex()` watcher above (but we want to skip that case)
-		activeEntry(newActiveEntry: MenuListEntry) {
-			if (this.activeEntrySkipWatcher) {
-				this.activeEntrySkipWatcher = false;
-				return;
-			}
+	// emits: ["update:selectedIndex"],
+	const dispatch = createEventDispatcher<{ selectedIndex: number }>();
 
-			// `toRaw()` pulls it out of the Vue proxy
-			if (toRaw(newActiveEntry) === DASH_ENTRY) return;
+	let menuList: MenuList;
+	let self: LayoutRow;
 
-			this.$emit("update:selectedIndex", this.entries.flat().indexOf(newActiveEntry));
-		},
-	},
-	methods: {
-		makeActiveEntry(): MenuListEntry {
-			const entries = this.entries.flat();
+	export let entries: MenuListEntry[][];
+	export let selectedIndex: number | undefined = undefined; // When not provided, a dash is displayed
+	export let drawIcon = false;
+	export let interactive = true;
+	export let disabled = false;
+	export let tooltip: string | undefined = undefined;
+	export let sharpRightCorners = false;
 
-			if (this.selectedIndex !== undefined && this.selectedIndex >= 0 && this.selectedIndex < entries.length) {
-				return entries[this.selectedIndex];
-			}
-			return DASH_ENTRY;
-		},
-		keydown(e: KeyboardEvent) {
-			(this.$refs.menuList as typeof MenuList | undefined)?.keydown(e, false);
-		},
-		unFocusDropdownBox(e: FocusEvent) {
-			const blurTarget = (e.target as HTMLDivElement | undefined)?.closest("[data-dropdown-input]");
-			const self: HTMLDivElement | undefined = this.$el;
-			if (blurTarget !== self) this.open = false;
-		},
-	},
-	components: {
-		IconLabel,
-		LayoutRow,
-		MenuList,
-		TextLabel,
-	},
-});
+	let activeEntry = makeActiveEntry();
+	let activeEntrySkipWatcher = false;
+	let open = false;
+	let minWidth = 0;
+
+	$: selectedIndex, watchSelectedIndex();
+	$: watchActiveEntry(activeEntry);
+
+	// Called only when `selectedIndex` is changed from outside this component
+	function watchSelectedIndex() {
+		activeEntrySkipWatcher = true;
+		activeEntry = makeActiveEntry();
+	}
+
+	// Called when the `activeEntry` two-way binding on this component's MenuList component is changed, or by the `selectedIndex()` watcher above (but we want to skip that case)
+	function watchActiveEntry(activeEntry: MenuListEntry) {
+		if (activeEntrySkipWatcher) {
+			activeEntrySkipWatcher = false;
+		} else if (activeEntry !== DASH_ENTRY) {
+			dispatch("selectedIndex", entries.flat().indexOf(activeEntry));
+		}
+	}
+
+	function makeActiveEntry(): MenuListEntry {
+		const allEntries = entries.flat();
+
+		if (selectedIndex !== undefined && selectedIndex >= 0 && selectedIndex < allEntries.length) {
+			return allEntries[selectedIndex];
+		}
+		return DASH_ENTRY;
+	}
+
+	function unFocusDropdownBox(e: FocusEvent) {
+		const blurTarget = (e.target as HTMLDivElement | undefined)?.closest("[data-dropdown-input]");
+		if (blurTarget !== self.div()) open = false;
+	}
 </script>
 
-<template>
-	<LayoutRow class="dropdown-input" data-dropdown-input>
-		<LayoutRow
-			class="dropdown-box"
-			:class="{ disabled, open, 'sharp-right-corners': sharpRightCorners }"
-			:style="{ minWidth: `${minWidth}px` }"
-			:title="tooltip"
-			@click="() => !disabled && (open = true)"
-			@blur="(e: FocusEvent) => unFocusDropdownBox(e)"
-			@keydown="(e: KeyboardEvent) => keydown(e)"
-			:tabindex="disabled ? -1 : 0"
-			data-floating-menu-spawner
-		>
-			<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />
-			<TextLabel class="dropdown-label">{{ activeEntry.label }}</TextLabel>
-			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
-		</LayoutRow>
-		<MenuList
-			v-model:activeEntry="activeEntry"
-			v-model:open="open"
-			@naturalWidth="(newNaturalWidth: number) => (minWidth = newNaturalWidth)"
-			:entries="entries"
-			:drawIcon="drawIcon"
-			:interactive="interactive"
-			:direction="'Bottom'"
-			:scrollableY="true"
-			ref="menuList"
-		/>
+<LayoutRow class="dropdown-input" bind:this={self} data-dropdown-input>
+	<LayoutRow
+		class="dropdown-box"
+		classes={{ disabled, open, "sharp-right-corners": sharpRightCorners }}
+		styles={{ minWidth: `${minWidth}px` }}
+		{tooltip}
+		on:click={() => !disabled && (open = true)}
+		on:blur={unFocusDropdownBox}
+		on:keydown={(e) => menuList.keydown(e, false)}
+		tabindex={disabled ? -1 : 0}
+		data-floating-menu-spawner
+	>
+		{#if activeEntry.icon}
+			<IconLabel class="dropdown-icon" icon={activeEntry.icon} />
+		{/if}
+		<TextLabel class="dropdown-label">{activeEntry.label}</TextLabel>
+		<IconLabel class="dropdown-arrow" icon="DropdownArrow" />
 	</LayoutRow>
-</template>
+	<MenuList
+		on:naturalWidth={({ detail }) => (minWidth = detail)}
+		{activeEntry}
+		on:activeEntry={({ detail }) => (activeEntry = detail)}
+		{open}
+		on:open={({ detail }) => (open = detail)}
+		{entries}
+		{drawIcon}
+		{interactive}
+		direction="Bottom"
+		scrollableY={true}
+		bind:this={menuList}
+	/>
+</LayoutRow>
 
-<style lang="scss">
-.dropdown-input {
-	position: relative;
+<style lang="scss" global>
+	.dropdown-input {
+		position: relative;
 
-	.dropdown-box {
-		align-items: center;
-		white-space: nowrap;
-		background: var(--color-1-nearblack);
-		height: 24px;
-		border-radius: 2px;
+		.dropdown-box {
+			align-items: center;
+			white-space: nowrap;
+			background: var(--color-1-nearblack);
+			height: 24px;
+			border-radius: 2px;
 
-		.dropdown-label {
-			margin: 0;
-			margin-left: 8px;
-			flex: 1 1 100%;
-		}
+			.dropdown-label {
+				margin: 0;
+				margin-left: 8px;
+				flex: 1 1 100%;
+			}
 
-		.dropdown-icon {
-			margin: 4px;
-			flex: 0 0 auto;
+			.dropdown-icon {
+				margin: 4px;
+				flex: 0 0 auto;
 
-			& + .dropdown-label {
-				margin-left: 0;
+				& + .dropdown-label {
+					margin-left: 0;
+				}
+			}
+
+			.dropdown-arrow {
+				margin: 6px 2px;
+				flex: 0 0 auto;
+			}
+
+			&:hover,
+			&.open {
+				background: var(--color-6-lowergray);
+
+				span {
+					color: var(--color-f-white);
+				}
+
+				svg {
+					fill: var(--color-f-white);
+				}
+			}
+
+			&.open {
+				border-radius: 2px 2px 0 0;
+			}
+
+			&.disabled {
+				background: var(--color-2-mildblack);
+
+				span {
+					color: var(--color-8-uppergray);
+				}
+
+				svg {
+					fill: var(--color-8-uppergray);
+				}
 			}
 		}
 
-		.dropdown-arrow {
-			margin: 6px 2px;
-			flex: 0 0 auto;
-		}
-
-		&:hover,
-		&.open {
-			background: var(--color-6-lowergray);
-
-			span {
-				color: var(--color-f-white);
-			}
-
-			svg {
-				fill: var(--color-f-white);
-			}
-		}
-
-		&.open {
-			border-radius: 2px 2px 0 0;
-		}
-
-		&.disabled {
-			background: var(--color-2-mildblack);
-
-			span {
-				color: var(--color-8-uppergray);
-			}
-
-			svg {
-				fill: var(--color-8-uppergray);
-			}
+		.menu-list .floating-menu-container .floating-menu-content {
+			max-height: 400px;
 		}
 	}
-
-	.menu-list .floating-menu-container .floating-menu-content {
-		max-height: 400px;
-	}
-}
 </style>

frontend/src/components/widgets/inputs/FieldInput.svelte

@@ -1,194 +1,198 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import { platformIsMac } from "@/utility-functions/platform";
+	import { platformIsMac } from "@/utility-functions/platform";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
 
-export default defineComponent({
-	emits: ["update:value", "textFocused", "textChanged", "cancelTextChange"],
-	props: {
-		value: { type: String as PropType<string>, required: true },
-		label: { type: String as PropType<string>, required: false },
-		spellcheck: { type: Boolean as PropType<boolean>, default: false },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		textarea: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
-		placeholder: { type: String as PropType<string>, required: false },
-	},
-	data() {
-		return {
-			id: `${Math.random()}`.substring(2),
-			macKeyboardLayout: platformIsMac(),
-		};
-	},
-	methods: {
-		// Select (highlight) all the text. For technical reasons, it is necessary to pass the current text.
-		selectAllText(currentText: string) {
-			const inputElement = this.$refs.input as HTMLInputElement | HTMLTextAreaElement | undefined;
-			if (!inputElement) return;
+	// emits: ["update:value", "textFocused", "textChanged", "cancelTextChange"],
+	const dispatch = createEventDispatcher<{
+		value: string;
+		textFocused: undefined;
+		textChanged: undefined;
+		cancelTextChange: undefined;
+	}>();
 
-			// Setting the value directly is required to make `inputElement.select()` work
-			inputElement.value = currentText;
+	let className = "";
+	export { className as class };
+	export let classes: Record<string, boolean> = {};
+	let styleName = "";
+	export { styleName as style };
+	export let styles: Record<string, string | number | undefined> = {};
+	export let value: string;
+	export let label: string | undefined = undefined;
+	export let spellcheck = false;
+	export let disabled = false;
+	export let textarea = false;
+	export let tooltip: string | undefined = undefined;
+	export let sharpRightCorners = false;
+	export let placeholder: string | undefined = undefined;
 
-			inputElement.select();
-		},
-		unFocus() {
-			(this.$refs.input as HTMLInputElement | HTMLTextAreaElement | undefined)?.blur();
-		},
-		getInputElementValue(): string | undefined {
-			return (this.$refs.input as HTMLInputElement | HTMLTextAreaElement | undefined)?.value;
-		},
-		setInputElementValue(value: string) {
-			const inputElement = this.$refs.input as HTMLInputElement | HTMLTextAreaElement | undefined;
-			if (inputElement) inputElement.value = value;
-		},
-	},
-	computed: {
-		inputValue: {
-			get() {
-				return this.value;
-			},
-			set(value: string) {
-				this.$emit("update:value", value);
-			},
-		},
-	},
-	components: { LayoutRow },
-});
+	let inputOrTextarea: HTMLInputElement | HTMLTextAreaElement;
+	let id = `${Math.random()}`.substring(2);
+	let macKeyboardLayout = platformIsMac();
+
+	$: inputValue = value;
+	$: dispatch("value", inputValue);
+
+	// Select (highlight) all the text. For technical reasons, it is necessary to pass the current text.
+	export function selectAllText(currentText: string) {
+		// Setting the value directly is required to make the following `select()` call work
+		inputOrTextarea.value = currentText;
+		inputOrTextarea.select();
+	}
+
+	export function focus() {
+		inputOrTextarea.focus();
+	}
+
+	export function unFocus() {
+		inputOrTextarea.blur();
+	}
+
+	export function getValue(): string {
+		return inputOrTextarea.value;
+	}
+
+	export function setInputElementValue(value: string) {
+		inputOrTextarea.value = value;
+	}
+
+	export function element(): HTMLInputElement | HTMLTextAreaElement {
+		return inputOrTextarea;
+	}
 </script>
 
 <!-- This is a base component, extended by others like NumberInput and TextInput. It should not be used directly. -->
-<template>
-	<LayoutRow class="field-input" :class="{ disabled, 'sharp-right-corners': sharpRightCorners }" :title="tooltip">
+<LayoutRow class={`field-input ${className}`} classes={{ disabled, "sharp-right-corners": sharpRightCorners, ...classes }} style={styleName} {styles} {tooltip}>
+	{#if !textarea}
 		<input
 			type="text"
-			v-if="!textarea"
-			:class="{ 'has-label': label }"
-			:id="`field-input-${id}`"
-			ref="input"
-			v-model="inputValue"
-			:spellcheck="spellcheck"
-			:disabled="disabled"
-			:placeholder="placeholder"
-			@focus="() => $emit('textFocused')"
-			@blur="() => $emit('textChanged')"
-			@change="() => $emit('textChanged')"
-			@keydown.enter="() => $emit('textChanged')"
-			@keydown.esc="() => $emit('cancelTextChange')"
+			class:has-label={label}
+			id={`field-input-${id}`}
+			{spellcheck}
+			{disabled}
+			{placeholder}
+			bind:value={inputValue}
+			bind:this={inputOrTextarea}
+			on:focus={() => dispatch("textFocused")}
+			on:blur={() => dispatch("textChanged")}
+			on:change={() => dispatch("textChanged")}
+			on:keydown={(e) => e.key === "Enter" && dispatch("textChanged")}
+			on:keydown={(e) => e.key === "Escape" && dispatch("cancelTextChange")}
 			data-input-element
 		/>
+	{:else}
 		<textarea
-			v-else
-			:class="{ 'has-label': label }"
-			:id="`field-input-${id}`"
+			class:has-label={label}
+			id={`field-input-${id}`}
 			class="scrollable-y"
 			data-scrollable-y
-			ref="input"
-			v-model="inputValue"
-			:spellcheck="spellcheck"
-			:disabled="disabled"
-			@focus="() => $emit('textFocused')"
-			@blur="() => $emit('textChanged')"
-			@change="() => $emit('textChanged')"
-			@keydown.ctrl.enter="() => !macKeyboardLayout && $emit('textChanged')"
-			@keydown.meta.enter="() => macKeyboardLayout && $emit('textChanged')"
-			@keydown.esc="() => $emit('cancelTextChange')"
-		></textarea>
-		<label v-if="label" :for="`field-input-${id}`">{{ label }}</label>
-		<slot></slot>
-	</LayoutRow>
-</template>
+			{spellcheck}
+			{disabled}
+			bind:value={inputValue}
+			bind:this={inputOrTextarea}
+			on:focus={() => dispatch("textFocused")}
+			on:blur={() => dispatch("textChanged")}
+			on:change={() => dispatch("textChanged")}
+			on:keydown={(e) => (macKeyboardLayout ? e.metaKey : e.ctrlKey) && e.key === "Enter" && dispatch("textChanged")}
+			on:keydown={(e) => e.key === "Escape" && dispatch("cancelTextChange")}
+		/>
+	{/if}
+	{#if label}
+		<label for={`field-input-${id}`}>{label}</label>
+	{/if}
+	<slot />
+</LayoutRow>
 
-<style lang="scss">
-.field-input {
-	min-width: 80px;
-	height: auto;
-	position: relative;
-	border-radius: 2px;
-	background: var(--color-1-nearblack);
-	overflow: hidden;
-	flex-direction: row-reverse;
-
-	label {
-		flex: 0 0 auto;
-		line-height: 18px;
-		padding: 3px 0;
-		padding-right: 4px;
-		margin-left: 8px;
+<style lang="scss" global>
+	.field-input {
+		min-width: 80px;
+		height: auto;
+		position: relative;
+		border-radius: 2px;
+		background: var(--color-1-nearblack);
 		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
+		flex-direction: row-reverse;
 
-	&:not(.disabled) label {
-		cursor: text;
-	}
+		label {
+			flex: 0 0 auto;
+			line-height: 18px;
+			padding: 3px 0;
+			padding-right: 4px;
+			margin-left: 8px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 
-	input,
-	textarea {
-		flex: 1 1 100%;
-		width: 0;
-		min-width: 30px;
-		height: 18px;
-		line-height: 18px;
-		margin: 0 8px;
-		padding: 3px 0;
-		outline: none; // Ok for input/textarea element
-		border: none;
-		background: none;
-		color: var(--color-e-nearwhite);
-		caret-color: var(--color-e-nearwhite);
+		&:not(.disabled) label {
+			cursor: text;
+		}
 
-		&::selection {
-			background-color: var(--color-5-dullgray);
+		input,
+		textarea {
+			flex: 1 1 100%;
+			width: 0;
+			min-width: 30px;
+			height: 18px;
+			line-height: 18px;
+			margin: 0 8px;
+			padding: 3px 0;
+			outline: none; // Ok for input/textarea element
+			border: none;
+			background: none;
+			color: var(--color-e-nearwhite);
+			caret-color: var(--color-e-nearwhite);
 
-			// Target only Safari
-			@supports (background: -webkit-named-image(i)) {
-				& {
-					// Setting an alpha value opts out of Safari's "fancy" (but not visible on dark backgrounds) selection highlight rendering
-					// https://stackoverflow.com/a/71753552/775283
-					background-color: rgba(var(--color-5-dullgray-rgb), calc(254 / 255));
+			&::selection {
+				background-color: var(--color-5-dullgray);
+
+				// Target only Safari
+				@supports (background: -webkit-named-image(i)) {
+					& {
+						// Setting an alpha value opts out of Safari's "fancy" (but not visible on dark backgrounds) selection highlight rendering
+						// https://stackoverflow.com/a/71753552/775283
+						background-color: rgba(var(--color-5-dullgray-rgb), calc(254 / 255));
+					}
 				}
 			}
 		}
-	}
 
-	input {
-		text-align: center;
+		input {
+			// text-align: center;
 
-		&:not(:focus).has-label {
-			text-align: right;
-			margin-left: 0;
-			margin-right: 8px;
+			&:not(:focus).has-label {
+				text-align: right;
+				margin-left: 0;
+				margin-right: 8px;
+			}
+
+			&:focus {
+				text-align: left;
+
+				& + label {
+					display: none;
+				}
+			}
 		}
 
-		&:focus {
-			text-align: left;
+		textarea {
+			min-height: calc(18px * 3);
+			margin: 3px;
+			padding: 0 5px;
+			box-sizing: border-box;
+			resize: vertical;
+		}
 
-			& + label {
-				display: none;
+		&.disabled {
+			background: var(--color-2-mildblack);
+
+			label,
+			input,
+			textarea {
+				color: var(--color-8-uppergray);
 			}
 		}
 	}
-
-	textarea {
-		min-height: calc(18px * 3);
-		margin: 3px;
-		padding: 0 5px;
-		box-sizing: border-box;
-		resize: vertical;
-	}
-
-	&.disabled {
-		background: var(--color-2-mildblack);
-
-		label,
-		input,
-		textarea {
-			color: var(--color-8-uppergray);
-		}
-	}
-}
 </style>

frontend/src/components/widgets/inputs/FontInput.svelte

@@ -1,189 +1,185 @@
 <script lang="ts">
-import { defineComponent, nextTick, type PropType } from "vue";
+	import { createEventDispatcher, getContext, onMount, tick } from "svelte";
 
-import { type MenuListEntry } from "@/wasm-communication/messages";
+	import { type MenuListEntry } from "@/wasm-communication/messages";
 
-import MenuList from "@/components/floating-menus/MenuList.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	import MenuList from "@/components/floating-menus/MenuList.svelte";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import { type FontsState } from "@/state-providers/fonts";
 
-export default defineComponent({
-	inject: ["fonts"],
-	emits: ["update:fontFamily", "update:fontStyle", "changeFont"],
-	props: {
-		fontFamily: { type: String as PropType<string>, required: true },
-		fontStyle: { type: String as PropType<string>, required: true },
-		isStyle: { type: Boolean as PropType<boolean>, default: false },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
-	},
-	data() {
-		return {
-			open: false,
-			entries: [] as MenuListEntry[],
-			activeEntry: undefined as MenuListEntry | undefined,
-			entriesStart: 0,
-			minWidth: this.isStyle ? 0 : 300,
-		};
-	},
-	async mounted() {
-		this.entries = await this.getEntries();
-		this.activeEntry = this.getActiveEntry(this.entries);
-	},
-	methods: {
-		async setOpen(): Promise<void> {
-			this.open = true;
+	const fonts = getContext<FontsState>("fonts");
 
-			// Scroll to the active entry (the scroller div does not yet exist so we must wait for Vue to render)
-			await nextTick();
+	// emits: ["update:fontFamily", "update:fontStyle", "changeFont"],
+	const dispatch = createEventDispatcher<{
+		fontFamily: string;
+		fontStyle: string;
+		changeFont: { fontFamily: string; fontStyle: string; fontFileUrl: string | undefined };
+	}>();
 
-			if (this.activeEntry) {
-				const index = this.entries.indexOf(this.activeEntry);
-				(this.$refs.menuList as typeof MenuList | undefined)?.scrollViewTo(0, Math.max(0, index * 20 - 190));
-			}
-		},
-		toggleOpen(): void {
-			if (!this.disabled) {
-				this.open = !this.open;
+	let menuList: MenuList;
 
-				if (this.open) this.setOpen();
-			}
-		},
-		keydown(e: KeyboardEvent): void {
-			(this.$refs.menuList as typeof MenuList | undefined)?.keydown(e, false);
-		},
-		async selectFont(newName: string): Promise<void> {
-			let fontFamily;
-			let fontStyle;
+	export let fontFamily: string;
+	export let fontStyle: string;
+	export let isStyle = false;
+	export let disabled = false;
+	export let tooltip: string | undefined = undefined;
+	export let sharpRightCorners = false;
 
-			if (this.isStyle) {
-				this.$emit("update:fontStyle", newName);
+	let open = false;
+	let entries: MenuListEntry[] = [];
+	let activeEntry: MenuListEntry | undefined = undefined;
+	let minWidth = isStyle ? 0 : 300;
 
-				fontFamily = this.fontFamily;
-				fontStyle = newName;
-			} else {
-				this.$emit("update:fontFamily", newName);
+	$: fontFamily, fontStyle, watchFont();
 
-				fontFamily = newName;
-				fontStyle = "Normal (400)";
-			}
+	async function watchFont(): Promise<void> {
+		// We set this function's result to a local variable to avoid reading from `entries` which causes Svelte to trigger an update that results in an infinite loop
+		const newEntries = await getEntries();
+		entries = newEntries;
+		activeEntry = getActiveEntry(newEntries);
+	}
 
-			const fontFileUrl = await this.fonts.getFontFileUrl(fontFamily, fontStyle);
-			this.$emit("changeFont", { fontFamily, fontStyle, fontFileUrl });
-		},
-		async getEntries(): Promise<MenuListEntry[]> {
-			const x = this.isStyle ? this.fonts.getFontStyles(this.fontFamily) : this.fonts.fontNames();
-			return (await x).map((entry: { name: string; url: URL | undefined }) => ({
-				label: entry.name,
-				value: entry.name,
-				font: entry.url,
-				action: () => this.selectFont(entry.name),
-			}));
-		},
-		getActiveEntry(entries: MenuListEntry[]): MenuListEntry {
-			const selectedChoice = this.isStyle ? this.fontStyle : this.fontFamily;
+	async function setOpen(): Promise<void> {
+		open = true;
 
-			return entries.find((entry) => entry.value === selectedChoice) as MenuListEntry;
-		},
-	},
-	watch: {
-		async fontFamily() {
-			this.entries = await this.getEntries();
-			this.activeEntry = this.getActiveEntry(this.entries);
-		},
-		async fontStyle() {
-			this.entries = await this.getEntries();
-			this.activeEntry = this.getActiveEntry(this.entries);
-		},
-	},
-	components: {
-		IconLabel,
-		LayoutRow,
-		MenuList,
-		TextLabel,
-	},
-});
+		// Scroll to the active entry (the scroller div does not yet exist so we must wait for the component to render)
+		await tick();
+
+		if (activeEntry) {
+			const index = entries.indexOf(activeEntry);
+			menuList.scrollViewTo(Math.max(0, index * 20 - 190));
+		}
+	}
+
+	function toggleOpen(): void {
+		if (!disabled) {
+			open = !open;
+
+			if (open) setOpen();
+		}
+	}
+
+	async function selectFont(newName: string): Promise<void> {
+		let family;
+		let style;
+
+		if (isStyle) {
+			dispatch("fontStyle", newName);
+
+			family = fontFamily;
+			style = newName;
+		} else {
+			dispatch("fontFamily", newName);
+
+			family = newName;
+			style = "Normal (400)";
+		}
+
+		const fontFileUrl = await fonts.getFontFileUrl(family, style);
+		dispatch("changeFont", { fontFamily: family, fontStyle: style, fontFileUrl });
+	}
+
+	async function getEntries(): Promise<MenuListEntry[]> {
+		const x = isStyle ? fonts.getFontStyles(fontFamily) : fonts.fontNames();
+		return (await x).map((entry: { name: string; url: URL | undefined }) => ({
+			label: entry.name,
+			value: entry.name,
+			font: entry.url,
+			action: () => selectFont(entry.name),
+		}));
+	}
+
+	function getActiveEntry(entries: MenuListEntry[]): MenuListEntry {
+		const selectedChoice = isStyle ? fontStyle : fontFamily;
+
+		return entries.find((entry) => entry.value === selectedChoice) as MenuListEntry;
+	}
+
+	onMount(async () => {
+		entries = await getEntries();
+
+		activeEntry = getActiveEntry(entries);
+	});
 </script>
 
 <!-- TODO: Combine this widget into the DropdownInput widget -->
-
-<template>
-	<LayoutRow class="font-input">
-		<LayoutRow
-			class="dropdown-box"
-			:class="{ disabled, 'sharp-right-corners': sharpRightCorners }"
-			:style="{ minWidth: `${minWidth}px` }"
-			:title="tooltip"
-			:tabindex="disabled ? -1 : 0"
-			@click="toggleOpen"
-			@keydown="keydown"
-			data-floating-menu-spawner
-		>
-			<TextLabel class="dropdown-label">{{ activeEntry?.value || "" }}</TextLabel>
-			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
-		</LayoutRow>
-		<MenuList
-			v-model:activeEntry="activeEntry"
-			v-model:open="open"
-			:entries="[entries]"
-			:minWidth="isStyle ? 0 : minWidth"
-			:virtualScrollingEntryHeight="isStyle ? 0 : 20"
-			:scrollableY="true"
-			@naturalWidth="(newNaturalWidth: number) => (isStyle && (minWidth = newNaturalWidth))"
-			ref="menuList"
-		></MenuList>
+<LayoutRow class="font-input">
+	<LayoutRow
+		class="dropdown-box"
+		classes={{ disabled, "sharp-right-corners": sharpRightCorners }}
+		styles={{ minWidth: `${minWidth}px` }}
+		{tooltip}
+		tabindex={disabled ? -1 : 0}
+		on:click={toggleOpen}
+		on:keydown={(e) => menuList.keydown(e, false)}
+		data-floating-menu-spawner
+	>
+		<TextLabel class="dropdown-label">{activeEntry?.value || ""}</TextLabel>
+		<IconLabel class="dropdown-arrow" icon="DropdownArrow" />
 	</LayoutRow>
-</template>
+	<MenuList
+		on:naturalWidth={({ detail }) => isStyle && (minWidth = detail)}
+		{activeEntry}
+		on:activeEntry={({ detail }) => (activeEntry = detail)}
+		{open}
+		on:open={({ detail }) => (open = detail)}
+		entries={[entries]}
+		minWidth={isStyle ? 0 : minWidth}
+		virtualScrollingEntryHeight={isStyle ? 0 : 20}
+		scrollableY={true}
+		bind:this={menuList}
+	/>
+</LayoutRow>
 
-<style lang="scss">
-.font-input {
-	position: relative;
+<style lang="scss" global>
+	.font-input {
+		position: relative;
 
-	.dropdown-box {
-		align-items: center;
-		white-space: nowrap;
-		background: var(--color-1-nearblack);
-		height: 24px;
-		border-radius: 2px;
+		.dropdown-box {
+			align-items: center;
+			white-space: nowrap;
+			background: var(--color-1-nearblack);
+			height: 24px;
+			border-radius: 2px;
 
-		.dropdown-label {
-			margin: 0;
-			margin-left: 8px;
-			flex: 1 1 100%;
-		}
+			.dropdown-label {
+				margin: 0;
+				margin-left: 8px;
+				flex: 1 1 100%;
+			}
 
-		.dropdown-arrow {
-			margin: 6px 2px;
-			flex: 0 0 auto;
-		}
+			.dropdown-arrow {
+				margin: 6px 2px;
+				flex: 0 0 auto;
+			}
 
-		&:hover,
-		&.open {
-			background: var(--color-6-lowergray);
+			&:hover,
+			&.open {
+				background: var(--color-6-lowergray);
 
-			span {
-				color: var(--color-f-white);
+				span {
+					color: var(--color-f-white);
+				}
+			}
+
+			&.open {
+				border-radius: 2px 2px 0 0;
+			}
+
+			&.disabled {
+				background: var(--color-2-mildblack);
+
+				span {
+					color: var(--color-8-uppergray);
+				}
 			}
 		}
 
-		&.open {
-			border-radius: 2px 2px 0 0;
-		}
-
-		&.disabled {
-			background: var(--color-2-mildblack);
-
-			span {
-				color: var(--color-8-uppergray);
-			}
+		.menu-list .floating-menu-container .floating-menu-content {
+			max-height: 400px;
+			padding: 4px 0;
 		}
 	}
-
-	.menu-list .floating-menu-container .floating-menu-content {
-		max-height: 400px;
-		padding: 4px 0;
-	}
-}
 </style>

frontend/src/components/widgets/inputs/LayerReferenceInput.svelte

@@ -1,161 +1,142 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import { currentDraggingElement } from "@/io-managers/drag";
+	import { currentDraggingElement } from "@/io-managers/drag";
 
-import type { LayerType, LayerTypeData } from "@/wasm-communication/messages";
-import { layerTypeData } from "@/wasm-communication/messages";
+	import type { LayerType, LayerTypeData } from "@/wasm-communication/messages";
+	import { layerTypeData } from "@/wasm-communication/messages";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
 
-export default defineComponent({
-	emits: ["update:value"],
-	props: {
-		value: { type: String as PropType<string | undefined>, required: false },
-		layerName: { type: String as PropType<string | undefined>, required: false },
-		layerType: { type: String as PropType<LayerType | undefined>, required: false },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
-	},
-	data() {
-		return {
-			hoveringDrop: false,
-		};
-	},
-	computed: {
-		droppable() {
-			return this.hoveringDrop && currentDraggingElement();
-		},
-	},
-	methods: {
-		dragOver(e: DragEvent): void {
-			this.hoveringDrop = true;
+	// emits: ["update:value"],
+	const dispatch = createEventDispatcher<{ value: string | undefined }>();
 
+	export let value: string | undefined = undefined;
+	export let layerName: string | undefined = undefined;
+	export let layerType: LayerType | undefined = undefined;
+	export let disabled = false;
+	export let tooltip: string | undefined = undefined;
+	export let sharpRightCorners = false;
+
+	let hoveringDrop = false;
+
+	$: droppable = hoveringDrop && Boolean(currentDraggingElement());
+
+	function dragOver(e: DragEvent): void {
+		hoveringDrop = true;
+
+		e.preventDefault();
+	}
+
+	function drop(e: DragEvent): void {
+		hoveringDrop = false;
+
+		const element = currentDraggingElement();
+		const layerPath = element?.getAttribute("data-layer") || undefined;
+
+		if (layerPath) {
 			e.preventDefault();
-		},
-		dragLeave(): void {
-			this.hoveringDrop = false;
-		},
-		drop(e: DragEvent): void {
-			this.hoveringDrop = false;
 
-			const element = currentDraggingElement();
-			const layerPath = element?.getAttribute("data-layer") || undefined;
+			dispatch("value", layerPath);
+		}
+	}
 
-			if (layerPath) {
-				e.preventDefault();
-
-				this.$emit("update:value", layerPath);
-			}
-		},
-		clearLayer(): void {
-			this.$emit("update:value", undefined);
-		},
-		layerTypeData(layerType: LayerType): LayerTypeData {
-			return layerTypeData(layerType) || { name: "Error", icon: "Info" };
-		},
-	},
-	components: {
-		IconButton,
-		IconLabel,
-		LayoutRow,
-		TextLabel,
-	},
-});
+	function getLayerTypeData(layerType: LayerType): LayerTypeData {
+		return layerTypeData(layerType) || { name: "Error", icon: "Info" };
+	}
 </script>
 
-<template>
-	<LayoutRow
-		class="layer-reference-input"
-		:class="{ disabled, droppable, 'sharp-right-corners': sharpRightCorners }"
-		:title="tooltip"
-		@dragover="(e: DragEvent) => !disabled && dragOver(e)"
-		@dragleave="() => !disabled && dragLeave()"
-		@drop="(e: DragEvent) => !disabled && drop(e)"
-	>
-		<template v-if="value === undefined || droppable">
-			<LayoutRow class="drop-zone"></LayoutRow>
-			<TextLabel :italic="true">{{ droppable ? "Drop" : "Drag" }} Layer Here</TextLabel>
-		</template>
-		<template v-if="value !== undefined && !droppable">
-			<IconLabel v-if="layerName !== undefined && layerType" :icon="layerTypeData(layerType).icon" class="layer-icon" />
-			<TextLabel v-if="layerName !== undefined && layerType" :italic="layerName === ''" class="layer-name">{{ layerName || layerTypeData(layerType).name }}</TextLabel>
-			<TextLabel :bold="true" :italic="true" v-else class="missing">Layer Missing</TextLabel>
-		</template>
-		<IconButton v-if="value !== undefined && !droppable" :icon="'CloseX'" :size="16" :disabled="disabled" :action="() => clearLayer()" />
-	</LayoutRow>
-</template>
+<LayoutRow
+	class="layer-reference-input"
+	classes={{ disabled, droppable, "sharp-right-corners": sharpRightCorners }}
+	{tooltip}
+	on:dragover={(e) => !disabled && dragOver(e)}
+	on:dragleave={() => !disabled && (hoveringDrop = false)}
+	on:drop={(e) => !disabled && drop(e)}
+>
+	{#if value === undefined || droppable}
+		<LayoutRow class="drop-zone" />
+		<TextLabel italic={true}>{droppable ? "Drop" : "Drag"} Layer Here</TextLabel>
+	{:else}
+		{#if layerName !== undefined && layerType}
+			<IconLabel icon={getLayerTypeData(layerType).icon} class="layer-icon" />
+			<TextLabel italic={layerName === ""} class="layer-name">{layerName || getLayerTypeData(layerType).name}</TextLabel>
+		{:else}
+			<TextLabel bold={true} italic={true} class="missing">Layer Missing</TextLabel>
+		{/if}
+		<IconButton icon="CloseX" size={16} {disabled} action={() => dispatch("value", undefined)} />
+	{/if}
+</LayoutRow>
 
-<style lang="scss">
-.layer-reference-input {
-	position: relative;
-	flex: 1 0 auto;
-	height: 24px;
-	border-radius: 2px;
-	background: var(--color-1-nearblack);
-
-	.drop-zone {
-		pointer-events: none;
-		border: 1px dashed var(--color-5-dullgray);
-		border-radius: 1px;
-		position: absolute;
-		top: 2px;
-		bottom: 2px;
-		left: 2px;
-		right: 2px;
-	}
-
-	&.droppable .drop-zone {
-		border: 1px dashed var(--color-e-nearwhite);
-	}
-
-	.layer-icon {
-		margin: 4px 8px;
-
-		+ .text-label {
-			padding-left: 0;
-		}
-	}
-
-	.text-label {
-		line-height: 18px;
-		padding: 3px calc(8px + 2px);
-		width: 100%;
-		text-align: center;
-
-		&.missing {
-			// TODO: Define this as a permanent color palette choice
-			color: #d6536e;
-		}
-
-		&.layer-name {
-			text-align: left;
-		}
-	}
-
-	.icon-button {
-		margin: 4px;
-		margin-left: 0;
-	}
-
-	&.disabled {
-		background: var(--color-2-mildblack);
+<style lang="scss" global>
+	.layer-reference-input {
+		position: relative;
+		flex: 1 0 auto;
+		height: 24px;
+		border-radius: 2px;
+		background: var(--color-1-nearblack);
 
 		.drop-zone {
-			border: 1px dashed var(--color-4-dimgray);
+			pointer-events: none;
+			border: 1px dashed var(--color-5-dullgray);
+			border-radius: 1px;
+			position: absolute;
+			top: 2px;
+			bottom: 2px;
+			left: 2px;
+			right: 2px;
+		}
+
+		&.droppable .drop-zone {
+			border: 1px dashed var(--color-e-nearwhite);
+		}
+
+		.layer-icon {
+			margin: 4px 8px;
+
+			+ .text-label {
+				padding-left: 0;
+			}
 		}
 
 		.text-label {
-			color: var(--color-8-uppergray);
+			line-height: 18px;
+			padding: 3px calc(8px + 2px);
+			width: 100%;
+			text-align: center;
+
+			&.missing {
+				// TODO: Define this as a permanent color palette choice (search the project for all uses of this hex code)
+				color: #d6536e;
+			}
+
+			&.layer-name {
+				text-align: left;
+			}
 		}
 
-		.icon-label svg {
-			fill: var(--color-8-uppergray);
+		.icon-button {
+			margin: 4px;
+			margin-left: 0;
+		}
+
+		&.disabled {
+			background: var(--color-2-mildblack);
+
+			.drop-zone {
+				border: 1px dashed var(--color-4-dimgray);
+			}
+
+			.text-label {
+				color: var(--color-8-uppergray);
+			}
+
+			.icon-label svg {
+				fill: var(--color-8-uppergray);
+			}
 		}
 	}
-}
 </style>

frontend/src/components/widgets/inputs/MenuBarInput.svelte

@@ -1,30 +1,49 @@
 <script lang="ts">
-import { defineComponent } from "vue";
+	import { getContext, onMount } from "svelte";
 
-import { platformIsMac } from "@/utility-functions/platform";
-import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@/wasm-communication/messages";
+	import { platformIsMac } from "@/utility-functions/platform";
+	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@/wasm-communication/messages";
 
-import MenuList from "@/components/floating-menus/MenuList.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	import MenuList from "@/components/floating-menus/MenuList.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import { type Editor } from "@/wasm-communication/editor";
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-type MenuListInstance = InstanceType<typeof MenuList>;
+	// TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should take advantage of
+	const accelKey = platformIsMac() ? "Command" : "Control";
+	const LOCK_REQUIRING_SHORTCUTS: KeyRaw[][] = [
+		[accelKey, "KeyW"],
+		[accelKey, "KeyN"],
+		[accelKey, "Shift", "KeyN"],
+		[accelKey, "KeyT"],
+		[accelKey, "Shift", "KeyT"],
+	];
 
-// TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should take advantage of
-const accelKey = platformIsMac() ? "Command" : "Control";
-const LOCK_REQUIRING_SHORTCUTS: KeyRaw[][] = [
-	[accelKey, "KeyW"],
-	[accelKey, "KeyN"],
-	[accelKey, "Shift", "KeyN"],
-	[accelKey, "KeyT"],
-	[accelKey, "Shift", "KeyT"],
-];
+	const editor = getContext<Editor>("editor");
 
-export default defineComponent({
-	inject: ["editor"],
-	mounted() {
-		this.editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (updateMenuBarLayout) => {
+	let entries: MenuListEntry[] = [];
+
+	function clickEntry(menuListEntry: MenuListEntry, e: MouseEvent) {
+		// If there's no menu to open, trigger the action but don't try to open its non-existant children
+		if (!menuListEntry.children || menuListEntry.children.length === 0) {
+			if (menuListEntry.action && !menuListEntry.disabled) menuListEntry.action();
+
+			return;
+		}
+
+		// Focus the target so that keyboard inputs are sent to the dropdown
+		(e.target as HTMLElement | undefined)?.focus();
+
+		if (menuListEntry.ref) {
+			menuListEntry.ref.open = true;
+			entries = entries;
+		} else {
+			throw new Error("The menu bar floating menu has no associated ref");
+		}
+	}
+
+	onMount(() => {
+		editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (updateMenuBarLayout) => {
 			const arraysEqual = (a: KeyRaw[], b: KeyRaw[]): boolean => a.length === b.length && a.every((aValue, i) => aValue === b[i]);
 			const shortcutRequiresLock = (shortcut: LayoutKeysGroup): boolean => {
 				const shortcutKeys = shortcut.map((keyWithLabel) => keyWithLabel.key);
@@ -38,7 +57,7 @@ export default defineComponent({
 				...entry,
 
 				// Shared names with fields that need to be converted from the type used in `MenuBarEntry` to that of `MenuListEntry`
-				action: (): void => this.editor.instance.updateLayout(updateMenuBarLayout.layoutTarget, entry.action.widgetId, undefined),
+				action: (): void => editor.instance.updateLayout(updateMenuBarLayout.layoutTarget, entry.action.widgetId, undefined),
 				children: entry.children ? entry.children.map((entries) => entries.map((entry) => menuBarEntryToMenuListEntry(entry))) : undefined,
 
 				// New fields in `MenuListEntry`
@@ -49,106 +68,81 @@ export default defineComponent({
 				ref: undefined,
 			});
 
-			this.entries = updateMenuBarLayout.layout.map(menuBarEntryToMenuListEntry);
+			entries = updateMenuBarLayout.layout.map(menuBarEntryToMenuListEntry);
 		});
-	},
-	methods: {
-		clickEntry(menuListEntry: MenuListEntry, e: MouseEvent) {
-			// If there's no menu to open, trigger the action but don't try to open its non-existant children
-			if (!menuListEntry.children || menuListEntry.children.length === 0) {
-				if (menuListEntry.action && !menuListEntry.disabled) menuListEntry.action();
-
-				return;
-			}
-
-			// Focus the target so that keyboard inputs are sent to the dropdown
-			(e.target as HTMLElement | undefined)?.focus();
-
-			if (menuListEntry.ref) menuListEntry.ref.isOpen = true;
-			else throw new Error("The menu bar floating menu has no associated ref");
-		},
-		unFocusEntry(menuListEntry: MenuListEntry, e: FocusEvent) {
-			const blurTarget = (e.target as HTMLElement | undefined)?.closest("[data-menu-bar-input]");
-			const self: HTMLDivElement | undefined = this.$el;
-			if (blurTarget !== self && menuListEntry.ref) menuListEntry.ref.isOpen = false;
-		},
-	},
-	data() {
-		return {
-			entries: [] as MenuListEntry[],
-			open: false,
-		};
-	},
-	components: {
-		IconLabel,
-		MenuList,
-		TextLabel,
-	},
-});
+	});
 </script>
 
-<template>
-	<div class="menu-bar-input" data-menu-bar-input>
-		<div class="entry-container" v-for="(entry, index) in entries" :key="index">
+<div class="menu-bar-input" data-menu-bar-input>
+	{#each entries as entry, index (index)}
+		<div class="entry-container">
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 			<div
-				@click="(e: MouseEvent) => clickEntry(entry, e)"
-				@blur="(e: FocusEvent) => unFocusEntry(entry, e)"
-				@keydown="(e: KeyboardEvent) => entry.ref?.keydown(e, false)"
+				on:click={(e) => clickEntry(entry, e)}
+				on:keydown={(e) => entry.ref?.keydown(e, false)}
 				class="entry"
-				:class="{ open: entry.ref?.isOpen }"
+				class:open={entry.ref?.open}
 				tabindex="0"
-				:data-floating-menu-spawner="entry.children && entry.children.length > 0 ? '' : 'no-hover-transfer'"
+				data-floating-menu-spawner={entry.children && entry.children.length > 0 ? "" : "no-hover-transfer"}
 			>
-				<IconLabel v-if="entry.icon" :icon="entry.icon" />
-				<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
+				{#if entry.icon}
+					<IconLabel icon={entry.icon} />
+				{/if}
+				{#if entry.label}
+					<TextLabel>{entry.label}</TextLabel>
+				{/if}
 			</div>
-			<MenuList
-				v-if="entry.children && entry.children.length > 0"
-				:open="entry.ref?.open || false"
-				:entries="entry.children || []"
-				:direction="'Bottom'"
-				:minWidth="240"
-				:drawIcon="true"
-				:ref="(ref: MenuListInstance): void => (ref && (entry.ref = ref), undefined)"
-			/>
+			{#if entry.children && entry.children.length > 0}
+				<MenuList
+					on:open={({ detail }) => {
+						if (entry.ref) entry.ref.open = detail;
+					}}
+					open={entry.ref?.open || false}
+					entries={entry.children || []}
+					direction="Bottom"
+					minWidth={240}
+					drawIcon={true}
+					bind:this={entry.ref}
+				/>
+			{/if}
 		</div>
-	</div>
-</template>
+	{/each}
+</div>
 
-<style lang="scss">
-.menu-bar-input {
-	display: flex;
-
-	.entry-container {
+<style lang="scss" global>
+	.menu-bar-input {
 		display: flex;
-		position: relative;
 
-		.entry {
+		.entry-container {
 			display: flex;
-			align-items: center;
-			white-space: nowrap;
-			padding: 0 8px;
-			background: none;
-			border: 0;
-			margin: 0;
+			position: relative;
 
-			svg {
-				fill: var(--color-e-nearwhite);
-			}
-
-			&:hover,
-			&.open {
-				background: var(--color-6-lowergray);
+			.entry {
+				display: flex;
+				align-items: center;
+				white-space: nowrap;
+				padding: 0 8px;
+				background: none;
+				border: 0;
+				margin: 0;
 
 				svg {
-					fill: var(--color-f-white);
+					fill: var(--color-e-nearwhite);
 				}
 
-				span {
-					color: var(--color-f-white);
+				&:hover,
+				&.open {
+					background: var(--color-6-lowergray);
+
+					svg {
+						fill: var(--color-f-white);
+					}
+
+					span {
+						color: var(--color-f-white);
+					}
 				}
 			}
 		}
 	}
-}
 </style>

frontend/src/components/widgets/inputs/NumberInput.svelte

@@ -1,479 +1,488 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import { type NumberInputMode, type NumberInputIncrementBehavior } from "@/wasm-communication/messages";
+	import { type NumberInputMode, type NumberInputIncrementBehavior } from "@/wasm-communication/messages";
 
-import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
+	import FieldInput from "@/components/widgets/inputs/FieldInput.svelte";
 
-export default defineComponent({
-	emits: ["update:value"],
-	props: {
-		// Label
-		label: { type: String as PropType<string>, required: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
+	// emits: ["update:value"],
+	const dispatch = createEventDispatcher<{ value: number | undefined }>();
 
-		// Disabled
-		disabled: { type: Boolean as PropType<boolean>, default: false },
+	// Label
+	export let label: string | undefined = undefined;
+	export let tooltip: string | undefined = undefined;
 
-		// Value
-		value: { type: Number as PropType<number>, required: false }, // When not provided, a dash is displayed
-		min: { type: Number as PropType<number>, required: false },
-		max: { type: Number as PropType<number>, required: false },
-		isInteger: { type: Boolean as PropType<boolean>, default: false },
+	// Disabled
+	export let disabled = false;
 
-		// Number presentation
-		displayDecimalPlaces: { type: Number as PropType<number>, default: 3 },
-		unit: { type: String as PropType<string>, default: "" },
-		unitIsHiddenWhenEditing: { type: Boolean as PropType<boolean>, default: true },
+	// Value
+	export let value: number | undefined = undefined; // When not provided, a dash is displayed
+	export let min: number | undefined = undefined;
+	export let max: number | undefined = undefined;
+	export let isInteger = false;
 
-		// Mode behavior
-		// "Increment" shows arrows and allows dragging left/right to change the value.
-		// "Range" shows a range slider between some minimum and maximum value.
-		mode: { type: String as PropType<NumberInputMode>, default: "Increment" },
-		// When `mode` is "Increment", `step` is the multiplier or addend used with `incrementBehavior`.
-		// When `mode` is "Range", `step` is the range slider's snapping increment if `isInteger` is `true`.
-		step: { type: Number as PropType<number>, default: 1 },
-		// `incrementBehavior` is only applicable with a `mode` of "Increment".
-		// "Add"/"Multiply": The value is added or multiplied by `step`.
-		// "None": the increment arrows are not shown.
-		// "Callback": the functions `incrementCallbackIncrease` and `incrementCallbackDecrease` call custom behavior.
-		incrementBehavior: { type: String as PropType<NumberInputIncrementBehavior>, default: "Add" },
-		// `rangeMin` and `rangeMax` are only applicable with a `mode` of "Range".
-		// They set the lower and upper values of the slider to drag between.
-		rangeMin: { type: Number as PropType<number>, default: 0 },
-		rangeMax: { type: Number as PropType<number>, default: 1 },
+	// Number presentation
+	export let displayDecimalPlaces = 3;
+	export let unit = "";
+	export let unitIsHiddenWhenEditing = true;
 
-		// Styling
-		minWidth: { type: Number as PropType<number>, default: 0 },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
+	// Mode behavior
+	// "Increment" shows arrows and allows dragging left/right to change the value.
+	// "Range" shows a range slider between some minimum and maximum value.
+	export let mode: NumberInputMode = "Increment";
+	// When `mode` is "Increment", `step` is the multiplier or addend used with `incrementBehavior`.
+	// When `mode` is "Range", `step` is the range slider's snapping increment if `isInteger` is `true`.
+	export let step = 1;
+	// `incrementBehavior` is only applicable with a `mode` of "Increment".
+	// "Add"/"Multiply": The value is added or multiplied by `step`.
+	// "None": the increment arrows are not shown.
+	// "Callback": the functions `incrementCallbackIncrease` and `incrementCallbackDecrease` call custom behavior.
+	export let incrementBehavior: NumberInputIncrementBehavior = "Add";
+	// `rangeMin` and `rangeMax` are only applicable with a `mode` of "Range".
+	// They set the lower and upper values of the slider to drag between.
+	export let rangeMin = 0;
+	export let rangeMax = 1;
 
-		// Callbacks
-		incrementCallbackIncrease: { type: Function as PropType<() => void>, required: false },
-		incrementCallbackDecrease: { type: Function as PropType<() => void>, required: false },
-	},
-	data() {
-		return {
-			text: this.displayText(this.value),
-			editing: false,
-			// Stays in sync with a binding to the actual input range slider element.
-			rangeSliderValue: this.value !== undefined ? this.value : 0,
-			// Value used to render the position of the fake slider when applicable, and length of the progress colored region to the slider's left.
-			// This is the same as `rangeSliderValue` except in the "mousedown" state, when it has the previous location before the user's mousedown.
-			rangeSliderValueAsRendered: this.value !== undefined ? this.value : 0,
-			// "default": no interaction is happening.
-			// "mousedown": the user has pressed down the mouse and might next decide to either drag left/right or release without dragging.
-			// "dragging": the user is dragging the slider left/right.
-			rangeSliderClickDragState: "default" as "default" | "mousedown" | "dragging",
+	// Styling
+	export let minWidth = 0;
+	export let sharpRightCorners = false;
+
+	// Callbacks
+	export let incrementCallbackIncrease: (() => void) | undefined = undefined;
+	export let incrementCallbackDecrease: (() => void) | undefined = undefined;
+
+	let self: FieldInput;
+	let text = displayText(value, displayDecimalPlaces, unit);
+	let editing = false;
+	// Stays in sync with a binding to the actual input range slider element.
+	let rangeSliderValue = value !== undefined ? value : 0;
+	// Value used to render the position of the fake slider when applicable, and length of the progress colored region to the slider's left.
+	// This is the same as `rangeSliderValue` except in the "mousedown" state, when it has the previous location before the user's mousedown.
+	let rangeSliderValueAsRendered = value !== undefined ? value : 0;
+	// "default": no interaction is happening.
+	// "mousedown": the user has pressed down the mouse and might next decide to either drag left/right or release without dragging.
+	// "dragging": the user is dragging the slider left/right.
+	let rangeSliderClickDragState: "default" | "mousedown" | "dragging" = "default";
+
+	$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
+	$: watchValue(value);
+
+	// Called only when `value` is changed from outside this component
+	function watchValue(value: number | undefined) {
+		// Don't update if the slider is currently being dragged (we don't want the backend fighting with the user's drag)
+		if (rangeSliderClickDragState === "dragging") return;
+
+		// Draw a dash if the value is undefined
+		if (value === undefined) {
+			text = "-";
+			return;
+		}
+
+		// Update the range slider with the new value
+		rangeSliderValue = value;
+		rangeSliderValueAsRendered = value;
+
+		// The simple `clamp()` function can't be used here since `undefined` values need to be boundless
+		let sanitized = value;
+		if (typeof min === "number") sanitized = Math.max(sanitized, min);
+		if (typeof max === "number") sanitized = Math.min(sanitized, max);
+
+		text = displayText(sanitized, displayDecimalPlaces, unit);
+	}
+
+	function onSliderInput() {
+		// Keep only 4 digits after the decimal point
+		const ROUNDING_EXPONENT = 4;
+		const ROUNDING_MAGNITUDE = 10 ** ROUNDING_EXPONENT;
+		const roundedValue = Math.round(rangeSliderValue * ROUNDING_MAGNITUDE) / ROUNDING_MAGNITUDE;
+
+		// Exit if this is an extraneous event invocation that occurred after mouseup, which happens in Firefox
+		if (value !== undefined && Math.abs(value - roundedValue) < 1 / ROUNDING_MAGNITUDE) {
+			return;
+		}
+
+		// The first event upon mousedown means we transition to a "mousedown" state
+		if (rangeSliderClickDragState === "default") {
+			rangeSliderClickDragState = "mousedown";
+
+			// Exit early because we don't want to use the value set by where on the track the user pressed
+			return;
+		}
+
+		// The second event upon mousedown that occurs by moving left or right means the user has committed to dragging the slider
+		if (rangeSliderClickDragState === "mousedown") {
+			rangeSliderClickDragState = "dragging";
+		}
+
+		// If we're in a dragging state, we want to use the new slider value
+		rangeSliderValueAsRendered = roundedValue;
+		updateValue(roundedValue, min, max, displayDecimalPlaces, unit);
+	}
+
+	function onSliderPointerDown() {
+		// We want to render the fake slider thumb at the old position, which is still the number held by `value`
+		rangeSliderValueAsRendered = value || 0;
+
+		// Because an `input` event is fired right before or after this (depending on browser), that first
+		// invocation will transition the state machine to `mousedown`. That's why we don't do it here.
+	}
+
+	function onSliderPointerUp() {
+		// User clicked but didn't drag, so we focus the text input element
+		if (rangeSliderClickDragState === "mousedown") {
+			const inputElement = self.element().querySelector("[data-input-element]") as HTMLInputElement | undefined;
+			if (!inputElement) return;
+
+			// Set the slider position back to the original position to undo the user moving it
+			rangeSliderValue = rangeSliderValueAsRendered;
+
+			// Begin editing the number text field
+			inputElement.focus();
+		}
+
+		// Releasing the mouse means we can reset the state machine
+		rangeSliderClickDragState = "default";
+	}
+
+	function onTextFocused() {
+		if (value === undefined) text = "";
+		else if (unitIsHiddenWhenEditing) text = `${value}`;
+		else text = `${value}${unPluralize(unit, value)}`;
+
+		editing = true;
+
+		self.selectAllText(text);
+	}
+
+	// Called only when `value` is changed from the <input> element via user input and committed, either with the
+	// enter key (via the `change` event) or when the <input> element is unfocused (with the `blur` event binding)
+	function onTextChanged() {
+		// The `unFocus()` call at the bottom of this function and in `onCancelTextChange()` causes this function to be run again, so this check skips a second run
+		if (!editing) return;
+
+		const parsed = parseFloat(text);
+		const newValue = Number.isNaN(parsed) ? undefined : parsed;
+
+		updateValue(newValue, min, max, displayDecimalPlaces, unit);
+
+		editing = false;
+
+		self.unFocus();
+	}
+
+	function onCancelTextChange() {
+		updateValue(undefined, min, max, displayDecimalPlaces, unit);
+
+		editing = false;
+
+		self.unFocus();
+	}
+
+	function onIncrement(direction: "Decrease" | "Increase") {
+		if (value === undefined) return;
+
+		const actions: Record<NumberInputIncrementBehavior, () => void> = {
+			Add: () => {
+				const directionAddend = direction === "Increase" ? step : -step;
+				updateValue(value !== undefined ? value + directionAddend : undefined, min, max, displayDecimalPlaces, unit);
+			},
+			Multiply: () => {
+				const directionMultiplier = direction === "Increase" ? step : 1 / step;
+				updateValue(value !== undefined ? value * directionMultiplier : undefined, min, max, displayDecimalPlaces, unit);
+			},
+			Callback: () => {
+				if (direction === "Increase") incrementCallbackIncrease?.();
+				if (direction === "Decrease") incrementCallbackDecrease?.();
+			},
+			None: () => {},
 		};
-	},
-	computed: {
-		sliderStepValue() {
-			const step = this.step === undefined ? 1 : this.step;
-			return this.isInteger ? step : "any";
-		},
-	},
-	methods: {
-		sliderInput() {
-			// Keep only 4 digits after the decimal point
-			const ROUNDING_EXPONENT = 4;
-			const ROUNDING_MAGNITUDE = 10 ** ROUNDING_EXPONENT;
-			const roundedValue = Math.round(this.rangeSliderValue * ROUNDING_MAGNITUDE) / ROUNDING_MAGNITUDE;
+		const action = actions[incrementBehavior];
+		action();
+	}
 
-			// Exit if this is an extraneous event invocation that occurred after mouseup, which happens in Firefox
-			if (this.value !== undefined && Math.abs(this.value - roundedValue) < 1 / ROUNDING_MAGNITUDE) {
-				return;
-			}
+	function updateValue(newValue: number | undefined, min: number | undefined, max: number | undefined, displayDecimalPlaces: number, unit: string) {
+		// Check if the new value is valid, otherwise we use the old value (rounded if it's an integer)
+		const nowValid = value !== undefined && isInteger ? Math.round(value) : value;
+		let cleaned = newValue !== undefined ? newValue : nowValid;
 
-			// The first event upon mousedown means we transition to a "mousedown" state
-			if (this.rangeSliderClickDragState === "default") {
-				this.rangeSliderClickDragState = "mousedown";
+		if (typeof min === "number" && !Number.isNaN(min) && cleaned !== undefined) cleaned = Math.max(cleaned, min);
+		if (typeof max === "number" && !Number.isNaN(max) && cleaned !== undefined) cleaned = Math.min(cleaned, max);
 
-				// Exit early because we don't want to use the value set by where on the track the user pressed
-				return;
-			}
+		text = displayText(cleaned, displayDecimalPlaces, unit);
 
-			// The second event upon mousedown that occurs by moving left or right means the user has committed to dragging the slider
-			if (this.rangeSliderClickDragState === "mousedown") {
-				this.rangeSliderClickDragState = "dragging";
-			}
+		if (newValue !== undefined) dispatch("value", cleaned);
+	}
 
-			// If we're in a dragging state, we want to use the new slider value
-			this.rangeSliderValueAsRendered = roundedValue;
-			this.updateValue(roundedValue);
-		},
-		sliderPointerDown() {
-			// We want to render the fake slider thumb at the old position, which is still the number held by `value`
-			this.rangeSliderValueAsRendered = this.value || 0;
+	function displayText(value: number | undefined, displayDecimalPlaces: number, unit: string): string {
+		if (value === undefined) return "-";
 
-			// Because an `input` event is fired right before or after this (depending on browser), that first
-			// invocation will transition the state machine to `mousedown`. That's why we don't do it here.
-		},
-		sliderPointerUp() {
-			// User clicked but didn't drag, so we focus the text input element
-			if (this.rangeSliderClickDragState === "mousedown") {
-				const fieldInput = this.$refs.fieldInput as typeof FieldInput | undefined;
-				const inputElement = fieldInput?.$el.querySelector("[data-input-element]") as HTMLInputElement | undefined;
-				if (!inputElement) return;
+		// Find the amount of digits on the left side of the decimal
+		// 10.25 == 2
+		// 1.23 == 1
+		// 0.23 == 0 (Reason for the slightly more complicated code)
+		const absValueInt = Math.floor(Math.abs(value));
+		const leftSideDigits = absValueInt === 0 ? 0 : absValueInt.toString().length;
+		const roundingPower = 10 ** Math.max(displayDecimalPlaces - leftSideDigits, 0);
 
-				// Set the slider position back to the original position to undo the user moving it
-				this.rangeSliderValue = this.rangeSliderValueAsRendered;
+		const displayValue = Math.round(value * roundingPower) / roundingPower;
 
-				// Begin editing the number text field
-				inputElement.focus();
-			}
+		return `${displayValue}${unPluralize(unit, value)}`;
+	}
 
-			// Releasing the mouse means we can reset the state machine
-			this.rangeSliderClickDragState = "default";
-		},
-		onTextFocused() {
-			if (this.value === undefined) this.text = "";
-			else if (this.unitIsHiddenWhenEditing) this.text = `${this.value}`;
-			else this.text = `${this.value}${unPluralize(this.unit, this.value)}`;
-
-			this.editing = true;
-
-			(this.$refs.fieldInput as typeof FieldInput | undefined)?.selectAllText(this.text);
-		},
-		// Called only when `value` is changed from the <input> element via user input and committed, either with the
-		// enter key (via the `change` event) or when the <input> element is unfocused (with the `blur` event binding)
-		onTextChanged() {
-			// The `unFocus()` call at the bottom of this function and in `onCancelTextChange()` causes this function to be run again, so this check skips a second run
-			if (!this.editing) return;
-
-			const parsed = parseFloat(this.text);
-			const newValue = Number.isNaN(parsed) ? undefined : parsed;
-
-			this.updateValue(newValue);
-
-			this.editing = false;
-
-			(this.$refs.fieldInput as typeof FieldInput | undefined)?.unFocus();
-		},
-		onCancelTextChange() {
-			this.updateValue(undefined);
-
-			this.editing = false;
-
-			(this.$refs.fieldInput as typeof FieldInput | undefined)?.unFocus();
-		},
-		onIncrement(direction: "Decrease" | "Increase") {
-			if (this.value === undefined) return;
-
-			const actions = {
-				Add: (): void => {
-					const directionAddend = direction === "Increase" ? this.step : -this.step;
-					this.updateValue(this.value !== undefined ? this.value + directionAddend : undefined);
-				},
-				Multiply: (): void => {
-					const directionMultiplier = direction === "Increase" ? this.step : 1 / this.step;
-					this.updateValue(this.value !== undefined ? this.value * directionMultiplier : undefined);
-				},
-				Callback: (): void => {
-					if (direction === "Increase") this.incrementCallbackIncrease?.();
-					if (direction === "Decrease") this.incrementCallbackDecrease?.();
-				},
-				None: (): void => undefined,
-			};
-			const action = actions[this.incrementBehavior];
-			action();
-		},
-		updateValue(newValue: number | undefined) {
-			const nowValid = this.value !== undefined && this.isInteger ? Math.round(this.value) : this.value;
-			let cleaned = newValue !== undefined ? newValue : nowValid;
-
-			if (typeof this.min === "number" && !Number.isNaN(this.min) && cleaned !== undefined) cleaned = Math.max(cleaned, this.min);
-			if (typeof this.max === "number" && !Number.isNaN(this.max) && cleaned !== undefined) cleaned = Math.min(cleaned, this.max);
-
-			// Required as the call to update:value can, not change the value
-			this.text = this.displayText(this.value);
-
-			if (newValue !== undefined) this.$emit("update:value", cleaned);
-		},
-		displayText(value: number | undefined): string {
-			if (value === undefined) return "-";
-
-			// Find the amount of digits on the left side of the decimal
-			// 10.25 == 2
-			// 1.23 == 1
-			// 0.23 == 0 (Reason for the slightly more complicated code)
-			const absValueInt = Math.floor(Math.abs(value));
-			const leftSideDigits = absValueInt === 0 ? 0 : absValueInt.toString().length;
-			const roundingPower = 10 ** Math.max(this.displayDecimalPlaces - leftSideDigits, 0);
-
-			const displayValue = Math.round(value * roundingPower) / roundingPower;
-
-			return `${displayValue}${unPluralize(this.unit, value)}`;
-		},
-	},
-	watch: {
-		// Called only when `value` is changed from outside this component (with v-model)
-		value(newValue: number | undefined) {
-			// Draw a dash if the value is undefined
-			if (newValue === undefined) {
-				this.text = "-";
-				return;
-			}
-
-			// Update the range slider with the new value
-			this.rangeSliderValue = newValue;
-			this.rangeSliderValueAsRendered = newValue;
-
-			// The simple `clamp()` function can't be used here since `undefined` values need to be boundless
-			let sanitized = newValue;
-			if (typeof this.min === "number") sanitized = Math.max(sanitized, this.min);
-			if (typeof this.max === "number") sanitized = Math.min(sanitized, this.max);
-
-			this.text = this.displayText(sanitized);
-		},
-	},
-	components: { FieldInput },
-});
-
-function unPluralize(unit: string, value: number): string {
-	if (value === 1 && unit.endsWith("s")) return unit.slice(0, -1);
-	return unit;
-}
+	function unPluralize(unit: string, value: number): string {
+		if (value === 1 && unit.endsWith("s")) return unit.slice(0, -1);
+		return unit;
+	}
 </script>
 
-<template>
-	<FieldInput
-		class="number-input"
-		:class="mode.toLocaleLowerCase()"
-		v-model:value="text"
-		:label="label"
-		:spellcheck="false"
-		:disabled="disabled"
-		:style="{ 'min-width': minWidth > 0 ? `${minWidth}px` : undefined, '--progress-factor': (rangeSliderValueAsRendered - rangeMin) / (rangeMax - rangeMin) }"
-		:tooltip="tooltip"
-		:sharpRightCorners="sharpRightCorners"
-		@textFocused="() => onTextFocused()"
-		@textChanged="() => onTextChanged()"
-		@cancelTextChange="() => onCancelTextChange()"
-		ref="fieldInput"
-	>
-		<button v-if="value !== undefined && mode === 'Increment' && incrementBehavior !== 'None'" class="arrow left" @click="() => onIncrement('Decrease')" tabindex="-1"></button>
-		<button v-if="value !== undefined && mode === 'Increment' && incrementBehavior !== 'None'" class="arrow right" @click="() => onIncrement('Increase')" tabindex="-1"></button>
+<FieldInput
+	class={`number-input ${mode.toLocaleLowerCase()}`}
+	value={text}
+	on:value={({ detail }) => (text = detail)}
+	on:textFocused={onTextFocused}
+	on:textChanged={onTextChanged}
+	on:cancelTextChange={onCancelTextChange}
+	{label}
+	{disabled}
+	{tooltip}
+	{sharpRightCorners}
+	spellcheck={false}
+	styles={{ "min-width": minWidth > 0 ? `${minWidth}px` : undefined, "--progress-factor": (rangeSliderValueAsRendered - rangeMin) / (rangeMax - rangeMin) }}
+	bind:this={self}
+>
+	{#if value !== undefined && mode === "Increment" && incrementBehavior !== "None"}
+		<button class="arrow left" on:click={() => onIncrement("Decrease")} tabindex="-1" />
+		<button class="arrow right" on:click={() => onIncrement("Increase")} tabindex="-1" />
+	{/if}
+	{#if mode === "Range" && value !== undefined}
 		<input
 			type="range"
 			class="slider"
-			:class="{ hidden: rangeSliderClickDragState === 'mousedown' }"
-			v-if="mode === 'Range' && value !== undefined"
-			v-model="rangeSliderValue"
-			:min="rangeMin"
-			:max="rangeMax"
-			:step="sliderStepValue"
-			:disabled="disabled"
-			@input="() => sliderInput()"
-			@pointerdown="() => sliderPointerDown()"
-			@pointerup="() => sliderPointerUp()"
+			class:hidden={rangeSliderClickDragState === "mousedown"}
+			bind:value={rangeSliderValue}
+			min={rangeMin}
+			max={rangeMax}
+			step={sliderStepValue}
+			{disabled}
+			on:input={onSliderInput}
+			on:pointerdown={onSliderPointerDown}
+			on:pointerup={onSliderPointerUp}
 			tabindex="-1"
 		/>
-		<div v-if="value !== undefined && rangeSliderClickDragState === 'mousedown'" class="fake-slider-thumb"></div>
-		<div v-if="value !== undefined" class="slider-progress"></div>
-	</FieldInput>
-</template>
+	{/if}
+	{#if value !== undefined}
+		{#if value !== undefined && rangeSliderClickDragState === "mousedown"}
+			<div class="fake-slider-thumb" />
+		{/if}
+		<div class="slider-progress" />
+	{/if}
+</FieldInput>
 
-<style lang="scss">
-.number-input {
-	&.increment {
-		// Widen the label and input margins from the edges by an extra 8px to make room for the increment arrows
-		label {
-			margin-left: 16px;
+<style lang="scss" global>
+	.number-input {
+		input {
+			text-align: center;
 		}
 
-		input[type="text"]:not(:focus).has-label {
-			margin-right: 16px;
-		}
+		&.increment {
+			// Widen the label and input margins from the edges by an extra 8px to make room for the increment arrows
+			label {
+				margin-left: 16px;
+			}
 
-		// Hide the increment arrows when entering text, disabled, or not hovered
-		input[type="text"]:focus ~ .arrow,
-		&.disabled .arrow,
-		&:not(:hover) .arrow {
-			display: none;
-		}
+			input[type="text"]:not(:focus).has-label {
+				margin-right: 16px;
+			}
 
-		// Style the increment arrows
-		.arrow {
-			position: absolute;
-			top: 0;
-			margin: 0;
-			padding: 9px 0;
-			border: none;
-			background: rgba(var(--color-1-nearblack-rgb), 0.75);
+			// Hide the increment arrows when entering text, disabled, or not hovered
+			input[type="text"]:focus ~ .arrow,
+			&.disabled .arrow,
+			&:not(:hover) .arrow {
+				display: none;
+			}
 
-			&:hover {
-				background: var(--color-6-lowergray);
+			// Style the increment arrows
+			.arrow {
+				position: absolute;
+				top: 0;
+				margin: 0;
+				padding: 9px 0;
+				border: none;
+				background: rgba(var(--color-1-nearblack-rgb), 0.75);
 
-				&.right::before {
-					border-color: transparent transparent transparent var(--color-f-white);
+				&:hover {
+					background: var(--color-6-lowergray);
+
+					&.right::before {
+						border-color: transparent transparent transparent var(--color-f-white);
+					}
+
+					&.left::after {
+						border-color: transparent var(--color-f-white) transparent transparent;
+					}
 				}
 
-				&.left::after {
-					border-color: transparent var(--color-f-white) transparent transparent;
+				&.right {
+					right: 0;
+					padding-left: 7px;
+					padding-right: 6px;
+
+					&::before {
+						content: "";
+						display: block;
+						width: 0;
+						height: 0;
+						border-style: solid;
+						border-width: 3px 0 3px 3px;
+						border-color: transparent transparent transparent var(--color-e-nearwhite);
+					}
+				}
+
+				&.left {
+					left: 0;
+					padding-left: 6px;
+					padding-right: 7px;
+
+					&::after {
+						content: "";
+						display: block;
+						width: 0;
+						height: 0;
+						border-style: solid;
+						border-width: 3px 3px 3px 0;
+						border-color: transparent var(--color-e-nearwhite) transparent transparent;
+					}
+				}
+			}
+		}
+
+		&.range {
+			position: relative;
+
+			input[type="text"],
+			label {
+				z-index: 1;
+			}
+
+			input[type="text"]:focus ~ .slider,
+			input[type="text"]:focus ~ .fake-slider-thumb,
+			input[type="text"]:focus ~ .slider-progress {
+				display: none;
+			}
+
+			.slider {
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				padding: 0;
+				margin: 0;
+				-webkit-appearance: none; // Required until Safari 15.4 (Graphite supports 15.0+)
+				appearance: none;
+				background: none;
+				cursor: default;
+				// Except when disabled, the range slider goes above the label and input so it's interactable.
+				// Then we use the blend mode to make it appear behind which works since the text is almost white and background almost black.
+				// When disabled, the blend mode trick doesn't work with the grayer colors. But we don't need it to be interactable, so it can actually go behind properly.
+				z-index: 2;
+				mix-blend-mode: screen;
+
+				&.hidden {
+					opacity: 0;
+				}
+
+				// Chromium and Safari
+				&::-webkit-slider-thumb {
+					-webkit-appearance: none; // Required until Safari 15.4 (Graphite supports 15.0+)
+					appearance: none;
+					border-radius: 2px;
+					width: 4px;
+					height: 24px;
+					background: #494949; // Becomes var(--color-5-dullgray) with screen blend mode over var(--color-1-nearblack) background
+				}
+
+				&:hover::-webkit-slider-thumb {
+					background: #5b5b5b; // Becomes var(--color-6-lowergray) with screen blend mode over var(--color-1-nearblack) background
+				}
+
+				&:disabled {
+					mix-blend-mode: normal;
+					z-index: 0;
+
+					&::-webkit-slider-thumb {
+						background: var(--color-4-dimgray);
+					}
+				}
+
+				// Firefox
+				&::-moz-range-thumb {
+					border: none;
+					border-radius: 2px;
+					width: 4px;
+					height: 24px;
+					background: #494949; // Becomes var(--color-5-dullgray) with screen blend mode over var(--color-1-nearblack) background
+				}
+
+				&:hover::-moz-range-thumb {
+					background: #5b5b5b; // Becomes var(--color-6-lowergray) with screen blend mode over var(--color-1-nearblack) background
+				}
+
+				&:hover ~ .slider-progress::before {
+					background: var(--color-3-darkgray);
+				}
+
+				&::-moz-range-track {
+					height: 0;
 				}
 			}
 
-			&.right {
-				right: 0;
-				padding-left: 7px;
-				padding-right: 6px;
+			// This fake slider thumb stays in the location of the real thumb while we have to hide the real slider between mousedown and mouseup or mousemove.
+			// That's because the range input element moves to the pressed location immediately upon mousedown, but we don't want to show that yet.
+			// Instead, we want to wait until the user does something:
+			// Releasing the mouse means we reset the slider to its previous location, thus canceling the slider move. In that case, we focus the text entry.
+			// Moving the mouse left/right means we have begun dragging, so then we hide this fake one and continue showing the actual drag of the real slider.
+			.fake-slider-thumb {
+				position: absolute;
+				left: 2px;
+				right: 2px;
+				top: 0;
+				bottom: 0;
+				z-index: 2;
+				mix-blend-mode: screen;
+				pointer-events: none;
 
 				&::before {
 					content: "";
-					display: block;
-					width: 0;
-					height: 0;
-					border-style: solid;
-					border-width: 3px 0 3px 3px;
-					border-color: transparent transparent transparent var(--color-e-nearwhite);
+					position: absolute;
+					border-radius: 2px;
+					margin-left: -2px;
+					left: calc(var(--progress-factor) * 100%);
+					width: 4px;
+					height: 24px;
+					background: #5b5b5b; // Becomes var(--color-6-lowergray) with screen blend mode over var(--color-1-nearblack) background
 				}
 			}
 
-			&.left {
-				left: 0;
-				padding-left: 6px;
-				padding-right: 7px;
+			.slider-progress {
+				position: absolute;
+				top: 2px;
+				bottom: 2px;
+				left: 2px;
+				right: 2px;
+				pointer-events: none;
 
-				&::after {
+				&::before {
 					content: "";
-					display: block;
-					width: 0;
-					height: 0;
-					border-style: solid;
-					border-width: 3px 3px 3px 0;
-					border-color: transparent var(--color-e-nearwhite) transparent transparent;
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: calc(var(--progress-factor) * 100% - 2px);
+					height: 100%;
+					background: var(--color-2-mildblack);
+					border-radius: 1px 0 0 1px;
 				}
 			}
 		}
 	}
-
-	&.range {
-		position: relative;
-
-		input[type="text"],
-		label {
-			z-index: 1;
-		}
-
-		input[type="text"]:focus ~ .slider,
-		input[type="text"]:focus ~ .fake-slider-thumb,
-		input[type="text"]:focus ~ .slider-progress {
-			display: none;
-		}
-
-		.slider {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			padding: 0;
-			margin: 0;
-			-webkit-appearance: none; // Required until Safari 15.4 (Graphite supports 15.0+)
-			appearance: none;
-			background: none;
-			cursor: default;
-			// Except when disabled, the range slider goes above the label and input so it's interactable.
-			// Then we use the blend mode to make it appear behind which works since the text is almost white and background almost black.
-			// When disabled, the blend mode trick doesn't work with the grayer colors. But we don't need it to be interactable, so it can actually go behind properly.
-			z-index: 2;
-			mix-blend-mode: screen;
-
-			&.hidden {
-				opacity: 0;
-			}
-
-			// Chromium and Safari
-			&::-webkit-slider-thumb {
-				-webkit-appearance: none; // Required until Safari 15.4 (Graphite supports 15.0+)
-				appearance: none;
-				border-radius: 2px;
-				width: 4px;
-				height: 24px;
-				background: #494949; // Becomes var(--color-5-dullgray) with screen blend mode over var(--color-1-nearblack) background
-			}
-
-			&:hover::-webkit-slider-thumb {
-				background: #5b5b5b; // Becomes var(--color-6-lowergray) with screen blend mode over var(--color-1-nearblack) background
-			}
-
-			&:disabled {
-				mix-blend-mode: normal;
-				z-index: 0;
-
-				&::-webkit-slider-thumb {
-					background: var(--color-4-dimgray);
-				}
-			}
-
-			// Firefox
-			&::-moz-range-thumb {
-				border: none;
-				border-radius: 2px;
-				width: 4px;
-				height: 24px;
-				background: #494949; // Becomes var(--color-5-dullgray) with screen blend mode over var(--color-1-nearblack) background
-			}
-
-			&:hover::-moz-range-thumb {
-				background: #5b5b5b; // Becomes var(--color-6-lowergray) with screen blend mode over var(--color-1-nearblack) background
-			}
-
-			&:hover ~ .slider-progress::before {
-				background: var(--color-3-darkgray);
-			}
-
-			&::-moz-range-track {
-				height: 0;
-			}
-		}
-
-		// This fake slider thumb stays in the location of the real thumb while we have to hide the real slider between mousedown and mouseup or mousemove.
-		// That's because the range input element moves to the pressed location immediately upon mousedown, but we don't want to show that yet.
-		// Instead, we want to wait until the user does something:
-		// Releasing the mouse means we reset the slider to its previous location, thus canceling the slider move. In that case, we focus the text entry.
-		// Moving the mouse left/right means we have begun dragging, so then we hide this fake one and continue showing the actual drag of the real slider.
-		.fake-slider-thumb {
-			position: absolute;
-			left: 2px;
-			right: 2px;
-			top: 0;
-			bottom: 0;
-			z-index: 2;
-			mix-blend-mode: screen;
-			pointer-events: none;
-
-			&::before {
-				content: "";
-				position: absolute;
-				border-radius: 2px;
-				margin-left: -2px;
-				left: calc(var(--progress-factor) * 100%);
-				width: 4px;
-				height: 24px;
-				background: #5b5b5b; // Becomes var(--color-6-lowergray) with screen blend mode over var(--color-1-nearblack) background
-			}
-		}
-
-		.slider-progress {
-			position: absolute;
-			top: 2px;
-			bottom: 2px;
-			left: 2px;
-			right: 2px;
-			pointer-events: none;
-
-			&::before {
-				content: "";
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: calc(var(--progress-factor) * 100% - 2px);
-				height: 100%;
-				background: var(--color-2-mildblack);
-				border-radius: 1px 0 0 1px;
-			}
-		}
-	}
-}
 </style>

frontend/src/components/widgets/inputs/OptionalInput.svelte

@@ -1,49 +1,36 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { type IconName } from "@/utility-functions/icons";
 
-import { type IconName } from "@/utility-functions/icons";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.svelte";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
-
-export default defineComponent({
-	emits: ["update:checked"],
-	props: {
-		checked: { type: Boolean as PropType<boolean>, required: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		icon: { type: String as PropType<IconName>, default: "Checkmark" },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-	},
-	components: {
-		CheckboxInput,
-		LayoutRow,
-	},
-});
+	export let checked: boolean;
+	export let disabled = false;
+	export let icon: IconName = "Checkmark";
+	export let tooltip: string | undefined = undefined;
 </script>
 
-<template>
-	<LayoutRow class="optional-input" :class="disabled">
-		<CheckboxInput :checked="checked" :disabled="disabled" @input="(e: Event) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" :tooltip="tooltip" />
-	</LayoutRow>
-</template>
+<LayoutRow class="optional-input" classes={{ disabled }}>
+	<CheckboxInput {checked} on:checked {disabled} {icon} {tooltip} />
+</LayoutRow>
 
-<style lang="scss">
-.optional-input {
-	flex-grow: 0;
+<style lang="scss" global>
+	.optional-input {
+		flex-grow: 0;
 
-	label {
-		align-items: center;
-		justify-content: center;
-		white-space: nowrap;
-		width: 24px;
-		height: 24px;
-		border: 1px solid var(--color-5-dullgray);
-		border-radius: 2px 0 0 2px;
-		box-sizing: border-box;
+		.checkbox-input label {
+			align-items: center;
+			justify-content: center;
+			white-space: nowrap;
+			width: 24px;
+			height: 24px;
+			border: 1px solid var(--color-5-dullgray);
+			border-radius: 2px 0 0 2px;
+			box-sizing: border-box;
+		}
+
+		&.disabled .checkbox-input label {
+			border: 1px solid var(--color-4-dimgray);
+		}
 	}
-
-	&.disabled label {
-		border: 1px solid var(--color-4-dimgray);
-	}
-}
 </style>

frontend/src/components/widgets/inputs/RadioInput.svelte

@@ -1,123 +1,119 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import { type RadioEntries, type RadioEntryData } from "@/wasm-communication/messages";
+	import { type RadioEntries, type RadioEntryData } from "@/wasm-communication/messages";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
 
-export default defineComponent({
-	emits: ["update:selectedIndex"],
-	props: {
-		entries: { type: Array as PropType<RadioEntries>, required: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		selectedIndex: { type: Number as PropType<number>, required: true },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
-	},
-	methods: {
-		handleEntryClick(radioEntryData: RadioEntryData) {
-			const index = this.entries.indexOf(radioEntryData);
-			this.$emit("update:selectedIndex", index);
+	// emits: ["update:selectedIndex"],
+	const dispatch = createEventDispatcher<{ selectedIndex: number }>();
 
-			radioEntryData.action?.();
-		},
-	},
-	components: {
-		IconLabel,
-		LayoutRow,
-		TextLabel,
-	},
-});
+	export let entries: RadioEntries;
+	export let selectedIndex: number;
+	export let disabled = false;
+	export let sharpRightCorners = false;
+
+	function handleEntryClick(radioEntryData: RadioEntryData) {
+		const index = entries.indexOf(radioEntryData);
+		dispatch("selectedIndex", index);
+
+		radioEntryData.action?.();
+	}
 </script>
 
-<template>
-	<LayoutRow class="radio-input" :class="{ disabled }">
+<LayoutRow class="radio-input" classes={{ disabled }}>
+	{#each entries as entry, index (index)}
 		<button
-			:class="{ active: index === selectedIndex, disabled, 'sharp-right-corners': index === entries.length - 1 && sharpRightCorners }"
-			v-for="(entry, index) in entries"
-			:key="index"
-			@click="() => handleEntryClick(entry)"
-			:title="entry.tooltip"
-			:tabindex="index === selectedIndex ? -1 : 0"
-			:disabled="disabled"
+			class:active={index === selectedIndex}
+			class:disabled
+			class:sharp-right-corners={index === entries.length - 1 && sharpRightCorners}
+			on:click={() => handleEntryClick(entry)}
+			title={entry.tooltip}
+			tabindex={index === selectedIndex ? -1 : 0}
+			{disabled}
 		>
-			<IconLabel v-if="entry.icon" :icon="entry.icon" />
-			<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
+			{#if entry.icon}
+				<IconLabel icon={entry.icon} />
+			{/if}
+			{#if entry.label}
+				<TextLabel>{entry.label}</TextLabel>
+			{/if}
 		</button>
-	</LayoutRow>
-</template>
+	{/each}
+</LayoutRow>
 
-<style lang="scss">
-.radio-input {
-	button {
-		background: var(--color-5-dullgray);
-		fill: var(--color-e-nearwhite);
-		height: 24px;
-		margin: 0;
-		padding: 0 4px;
-		border: none;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+<style lang="scss" global>
+	.radio-input {
+		button {
+			background: var(--color-5-dullgray);
+			fill: var(--color-e-nearwhite);
+			height: 24px;
+			margin: 0;
+			padding: 0 4px;
+			border: none;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 
-		&:hover {
-			background: var(--color-6-lowergray);
-			color: var(--color-f-white);
+			&:hover {
+				background: var(--color-6-lowergray);
+				color: var(--color-f-white);
 
-			svg {
-				fill: var(--color-f-white);
-			}
-		}
-
-		&.active {
-			background: var(--color-e-nearwhite);
-			color: var(--color-2-mildblack);
-
-			svg {
-				fill: var(--color-2-mildblack);
-			}
-		}
-
-		&.disabled {
-			background: var(--color-4-dimgray);
-			color: var(--color-8-uppergray);
-
-			svg {
-				fill: var(--color-8-uppergray);
+				svg {
+					fill: var(--color-f-white);
+				}
 			}
 
 			&.active {
-				background: var(--color-8-uppergray);
+				background: var(--color-e-nearwhite);
 				color: var(--color-2-mildblack);
 
 				svg {
 					fill: var(--color-2-mildblack);
 				}
 			}
+
+			&.disabled {
+				background: var(--color-4-dimgray);
+				color: var(--color-8-uppergray);
+
+				svg {
+					fill: var(--color-8-uppergray);
+				}
+
+				&.active {
+					background: var(--color-8-uppergray);
+					color: var(--color-2-mildblack);
+
+					svg {
+						fill: var(--color-2-mildblack);
+					}
+				}
+			}
+
+			& + button {
+				margin-left: 1px;
+			}
+
+			&:first-of-type {
+				border-radius: 2px 0 0 2px;
+			}
+
+			&:last-of-type {
+				border-radius: 0 2px 2px 0;
+			}
 		}
 
-		& + button {
-			margin-left: 1px;
+		.text-label {
+			margin: 0 4px;
+			overflow: hidden;
 		}
 
-		&:first-of-type {
-			border-radius: 2px 0 0 2px;
-		}
-
-		&:last-of-type {
-			border-radius: 0 2px 2px 0;
+		&.combined-before button:first-of-type,
+		&.combined-after button:last-of-type {
+			border-radius: 0;
 		}
 	}
-
-	.text-label {
-		margin: 0 4px;
-		overflow: hidden;
-	}
-
-	&.combined-before button:first-of-type,
-	&.combined-after button:last-of-type {
-		border-radius: 0;
-	}
-}
 </style>

frontend/src/components/widgets/inputs/SwatchPairInput.svelte

@@ -1,96 +1,104 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { getContext } from "svelte";
 
-import { type Color } from "@/wasm-communication/messages";
+	import { type Color } from "@/wasm-communication/messages";
 
-import ColorPicker from "@/components/floating-menus/ColorPicker.vue";
-import LayoutCol from "@/components/layout/LayoutCol.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
+	import ColorPicker from "@/components/floating-menus/ColorPicker.svelte";
+	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import { Editor } from "@/wasm-communication/editor";
 
-export default defineComponent({
-	inject: ["editor"],
-	props: {
-		primary: { type: Object as PropType<Color>, required: true },
-		secondary: { type: Object as PropType<Color>, required: true },
-	},
-	data() {
-		return {
-			primaryOpen: false,
-			secondaryOpen: false,
-		};
-	},
-	methods: {
-		clickPrimarySwatch() {
-			this.primaryOpen = true;
-			this.secondaryOpen = false;
-		},
-		clickSecondarySwatch() {
-			this.primaryOpen = false;
-			this.secondaryOpen = true;
-		},
-		primaryColorChanged(color: Color) {
-			this.editor.instance.updatePrimaryColor(color.red, color.green, color.blue, color.alpha);
-		},
-		secondaryColorChanged(color: Color) {
-			this.editor.instance.updateSecondaryColor(color.red, color.green, color.blue, color.alpha);
-		},
-	},
-	components: {
-		ColorPicker,
-		LayoutCol,
-		LayoutRow,
-	},
-});
+	const editor = getContext<Editor>("editor");
+
+	export let primary: Color;
+	export let secondary: Color;
+
+	let primaryOpen = false;
+	let secondaryOpen = false;
+
+	function clickPrimarySwatch() {
+		primaryOpen = true;
+		secondaryOpen = false;
+	}
+
+	function clickSecondarySwatch() {
+		primaryOpen = false;
+		secondaryOpen = true;
+	}
+
+	function primaryColorChanged(color: Color) {
+		editor.instance.updatePrimaryColor(color.red, color.green, color.blue, color.alpha);
+	}
+
+	function secondaryColorChanged(color: Color) {
+		editor.instance.updateSecondaryColor(color.red, color.green, color.blue, color.alpha);
+	}
 </script>
 
-<template>
-	<LayoutCol class="swatch-pair">
-		<LayoutRow class="primary swatch">
-			<button @click="() => clickPrimarySwatch()" :style="{ '--swatch-color': primary.toRgbaCSS() }" data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
-			<ColorPicker v-model:open="primaryOpen" :color="primary" @update:color="(color: Color) => primaryColorChanged(color)" :direction="'Right'" />
-		</LayoutRow>
-		<LayoutRow class="secondary swatch">
-			<button @click="() => clickSecondarySwatch()" :style="{ '--swatch-color': secondary.toRgbaCSS() }" data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
-			<ColorPicker v-model:open="secondaryOpen" :color="secondary" @update:color="(color: Color) => secondaryColorChanged(color)" :direction="'Right'" />
-		</LayoutRow>
-	</LayoutCol>
-</template>
+<LayoutCol class="swatch-pair">
+	<LayoutRow class="primary swatch">
+		<button on:click={clickPrimarySwatch} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
+		<ColorPicker
+			open={primaryOpen}
+			on:open={({ detail }) => (primaryOpen = detail)}
+			color={primary}
+			on:color={({ detail }) => {
+				primary = detail;
+				primaryColorChanged(detail);
+			}}
+			direction="Right"
+		/>
+	</LayoutRow>
+	<LayoutRow class="secondary swatch">
+		<button on:click={clickSecondarySwatch} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
+		<ColorPicker
+			open={secondaryOpen}
+			on:open={({ detail }) => (secondaryOpen = detail)}
+			color={secondary}
+			on:color={({ detail }) => {
+				secondary = detail;
+				secondaryColorChanged(detail);
+			}}
+			direction="Right"
+		/>
+	</LayoutRow>
+</LayoutCol>
 
-<style lang="scss">
-.swatch-pair {
-	flex: 0 0 auto;
+<style lang="scss" global>
+	.swatch-pair {
+		flex: 0 0 auto;
 
-	.swatch {
-		width: 28px;
-		height: 28px;
-		margin: 0 2px;
-		position: relative;
+		.swatch {
+			width: 28px;
+			height: 28px;
+			margin: 0 2px;
+			position: relative;
 
-		> button {
-			--swatch-color: #ffffff;
-			width: 100%;
-			height: 100%;
-			border-radius: 50%;
-			border: 2px var(--color-5-dullgray) solid;
-			box-shadow: 0 0 0 2px var(--color-3-darkgray);
-			margin: 0;
-			padding: 0;
-			box-sizing: border-box;
-			background: linear-gradient(var(--swatch-color), var(--swatch-color)), var(--color-transparent-checkered-background);
-			background-size: var(--color-transparent-checkered-background-size);
-			background-position: var(--color-transparent-checkered-background-position);
-			overflow: hidden;
-		}
+			> button {
+				--swatch-color: #ffffff;
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				border: 2px var(--color-5-dullgray) solid;
+				box-shadow: 0 0 0 2px var(--color-3-darkgray);
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+				background: linear-gradient(var(--swatch-color), var(--swatch-color)), var(--color-transparent-checkered-background);
+				background-size: var(--color-transparent-checkered-background-size);
+				background-position: var(--color-transparent-checkered-background-position);
+				overflow: hidden;
+			}
 
-		.floating-menu {
-			top: 50%;
-			right: -2px;
-		}
+			.floating-menu {
+				top: 50%;
+				right: -2px;
+			}
 
-		&.primary {
-			margin-bottom: -8px;
-			z-index: 1;
+			&.primary {
+				margin-bottom: -8px;
+				z-index: 1;
+			}
 		}
 	}
-}
 </style>

frontend/src/components/widgets/inputs/TextAreaInput.svelte

@@ -1,76 +1,64 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
+	import FieldInput from "@/components/widgets/inputs/FieldInput.svelte";
 
-export default defineComponent({
-	emits: ["update:value", "commitText"],
-	props: {
-		value: { type: String as PropType<string>, required: true },
-		label: { type: String as PropType<string>, required: false },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-	},
-	data() {
-		return {
-			editing: false,
-		};
-	},
-	computed: {
-		inputValue: {
-			get() {
-				return this.value;
-			},
-			set(value: string) {
-				this.$emit("update:value", value);
-			},
-		},
-	},
-	methods: {
-		onTextFocused() {
-			this.editing = true;
-		},
-		// Called only when `value` is changed from the <textarea> element via user input and committed, either
-		// via the `change` event or when the <input> element is unfocused (with the `blur` event binding)
-		onTextChanged() {
-			// The `unFocus()` call in `onCancelTextChange()` causes itself to be run again, so this if statement skips a second run
-			if (!this.editing) return;
+	// emits: ["update:value", "commitText"],
+	const dispatch = createEventDispatcher<{ commitText: string }>();
 
-			this.onCancelTextChange();
+	export let value: string;
+	export let label: string | undefined = undefined;
+	export let tooltip: string | undefined = undefined;
+	export let disabled = false;
 
-			// TODO: Find a less hacky way to do this
-			const inputElement = this.$refs.fieldInput as typeof FieldInput | undefined;
-			if (!inputElement) return;
-			this.$emit("commitText", inputElement.getInputElementValue());
+	let self: FieldInput;
+	let editing = false;
 
-			// Required if value is not changed by the parent component upon update:value event
-			inputElement.setInputElementValue(this.value);
-		},
-		onCancelTextChange() {
-			this.editing = false;
+	function onTextFocused() {
+		editing = true;
+	}
 
-			(this.$refs.fieldInput as typeof FieldInput | undefined)?.unFocus();
-		},
-	},
-	components: { FieldInput },
-});
+	// Called only when `value` is changed from the <textarea> element via user input and committed, either
+	// via the `change` event or when the <input> element is unfocused (with the `blur` event binding)
+	function onTextChanged() {
+		// The `unFocus()` call in `onCancelTextChange()` causes itself to be run again, so this if statement skips a second run
+		if (!editing) return;
+
+		onCancelTextChange();
+
+		// TODO: Find a less hacky way to do this
+		dispatch("commitText", self.getValue());
+
+		// Required if value is not changed by the parent component upon update:value event
+		self.setInputElementValue(value);
+	}
+
+	function onCancelTextChange() {
+		editing = false;
+
+		self.unFocus();
+	}
+
+	export function focus() {
+		self.focus();
+	}
 </script>
 
-<template>
-	<FieldInput
-		:textarea="true"
-		class="text-area-input"
-		:class="{ 'has-label': label }"
-		:label="label"
-		:spellcheck="true"
-		:disabled="disabled"
-		:tooltip="tooltip"
-		v-model:value="inputValue"
-		@textFocused="() => onTextFocused()"
-		@textChanged="() => onTextChanged()"
-		@cancelTextChange="() => onCancelTextChange()"
-		ref="fieldInput"
-	></FieldInput>
-</template>
+<FieldInput
+	class="text-area-input"
+	classes={{ "has-label": Boolean(label) }}
+	{value}
+	on:value
+	on:textFocused={onTextFocused}
+	on:textChanged={onTextChanged}
+	on:cancelTextChange={onCancelTextChange}
+	textarea={true}
+	spellcheck={true}
+	{label}
+	{disabled}
+	{tooltip}
+	bind:this={self}
+/>
 
-<style lang="scss"></style>
+<style lang="scss" global>
+</style>

frontend/src/components/widgets/inputs/TextInput.svelte

@@ -1,103 +1,87 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";
 
-import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
+	import FieldInput from "@/components/widgets/inputs/FieldInput.svelte";
 
-export default defineComponent({
-	emits: ["update:value", "commitText"],
-	props: {
-		// Label
-		label: { type: String as PropType<string>, required: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-		placeholder: { type: String as PropType<string>, required: false },
+	// emits: ["update:value", "commitText"],
+	const dispatch = createEventDispatcher<{ commitText: string }>();
 
-		// Disabled
-		disabled: { type: Boolean as PropType<boolean>, default: false },
+	// Label
+	export let label: string | undefined = undefined;
+	export let tooltip: string | undefined = undefined;
+	export let placeholder: string | undefined = undefined;
+	// Disabled
+	export let disabled = false;
+	// Value
+	export let value: string;
+	// Styling
+	export let centered = false;
+	export let minWidth = 0;
+	export let sharpRightCorners = false;
 
-		// Value
-		value: { type: String as PropType<string>, required: true },
+	let self: FieldInput;
+	let editing = false;
 
-		// Styling
-		centered: { type: Boolean as PropType<boolean>, default: false },
-		minWidth: { type: Number as PropType<number>, default: 0 },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
-	},
-	data() {
-		return {
-			editing: false,
-		};
-	},
-	computed: {
-		text: {
-			get() {
-				return this.value;
-			},
-			set(value: string) {
-				this.$emit("update:value", value);
-			},
-		},
-	},
-	methods: {
-		onTextFocused() {
-			this.editing = true;
+	function onTextFocused() {
+		editing = true;
 
-			(this.$refs.fieldInput as typeof FieldInput | undefined)?.selectAllText(this.text);
-		},
-		// Called only when `value` is changed from the <input> element via user input and committed, either with the
-		// enter key (via the `change` event) or when the <input> element is unfocused (with the `blur` event binding)
-		onTextChanged() {
-			// The `unFocus()` call in `onCancelTextChange()` causes itself to be run again, so this if statement skips a second run
-			if (!this.editing) return;
+		self.selectAllText(value);
+	}
 
-			this.onCancelTextChange();
+	// Called only when `value` is changed from the <input> element via user input and committed, either with the
+	// enter key (via the `change` event) or when the <input> element is unfocused (with the `blur` event binding)
+	function onTextChanged() {
+		// The `unFocus()` call in `onCancelTextChange()` causes itself to be run again, so this if statement skips a second run
+		if (!editing) return;
 
-			// TODO: Find a less hacky way to do this
-			const inputElement = this.$refs.fieldInput as typeof FieldInput | undefined;
-			if (!inputElement) return;
-			this.$emit("commitText", inputElement.getInputElementValue());
+		onCancelTextChange();
 
-			// Required if value is not changed by the parent component upon update:value event
-			inputElement.setInputElementValue(this.value);
-		},
-		onCancelTextChange() {
-			this.editing = false;
+		// TODO: Find a less hacky way to do this
+		dispatch("commitText", self.getValue());
 
-			(this.$refs.fieldInput as typeof FieldInput | undefined)?.unFocus();
-		},
-	},
-	components: { FieldInput },
-});
+		// Required if value is not changed by the parent component upon update:value event
+		self.setInputElementValue(value);
+	}
+
+	function onCancelTextChange() {
+		editing = false;
+
+		self.unFocus();
+	}
+
+	export function focus() {
+		self.focus();
+	}
 </script>
 
-<template>
-	<FieldInput
-		class="text-input"
-		:class="{ centered }"
-		v-model:value="text"
-		:label="label"
-		:spellcheck="true"
-		:disabled="disabled"
-		:tooltip="tooltip"
-		:placeholder="placeholder"
-		:style="{ 'min-width': minWidth > 0 ? `${minWidth}px` : undefined }"
-		:sharpRightCorners="sharpRightCorners"
-		@textFocused="() => onTextFocused()"
-		@textChanged="() => onTextChanged()"
-		@cancelTextChange="() => onCancelTextChange()"
-		ref="fieldInput"
-	></FieldInput>
-</template>
+<FieldInput
+	class="text-input"
+	classes={{ centered }}
+	styles={{ "min-width": minWidth > 0 ? `${minWidth}px` : undefined }}
+	{value}
+	on:value
+	on:textFocused={onTextFocused}
+	on:textChanged={onTextChanged}
+	on:cancelTextChange={onCancelTextChange}
+	spellcheck={true}
+	{label}
+	{disabled}
+	{tooltip}
+	{placeholder}
+	{sharpRightCorners}
+	bind:this={self}
+/>
 
-<style lang="scss">
-.text-input {
-	input {
-		text-align: left;
-	}
+<style lang="scss" global>
+	.text-input {
+		input {
+			text-align: left;
+		}
 
-	&.centered {
-		input:not(:focus) {
-			text-align: center;
+		&.centered {
+			input:not(:focus) {
+				text-align: center;
+			}
 		}
 	}
-}
 </style>

frontend/src/components/widgets/labels/IconLabel.svelte

@@ -1,56 +1,49 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { type IconName, ICONS, ICON_SVG_STRINGS } from "@/utility-functions/icons";
 
-import { type IconName, ICONS, ICON_COMPONENTS } from "@/utility-functions/icons";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
+	let className = "";
+	export { className as class };
+	export let classes: Record<string, boolean> = {};
+	export let icon: IconName;
+	export let disabled = false;
+	export let tooltip: string | undefined = undefined;
 
-export default defineComponent({
-	props: {
-		icon: { type: String as PropType<IconName>, required: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-	},
-	computed: {
-		iconSizeClass(): string {
-			return `size-${ICONS[this.icon].size}`;
-		},
-	},
-	components: {
-		LayoutRow,
-		...ICON_COMPONENTS,
-	},
-});
+	$: iconSizeClass = ((icon: IconName) => {
+		return `size-${ICONS[icon].size}`;
+	})(icon);
+	$: extraClasses = Object.entries(classes)
+		.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
+		.join(" ");
 </script>
 
-<template>
-	<LayoutRow :class="['icon-label', iconSizeClass, { disabled }]" :title="tooltip">
-		<component :is="icon" />
-	</LayoutRow>
-</template>
+<LayoutRow class={`icon-label ${iconSizeClass} ${className} ${extraClasses}`.trim()} classes={{ disabled }} {tooltip}>
+	{@html ICON_SVG_STRINGS[icon]}
+</LayoutRow>
 
-<style lang="scss">
-.icon-label {
-	flex: 0 0 auto;
-	fill: var(--color-e-nearwhite);
+<style lang="scss" global>
+	.icon-label {
+		flex: 0 0 auto;
+		fill: var(--color-e-nearwhite);
 
-	&.disabled {
-		fill: var(--color-8-uppergray);
+		&.disabled {
+			fill: var(--color-8-uppergray);
+		}
+
+		&.size-12 {
+			width: 12px;
+			height: 12px;
+		}
+
+		&.size-16 {
+			width: 16px;
+			height: 16px;
+		}
+
+		&.size-24 {
+			width: 24px;
+			height: 24px;
+		}
 	}
-
-	&.size-12 {
-		width: 12px;
-		height: 12px;
-	}
-
-	&.size-16 {
-		width: 16px;
-		height: 16px;
-	}
-
-	&.size-24 {
-		width: 24px;
-		height: 24px;
-	}
-}
 </style>

frontend/src/components/widgets/labels/Separator.svelte

@@ -1,86 +1,80 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { type SeparatorDirection, type SeparatorType } from "@/wasm-communication/messages";
 
-import { type SeparatorDirection, type SeparatorType } from "@/wasm-communication/messages";
-
-export default defineComponent({
-	props: {
-		direction: { type: String as PropType<SeparatorDirection>, default: "Horizontal" },
-		type: { type: String as PropType<SeparatorType>, default: "Unrelated" },
-	},
-});
+	export let direction: SeparatorDirection = "Horizontal";
+	export let type: SeparatorType = "Unrelated";
 </script>
 
-<template>
-	<div class="separator" :class="[direction.toLowerCase(), type.toLowerCase()]">
-		<div v-if="['Section', 'List'].includes(type)"></div>
-	</div>
-</template>
+<div class={`separator ${direction.toLowerCase()} ${type.toLowerCase()}`}>
+	{#if ["Section", "List"].includes(type)}
+		<div />
+	{/if}
+</div>
 
-<style lang="scss">
-.separator {
-	&.vertical {
-		flex: 0 0 auto;
+<style lang="scss" global>
+	.separator {
+		&.vertical {
+			flex: 0 0 auto;
 
-		&.related {
-			height: 4px;
-		}
-
-		&.unrelated {
-			height: 8px;
-		}
-
-		&.section,
-		&.list {
-			width: 100%;
-
-			div {
-				height: 1px;
-				width: calc(100% - 8px);
-				margin: 0 4px;
-				background: var(--color-7-middlegray);
+			&.related {
+				height: 4px;
 			}
-		}
 
-		&.section {
-			margin: 8px 0;
-		}
+			&.unrelated {
+				height: 8px;
+			}
 
-		&.list {
-			margin: 4px 0;
-		}
-	}
+			&.section,
+			&.list {
+				width: 100%;
 
-	&.horizontal {
-		flex: 0 0 auto;
+				div {
+					height: 1px;
+					width: calc(100% - 8px);
+					margin: 0 4px;
+					background: var(--color-7-middlegray);
+				}
+			}
 
-		&.related {
-			width: 4px;
-		}
+			&.section {
+				margin: 8px 0;
+			}
 
-		&.unrelated {
-			width: 8px;
-		}
-
-		&.section,
-		&.list {
-			height: 100%;
-
-			div {
-				height: calc(100% - 8px);
-				width: 1px;
+			&.list {
 				margin: 4px 0;
-				background: var(--color-7-middlegray);
 			}
 		}
 
-		&.section {
-			margin: 0 8px;
-		}
+		&.horizontal {
+			flex: 0 0 auto;
 
-		&.list {
-			margin: 0 4px;
+			&.related {
+				width: 4px;
+			}
+
+			&.unrelated {
+				width: 8px;
+			}
+
+			&.section,
+			&.list {
+				height: 100%;
+
+				div {
+					height: calc(100% - 8px);
+					width: 1px;
+					margin: 4px 0;
+					background: var(--color-7-middlegray);
+				}
+			}
+
+			&.section {
+				margin: 0 8px;
+			}
+
+			&.list {
+				margin: 0 4px;
+			}
 		}
 	}
-}
 </style>

frontend/src/components/widgets/labels/TextLabel.svelte

@@ -1,52 +1,67 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	let className = "";
+	export { className as class };
+	export let classes: Record<string, boolean> = {};
+	let styleName = "";
+	export { styleName as style };
+	export let styles: Record<string, string | number | undefined> = {};
+	export let disabled = false;
+	export let bold = false;
+	export let italic = false;
+	export let tableAlign = false;
+	export let minWidth = 0;
+	export let multiline = false;
+	export let tooltip: string | undefined = undefined;
 
-export default defineComponent({
-	props: {
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		bold: { type: Boolean as PropType<boolean>, default: false },
-		italic: { type: Boolean as PropType<boolean>, default: false },
-		tableAlign: { type: Boolean as PropType<boolean>, default: false },
-		minWidth: { type: Number as PropType<number>, default: 0 },
-		multiline: { type: Boolean as PropType<boolean>, default: false },
-		tooltip: { type: String as PropType<string | undefined>, required: false },
-	},
-});
+	$: extraClasses = Object.entries(classes)
+		.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
+		.join(" ");
+	$: extraStyles = Object.entries(styles)
+		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
+		.join(" ");
 </script>
 
-<template>
-	<span class="text-label" :class="{ disabled, bold, italic, multiline, 'table-align': tableAlign }" :style="{ 'min-width': minWidth > 0 ? `${minWidth}px` : undefined }" :title="tooltip">
-		<slot></slot>
-	</span>
-</template>
+<span
+	class={`text-label ${className} ${extraClasses}`.trim()}
+	class:disabled
+	class:bold
+	class:italic
+	class:multiline
+	class:table-align={tableAlign}
+	style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
+	style={`${styleName} ${extraStyles}`.trim() || undefined}
+	title={tooltip}
+>
+	<slot />
+</span>
 
-<style lang="scss">
-.text-label {
-	line-height: 18px;
-	white-space: nowrap;
-	// Force Safari to not draw a text cursor, even though this element has `user-select: none`
-	cursor: default;
+<style lang="scss" global>
+	.text-label {
+		line-height: 18px;
+		white-space: nowrap;
+		// Force Safari to not draw a text cursor, even though this element has `user-select: none`
+		cursor: default;
 
-	&.disabled {
-		color: var(--color-8-uppergray);
+		&.disabled {
+			color: var(--color-8-uppergray);
+		}
+
+		&.bold {
+			font-weight: 700;
+		}
+
+		&.italic {
+			font-style: italic;
+		}
+
+		&.multiline {
+			white-space: pre-wrap;
+			margin: 4px 0;
+		}
+
+		&.table-align {
+			flex: 0 0 30%;
+			text-align: right;
+		}
 	}
-
-	&.bold {
-		font-weight: 700;
-	}
-
-	&.italic {
-		font-style: italic;
-	}
-
-	&.multiline {
-		white-space: pre-wrap;
-		margin: 4px 0;
-	}
-
-	&.table-align {
-		flex: 0 0 30%;
-		text-align: right;
-	}
-}
 </style>

frontend/src/components/widgets/labels/UserInputLabel.svelte

@@ -1,249 +1,248 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { type IconName } from "@/utility-functions/icons";
+	import { platformIsMac } from "@/utility-functions/platform";
+	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@/wasm-communication/messages";
 
-import { type IconName } from "@/utility-functions/icons";
-import { platformIsMac } from "@/utility-functions/platform";
-import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@/wasm-communication/messages";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import Separator from "@/components/widgets/labels/Separator.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import { getContext } from "svelte";
+	import { type FullscreenState } from "@/state-providers/fullscreen";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import Separator from "@/components/widgets/labels/Separator.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	type LabelData = { label?: string; icon?: IconName; width: string };
 
-type LabelData = { label?: string; icon?: IconName; width: string };
+	// Keys that become icons if they are listed here with their units of width
+	const ICON_WIDTHS_MAC = {
+		Shift: 2,
+		Control: 2,
+		Option: 2,
+		Command: 2,
+	};
+	const ICON_WIDTHS = {
+		ArrowUp: 1,
+		ArrowRight: 1,
+		ArrowDown: 1,
+		ArrowLeft: 1,
+		Backspace: 2,
+		Enter: 2,
+		Tab: 2,
+		Space: 3,
+		...(platformIsMac() ? ICON_WIDTHS_MAC : {}),
+	};
 
-// Keys that become icons if they are listed here with their units of width
-const ICON_WIDTHS_MAC = {
-	Shift: 2,
-	Control: 2,
-	Option: 2,
-	Command: 2,
-};
-const ICON_WIDTHS = {
-	ArrowUp: 1,
-	ArrowRight: 1,
-	ArrowDown: 1,
-	ArrowLeft: 1,
-	Backspace: 2,
-	Enter: 2,
-	Tab: 2,
-	Space: 3,
-	...(platformIsMac() ? ICON_WIDTHS_MAC : {}),
-};
+	const fullscreen = getContext<FullscreenState>("fullscreen");
 
-export default defineComponent({
-	inject: ["fullscreen"],
-	props: {
-		keysWithLabelsGroups: { type: Array as PropType<LayoutKeysGroup[]>, default: () => [] },
-		mouseMotion: { type: String as PropType<MouseMotion | undefined>, required: false },
-		requiresLock: { type: Boolean as PropType<boolean>, default: false },
-	},
-	computed: {
-		hasSlotContent(): boolean {
-			return Boolean(this.$slots.default);
-		},
-		keyboardLockInfoMessage(): string {
-			const RESERVED = "This hotkey is reserved by the browser. ";
-			const USE_FULLSCREEN = "It is made available in fullscreen mode.";
-			const USE_SECURE_CTX = "It is made available in fullscreen mode when this website is served from a secure context (https or localhost).";
-			const SWITCH_BROWSER = "Use a Chromium-based browser (like Chrome or Edge) in fullscreen mode to directly use the shortcut.";
+	export let keysWithLabelsGroups: LayoutKeysGroup[] = [];
+	export let mouseMotion: MouseMotion | undefined = undefined;
+	export let requiresLock = false;
 
-			if (this.fullscreen.keyboardLockApiSupported) return `${RESERVED} ${USE_FULLSCREEN}`;
-			if (!("chrome" in window)) return `${RESERVED} ${SWITCH_BROWSER}`;
-			if (!window.isSecureContext) return `${RESERVED} ${USE_SECURE_CTX}`;
-			return RESERVED;
-		},
-		displayKeyboardLockNotice(): boolean {
-			return this.requiresLock && !this.fullscreen.state.keyboardLocked;
-		},
-	},
-	methods: {
-		keyTextOrIconList(keyGroup: LayoutKeysGroup): LabelData[] {
-			return keyGroup.map((key) => this.keyTextOrIcon(key));
-		},
-		keyTextOrIcon(keyWithLabel: Key): LabelData {
-			// `key` is the name of the `Key` enum in Rust, while `label` is the localized string to display (if it doesn't become an icon)
-			let key = keyWithLabel.key;
-			const label = keyWithLabel.label;
+	$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported);
+	$: displayKeyboardLockNotice = requiresLock && !$fullscreen.keyboardLocked;
 
-			// Replace Alt and Accel keys with their Mac-specific equivalents
-			if (platformIsMac()) {
-				if (key === "Alt") key = "Option";
-				if (key === "Accel") key = "Command";
-			}
+	function watchKeyboardLockInfoMessage(keyboardLockApiSupported: boolean): string {
+		const RESERVED = "This hotkey is reserved by the browser. ";
+		const USE_FULLSCREEN = "It is made available in fullscreen mode.";
+		const USE_SECURE_CTX = "It is made available in fullscreen mode when this website is served from a secure context (https or localhost).";
+		const SWITCH_BROWSER = "Use a Chromium-based browser (like Chrome or Edge) in fullscreen mode to directly use the shortcut.";
 
-			// Either display an icon...
-			// @ts-expect-error We want undefined if it isn't in the object
-			const iconWidth: number | undefined = ICON_WIDTHS[key];
-			const icon = iconWidth !== undefined && iconWidth > 0 && (this.keyboardHintIcon(key) || false);
-			if (icon) return { icon, width: `width-${iconWidth}` };
+		if (keyboardLockApiSupported) return `${RESERVED} ${USE_FULLSCREEN}`;
+		if (!("chrome" in window)) return `${RESERVED} ${SWITCH_BROWSER}`;
+		if (!window.isSecureContext) return `${RESERVED} ${USE_SECURE_CTX}`;
+		return RESERVED;
+	}
 
-			// ...or display text
-			return { label, width: `width-${label.length}` };
-		},
-		mouseHintIcon(input?: MouseMotion): IconName {
-			return `MouseHint${input}` as IconName;
-		},
-		keyboardHintIcon(input: KeyRaw): IconName | undefined {
-			switch (input) {
-				case "ArrowDown":
-					return "KeyboardArrowDown";
-				case "ArrowLeft":
-					return "KeyboardArrowLeft";
-				case "ArrowRight":
-					return "KeyboardArrowRight";
-				case "ArrowUp":
-					return "KeyboardArrowUp";
-				case "Backspace":
-					return "KeyboardBackspace";
-				case "Command":
-					return "KeyboardCommand";
-				case "Control":
-					return "KeyboardControl";
-				case "Enter":
-					return "KeyboardEnter";
-				case "Option":
-					return "KeyboardOption";
-				case "Shift":
-					return "KeyboardShift";
-				case "Space":
-					return "KeyboardSpace";
-				case "Tab":
-					return "KeyboardTab";
-				default:
-					return undefined;
-			}
-		},
-	},
-	components: {
-		IconLabel,
-		LayoutRow,
-		Separator,
-		TextLabel,
-	},
-});
+	function keyTextOrIconList(keyGroup: LayoutKeysGroup): LabelData[] {
+		return keyGroup.map((key) => keyTextOrIcon(key));
+	}
+
+	function keyTextOrIcon(keyWithLabel: Key): LabelData {
+		// `key` is the name of the `Key` enum in Rust, while `label` is the localized string to display (if it doesn't become an icon)
+		let key = keyWithLabel.key;
+		const label = keyWithLabel.label;
+
+		// Replace Alt and Accel keys with their Mac-specific equivalents
+		if (platformIsMac()) {
+			if (key === "Alt") key = "Option";
+			if (key === "Accel") key = "Command";
+		}
+
+		// Either display an icon...
+		// @ts-expect-error We want undefined if it isn't in the object
+		const iconWidth: number | undefined = ICON_WIDTHS[key];
+		const icon = iconWidth !== undefined && iconWidth > 0 && (keyboardHintIcon(key) || false);
+		if (icon) return { icon, width: `width-${iconWidth}` };
+
+		// ...or display text
+		return { label, width: `width-${label.length}` };
+	}
+
+	function mouseHintIcon(input?: MouseMotion): IconName {
+		return `MouseHint${input}` as IconName;
+	}
+
+	function keyboardHintIcon(input: KeyRaw): IconName | undefined {
+		switch (input) {
+			case "ArrowDown":
+				return "KeyboardArrowDown";
+			case "ArrowLeft":
+				return "KeyboardArrowLeft";
+			case "ArrowRight":
+				return "KeyboardArrowRight";
+			case "ArrowUp":
+				return "KeyboardArrowUp";
+			case "Backspace":
+				return "KeyboardBackspace";
+			case "Command":
+				return "KeyboardCommand";
+			case "Control":
+				return "KeyboardControl";
+			case "Enter":
+				return "KeyboardEnter";
+			case "Option":
+				return "KeyboardOption";
+			case "Shift":
+				return "KeyboardShift";
+			case "Space":
+				return "KeyboardSpace";
+			case "Tab":
+				return "KeyboardTab";
+			default:
+				return undefined;
+		}
+	}
 </script>
 
-<template>
-	<IconLabel class="user-input-label keyboard-lock-notice" v-if="displayKeyboardLockNotice" :icon="'Info'" :title="keyboardLockInfoMessage" />
-	<LayoutRow class="user-input-label" v-else>
-		<template v-for="(keysWithLabels, i) in keysWithLabelsGroups" :key="i">
-			<Separator :type="'Related'" v-if="i > 0"></Separator>
-			<template v-for="(keyInfo, j) in keyTextOrIconList(keysWithLabels)" :key="j">
-				<div class="input-key" :class="keyInfo.width">
-					<IconLabel v-if="keyInfo.icon" :icon="keyInfo.icon" />
-					<TextLabel v-else-if="keyInfo.label !== undefined">{{ keyInfo.label }}</TextLabel>
+{#if displayKeyboardLockNotice}
+	<IconLabel class="user-input-label keyboard-lock-notice" icon="Info" tooltip={keyboardLockInfoMessage} />
+{:else}
+	<LayoutRow class="user-input-label">
+		{#each keysWithLabelsGroups as keysWithLabels, groupIndex (groupIndex)}
+			{#if groupIndex > 0}
+				<Separator type="Related" />
+			{/if}
+			{#each keyTextOrIconList(keysWithLabels) as keyInfo, keyIndex (keyIndex)}
+				<div class={`input-key ${keyInfo.width}`}>
+					{#if keyInfo.icon}
+						<IconLabel icon={keyInfo.icon} />
+					{:else if keyInfo.label !== undefined}
+						<TextLabel>{keyInfo.label}</TextLabel>
+					{/if}
 				</div>
-			</template>
-		</template>
-		<div class="input-mouse" v-if="mouseMotion">
-			<IconLabel :icon="mouseHintIcon(mouseMotion)" />
-		</div>
-		<div class="hint-text" v-if="hasSlotContent">
-			<slot></slot>
-		</div>
+			{/each}
+		{/each}
+		{#if mouseMotion}
+			<div class="input-mouse">
+				<IconLabel icon={mouseHintIcon(mouseMotion)} />
+			</div>
+		{/if}
+		{#if $$slots.default}
+			<div class="hint-text">
+				<slot />
+			</div>
+		{/if}
 	</LayoutRow>
-</template>
+{/if}
 
-<style lang="scss">
-.user-input-label {
-	flex: 0 0 auto;
-	height: 100%;
-	align-items: center;
-	white-space: nowrap;
-
-	.input-key,
-	.input-mouse {
-		& + .input-key,
-		& + .input-mouse {
-			margin-left: 2px;
-		}
-	}
-
-	.input-key {
-		display: flex;
-		justify-content: center;
+<style lang="scss" global>
+	.user-input-label {
+		flex: 0 0 auto;
+		height: 100%;
 		align-items: center;
-		font-family: "Inconsolata", monospace;
-		font-weight: 400;
-		text-align: center;
-		height: 16px;
-		box-sizing: border-box;
-		border: 1px solid;
-		border-radius: 4px;
-		border-color: var(--color-5-dullgray);
-		color: var(--color-e-nearwhite);
+		white-space: nowrap;
 
-		.text-label {
-			// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height,
-			// so moving it up 1 pixel by using 15px makes them agree.
-			line-height: 15px;
+		.input-key,
+		.input-mouse {
+			& + .input-key,
+			& + .input-mouse {
+				margin-left: 2px;
+			}
 		}
 
-		&.width-1 {
-			width: 16px;
-		}
-
-		&.width-2 {
-			width: 24px;
-		}
-
-		&.width-3 {
-			width: 32px;
-		}
-
-		&.width-4 {
-			width: 40px;
-		}
-
-		&.width-5 {
-			width: 48px;
-		}
-
-		.icon-label {
-			margin: 1px;
-		}
-	}
-
-	.input-mouse {
-		.bright {
-			fill: var(--color-e-nearwhite);
-		}
-
-		.dim {
-			fill: var(--color-8-uppergray);
-		}
-	}
-
-	.hint-text {
-		margin-left: 4px;
-	}
-
-	.floating-menu-content .row > & {
 		.input-key {
-			border-color: var(--color-3-darkgray);
-			color: var(--color-8-uppergray);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-family: "Inconsolata", monospace;
+			font-weight: 400;
+			text-align: center;
+			height: 16px;
+			box-sizing: border-box;
+			border: 1px solid;
+			border-radius: 4px;
+			border-color: var(--color-5-dullgray);
+			color: var(--color-e-nearwhite);
+
+			.text-label {
+				// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height,
+				// so moving it up 1 pixel by using 15px makes them agree.
+				line-height: 15px;
+			}
+
+			&.width-1 {
+				width: 16px;
+			}
+
+			&.width-2 {
+				width: 24px;
+			}
+
+			&.width-3 {
+				width: 32px;
+			}
+
+			&.width-4 {
+				width: 40px;
+			}
+
+			&.width-5 {
+				width: 48px;
+			}
+
+			.icon-label {
+				margin: 1px;
+			}
 		}
 
-		.input-key .icon-label svg,
-		&.keyboard-lock-notice.keyboard-lock-notice svg,
-		.input-mouse .bright {
-			fill: var(--color-8-uppergray);
+		.input-mouse {
+			.bright {
+				fill: var(--color-e-nearwhite);
+			}
+
+			.dim {
+				fill: var(--color-8-uppergray);
+			}
 		}
 
-		.input-mouse .dim {
-			fill: var(--color-3-darkgray);
+		.hint-text {
+			margin-left: 4px;
+		}
+
+		.floating-menu-content .row > & {
+			.input-key {
+				border-color: var(--color-3-darkgray);
+				color: var(--color-8-uppergray);
+			}
+
+			.input-key .icon-label svg,
+			&.keyboard-lock-notice.keyboard-lock-notice svg,
+			.input-mouse .bright {
+				fill: var(--color-8-uppergray);
+			}
+
+			.input-mouse .dim {
+				fill: var(--color-3-darkgray);
+			}
+		}
+
+		.floating-menu-content .row:hover > & {
+			.input-key {
+				border-color: var(--color-7-middlegray);
+			}
+
+			.input-mouse .dim {
+				fill: var(--color-7-middlegray);
+			}
 		}
 	}
-
-	.floating-menu-content .row:hover > & {
-		.input-key {
-			border-color: var(--color-7-middlegray);
-		}
-
-		.input-mouse .dim {
-			fill: var(--color-7-middlegray);
-		}
-	}
-}
 </style>

frontend/src/components/widgets/metrics/CanvasRuler.svelte

@@ -1,148 +1,141 @@
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-const RULER_THICKNESS = 16;
-const MAJOR_MARK_THICKNESS = 16;
-const MEDIUM_MARK_THICKNESS = 6;
-const MINOR_MARK_THICKNESS = 3;
-
-export type RulerDirection = "Horizontal" | "Vertical";
-
-// Modulo function that works for negative numbers, unlike the JS % operator
-const mod = (n: number, m: number): number => {
-	const remainder = n % m;
-	return Math.floor(remainder >= 0 ? remainder : remainder + m);
-};
-
-export default defineComponent({
-	props: {
-		direction: { type: String as PropType<RulerDirection>, default: "Vertical" },
-		origin: { type: Number as PropType<number>, required: true },
-		numberInterval: { type: Number as PropType<number>, required: true },
-		majorMarkSpacing: { type: Number as PropType<number>, required: true },
-		mediumDivisions: { type: Number as PropType<number>, default: 5 },
-		minorDivisions: { type: Number as PropType<number>, default: 2 },
-	},
-	computed: {
-		svgPath(): string {
-			const isVertical = this.direction === "Vertical";
-			const lineDirection = isVertical ? "H" : "V";
-
-			const offsetStart = mod(this.origin, this.majorMarkSpacing);
-			const shiftedOffsetStart = offsetStart - this.majorMarkSpacing;
-
-			const divisions = this.majorMarkSpacing / this.mediumDivisions / this.minorDivisions;
-			const majorMarksFrequency = this.mediumDivisions * this.minorDivisions;
-
-			let dPathAttribute = "";
-			let i = 0;
-			for (let location = shiftedOffsetStart; location < this.rulerLength; location += divisions) {
-				let length;
-				if (i % majorMarksFrequency === 0) length = MAJOR_MARK_THICKNESS;
-				else if (i % this.minorDivisions === 0) length = MEDIUM_MARK_THICKNESS;
-				else length = MINOR_MARK_THICKNESS;
-				i += 1;
-
-				const destination = Math.round(location) + 0.5;
-				const startPoint = isVertical ? `${RULER_THICKNESS - length},${destination}` : `${destination},${RULER_THICKNESS - length}`;
-				dPathAttribute += `M${startPoint}${lineDirection}${RULER_THICKNESS} `;
-			}
-
-			return dPathAttribute;
-		},
-		svgTexts(): { transform: string; text: number }[] {
-			const isVertical = this.direction === "Vertical";
-
-			const offsetStart = mod(this.origin, this.majorMarkSpacing);
-			const shiftedOffsetStart = offsetStart - this.majorMarkSpacing;
-
-			const svgTextCoordinates = [];
-
-			let text = (Math.ceil(-this.origin / this.majorMarkSpacing) - 1) * this.numberInterval;
-
-			for (let location = shiftedOffsetStart; location < this.rulerLength; location += this.majorMarkSpacing) {
-				const destination = Math.round(location);
-				const x = isVertical ? 9 : destination + 2;
-				const y = isVertical ? destination + 1 : 9;
-
-				let transform = `translate(${x} ${y})`;
-				if (isVertical) transform += " rotate(270)";
-
-				svgTextCoordinates.push({ transform, text });
-
-				text += this.numberInterval;
-			}
-
-			return svgTextCoordinates;
-		},
-	},
-	methods: {
-		resize() {
-			const canvasRuler = this.$refs.canvasRuler as HTMLDivElement | undefined;
-			if (!canvasRuler) return;
-
-			const isVertical = this.direction === "Vertical";
-
-			const newLength = isVertical ? canvasRuler.clientHeight : canvasRuler.clientWidth;
-			const roundedUp = (Math.floor(newLength / this.majorMarkSpacing) + 1) * this.majorMarkSpacing;
-
-			if (roundedUp !== this.rulerLength) {
-				this.rulerLength = roundedUp;
-				const thickness = `${RULER_THICKNESS}px`;
-				const length = `${roundedUp}px`;
-				this.svgBounds = isVertical ? { width: thickness, height: length } : { width: length, height: thickness };
-			}
-		},
-	},
-	data() {
-		return {
-			rulerLength: 0,
-			svgBounds: { width: "0px", height: "0px" },
-		};
-	},
-});
+<script lang="ts" context="module">
+	export type RulerDirection = "Horizontal" | "Vertical";
 </script>
 
-<template>
-	<div class="canvas-ruler" :class="direction.toLowerCase()" ref="canvasRuler">
-		<svg :style="svgBounds">
-			<path :d="svgPath" />
-			<text v-for="(svgText, index) in svgTexts" :key="index" :transform="svgText.transform">{{ svgText.text }}</text>
-		</svg>
-	</div>
-</template>
+<script lang="ts">
+	const RULER_THICKNESS = 16;
+	const MAJOR_MARK_THICKNESS = 16;
+	const MEDIUM_MARK_THICKNESS = 6;
+	const MINOR_MARK_THICKNESS = 3;
 
-<style lang="scss">
-.canvas-ruler {
-	flex: 1 1 100%;
-	background: var(--color-4-dimgray);
-	overflow: hidden;
-	position: relative;
+	export let direction: RulerDirection = "Vertical";
+	export let origin: number;
+	export let numberInterval: number;
+	export let majorMarkSpacing: number;
+	export let mediumDivisions: number = 5;
+	export let minorDivisions: number = 2;
 
-	&.horizontal {
-		height: 16px;
+	let canvasRuler: HTMLDivElement;
+	let rulerLength = 0;
+	let svgBounds = { width: "0px", height: "0px" };
+
+	$: svgPath = computeSvgPath(direction, origin, majorMarkSpacing, mediumDivisions, minorDivisions, rulerLength);
+	$: svgTexts = computeSvgTexts(direction, origin, majorMarkSpacing, numberInterval, rulerLength);
+
+	function computeSvgPath(direction: RulerDirection, origin: number, majorMarkSpacing: number, mediumDivisions: number, minorDivisions: number, rulerLength: number): string {
+		const isVertical = direction === "Vertical";
+		const lineDirection = isVertical ? "H" : "V";
+
+		const offsetStart = mod(origin, majorMarkSpacing);
+		const shiftedOffsetStart = offsetStart - majorMarkSpacing;
+
+		const divisions = majorMarkSpacing / mediumDivisions / minorDivisions;
+		const majorMarksFrequency = mediumDivisions * minorDivisions;
+
+		let dPathAttribute = "";
+		let i = 0;
+		for (let location = shiftedOffsetStart; location < rulerLength; location += divisions) {
+			let length;
+			if (i % majorMarksFrequency === 0) length = MAJOR_MARK_THICKNESS;
+			else if (i % minorDivisions === 0) length = MEDIUM_MARK_THICKNESS;
+			else length = MINOR_MARK_THICKNESS;
+			i += 1;
+
+			const destination = Math.round(location) + 0.5;
+			const startPoint = isVertical ? `${RULER_THICKNESS - length},${destination}` : `${destination},${RULER_THICKNESS - length}`;
+			dPathAttribute += `M${startPoint}${lineDirection}${RULER_THICKNESS} `;
+		}
+
+		return dPathAttribute;
 	}
 
-	&.vertical {
-		width: 16px;
+	function computeSvgTexts(direction: RulerDirection, origin: number, majorMarkSpacing: number, numberInterval: number, rulerLength: number): { transform: string; text: number }[] {
+		const isVertical = direction === "Vertical";
 
-		svg text {
-			text-anchor: end;
+		const offsetStart = mod(origin, majorMarkSpacing);
+		const shiftedOffsetStart = offsetStart - majorMarkSpacing;
+
+		const svgTextCoordinates = [];
+
+		let text = (Math.ceil(-origin / majorMarkSpacing) - 1) * numberInterval;
+
+		for (let location = shiftedOffsetStart; location < rulerLength; location += majorMarkSpacing) {
+			const destination = Math.round(location);
+			const x = isVertical ? 9 : destination + 2;
+			const y = isVertical ? destination + 1 : 9;
+
+			let transform = `translate(${x} ${y})`;
+			if (isVertical) transform += " rotate(270)";
+
+			svgTextCoordinates.push({ transform, text });
+
+			text += numberInterval;
+		}
+
+		return svgTextCoordinates;
+	}
+
+	export function resize() {
+		const isVertical = direction === "Vertical";
+
+		const newLength = isVertical ? canvasRuler.clientHeight : canvasRuler.clientWidth;
+		const roundedUp = (Math.floor(newLength / majorMarkSpacing) + 1) * majorMarkSpacing;
+
+		if (roundedUp !== rulerLength) {
+			rulerLength = roundedUp;
+			const thickness = `${RULER_THICKNESS}px`;
+			const length = `${roundedUp}px`;
+			svgBounds = isVertical ? { width: thickness, height: length } : { width: length, height: thickness };
 		}
 	}
 
-	svg {
-		position: absolute;
+	// Modulo function that works for negative numbers, unlike the JS `%` operator
+	function mod(n: number, m: number): number {
+		const remainder = n % m;
+		return Math.floor(remainder >= 0 ? remainder : remainder + m);
+	}
+</script>
 
-		path {
-			stroke-width: 1px;
-			stroke: var(--color-7-middlegray);
+<div class={`canvas-ruler ${direction.toLowerCase()}`} bind:this={canvasRuler}>
+	<svg style:width={svgBounds.width} style:height={svgBounds.height}>
+		<path d={svgPath} />
+		{#each svgTexts as svgText, index (index)}
+			<text transform={svgText.transform}>{svgText.text}</text>
+		{/each}
+	</svg>
+</div>
+
+<style lang="scss" global>
+	.canvas-ruler {
+		flex: 1 1 100%;
+		background: var(--color-4-dimgray);
+		overflow: hidden;
+		position: relative;
+
+		&.horizontal {
+			height: 16px;
 		}
 
-		text {
-			font-size: 12px;
-			fill: var(--color-8-uppergray);
+		&.vertical {
+			width: 16px;
+
+			svg text {
+				text-anchor: end;
+			}
+		}
+
+		svg {
+			position: absolute;
+
+			path {
+				stroke-width: 1px;
+				stroke: var(--color-7-middlegray);
+			}
+
+			text {
+				font-size: 12px;
+				fill: var(--color-8-uppergray);
+			}
 		}
 	}
-}
 </style>

frontend/src/components/widgets/metrics/PersistentScrollbar.svelte

@@ -1,219 +1,208 @@
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-export type ScrollbarDirection = "Horizontal" | "Vertical";
-
-// Linear Interpolation
-const lerp = (x: number, y: number, a: number): number => x * (1 - a) + y * a;
-
-// Convert the position of the handle (0-1) to the position on the track (0-1).
-// This includes the 1/2 handle length gap of the possible handle positionson each side so the end of the handle doesn't go off the track.
-const handleToTrack = (handleLen: number, handlePos: number): number => lerp(handleLen / 2, 1 - handleLen / 2, handlePos);
-
-const pointerPosition = (direction: ScrollbarDirection, e: PointerEvent): number => (direction === "Vertical" ? e.clientY : e.clientX);
-
-export default defineComponent({
-	emits: {
-		"update:handlePosition": null,
-		pressTrack: (pointerOffset: number) => typeof pointerOffset === "number",
-	},
-	props: {
-		direction: { type: String as PropType<ScrollbarDirection>, default: "Vertical" },
-		handlePosition: { type: Number as PropType<number>, default: 0.5 },
-		handleLength: { type: Number as PropType<number>, default: 0.5 },
-	},
-	computed: {
-		thumbStart(): { left: string } | { top: string } {
-			const start = handleToTrack(this.handleLength, this.handlePosition) - this.handleLength / 2;
-
-			return this.direction === "Vertical" ? { top: `${start * 100}%` } : { left: `${start * 100}%` };
-		},
-		thumbEnd(): { right: string } | { bottom: string } {
-			const end = 1 - handleToTrack(this.handleLength, this.handlePosition) - this.handleLength / 2;
-
-			return this.direction === "Vertical" ? { bottom: `${end * 100}%` } : { right: `${end * 100}%` };
-		},
-		sides(): { left: string; right: string } | { top: string; bottom: string } {
-			return this.direction === "Vertical" ? { left: "0%", right: "0%" } : { top: "0%", bottom: "0%" };
-		},
-	},
-	data() {
-		return {
-			dragging: false,
-			pointerPos: 0,
-		};
-	},
-	mounted() {
-		window.addEventListener("pointerup", this.pointerUp);
-		window.addEventListener("pointermove", this.pointerMove);
-	},
-	unmounted() {
-		window.removeEventListener("pointerup", this.pointerUp);
-		window.removeEventListener("pointermove", this.pointerMove);
-	},
-	methods: {
-		trackLength(): number | undefined {
-			const track = this.$refs.scrollTrack as HTMLDivElement | undefined;
-			if (track) return this.direction === "Vertical" ? track.clientHeight - this.handleLength : track.clientWidth;
-
-			return undefined;
-		},
-		trackOffset(): number | undefined {
-			const track = this.$refs.scrollTrack as HTMLDivElement | undefined;
-			if (track) return this.direction === "Vertical" ? track.getBoundingClientRect().top : track.getBoundingClientRect().left;
-
-			return undefined;
-		},
-		clampHandlePosition(newPos: number) {
-			const clampedPosition = Math.min(Math.max(newPos, 0), 1);
-			this.$emit("update:handlePosition", clampedPosition);
-		},
-		updateHandlePosition(e: PointerEvent) {
-			const trackLength = this.trackLength();
-			if (trackLength === undefined) return;
-
-			const position = pointerPosition(this.direction, e);
-
-			this.clampHandlePosition(this.handlePosition + (position - this.pointerPos) / (trackLength * (1 - this.handleLength)));
-			this.pointerPos = position;
-		},
-		grabHandle(e: PointerEvent) {
-			if (!this.dragging) {
-				this.dragging = true;
-				this.pointerPos = pointerPosition(this.direction, e);
-			}
-		},
-		grabArea(e: PointerEvent) {
-			if (!this.dragging) {
-				const trackLength = this.trackLength();
-				const trackOffset = this.trackOffset();
-				if (trackLength === undefined || trackOffset === undefined) return;
-
-				const oldPointer = handleToTrack(this.handleLength, this.handlePosition) * trackLength + trackOffset;
-				const pointerPos = pointerPosition(this.direction, e);
-				this.$emit("pressTrack", pointerPos - oldPointer);
-			}
-		},
-		pointerUp() {
-			this.dragging = false;
-		},
-		pointerMove(e: PointerEvent) {
-			if (this.dragging) this.updateHandlePosition(e);
-		},
-		changePosition(difference: number) {
-			const trackLength = this.trackLength();
-			if (trackLength === undefined) return;
-
-			this.clampHandlePosition(this.handlePosition + difference / trackLength);
-		},
-	},
-});
+<script lang="ts" context="module">
+	export type ScrollbarDirection = "Horizontal" | "Vertical";
 </script>
 
-<template>
-	<div class="persistent-scrollbar" :class="direction.toLowerCase()">
-		<button class="arrow decrease" @pointerdown="() => changePosition(-50)" tabindex="-1"></button>
-		<div class="scroll-track" ref="scrollTrack" @pointerdown="(e) => grabArea(e)">
-			<div class="scroll-thumb" @pointerdown="(e) => grabHandle(e)" :class="{ dragging }" :style="[thumbStart, thumbEnd, sides]"></div>
-		</div>
-		<button class="arrow increase" @click="() => changePosition(50)" tabindex="-1"></button>
+<script lang="ts">
+	import { createEventDispatcher, onMount, onDestroy } from "svelte";
+
+	// Linear Interpolation
+	const lerp = (x: number, y: number, a: number): number => x * (1 - a) + y * a;
+
+	// Convert the position of the handle (0-1) to the position on the track (0-1).
+	// This includes the 1/2 handle length gap of the possible handle positionson each side so the end of the handle doesn't go off the track.
+	const handleToTrack = (handleLen: number, handlePos: number): number => lerp(handleLen / 2, 1 - handleLen / 2, handlePos);
+
+	const pointerPosition = (direction: ScrollbarDirection, e: PointerEvent): number => (direction === "Vertical" ? e.clientY : e.clientX);
+
+	// emits: { "update:handlePosition": null, pressTrack: (pointerOffset: number) => typeof pointerOffset === "number" }
+	const dispatch = createEventDispatcher<{ handlePosition: number; pressTrack: number }>();
+
+	export let direction: ScrollbarDirection = "Vertical";
+	export let handlePosition: number = 0.5;
+	export let handleLength: number = 0.5;
+
+	let scrollTrack: HTMLDivElement;
+	let dragging = false;
+	let pointerPos = 0;
+	let thumbTop: string | undefined = undefined;
+	let thumbBottom: string | undefined = undefined;
+	let thumbLeft: string | undefined = undefined;
+	let thumbRight: string | undefined = undefined;
+
+	$: start = handleToTrack(handleLength, handlePosition) - handleLength / 2;
+	$: end = 1 - handleToTrack(handleLength, handlePosition) - handleLength / 2;
+	$: [thumbTop, thumbBottom, thumbLeft, thumbRight] = direction === "Vertical" ? [`${start * 100}%`, `${end * 100}%`, "0%", "0%"] : ["0%", "0%", `${start * 100}%`, `${end * 100}%`];
+
+	function trackLength(): number | undefined {
+		return direction === "Vertical" ? scrollTrack.clientHeight - handleLength : scrollTrack.clientWidth;
+	}
+
+	function trackOffset(): number | undefined {
+		return direction === "Vertical" ? scrollTrack.getBoundingClientRect().top : scrollTrack.getBoundingClientRect().left;
+	}
+
+	function clampHandlePosition(newPos: number) {
+		const clampedPosition = Math.min(Math.max(newPos, 0), 1);
+		dispatch("handlePosition", clampedPosition);
+	}
+
+	function updateHandlePosition(e: PointerEvent) {
+		const length = trackLength();
+		if (length === undefined) return;
+
+		const position = pointerPosition(direction, e);
+
+		clampHandlePosition(handlePosition + (position - pointerPos) / (length * (1 - handleLength)));
+		pointerPos = position;
+	}
+
+	function grabHandle(e: PointerEvent) {
+		if (!dragging) {
+			dragging = true;
+			pointerPos = pointerPosition(direction, e);
+		}
+	}
+
+	function grabArea(e: PointerEvent) {
+		if (!dragging) {
+			const length = trackLength();
+			const offset = trackOffset();
+			if (length === undefined || offset === undefined) return;
+
+			const oldPointer = handleToTrack(handleLength, handlePosition) * length + offset;
+			const pointerPos = pointerPosition(direction, e);
+			dispatch("pressTrack", pointerPos - oldPointer);
+		}
+	}
+
+	function pointerUp() {
+		dragging = false;
+	}
+
+	function pointerMove(e: PointerEvent) {
+		if (dragging) updateHandlePosition(e);
+	}
+
+	function changePosition(difference: number) {
+		const length = trackLength();
+		if (length === undefined) return;
+
+		clampHandlePosition(handlePosition + difference / length);
+	}
+
+	onMount(() => {
+		window.addEventListener("pointerup", pointerUp);
+		window.addEventListener("pointermove", pointerMove);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener("pointerup", pointerUp);
+		window.removeEventListener("pointermove", pointerMove);
+	});
+</script>
+
+<div class={`persistent-scrollbar ${direction.toLowerCase()}`}>
+	<button class="arrow decrease" on:pointerdown={() => changePosition(-50)} tabindex="-1" />
+	<div class="scroll-track" bind:this={scrollTrack} on:pointerdown={grabArea}>
+		<div class="scroll-thumb" on:pointerdown={grabHandle} class:dragging style:top={thumbTop} style:bottom={thumbBottom} style:left={thumbLeft} style:right={thumbRight} />
 	</div>
-</template>
+	<button class="arrow increase" on:click={() => changePosition(50)} tabindex="-1" />
+</div>
 
-<style lang="scss">
-.persistent-scrollbar {
-	display: flex;
-	flex: 1 1 100%;
-
-	.arrow {
-		flex: 0 0 auto;
-		background: none;
-		border: none;
-		border-style: solid;
-		width: 0;
-		height: 0;
-		margin: 0;
-		padding: 0;
-	}
-
-	.scroll-track {
+<style lang="scss" global>
+	.persistent-scrollbar {
+		display: flex;
 		flex: 1 1 100%;
-		position: relative;
 
-		.scroll-thumb {
-			position: absolute;
-			border-radius: 4px;
-			background: var(--color-5-dullgray);
+		.arrow {
+			flex: 0 0 auto;
+			background: none;
+			border: none;
+			border-style: solid;
+			width: 0;
+			height: 0;
+			margin: 0;
+			padding: 0;
+		}
 
-			&:hover,
-			&.dragging {
-				background: var(--color-6-lowergray);
+		.scroll-track {
+			flex: 1 1 100%;
+			position: relative;
+
+			.scroll-thumb {
+				position: absolute;
+				border-radius: 4px;
+				background: var(--color-5-dullgray);
+
+				&:hover,
+				&.dragging {
+					background: var(--color-6-lowergray);
+				}
+			}
+
+			.scroll-click-area {
+				position: absolute;
 			}
 		}
 
-		.scroll-click-area {
-			position: absolute;
-		}
-	}
+		&.vertical {
+			flex-direction: column;
 
-	&.vertical {
-		flex-direction: column;
+			.arrow.decrease {
+				margin: 4px 3px;
+				border-width: 0 5px 8px 5px;
+				border-color: transparent transparent var(--color-5-dullgray) transparent;
 
-		.arrow.decrease {
-			margin: 4px 3px;
-			border-width: 0 5px 8px 5px;
-			border-color: transparent transparent var(--color-5-dullgray) transparent;
-
-			&:hover {
-				border-color: transparent transparent var(--color-6-lowergray) transparent;
+				&:hover {
+					border-color: transparent transparent var(--color-6-lowergray) transparent;
+				}
+				&:active {
+					border-color: transparent transparent var(--color-c-brightgray) transparent;
+				}
 			}
-			&:active {
-				border-color: transparent transparent var(--color-c-brightgray) transparent;
+
+			.arrow.increase {
+				margin: 4px 3px;
+				border-width: 8px 5px 0 5px;
+				border-color: var(--color-5-dullgray) transparent transparent transparent;
+
+				&:hover {
+					border-color: var(--color-6-lowergray) transparent transparent transparent;
+				}
+				&:active {
+					border-color: var(--color-c-brightgray) transparent transparent transparent;
+				}
 			}
 		}
 
-		.arrow.increase {
-			margin: 4px 3px;
-			border-width: 8px 5px 0 5px;
-			border-color: var(--color-5-dullgray) transparent transparent transparent;
+		&.horizontal {
+			flex-direction: row;
 
-			&:hover {
-				border-color: var(--color-6-lowergray) transparent transparent transparent;
+			.arrow.decrease {
+				margin: 3px 4px;
+				border-width: 5px 8px 5px 0;
+				border-color: transparent var(--color-5-dullgray) transparent transparent;
+
+				&:hover {
+					border-color: transparent var(--color-6-lowergray) transparent transparent;
+				}
+				&:active {
+					border-color: transparent var(--color-c-brightgray) transparent transparent;
+				}
 			}
-			&:active {
-				border-color: var(--color-c-brightgray) transparent transparent transparent;
+
+			.arrow.increase {
+				margin: 3px 4px;
+				border-width: 5px 0 5px 8px;
+				border-color: transparent transparent transparent var(--color-5-dullgray);
+
+				&:hover {
+					border-color: transparent transparent transparent var(--color-6-lowergray);
+				}
+				&:active {
+					border-color: transparent transparent transparent var(--color-c-brightgray);
+				}
 			}
 		}
 	}
-
-	&.horizontal {
-		flex-direction: row;
-
-		.arrow.decrease {
-			margin: 3px 4px;
-			border-width: 5px 8px 5px 0;
-			border-color: transparent var(--color-5-dullgray) transparent transparent;
-
-			&:hover {
-				border-color: transparent var(--color-6-lowergray) transparent transparent;
-			}
-			&:active {
-				border-color: transparent var(--color-c-brightgray) transparent transparent;
-			}
-		}
-
-		.arrow.increase {
-			margin: 3px 4px;
-			border-width: 5px 0 5px 8px;
-			border-color: transparent transparent transparent var(--color-5-dullgray);
-
-			&:hover {
-				border-color: transparent transparent transparent var(--color-6-lowergray);
-			}
-			&:active {
-				border-color: transparent transparent transparent var(--color-c-brightgray);
-			}
-		}
-	}
-}
 </style>

frontend/src/components/window/MainWindow.svelte

@@ -1,43 +1,29 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import LayoutCol from "@/components/layout/LayoutCol.vue";
-import StatusBar from "@/components/window/status-bar/StatusBar.vue";
-import TitleBar from "@/components/window/title-bar/TitleBar.vue";
-import Workspace from "@/components/window/workspace/Workspace.vue";
-
-export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
-
-export default defineComponent({
-	data() {
-		return {
-			platform: "Web" as ApplicationPlatform,
-			maximized: true,
-		};
-	},
-	components: {
-		LayoutCol,
-		StatusBar,
-		TitleBar,
-		Workspace,
-	},
-});
+<script lang="ts" context="module">
+	export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
 </script>
 
-<template>
-	<LayoutCol class="main-window">
-		<TitleBar :platform="platform" :maximized="maximized" />
+<script lang="ts">
+	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import StatusBar from "@/components/window/status-bar/StatusBar.svelte";
+	import TitleBar from "@/components/window/title-bar/TitleBar.svelte";
+	import Workspace from "@/components/window/workspace/Workspace.svelte";
 
-		<Workspace />
+	let platform: ApplicationPlatform = "Web";
+	let maximized: true;
+</script>
 
-		<StatusBar />
-	</LayoutCol>
-</template>
+<LayoutCol class="main-window">
+	<TitleBar {platform} {maximized} />
 
-<style lang="scss">
-.main-window {
-	height: 100%;
-	overflow: auto;
-	touch-action: none;
-}
+	<Workspace />
+
+	<StatusBar />
+</LayoutCol>
+
+<style lang="scss" global>
+	.main-window {
+		height: 100%;
+		overflow: auto;
+		touch-action: none;
+	}
 </style>

frontend/src/components/window/status-bar/StatusBar.svelte

@@ -1,82 +1,75 @@
 <script lang="ts">
-import { defineComponent } from "vue";
+	import { getContext, onMount } from "svelte";
 
-import { platformIsMac } from "@/utility-functions/platform";
-import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
+	import { platformIsMac } from "@/utility-functions/platform";
+	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import Separator from "@/components/widgets/labels/Separator.vue";
-import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import Separator from "@/components/widgets/labels/Separator.svelte";
+	import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
+	import { type Editor } from "@/wasm-communication/editor";
 
-export default defineComponent({
-	inject: ["editor"],
-	data() {
-		return {
-			hintData: [] as HintData,
-		};
-	},
-	methods: {
-		inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
-			if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
-			return hint.keyGroups;
-		},
-	},
-	mounted() {
-		this.editor.subscriptions.subscribeJsMessage(UpdateInputHints, (updateInputHints) => {
-			this.hintData = updateInputHints.hintData;
+	const editor = getContext<Editor>("editor");
+
+	let hintData: HintData = [];
+
+	function inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
+		if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
+		return hint.keyGroups;
+	}
+
+	onMount(() => {
+		editor.subscriptions.subscribeJsMessage(UpdateInputHints, (data) => {
+			hintData = data.hintData;
 		});
-	},
-	components: {
-		LayoutRow,
-		Separator,
-		UserInputLabel,
-	},
-});
+	});
 </script>
 
-<template>
-	<LayoutRow class="status-bar">
-		<LayoutRow class="hint-groups">
-			<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
-				<Separator :type="'Section'" v-if="index !== 0" />
-				<template v-for="hint in hintGroup" :key="hint">
-					<LayoutRow v-if="hint.plus" class="plus">+</LayoutRow>
-					<UserInputLabel :mouseMotion="hint.mouse" :keysWithLabelsGroups="inputKeysForPlatform(hint)">{{ hint.label }}</UserInputLabel>
-				</template>
-			</template>
-		</LayoutRow>
+<LayoutRow class="status-bar">
+	<LayoutRow class="hint-groups">
+		{#each hintData as hintGroup, index (hintGroup)}
+			{#if index !== 0}
+				<Separator type={"Section"} />
+			{/if}
+			{#each hintGroup as hint (hint)}
+				{#if hint.plus}
+					<LayoutRow class="plus">+</LayoutRow>
+				{/if}
+				<UserInputLabel mouseMotion={hint.mouse} keysWithLabelsGroups={inputKeysForPlatform(hint)}>{hint.label}</UserInputLabel>
+			{/each}
+		{/each}
 	</LayoutRow>
-</template>
+</LayoutRow>
 
-<style lang="scss">
-.status-bar {
-	height: 24px;
-	width: 100%;
-	flex: 0 0 auto;
-
-	.hint-groups {
+<style lang="scss" global>
+	.status-bar {
+		height: 24px;
+		width: 100%;
 		flex: 0 0 auto;
-		max-width: 100%;
-		margin: 0 -4px;
-		overflow: hidden;
 
-		.separator.section {
-			margin: 0;
-		}
-
-		.plus {
+		.hint-groups {
 			flex: 0 0 auto;
-			align-items: center;
-			font-weight: 700;
-		}
+			max-width: 100%;
+			margin: 0 -4px;
+			overflow: hidden;
 
-		.user-input-label {
-			margin: 0 8px;
+			.separator.section {
+				margin: 0;
+			}
 
-			& + .user-input-label {
-				margin-left: 0;
+			.plus {
+				flex: 0 0 auto;
+				align-items: center;
+				font-weight: 700;
+			}
+
+			.user-input-label {
+				margin: 0 8px;
+
+				& + .user-input-label {
+					margin-left: 0;
+				}
 			}
 		}
 	}
-}
 </style>

frontend/src/components/window/title-bar/TitleBar.svelte

@@ -1,75 +1,66 @@
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
-import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";
-import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue";
-import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.vue";
-import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
-
-export type Platform = "Windows" | "Mac" | "Linux" | "Web";
-
-export default defineComponent({
-	inject: ["portfolio"],
-	props: {
-		platform: { type: String as PropType<Platform>, required: true },
-		maximized: { type: Boolean as PropType<boolean>, required: true },
-	},
-	computed: {
-		windowTitle(): string {
-			const activeDocumentIndex = this.portfolio.state.activeDocumentIndex;
-			const activeDocumentDisplayName = this.portfolio.state.documents[activeDocumentIndex]?.displayName || "";
-
-			return `${activeDocumentDisplayName}${activeDocumentDisplayName && " - "}Graphite`;
-		},
-	},
-	components: {
-		LayoutRow,
-		MenuBarInput,
-		WindowButtonsMac,
-		WindowButtonsWeb,
-		WindowButtonsWindows,
-		WindowTitle,
-	},
-});
+<script lang="ts" context="module">
+	export type Platform = "Windows" | "Mac" | "Linux" | "Web";
 </script>
 
-<template>
-	<LayoutRow class="title-bar">
-		<LayoutRow class="header-part">
-			<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
-			<MenuBarInput v-if="platform !== 'Mac'" />
-		</LayoutRow>
-		<LayoutRow class="header-part">
-			<WindowTitle :text="windowTitle" />
-		</LayoutRow>
-		<LayoutRow class="header-part">
-			<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
-			<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
-		</LayoutRow>
+<script lang="ts">
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.svelte";
+	import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.svelte";
+	import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.svelte";
+	import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.svelte";
+	import WindowTitle from "@/components/window/title-bar/WindowTitle.svelte";
+	import { type PortfolioState } from "@/state-providers/portfolio";
+	import { getContext } from "svelte";
+
+	export let platform: Platform;
+	export let maximized: boolean;
+
+	const portfolio = getContext<PortfolioState>("portfolio");
+
+	$: docIndex = $portfolio.activeDocumentIndex;
+	$: displayName = $portfolio.documents[docIndex]?.displayName || "";
+	$: windowTitle = `${displayName}${displayName && " - "}Graphite`;
+</script>
+
+<LayoutRow class="title-bar">
+	<LayoutRow class="header-part">
+		{#if platform === "Mac"}
+			<WindowButtonsMac {maximized} />
+		{:else}
+			<MenuBarInput />
+		{/if}
 	</LayoutRow>
-</template>
+	<LayoutRow class="header-part">
+		<WindowTitle text={windowTitle} />
+	</LayoutRow>
+	<LayoutRow class="header-part">
+		{#if platform === "Windows" || platform === "Linux"}
+			<WindowButtonsWindows {maximized} />
+		{:else if platform === "Web"}
+			<WindowButtonsWeb />
+		{/if}
+	</LayoutRow>
+</LayoutRow>
 
-<style lang="scss">
-.title-bar {
-	height: 28px;
-	flex: 0 0 auto;
+<style lang="scss" global>
+	.title-bar {
+		height: 28px;
+		flex: 0 0 auto;
 
-	.header-part {
-		flex: 1 1 100%;
+		.header-part {
+			flex: 1 1 100%;
 
-		&:nth-child(1) {
-			justify-content: flex-start;
-		}
+			&:nth-child(1) {
+				justify-content: flex-start;
+			}
 
-		&:nth-child(2) {
-			justify-content: center;
-		}
+			&:nth-child(2) {
+				justify-content: center;
+			}
 
-		&:nth-child(3) {
-			justify-content: flex-end;
+			&:nth-child(3) {
+				justify-content: flex-end;
+			}
 		}
 	}
-}
 </style>

frontend/src/components/window/title-bar/WindowButtonsMac.svelte

@@ -1,52 +1,43 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-
-export default defineComponent({
-	props: {
-		maximized: { type: Boolean as PropType<boolean>, default: false },
-	},
-	components: { LayoutRow },
-});
+	export let maximized = false;
 </script>
 
-<template>
-	<LayoutRow class="window-buttons mac">
-		<div class="close" title="Close"></div>
-		<div class="minimize" title="Minimize"></div>
-		<div class="zoom" title="Zoom"></div>
-	</LayoutRow>
-</template>
+<LayoutRow class="window-buttons-mac">
+	<div class="close" title="Close" />
+	<div class="minimize" title="Minimize" />
+	<div class="zoom" title="Zoom" />
+</LayoutRow>
 
-<style lang="scss">
-.window-buttons.mac {
-	flex: 0 0 auto;
-	align-items: center;
-	margin: 0 8px;
-
-	div {
+<style lang="scss" global>
+	.window-buttons-mac {
 		flex: 0 0 auto;
 		align-items: center;
-		width: 11px;
-		height: 11px;
-		border-radius: 50%;
+		margin: 0 8px;
 
-		& + div {
-			margin-left: 8px;
-		}
+		div {
+			flex: 0 0 auto;
+			align-items: center;
+			width: 11px;
+			height: 11px;
+			border-radius: 50%;
 
-		&.close {
-			background: #ff5a52;
-		}
+			& + div {
+				margin-left: 8px;
+			}
 
-		&.minimize {
-			background: #e6c029;
-		}
+			&.close {
+				background: #ff5a52;
+			}
 
-		&.zoom {
-			background: #54c22b;
+			&.minimize {
+				background: #e6c029;
+			}
+
+			&.zoom {
+				background: #54c22b;
+			}
 		}
 	}
-}
 </style>

frontend/src/components/window/title-bar/WindowButtonsWeb.svelte

@@ -1,59 +1,50 @@
 <script lang="ts">
-import { defineComponent } from "vue";
+	import { getContext } from "svelte";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import { FullscreenState } from "@/state-providers/fullscreen";
 
-export default defineComponent({
-	inject: ["fullscreen"],
-	methods: {
-		async handleClick() {
-			if (this.fullscreen.state.windowFullscreen) this.fullscreen.exitFullscreen();
-			else this.fullscreen.enterFullscreen();
-		},
-	},
-	computed: {
-		requestFullscreenHotkeys() {
-			return this.fullscreen.keyboardLockApiSupported && !this.fullscreen.state.keyboardLocked;
-		},
-	},
-	components: {
-		IconLabel,
-		LayoutRow,
-		TextLabel,
-	},
-});
+	const fullscreen = getContext<FullscreenState>("fullscreen");
+
+	$: windowFullscreen = $fullscreen.windowFullscreen;
+	$: requestFullscreenHotkeys = fullscreen.keyboardLockApiSupported && !$fullscreen.keyboardLocked;
+
+	async function handleClick() {
+		if (windowFullscreen) fullscreen.exitFullscreen();
+		else fullscreen.enterFullscreen();
+	}
 </script>
 
-<template>
-	<LayoutRow class="window-buttons-web" @click="() => handleClick()" :title="(fullscreen.state.windowFullscreen ? 'Exit' : 'Enter') + ' Fullscreen (F11)'">
-		<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
-		<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
-	</LayoutRow>
-</template>
+<LayoutRow class="window-buttons-web" on:click={() => handleClick()} tooltip={(windowFullscreen ? "Exit" : "Enter") + " Fullscreen (F11)"}>
+	{#if requestFullscreenHotkeys}
+		<TextLabel italic={true}>Go fullscreen to access all hotkeys</TextLabel>
+	{/if}
+	<IconLabel icon={windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
+</LayoutRow>
 
-<style lang="scss">
-.window-buttons-web {
-	flex: 0 0 auto;
-	align-items: center;
-	padding: 0 8px;
-
-	svg {
-		fill: var(--color-e-nearwhite);
-	}
-
-	.text-label {
-		margin-right: 8px;
-	}
-
-	&:hover {
-		background: var(--color-6-lowergray);
-		color: var(--color-f-white);
+<style lang="scss" global>
+	.window-buttons-web {
+		flex: 0 0 auto;
+		align-items: center;
+		padding: 0 8px;
 
 		svg {
-			fill: var(--color-f-white);
+			fill: var(--color-e-nearwhite);
+		}
+
+		.text-label {
+			margin-right: 8px;
+		}
+
+		&:hover {
+			background: var(--color-6-lowergray);
+			color: var(--color-f-white);
+
+			svg {
+				fill: var(--color-f-white);
+			}
 		}
 	}
-}
 </style>

frontend/src/components/window/title-bar/WindowButtonsWindows.svelte

@@ -1,55 +1,46 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-
-export default defineComponent({
-	props: {
-		maximized: { type: Boolean as PropType<boolean>, default: false },
-	},
-	components: {
-		IconLabel,
-		LayoutRow,
-	},
-});
+	export let maximized = false;
 </script>
 
-<template>
-	<LayoutRow class="window-button windows minimize" title="Minimize">
-		<IconLabel :icon="'WindowButtonWinMinimize'" />
+<LayoutRow class="window-button windows minimize" tooltip="Minimize">
+	<IconLabel icon={"WindowButtonWinMinimize"} />
+</LayoutRow>
+{#if !maximized}
+	<LayoutRow class="window-button windows maximize" tooltip="Maximize">
+		<IconLabel icon={"WindowButtonWinMaximize"} />
 	</LayoutRow>
-	<LayoutRow class="window-button windows maximize" title="Maximize" v-if="!maximized">
-		<IconLabel :icon="'WindowButtonWinMaximize'" />
+{:else}
+	<LayoutRow class="window-button windows restore-down" tooltip="Restore Down">
+		<IconLabel icon={"WindowButtonWinRestoreDown"} />
 	</LayoutRow>
-	<LayoutRow class="window-button windows restore-down" title="Restore Down" v-if="maximized">
-		<IconLabel :icon="'WindowButtonWinRestoreDown'" />
-	</LayoutRow>
-	<LayoutRow class="window-button windows close" title="Close">
-		<IconLabel :icon="'WindowButtonWinClose'" />
-	</LayoutRow>
-</template>
+{/if}
+<LayoutRow class="window-button windows close" tooltip="Close">
+	<IconLabel icon={"WindowButtonWinClose"} />
+</LayoutRow>
 
-<style lang="scss">
-.window-button.windows {
-	flex: 0 0 auto;
-	align-items: center;
-	padding: 0 17px;
-
-	svg {
-		fill: var(--color-e-nearwhite);
-	}
-
-	&:hover {
-		background: var(--color-6-lowergray);
+<style lang="scss" global>
+	.window-button.windows {
+		flex: 0 0 auto;
+		align-items: center;
+		padding: 0 17px;
 
 		svg {
-			fill: var(--color-f-white);
+			fill: var(--color-e-nearwhite);
+		}
+
+		&:hover {
+			background: var(--color-6-lowergray);
+
+			svg {
+				fill: var(--color-f-white);
+			}
+		}
+
+		&.close:hover {
+			background: #e81123;
 		}
 	}
-
-	&.close:hover {
-		background: #e81123;
-	}
-}
 </style>

frontend/src/components/window/title-bar/WindowTitle.svelte

@@ -1,31 +1,19 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-
-export default defineComponent({
-	props: {
-		text: { type: String as PropType<string>, required: true },
-	},
-	components: {
-		LayoutRow,
-		TextLabel,
-	},
-});
+	export let text: string;
 </script>
 
-<template>
-	<LayoutRow class="window-title">
-		<TextLabel>{{ text }}</TextLabel>
-	</LayoutRow>
-</template>
+<LayoutRow class="window-title">
+	<TextLabel>{text}</TextLabel>
+</LayoutRow>
 
-<style lang="scss">
-.window-title {
-	flex: 0 0 auto;
-	align-items: center;
-	white-space: nowrap;
-	padding: 0 8px;
-}
+<style lang="scss" global>
+	.window-title {
+		flex: 0 0 auto;
+		align-items: center;
+		white-space: nowrap;
+		padding: 0 8px;
+	}
 </style>

frontend/src/components/window/workspace/Panel.svelte

@@ -1,289 +1,307 @@
-<script lang="ts">
-import { defineComponent, nextTick, type PropType } from "vue";
+<script lang="ts" context="module">
+	import Document from "@/components/panels/Document.svelte";
+	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
+	import LayerTree from "@/components/panels/LayerTree.svelte";
+	import NodeGraph from "@/components/panels/NodeGraph.svelte";
+	import PopoverButton from "@/components/widgets/buttons/PopoverButton.svelte";
+	import Properties from "@/components/panels/Properties.svelte";
+	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
 
-import { platformIsMac } from "@/utility-functions/platform";
-
-import { type LayoutKeysGroup, type Key } from "@/wasm-communication/messages";
-
-import LayoutCol from "@/components/layout/LayoutCol.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import Document from "@/components/panels/Document.vue";
-import LayerTree from "@/components/panels/LayerTree.vue";
-import NodeGraph from "@/components/panels/NodeGraph.vue";
-import Properties from "@/components/panels/Properties.vue";
-import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
-import TextButton from "@/components/widgets/buttons/TextButton.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
-
-const PANEL_COMPONENTS = {
-	Document,
-	IconButton,
-	LayerTree,
-	NodeGraph,
-	PopoverButton,
-	Properties,
-	TextButton,
-};
-type PanelTypes = keyof typeof PANEL_COMPONENTS;
-
-export default defineComponent({
-	inject: ["editor"],
-	props: {
-		tabMinWidths: { type: Boolean as PropType<boolean>, default: false },
-		tabCloseButtons: { type: Boolean as PropType<boolean>, default: false },
-		tabLabels: { type: Array as PropType<{ name: string; tooltip?: string }[]>, required: true },
-		tabActiveIndex: { type: Number as PropType<number>, required: true },
-		panelType: { type: String as PropType<PanelTypes>, required: false },
-		clickAction: { type: Function as PropType<(index: number) => void>, required: false },
-		closeAction: { type: Function as PropType<(index: number) => void>, required: false },
-	},
-	methods: {
-		newDocument() {
-			this.editor.instance.newDocumentDialog();
-		},
-		openDocument() {
-			this.editor.instance.documentOpen();
-		},
-		platformModifiers(reservedKey: boolean): LayoutKeysGroup {
-			// TODO: Remove this by properly feeding these keys from a layout provided by the backend
-
-			const ALT: Key = { key: "Alt", label: "Alt" };
-			const COMMAND: Key = { key: "Command", label: "Command" };
-			const CONTROL: Key = { key: "Control", label: "Ctrl" };
-
-			if (platformIsMac()) return reservedKey ? [ALT, COMMAND] : [COMMAND];
-			return reservedKey ? [CONTROL, ALT] : [CONTROL];
-		},
-		async scrollTabIntoView(newIndex: number) {
-			await nextTick();
-
-			const panel: HTMLDivElement | undefined = this.$el;
-			if (!panel) return;
-
-			const newActiveTab = panel.querySelectorAll("[data-tab]")[newIndex] as HTMLDivElement | undefined;
-			newActiveTab?.scrollIntoView();
-		},
-	},
-	components: {
-		IconLabel,
-		LayoutCol,
-		LayoutRow,
-		TextLabel,
-		UserInputLabel,
-		...PANEL_COMPONENTS,
-	},
-});
+	const PANEL_COMPONENTS = {
+		Document,
+		LayerTree,
+		NodeGraph,
+		Properties,
+	};
+	type PanelTypes = keyof typeof PANEL_COMPONENTS;
 </script>
 
-<template>
-	<LayoutCol class="panel">
-		<LayoutRow class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
-			<LayoutRow class="tab-group" :scrollableX="true">
+<script lang="ts">
+	import { getContext, tick } from "svelte";
+
+	import { platformIsMac, isEventSupported } from "@/utility-functions/platform";
+
+	import { type LayoutKeysGroup, type Key } from "@/wasm-communication/messages";
+
+	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
+	import { type Editor } from "@/wasm-communication/editor";
+
+	const editor = getContext<Editor>("editor");
+
+	export let tabMinWidths = false;
+	export let tabCloseButtons = false;
+	export let tabLabels: { name: string; tooltip?: string }[];
+	export let tabActiveIndex: number;
+	export let panelType: PanelTypes | undefined = undefined;
+	export let clickAction: ((index: number) => void) | undefined = undefined;
+	export let closeAction: ((index: number) => void) | undefined = undefined;
+
+	let tabElements: LayoutRow[] = [];
+
+	function newDocument() {
+		editor.instance.newDocumentDialog();
+	}
+
+	function openDocument() {
+		editor.instance.documentOpen();
+	}
+
+	function platformModifiers(reservedKey: boolean): LayoutKeysGroup {
+		// TODO: Remove this by properly feeding these keys from a layout provided by the backend
+
+		const ALT: Key = { key: "Alt", label: "Alt" };
+		const COMMAND: Key = { key: "Command", label: "Command" };
+		const CONTROL: Key = { key: "Control", label: "Ctrl" };
+
+		if (platformIsMac()) return reservedKey ? [ALT, COMMAND] : [COMMAND];
+		return reservedKey ? [CONTROL, ALT] : [CONTROL];
+	}
+
+	export async function scrollTabIntoView(newIndex: number) {
+		await tick();
+		tabElements[newIndex].div().scrollIntoView();
+	}
+</script>
+
+<LayoutCol class="panel">
+	<LayoutRow class="tab-bar" classes={{ "min-widths": tabMinWidths }}>
+		<LayoutRow class="tab-group" scrollableX={true}>
+			{#each tabLabels as tabLabel, tabIndex (tabIndex)}
 				<LayoutRow
-					v-for="(tabLabel, tabIndex) in tabLabels"
-					:key="tabIndex"
 					class="tab"
-					:class="{ active: tabIndex === tabActiveIndex }"
-					:title="tabLabel.tooltip || null"
-					@click="(e: MouseEvent) => (e?.stopPropagation(), clickAction?.(tabIndex))"
-					@click.middle="(e: MouseEvent) => (e?.stopPropagation(), closeAction?.(tabIndex))"
-					data-tab
+					classes={{ active: tabIndex === tabActiveIndex }}
+					tooltip={tabLabel.tooltip || undefined}
+					on:click={(e) => {
+						e.stopPropagation();
+						clickAction?.(tabIndex);
+					}}
+					on:auxclick={(e) => {
+						// Middle mouse button click
+						if (e.button === 1) {
+							e.stopPropagation();
+							closeAction?.(tabIndex);
+						}
+					}}
+					on:mouseup={(e) => {
+						// Fallback for Safari:
+						// https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event#browser_compatibility
+						// The downside of using mouseup is that the mousedown didn't have to originate in the same element.
+						// A possible future improvement could save the target element during mousedown and check if it's the same here.
+						if (!isEventSupported("auxclick") && e.button === 1) {
+							e.stopPropagation();
+							closeAction?.(tabIndex);
+						}
+					}}
+					bind:this={tabElements[tabIndex]}
 				>
-					<TextLabel>{{ tabLabel.name }}</TextLabel>
-					<IconButton :action="(e?: MouseEvent) => (e?.stopPropagation(), closeAction?.(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
+					<TextLabel>{tabLabel.name}</TextLabel>
+					{#if tabCloseButtons}
+						<IconButton
+							action={(e) => {
+								e?.stopPropagation();
+								closeAction?.(tabIndex);
+							}}
+							icon="CloseX"
+							size={16}
+						/>
+					{/if}
 				</LayoutRow>
-			</LayoutRow>
-			<PopoverButton :icon="'VerticalEllipsis'">
-				<TextLabel :bold="true">Panel Options</TextLabel>
-				<TextLabel :multiline="true">Coming soon</TextLabel>
-			</PopoverButton>
+			{/each}
 		</LayoutRow>
-		<LayoutCol class="panel-body">
-			<component :is="panelType" v-if="panelType" />
-			<LayoutCol class="empty-panel" v-else>
+		<PopoverButton icon="VerticalEllipsis">
+			<TextLabel bold={true}>Panel Options</TextLabel>
+			<TextLabel multiline={true}>Coming soon</TextLabel>
+		</PopoverButton>
+	</LayoutRow>
+	<LayoutCol class="panel-body">
+		{#if panelType}
+			<svelte:component this={PANEL_COMPONENTS[panelType]} />
+		{:else}
+			<LayoutCol class="empty-panel">
 				<LayoutCol class="content">
 					<LayoutRow class="logotype">
-						<IconLabel :icon="'GraphiteLogotypeSolid'" />
+						<IconLabel icon="GraphiteLogotypeSolid" />
 					</LayoutRow>
 					<LayoutRow class="actions">
 						<table>
 							<tr>
 								<td>
-									<TextButton :label="'New Document'" :icon="'File'" :action="() => newDocument()" />
+									<TextButton label="New Document" icon="File" action={() => newDocument()} />
 								</td>
 								<td>
-									<UserInputLabel :keysWithLabelsGroups="[[...platformModifiers(true), { key: 'KeyN', label: 'N' }]]" />
+									<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
 								</td>
 							</tr>
 							<tr>
 								<td>
-									<TextButton :label="'Open Document'" :icon="'Folder'" :action="() => openDocument()" />
+									<TextButton label="Open Document" icon="Folder" action={() => openDocument()} />
 								</td>
 								<td>
-									<UserInputLabel :keysWithLabelsGroups="[[...platformModifiers(false), { key: 'KeyO', label: 'O' }]]" />
+									<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
 								</td>
 							</tr>
 						</table>
 					</LayoutRow>
 				</LayoutCol>
 			</LayoutCol>
-		</LayoutCol>
+		{/if}
 	</LayoutCol>
-</template>
+</LayoutCol>
 
-<style lang="scss">
-.panel {
-	background: var(--color-1-nearblack);
-	border-radius: 6px;
-	overflow: hidden;
+<style lang="scss" global>
+	.panel {
+		background: var(--color-1-nearblack);
+		border-radius: 6px;
+		overflow: hidden;
 
-	.tab-bar {
-		height: 28px;
-		min-height: auto;
+		.tab-bar {
+			height: 28px;
+			min-height: auto;
 
-		&.min-widths .tab-group .tab {
-			min-width: 120px;
-			max-width: 360px;
-		}
-
-		.tab-group {
-			flex: 1 1 100%;
-			position: relative;
-
-			// This always hangs out at the end of the last tab, providing 16px (15px plus the 1px reserved for the separator line) to the right of the tabs.
-			// When the last tab is selected, its bottom rounded fillet adds 16px to the width, which stretches the scrollbar width allocation in only that situation.
-			// This pseudo-element ensures we always reserve that space to prevent the scrollbar from jumping when the last tab is selected.
-			// There is unfortunately no apparent way to remove that 16px gap from the end of the scroll container, since negative margin does not reduce the scrollbar allocation.
-			&::after {
-				content: "";
-				width: 15px;
-				flex: 0 0 auto;
+			&.min-widths .tab-group .tab {
+				min-width: 120px;
+				max-width: 360px;
 			}
 
-			.tab {
-				flex: 0 1 auto;
-				height: 100%;
-				padding: 0 8px;
-				align-items: center;
+			.tab-group {
+				flex: 1 1 100%;
 				position: relative;
 
-				&.active {
-					background: var(--color-3-darkgray);
-					border-radius: 6px 6px 0 0;
+				// This always hangs out at the end of the last tab, providing 16px (15px plus the 1px reserved for the separator line) to the right of the tabs.
+				// When the last tab is selected, its bottom rounded fillet adds 16px to the width, which stretches the scrollbar width allocation in only that situation.
+				// This pseudo-element ensures we always reserve that space to prevent the scrollbar from jumping when the last tab is selected.
+				// There is unfortunately no apparent way to remove that 16px gap from the end of the scroll container, since negative margin does not reduce the scrollbar allocation.
+				&::after {
+					content: "";
+					width: 15px;
+					flex: 0 0 auto;
+				}
+
+				.tab {
+					flex: 0 1 auto;
+					height: 100%;
+					padding: 0 8px;
+					align-items: center;
 					position: relative;
 
-					&:not(:first-child)::before,
-					&::after {
-						content: "";
-						width: 16px;
-						height: 8px;
-						position: absolute;
-						bottom: 0;
+					&.active {
+						background: var(--color-3-darkgray);
+						border-radius: 6px 6px 0 0;
+						position: relative;
+
+						&:not(:first-child)::before,
+						&::after {
+							content: "";
+							width: 16px;
+							height: 8px;
+							position: absolute;
+							bottom: 0;
+						}
+
+						&:not(:first-child)::before {
+							left: -16px;
+							border-bottom-right-radius: 8px;
+							box-shadow: 8px 0 0 0 var(--color-3-darkgray);
+						}
+
+						&::after {
+							right: -16px;
+							border-bottom-left-radius: 8px;
+							box-shadow: -8px 0 0 0 var(--color-3-darkgray);
+						}
 					}
 
-					&:not(:first-child)::before {
-						left: -16px;
-						border-bottom-right-radius: 8px;
-						box-shadow: 8px 0 0 0 var(--color-3-darkgray);
+					span {
+						flex: 1 1 100%;
+						overflow-x: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						// Height and line-height required because https://stackoverflow.com/a/21611191/775283
+						height: 100%;
+						line-height: 28px;
 					}
 
-					&::after {
-						right: -16px;
-						border-bottom-left-radius: 8px;
-						box-shadow: -8px 0 0 0 var(--color-3-darkgray);
+					.icon-button {
+						margin-left: 8px;
 					}
-				}
 
-				span {
-					flex: 1 1 100%;
-					overflow-x: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					// Height and line-height required because https://stackoverflow.com/a/21611191/775283
-					height: 100%;
-					line-height: 28px;
-				}
+					& + .tab {
+						margin-left: 1px;
+					}
 
-				.icon-button {
-					margin-left: 8px;
-				}
-
-				& + .tab {
-					margin-left: 1px;
-				}
-
-				&:not(.active) + .tab:not(.active)::before {
-					content: "";
-					position: absolute;
-					left: -1px;
-					width: 1px;
-					height: 16px;
-					background: var(--color-4-dimgray);
-				}
-
-				&:last-of-type {
-					margin-right: 1px;
-
-					&:not(.active)::after {
+					&:not(.active) + .tab:not(.active)::before {
 						content: "";
 						position: absolute;
-						right: -1px;
+						left: -1px;
 						width: 1px;
 						height: 16px;
 						background: var(--color-4-dimgray);
 					}
+
+					&:last-of-type {
+						margin-right: 1px;
+
+						&:not(.active)::after {
+							content: "";
+							position: absolute;
+							right: -1px;
+							width: 1px;
+							height: 16px;
+							background: var(--color-4-dimgray);
+						}
+					}
 				}
 			}
+
+			.popover-button {
+				margin: 2px 4px;
+			}
 		}
 
-		.popover-button {
-			margin: 2px 4px;
-		}
-	}
+		.panel-body {
+			background: var(--color-3-darkgray);
+			flex: 1 1 100%;
+			flex-direction: column;
 
-	.panel-body {
-		background: var(--color-3-darkgray);
-		flex: 1 1 100%;
-		flex-direction: column;
+			.empty-panel {
+				background: var(--color-2-mildblack);
+				margin: 4px;
+				border-radius: 2px;
+				justify-content: center;
 
-		.empty-panel {
-			background: var(--color-2-mildblack);
-			margin: 4px;
-			border-radius: 2px;
-			justify-content: center;
+				.content {
+					flex: 0 0 auto;
+					align-items: center;
 
-			.content {
-				flex: 0 0 auto;
-				align-items: center;
+					.logotype {
+						margin-bottom: 40px;
 
-				.logotype {
-					margin-bottom: 40px;
-
-					svg {
-						width: auto;
-						height: 120px;
-					}
-				}
-
-				.actions {
-					table {
-						border-spacing: 8px;
-						margin: -8px;
-
-						td {
-							padding: 0;
+						svg {
+							width: auto;
+							height: 120px;
 						}
+					}
 
-						.text-button:not(:hover) {
-							background: none;
+					.actions {
+						table {
+							border-spacing: 8px;
+							margin: -8px;
+
+							td {
+								padding: 0;
+							}
+
+							.text-button:not(:hover) {
+								background: none;
+							}
 						}
 					}
 				}
 			}
 		}
 	}
-}
 </style>

frontend/src/components/window/workspace/Workspace.svelte

@@ -1,178 +1,170 @@
 <script lang="ts">
-import { defineComponent } from "vue";
+	import DialogModal from "@/components/floating-menus/DialogModal.svelte";
+	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import Panel from "@/components/window/workspace/Panel.svelte";
+	import { getContext } from "svelte";
+	import { type Editor } from "@/wasm-communication/editor";
+	import { type WorkspaceState } from "@/state-providers/workspace";
+	import { type PortfolioState } from "@/state-providers/portfolio";
+	import { type DialogState } from "@/state-providers/dialog";
+	import { FrontendDocumentDetails } from "@/wasm-communication/messages";
 
-import DialogModal from "@/components/floating-menus/DialogModal.vue";
-import LayoutCol from "@/components/layout/LayoutCol.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import Panel from "@/components/window/workspace/Panel.vue";
+	const MIN_PANEL_SIZE = 100;
+	const PANEL_SIZES = {
+		/**/ root: 100,
+		/*   ├── */ content: 80,
+		/*   │      ├── */ document: 60,
+		/*   │      └── */ graph: 40,
+		/*   └── */ details: 20,
+		/*          ├── */ properties: 45,
+		/*          └── */ layers: 55,
+	};
 
-const MIN_PANEL_SIZE = 100;
-const PANEL_SIZES = {
-	/**/ root: 100,
-	/*   ├── */ content: 80,
-	/*   │      ├── */ document: 60,
-	/*   │      └── */ graph: 40,
-	/*   └── */ details: 20,
-	/*          ├── */ properties: 45,
-	/*          └── */ layers: 55,
-};
+	let panelSizes = PANEL_SIZES;
+	let documentPanel: Panel;
 
-export default defineComponent({
-	inject: ["workspace", "portfolio", "dialog", "editor"],
-	data() {
-		return {
-			panelSizes: PANEL_SIZES,
+	$: activeDocumentIndex = $portfolio.activeDocumentIndex;
+	$: nodeGraphVisible = $workspace.nodeGraphVisible;
+	$: documentTabLabels = $portfolio.documents.map((doc: FrontendDocumentDetails) => {
+		const name = doc.displayName;
+
+		if (!editor.instance.inDevelopmentMode()) return { name };
+
+		const tooltip = `Document ID ${doc.id}`;
+		return { name, tooltip };
+	});
+	$: {
+		scrollIntoView(activeDocumentIndex);
+	}
+	function scrollIntoView(activeDocumentIndex: number) {
+		documentPanel?.scrollTabIntoView(activeDocumentIndex);
+	}
+
+	const editor = getContext<Editor>("editor");
+	const workspace = getContext<WorkspaceState>("workspace");
+	const portfolio = getContext<PortfolioState>("portfolio");
+	const dialog = getContext<DialogState>("dialog");
+
+	function resizePanel(e: PointerEvent) {
+		const gutter = (e.target || undefined) as HTMLDivElement | undefined;
+		const nextSibling = (gutter?.nextElementSibling || undefined) as HTMLDivElement | undefined;
+		const prevSibling = (gutter?.previousElementSibling || undefined) as HTMLDivElement | undefined;
+		const parentElement = (gutter?.parentElement || undefined) as HTMLDivElement | undefined;
+
+		const nextSiblingName = (nextSibling?.getAttribute("data-subdivision-name") || undefined) as keyof typeof PANEL_SIZES;
+		const prevSiblingName = (prevSibling?.getAttribute("data-subdivision-name") || undefined) as keyof typeof PANEL_SIZES;
+
+		if (!gutter || !nextSibling || !prevSibling || !parentElement || !nextSiblingName || !prevSiblingName) return;
+
+		// Are we resizing horizontally?
+		const isHorizontal = gutter.getAttribute("data-gutter-horizontal") !== null;
+
+		// Get the current size in px of the panels being resized and the gutter
+		const gutterSize = isHorizontal ? gutter.getBoundingClientRect().width : gutter.getBoundingClientRect().height;
+		const nextSiblingSize = isHorizontal ? nextSibling.getBoundingClientRect().width : nextSibling.getBoundingClientRect().height;
+		const prevSiblingSize = isHorizontal ? prevSibling.getBoundingClientRect().width : prevSibling.getBoundingClientRect().height;
+		const parentElementSize = isHorizontal ? parentElement.getBoundingClientRect().width : parentElement.getBoundingClientRect().height;
+
+		// Measure the resizing panels as a percentage of all sibling panels
+		const totalResizingSpaceOccupied = gutterSize + nextSiblingSize + prevSiblingSize;
+		const proportionBeingResized = totalResizingSpaceOccupied / parentElementSize;
+
+		// Prevent cursor flicker as mouse temporarily leaves the gutter
+		gutter.setPointerCapture(e.pointerId);
+
+		const mouseStart = isHorizontal ? e.clientX : e.clientY;
+
+		const updatePosition = (e: PointerEvent): void => {
+			const mouseCurrent = isHorizontal ? e.clientX : e.clientY;
+			let mouseDelta = mouseStart - mouseCurrent;
+
+			mouseDelta = Math.max(nextSiblingSize + mouseDelta, MIN_PANEL_SIZE) - nextSiblingSize;
+			mouseDelta = prevSiblingSize - Math.max(prevSiblingSize - mouseDelta, MIN_PANEL_SIZE);
+
+			panelSizes[nextSiblingName] = ((nextSiblingSize + mouseDelta) / totalResizingSpaceOccupied) * proportionBeingResized * 100;
+			panelSizes[prevSiblingName] = ((prevSiblingSize - mouseDelta) / totalResizingSpaceOccupied) * proportionBeingResized * 100;
+
+			window.dispatchEvent(new CustomEvent("resize"));
 		};
-	},
-	computed: {
-		activeDocumentIndex() {
-			return this.portfolio.state.activeDocumentIndex;
-		},
-		nodeGraphVisible() {
-			return this.workspace.state.nodeGraphVisible;
-		},
-		documentTabLabels() {
-			return this.portfolio.state.documents.map((doc) => {
-				const name = doc.displayName;
 
-				if (!this.editor.instance.inDevelopmentMode()) return { name };
+		const cleanup = (e: PointerEvent): void => {
+			gutter.releasePointerCapture(e.pointerId);
 
-				const tooltip = `Document ID ${doc.id}`;
-				return { name, tooltip };
-			});
-		},
-	},
-	methods: {
-		resizePanel(event: PointerEvent) {
-			const gutter = (event.target || undefined) as HTMLDivElement | undefined;
-			const nextSibling = (gutter?.nextElementSibling || undefined) as HTMLDivElement | undefined;
-			const prevSibling = (gutter?.previousElementSibling || undefined) as HTMLDivElement | undefined;
-			const parentElement = (gutter?.parentElement || undefined) as HTMLDivElement | undefined;
+			document.removeEventListener("pointermove", updatePosition);
+			document.removeEventListener("pointerleave", cleanup);
+			document.removeEventListener("pointerup", cleanup);
+		};
 
-			const nextSiblingName = (nextSibling?.getAttribute("data-subdivision-name") || undefined) as keyof typeof PANEL_SIZES;
-			const prevSiblingName = (prevSibling?.getAttribute("data-subdivision-name") || undefined) as keyof typeof PANEL_SIZES;
-
-			if (!gutter || !nextSibling || !prevSibling || !parentElement || !nextSiblingName || !prevSiblingName) return;
-
-			// Are we resizing horizontally?
-			const isHorizontal = gutter.getAttribute("data-gutter-horizontal") !== null;
-
-			// Get the current size in px of the panels being resized and the gutter
-			const gutterSize = isHorizontal ? gutter.getBoundingClientRect().width : gutter.getBoundingClientRect().height;
-			const nextSiblingSize = isHorizontal ? nextSibling.getBoundingClientRect().width : nextSibling.getBoundingClientRect().height;
-			const prevSiblingSize = isHorizontal ? prevSibling.getBoundingClientRect().width : prevSibling.getBoundingClientRect().height;
-			const parentElementSize = isHorizontal ? parentElement.getBoundingClientRect().width : parentElement.getBoundingClientRect().height;
-
-			// Measure the resizing panels as a percentage of all sibling panels
-			const totalResizingSpaceOccupied = gutterSize + nextSiblingSize + prevSiblingSize;
-			const proportionBeingResized = totalResizingSpaceOccupied / parentElementSize;
-
-			// Prevent cursor flicker as mouse temporarily leaves the gutter
-			gutter.setPointerCapture(event.pointerId);
-
-			const mouseStart = isHorizontal ? event.clientX : event.clientY;
-
-			const updatePosition = (event: PointerEvent): void => {
-				const mouseCurrent = isHorizontal ? event.clientX : event.clientY;
-				let mouseDelta = mouseStart - mouseCurrent;
-
-				mouseDelta = Math.max(nextSiblingSize + mouseDelta, MIN_PANEL_SIZE) - nextSiblingSize;
-				mouseDelta = prevSiblingSize - Math.max(prevSiblingSize - mouseDelta, MIN_PANEL_SIZE);
-
-				this.panelSizes[nextSiblingName] = ((nextSiblingSize + mouseDelta) / totalResizingSpaceOccupied) * proportionBeingResized * 100;
-				this.panelSizes[prevSiblingName] = ((prevSiblingSize - mouseDelta) / totalResizingSpaceOccupied) * proportionBeingResized * 100;
-
-				window.dispatchEvent(new CustomEvent("resize"));
-			};
-
-			const cleanup = (event: PointerEvent): void => {
-				gutter.releasePointerCapture(event.pointerId);
-
-				document.removeEventListener("pointermove", updatePosition);
-				document.removeEventListener("pointerleave", cleanup);
-				document.removeEventListener("pointerup", cleanup);
-			};
-
-			document.addEventListener("pointermove", updatePosition);
-			document.addEventListener("pointerleave", cleanup);
-			document.addEventListener("pointerup", cleanup);
-		},
-	},
-	watch: {
-		async activeDocumentIndex(newIndex: number) {
-			(this.$refs.documentPanel as typeof Panel | undefined)?.scrollTabIntoView(newIndex);
-		},
-	},
-	components: {
-		DialogModal,
-		LayoutCol,
-		LayoutRow,
-		Panel,
-	},
-});
+		document.addEventListener("pointermove", updatePosition);
+		document.addEventListener("pointerleave", cleanup);
+		document.addEventListener("pointerup", cleanup);
+	}
 </script>
 
-<template>
-	<LayoutRow class="workspace" data-workspace>
-		<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['root'] }" data-subdivision-name="root">
-			<LayoutCol class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['content'] }" data-subdivision-name="content">
-				<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['document'] }" data-subdivision-name="document">
-					<Panel
-						:panelType="portfolio.state.documents.length > 0 ? 'Document' : undefined"
-						:tabCloseButtons="true"
-						:tabMinWidths="true"
-						:tabLabels="documentTabLabels"
-						:clickAction="(tabIndex: number) => editor.instance.selectDocument(portfolio.state.documents[tabIndex].id)"
-						:closeAction="(tabIndex: number) => editor.instance.closeDocumentWithConfirmation(portfolio.state.documents[tabIndex].id)"
-						:tabActiveIndex="portfolio.state.activeDocumentIndex"
-						ref="documentPanel"
-					/>
+<LayoutRow class="workspace" data-workspace>
+	<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["root"] }} data-subdivision-name="root">
+		<LayoutCol class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["content"] }} data-subdivision-name="content">
+			<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["document"] }} data-subdivision-name="document">
+				<Panel
+					panelType={$portfolio.documents.length > 0 ? "Document" : undefined}
+					tabCloseButtons={true}
+					tabMinWidths={true}
+					tabLabels={documentTabLabels}
+					clickAction={(tabIndex) => editor.instance.selectDocument($portfolio.documents[tabIndex].id)}
+					closeAction={(tabIndex) => editor.instance.closeDocumentWithConfirmation($portfolio.documents[tabIndex].id)}
+					tabActiveIndex={$portfolio.activeDocumentIndex}
+					bind:this={documentPanel}
+				/>
+			</LayoutRow>
+			{#if nodeGraphVisible}
+				<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={resizePanel} />
+				<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["graph"] }} data-subdivision-name="graph">
+					<Panel panelType="NodeGraph" tabLabels={[{ name: "Node Graph" }]} tabActiveIndex={0} />
 				</LayoutRow>
-				<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical @pointerdown="(e: PointerEvent) => resizePanel(e)" v-if="nodeGraphVisible"></LayoutRow>
-				<LayoutRow class="workspace-grid-subdivision" v-if="nodeGraphVisible" :style="{ 'flex-grow': panelSizes['graph'] }" data-subdivision-name="graph">
-					<Panel :panelType="'NodeGraph'" :tabLabels="[{ name: 'Node Graph' }]" :tabActiveIndex="0" />
-				</LayoutRow>
-			</LayoutCol>
-			<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal @pointerdown="(e: PointerEvent) => resizePanel(e)"></LayoutCol>
-			<LayoutCol class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['details'] }" data-subdivision-name="details">
-				<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['properties'] }" data-subdivision-name="properties">
-					<Panel :panelType="'Properties'" :tabLabels="[{ name: 'Properties' }]" :tabActiveIndex="0" />
-				</LayoutRow>
-				<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical @pointerdown="(e: PointerEvent) => resizePanel(e)"></LayoutRow>
-				<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['layers'] }" data-subdivision-name="layers">
-					<Panel :panelType="'LayerTree'" :tabLabels="[{ name: 'Layer Tree' }]" :tabActiveIndex="0" />
-				</LayoutRow>
-			</LayoutCol>
-		</LayoutRow>
-		<DialogModal v-if="dialog.state.visible" />
+			{/if}
+		</LayoutCol>
+		<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal on:pointerdown={(e) => resizePanel(e)} />
+		<LayoutCol class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["details"] }} data-subdivision-name="details">
+			<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["properties"] }} data-subdivision-name="properties">
+				<Panel panelType="Properties" tabLabels={[{ name: "Properties" }]} tabActiveIndex={0} />
+			</LayoutRow>
+			<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} />
+			<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["layers"] }} data-subdivision-name="layers">
+				<Panel panelType="LayerTree" tabLabels={[{ name: "Layer Tree" }]} tabActiveIndex={0} />
+			</LayoutRow>
+		</LayoutCol>
 	</LayoutRow>
-</template>
+	{#if $dialog.visible}
+		<DialogModal />
+	{/if}
+</LayoutRow>
 
-<style lang="scss">
-.workspace {
-	position: relative;
-	flex: 1 1 100%;
+<style lang="scss" global>
+	.workspace {
+		position: relative;
+		flex: 1 1 100%;
 
-	.workspace-grid-subdivision {
-		min-height: 28px;
-		flex: 1 1 0;
+		.workspace-grid-subdivision {
+			min-height: 28px;
+			flex: 1 1 0;
 
-		&.folded {
-			flex-grow: 0;
-			height: 0;
+			&.folded {
+				flex-grow: 0;
+				height: 0;
+			}
+		}
+
+		.workspace-grid-resize-gutter {
+			flex: 0 0 4px;
+
+			&.layout-row {
+				cursor: ns-resize;
+			}
+
+			&.layout-col {
+				cursor: ew-resize;
+			}
 		}
 	}
-
-	.workspace-grid-resize-gutter {
-		flex: 0 0 4px;
-
-		&.layout-row {
-			cursor: ns-resize;
-		}
-
-		&.layout-col {
-			cursor: ew-resize;
-		}
-	}
-}
 </style>