Port frontend from Vue to Svelte (WIP in separate folder, many bugs) (#964)

* Make `tauri build` just work * Move folder: frontend/wasm -> wasm * Create SvelteKit project with 'npx create-svelte' * Move wasm-communication into seperate npm package * Use wasm-pack directly and pack package.json * Got it to work * Add primitive build script for wasm npm module * Fix wasm build script (python) * Clean up glue code * Rewrite wasm build script in node.js * Add serde-reflection to trace types * Add traced types * Generate typescript (.d.ts) from Rust types * Update .d.ts * Finalize TS types * Add script to update .d.ts * Add watch command to build wasm-bindgen * Make wasm work again * Add sass; fix build script for windows * Describe requirement for wasm-pack * Add license * Copy and reorganize vue components * translate LayoutCol.vue * Split app.scss into pieces * Translate LayoutRow.svelte * Rename scss files * Fix compile issues on Windows * WIP port TitleBar * Support classes for LayoutCol/Row * Restructure based on Vue codebase * Port all components in window folder * Port FloatingMenu * Port Document panel component * Update readme after folder move * Update typegen: print discriminant by default * Update typegen: Merge from branch 'tailwind' 4f14fedb Fixes bigint & bytes * Made Vue/webpack/eslint to accept wasm package at new location This is quite a hack. Those two packages are both named the same. Yes, it's an npm package inside another npm package. - frontend/src/wasm-communication/ - frontend-svelte/glue/ 'wasm/pkg/index.js' imports the correct one registered when linking. * Port LayerTree * Port NodeGraph * Port Properties * Port components in /floating-menus * Finish porting all Vue -> Svelte components * Change import prefix * Revert type generation * Revert moved wasm folder * Revert all of @locriacyber's work on this branch - Remove Vite and restore Webpack - Remove SvelteKit - Remove everything except the components I ported to Svelte - Restore all frontend files from Vue code, now altered for Svelte * Convert Vue's 'reactive' and 'provide' to Svelte's stores and contexts * Fix event emitting and bi-di data flow * Undo removal of 'update:' events * Fix 'update:' event dispatching * Fix usage in parent of bi-di component props * Fix component typing, more progress towards no errors * The page builds and opens! * Add loading spinner and remove postcss dependency * Make the basics of document editing work * Fix rebase history Co-authored-by: Locria Cyber <74560659+locriacyber@users.noreply.github.com>
2025-08-04 13:30:48 +00:00 · 2023-01-13 01:05:20 -08:00 · 2023-01-13 01:05:20 -08:00 · 5619d44300
commit 5619d44300
parent 01853fe4b7
239 changed files with 27757 additions and 13 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -47,4 +47,8 @@
 	"html.format.wrapLineLength": 200,
 	"files.eol": "\n",
 	"files.insertFinalNewline": true,
+	"prettier.singleQuote": false,
+	"prettier.useTabs": true,
+	"prettier.tabWidth": 4,
+	"prettier.printWidth": 200,
 }
--- a/Cargo.lock
+++ b/Cargo.lock
@ -374,12 +374,11 @@ dependencies = [

 [[package]]
 name = "bstr"
-version = "1.1.0"
+version = "0.2.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b45ea9b00a7b3f2988e9a65ad3917e62123c38dba709b666506207be96d1790b"
+checksum = "ba3569f383e8f1598449f1a423e72e99569137b47740b1da11ef19af3d5c3223"
 dependencies = [
 "memchr",
- "serde",
 ]

 [[package]]
@ -1512,15 +1511,15 @@ dependencies = [

 [[package]]
 name = "glob"
-version = "0.3.1"
+version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d2fabcfbdc87f4758337ca535fb41a6d701b65693ce38287d856d1674551ec9b"
+checksum = "9b919933a397b79c37e33b77bb2aa3dc8eb6e165ad809e58ff75bc7db2e34574"

 [[package]]
 name = "globset"
-version = "0.4.10"
+version = "0.4.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "029d74589adefde59de1a0c4f4732695c32805624aec7b68d91503d4dba79afc"
+checksum = "0a1e17342619edbc21a964c2afbeb6c820c6a2560032872f397bb97ea127bd0a"
 dependencies = [
 "aho-corasick",
 "bstr",
@ -1757,6 +1756,24 @@ dependencies = [
 "wasm-bindgen-test",
 ]

+[[package]]
+name = "graphite-wasm-svelte"
+version = "0.0.0"
+dependencies = [
+ "bezier-rs",
+ "graph-craft",
+ "graphite-document-legacy",
+ "graphite-editor",
+ "js-sys",
+ "log",
+ "ron",
+ "serde",
+ "serde-wasm-bindgen",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "wasm-bindgen-test",
+]
+
 [[package]]
 name = "gtk"
 version = "0.15.5"
@ -2056,10 +2073,11 @@ dependencies = [

 [[package]]
 name = "ignore"
-version = "0.4.19"
+version = "0.4.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a05705bc64e0b66a806c3740bd6578ea66051b157ec42dc219c785cbf185aef3"
+checksum = "713f1b139373f96a2e0ce3ac931cd01ee973c3c5dd7c40c0c2efe96ad2b6751d"
 dependencies = [
+ "crossbeam-utils",
 "globset",
 "lazy_static",
 "log",
--- a/Cargo.toml
+++ b/Cargo.toml
@ -4,6 +4,7 @@ members = [
 	"document-legacy",
 	"proc-macros",
 	"frontend/wasm",
+	"frontend-svelte/wasm",
 	"frontend/src-tauri",
 	"node-graph/gcore",
 	"node-graph/gstd",
@ -34,5 +35,11 @@ opt-level = 3
 [profile.dev.package.graphite-wasm]
 opt-level = 3

+[profile.release.package.graphite-wasm-svelte]
+opt-level = 3
+
+[profile.dev.package.graphite-wasm-svelte]
+opt-level = 3
+
 #[profile.dev]
 #opt-level = 3
--- a/frontend-svelte/.eslintrc.js
+++ b/frontend-svelte/.eslintrc.js
@ -0,0 +1,133 @@
+const webpackConfigPath = require.resolve("@vue/cli-service/webpack.config.js");
+
+module.exports = {
+	root: true,
+	env: {
+		browser: true,
+		node: true,
+		es2020: true,
+	},
+	parserOptions: {
+		ecmaVersion: 2020,
+	},
+	extends: [
+		// Vue-specific defaults
+		"plugin:vue/vue3-essential",
+		// Vue-compatible JS defaults
+		"@vue/airbnb",
+		// Vue-compatible TS defaults
+		"@vue/typescript/recommended",
+		// Vue-compatible Prettier defaults
+		"plugin:prettier-vue/recommended",
+		// General Prettier defaults
+		"prettier",
+	],
+	settings: {
+		// https://github.com/import-js/eslint-plugin-import#resolvers
+		"import/resolver": {
+			// `node` must be listed first!
+			node: {},
+			webpack: { config: webpackConfigPath },
+		},
+
+		// https://github.com/meteorlxy/eslint-plugin-prettier-vue
+		"prettier-vue": {
+			// Use Prettier to format the HTML, CSS, and JS blocks of .vue single-file components
+			SFCBlocks: {
+				template: true,
+				style: true,
+				script: true,
+			},
+		},
+	},
+	ignorePatterns: [
+		// Ignore generated directories
+		"node_modules/",
+		"dist/",
+		"pkg/",
+		"wasm/pkg/",
+
+		// Don't ignore JS and TS dotfiles in this folder
+		"!.*.js",
+		"!.*.ts",
+	],
+	rules: {
+		// Standard ESLint config
+		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 }],
+		"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: [".*", "!@/*"] }],
+
+		// TypeScript plugin config
+		"@typescript-eslint/indent": "off",
+		"@typescript-eslint/camelcase": "off",
+		"@typescript-eslint/no-use-before-define": "off",
+		"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", ignoreRestSiblings: true }],
+		"@typescript-eslint/explicit-function-return-type": "error",
+		"@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/ban-types": ["error", { types: { null: "Use `undefined` instead." } }],
+
+		// Import plugin config (used to intelligently validate module import statements)
+		"import/prefer-default-export": "off",
+		"import/no-relative-packages": "error",
+		"import/order": [
+			"error",
+			{
+				alphabetize: {
+					order: "asc",
+					caseInsensitive: true,
+				},
+				warnOnUnassignedImports: true,
+				"newlines-between": "always-and-inside-groups",
+				pathGroups: [
+					{
+						pattern: "**/*.vue",
+						group: "unknown",
+						position: "after",
+					},
+				],
+			},
+		],
+
+		// Prettier plugin config (used to enforce HTML, CSS, and JS formatting styles as an ESLint plugin, where fixes are reported to ESLint to be applied when linting)
+		"prettier-vue/prettier": [
+			"error",
+			{
+				tabWidth: 4,
+				tabs: true,
+				printWidth: 200,
+				singleQuote: false,
+			},
+		],
+
+		// Vue plugin config (used to validate Vue single-file components)
+		"vue/multi-word-component-names": "off",
+
+		// Vue Accessibility plugin config (included by airbnb defaults but undesirable for a web app project)
+		"vuejs-accessibility/form-control-has-label": "off",
+		"vuejs-accessibility/label-has-for": "off",
+		"vuejs-accessibility/click-events-have-key-events": "off",
+	},
+	overrides: [
+		{
+			files: ["*.js"],
+			rules: {
+				"@typescript-eslint/explicit-function-return-type": ["off"],
+			},
+		},
+	],
+};
--- a/frontend-svelte/.gitignore
+++ b/frontend-svelte/.gitignore
@ -0,0 +1,3 @@
+node_modules/
+wasm/pkg/
+public/build/
--- a/frontend-svelte/README.md
+++ b/frontend-svelte/README.md
@ -0,0 +1,34 @@
+# Overview of `/frontend/`
+The Graphite frontend is a web app that provides the presentation for the editor. It displays the GUI based on state from the backend and provides users with interactive widgets that send updates to the backend, which is the source of truth for state information. The frontend is built out of reactive components using the [Vue](https://vuejs.org/) framework. The backend is written in Rust and compiled to WebAssembly (WASM) to be run in the browser alongside the JS code.
+
+For lack of other options, the frontend is currently written as a web app. Maintaining web compatibility will always be a requirement, but the long-term plan is to port this code to a Rust-based native GUI framework, either written by the Rust community or created by our project if necessary. As a medium-term compromise, we may wrap the web-based frontend in a desktop webview windowing solution like Electron (probably not) or [Tauri](https://tauri.studio/) (probably).
+
+## Bundled assets: `assets/`
+Icons and images that are used in components and embedded into the application bundle by the build system using [loaders](https://webpack.js.org/loaders/).
+
+## Public assets: `public/`
+Static content like favicons that are copied directly into the root of the build output by the build system.
+
+## Vue/TypeScript source: `src/`
+Source code for the web app in the form of Vue components and [TypeScript](https://www.typescriptlang.org/) files.
+
+## WebAssembly wrapper: `wasm/`
+Wraps the editor backend codebase (`/editor`) and provides a JS-centric API for the web app to use unburdened by Rust's complex data types that are incompatible with JS data types. Bindings (JS functions that call into the WASM module) are provided by [wasm-bindgen](https://rustwasm.github.io/docs/wasm-bindgen/) in concert with [wasm-pack](https://github.com/rustwasm/wasm-pack).
+
+## ESLint configurations: `.eslintrc.js`
+[ESLint](https://eslint.org/) is the tool which enforces style rules on the JS, TS, and Vue files in our frontend codebase. As it is set up in this config file, ESLint will complain about bad practices and often help reformat code automatically when (in VS Code) the file is saved or `npm run lint` is executed. (If you don't use VS Code, remember to run this command before committing!) This config file for ESLint sets our style preferences and configures our usage of extensions/plugins for Vue support, [Airbnb](https://github.com/airbnb/javascript)'s popular catalog of sane defaults, and [Prettier](https://prettier.io/)'s role as a code formatter.
+
+## npm ecosystem packages: `package.json`
+While we don't use Node.js as a JS-based server, we do have to rely on its wide ecosystem of packages for our build system toolchain. If you're just getting started, make sure to install the latest LTS copy of Node.js and then run `cd frontend && npm install` to install these packages on your system. Our project's philosophy on third-party packages is to keep our dependency tree as light as possible, so adding anything new to our `package.json` should have overwhelming justification. Most of the packages are just development tooling (TypeScript, Vue CLI, ESLint, Prettier, wasm-pack, and [Sass](https://sass-lang.com/)) that run in your console during the build process.
+
+## npm package installed versions: `package-lock.json`
+Specifies the exact versions of packages installed in the npm dependency tree. While `package.json` specifies which packages to install and their minimum/maximum acceptable version numbers, `package-lock.json` represents the exact versions of each dependency and sub-dependency. Running `npm install` will grab these exact versions to ensure you are using the same packages as everyone else working on Graphite. `npm update` will modify `package-lock.json` to specify newer versions of any updated (sub-)dependencies and download those, as long as they don't exceed the maximum version allowed in `package.json`. To check for newer versions that exceed the max version, run `npm outdated` to see a list. Unless you know why you are doing it, try to avoid committing updates to `package-lock.json` by mistake if your code changes don't pertain to package updates. And never manually modify the file.
+
+## TypeScript configurations: `tsconfig.json`
+Basic configuration options for the TypeScript build tool to do its job in our repository.
+
+## vue-svg-loader.js
+An extremely simple Webpack loader that allows us to `import` SVG files into our JS to be used like they are Vue components. They end up as inline SVG elements in the web page like `<svg ...>...</svg>`, rather than being `<img src="..." />` elements, which provides some benefits like being able to apply CSS styles to them. These get embedded into the bundle (they live somewhere all together in a big, messy JS file) rather than being separate static SVG files that would have to be served individually.
+
+## Vue CLI/Webpack configurations: `vue.config.js`
+[Vue CLI](https://cli.vuejs.org/) is a command line tool built around the [Webpack](https://webpack.js.org/) bundler/build system. This file is where we configure Webpack to set up plugins (like wasm-pack and license-checker) and loaders (like for Vue and SVG files). Part of the license-checker plugin setup includes some functions to format web package licenses, as well as Rust package licenses provided by [cargo-about](https://github.com/EmbarkStudios/cargo-about), into a text file that's distributed with the application to provide license notices for third-party code.
--- a/frontend-svelte/assets/graphics/graphite-logotype-solid.svg
+++ b/frontend-svelte/assets/graphics/graphite-logotype-solid.svg
@ -0,0 +1,11 @@
+<svg width="937" height="240" viewBox="0 0 937 240" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+	<path d="M934.29,139.3c-3.08,2.94-6.82,5.09-10.91,6.27c-3.49,1.06-7.1,1.63-10.74,1.71c-6.08,0.08-11.98-2.06-16.6-6.02c-4.78-4.01-7.49-10.63-8.14-19.86l48.01-6.02c0-8.68-2.58-15.71-7.73-21.08c-5.16-5.37-12.72-8.06-22.7-8.06c-7.19-0.04-14.29,1.57-20.75,4.72c-6.37,3.07-11.75,7.86-15.54,13.83c-3.91,6.08-5.86,13.46-5.86,22.14c0,8.03,1.76,14.98,5.29,20.83c3.41,5.76,8.38,10.44,14.32,13.51c6.21,3.19,13.11,4.81,20.1,4.72c9.01,0,16.14-2.2,21.41-6.59c5.51-4.74,9.78-10.74,12.45-17.5L934.29,139.3z M891.64,99.01c2.28-3.85,5.26-5.78,8.95-5.78c3.79,0,6.48,1.84,8.06,5.53c1.68,4.2,2.59,8.66,2.69,13.18l-23.6,2.93C888.06,108.15,889.37,102.86,891.64,99.01" />
+	<path d="M844.61,151.33c-7.06,0-10.58-4.34-10.58-13.02v-34.5c0-4.34,2.17-6.51,6.51-6.51h14.65v-8.62h-21.16c0-4.12,0.05-8.19,0.16-12.21c0.11-4.01,0.59-11.63,0.91-15.76l-25.49,11.81v16.16h-9.77v8.62h9.77v44.27c0,7.16,2.01,13.02,6.02,17.58c4.01,4.56,9.87,6.83,17.58,6.84c4.07,0.13,8.11-0.71,11.8-2.44c3.03-1.49,5.72-3.6,7.89-6.18c1.98-2.37,3.62-5,4.88-7.81l-2.6-2.6C852.42,149.81,848.59,151.4,844.61,151.33" />
+	<path d="M783.25,154.67c-0.64-2.97-0.91-6-0.81-9.03v-38.9c0-5.21,0.08-9.52,0.24-12.94s0.3-5.94,0.41-7.57l-0.98-0.98l-35.48,16.44l1.63,3.74c1.09-0.4,2.2-0.73,3.34-0.98c0.94-0.21,1.89-0.31,2.85-0.32c0.97-0.07,1.92,0.22,2.69,0.81c0.59,0.54,0.89,1.63,0.9,3.26v37.43c0.08,3.03-0.14,6.05-0.65,9.03c-0.44,2.01-1.2,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.39,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.39-6.02-1.14C784.64,157.85,783.56,156.38,783.25,154.67 M771.04,77.28c3.74,0.07,7.35-1.44,9.93-4.15c2.64-2.59,4.11-6.15,4.07-9.85c0.03-3.72-1.44-7.3-4.07-9.93c-2.56-2.75-6.17-4.29-9.93-4.23c-3.81-0.09-7.48,1.45-10.09,4.23c-2.64,2.63-4.1,6.21-4.07,9.93c0.02,7.75,6.32,14.02,14.07,14C770.98,77.29,771.01,77.29,771.04,77.28" />
+	<path d="M732.15,154.68c-0.64-2.97-0.91-6-0.81-9.03v-39.22c0-7.05-1.57-12.18-4.72-15.38c-3.15-3.2-8.08-4.8-14.81-4.8c-4.06,0.01-8.07,0.84-11.8,2.44c-3.08,1.21-6.03,2.75-8.79,4.57c-3.07,2.01-5.99,4.25-8.71,6.72V61.55c0-5.21,0.08-9.52,0.24-12.94c0.16-3.42,0.3-5.94,0.41-7.57L682.11,40l-35.45,16.42l1.66,3.82c1.09-0.4,2.2-0.73,3.34-0.98c0.94-0.21,1.89-0.32,2.85-0.33c0.96-0.07,1.92,0.22,2.68,0.81c0.6,0.55,0.9,1.63,0.9,3.26v82.63c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.38-6.02-1.14c-1.54-0.81-2.62-2.28-2.93-3.99c-0.64-2.97-0.91-6-0.82-9.03v-37.92c2.72-1.87,5.71-3.29,8.87-4.23c2.26-0.61,4.58-0.94,6.92-0.98c3.79,0,6.18,1,7.16,3.01c1.06,2.43,1.56,5.08,1.46,7.73v32.39c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.38-6.02-1.14c-1.54-0.81-2.62-2.28-2.93-3.99" />
+	<path d="M624.97,90.71c-4.3-2.92-9.37-4.48-14.57-4.48c-5.74-0.16-11.38,1.43-16.19,4.56c-4.26,2.76-7.67,6.65-9.85,11.23h-0.32c0-3.26,0.12-6.35,0.39-9.49c0.14-2.07,0.38-4.14,0.73-6.18l-0.98-0.98l-33.84,15.68l1.63,3.74c1.49-0.4,3.02-0.62,4.56-0.65c0.97-0.07,1.92,0.22,2.69,0.81c0.6,0.54,0.9,1.63,0.9,3.25v73.9c0.08,3.02-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.72-2.86,1.11-4.39,1.14V200h43.12v-3.74c-2.46,0.01-4.9-0.38-7.24-1.14c-1.71-0.68-2.96-2.18-3.33-3.99c-0.64-2.97-0.91-6-0.81-9.03v-16.76c1.52,0.22,3.17,0.38,4.96,0.49s3.77,0.16,5.94,0.16c5.18-0.03,10.33-0.8,15.3-2.28c5.21-1.52,10.1-4.01,14.4-7.32c4.5-3.5,8.15-7.98,10.66-13.1c2.71-5.37,4.07-11.96,4.07-19.78c0-7.81-1.36-14.49-4.07-20.02C633.4,98.33,629.66,93.92,624.97,90.71 M608.94,150.61c-3.26,5.04-7.27,7.57-12.04,7.57c-5.21,0-9.33-2.39-12.37-7.16v-43.3c1.7-1.75,3.75-3.11,6.02-3.99c2.03-0.79,4.18-1.2,6.35-1.22c4.77,0,8.79,2.31,12.04,6.92c3.26,4.61,4.88,11.64,4.88,21.08C613.82,138.86,612.19,145.57,608.94,150.61" />
+	<path d="M541.31,150.61c-1.17,0.45-2.41,0.7-3.66,0.73c-1.95,0-3.25-0.68-3.91-2.03c-0.74-1.83-1.07-3.81-0.98-5.78v-35.48c0-12.25-7.16-19.5-19.95-21.8c-8.97-1.62-19.39-1.04-28.28,0.57c-5.06,0.92-10.37,2.79-13.57,5.49v23.95h3.71c0.91-5.48,3.36-10.58,7.07-14.72c3.2-3.81,7.96-5.97,12.94-5.86c3.8,0,6.75,1.11,8.87,3.34c2.12,2.23,3.17,5.89,3.17,10.99v8.63c-13.78,3.69-23.95,7.76-30.52,12.21s-9.85,10.25-9.85,17.42c-0.06,4.5,1.47,8.88,4.31,12.36c2.87,3.58,7.29,5.37,13.27,5.37c4.5-0.01,8.92-1.16,12.86-3.34c4.18-2.27,7.62-5.69,9.93-9.85h0.33c0.95,3.66,3.1,6.9,6.1,9.2c2.87,2.12,6.97,3.17,12.29,3.17c4.71,0.08,9.34-1.19,13.35-3.66c4.15-2.73,7.43-6.6,9.44-11.15l-2.6-2.6C544.39,148.99,542.93,149.96,541.31,150.61 M506.73,146.3c-1.27,1.36-2.72,2.54-4.31,3.5c-1.74,1.05-3.75,1.58-5.78,1.54c-2.11,0.12-4.16-0.75-5.53-2.36c-1.32-1.63-2.02-3.68-1.95-5.78c0.09-1.95,0.5-3.88,1.22-5.7c1.09-2.66,2.82-5.01,5.05-6.84c2.55-2.28,6.32-4.12,11.31-5.53L506.73,146.3z" />
+	<path d="M440.68,91.63c-4.8,1.93-9.07,4.75-11.91,9.87h-0.33c-0.02-2.98,0.11-5.96,0.41-8.92c0.13-2.13,0.37-4.25,0.73-6.35l-0.98-0.98l-33.85,15.79l1.63,3.74c1.49-0.4,3.02-0.62,4.56-0.65c0.97-0.07,1.92,0.22,2.69,0.82c0.59,0.54,0.89,1.63,0.9,3.25v37.44c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h43.13v-3.74c-2.46,0.01-4.9-0.38-7.24-1.14c-1.71-0.68-2.97-2.18-3.34-3.99c-0.64-2.97-0.91-6-0.82-9.03v-36.29c2.1-1.79,4.53-3.15,7.16-3.99c2.49-0.72,5.06-1.08,7.65-1.06c2.42,0.01,4.78,0.68,6.84,1.95c2.17,1.3,3.71,5.12,4.48,10h4.1V92.3C455.3,89.03,446.61,89.25,440.68,91.63" />
+	<path d="M344.13,115.53c2.68,0.05,5.32,0.57,7.81,1.55c1.73,0.81,2.9,2.6,3.5,5.37c0.72,4.38,1.02,8.82,0.9,13.26c0,3.8-0.04,6.29-0.2,9.22c-0.16,2.93-0.39,4.51-1.58,6.47c-1.63,2.71-4.43,4-7.41,4.59c-2.7,0.57-5.46,0.87-8.22,0.9c-6.29,0-12.7-1.98-16.81-5.14c-5.27-4.05-9.38-11.35-12.04-19.92c-2.4-8.27-3.58-16.84-3.51-25.45c0-14.54,4.01-24.17,9.38-31.43c5.46-7.37,14.61-11.25,25-11.89c4.13-0.21,8.27,0.21,12.28,1.25c3.63,1.12,7.4,2.65,10.43,6.07c3.03,3.42,4.67,7.11,6.85,13.4h3.74v-24.9c-4.86-1.84-9.87-3.25-14.97-4.23c-5.73-1.18-11.56-1.78-17.41-1.79c-8.11-0.06-16.17,1.23-23.85,3.82c-7.23,2.44-13.91,6.25-19.69,11.23c-5.77,5.04-10.36,11.29-13.43,18.31c-3.38,7.91-5.05,16.46-4.88,25.07c0,10.96,2.39,20.57,7.16,28.81c4.6,8.07,11.36,14.7,19.53,19.12c8.5,4.57,18.02,6.89,27.67,6.76c7.53,0.11,15.02-0.97,22.22-3.18c5.71-1.74,11.2-4.14,16.36-7.16c3.26-1.87,6.32-4.08,9.11-6.59c-0.63-2.67-1.01-5.4-1.14-8.14c-0.11-2.61-0.16-5.37-0.16-8.3v-9.44c0-2.82,0.3-4.77,0.9-5.86c0.66-1.12,1.87-1.81,3.17-1.79v-3.74h-40.7V115.53z" />
+	<path d="M231.18,218.98l-0.07-0.69c-0.86-9.39-11.15-121.38-11.18-121.86c-0.23-2.84-1.07-5.6-2.45-8.09c-0.03-0.09-0.07-0.17-0.11-0.25l-0.06-0.15l-0.03,0.03l-0.02-0.01l0.04-0.02L205.5,67.5L172.31,10c-3.58-6.19-10.18-10-17.33-10H64.99c-7.14,0-13.74,3.81-17.32,10l-45,77.93c-3.57,6.19-3.57,13.81,0,20l45,77.93c3.57,6.19,10.17,10,17.32,10h89.99c3.86-0.03,7.63-1.19,10.85-3.32l38.59,27.68c-6.97-2.18-14.18-3.47-21.47-3.83c-18.11-0.87-71.2-0.28-131.42,4.63c-24.71,2.01-36.39,7.88-35.03,9.03c3.49,2.98,7.62,4.16,28.2,4.08c18.32-0.06,71.65,1.91,87.76,2.9c11.41,0.71,23.41,2.88,32.04,2.97c9.2-0.12,18.37-0.82,27.48-2.1c13.74-1.89,31.96-5.7,36.15-10.77C230.34,225.03,231.47,222.02,231.18,218.98z M62.49,24.32c1.67-2.55,4.45-4.16,7.5-4.33h79.99c3.04,0.17,5.81,1.77,7.49,4.31l33.26,57.61c-4.99,5.2-9.32,11-12.89,17.26l-24.77,2.75L138.3,122c-7.21-0.04-14.4,0.82-21.4,2.54L60.77,27.31L62.49,24.32z M69.99,175.86c-3.05-0.17-5.83-1.78-7.5-4.33l-40-69.27c-1.37-2.72-1.37-5.94,0-8.66l26.73-46.28l59.6,103.24l0.04-0.02c0.69,1.24,1.64,2.31,2.79,3.15l30.93,22.18L69.99,175.86z M186.75,182.93l-57.9-41.53c6.39-1.39,12.91-2.09,19.45-2.09l14.77-20.07l24.77-2.75c3.26-5.66,7.13-10.95,11.52-15.79l7.03,70.9C198.07,170.71,190.13,175.29,186.75,182.93z M81.64,154.71c1.49,2.33,0.8,5.42-1.52,6.91c-2.33,1.49-5.42,0.8-6.91-1.52c-0.08-0.12-0.15-0.25-0.22-0.38l-35-60.61c-1.49-2.33-0.8-5.42,1.52-6.91c2.33-1.49,5.42-0.8,6.91,1.52c0.08,0.12,0.15,0.25,0.22,0.38L81.64,154.71z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/add.svg
+++ b/frontend-svelte/assets/icon-12px-solid/add.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<rect width="8" height="2" x="2" y="5" />
+	<rect width="2" height="8" x="5" y="2" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/checkmark.svg
+++ b/frontend-svelte/assets/icon-12px-solid/checkmark.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon points="5.19,11.83 0.18,7.44 1.82,5.56 4.81,8.17 10,1.25 12,2.75" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/close-x.svg
+++ b/frontend-svelte/assets/icon-12px-solid/close-x.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon points="10,3 9,2 6,5 3,2 2,3 5,6 2,9 3,10 6,7 9,10 10,9 7,6" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/dropdown-arrow.svg
+++ b/frontend-svelte/assets/icon-12px-solid/dropdown-arrow.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon points="6,7 2.5,4 2.5,6 6,9 9.5,6 9.5,4" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/edit.svg
+++ b/frontend-svelte/assets/icon-12px-solid/edit.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<!-- TODO: Replace this with a proper icon design -->
+	<g transform="scale(0.5)">
+		<path d="M18.5,5.5c-1-1-2.5-1.5-3-1L5,15c0.39,0.24,1.23,0.1,1.59,0.38c0.36,0.28,0.3,1.06,0.63,1.4c0.33,0.33,1.11,0.28,1.4,0.63C8.9,17.77,8.76,18.61,9,19L19.5,8.5C20,8,19.5,6.5,18.5,5.5z M16.5,7.5l-7,7c-0.14,0.14-0.32,0.21-0.5,0.21s-0.36-0.07-0.5-0.21c-0.28-0.28-0.28-0.72,0-1l7-7c0.28-0.28,0.72-0.28,1,0C16.78,6.78,16.78,7.22,16.5,7.5z" />
+		<path d="M7.35,18.47l-2.39,1.71c-0.1-0.27-0.22-0.51-0.42-0.71c-0.2-0.2-0.44-0.32-0.71-0.42l1.71-2.39C5.14,16.61,4.5,16.42,4,16l-3,7l7-3C7.58,19.5,7.39,18.86,7.35,18.47z" />
+		<path d="M21.99,2.01C21,1,19.5,0.5,19,1l-2,2c2,0,4,2,4,4l2-2C23.5,4.5,22.98,3.02,21.99,2.01z" />
+	</g>
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/empty-12px.svg
+++ b/frontend-svelte/assets/icon-12px-solid/empty-12px.svg
@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/fullscreen-enter.svg
+++ b/frontend-svelte/assets/icon-12px-solid/fullscreen-enter.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon points="11,8 11,11 8,11 8,12 12,12 12,8" />
+	<polygon points="1,1 4,1 4,0 0,0 0,4 1,4" />
+	<polygon points="4,11 1,11 1,8 0,8 0,12 4,12" />
+	<polygon points="11,1 11,4 12,4 12,0 8,0 8,1" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/fullscreen-exit.svg
+++ b/frontend-svelte/assets/icon-12px-solid/fullscreen-exit.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon points="9,12 9,9 12,9 12,8 8,8 8,12" />
+	<polygon points="3,3 0,3 0,4 4,4 4,0 3,0" />
+	<polygon points="0,9 3,9 3,12 4,12 4,8 0,8" />
+	<polygon points="9,3 9,0 8,0 8,4 12,4 12,3" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/grid.svg
+++ b/frontend-svelte/assets/icon-12px-solid/grid.svg
@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<rect width="1" height="10" x="1" y="1" />
+	<rect width="1" height="10" x="4" y="1" />
+	<rect width="1" height="10" x="7" y="1" />
+	<rect width="1" height="10" x="10" y="1" />
+	<rect width="10" height="1" x="1" y="1" />
+	<rect width="10" height="1" x="1" y="4" />
+	<rect width="10" height="1" x="1" y="7" />
+	<rect width="10" height="1" x="1" y="10" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/info.svg
+++ b/frontend-svelte/assets/icon-12px-solid/info.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path d="M6,0C2.69,0,0,2.69,0,6s2.69,6,6,6s6-2.69,6-6S9.31,0,6,0z M6.35,11C5.71,11,5.2,10.49,5.2,9.85c0-0.63,0.51-1.15,1.15-1.15c0.63,0,1.15,0.51,1.15,1.15C7.49,10.49,6.98,11,6.35,11z M8.59,5.04C8.2,5.76,7.21,5.98,7.21,6.9v0.99h-1.8V6.9c0-1.89,1.88-1.62,1.88-3.12c0-1.41-2.16-1.88-2.77,0.15L3,3.46C4.25-0.96,10.66,1.2,8.59,5.04z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-arrow-down.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-arrow-down.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon class="bright" points="6,11 10,6 7,6 7,1 5,1 5,6 2,6" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-arrow-left.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-arrow-left.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon class="bright" points="1,6 6,10 6,7 11,7 11,5 6,5 6,2" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-arrow-right.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-arrow-right.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon class="bright" points="11,6 6,2 6,5 1,5 1,7 6,7 6,10" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-arrow-up.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-arrow-up.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon class="bright" points="6,1 2,6 5,6 5,11 7,11 7,6 10,6" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-backspace.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-backspace.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path class="bright" d="M11,3v6H4.41l-3-3l3-3H11 M12,2H4L0,6l4,4h8V2L12,2z" />
+	<polygon class="bright" points="9.35,4.35 8.65,3.65 7,5.29 5.35,3.65 4.65,4.35 6.29,6 4.65,7.65 5.35,8.35 7,6.71 8.65,8.35 9.35,7.65 7.71,6" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-command.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-command.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path class="bright" d="M9,7H8V5h1c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2S7,1.9,7,3v1H5V3c0-1.1-0.9-2-2-2S1,1.9,1,3c0,1.1,0.9,2,2,2h1v2H3C1.9,7,1,7.9,1,9c0,1.1,0.9,2,2,2s2-0.9,2-2V8h2v1c0,1.1,0.9,2,2,2s2-0.9,2-2C11,7.9,10.1,7,9,7z M8,3c0-0.55,0.45-1,1-1s1,0.45,1,1S9.55,4,9,4H8V3z M3,4C2.45,4,2,3.55,2,3s0.45-1,1-1s1,0.45,1,1v1H3z M4,9c0,0.55-0.45,1-1,1S2,9.55,2,9s0.45-1,1-1h1V9z M5,7V5h2v2H5z M9,10c-0.55,0-1-0.45-1-1V8h1c0.55,0,1,0.45,1,1S9.55,10,9,10z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-control.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-control.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon points="6,1 1,5 1.6,5.8 6,2.3 10.4,5.8 11,5" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-enter.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-enter.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path class="bright" d="M11,3v2c0,0.55-0.45,1-1,1H3V4L0,6.5L3,9V7h7c1.1,0,2-0.9,2-2V3H11z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-option.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-option.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<rect class="bright" x="6" y="3" width="5" height="1" />
+	<polygon class="bright" points="11,9 5.72,9 2.72,4 1,4 1,3 3.28,3 6.28,8 11,8" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-shift.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-shift.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path class="bright" d="M6,0L0,6h3v6h6V6h3L6,0z M8,5v6H4V5H2.41L6,1.41L9.59,5H8z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-space.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-space.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path class="bright" d="M11,8v1c0,0.55-0.45,1-1,1H2c-0.55,0-1-0.45-1-1V8H0v1c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V8H11z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/keyboard-tab.svg
+++ b/frontend-svelte/assets/icon-12px-solid/keyboard-tab.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon class="bright" points="4,3 4,1 1,3.5 4,6 4,4 12,4 12,3" />
+	<polygon class="bright" points="0,1 0,6 1,6 1,3.5 1,1" />
+	<polygon class="bright" points="8,8 0,8 0,9 8,9 8,11 11,8.5 8,6" />
+	<polygon class="bright" points="11,8.5 11,11 12,11 12,6 11,6" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/link.svg
+++ b/frontend-svelte/assets/icon-12px-solid/link.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path d="M4.68,9.32L4,10c-0.53,0.53-1.47,0.53-2,0C1.73,9.73,1.59,9.38,1.59,9S1.73,8.27,2,8l2.5-2.5c0.27-0.27,0.62-0.41,1-0.41s0.73,0.15,1,0.41l1-1c-1.07-1.07-2.93-1.07-4,0L1,7C0.47,7.53,0.17,8.24,0.17,9S0.47,10.47,1,11s1.24,0.83,2,0.83S4.47,11.53,5,11l1.27-1.27C5.71,9.7,5.17,9.56,4.68,9.32z" />
+	<path d="M11,1C9.93-0.07,8.07-0.07,7,1L5.7,2.3c0.56,0.03,1.11,0.16,1.61,0.39L8,2c0.27-0.27,0.62-0.41,1-0.41S9.73,1.73,10,2s0.41,0.62,0.41,1S10.27,3.73,10,4L7.5,6.5c-0.53,0.53-1.47,0.53-2,0l-1,1c0.53,0.53,1.24,0.83,2,0.83s1.47-0.29,2-0.83L11,5c0.53-0.53,0.83-1.24,0.83-2S11.53,1.53,11,1z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/overlays.svg
+++ b/frontend-svelte/assets/icon-12px-solid/overlays.svg
@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<rect width="3" height="3" />
+	<rect width="3" height="3" y="9" />
+	<rect width="1" height="4" y="4" />
+	<rect width="4" height="1" x="4" y="11" />
+	<rect width="1" height="4" x="11" y="4" />
+	<rect width="3" height="3" x="9" />
+	<rect width="3" height="3" x="9" y="9" />
+	<rect width="4" height="1" x="4" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/remove.svg
+++ b/frontend-svelte/assets/icon-12px-solid/remove.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<rect width="8" height="2" x="2" y="5" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/reset-colors.svg
+++ b/frontend-svelte/assets/icon-12px-solid/reset-colors.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path d="M10,4c0-2.2-1.8-4-4-4S2,1.8,2,4c0,0.7,0.2,1.4,0.6,2C2.2,6.6,2,7.3,2,8c0,2.2,1.8,4,4,4s4-1.8,4-4c0-0.7-0.2-1.4-0.6-2C9.8,5.4,10,4.7,10,4z M6,1c1.7,0,3,1.3,3,3S7.7,7,6,7S3,5.7,3,4S4.3,1,6,1z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/snapping.svg
+++ b/frontend-svelte/assets/icon-12px-solid/snapping.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path d="M7.5,7.5L6,9C5.17,9.83,3.83,9.83,3,9S2.17,6.83,3,6l1.5-1.5L3,3L1.5,4.5c-1.66,1.66-1.66,4.34,0,6s4.34,1.66,6,0L9,9L7.5,7.5z" />
+	<polygon points="4,2 5.5,0.5 7,2 5.5,3.5" />
+	<polygon points="8.5,6.5 10,5 11.5,6.5 10,8" />
+	<polygon points="12,0 8.29,1.21 9.29,3.21 7,4 7,5 10.71,3.79 9.71,1.79 12,1" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/swap.svg
+++ b/frontend-svelte/assets/icon-12px-solid/swap.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path d="M7,3L4,0L1,3h2v4h2V3H7z M8,12l3-3H9V5H7v4H5L8,12z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/vertical-ellipsis.svg
+++ b/frontend-svelte/assets/icon-12px-solid/vertical-ellipsis.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<circle cx="6" cy="2" r="1.5" />
+	<circle cx="6" cy="6" r="1.5" />
+	<circle cx="6" cy="10" r="1.5" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/warning.svg
+++ b/frontend-svelte/assets/icon-12px-solid/warning.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path d="M11.9,9.79L6.96,0.58c-0.41-0.77-1.5-0.77-1.92,0L0.1,9.79C-0.19,10.33,0.2,11,0.81,11h10.39C11.8,11,12.19,10.33,11.9,9.79z M6.9,2.5L6.67,7H5.33L5.1,2.5L6.9,2.5z M6,10.3c-0.63,0-1.15-0.51-1.15-1.15C4.85,8.51,5.37,8,6,8c0.63,0,1.15,0.51,1.15,1.15C7.15,9.78,6.63,10.3,6,10.3z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/window-button-win-close.svg
+++ b/frontend-svelte/assets/icon-12px-solid/window-button-win-close.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<polygon points="11,1.7 10.3,1 6,5.3 1.7,1 1,1.7 5.3,6 1,10.3 1.7,11 6,6.7 10.3,11 11,10.3 6.7,6" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/window-button-win-maximize.svg
+++ b/frontend-svelte/assets/icon-12px-solid/window-button-win-maximize.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path d="M11,1v10H1V1H11z M10,2H2v8h8V2z" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/window-button-win-minimize.svg
+++ b/frontend-svelte/assets/icon-12px-solid/window-button-win-minimize.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<rect x="1" y="5" width="10" height="1" />
+</svg>
--- a/frontend-svelte/assets/icon-12px-solid/window-button-win-restore-down.svg
+++ b/frontend-svelte/assets/icon-12px-solid/window-button-win-restore-down.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+	<path d="M11,9H9v2H1V3h2V1h8V9z M8,4H2v6h6V4z M10,2H4v1h5v5h1V2z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/align-bottom.svg
+++ b/frontend-svelte/assets/icon-16px-solid/align-bottom.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<rect y="15" width="16" height="1" />
+	<rect x="9" y="6" width="5" height="7" />
+	<rect x="2" width="5" height="13" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/align-horizontal-center.svg
+++ b/frontend-svelte/assets/icon-16px-solid/align-horizontal-center.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<rect x="8" width="1" height="16" />
+	<rect x="5" y="2" width="7" height="5" />
+	<rect x="2" y="9" width="13" height="5" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/align-left.svg
+++ b/frontend-svelte/assets/icon-16px-solid/align-left.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<rect width="1" height="16" />
+	<rect x="3" y="2" width="7" height="5" />
+	<rect x="3" y="9" width="13" height="5" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/align-right.svg
+++ b/frontend-svelte/assets/icon-16px-solid/align-right.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<rect x="15" width="1" height="16" />
+	<rect x="6" y="2" width="7" height="5" />
+	<rect y="9" width="13" height="5" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/align-top.svg
+++ b/frontend-svelte/assets/icon-16px-solid/align-top.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<rect width="16" height="1" />
+	<rect x="9" y="3" width="5" height="7" />
+	<rect x="2" y="3" width="5" height="13" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/align-vertical-center.svg
+++ b/frontend-svelte/assets/icon-16px-solid/align-vertical-center.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<rect y="8" width="16" height="1" />
+	<rect x="9" y="5" width="5" height="7" />
+	<rect x="2" y="2" width="5" height="13" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/boolean-difference.svg
+++ b/frontend-svelte/assets/icon-16px-solid/boolean-difference.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="12,4 12,12 4,12 4,16 16,16 16,4" />
+	<polygon points="12,4 12,0 0,0 0,12 4,12 4,4" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/boolean-intersect.svg
+++ b/frontend-svelte/assets/icon-16px-solid/boolean-intersect.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M12,4V0H0v12h4v4h12V4H12z M1,11V1h10v3H4v7H1z M15,15H5v-3h7V5h3V15z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/boolean-subtract-back.svg
+++ b/frontend-svelte/assets/icon-16px-solid/boolean-subtract-back.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M12,4V0H0v12h4v4h12V4H12z M1,1h10v10H1V1z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/boolean-subtract-front.svg
+++ b/frontend-svelte/assets/icon-16px-solid/boolean-subtract-front.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M12,4V0H0v12h4v4h12V4H12z M15,15H5V5h10V15z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/boolean-union.svg
+++ b/frontend-svelte/assets/icon-16px-solid/boolean-union.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="12,4 12,0 0,0 0,12 4,12 4,16 16,16 16,4" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/checkbox-checked.svg
+++ b/frontend-svelte/assets/icon-16px-solid/checkbox-checked.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="7.19,13.83 2.18,9.44 3.82,7.56 6.81,10.17 12,3.25 14,4.75" />
+	<path d="M14,16H2c-1.1,0-2-.9-2-2V2C0,.9,.9,0,2,0H14c1.1,0,2,.9,2,2V14c0,1.1-.9,2-2,2ZM2,1c-.55,0-1,.45-1,1V14c0,.55,.45,1,1,1H14c.55,0,1-.45,1-1V2c0-.55-.45-1-1-1H2Z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/checkbox-unchecked.svg
+++ b/frontend-svelte/assets/icon-16px-solid/checkbox-unchecked.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M14,16H2c-1.1,0-2-.9-2-2V2C0,.9,.9,0,2,0H14c1.1,0,2,.9,2,2V14c0,1.1-.9,2-2,2ZM2,1c-.55,0-1,.45-1,1V14c0,.55,.45,1,1,1H14c.55,0,1-.45,1-1V2c0-.55-.45-1-1-1H2Z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/copy.svg
+++ b/frontend-svelte/assets/icon-16px-solid/copy.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M9,5L5,9v7h9V5H9z M13,15H6v-5h4V6h3V15z" />
+	<polygon points="5,1 2,4 2,13 4,13 4,12 3,12 3,5 6,5 6,2 11,2 11,4 12,4 12,1" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/eye-hidden.svg
+++ b/frontend-svelte/assets/icon-16px-solid/eye-hidden.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M8,4c3.5,0,5.9,2.8,6.8,4c-0.9,1.2-3.3,4-6.8,4S2.1,9.2,1.2,8C2.1,6.8,4.5,4,8,4 M8,3C3,3,0,8,0,8s3,5,8,5s8-5,8-5S13,3,8,3L8,3z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/eye-visible.svg
+++ b/frontend-svelte/assets/icon-16px-solid/eye-visible.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M8,3C3,3,0,8,0,8s3,5,8,5s8-5,8-5S13,3,8,3z M8,12c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S10.2,12,8,12z" />
+	<circle cx="9" cy="7" r="1.2" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/eyedropper.svg
+++ b/frontend-svelte/assets/icon-16px-solid/eyedropper.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M13.2,5.2l1.7-1.7c0.6-0.6,0.7-1.6,0.1-2.3c0,0,0,0-0.1-0.1l0,0c-0.7-0.7-1.7-0.7-2.4,0c0,0,0,0,0,0l-1.7,1.7l-0.7-0.7c-0.2-0.3-0.7-0.3-0.9,0c0,0,0,0,0,0l-1,1l4.7,4.7l1-1c0.3-0.2,0.3-0.7,0-0.9c0,0,0,0,0,0L13.2,5.2z" />
+	<path d="M10.4,6.6l-6.5,6.5c-0.1,0.1-0.4,0.1-0.6,0.1c-0.2,0-0.5,0.1-0.7,0.1c0.1-0.3,0.1-0.5,0.1-0.7s0.1-0.5,0.1-0.6l6.5-6.5L8.7,4.9l-6.5,6.5c-0.6,0.6-0.2,1.9-1.1,2.9l0.6,0.6c0.9-0.9,2.3-0.5,2.9-1.1s6.5-6.5,6.5-6.5L10.4,6.6z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/file.svg
+++ b/frontend-svelte/assets/icon-16px-solid/file.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M7,0L2,5v11h12V0H7z M13,15H3V6h5V1h5V15z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/flip-horizontal.svg
+++ b/frontend-svelte/assets/icon-16px-solid/flip-horizontal.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M15,4.6v6.8l-4-2V6.6L15,4.6 M16,3l-6,3v4l6,3V3L16,3z" />
+	<polygon points="5,10 0,13 0,3 5,6" />
+	<rect x="7" y="13" width="1" height="2" />
+	<rect x="7" y="9" width="1" height="2" />
+	<rect x="7" y="5" width="1" height="2" />
+	<rect x="7" y="1" width="1" height="2" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/flip-vertical.svg
+++ b/frontend-svelte/assets/icon-16px-solid/flip-vertical.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M9.4,11l2,4H4.6l2-4H9.4 M10,10H6l-3,6h10L10,10L10,10z" />
+	<polygon points="6,5 3,0 13,0 10,5" />
+	<rect x="1" y="7" width="2" height="1" />
+	<rect x="5" y="7" width="2" height="1" />
+	<rect x="9" y="7" width="2" height="1" />
+	<rect x="13" y="7" width="2" height="1" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/folder.svg
+++ b/frontend-svelte/assets/icon-16px-solid/folder.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M14,13H2c-0.55,0-1-0.45-1-1V6h5.42l1-1H15v7C15,12.55,14.55,13,14,13z" />
+	<path d="M6,2H2C1.45,2,1,2.45,1,3v2h5l1-1h8c0-0.55-0.45-1-1-1H7L6,2z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/graphite-logo.svg
+++ b/frontend-svelte/assets/icon-16px-solid/graphite-logo.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M5.15,10.65L2.82,6.61c-0.1-0.16-0.05-0.36,0.1-0.46c0.16-0.1,0.36-0.05,0.46,0.1C3.39,6.25,3.39,6.26,3.4,6.27l2.33,4.04c0.1,0.16,0.05,0.36-0.1,0.46c-0.16,0.1-0.36,0.05-0.46-0.1C5.16,10.66,5.16,10.66,5.15,10.65 M15.7,14.6c0.02,0.2-0.06,0.4-0.2,0.54c-0.28,0.34-1.49,0.59-2.41,0.72c-0.61,0.09-1.22,0.13-1.83,0.14c-0.58-0.01-1.38-0.15-2.14-0.2c-1.07-0.07-4.63-0.2-5.85-0.19c-1.37,0.01-1.65-0.07-1.88-0.27c-0.09-0.08,0.69-0.47,2.34-0.6c4.01-0.33,7.55-0.37,8.76-0.31c0.49,0.02,0.97,0.11,1.43,0.26l-2.57-1.85c-0.21,0.14-0.47,0.22-0.72,0.22h-6c-0.48,0-0.92-0.25-1.15-0.67l-3-5.2c-0.24-0.41-0.24-0.92,0-1.33l3-5.2C3.7,0.25,4.14,0,4.62,0h6c0.48,0,0.92,0.25,1.16,0.67l2.21,3.83l0.79,1.36l0,0l0,0l0,0l0,0.01c0,0.01,0.01,0.01,0.01,0.02c0.09,0.17,0.15,0.35,0.16,0.54c0,0.03,0.69,7.5,0.75,8.12L15.7,14.6z M4.34,1.82L8.08,8.3c0.47-0.11,0.95-0.17,1.43-0.17l0.98-1.34l1.65-0.18c0.24-0.42,0.53-0.8,0.86-1.15l-2.22-3.84c-0.11-0.17-0.3-0.28-0.5-0.29H4.95c-0.2,0.01-0.39,0.12-0.5,0.29L4.34,1.82z M9.79,11.72l-2.06-1.48c-0.08-0.06-0.14-0.13-0.19-0.21l0,0L3.57,3.15L1.79,6.24c-0.09,0.18-0.09,0.4,0,0.58l2.67,4.62c0.11,0.17,0.3,0.28,0.5,0.29H9.79z M14.05,11.44l-0.47-4.73c-0.29,0.32-0.55,0.68-0.77,1.05l-1.65,0.18l-0.98,1.34c-0.44,0-0.87,0.05-1.3,0.14l3.86,2.77C12.96,11.69,13.49,11.38,14.05,11.44" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-artboard.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-artboard.svg
@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M13,4H5v1h7v9h1V4z" />
+	<path d="M4,11V2H3v10h8v-1H4z" />
+	<rect x="14" y="11" width="1" height="1" />
+	<rect x="1" y="4" width="1" height="1" />
+	<rect x="5" y="6" width="6" height="4" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-blur.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-blur.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M11.61,6.6C10.05,4.38,8.82,2.36,8,1C7.18,2.36,5.95,4.38,4.39,6.6s-1.81,4.74-0.74,6.39C4.67,14.34,6.31,15.1,8,15c1.69,0.1,3.33-0.66,4.35-2.01C13.42,11.34,13.17,8.9,11.61,6.6 M5.87,7.75c0.49,4.67,2.95,5.74,2.95,5.74C2.26,13.85,5.87,7.75,5.87,7.75" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-brushwork.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-brushwork.svg
@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M9.49,11.76c-0.33,0.12-0.67,0.22-1,0.32c-0.42,1.03-1.26,1.87-2.35,2.24c-0.6,0.16-1.2,0.24-1.8,0.26c0.53,0.13,1.12,0.24,1.82,0.33c4.34,0.53,5.22-1.12,8.78-1.49C14.94,13.42,13.88,10.11,9.49,11.76z" />
+	<path d="M7.79,10.64C7.72,9.55,6.82,8.69,5.73,8.68C4.77,8.64,3.9,9.34,3.25,10.8C2.77,11.73,1.97,12.45,1,12.83c1.47,0.79,3.2,0.99,4.81,0.55C6.98,12.98,7.77,11.88,7.79,10.64" />
+	<path d="M14.03,2.23c-0.46-0.5-2.68,1.25-5.11,3.49C8.09,6.45,7.33,7.24,6.64,8.09c0.38,0.09,0.73,0.28,1.02,0.56c0.34,0.3,0.57,0.7,0.67,1.14c0.85-0.69,1.63-1.46,2.33-2.31C12.85,4.88,14.54,2.73,14.03,2.23" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-color-correction.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-color-correction.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M10.43,9.65c7.82-3.53,2.77-8.99-1.77-8.64S0.83,4.86,1.62,9.34c0.76,4.33,6.79,6.72,8.76,5.2C12.4,12.98,6.85,11.27,10.43,9.65 M11.55,3.17c0.59,0,1.07,0.47,1.08,1.06S12.16,5.3,11.57,5.3c-0.59,0-1.07-0.47-1.08-1.06c0,0,0,0,0,0C10.49,3.65,10.96,3.17,11.55,3.17 M4.06,9.91c-0.59,0-1.07-0.47-1.07-1.06c0-0.59,0.47-1.07,1.06-1.07c0.59,0,1.07,0.47,1.07,1.06C5.13,9.42,4.65,9.91,4.06,9.91C4.06,9.91,4.06,9.91,4.06,9.91 M4.82,6.51c-0.59,0-1.07-0.47-1.07-1.06s0.47-1.07,1.06-1.07c0.59,0,1.07,0.47,1.07,1.06c0,0,0,0,0,0C5.89,6.03,5.41,6.51,4.82,6.51 M7.87,4.47C7.28,4.48,6.8,4,6.79,3.41s0.47-1.07,1.06-1.08c0.59,0,1.07,0.47,1.08,1.06c0,0,0,0,0,0C8.93,3.99,8.46,4.47,7.87,4.47" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-folder.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-folder.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M14,13H2c-0.55,0-1-0.45-1-1V6h5.42l1-1H15v7C15,12.55,14.55,13,14,13z" />
+	<path d="M6,2H2C1.45,2,1,2.45,1,3v2h5l1-1h8c0-0.55-0.45-1-1-1H7L6,2z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-gradient.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-gradient.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M14,1h-1c0.23,0.28,0.37,0.63,0.4,1l0,0c0,0.77-0.63,1.4-1.4,1.4c-0.77,0-1.4-0.63-1.4-1.4c0.03-0.37,0.17-0.72,0.4-1H9.5c0.2,0.29,0.31,0.64,0.3,1l0,0c0,0.99-0.81,1.8-1.8,1.8S6.2,2.99,6.2,2c0.04-0.35,0.14-0.69,0.3-1H5.7C5.9,1.22,6.01,1.5,6,1.8C6.11,2.9,5.3,3.89,4.2,4C5.3,4.11,6.11,5.1,6,6.2C5.9,7.15,5.15,7.9,4.2,8C5.3,8.11,6.11,9.1,6,10.2c-0.1,0.95-0.85,1.7-1.8,1.8c0.97,0.07,1.73,0.83,1.8,1.8c0,0.42-0.11,0.83-0.3,1.2h0.8c-0.2-0.29-0.31-0.64-0.3-1c0-0.03,0-0.06,0-0.08c0-0.94,0.76-1.71,1.7-1.72c0,0,0,0,0,0h0.01c0.99,0,1.79,0.81,1.79,1.8c0,0,0,0,0,0c0.01,0.36-0.1,0.71-0.3,1H11c-0.23-0.28-0.37-0.63-0.4-1c0-0.77,0.63-1.4,1.4-1.4c0.77,0,1.4,0.63,1.4,1.4l0,0c-0.03,0.37-0.17,0.72-0.4,1h1c0.55,0,1-0.45,1-1V2C15,1.45,14.55,1,14,1 M9.8,10c0,0.99-0.81,1.79-1.8,1.79c-0.99,0-1.79-0.81-1.79-1.8C6.22,9,7.02,8.2,8.01,8.2C9,8.2,9.8,9,9.8,9.99V10 M9.8,6c0,0.99-0.81,1.79-1.8,1.79c-0.99,0-1.79-0.81-1.79-1.8C6.22,5,7.02,4.2,8.01,4.2C9,4.2,9.8,5,9.8,5.99V6 M13.4,10c0,0.77-0.63,1.4-1.4,1.4s-1.4-0.63-1.4-1.4c0-0.77,0.63-1.4,1.4-1.4c0,0,0,0,0,0c0.75-0.02,1.38,0.58,1.4,1.33C13.4,9.96,13.4,9.98,13.4,10 M13.4,6c0,0.77-0.63,1.4-1.4,1.4c-0.77,0-1.4-0.63-1.4-1.4c0-0.77,0.63-1.4,1.4-1.4c0.75-0.02,1.38,0.58,1.4,1.33C13.4,5.95,13.4,5.98,13.4,6 M3.8,8C3.04,8.09,2.39,8.59,2.1,9.3C1.91,8.75,1.52,8.28,1,8c0.52-0.28,0.91-0.75,1.1-1.3C2.39,7.41,3.04,7.91,3.8,8 M3.8,4C3.05,4.12,2.41,4.61,2.1,5.3C1.91,4.75,1.52,4.28,1,4c0.52-0.28,0.91-0.75,1.1-1.3C2.41,3.39,3.05,3.88,3.8,4 M3.8,12c-0.76,0.09-1.41,0.59-1.7,1.3C1.88,12.76,1.49,12.31,1,12c0.52-0.28,0.91-0.75,1.1-1.3C2.39,11.41,3.04,11.91,3.8,12" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-image.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-image.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<circle cx="4" cy="6" r="1.5" />
+	<path d="M14,6l-2-2l-1-1H1v10h14V7L14,6z M11,4v3h3v4L9.5,6.5l-3,4l-2-2L2,12V4H11z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-imaginate.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-imaginate.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M9.6,13.6C9.5,14.5,8.7,15,8,15c-0.5,0-1-0.2-1.3-0.6L9.6,13.6z M6.3,12.5c0,0.3,0,0.6,0.1,1c0,0,0,0,0,0.1l3.3-0.8c0-0.5,0.1-0.8,0.1-1.1L6.3,12.5z M8,2c2.3,0,4.1,1.9,4.1,4.2c0,2.5-1.5,3.1-2.1,4.5c0,0,0,0.1,0,0.1l-3.8,0.9c-0.1-0.4-0.2-0.7-0.3-1C5.4,9.3,3.9,8.7,3.9,6.2c0,0,0,0,0,0C3.9,3.9,5.7,2,8,2C8,2,8,2,8,2z M8.2,8.9C8,8.7,7.3,9.2,7.1,9.5c-0.2,0.3-0.2,0.7,0.1,1c0.5,0.1,0.9,0,1.2-0.4C8.6,9.7,8.6,9.2,8.2,8.9z M8.2,8c0.3-0.7,1.2-4.7,1.2-4.7C8.2,2.7,7.1,4.2,7.1,4.2C7,5.5,7.1,6.8,7.2,8.1C7.6,8.2,7.9,8.1,8.2,8L8.2,8z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-magic-wand.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-magic-wand.svg
@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<polygon points="6.08,4.08 8,3.5 6.08,2.92 5.5,1 4.92,2.92 3,3.5 4.92,4.08 5.5,6" />
+	<polygon points="9.9,12.9 11.5,12.5 9.9,12.1 9.5,10.5 9.1,12.1 7.5,12.5 9.1,12.9 9.5,14.5" />
+	<polygon points="12.98,9.98 15,9.5 12.98,9.02 12.5,7 12.02,9.02 10,9.5 12.02,9.98 12.5,12" />
+	<path d="M12.65,4.65l-1.29-1.29c-0.2-0.2-0.51-0.2-0.71,0l-9.29,9.29c-0.2,0.2-0.2,0.51,0,0.71l1.29,1.29c0.2,0.2,0.51,0.2,0.71,0l9.29-9.29C12.84,5.16,12.84,4.84,12.65,4.65z M11.82,5.18L9.18,7.82c-0.1,0.1-0.26,0.1-0.35,0L8.18,7.18c-0.1-0.1-0.1-0.26,0-0.35l2.65-2.65c0.1-0.1,0.26-0.1,0.35,0l0.65,0.65C11.92,4.92,11.92,5.08,11.82,5.18z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-mask.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-mask.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M13.391,5.529c-.414-.037-1.91-1.088-2.941-1.027S8.663,5.1,8,5.1s-1.418-.54-2.449-.6-2.527.99-2.941,1.027c-.721.065-.952-.246-1.61-.736a13.341,13.341,0,0,0,.459,3.454A4.249,4.249,0,0,0,4.5,11.389a3.063,3.063,0,0,0,2.2-.2A3.129,3.129,0,0,1,8,10.7a3.133,3.133,0,0,1,1.3.49,3.061,3.061,0,0,0,2.2.2,4.249,4.249,0,0,0,3.042-3.142A13.338,13.338,0,0,0,15,4.793c-.657.49-.888.8-1.609.736M6.94,9.232c-.486.438-2.157.257-2.7-.038-.652-.353-1.465-1.218-.881-1.7a2.646,2.646,0,0,1,2.876-.113c.869.719.928,1.651.707,1.85m4.823-.038c-.545.3-2.216.476-2.7.038-.221-.2-.162-1.131.707-1.85a2.645,2.645,0,0,1,2.875.113c.585.481-.229,1.346-.88,1.7" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-motion-blur.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-motion-blur.svg
@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M8.06,4.18l0.87-2.19C4.14,1.43,0.05,6.67,2.9,11.07C1.32,7.09,4.37,2.89,8.06,4.18z" />
+	<path d="M7.94,11.82l-0.87,2.19c4.79,0.56,8.88-4.68,6.03-9.08C14.68,8.91,11.63,13.11,7.94,11.82z" />
+	<path d="M10.04,2.72c-0.49,0.75-1.37,2.46-1.8,3.3C8.16,6.01,8.08,6,8,6C6.9,6,6,6.9,6,8c0,0.15,0.02,0.3,0.05,0.44c-1.28,1.16-4.62,4.26-5.02,5.51c-0.42,1.32,3.38,1.68,4.93-0.68c0.49-0.75,1.37-2.46,1.8-3.3C7.84,9.99,7.92,10,8,10c1.1,0,2-0.9,2-2c0-0.15-0.02-0.3-0.05-0.44c1.28-1.16,4.62-4.26,5.02-5.51C15.39,0.72,11.59,0.36,10.04,2.72z M8,9C7.45,9,7,8.55,7,8c0-0.55,0.45-1,1-1s1,0.45,1,1C9,8.55,8.55,9,8,9z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-nodes.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-nodes.svg
@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<polygon points="3,1 1,1 0,1 0,2 0,4 1,4 1,2 3,2" />
+	<polygon points="15,1 13,1 13,2 15,2 15,4 16,4 16,2 16,1" />
+	<polygon points="1,14 1,12 0,12 0,14 0,15 1,15 3,15 3,14" />
+	<polygon points="15,12 15,14 13,14 13,15 15,15 16,15 16,14 16,12" />
+	<path d="M11,7h2c0.5,0,1-0.5,1-1V4c0-0.5-0.5-1-1-1h-2c-0.5,0-1,0.5-1,1v0.5L9.8,4.5C9.1,4.8,8.6,5.3,7.9,5.8C7.1,6.5,6.3,7.2,5,7.5V7c0-0.5-0.5-1-1-1H2C1.5,6,1,6.5,1,7v2c0,0.5,0.5,1,1,1h2c0.5,0,1-0.5,1-1V8.5c1.3,0.3,2.1,1,2.9,1.7c0.6,0.5,1.2,1,1.9,1.3l0.2,0.1V12c0,0.5,0.5,1,1,1h2c0.5,0,1-0.5,1-1v-2c0-0.5-0.5-1-1-1h-2c-0.5,0-1,0.5-1,1v0.5c-0.5-0.2-0.9-0.6-1.4-1C8,9,7.4,8.4,6.5,8C7.4,7.6,8,7,8.6,6.5c0.5-0.4,0.9-0.8,1.4-1V6C10,6.5,10.5,7,11,7z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-output.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-output.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M7,2L3,6v8h10V2H7z M12,13H4V7h4V3h4V13z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-shape.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-shape.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M14.96,5.19c-0.16-0.53-0.72-0.83-1.25-0.66c-0.96,0.3-1.86,0.6-2.7,0.91V5H5v3.16c-2.36,1.31-3.56,2.32-3.65,2.4c-0.42,0.36-0.46,0.99-0.1,1.41c0.2,0.23,0.48,0.35,0.76,0.35c0.23,0,0.46-0.08,0.65-0.24c0.02-0.01,0.8-0.67,2.34-1.6V11h6V7.59c1.01-0.39,2.09-0.78,3.29-1.15C14.82,6.28,15.12,5.72,14.96,5.19z M9,9H7V7h2V9z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-text.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-text.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M3,2v3h0.5c0,0,0-2,2.29-2H7v8.79C7,12.48,6.89,13,5,13v1h6v-1c-1.89,0-2-0.52-2-1.21V3h1.21c2.29,0,2.29,2,2.29,2H13V2H3z"/>
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/node-transform.svg
+++ b/frontend-svelte/assets/icon-16px-solid/node-transform.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M15,12l-5-3v2H6.95C6.75,10.02,5.98,9.25,5,9.05V6h2L4,1L1,6h2v3.51c-0.6,0.46-1,1.17-1,1.99C2,12.88,3.12,14,4.5,14c0.82,0,1.53-0.4,1.99-1H10v2L15,12z M4.5,12.5c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C5.5,12.05,5.05,12.5,4.5,12.5z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/paste.svg
+++ b/frontend-svelte/assets/icon-16px-solid/paste.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M12,1H8.72C8.38,0.4,7.74,0,7,0S5.62,0.4,5.28,1H2C1.45,1,1,1.45,1,2v12c0,0.55,0.45,1,1,1h3v-1H2V2h2v1c0,0.55,0.45,1,1,1h4c0.55,0,1-0.45,1-1V2h2v2h1V2C13,1.45,12.55,1,12,1z" />
+	<path d="M10,5L6,9v7h9V5H10z M14,15H7v-5h4V6h3V15z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/random.svg
+++ b/frontend-svelte/assets/icon-16px-solid/random.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M15.9,9.6L14,2.7c-0.5-1.9-2.5-3.1-4.4-2.5L2.7,2C0.7,2.5-0.4,4.5,0.1,6.4L2,13.3c0.5,1.9,2.5,3.1,4.4,2.5l6.9-1.9C15.3,13.5,16.4,11.5,15.9,9.6z M2.3,5.9C2.1,5.1,2.5,4.3,3.3,4.1c0.8-0.2,1.6,0.3,1.8,1.1C5.4,5.9,4.9,6.8,4.1,7C3.3,7.2,2.5,6.7,2.3,5.9z M5.9,13.7c-0.8,0.2-1.6-0.3-1.8-1.1c-0.2-0.8,0.3-1.6,1.1-1.8c0.8-0.2,1.6,0.3,1.8,1.1C7.2,12.7,6.7,13.5,5.9,13.7z M8.4,9.4C7.6,9.7,6.8,9.2,6.6,8.4C6.3,7.6,6.8,6.8,7.6,6.6c0.8-0.2,1.6,0.3,1.8,1.1C9.7,8.4,9.2,9.2,8.4,9.4z M9,4.1c-0.2-0.8,0.3-1.6,1.1-1.8c0.8-0.2,1.6,0.3,1.8,1.1c0.2,0.8-0.3,1.6-1.1,1.8C10.1,5.4,9.2,4.9,9,4.1z M12.7,11.9c-0.8,0.2-1.6-0.3-1.8-1.1c-0.2-0.8,0.3-1.6,1.1-1.8c0.8-0.2,1.6,0.3,1.8,1.1C13.9,10.9,13.5,11.7,12.7,11.9z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/regenerate.svg
+++ b/frontend-svelte/assets/icon-16px-solid/regenerate.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="12.6,0 15.5,5 9.7,5" />
+	<path d="M2.2,8H0.8C0.8,4,4,0.8,8,0.8c2,0,3.9,0.8,5.3,2.3l-1,1C11.2,2.9,9.6,2.2,8,2.2C4.8,2.2,2.2,4.8,2.2,8z" />
+	<path d="M8,15.2c-2,0-3.9-0.8-5.3-2.3l1-1c1.1,1.2,2.6,1.9,4.3,1.9c3.2,0,5.8-2.6,5.8-5.8h1.4C15.2,12,12,15.2,8,15.2z" />
+	<polygon points="3.4,16 0.5,11 6.3,11" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/reload.svg
+++ b/frontend-svelte/assets/icon-16px-solid/reload.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M8,15.2C4,15.2,0.8,12,0.8,8C0.8,4,4,0.8,8,0.8c2,0,3.9,0.8,5.3,2.3l-1,1C11.2,2.9,9.6,2.2,8,2.2C4.8,2.2,2.2,4.8,2.2,8s2.6,5.8,5.8,5.8s5.8-2.6,5.8-5.8h1.4C15.2,12,12,15.2,8,15.2z" />
+	<polygon points="12.6,0 15.5,5 9.7,5" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/rescale.svg
+++ b/frontend-svelte/assets/icon-16px-solid/rescale.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="3,1 1,1 0,1 0,2 0,4 1,4 1,2 3,2" />
+	<polygon points="15,1 13,1 13,2 15,2 15,4 16,4 16,2 16,1" />
+	<polygon points="1,14 1,12 0,12 0,14 0,15 1,15 3,15 3,14" />
+	<polygon points="15,12 15,14 13,14 13,15 15,15 16,15 16,14 16,12" />
+	<path d="M12,5v6H4V5H12 M13,4H3v8h10V4L13,4z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/reset.svg
+++ b/frontend-svelte/assets/icon-16px-solid/reset.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="0,8 2.4,12.2 4.9,8" />
+	<path d="M8.8,15.2c-1.2,0-2.5-0.3-3.6-1L5.9,13c2.8,1.6,6.3,0.6,7.9-2.1c0.8-1.3,1-2.9,0.6-4.4S13,3.8,11.7,3C8.9,1.4,5.4,2.3,3.8,5.1C3,6.5,2.8,8.2,3.3,9.7l-1.3,0.4c-0.6-1.9-0.4-4,0.6-5.8C4.5,1,9-0.2,12.4,1.8c1.7,1,2.9,2.5,3.4,4.4C16.2,8,16,9.9,15,11.6C13.7,13.9,11.3,15.2,8.8,15.2z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/settings.svg
+++ b/frontend-svelte/assets/icon-16px-solid/settings.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M14,8c0-0.3,0-0.7-0.1-1l1.8-1.7l-1.5-2.6l-2.4,0.7c-0.5-0.4-1.1-0.8-1.7-1L9.5,0h-3L5.9,2.4C5.3,2.6,4.7,3,4.2,3.4L1.8,2.7L0.3,5.3L2.1,7C2,7.3,2,7.7,2,8s0,0.7,0.1,1l-1.8,1.7l1.5,2.6l2.4-0.7c0.5,0.4,1.1,0.8,1.7,1L6.5,16h3l0.6-2.4c0.6-0.2,1.2-0.6,1.7-1l2.4,0.7l1.5-2.6L13.9,9C14,8.7,14,8.3,14,8z M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S9.7,11,8,11z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/trash.svg
+++ b/frontend-svelte/assets/icon-16px-solid/trash.svg
@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M11,6v7c0,0.5-0.4,1-0.9,1H4.9C4.4,14,4,13.5,4,13V6H11z M12,5H3v8c0,1.1,0.8,1.9,1.8,2h0h5.3h0c1-0.1,1.8-1,1.8-2V5z" />
+	<path d="M12,3h-2c0-1.1-0.9-2-2-2H7C5.9,1,5,1.9,5,3H3C2.4,3,2,3.4,2,4h11C13,3.4,12.6,3,12,3 M7,2h1c0.6,0,1,0.4,1,1H6C6,2.4,6.4,2,7,2" />
+	<path d="M6,12.5C6,12.8,5.8,13,5.5,13S5,12.8,5,12.5v-5C5,7.2,5.2,7,5.5,7S6,7.2,6,7.5V12.5z" />
+	<path d="M8,12.5C8,12.8,7.8,13,7.5,13S7,12.8,7,12.5v-5C7,7.2,7.2,7,7.5,7S8,7.2,8,7.5V12.5z" />
+	<path d="M10,12.5c0,0.3-0.2,0.5-0.5,0.5S9,12.8,9,12.5v-5C9,7.2,9.2,7,9.5,7S10,7.2,10,7.5V12.5z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/view-mode-normal.svg
+++ b/frontend-svelte/assets/icon-16px-solid/view-mode-normal.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<circle cx="8" cy="8" r="8" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/view-mode-outline.svg
+++ b/frontend-svelte/assets/icon-16px-solid/view-mode-outline.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M8,1c3.9,0,7,3.1,7,7s-3.1,7-7,7s-7-3.1-7-7S4.1,1,8,1 M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0L8,0z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/view-mode-pixels.svg
+++ b/frontend-svelte/assets/icon-16px-solid/view-mode-pixels.svg
@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<rect x="7" y="1" width="2" height="2" />
+	<rect x="13" y="4" width="2" height="2" />
+	<rect x="13" y="7" width="2" height="2" />
+	<rect x="13" y="10" width="2" height="2" />
+	<rect x="7" y="13" width="2" height="2" />
+	<rect x="10" y="13" width="2" height="2" />
+	<rect x="4" y="13" width="2" height="2" />
+	<rect x="1" y="10" width="2" height="2" />
+	<rect x="1" y="7" width="2" height="2" />
+	<rect x="1" y="4" width="2" height="2" />
+	<rect x="4" y="1" width="2" height="2" />
+	<rect x="10" y="10" width="2" height="2" />
+	<rect x="4" y="10" width="2" height="2" />
+	<rect x="7" y="10" width="2" height="2" />
+	<rect x="10" y="7" width="2" height="2" />
+	<rect x="4" y="7" width="2" height="2" />
+	<rect x="7" y="7" width="2" height="2" />
+	<rect x="10" y="4" width="2" height="2" />
+	<rect x="4" y="4" width="2" height="2" />
+	<rect x="7" y="4" width="2" height="2" />
+	<rect x="10" y="1" width="2" height="2" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/viewport-design-mode.svg
+++ b/frontend-svelte/assets/icon-16px-solid/viewport-design-mode.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M15,6.06V15H9.69c-0.22,0.36-0.49,0.69-0.79,1H16V4.46C15.71,4.96,15.37,5.49,15,6.06z" />
+	<path d="M5.57,9.4c-1.22,0.07-2.27,1.09-2.94,3.05C1.94,14.47,0,15.36,0,15.36c2.08,0.71,4.3,0.95,6.26,0.08c1.75-0.78,2.38-2.35,2.22-3.76C8.35,10.58,7.27,9.3,5.57,9.4z" />
+	<path d="M15.42,0.08c-0.69-0.55-3.27,1.97-6.11,5.14c-1,1.12-1.99,2.3-2.6,3.34C7.17,8.6,7.66,8.78,8.11,9.12C8.67,9.55,9,10.05,9.14,10.49c0.94-0.86,1.75-1.96,2.68-3.3C14.29,3.65,16.11,0.62,15.42,0.08z" />
+	<path d="M0.74,11.81c0.08-0.24,0.17-0.43,0.26-0.65V1h9.52c0.38-0.38,0.72-0.71,1.05-1H0v12.93C0.29,12.65,0.58,12.28,0.74,11.81z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/viewport-guide-mode.svg
+++ b/frontend-svelte/assets/icon-16px-solid/viewport-guide-mode.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="11.85,0 11.15,0 0,11.15 0,12.85 1.5,11.35 2.58,12.42 3.42,11.58 2.35,10.5 3.5,9.35 5.58,11.42 6.42,10.58 4.35,8.5 5.5,7.35 6.58,8.42 7.42,7.58 6.35,6.5 7.5,5.35 9.58,7.42 10.42,6.58 8.35,4.5 9.5,3.35 10.58,4.42 11.42,3.58 10.35,2.5 11.5,1.35 14.65,4.5 3.15,16 4.85,16 16,4.85 16,4.15" />
+	<polygon points="14,0 16,2 16,0" />
+	<polygon points="15,8.68 15,15 8.68,15 7.68,16 16,16 16,7.68" />
+	<polygon points="0,0 0,8.32 1,7.32 1,1 7.32,1 8.32,0" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/viewport-select-mode.svg
+++ b/frontend-svelte/assets/icon-16px-solid/viewport-select-mode.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M15,1v1.85c0.37,0.32,0.7,0.66,1,1.02V0H0v3.19c0.24-0.28,0.49-0.55,0.78-0.81C0.85,2.32,0.93,2.27,1,2.21V1H15z" />
+	<path d="M0,11.17v4.37l1-0.66v-2.15c-0.15-0.28-0.27-0.58-0.34-0.89C0.42,11.62,0.2,11.39,0,11.17z" />
+	<path d="M15,12.74V15H8.54c-0.23,0.24-0.41,0.52-0.55,0.77L7.86,16H16v-4.11C15.7,12.2,15.37,12.49,15,12.74z" />
+	<path d="M2.54,10.76c-0.01,0.49,0.12,0.96,0.41,1.33c0.35,0.45,1.02,0.93,2.29,0.93c0.03,0,0.07-0.01,0.1-0.01C5.19,13.78,4.62,14.86,2.91,16h2.38c0.4-0.41,0.71-0.81,0.94-1.19l0,0c0.87-1.57,2.19-2.48,3.72-2.54c3.31-0.14,5.61-1.86,5.61-4.2c0-2.98-3.07-5.42-7.47-5.94C5.86,1.87,3.63,2.52,2.11,3.88C1.03,4.84,0.44,6.02,0.44,7.22C0.44,8.57,1.2,9.83,2.54,10.76z M6.91,11.81c-0.03,0.02-0.06,0.04-0.09,0.06c-0.04-0.23-0.1-0.38-0.12-0.45c-0.33-0.86-1.11-1.01-1.62-1.11c-0.15-0.03-0.31-0.06-0.45-0.11c-0.11-0.05-0.22-0.1-0.33-0.15C4.51,9.75,4.85,9.49,5.3,9.43c0.85-0.1,1.48,0.1,1.77,0.56C7.34,10.45,7.27,11.14,6.91,11.81z M3.1,5c1.03-0.92,2.49-1.42,4.01-1.42c0.27,0,0.53,0.02,0.8,0.05c4.04,0.47,6.15,2.6,6.15,4.45c0,1.49-1.72,2.6-4.18,2.7c-0.4,0.02-0.78,0.09-1.16,0.19c0.05-0.63-0.08-1.24-0.39-1.75c-0.6-0.97-1.78-1.43-3.22-1.26c-0.84,0.1-1.6,0.6-2.08,1.32c-0.71-0.6-1.1-1.31-1.1-2.04C1.94,6.47,2.36,5.66,3.1,5z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/zoom-in.svg
+++ b/frontend-svelte/assets/icon-16px-solid/zoom-in.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M15.7,14.2l-4-4l-1.5,1.5l4,4c0.4,0.4,1.1,0.4,1.5,0C16.1,15.3,16.1,14.6,15.7,14.2z" />
+	<path d="M6.5,1.4c2.8,0,5.1,2.3,5.1,5.1s-2.3,5.1-5.1,5.1S1.4,9.3,1.4,6.5S3.7,1.4,6.5,1.4 M6.5,0C2.9,0,0,2.9,0,6.5S2.9,13,6.5,13S13,10.1,13,6.5S10.1,0,6.5,0L6.5,0z" />
+	<rect x="3" y="5.8" width="7" height="1.5" />
+	<rect x="5.8" y="3" width="1.5" height="7" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/zoom-out.svg
+++ b/frontend-svelte/assets/icon-16px-solid/zoom-out.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M15.7,14.2l-4-4l-1.5,1.5l4,4c0.4,0.4,1.1,0.4,1.5,0C16.1,15.3,16.1,14.6,15.7,14.2z" />
+	<path d="M6.5,1.4c2.8,0,5.1,2.3,5.1,5.1s-2.3,5.1-5.1,5.1S1.4,9.3,1.4,6.5S3.7,1.4,6.5,1.4 M6.5,0C2.9,0,0,2.9,0,6.5S2.9,13,6.5,13S13,10.1,13,6.5S10.1,0,6.5,0L6.5,0z" />
+	<rect x="3" y="5.8" width="7" height="1.5" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-solid/zoom-reset.svg
+++ b/frontend-svelte/assets/icon-16px-solid/zoom-reset.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="0,6.5 2.9,11.5 5.7,6.5" />
+	<path d="M8.2,12.6c-0.2,0-0.4,0-0.6,0c-0.9-0.1-1.8-0.4-2.6-0.8l0.7-1.2c0.6,0.4,1.3,0.6,2,0.6c1.3,0.1,2.6-0.3,3.6-1.1s1.6-2,1.7-3.3c0.2-2.7-1.8-5-4.4-5.3C7.3,1.3,6.1,1.7,5.1,2.6c-1,0.8-1.6,2-1.7,3.3c0,0.5,0,1,0.1,1.5L2.1,7.7c-0.2-0.7-0.2-1.3-0.2-2c0.2-1.7,0.9-3.2,2.2-4.3C5.5,0.4,7.1-0.1,8.8,0c3.5,0.3,6,3.3,5.7,6.8c-0.1,1.7-0.9,3.2-2.2,4.3C11.1,12.1,9.7,12.6,8.2,12.6z" />
+	<path d="M15.8,14.4l-3.3-4L11,11.7l3.3,4c0.3,0.4,1,0.5,1.4,0.1C16.1,15.4,16.1,14.8,15.8,14.4z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-two-tone/mouse-hint-drag.svg
+++ b/frontend-svelte/assets/icon-16px-two-tone/mouse-hint-drag.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path class="dim" d="M8,7c0,0.55-0.45,1-1,1l0,0C6.45,8,6,7.55,6,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
+	<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
+	<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
+	<path class="dim" d="M9,2c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-1.1,0.9-2,2-2H9 M9,1H5C3.35,1,2,2.35,2,4v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C12,2.35,10.65,1,9,1L9,1z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg
+++ b/frontend-svelte/assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
+	<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
+	<path class="bright" d="M7,1H5C3.35,1,2,2.35,2,4v4h5V1z" />
+	<path class="dim" d="M9,1H8v1h1c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V9H2v1c0,2.76,2.24,5,5,5s5-2.24,5-5V4C12,2.35,10.65,1,9,1z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-two-tone/mouse-hint-lmb.svg
+++ b/frontend-svelte/assets/icon-16px-two-tone/mouse-hint-lmb.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path class="bright" d="M8,1H6C4.35,1,3,2.35,3,4v4h5V1z" />
+	<path class="dim" d="M10,1H9v1h1c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V9H3v1c0,2.76,2.24,5,5,5s5-2.24,5-5V4C13,2.35,11.65,1,10,1z" />
+</svg>
--- a/frontend-svelte/assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg
+++ b/frontend-svelte/assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path class="bright" d="M8,7c0,0.55-0.45,1-1,1l0,0C6.45,8,6,7.55,6,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
+	<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
+	<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
+	<path class="dim" d="M9,2c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-1.1,0.9-2,2-2H9 M9,1H5C3.35,1,2,2.35,2,4v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C12,2.35,10.65,1,9,1L9,1z" />
+</svg>
--- a/Show more
+++ b/Show more