Replace the Vue frontend with Svelte

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>