Update all frontend npm dependencies except Svelte and Vite (#3120)

* Upgrade node dependencies except Svelte 5 and its peer deps

* Fix lint errors

* Fix previous Rust deps upgrade breakage

* Fix demo artwork

* Allow profiling CI workflow to fail

frontend/src/components/Editor.svelte

@@ -146,8 +146,9 @@
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>\
 			');
 
-		--color-transparent-checkered-background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
-			linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(#ffffff, #ffffff);
+		--color-transparent-checkered-background:
+			linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
+			linear-gradient(#ffffff, #ffffff);
 		--color-transparent-checkered-background-size: 16px 16px, 16px 16px, 16px 16px;
 		--color-transparent-checkered-background-position: 0 0, 8px 8px, 8px 8px;
 		--color-transparent-checkered-background-position-plus-one: 1px 1px, 9px 9px, 9px 9px;

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

@@ -282,7 +282,6 @@
 		const stop = gradientSpectrumInputWidget && activeIndex !== undefined && gradient?.atIndex(activeIndex);
 		if (stop && gradientSpectrumInputWidget instanceof SpectrumInput) {
 			stop.color = colorToEmit;
-			gradient = gradient;
 		}
 
 		dispatch("colorOrGradient", gradient || colorToEmit);
@@ -452,7 +451,6 @@
 						{gradient}
 						{disabled}
 						on:gradient={() => {
-							gradient = gradient;
 							if (gradient) dispatch("colorOrGradient", gradient);
 						}}
 						on:activeMarkerIndexChange={gradientActiveMarkerIndexChange}
@@ -596,7 +594,7 @@
 					unit="%"
 					mode="Range"
 					displayDecimalPlaces={1}
-					tooltip={`Scale of translucency, from transparent (0%) to opaque (100%), for the color's alpha channel`}
+					tooltip="Scale of translucency, from transparent (0%) to opaque (100%), for the color's alpha channel"
 				/>
 			</LayoutRow>
 			<LayoutRow class="leftover-space" />

frontend/src/components/panels/Document.svelte

@@ -329,11 +329,11 @@
 
 		await tick();
 
-		if (!textInput) {
-			return;
-		}
+		if (!textInput) return;
 
+		// eslint-disable-next-line svelte/no-dom-manipulating
 		if (displayEditableTextbox.text === "") textInput.textContent = "";
+		// eslint-disable-next-line svelte/no-dom-manipulating
 		else textInput.textContent = `${displayEditableTextbox.text}\n`;
 
 		// Make it so `maxHeight` is a multiple of `lineHeight`
@@ -508,7 +508,7 @@
 				<LayoutRow class="spacer" />
 			{/if}
 			<LayoutCol class="tool-shelf-bottom-widgets">
-				<WidgetLayout class={"working-colors-input-area"} layout={$document.workingColorsLayout} />
+				<WidgetLayout class="working-colors-input-area" layout={$document.workingColorsLayout} />
 			</LayoutCol>
 		</LayoutCol>
 		<LayoutCol class="viewport-container">

frontend/src/components/panels/Layers.svelte

@@ -547,7 +547,7 @@
 						<div class="expand-arrow-none"></div>
 					{/if}
 					{#if listing.entry.clipped}
-						<IconLabel icon="Clipped" class="clipped-arrow" tooltip={"Clipping mask is active (Alt-click border to release)"} />
+						<IconLabel icon="Clipped" class="clipped-arrow" tooltip="Clipping mask is active (Alt-click border to release)" />
 					{/if}
 					<div class="thumbnail">
 						{#if $nodeGraph.thumbnails.has(listing.entry.id)}
@@ -555,7 +555,7 @@
 						{/if}
 					</div>
 					{#if listing.entry.name === "Artboard"}
-						<IconLabel icon="Artboard" class={"layer-type-icon"} />
+						<IconLabel icon="Artboard" class="layer-type-icon" />
 					{/if}
 					<LayoutRow class="layer-name" on:dblclick={() => onEditLayerName(listing)}>
 						<input
@@ -572,7 +572,7 @@
 					</LayoutRow>
 					{#if !listing.entry.unlocked || !listing.entry.parentsUnlocked}
 						<IconButton
-							class={"status-toggle"}
+							class="status-toggle"
 							classes={{ inherited: !listing.entry.parentsUnlocked }}
 							action={(e) => (toggleLayerLock(listing.entry.id), e?.stopPropagation())}
 							size={24}
@@ -582,7 +582,7 @@
 						/>
 					{/if}
 					<IconButton
-						class={"status-toggle"}
+						class="status-toggle"
 						classes={{ inherited: !listing.entry.parentsVisible }}
 						action={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
 						size={24}

frontend/src/components/views/Graph.svelte

@@ -259,7 +259,7 @@
 
 	<!-- Click target debug visualizations -->
 	{#if $nodeGraph.clickTargets}
-		<div class="click-targets" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
+		<div class="click-targets" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
 			<svg>
 				{#each $nodeGraph.clickTargets.nodeClickTargets as pathString}
 					<path class="node" d={pathString} />
@@ -283,14 +283,14 @@
 	{/if}
 
 	<!-- Thick vertical layer connection wires -->
-	<div class="wires" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
+	<div class="wires" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
 		<svg>
 			{#each $nodeGraph.wires.values() as map}
 				{#each map.values() as { pathString, dataType, thick, dashed }}
 					{#if thick}
 						<path
 							d={pathString}
-							style:--data-line-width={"8px"}
+							style:--data-line-width="8px"
 							style:--data-color={`var(--color-data-${dataType.toLowerCase()})`}
 							style:--data-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`}
 							style:--data-dasharray={`3,${dashed ? 2 : 0}`}
@@ -302,7 +302,7 @@
 	</div>
 
 	<!-- Import and Export connectors -->
-	<div class="imports-and-exports" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
+	<div class="imports-and-exports" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
 		{#if $nodeGraph.updateImportsExports}
 			{#each $nodeGraph.updateImportsExports.imports as frontendOutput, index}
 				{#if frontendOutput}
@@ -352,7 +352,7 @@
 						{#if (hoveringImportIndex === index || editingNameImportIndex === index) && $nodeGraph.updateImportsExports.addImportExport}
 							<IconButton
 								size={16}
-								icon={"Remove"}
+								icon="Remove"
 								class="remove-button-import"
 								data-index={index}
 								data-import-text-edge
@@ -411,7 +411,7 @@
 							{/if}
 							<IconButton
 								size={16}
-								icon={"Remove"}
+								icon="Remove"
 								class="remove-button-export"
 								data-index={index}
 								data-export-text-edge
@@ -459,7 +459,7 @@
 					style:--offset-left={($nodeGraph.updateImportsExports.exportPosition.x - 12) / 24}
 					style:--offset-top={($nodeGraph.updateImportsExports.exportPosition.y - 12) / 24 + $nodeGraph.updateImportsExports.exports.length}
 				>
-					<IconButton size={24} icon={"Add"} action={() => editor.handle.addSecondaryExport()} />
+					<IconButton size={24} icon="Add" action={() => editor.handle.addSecondaryExport()} />
 				</div>
 			{/if}
 
@@ -482,7 +482,7 @@
 	</div>
 
 	<!-- Layers and nodes -->
-	<div class="layers-and-nodes" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
+	<div class="layers-and-nodes" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
 		<!-- Layers -->
 		{#each Array.from($nodeGraph.nodes)
 			.filter(([nodeId, node]) => node.isLayer && $nodeGraph.visibleNodes.has(nodeId))
@@ -589,7 +589,7 @@
 				</div>
 				<div class="solo-drag-grip" title="Drag only this layer without pushing others outside the stack"></div>
 				<IconButton
-					class={"visibility"}
+					class="visibility"
 					data-visibility-button
 					size={24}
 					icon={node.visible ? "EyeVisible" : "EyeHidden"}
@@ -618,7 +618,7 @@
 						{#if !thick}
 							<path
 								d={pathString}
-								style:--data-line-width={"2px"}
+								style:--data-line-width="2px"
 								style:--data-color={`var(--color-data-${dataType.toLowerCase()})`}
 								style:--data-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`}
 								style:--data-dasharray={`3,${dashed ? 2 : 0}`}

frontend/src/components/widgets/WidgetSection.svelte

@@ -35,17 +35,17 @@
 				editor.handle.setNodePinned(widgetData.id, !widgetData.pinned);
 				e?.stopPropagation();
 			}}
-			class={"show-only-on-hover"}
+			class="show-only-on-hover"
 		/>
 		<IconButton
-			icon={"Trash"}
-			tooltip={"Delete this node from the layer chain"}
+			icon="Trash"
+			tooltip="Delete this node from the layer chain"
 			size={24}
 			action={(e) => {
 				editor.handle.deleteNode(widgetData.id);
 				e?.stopPropagation();
 			}}
-			class={"show-only-on-hover"}
+			class="show-only-on-hover"
 		/>
 		<IconButton
 			icon={widgetData.visible ? "EyeVisible" : "EyeHidden"}

frontend/src/components/widgets/WidgetTable.svelte

@@ -9,15 +9,17 @@
 </script>
 
 <table>
-	{#each widgetData.tableWidgets as row}
-		<tr>
-			{#each row as cell}
-				<td>
-					<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} />
-				</td>
-			{/each}
-		</tr>
-	{/each}
+	<tbody>
+		{#each widgetData.tableWidgets as row}
+			<tr>
+				{#each row as cell}
+					<td>
+						<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} />
+					</td>
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
 </table>
 
 <style lang="scss">

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

@@ -188,7 +188,7 @@
 	}
 </script>
 
-<LayoutRow class={"curve-input"} classes={{ disabled, ...classes }} style={styleName} {styles} {tooltip}>
+<LayoutRow class="curve-input" classes={{ disabled, ...classes }} style={styleName} {styles} {tooltip}>
 	<svg viewBox="0 0 1 1" on:pointermove={handlePointerMove} on:pointerup={handlePointerUp}>
 		{#each { length: GRID_SIZE - 1 } as _, i}
 			<path class="grid" d={`M 0 ${(i + 1) / GRID_SIZE} L 1 ${(i + 1) / GRID_SIZE}`} />

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

@@ -32,9 +32,7 @@
 	let id = String(Math.random()).substring(2);
 	let macKeyboardLayout = platformIsMac();
 
-	$: inputValue = value;
-
-	$: dispatch("value", inputValue);
+	$: dispatch("value", value);
 
 	// Select (highlight) all the text. For technical reasons, it is necessary to pass the current text.
 	export function selectAllText(currentText: string) {
@@ -85,7 +83,7 @@
 			{disabled}
 			{placeholder}
 			bind:this={inputOrTextarea}
-			bind:value={inputValue}
+			bind:value
 			on:focus={() => dispatch("textFocused")}
 			on:blur={() => dispatch("textChanged")}
 			on:change={() => dispatch("textChanged")}
@@ -104,7 +102,7 @@
 			{spellcheck}
 			{disabled}
 			bind:this={inputOrTextarea}
-			bind:value={inputValue}
+			bind:value
 			on:focus={() => dispatch("textFocused")}
 			on:blur={() => dispatch("textChanged")}
 			on:change={() => dispatch("textChanged")}

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

@@ -640,7 +640,7 @@
 </script>
 
 <FieldInput
-	class={"number-input"}
+	class="number-input"
 	classes={{
 		increment: mode === "Increment",
 		range: mode === "Range",

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

@@ -39,7 +39,7 @@
 	export let requiresLock = false;
 	export let textOnly = false;
 
-	$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported);
+	$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage($fullscreen.keyboardLockApiSupported);
 
 	$: displayKeyboardLockNotice = requiresLock && !$fullscreen.keyboardLocked;
 

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

@@ -29,7 +29,7 @@
 	<LayoutRow class="hint-groups">
 		{#each hintData as hintGroup, index (hintGroup)}
 			{#if index !== 0}
-				<Separator type={"Section"} />
+				<Separator type="Section" />
 			{/if}
 			{#each hintGroup as hint (hint)}
 				{#if hint.plus}

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

@@ -12,13 +12,13 @@
 </script>
 
 <LayoutRow class="window-button linux" tooltip="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
-	<IconLabel icon={"WindowButtonWinMinimize"} />
+	<IconLabel icon="WindowButtonWinMinimize" />
 </LayoutRow>
 <LayoutRow class="window-button linux" tooltip={maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
 	<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
 </LayoutRow>
 <LayoutRow class="window-button linux" tooltip="Close" on:click={() => editor.handle.appWindowClose()}>
-	<IconLabel icon={"WindowButtonWinClose"} />
+	<IconLabel icon="WindowButtonWinClose" />
 </LayoutRow>
 
 <style lang="scss" global>

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

@@ -12,13 +12,13 @@
 </script>
 
 <LayoutRow class="window-button windows" tooltip="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
-	<IconLabel icon={"WindowButtonWinMinimize"} />
+	<IconLabel icon="WindowButtonWinMinimize" />
 </LayoutRow>
 <LayoutRow class="window-button windows" tooltip={maximized ? "Restore Down" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
 	<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
 </LayoutRow>
 <LayoutRow class="window-button windows" tooltip="Close" on:click={() => editor.handle.appWindowClose()}>
-	<IconLabel icon={"WindowButtonWinClose"} />
+	<IconLabel icon="WindowButtonWinClose" />
 </LayoutRow>
 
 <style lang="scss" global>

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

@@ -160,32 +160,34 @@
 					</LayoutRow>
 					<LayoutRow class="actions">
 						<table>
-							<tr>
-								<td>
-									<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
-								</td>
-								<td>
-									<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
-								</td>
-								<td>
-									<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
-								</td>
-							</tr>
-							<tr>
-								<td colspan="2">
-									<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
-								</td>
-							</tr>
-							<tr>
-								<td colspan="2">
-									<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
-								</td>
-							</tr>
+							<tbody>
+								<tr>
+									<td>
+										<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
+									</td>
+									<td>
+										<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
+									</td>
+									<td>
+										<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
+									</td>
+								</tr>
+								<tr>
+									<td colspan="2">
+										<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
+									</td>
+								</tr>
+								<tr>
+									<td colspan="2">
+										<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
+									</td>
+								</tr>
+							</tbody>
 						</table>
 					</LayoutRow>
 				</LayoutCol>

frontend/src/editor.ts

@@ -18,7 +18,6 @@ export async function initWasm() {
 	if (wasmImport !== undefined) return;
 
 	// Import the WASM module JS bindings and wrap them in the panic proxy
-	// eslint-disable-next-line import/no-cycle
 	const wasm = await init();
 	for (const [name, f] of Object.entries(wasm)) {
 		if (name.startsWith("__node_registry")) f();
@@ -58,7 +57,7 @@ export function createEditor(): Editor {
 		if (!demoArtwork) return;
 
 		try {
-			const url = new URL(`/${demoArtwork}.graphite`, document.location.href);
+			const url = new URL(`/demo-artwork/${demoArtwork}.graphite`, document.location.href);
 			const data = await fetch(url);
 			if (!data.ok) throw new Error();
 

frontend/src/messages.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable max-classes-per-file */
 
 import { Transform, Type, plainToClass } from "class-transformer";
 
@@ -1400,7 +1399,6 @@ export class Widget {
 	widgetId!: bigint;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function hoistWidgetHolder(widgetHolder: any): Widget {
 	const kind = Object.keys(widgetHolder.widget)[0];
 	const props = widgetHolder.widget[kind];
@@ -1415,7 +1413,6 @@ function hoistWidgetHolder(widgetHolder: any): Widget {
 	return plainToClass(Widget, { props, widgetId });
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function hoistWidgetHolders(widgetHolders: any[]): Widget[] {
 	return widgetHolders.map(hoistWidgetHolder);
 }
@@ -1431,7 +1428,6 @@ export class WidgetDiffUpdate extends JsMessage {
 	layoutTarget!: unknown;
 
 	// TODO: Replace `any` with correct typing
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	@Transform(({ value }: { value: any }) => createWidgetDiff(value))
 	diff!: WidgetDiff[];
 }
@@ -1466,7 +1462,6 @@ export function patchWidgetLayout(layout: /* &mut */ WidgetLayout, updates: Widg
 				return targetLayout;
 			}
 			// This is a path traversal so we can assume from the backend that it exists
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 			if (targetLayout && "action" in targetLayout) return targetLayout.children![index];
 
 			return targetLayout?.[index];
@@ -1487,7 +1482,6 @@ export function patchWidgetLayout(layout: /* &mut */ WidgetLayout, updates: Widg
 			diffObject.length = 0;
 		}
 		// Remove all of the keys from the old object
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		Object.keys(diffObject).forEach((key) => delete (diffObject as any)[key]);
 
 		// Assign keys to the new object
@@ -1520,7 +1514,6 @@ export function isWidgetSection(layoutRow: LayoutGroup): layoutRow is WidgetSect
 }
 
 // Unpacking rust types to more usable type in the frontend
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createWidgetDiff(diffs: any[]): WidgetDiff[] {
 	return diffs.map((diff) => {
 		const { widgetPath, newValue } = diff;
@@ -1539,7 +1532,6 @@ function createWidgetDiff(diffs: any[]): WidgetDiff[] {
 }
 
 // Unpacking a layout group
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createLayoutGroup(layoutGroup: any): LayoutGroup {
 	if (layoutGroup.column) {
 		const columnWidgets = hoistWidgetHolders(layoutGroup.column.columnWidgets);
@@ -1597,7 +1589,6 @@ export class UpdateMenuBarLayout extends JsMessage {
 	layoutTarget!: unknown;
 
 	// TODO: Replace `any` with correct typing
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	@Transform(({ value }: { value: any }) => createMenuLayout(value))
 	layout!: MenuBarEntry[];
 }
@@ -1614,14 +1605,12 @@ export class UpdateToolShelfLayout extends WidgetDiffUpdate {}
 
 export class UpdateWorkingColorsLayout extends WidgetDiffUpdate {}
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createMenuLayout(menuBarEntry: any[]): MenuBarEntry[] {
 	return menuBarEntry.map((entry) => ({
 		...entry,
 		children: createMenuLayoutRecursive(entry.children),
 	}));
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createMenuLayoutRecursive(children: any[][]): MenuBarEntry[][] {
 	return children.map((groups) =>
 		groups.map((entry) => ({
@@ -1634,7 +1623,6 @@ function createMenuLayoutRecursive(children: any[][]): MenuBarEntry[][] {
 }
 
 // `any` is used since the type of the object should be known from the Rust side
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type JSMessageFactory = (data: any, wasm: WebAssembly.Memory, handle: EditorHandle) => JsMessage;
 type MessageMaker = typeof JsMessage | JSMessageFactory;
 

frontend/src/state-providers/app-window.ts

@@ -1,11 +1,8 @@
-/* eslint-disable max-classes-per-file */
-
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
 import { type AppWindowPlatform, UpdatePlatform, UpdateViewportHolePunch, UpdateWindowState } from "@graphite/messages";
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createAppWindowState(editor: Editor) {
 	const { subscribe, update } = writable({
 		platform: "Web" as AppWindowPlatform,

frontend/src/state-providers/dialog.ts

@@ -13,7 +13,6 @@ import {
 } from "@graphite/messages";
 import { type IconName } from "@graphite/utility-functions/icons";
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDialogState(editor: Editor) {
 	const { subscribe, update } = writable({
 		visible: false,

frontend/src/state-providers/document.ts

@@ -16,7 +16,6 @@ import {
 	UpdateGraphFadeArtwork,
 } from "@graphite/messages";
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDocumentState(editor: Editor) {
 	const state = writable({
 		// Layouts

frontend/src/state-providers/fonts.ts

@@ -3,7 +3,6 @@ import { writable } from "svelte/store";
 import { type Editor } from "@graphite/editor";
 import { TriggerFontLoad } from "@graphite/messages";
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createFontsState(editor: Editor) {
 	// TODO: Do some code cleanup to remove the need for this empty store
 	const { subscribe } = writable({});

frontend/src/state-providers/fullscreen.ts

@@ -2,11 +2,15 @@ import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createFullscreenState(_: Editor) {
+	// Experimental Keyboard API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/keyboard
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const keyboardLockApiSupported: Readonly<boolean> = "keyboard" in navigator && (navigator as any).keyboard && "lock" in (navigator as any).keyboard;
+
 	const { subscribe, update } = writable({
 		windowFullscreen: false,
 		keyboardLocked: false,
+		keyboardLockApiSupported,
 	});
 
 	function fullscreenModeChanged() {
@@ -46,17 +50,12 @@ export function createFullscreenState(_: Editor) {
 		});
 	}
 
-	// Experimental Keyboard API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/keyboard
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const keyboardLockApiSupported: Readonly<boolean> = "keyboard" in navigator && (navigator as any).keyboard && "lock" in (navigator as any).keyboard;
-
 	return {
 		subscribe,
 		fullscreenModeChanged,
 		enterFullscreen,
 		exitFullscreen,
 		toggleFullscreen,
-		keyboardLockApiSupported,
 	};
 }
 export type FullscreenState = ReturnType<typeof createFullscreenState>;

frontend/src/state-providers/node-graph.ts

@@ -27,7 +27,6 @@ import {
 	UpdateWirePathInProgress,
 } from "@graphite/messages";
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createNodeGraphState(editor: Editor) {
 	const { subscribe, update } = writable({
 		box: undefined as Box | undefined,

frontend/src/state-providers/portfolio.ts

@@ -1,5 +1,3 @@
-/* eslint-disable max-classes-per-file */
-
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
@@ -20,7 +18,6 @@ import {
 import { downloadFile, downloadFileBlob, upload } from "@graphite/utility-functions/files";
 import { extractPixelData, rasterizeSVG } from "@graphite/utility-functions/rasterization";
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createPortfolioState(editor: Editor) {
 	const { subscribe, update } = writable({
 		unsaved: false,
@@ -49,7 +46,7 @@ export function createPortfolioState(editor: Editor) {
 	editor.subscriptions.subscribeJsMessage(TriggerFetchAndOpenDocument, async (triggerFetchAndOpenDocument) => {
 		try {
 			const { name, filename } = triggerFetchAndOpenDocument;
-			const url = new URL(filename, document.location.href);
+			const url = new URL(`demo-artwork/${filename}`, document.location.href);
 			const data = await fetch(url);
 			const content = await data.text();
 
@@ -90,7 +87,7 @@ export function createPortfolioState(editor: Editor) {
 			return;
 		}
 
-		const imageData = await extractPixelData(new Blob([data.content.data], { type: data.type }));
+		const imageData = await extractPixelData(new Blob([new Uint8Array(data.content.data)], { type: data.type }));
 		editor.handle.pasteImage(data.filename, new Uint8Array(imageData.data), imageData.width, imageData.height);
 	});
 	editor.subscriptions.subscribeJsMessage(TriggerSaveDocument, (triggerSaveDocument) => {

frontend/src/subscription-router.ts

@@ -9,7 +9,6 @@ type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type JsMessageCallbackMap = Record<string, JsMessageCallback<any> | undefined>;
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createSubscriptionRouter() {
 	const subscriptions: JsMessageCallbackMap = {};
 

frontend/src/utility-functions/debounce.ts

@@ -4,7 +4,6 @@ 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;
 	let recentlyUpdated: boolean = false;

frontend/src/utility-functions/icons.ts

@@ -1,5 +1,3 @@
-/* eslint-disable import/first */
-
 // Graphics
 import GraphiteLogotypeSolid from "@graphite-frontend/assets/graphics/graphite-logotype-solid.svg";
 

frontend/src/utility-functions/images.ts

@@ -1,5 +1,3 @@
-/* eslint-disable import/first */
-
 // Demo artwork
 import ThumbnailChangingSeasons from "@graphite-frontend/assets/images/demo-artwork/thumbnail-changing-seasons.png";
 import ThumbnailIsometricFountain from "@graphite-frontend/assets/images/demo-artwork/thumbnail-isometric-fountain.png";

frontend/src/utility-functions/panic-proxy.ts

@@ -12,12 +12,10 @@ export function panicProxy<T extends object>(module: T): T {
 			// Special handling to wrap the return of a constructor in the proxy
 			const isClass = isFunction && /^\s*class\s+/.test(targetValue.toString());
 			if (isClass) {
-				// eslint-disable-next-line func-names
 				return function (...args: unknown[]): unknown {
 					// All three of these comment lines are necessary to suppress errors at both compile time and while editing this file (@ts-expect-error doesn't work here while editing the file)
 					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 					// @ts-ignore
-					// eslint-disable-next-line new-cap
 					const result = new targetValue(...args);
 
 					return panicProxy(result);
@@ -25,7 +23,6 @@ export function panicProxy<T extends object>(module: T): T {
 			}
 
 			// Replace the original function with a wrapper function that runs the original in a try-catch block
-			// eslint-disable-next-line func-names
 			return function (...args: unknown[]): unknown {
 				let result;
 				try {