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

.devcontainer/devcontainer.json

@@ -23,7 +23,6 @@
 				"streetsidesoftware.code-spell-checker",
 				// Helpful
 				"mhutchie.git-graph",
-				"waderyan.gitblame",
 				"qezhu.gitlink",
 				"wmaurer.change-case"
 			]

.github/workflows/comment-profiling-changes.yaml

@@ -1,7 +1,7 @@
 name: Profiling Changes
 
 on:
-  pull_request:
+  pull_request: {}
 
 env:
   CARGO_TERM_COLOR: always
@@ -9,6 +9,7 @@ env:
 jobs:
   profile:
     runs-on: ubuntu-latest
+    continue-on-error: true
     steps:
       - uses: actions/checkout@v4
         with:

.vscode/extensions.json

@@ -13,7 +13,6 @@
 		"streetsidesoftware.code-spell-checker",
 		// Helpful
 		"mhutchie.git-graph",
-		"waderyan.gitblame",
 		"qezhu.gitlink",
 		"wmaurer.change-case"
 	]

frontend/.eslintrc.cjs

@@ -1,109 +0,0 @@
-module.exports = {
-	root: true,
-	env: { browser: true, node: true },
-	extends: [
-		"eslint:recommended",
-		"plugin:import/recommended",
-		"plugin:@typescript-eslint/recommended",
-		"plugin:import/typescript",
-		"plugin:svelte/recommended",
-		"plugin:svelte/prettier",
-		"prettier",
-	],
-	plugins: ["import", "@typescript-eslint", "prettier"],
-	settings: {
-		"import/parsers": { "@typescript-eslint/parser": [".ts"] },
-		"import/resolver": { typescript: true, node: true },
-	},
-	parser: "@typescript-eslint/parser",
-	parserOptions: {
-		ecmaVersion: "latest",
-		project: "./tsconfig.json",
-		extraFileExtensions: [".svelte"],
-	},
-	ignorePatterns: [
-		// Ignore generated directories
-		"node_modules/",
-		"dist/",
-		"pkg/",
-		"wasm/pkg/",
-		// Don't ignore JS and TS dotfiles in this folder
-		"!.*.js",
-		"!.*.ts",
-	],
-	overrides: [
-		{
-			files: ["*.svelte"],
-			parser: "svelte-eslint-parser",
-			// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
-			parserOptions: { parser: "@typescript-eslint/parser" },
-		},
-		{
-			extends: ["plugin:@typescript-eslint/disable-type-checked"],
-			files: ["./*.js", "./*.cjs"],
-		},
-	],
-	rules: {
-		// Standard ESLint config (for ordinary JS syntax linting)
-		indent: "off",
-		quotes: ["error", "double", { allowTemplateLiterals: true }],
-		camelcase: ["error", { properties: "always" }],
-		"linebreak-style": ["error", "unix"],
-		"eol-last": ["error", "always"],
-		"max-len": ["error", { code: 200, tabWidth: 4, ignorePattern: `d="([\\s\\S]*?)"` }],
-		"prefer-destructuring": "off",
-		"no-console": "warn",
-		"no-debugger": "warn",
-		"no-param-reassign": ["error", { props: false }],
-		"no-bitwise": "off",
-		"no-shadow": "off",
-		"no-use-before-define": "off",
-		"no-restricted-imports": ["error", { patterns: [".*", "!@graphite/*"] }],
-
-		// TypeScript plugin config (for TS-specific linting)
-		"@typescript-eslint/indent": "off",
-		"@typescript-eslint/camelcase": "off",
-		"@typescript-eslint/no-use-before-define": "off",
-		"@typescript-eslint/no-unused-vars": [
-			"error",
-			{
-				args: "all",
-				argsIgnorePattern: "^_",
-				caughtErrors: "all",
-				caughtErrorsIgnorePattern: "^_",
-				destructuredArrayIgnorePattern: "^_",
-				varsIgnorePattern: "^_",
-				ignoreRestSiblings: true,
-			},
-		],
-		"@typescript-eslint/consistent-type-imports": "error",
-		"@typescript-eslint/consistent-type-definitions": ["error", "type"],
-		"@typescript-eslint/consistent-type-assertions": ["error", { assertionStyle: "as", objectLiteralTypeAssertions: "never" }],
-		"@typescript-eslint/consistent-indexed-object-style": ["error", "record"],
-		"@typescript-eslint/consistent-generic-constructors": ["error", "constructor"],
-		"@typescript-eslint/no-restricted-types": ["error", { types: { null: "Use `undefined` instead." } }],
-
-		// Prettier plugin config (for validating and fixing formatting)
-		"prettier/prettier": "error",
-
-		// Svelte plugin config (for validating Svelte-specific syntax)
-		"svelte/no-at-html-tags": "off",
-		"svelte/valid-compile": ["error", { ignoreWarnings: true }],
-
-		// Import plugin config (for intelligently validating module import statements)
-		"import/no-unresolved": "error",
-		// `no-duplicates` disabled due to <https://github.com/import-js/eslint-plugin-import/issues/1479#issuecomment-1789527447>. Reenable if that issue gets fixed.
-		"import/no-duplicates": "off",
-		"import/prefer-default-export": "off",
-		"import/no-relative-packages": "error",
-		"import/order": [
-			"error",
-			{
-				alphabetize: { order: "asc", caseInsensitive: true },
-				pathGroups: [{ pattern: "**/*.svelte", group: "unknown", position: "after" }],
-				"newlines-between": "always-and-inside-groups",
-				warnOnUnassignedImports: true,
-			},
-		],
-	},
-};

frontend/eslint.config.js

@@ -0,0 +1,125 @@
+import js from "@eslint/js";
+import { defineConfig, globalIgnores } from "eslint/config";
+import * as pluginImport from "eslint-plugin-import";
+import pluginPrettier from "eslint-plugin-prettier";
+import pluginSvelte from "eslint-plugin-svelte";
+import globals from "globals";
+import ts from "typescript-eslint";
+
+export default defineConfig([
+	js.configs.recommended,
+	ts.configs.recommended,
+	pluginImport.flatConfigs.recommended,
+	pluginImport.flatConfigs.typescript,
+	pluginSvelte.configs["flat/recommended"],
+	pluginSvelte.configs["flat/prettier"],
+	globalIgnores([
+		// Ignore generated directories
+		"**/node_modules/",
+		"**/dist/",
+		"**/pkg/",
+		"wasm/pkg/",
+		// Don't ignore JS and TS dotfiles in this folder
+		"!**/.*.js",
+		"!**/.*.ts",
+	]),
+	{
+		plugins: {
+			prettier: pluginPrettier,
+		},
+		settings: {
+			"import/parsers": { "@typescript-eslint/parser": [".ts"] },
+			"import/resolver": { typescript: true, node: true },
+		},
+		languageOptions: {
+			parserOptions: {
+				project: "./tsconfig.json",
+			},
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
+		},
+		rules: {
+			// Standard ESLint config (for ordinary JS syntax linting)
+			indent: "off",
+			quotes: ["error", "double", { allowTemplateLiterals: true }],
+			camelcase: ["error", { properties: "always" }],
+			"linebreak-style": ["error", "unix"],
+			"eol-last": ["error", "always"],
+			"max-len": ["error", { code: 200, tabWidth: 4, ignorePattern: `d="([\\s\\S]*?)"` }],
+			"prefer-destructuring": "off",
+			"no-console": "warn",
+			"no-debugger": "warn",
+			"no-param-reassign": ["error", { props: false }],
+			"no-bitwise": "off",
+			"no-shadow": "off",
+			"no-use-before-define": "off",
+			"no-restricted-imports": ["error", { patterns: [".*", "!@graphite/*"] }],
+
+			// TypeScript plugin config (for TS-specific linting)
+			"@typescript-eslint/indent": "off",
+			"@typescript-eslint/camelcase": "off",
+			"@typescript-eslint/no-use-before-define": "off",
+			"@typescript-eslint/no-unused-vars": [
+				"error",
+				{
+					args: "all",
+					argsIgnorePattern: "^_",
+					caughtErrors: "all",
+					caughtErrorsIgnorePattern: "^_",
+					destructuredArrayIgnorePattern: "^_",
+					varsIgnorePattern: "^_",
+					ignoreRestSiblings: true,
+				},
+			],
+			"@typescript-eslint/consistent-type-imports": "error",
+			"@typescript-eslint/consistent-type-definitions": ["error", "type"],
+			"@typescript-eslint/consistent-type-assertions": ["error", { assertionStyle: "as", objectLiteralTypeAssertions: "never" }],
+			"@typescript-eslint/consistent-indexed-object-style": ["error", "record"],
+			"@typescript-eslint/consistent-generic-constructors": ["error", "constructor"],
+			"@typescript-eslint/no-restricted-types": ["error", { types: { null: "Use `undefined` instead." } }],
+
+			// Prettier plugin config (for validating and fixing formatting)
+			"prettier/prettier": "error",
+
+			// Svelte plugin config (for validating Svelte-specific syntax)
+			"svelte/no-at-html-tags": "off",
+			"svelte/no-useless-mustaches": "off",
+			"svelte/valid-compile": ["error", { ignoreWarnings: true }],
+			"svelte/require-each-key": "off", // TODO: Remove this rule and fix the places where it's violated
+
+			// Import plugin config (for intelligently validating module import statements)
+			"import/no-unresolved": "error",
+			// `no-duplicates` disabled due to <https://github.com/import-js/eslint-plugin-import/issues/1479#issuecomment-1789527447>. Reenable if that issue gets fixed.
+			"import/no-duplicates": "off",
+			"import/prefer-default-export": "off",
+			"import/no-relative-packages": "error",
+			"import/no-named-as-default-member": "off",
+			"import/order": [
+				"error",
+				{
+					alphabetize: { order: "asc", caseInsensitive: true },
+					pathGroups: [{ pattern: "**/*.svelte", group: "unknown", position: "after" }],
+					"newlines-between": "always-and-inside-groups",
+					warnOnUnassignedImports: true,
+				},
+			],
+		},
+	},
+	{
+		files: ["**/*.svelte"],
+		languageOptions: {
+			// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
+			parserOptions: {
+				projectService: true,
+				parser: ts.parser,
+				extraFileExtensions: [".svelte"],
+			},
+		},
+	},
+	{
+		files: ["**/*.js"],
+		extends: [ts.configs.disableTypeChecked],
+	},
+]);

frontend/package.json

@@ -32,38 +32,38 @@
 	},
 	"dependencies": {
 		"class-transformer": "^0.5.1",
-		"idb-keyval": "^6.2.1",
+		"idb-keyval": "^6.2.2",
 		"reflect-metadata": "^0.2.2",
 		"source-code-pro": "github:adobe-fonts/source-code-pro#2.042R-u/1.062R-i/1.026R-vf",
 		"source-sans": "github:adobe-fonts/source-sans#2.045R-ro%2F1.095R-it"
 	},
 	"devDependencies": {
+		"@eslint/compat": "^1.3.2",
+		"@eslint/eslintrc": "^3.3.1",
+		"@eslint/js": "^9.34.0",
 		"@sveltejs/vite-plugin-svelte": "^3.1.2",
-		"@types/node": "^22.6.1",
+		"@types/node": "^24.3.0",
-		"@typescript-eslint/eslint-plugin": "^8.7.0",
-		"@typescript-eslint/parser": "^8.7.0",
 		"buffer": "^6.0.3",
-		"concurrently": "^9.0.1",
+		"concurrently": "^9.2.1",
-		"eslint-config-prettier": "^9.1.0",
+		"eslint-import-resolver-typescript": "^4.4.4",
-		"eslint-import-resolver-typescript": "^3.6.3",
+		"eslint-plugin-import": "^2.32.0",
-		"eslint-plugin-import": "^2.30.0",
+		"eslint-plugin-prettier": "^5.5.4",
-		"eslint-plugin-prettier": "^5.2.1",
+		"eslint-plugin-svelte": "^3.11.0",
-		"eslint-plugin-svelte": "^2.44.0",
+		"globals": "^16.3.0",
-		"postcss": "^8.4.47",
+		"postcss": "^8.5.6",
-		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.4.0",
-		"prettier-plugin-svelte": "^3.2.6",
+		"prettier": "^3.6.2",
 		"process": "^0.11.10",
 		"rollup-plugin-license": "^3.6.0",
-		"sass": "1.78.0",
+		"sass": "^1.91.0",
-		"svelte": "^4.2.19",
+		"svelte-preprocess": "^6.0.3",
-		"svelte-preprocess": "^6.0.2",
+		"svelte": "4.2.20",
 		"ts-node": "^10.9.2",
-		"typescript": "^5.6.2",
+		"typescript-eslint": "^8.41.0",
-		"vite": "^5.4.14",
+		"typescript": "^5.9.2",
-		"vite-multiple-assets": "1.3.1"
+		"vite-multiple-assets": "2.2.5",
+		"vite": "^5.4.19"
 	},
-	"//": "The dev dependency for `sass` can be removed once <https://github.com/sveltejs/svelte-preprocess/issues/656> is fixed, but meanwhile we have to",
-	"///": "list it here and pin it to 1.78.0 so `vite` and `svelte-preprocess` use it instead of 1.79+ which spams the console with deprecation warnings.",
 	"homepage": "https://graphite.rs",
 	"license": "Apache-2.0",
 	"repository": {

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%),
+		--color-transparent-checkered-background:
-			linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(#ffffff, #ffffff);
+			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) {
+		if (!textInput) return;
-			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"}
+			icon="Trash"
-			tooltip={"Delete this node from the layer chain"}
+			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}
+	<tbody>
-		<tr>
+		{#each widgetData.tableWidgets as row}
-			{#each row as cell}
+			<tr>
-				<td>
+				{#each row as cell}
-					<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} />
+					<td>
-				</td>
+						<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} />
-			{/each}
+					</td>
-		</tr>
+				{/each}
-	{/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", 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) {
@@ -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>
+							<tbody>
-								<td>
+								<tr>
-									<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
+									<td>
-								</td>
+										<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
-								<td>
+									</td>
-									<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
+									<td>
-								</td>
+										<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
-							</tr>
+									</td>
-							<tr>
+								</tr>
-								<td>
+								<tr>
-									<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
+									<td>
-								</td>
+										<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
-								<td>
+									</td>
-									<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
+									<td>
-								</td>
+										<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
-							</tr>
+									</td>
-							<tr>
+								</tr>
-								<td colspan="2">
+								<tr>
-									<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
+									<td colspan="2">
-								</td>
+										<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
-							</tr>
+									</td>
-							<tr>
+								</tr>
-								<td colspan="2">
+								<tr>
-									<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
+									<td colspan="2">
-								</td>
+										<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
-							</tr>
+									</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 {

frontend/tsconfig.json

@@ -2,9 +2,9 @@
 	"compilerOptions": {
 		"target": "ESNext",
 		"module": "ESNext",
+		"moduleResolution": "node",
 		"strict": true,
 		"importHelpers": true,
-		"moduleResolution": "node",
 		"experimentalDecorators": true,
 		"skipLibCheck": true,
 		"esModuleInterop": true,
@@ -20,11 +20,9 @@
 		},
 		"lib": ["ESNext", "DOM", "DOM.Iterable", "ScriptHost"]
 	},
-	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte", "*.ts", "*.js", "*.cjs"],
+	"include": ["src/**/*.ts", "src/**/*.svelte", "*.ts"],
-	"exclude": ["node_modules"],
 	"ts-node": {
 		"compilerOptions": {
-			"module": "commonjs",
 			"useDefineForClassFields": false,
 			"noImplicitOverride": true
 		}

frontend/vite.config.ts

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 
 import { spawnSync } from "child_process";
-
 import fs from "fs";
 import path from "path";
 
@@ -31,7 +30,12 @@ export default defineConfig({
 				defaultHandler?.(warning);
 			},
 		}),
-		viteMultipleAssets(["../demo-artwork"]),
+		viteMultipleAssets(
+			// Additional static asset directories besides `public/`
+			[{ input: "../demo-artwork/**", output: "demo-artwork" }],
+			// Options where we set custom MIME types
+			{ mimeTypes: { ".graphite": "application/json" } },
+		),
 	],
 	resolve: {
 		alias: [
@@ -65,11 +69,6 @@ export default defineConfig({
 					},
 				}),
 			],
-			output: {
-				// Inject `.min` into the filename of minified CSS files to tell Cloudflare not to minify it again.
-				// Cloudflare's minifier breaks the CSS due to a bug where it removes whitespace around calc() plus operators.
-				assetFileNames: (info) => `assets/[name]-[hash]${info.name?.endsWith(".css") ? ".min" : ""}[extname]`,
-			},
 		},
 	},
 });
@@ -361,11 +360,9 @@ function htmlDecode(input: string): string {
 		if (maybeEntity) return maybeEntity[1];
 
 		let match;
-		// eslint-disable-next-line no-cond-assign
 		if ((match = entityCode.match(/^#x([\da-fA-F]+)$/))) {
 			return String.fromCharCode(parseInt(match[1], 16));
 		}
-		// eslint-disable-next-line no-cond-assign
 		if ((match = entityCode.match(/^#(\d+)$/))) {
 			return String.fromCharCode(~~match[1]);
 		}

node-graph/graph-craft/benches/compile_demo_art_iai.rs

@@ -1,11 +1,11 @@
 use graph_craft::document::NodeNetwork;
 use graph_craft::util::*;
-use iai_callgrind::{black_box, library_benchmark, library_benchmark_group, main};
+use iai_callgrind::{library_benchmark, library_benchmark_group, main};
 
 #[library_benchmark]
 #[benches::with_setup(args = ["isometric-fountain", "painted-dreams", "procedural-string-lights", "parametric-dunescape", "red-dress", "valley-of-spires"], setup = load_from_name)]
 pub fn compile_to_proto(_input: NodeNetwork) {
-	black_box(compile(_input));
+	std::hint::black_box(compile(_input));
 }
 
 library_benchmark_group!(name = compile_group; benchmarks = compile_to_proto);