Bump frontend dependencies to Svelte 5 (#3648)

* Add more recommended VS Code default configs

* Upgrade frontend dependencies including Svelte 5

* Fix derived_references_self runtime error

* Fix lint warnings

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

@@ -439,7 +439,7 @@
 					data-saturation-value-picker
 				>
 					{#if !isNone}
-						<div class="selection-circle" style:top={`${(1 - value) * 100}%`} style:left={`${saturation * 100}%`} />
+						<div class="selection-circle" style:top={`${(1 - value) * 100}%`} style:left={`${saturation * 100}%`}></div>
 					{/if}
 					{#if alignedAxis}
 						<div
@@ -448,7 +448,7 @@
 							class:value={alignedAxis === "value"}
 							style:top={`${(1 - value) * 100}%`}
 							style:left={`${saturation * 100}%`}
-						/>
+						></div>
 					{/if}
 				</LayoutCol>
 				<LayoutCol
@@ -459,7 +459,7 @@
 					data-hue-picker
 				>
 					{#if !isNone}
-						<div class="selection-needle" style:top={`${(1 - hue) * 100}%`} />
+						<div class="selection-needle" style:top={`${(1 - hue) * 100}%`}></div>
 					{/if}
 				</LayoutCol>
 				<LayoutCol
@@ -470,7 +470,7 @@
 					data-alpha-picker
 				>
 					{#if !isNone}
-						<div class="selection-needle" style:top={`${(1 - alpha) * 100}%`} />
+						<div class="selection-needle" style:top={`${(1 - alpha) * 100}%`}></div>
 					{/if}
 				</LayoutCol>
 			</LayoutRow>
@@ -677,7 +677,7 @@
 							style:--pure-color-gray={gray}
 							data-tooltip-label={`Set to ${name}`}
 							data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
-						/>
+						></div>
 					{/each}
 				</button>
 				{#if eyedropperSupported()}

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

@@ -56,8 +56,8 @@
 >
 	<div class="ring">
 		<div class="canvas-container">
-			<canvas width={ZOOM_WINDOW_DIMENSIONS} height={ZOOM_WINDOW_DIMENSIONS} bind:this={zoomPreviewCanvas} />
-			<div class="pixel-outline" />
+			<canvas width={ZOOM_WINDOW_DIMENSIONS} height={ZOOM_WINDOW_DIMENSIONS} bind:this={zoomPreviewCanvas}></canvas>
+			<div class="pixel-outline"></div>
 		</div>
 	</div>
 </FloatingMenu>

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

@@ -42,6 +42,7 @@
 
 	// Keep the child references outside of the entries array so as to avoid infinite recursion.
 	let childReferences: MenuList[][] = [];
+	let openChildValue: string | undefined = undefined;
 	let search = "";
 	let reactiveEntries = entries;
 	let highlighted = activeEntry as MenuListEntry | undefined;
@@ -172,7 +173,7 @@
 		// Close the containing menu
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
-			childReference.open = false;
+			openChildValue = undefined;
 			reactiveEntries = reactiveEntries;
 		}
 		dispatch("open", false);
@@ -192,7 +193,7 @@
 
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
-			childReference.open = true;
+			openChildValue = menuListEntry.value;
 			reactiveEntries = reactiveEntries;
 		} else {
 			dispatch("open", true);
@@ -207,19 +208,13 @@
 
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
-			childReference.open = false;
+			openChildValue = undefined;
 			reactiveEntries = reactiveEntries;
 		} else {
 			dispatch("open", false);
 		}
 	}
 
-	function isEntryOpen(menuListEntry: MenuListEntry): boolean {
-		if (!menuListEntry.children?.length) return false;
-
-		return getChildReference(menuListEntry)?.open || false;
-	}
-
 	function includeSeparator(entries: MenuListEntry[][], section: MenuListEntry[], sectionIndex: number, search: string): boolean {
 		const elementsBeforeCurrentSection = entries
 			.slice(0, sectionIndex)
@@ -242,7 +237,7 @@
 		// No submenu to open
 		if (!childReference || !highlightedEntry.children?.length) return false;
 
-		childReference.open = true;
+		openChildValue = highlightedEntry.value;
 		// The reason we bother taking `highlightdEntry` as an argument is because, when this function is called, it can ensure `highlightedEntry` is not undefined.
 		// But here we still have to set `highlighted` to itself so Svelte knows to reactively update it after we set its `childReference.open` property.
 		highlighted = highlighted;
@@ -262,7 +257,7 @@
 
 		const menuOpen = open;
 		const flatEntries = filteredEntries.flat().filter((entry) => !entry.disabled);
-		const openChild = flatEntries.findIndex((entry) => (entry.children?.length ?? 0) > 0 && getChildReference(entry)?.open);
+		const openChild = (openChildValue !== undefined && flatEntries.findIndex((entry) => entry.value === openChildValue)) || -1;
 
 		// Allow opening menu with space or enter
 		if (!menuOpen && (e.key === " " || e.key === "Enter")) {
@@ -442,7 +437,7 @@
 			{#each currentEntries(section, virtualScrollingEntryHeight, virtualScrollingStartIndex, virtualScrollingEndIndex, search) as entry, entryIndex (entryIndex + startIndex)}
 				<LayoutRow
 					class="row"
-					classes={{ open: isEntryOpen(entry), active: entry.label === highlighted?.label, disabled: Boolean(entry.disabled) }}
+					classes={{ open: openChildValue === entry.value, active: entry.label === highlighted?.label, disabled: Boolean(entry.disabled) }}
 					styles={{ height: virtualScrollingEntryHeight || "20px" }}
 					tooltipLabel={entry.tooltipLabel}
 					tooltipDescription={entry.tooltipDescription}
@@ -454,7 +449,7 @@
 					{#if entry.icon && drawIcon}
 						<IconLabel icon={entry.icon} iconSizeOverride={16} class="entry-icon" />
 					{:else if drawIcon}
-						<div class="no-icon" />
+						<div class="no-icon"></div>
 					{/if}
 
 					{#if entry.font}
@@ -470,7 +465,7 @@
 					{#if entry.children?.length}
 						<IconLabel class="submenu-arrow" icon="DropdownArrow" />
 					{:else}
-						<div class="no-submenu-arrow" />
+						<div class="no-submenu-arrow"></div>
 					{/if}
 
 					{#if entry.children}
@@ -483,7 +478,7 @@
 							}}
 							on:selectedEntryValuePath={({ detail }) => dispatch("selectedEntryValuePath", detail)}
 							parentsValuePath={[...parentsValuePath, entry.value]}
-							open={getChildReference(entry)?.open || false}
+							open={openChildValue === entry.value}
 							direction="TopRight"
 							entries={entry.children}
 							entriesHash={entry.childrenHash || 0n}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext, onMount } from "svelte";
+	import { SvelteMap } from "svelte/reactivity";
 
 	import type { FrontendNodeType } from "@graphite/messages";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
@@ -28,7 +29,7 @@
 	};
 
 	function buildNodeCategories(nodeTypes: FrontendNodeType[], searchTerm: string): [string, NodeCategoryDetails][] {
-		const categories = new Map<string, NodeCategoryDetails>();
+		const categories = new SvelteMap<string, NodeCategoryDetails>();
 		const isTypeSearch = searchTerm.toLowerCase().startsWith("type:");
 		let typeSearchTerm = "";
 		let remainingSearchTerms = [searchTerm.toLowerCase()];