From 639a24d8ad183135b779426decf66318e0cd1139 Mon Sep 17 00:00:00 2001
From: Andre Roelofs <p.arroelofs@gmail.com>
Date: Sun, 26 Mar 2023 01:39:38 +0100
Subject: [PATCH] Replace TS relative @ import path (#1087)

Migrated the import shortcut used in Svelte from @ to @graphite for better future package compatibility

Co-authored-by: Andre Roelofs <andreroelofsai@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
---
 frontend/.eslintrc.js                         |   2 +-
 frontend/src/App.svelte                       |   4 +-
 frontend/src/components/Editor.svelte         |  34 +--
 .../floating-menus/ColorPicker.svelte         |  26 +-
 .../floating-menus/DialogModal.svelte         |  14 +-
 .../floating-menus/EyedropperPreview.svelte   |   2 +-
 .../components/floating-menus/MenuList.svelte |  16 +-
 .../src/components/layout/FloatingMenu.svelte |   2 +-
 .../src/components/panels/Document.svelte     |  22 +-
 .../src/components/panels/LayerTree.svelte    |  18 +-
 .../src/components/panels/NodeGraph.svelte    |  22 +-
 .../src/components/panels/Properties.svelte   |  10 +-
 .../components/widgets/WidgetLayout.svelte    |   6 +-
 .../src/components/widgets/WidgetRow.svelte   |  50 ++--
 .../widgets/assists/PivotAssist.svelte        |   2 +-
 .../buttons/BreadcrumbTrailButtons.svelte     |   4 +-
 .../widgets/buttons/IconButton.svelte         |   4 +-
 .../buttons/ParameterExposeButton.svelte      |   2 +-
 .../widgets/buttons/PopoverButton.svelte      |   8 +-
 .../widgets/buttons/TextButton.svelte         |   6 +-
 .../widgets/groups/WidgetSection.svelte       |  10 +-
 .../widgets/inputs/CheckboxInput.svelte       |   6 +-
 .../widgets/inputs/ColorInput.svelte          |   8 +-
 .../widgets/inputs/DropdownInput.svelte       |  10 +-
 .../widgets/inputs/FieldInput.svelte          |   4 +-
 .../widgets/inputs/FontInput.svelte           |  12 +-
 .../widgets/inputs/LayerReferenceInput.svelte |  14 +-
 .../widgets/inputs/MenuBarInput.svelte        |  12 +-
 .../widgets/inputs/NumberInput.svelte         |   4 +-
 .../widgets/inputs/OptionalInput.svelte       |   6 +-
 .../widgets/inputs/RadioInput.svelte          |   8 +-
 .../widgets/inputs/SwatchPairInput.svelte     |  10 +-
 .../widgets/inputs/TextAreaInput.svelte       |   2 +-
 .../widgets/inputs/TextInput.svelte           |   2 +-
 .../widgets/labels/IconLabel.svelte           |   4 +-
 .../widgets/labels/Separator.svelte           |   2 +-
 .../widgets/labels/UserInputLabel.svelte      |  16 +-
 .../src/components/window/MainWindow.svelte   |   8 +-
 .../window/status-bar/StatusBar.svelte        |  12 +-
 .../window/title-bar/TitleBar.svelte          |  14 +-
 .../window/title-bar/WindowButtonsMac.svelte  |   2 +-
 .../window/title-bar/WindowButtonsWeb.svelte  |   8 +-
 .../title-bar/WindowButtonsWindows.svelte     |   4 +-
 .../window/title-bar/WindowTitle.svelte       |   4 +-
 .../components/window/workspace/Panel.svelte  |  30 +--
 .../window/workspace/Workspace.svelte         |  18 +-
 frontend/src/io-managers/clipboard.ts         |   4 +-
 frontend/src/io-managers/hyperlinks.ts        |   4 +-
 frontend/src/io-managers/input.ts             |  18 +-
 frontend/src/io-managers/localization.ts      |   4 +-
 frontend/src/io-managers/panic.ts             |  16 +-
 frontend/src/io-managers/persistence.ts       |   6 +-
 frontend/src/main.ts                          |   2 +-
 frontend/src/state-providers/dialog.ts        |   6 +-
 frontend/src/state-providers/document.ts      |   4 +-
 frontend/src/state-providers/fonts.ts         |   4 +-
 frontend/src/state-providers/fullscreen.ts    |   2 +-
 frontend/src/state-providers/node-graph.ts    |   4 +-
 frontend/src/state-providers/portfolio.ts     |  10 +-
 frontend/src/state-providers/workspace.ts     |   4 +-
 frontend/src/utility-functions/icons.ts       | 248 +++++++++---------
 frontend/src/utility-functions/imaginate.ts   |  12 +-
 .../src/utility-functions/rasterization.ts    |   2 +-
 frontend/src/wasm-communication/editor.ts     |  10 +-
 frontend/src/wasm-communication/messages.ts   |   6 +-
 .../wasm-communication/subscription-router.ts |   4 +-
 frontend/tsconfig.json                        |   2 +-
 frontend/wasm/src/editor_api.rs               |   2 +-
 frontend/webpack.config.ts                    |   2 +-
 website/.eslintrc.js                          |   2 +-
 website/other/bezier-rs-demos/.eslintrc.js    |   2 +-
 .../src/components/BezierDemo.ts              |  10 +-
 .../src/components/BezierDemoPane.ts          |   6 +-
 .../src/components/SubpathDemo.ts             |  10 +-
 .../src/components/SubpathDemoPane.ts         |   6 +-
 .../src/features/bezier-features.ts           |   6 +-
 .../src/features/subpath-features.ts          |   4 +-
 website/other/bezier-rs-demos/src/main.ts     |  14 +-
 .../bezier-rs-demos/src/utils/options.ts      |   2 +-
 .../other/bezier-rs-demos/src/utils/render.ts |   2 +-
 .../other/bezier-rs-demos/src/utils/types.ts  |   2 +-
 website/other/bezier-rs-demos/tsconfig.json   |   2 +-
 website/other/bezier-rs-demos/vue.config.js   |   2 +-
 83 files changed, 465 insertions(+), 465 deletions(-)

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 1232f3a8..35c9d136 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -48,7 +48,7 @@ module.exports = {
 		"no-bitwise": "off",
 		"no-shadow": "off",
 		"no-use-before-define": "off",
-		"no-restricted-imports": ["error", { patterns: [".*", "!@/*"] }],
+		"no-restricted-imports": ["error", { patterns: [".*", "!@graphite/*"] }],
 
 		// TypeScript plugin config
 		"@typescript-eslint/indent": "off",
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 864f43ae..87899324 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";
 
-	import { initWasm, createEditor } from "@/wasm-communication/editor";
+	import { initWasm, createEditor } from "@graphite/wasm-communication/editor";
 
-	import Editor from "@/components/Editor.svelte";
+	import Editor from "@graphite/components/Editor.svelte";
 
 	let editor: ReturnType<typeof createEditor> | undefined = undefined;
 
diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
index 88976e47..19da1b30 100644
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
 	import { onMount, onDestroy, setContext } from "svelte";
 
-	import type { createEditor } from "@/wasm-communication/editor";
-	import { operatingSystem } from "@/utility-functions/platform";
-	import { createClipboardManager } from "@/io-managers/clipboard";
-	import { createDragManager } from "@/io-managers/drag";
-	import { createHyperlinkManager } from "@/io-managers/hyperlinks";
-	import { createInputManager } from "@/io-managers/input";
-	import { createLocalizationManager } from "@/io-managers/localization";
-	import { createPanicManager } from "@/io-managers/panic";
-	import { createPersistenceManager } from "@/io-managers/persistence";
-	import { createDialogState } from "@/state-providers/dialog";
-	import { createDocumentState } from "@/state-providers/document";
-	import { createFontsState } from "@/state-providers/fonts";
-	import { createFullscreenState } from "@/state-providers/fullscreen";
-	import { createNodeGraphState } from "@/state-providers/node-graph";
-	import { createPortfolioState } from "@/state-providers/portfolio";
-	import { createWorkspaceState } from "@/state-providers/workspace";
+	import type { createEditor } from "@graphite/wasm-communication/editor";
+	import { operatingSystem } from "@graphite/utility-functions/platform";
+	import { createClipboardManager } from "@graphite/io-managers/clipboard";
+	import { createDragManager } from "@graphite/io-managers/drag";
+	import { createHyperlinkManager } from "@graphite/io-managers/hyperlinks";
+	import { createInputManager } from "@graphite/io-managers/input";
+	import { createLocalizationManager } from "@graphite/io-managers/localization";
+	import { createPanicManager } from "@graphite/io-managers/panic";
+	import { createPersistenceManager } from "@graphite/io-managers/persistence";
+	import { createDialogState } from "@graphite/state-providers/dialog";
+	import { createDocumentState } from "@graphite/state-providers/document";
+	import { createFontsState } from "@graphite/state-providers/fonts";
+	import { createFullscreenState } from "@graphite/state-providers/fullscreen";
+	import { createNodeGraphState } from "@graphite/state-providers/node-graph";
+	import { createPortfolioState } from "@graphite/state-providers/portfolio";
+	import { createWorkspaceState } from "@graphite/state-providers/workspace";
 
-	import MainWindow from "@/components/window/MainWindow.svelte";
+	import MainWindow from "@graphite/components/window/MainWindow.svelte";
 
 	// Graphite WASM editor instance
 	export let editor: ReturnType<typeof createEditor>;
diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte
index c08ccb6f..bfb1731b 100644
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
 	import { onDestroy, createEventDispatcher, getContext } from "svelte";
 
-	import { clamp } from "@/utility-functions/math";
-	import { type HSV, type RGB } from "@/wasm-communication/messages";
-	import { Color } from "@/wasm-communication/messages";
+	import { clamp } from "@graphite/utility-functions/math";
+	import { type HSV, type RGB } from "@graphite/wasm-communication/messages";
+	import { Color } from "@graphite/wasm-communication/messages";
 
-	import FloatingMenu, { type MenuDirection } from "@/components/layout/FloatingMenu.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
-	import DropdownInput from "@/components/widgets/inputs/DropdownInput.svelte";
-	import NumberInput from "@/components/widgets/inputs/NumberInput.svelte";
-	import TextInput from "@/components/widgets/inputs/TextInput.svelte";
-	import Separator from "@/components/widgets/labels/Separator.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import FloatingMenu, { type MenuDirection } from "@graphite/components/layout/FloatingMenu.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
+	import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte";
+	import NumberInput from "@graphite/components/widgets/inputs/NumberInput.svelte";
+	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	type PresetColors = "none" | "black" | "white" | "red" | "yellow" | "green" | "cyan" | "blue" | "magenta";
 
diff --git a/frontend/src/components/floating-menus/DialogModal.svelte b/frontend/src/components/floating-menus/DialogModal.svelte
index a0e2790c..29e2aedc 100644
--- a/frontend/src/components/floating-menus/DialogModal.svelte
+++ b/frontend/src/components/floating-menus/DialogModal.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
 
-	import FloatingMenu from "@/components/layout/FloatingMenu.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
-	import type { DialogState } from "@/state-providers/dialog";
+	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+	import type { DialogState } from "@graphite/state-providers/dialog";
 
 	const dialog = getContext<DialogState>("dialog");
 
diff --git a/frontend/src/components/floating-menus/EyedropperPreview.svelte b/frontend/src/components/floating-menus/EyedropperPreview.svelte
index 9c666526..7c2d7211 100644
--- a/frontend/src/components/floating-menus/EyedropperPreview.svelte
+++ b/frontend/src/components/floating-menus/EyedropperPreview.svelte
@@ -10,7 +10,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 
-	import FloatingMenu from "@/components/layout/FloatingMenu.svelte";
+	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 
 	const temporaryCanvas = document.createElement("canvas");
 	temporaryCanvas.width = ZOOM_WINDOW_DIMENSIONS;
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 2d106039..387d0cf2 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -3,15 +3,15 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import type { MenuListEntry } from "@/wasm-communication/messages";
+	import type { MenuListEntry } from "@graphite/wasm-communication/messages";
 
-	import FloatingMenu, { type MenuDirection } from "@/components/layout/FloatingMenu.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import Separator from "@/components/widgets/labels/Separator.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
-	import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
+	import FloatingMenu, { type MenuDirection } from "@graphite/components/layout/FloatingMenu.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
 
 	let self: FloatingMenu | undefined;
 	let scroller: LayoutCol | undefined;
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index 506b3a65..cb04e30d 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -6,7 +6,7 @@
 <script lang="ts">
 	import { afterUpdate, createEventDispatcher, tick } from "svelte";
 
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 
 	const POINTER_STRAY_DISTANCE = 100;
 
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 87a8ac17..3a12e02c 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, tick } from "svelte";
 
-	import { textInputCleanup } from "@/utility-functions/keyboard-entry";
-	import { extractPixelData, rasterizeSVGCanvas } from "@/utility-functions/rasterization";
+	import { textInputCleanup } from "@graphite/utility-functions/keyboard-entry";
+	import { extractPixelData, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
 	import {
 		type MouseCursorIcon,
 		type XY,
@@ -17,16 +17,16 @@
 		UpdateDocumentScrollbars,
 		UpdateEyedropperSamplingState,
 		UpdateMouseCursor,
-	} from "@/wasm-communication/messages";
+	} from "@graphite/wasm-communication/messages";
 
-	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@/components/floating-menus/EyedropperPreview.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import CanvasRuler from "@/components/widgets/metrics/CanvasRuler.svelte";
-	import PersistentScrollbar from "@/components/widgets/metrics/PersistentScrollbar.svelte";
-	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
-	import type { DocumentState } from "@/state-providers/document";
+	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import CanvasRuler from "@graphite/components/widgets/metrics/CanvasRuler.svelte";
+	import PersistentScrollbar from "@graphite/components/widgets/metrics/PersistentScrollbar.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+	import type { Editor } from "@graphite/wasm-communication/editor";
+	import type { DocumentState } from "@graphite/state-providers/document";
 
 	let rulerHorizontal: CanvasRuler | undefined;
 	let rulerVertical: CanvasRuler | undefined;
diff --git a/frontend/src/components/panels/LayerTree.svelte b/frontend/src/components/panels/LayerTree.svelte
index d81a7c74..d73ef7da 100644
--- a/frontend/src/components/panels/LayerTree.svelte
+++ b/frontend/src/components/panels/LayerTree.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, tick } from "svelte";
 
-	import { beginDraggingElement } from "@/io-managers/drag";
-	import { platformIsMac } from "@/utility-functions/platform";
+	import { beginDraggingElement } from "@graphite/io-managers/drag";
+	import { platformIsMac } from "@graphite/utility-functions/platform";
 	import {
 		type LayerType,
 		type LayerTypeData,
@@ -13,14 +13,14 @@
 		UpdateDocumentLayerTreeStructureJs,
 		UpdateLayerTreeOptionsLayout,
 		layerTypeData,
-	} from "@/wasm-communication/messages";
+	} from "@graphite/wasm-communication/messages";
 
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	type LayerListingInfo = {
 		folderIndex: number;
diff --git a/frontend/src/components/panels/NodeGraph.svelte b/frontend/src/components/panels/NodeGraph.svelte
index dc64e9ca..df2a2305 100644
--- a/frontend/src/components/panels/NodeGraph.svelte
+++ b/frontend/src/components/panels/NodeGraph.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
 	import { getContext, onMount, tick } from "svelte";
 
-	import type { IconName } from "@/utility-functions/icons";
+	import type { IconName } from "@graphite/utility-functions/icons";
 
-	import { UpdateNodeGraphSelection, type FrontendNodeLink, type FrontendNodeType, type FrontendNode } from "@/wasm-communication/messages";
+	import { UpdateNodeGraphSelection, type FrontendNodeLink, type FrontendNodeType, type FrontendNode } from "@graphite/wasm-communication/messages";
 
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
-	import TextInput from "@/components/widgets/inputs/TextInput.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
-	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
-	import type { NodeGraphState } from "@/state-providers/node-graph";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
+	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+	import type { Editor } from "@graphite/wasm-communication/editor";
+	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 
 	const WHEEL_RATE = (1 / 600) * 3;
 	const GRID_COLLAPSE_SPACING = 10;
diff --git a/frontend/src/components/panels/Properties.svelte b/frontend/src/components/panels/Properties.svelte
index 40ade163..2572c2c6 100644
--- a/frontend/src/components/panels/Properties.svelte
+++ b/frontend/src/components/panels/Properties.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
 
-	import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@/wasm-communication/messages";
+	import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@graphite/wasm-communication/messages";
 
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	const editor = getContext<Editor>("editor");
 
diff --git a/frontend/src/components/widgets/WidgetLayout.svelte b/frontend/src/components/widgets/WidgetLayout.svelte
index a8a9e775..dcd265ed 100644
--- a/frontend/src/components/widgets/WidgetLayout.svelte
+++ b/frontend/src/components/widgets/WidgetLayout.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { isWidgetColumn, isWidgetRow, isWidgetSection, type WidgetLayout } from "@/wasm-communication/messages";
+	import { isWidgetColumn, isWidgetRow, isWidgetSection, type WidgetLayout } from "@graphite/wasm-communication/messages";
 
-	import WidgetSection from "@/components/widgets/groups/WidgetSection.svelte";
-	import WidgetRow from "@/components/widgets/WidgetRow.svelte";
+	import WidgetSection from "@graphite/components/widgets/groups/WidgetSection.svelte";
+	import WidgetRow from "@graphite/components/widgets/WidgetRow.svelte";
 
 	export let layout: WidgetLayout;
 	let className = "";
diff --git a/frontend/src/components/widgets/WidgetRow.svelte b/frontend/src/components/widgets/WidgetRow.svelte
index 1fc7331b..fee34b47 100644
--- a/frontend/src/components/widgets/WidgetRow.svelte
+++ b/frontend/src/components/widgets/WidgetRow.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-	import { debouncer } from "@/utility-functions/debounce";
-	import type { Widget } from "@/wasm-communication/messages";
-	import { narrowWidgetProps } from "@/wasm-communication/messages";
-	import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@/wasm-communication/messages";
+	import { debouncer } from "@graphite/utility-functions/debounce";
+	import type { Widget } from "@graphite/wasm-communication/messages";
+	import { narrowWidgetProps } from "@graphite/wasm-communication/messages";
+	import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@graphite/wasm-communication/messages";
 
-	import PivotAssist from "@/components/widgets/assists/PivotAssist.svelte";
-	import BreadcrumbTrailButtons from "@/components/widgets/buttons/BreadcrumbTrailButtons.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
-	import ParameterExposeButton from "@/components/widgets/buttons/ParameterExposeButton.svelte";
-	import PopoverButton from "@/components/widgets/buttons/PopoverButton.svelte";
-	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
-	import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.svelte";
-	import ColorInput from "@/components/widgets/inputs/ColorInput.svelte";
-	import DropdownInput from "@/components/widgets/inputs/DropdownInput.svelte";
-	import FontInput from "@/components/widgets/inputs/FontInput.svelte";
-	import LayerReferenceInput from "@/components/widgets/inputs/LayerReferenceInput.svelte";
-	import NumberInput from "@/components/widgets/inputs/NumberInput.svelte";
-	import OptionalInput from "@/components/widgets/inputs/OptionalInput.svelte";
-	import RadioInput from "@/components/widgets/inputs/RadioInput.svelte";
-	import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.svelte";
-	import TextAreaInput from "@/components/widgets/inputs/TextAreaInput.svelte";
-	import TextInput from "@/components/widgets/inputs/TextInput.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import Separator from "@/components/widgets/labels/Separator.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import PivotAssist from "@graphite/components/widgets/assists/PivotAssist.svelte";
+	import BreadcrumbTrailButtons from "@graphite/components/widgets/buttons/BreadcrumbTrailButtons.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
+	import ParameterExposeButton from "@graphite/components/widgets/buttons/ParameterExposeButton.svelte";
+	import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte";
+	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
+	import CheckboxInput from "@graphite/components/widgets/inputs/CheckboxInput.svelte";
+	import ColorInput from "@graphite/components/widgets/inputs/ColorInput.svelte";
+	import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte";
+	import FontInput from "@graphite/components/widgets/inputs/FontInput.svelte";
+	import LayerReferenceInput from "@graphite/components/widgets/inputs/LayerReferenceInput.svelte";
+	import NumberInput from "@graphite/components/widgets/inputs/NumberInput.svelte";
+	import OptionalInput from "@graphite/components/widgets/inputs/OptionalInput.svelte";
+	import RadioInput from "@graphite/components/widgets/inputs/RadioInput.svelte";
+	import SwatchPairInput from "@graphite/components/widgets/inputs/SwatchPairInput.svelte";
+	import TextAreaInput from "@graphite/components/widgets/inputs/TextAreaInput.svelte";
+	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import { getContext } from "svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	const SUFFIX_WIDGETS = ["PopoverButton"];
 
diff --git a/frontend/src/components/widgets/assists/PivotAssist.svelte b/frontend/src/components/widgets/assists/PivotAssist.svelte
index da8616f5..621b5108 100644
--- a/frontend/src/components/widgets/assists/PivotAssist.svelte
+++ b/frontend/src/components/widgets/assists/PivotAssist.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import type { PivotPosition } from "@/wasm-communication/messages";
+	import type { PivotPosition } from "@graphite/wasm-communication/messages";
 
 	// emits: ["update:position"],
 	const dispatch = createEventDispatcher<{ position: PivotPosition }>();
diff --git a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
index 3e6b1468..47a2bc6d 100644
--- a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
+++ b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 
 	export let labels: string[];
 	export let disabled = false;
diff --git a/frontend/src/components/widgets/buttons/IconButton.svelte b/frontend/src/components/widgets/buttons/IconButton.svelte
index 37cb0ccb..f3321881 100644
--- a/frontend/src/components/widgets/buttons/IconButton.svelte
+++ b/frontend/src/components/widgets/buttons/IconButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { type IconName, type IconSize } from "@/utility-functions/icons";
+	import { type IconName, type IconSize } from "@graphite/utility-functions/icons";
 
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
 	export let icon: IconName;
 	export let size: IconSize;
diff --git a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
index 7d50236c..68a54988 100644
--- a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
+++ b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
 	export let exposed: boolean;
 	export let dataType: string;
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.svelte b/frontend/src/components/widgets/buttons/PopoverButton.svelte
index d8eb49d2..155de8ab 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.svelte
+++ b/frontend/src/components/widgets/buttons/PopoverButton.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { IconName } from "@/utility-functions/icons";
+	import type { IconName } from "@graphite/utility-functions/icons";
 
-	import FloatingMenu from "@/components/layout/FloatingMenu.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
+	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 
 	export let icon: IconName = "DropdownArrow";
 	export let tooltip: string | undefined = undefined;
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index 8f14cc2b..d776466b 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { IconName } from "@/utility-functions/icons";
+	import type { IconName } from "@graphite/utility-functions/icons";
 
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
 	export let label: string;
 	export let icon: IconName | undefined = undefined;
diff --git a/frontend/src/components/widgets/groups/WidgetSection.svelte b/frontend/src/components/widgets/groups/WidgetSection.svelte
index 8579a2ce..d051f7dc 100644
--- a/frontend/src/components/widgets/groups/WidgetSection.svelte
+++ b/frontend/src/components/widgets/groups/WidgetSection.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { isWidgetRow, isWidgetSection, type LayoutGroup, type WidgetSection as WidgetSectionFromJsMessages } from "@/wasm-communication/messages";
+	import { isWidgetRow, isWidgetSection, type LayoutGroup, type WidgetSection as WidgetSectionFromJsMessages } from "@graphite/wasm-communication/messages";
 
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
-	import WidgetRow from "@/components/widgets/WidgetRow.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import WidgetRow from "@graphite/components/widgets/WidgetRow.svelte";
 	import { getContext } from "svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	const editor = getContext<Editor>("editor");
 
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.svelte b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
index 1535a5e3..d7be3bc3 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.svelte
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import type { IconName } from "@/utility-functions/icons";
+	import type { IconName } from "@graphite/utility-functions/icons";
 
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
 	// emits: ["update:checked"],
 	const dispatch = createEventDispatcher<{ checked: boolean }>();
diff --git a/frontend/src/components/widgets/inputs/ColorInput.svelte b/frontend/src/components/widgets/inputs/ColorInput.svelte
index e99e6472..df9b860e 100644
--- a/frontend/src/components/widgets/inputs/ColorInput.svelte
+++ b/frontend/src/components/widgets/inputs/ColorInput.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import type { Color } from "@/wasm-communication/messages";
+	import type { Color } from "@graphite/wasm-communication/messages";
 
-	import ColorPicker from "@/components/floating-menus/ColorPicker.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
 	// emits: ["update:value"],
 	const dispatch = createEventDispatcher<{ value: Color }>();
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index c81f1634..de069b89 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import type { MenuListEntry } from "@/wasm-communication/messages";
+	import type { MenuListEntry } from "@graphite/wasm-communication/messages";
 
-	import MenuList from "@/components/floating-menus/MenuList.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
 	const DASH_ENTRY = { label: "-" };
 
diff --git a/frontend/src/components/widgets/inputs/FieldInput.svelte b/frontend/src/components/widgets/inputs/FieldInput.svelte
index 4993e5db..cf1d09d0 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.svelte
+++ b/frontend/src/components/widgets/inputs/FieldInput.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import { platformIsMac } from "@/utility-functions/platform";
+	import { platformIsMac } from "@graphite/utility-functions/platform";
 
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
 	// emits: ["update:value", "textFocused", "textChanged", "cancelTextChange"],
 	const dispatch = createEventDispatcher<{
diff --git a/frontend/src/components/widgets/inputs/FontInput.svelte b/frontend/src/components/widgets/inputs/FontInput.svelte
index 031c66b1..c65255b1 100644
--- a/frontend/src/components/widgets/inputs/FontInput.svelte
+++ b/frontend/src/components/widgets/inputs/FontInput.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext, onMount, tick } from "svelte";
 
-	import type { MenuListEntry } from "@/wasm-communication/messages";
+	import type { MenuListEntry } from "@graphite/wasm-communication/messages";
 
-	import MenuList from "@/components/floating-menus/MenuList.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
-	import type { FontsState } from "@/state-providers/fonts";
+	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import type { FontsState } from "@graphite/state-providers/fonts";
 
 	const fonts = getContext<FontsState>("fonts");
 
diff --git a/frontend/src/components/widgets/inputs/LayerReferenceInput.svelte b/frontend/src/components/widgets/inputs/LayerReferenceInput.svelte
index 7cec91c0..d8e3c3b1 100644
--- a/frontend/src/components/widgets/inputs/LayerReferenceInput.svelte
+++ b/frontend/src/components/widgets/inputs/LayerReferenceInput.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import { currentDraggingElement } from "@/io-managers/drag";
+	import { currentDraggingElement } from "@graphite/io-managers/drag";
 
-	import type { LayerType, LayerTypeData } from "@/wasm-communication/messages";
-	import { layerTypeData } from "@/wasm-communication/messages";
+	import type { LayerType, LayerTypeData } from "@graphite/wasm-communication/messages";
+	import { layerTypeData } from "@graphite/wasm-communication/messages";
 
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
 	// emits: ["update:value"],
 	const dispatch = createEventDispatcher<{ value: string | undefined }>();
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.svelte b/frontend/src/components/widgets/inputs/MenuBarInput.svelte
index db24890a..e822a541 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.svelte
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
 
-	import { platformIsMac } from "@/utility-functions/platform";
-	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@/wasm-communication/messages";
+	import { platformIsMac } from "@graphite/utility-functions/platform";
+	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/wasm-communication/messages";
 
-	import MenuList from "@/components/floating-menus/MenuList.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	// TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should take advantage of
 	const accelKey = platformIsMac() ? "Command" : "Control";
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index 6e68355b..2b840720 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import { type NumberInputMode, type NumberInputIncrementBehavior } from "@/wasm-communication/messages";
+	import { type NumberInputMode, type NumberInputIncrementBehavior } from "@graphite/wasm-communication/messages";
 
-	import FieldInput from "@/components/widgets/inputs/FieldInput.svelte";
+	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
 
 	// emits: ["update:value"],
 	const dispatch = createEventDispatcher<{ value: number | undefined }>();
diff --git a/frontend/src/components/widgets/inputs/OptionalInput.svelte b/frontend/src/components/widgets/inputs/OptionalInput.svelte
index 785a66dc..0c3e4622 100644
--- a/frontend/src/components/widgets/inputs/OptionalInput.svelte
+++ b/frontend/src/components/widgets/inputs/OptionalInput.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { IconName } from "@/utility-functions/icons";
+	import type { IconName } from "@graphite/utility-functions/icons";
 
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import CheckboxInput from "@graphite/components/widgets/inputs/CheckboxInput.svelte";
 
 	export let checked: boolean;
 	export let disabled = false;
diff --git a/frontend/src/components/widgets/inputs/RadioInput.svelte b/frontend/src/components/widgets/inputs/RadioInput.svelte
index 41090382..136a2388 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.svelte
+++ b/frontend/src/components/widgets/inputs/RadioInput.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import { type RadioEntries, type RadioEntryData } from "@/wasm-communication/messages";
+	import { type RadioEntries, type RadioEntryData } from "@graphite/wasm-communication/messages";
 
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
 	// emits: ["update:selectedIndex"],
 	const dispatch = createEventDispatcher<{ selectedIndex: number }>();
diff --git a/frontend/src/components/widgets/inputs/SwatchPairInput.svelte b/frontend/src/components/widgets/inputs/SwatchPairInput.svelte
index 4c88f100..504a7061 100644
--- a/frontend/src/components/widgets/inputs/SwatchPairInput.svelte
+++ b/frontend/src/components/widgets/inputs/SwatchPairInput.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { getContext } from "svelte";
 
-	import type { Color } from "@/wasm-communication/messages";
+	import type { Color } from "@graphite/wasm-communication/messages";
 
-	import ColorPicker from "@/components/floating-menus/ColorPicker.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	const editor = getContext<Editor>("editor");
 
diff --git a/frontend/src/components/widgets/inputs/TextAreaInput.svelte b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
index 01a61e1a..5b4038c8 100644
--- a/frontend/src/components/widgets/inputs/TextAreaInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import FieldInput from "@/components/widgets/inputs/FieldInput.svelte";
+	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
 
 	// emits: ["update:value", "commitText"],
 	const dispatch = createEventDispatcher<{ commitText: string }>();
diff --git a/frontend/src/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index 745c1bab..5429bb8e 100644
--- a/frontend/src/components/widgets/inputs/TextInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import FieldInput from "@/components/widgets/inputs/FieldInput.svelte";
+	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
 
 	// emits: ["update:value", "commitText"],
 	const dispatch = createEventDispatcher<{ commitText: string }>();
diff --git a/frontend/src/components/widgets/labels/IconLabel.svelte b/frontend/src/components/widgets/labels/IconLabel.svelte
index 53341bf2..ca999925 100644
--- a/frontend/src/components/widgets/labels/IconLabel.svelte
+++ b/frontend/src/components/widgets/labels/IconLabel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { type IconName, ICONS, ICON_SVG_STRINGS } from "@/utility-functions/icons";
+	import { type IconName, ICONS, ICON_SVG_STRINGS } from "@graphite/utility-functions/icons";
 
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
 	let className = "";
 	export { className as class };
diff --git a/frontend/src/components/widgets/labels/Separator.svelte b/frontend/src/components/widgets/labels/Separator.svelte
index 37da961f..29392e13 100644
--- a/frontend/src/components/widgets/labels/Separator.svelte
+++ b/frontend/src/components/widgets/labels/Separator.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type SeparatorDirection, type SeparatorType } from "@/wasm-communication/messages";
+	import { type SeparatorDirection, type SeparatorType } from "@graphite/wasm-communication/messages";
 
 	export let direction: SeparatorDirection = "Horizontal";
 	export let type: SeparatorType = "Unrelated";
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.svelte b/frontend/src/components/widgets/labels/UserInputLabel.svelte
index f359d523..4a94fb4d 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.svelte
+++ b/frontend/src/components/widgets/labels/UserInputLabel.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import type { IconName } from "@/utility-functions/icons";
-	import { platformIsMac } from "@/utility-functions/platform";
-	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@/wasm-communication/messages";
+	import type { IconName } from "@graphite/utility-functions/icons";
+	import { platformIsMac } from "@graphite/utility-functions/platform";
+	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@graphite/wasm-communication/messages";
 
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import Separator from "@/components/widgets/labels/Separator.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import { getContext } from "svelte";
-	import type { FullscreenState } from "@/state-providers/fullscreen";
+	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
 
 	type LabelData = { label?: string; icon?: IconName; width: string };
 
diff --git a/frontend/src/components/window/MainWindow.svelte b/frontend/src/components/window/MainWindow.svelte
index 0de023bc..971f571c 100644
--- a/frontend/src/components/window/MainWindow.svelte
+++ b/frontend/src/components/window/MainWindow.svelte
@@ -3,10 +3,10 @@
 </script>
 
 <script lang="ts">
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import StatusBar from "@/components/window/status-bar/StatusBar.svelte";
-	import TitleBar from "@/components/window/title-bar/TitleBar.svelte";
-	import Workspace from "@/components/window/workspace/Workspace.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import StatusBar from "@graphite/components/window/status-bar/StatusBar.svelte";
+	import TitleBar from "@graphite/components/window/title-bar/TitleBar.svelte";
+	import Workspace from "@graphite/components/window/workspace/Workspace.svelte";
 
 	let platform: ApplicationPlatform = "Web";
 	let maximized: true;
diff --git a/frontend/src/components/window/status-bar/StatusBar.svelte b/frontend/src/components/window/status-bar/StatusBar.svelte
index 9eda0d3f..ddc0b78d 100644
--- a/frontend/src/components/window/status-bar/StatusBar.svelte
+++ b/frontend/src/components/window/status-bar/StatusBar.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
 
-	import { platformIsMac } from "@/utility-functions/platform";
-	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
+	import { platformIsMac } from "@graphite/utility-functions/platform";
+	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/wasm-communication/messages";
 
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import Separator from "@/components/widgets/labels/Separator.svelte";
-	import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
+	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	const editor = getContext<Editor>("editor");
 
diff --git a/frontend/src/components/window/title-bar/TitleBar.svelte b/frontend/src/components/window/title-bar/TitleBar.svelte
index b1f51437..958cce8c 100644
--- a/frontend/src/components/window/title-bar/TitleBar.svelte
+++ b/frontend/src/components/window/title-bar/TitleBar.svelte
@@ -3,13 +3,13 @@
 </script>
 
 <script lang="ts">
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.svelte";
-	import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.svelte";
-	import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.svelte";
-	import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.svelte";
-	import WindowTitle from "@/components/window/title-bar/WindowTitle.svelte";
-	import type { PortfolioState } from "@/state-providers/portfolio";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import MenuBarInput from "@graphite/components/widgets/inputs/MenuBarInput.svelte";
+	import WindowButtonsMac from "@graphite/components/window/title-bar/WindowButtonsMac.svelte";
+	import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
+	import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
+	import WindowTitle from "@graphite/components/window/title-bar/WindowTitle.svelte";
+	import type { PortfolioState } from "@graphite/state-providers/portfolio";
 	import { getContext } from "svelte";
 
 	export let platform: Platform;
diff --git a/frontend/src/components/window/title-bar/WindowButtonsMac.svelte b/frontend/src/components/window/title-bar/WindowButtonsMac.svelte
index 72f95418..07e11333 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsMac.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsMac.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
 	export let maximized = false;
 </script>
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte b/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
index b0450cc9..939becdd 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { getContext } from "svelte";
 
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
-	import type { FullscreenState } from "@/state-providers/fullscreen";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
 
 	const fullscreen = getContext<FullscreenState>("fullscreen");
 
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte b/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
index ee9cfa6c..267e9858 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
 	export let maximized = false;
 </script>
diff --git a/frontend/src/components/window/title-bar/WindowTitle.svelte b/frontend/src/components/window/title-bar/WindowTitle.svelte
index ee6be586..f0af261c 100644
--- a/frontend/src/components/window/title-bar/WindowTitle.svelte
+++ b/frontend/src/components/window/title-bar/WindowTitle.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
 	export let text: string;
 </script>
diff --git a/frontend/src/components/window/workspace/Panel.svelte b/frontend/src/components/window/workspace/Panel.svelte
index 21cd98b5..7bd17122 100644
--- a/frontend/src/components/window/workspace/Panel.svelte
+++ b/frontend/src/components/window/workspace/Panel.svelte
@@ -1,11 +1,11 @@
 <script lang="ts" context="module">
-	import Document from "@/components/panels/Document.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
-	import LayerTree from "@/components/panels/LayerTree.svelte";
-	import NodeGraph from "@/components/panels/NodeGraph.svelte";
-	import PopoverButton from "@/components/widgets/buttons/PopoverButton.svelte";
-	import Properties from "@/components/panels/Properties.svelte";
-	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
+	import Document from "@graphite/components/panels/Document.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
+	import LayerTree from "@graphite/components/panels/LayerTree.svelte";
+	import NodeGraph from "@graphite/components/panels/NodeGraph.svelte";
+	import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte";
+	import Properties from "@graphite/components/panels/Properties.svelte";
+	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 
 	const PANEL_COMPONENTS = {
 		Document,
@@ -19,16 +19,16 @@
 <script lang="ts">
 	import { getContext, tick } from "svelte";
 
-	import { platformIsMac, isEventSupported } from "@/utility-functions/platform";
+	import { platformIsMac, isEventSupported } from "@graphite/utility-functions/platform";
 
-	import { type LayoutKeysGroup, type Key } from "@/wasm-communication/messages";
+	import { type LayoutKeysGroup, type Key } from "@graphite/wasm-communication/messages";
 
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
-	import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	const editor = getContext<Editor>("editor");
 
diff --git a/frontend/src/components/window/workspace/Workspace.svelte b/frontend/src/components/window/workspace/Workspace.svelte
index de078029..5578a197 100644
--- a/frontend/src/components/window/workspace/Workspace.svelte
+++ b/frontend/src/components/window/workspace/Workspace.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import DialogModal from "@/components/floating-menus/DialogModal.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
-	import Panel from "@/components/window/workspace/Panel.svelte";
+	import DialogModal from "@graphite/components/floating-menus/DialogModal.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import Panel from "@graphite/components/window/workspace/Panel.svelte";
 	import { getContext } from "svelte";
-	import type { Editor } from "@/wasm-communication/editor";
-	import type { WorkspaceState } from "@/state-providers/workspace";
-	import type { PortfolioState } from "@/state-providers/portfolio";
-	import type { DialogState } from "@/state-providers/dialog";
-	import type { FrontendDocumentDetails } from "@/wasm-communication/messages";
+	import type { Editor } from "@graphite/wasm-communication/editor";
+	import type { WorkspaceState } from "@graphite/state-providers/workspace";
+	import type { PortfolioState } from "@graphite/state-providers/portfolio";
+	import type { DialogState } from "@graphite/state-providers/dialog";
+	import type { FrontendDocumentDetails } from "@graphite/wasm-communication/messages";
 
 	const MIN_PANEL_SIZE = 100;
 	const PANEL_SIZES = {
diff --git a/frontend/src/io-managers/clipboard.ts b/frontend/src/io-managers/clipboard.ts
index 10fdd609..1d94d30e 100644
--- a/frontend/src/io-managers/clipboard.ts
+++ b/frontend/src/io-managers/clipboard.ts
@@ -1,5 +1,5 @@
-import { type Editor } from "@/wasm-communication/editor";
-import { TriggerTextCopy } from "@/wasm-communication/messages";
+import { type Editor } from "@graphite/wasm-communication/editor";
+import { TriggerTextCopy } from "@graphite/wasm-communication/messages";
 
 export function createClipboardManager(editor: Editor): void {
 	// Subscribe to process backend event
diff --git a/frontend/src/io-managers/hyperlinks.ts b/frontend/src/io-managers/hyperlinks.ts
index 9f8a8de5..1085afb0 100644
--- a/frontend/src/io-managers/hyperlinks.ts
+++ b/frontend/src/io-managers/hyperlinks.ts
@@ -1,5 +1,5 @@
-import { type Editor } from "@/wasm-communication/editor";
-import { TriggerVisitLink } from "@/wasm-communication/messages";
+import { type Editor } from "@graphite/wasm-communication/editor";
+import { TriggerVisitLink } from "@graphite/wasm-communication/messages";
 
 export function createHyperlinkManager(editor: Editor): void {
 	// Subscribe to process backend event
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index 7ca3b151..3fba1832 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -1,14 +1,14 @@
 import { get } from "svelte/store";
 
-import { type DialogState } from "@/state-providers/dialog";
-import { type FullscreenState } from "@/state-providers/fullscreen";
-import { type PortfolioState } from "@/state-providers/portfolio";
-import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@/utility-functions/keyboard-entry";
-import { platformIsMac } from "@/utility-functions/platform";
-import { extractPixelData } from "@/utility-functions/rasterization";
-import { stripIndents } from "@/utility-functions/strip-indents";
-import { type Editor } from "@/wasm-communication/editor";
-import { TriggerPaste } from "@/wasm-communication/messages";
+import { type DialogState } from "@graphite/state-providers/dialog";
+import { type FullscreenState } from "@graphite/state-providers/fullscreen";
+import { type PortfolioState } from "@graphite/state-providers/portfolio";
+import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@graphite/utility-functions/keyboard-entry";
+import { platformIsMac } from "@graphite/utility-functions/platform";
+import { extractPixelData } from "@graphite/utility-functions/rasterization";
+import { stripIndents } from "@graphite/utility-functions/strip-indents";
+import { type Editor } from "@graphite/wasm-communication/editor";
+import { TriggerPaste } from "@graphite/wasm-communication/messages";
 
 type EventName = keyof HTMLElementEventMap | keyof WindowEventHandlersEventMap | "modifyinputfield";
 type EventListenerTarget = {
diff --git a/frontend/src/io-managers/localization.ts b/frontend/src/io-managers/localization.ts
index 300675be..f0c5bb7c 100644
--- a/frontend/src/io-managers/localization.ts
+++ b/frontend/src/io-managers/localization.ts
@@ -1,5 +1,5 @@
-import { type Editor } from "@/wasm-communication/editor";
-import { TriggerAboutGraphiteLocalizedCommitDate } from "@/wasm-communication/messages";
+import { type Editor } from "@graphite/wasm-communication/editor";
+import { TriggerAboutGraphiteLocalizedCommitDate } from "@graphite/wasm-communication/messages";
 
 export function createLocalizationManager(editor: Editor): void {
 	function localizeTimestamp(utc: string): string {
diff --git a/frontend/src/io-managers/panic.ts b/frontend/src/io-managers/panic.ts
index dbaecd38..a2b147d4 100644
--- a/frontend/src/io-managers/panic.ts
+++ b/frontend/src/io-managers/panic.ts
@@ -1,11 +1,11 @@
-import { wipeDocuments } from "@/io-managers/persistence";
-import { type DialogState } from "@/state-providers/dialog";
-import { type IconName } from "@/utility-functions/icons";
-import { browserVersion, operatingSystem } from "@/utility-functions/platform";
-import { stripIndents } from "@/utility-functions/strip-indents";
-import { type Editor } from "@/wasm-communication/editor";
-import type { TextLabel } from "@/wasm-communication/messages";
-import { type TextButtonWidget, type WidgetLayout, Widget, DisplayDialogPanic } from "@/wasm-communication/messages";
+import { wipeDocuments } from "@graphite/io-managers/persistence";
+import { type DialogState } from "@graphite/state-providers/dialog";
+import { type IconName } from "@graphite/utility-functions/icons";
+import { browserVersion, operatingSystem } from "@graphite/utility-functions/platform";
+import { stripIndents } from "@graphite/utility-functions/strip-indents";
+import { type Editor } from "@graphite/wasm-communication/editor";
+import type { TextLabel } from "@graphite/wasm-communication/messages";
+import { type TextButtonWidget, type WidgetLayout, Widget, DisplayDialogPanic } from "@graphite/wasm-communication/messages";
 
 export function createPanicManager(editor: Editor, dialogState: DialogState): void {
 	// Code panic dialog and console error
diff --git a/frontend/src/io-managers/persistence.ts b/frontend/src/io-managers/persistence.ts
index b20ca90d..a99d1cff 100644
--- a/frontend/src/io-managers/persistence.ts
+++ b/frontend/src/io-managers/persistence.ts
@@ -1,9 +1,9 @@
 import { createStore, del, get, set, update } from "idb-keyval";
 import { get as getFromStore } from "svelte/store";
 
-import { type PortfolioState } from "@/state-providers/portfolio";
-import { type Editor } from "@/wasm-communication/editor";
-import { TriggerIndexedDbWriteDocument, TriggerIndexedDbRemoveDocument, TriggerSavePreferences, TriggerLoadAutoSaveDocuments, TriggerLoadPreferences } from "@/wasm-communication/messages";
+import { type PortfolioState } from "@graphite/state-providers/portfolio";
+import { type Editor } from "@graphite/wasm-communication/editor";
+import { TriggerIndexedDbWriteDocument, TriggerIndexedDbRemoveDocument, TriggerSavePreferences, TriggerLoadAutoSaveDocuments, TriggerLoadPreferences } from "@graphite/wasm-communication/messages";
 
 const graphiteStore = createStore("graphite", "store");
 
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index c488c457..8062e6e6 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,7 +5,7 @@
 // The library replaces the Reflect API on the window to support more features.
 import "reflect-metadata";
 
-import App from "@/App.svelte";
+import App from "@graphite/App.svelte";
 
 document.body.setAttribute("data-app-container", "");
 
diff --git a/frontend/src/state-providers/dialog.ts b/frontend/src/state-providers/dialog.ts
index c56563f7..137c9fd1 100644
--- a/frontend/src/state-providers/dialog.ts
+++ b/frontend/src/state-providers/dialog.ts
@@ -1,8 +1,8 @@
 import {writable} from "svelte/store";
 
-import { type IconName } from "@/utility-functions/icons";
-import { type Editor } from "@/wasm-communication/editor";
-import { type TextButtonWidget, type WidgetLayout, defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, patchWidgetLayout } from "@/wasm-communication/messages";
+import { type IconName } from "@graphite/utility-functions/icons";
+import { type Editor } from "@graphite/wasm-communication/editor";
+import { type TextButtonWidget, type WidgetLayout, defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, patchWidgetLayout } from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDialogState(editor: Editor) {
diff --git a/frontend/src/state-providers/document.ts b/frontend/src/state-providers/document.ts
index 1349e161..48486626 100644
--- a/frontend/src/state-providers/document.ts
+++ b/frontend/src/state-providers/document.ts
@@ -1,7 +1,7 @@
 import {tick} from "svelte";
 import {writable} from "svelte/store";
 
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
 import {
 	defaultWidgetLayout,
 	patchWidgetLayout,
@@ -11,7 +11,7 @@ import {
 	UpdateToolOptionsLayout,
 	UpdateToolShelfLayout,
 	UpdateWorkingColorsLayout,
-} from "@/wasm-communication/messages";
+} from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDocumentState(editor: Editor) {
diff --git a/frontend/src/state-providers/fonts.ts b/frontend/src/state-providers/fonts.ts
index e9ec2760..44200633 100644
--- a/frontend/src/state-providers/fonts.ts
+++ b/frontend/src/state-providers/fonts.ts
@@ -1,7 +1,7 @@
 import { writable } from "svelte/store";
 
-import { type Editor } from "@/wasm-communication/editor";
-import { TriggerFontLoad } from "@/wasm-communication/messages";
+import { type Editor } from "@graphite/wasm-communication/editor";
+import { TriggerFontLoad } from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createFontsState(editor: Editor) {
diff --git a/frontend/src/state-providers/fullscreen.ts b/frontend/src/state-providers/fullscreen.ts
index 01c63162..74657760 100644
--- a/frontend/src/state-providers/fullscreen.ts
+++ b/frontend/src/state-providers/fullscreen.ts
@@ -1,6 +1,6 @@
 import {writable} from "svelte/store";
 
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createFullscreenState(_: Editor) {
diff --git a/frontend/src/state-providers/node-graph.ts b/frontend/src/state-providers/node-graph.ts
index 4778651e..e7a9242c 100644
--- a/frontend/src/state-providers/node-graph.ts
+++ b/frontend/src/state-providers/node-graph.ts
@@ -1,7 +1,7 @@
 import {tick} from "svelte";
 import {writable} from "svelte/store";
 
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
 import {
 	type FrontendNode,
 	type FrontendNodeLink,
@@ -12,7 +12,7 @@ import {
 	UpdateZoomWithScroll,
 	defaultWidgetLayout,
 	patchWidgetLayout,
-} from "@/wasm-communication/messages";
+} from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createNodeGraphState(editor: Editor) {
diff --git a/frontend/src/state-providers/portfolio.ts b/frontend/src/state-providers/portfolio.ts
index 6685a816..597e42af 100644
--- a/frontend/src/state-providers/portfolio.ts
+++ b/frontend/src/state-providers/portfolio.ts
@@ -2,10 +2,10 @@
 
 import {writable} from "svelte/store";
 
-import { downloadFileText, downloadFileBlob, upload } from "@/utility-functions/files";
-import { imaginateGenerate, imaginateCheckConnection, imaginateTerminate, updateBackendImage } from "@/utility-functions/imaginate";
-import { extractPixelData, rasterizeSVG, rasterizeSVGCanvas } from "@/utility-functions/rasterization";
-import { type Editor } from "@/wasm-communication/editor";
+import { downloadFileText, downloadFileBlob, upload } from "@graphite/utility-functions/files";
+import { imaginateGenerate, imaginateCheckConnection, imaginateTerminate, updateBackendImage } from "@graphite/utility-functions/imaginate";
+import { extractPixelData, rasterizeSVG, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
+import { type Editor } from "@graphite/wasm-communication/editor";
 import {
 	type FrontendDocumentDetails,
 	TriggerFileDownload,
@@ -20,7 +20,7 @@ import {
 	UpdateOpenDocumentsList,
 	UpdateImageData,
 	TriggerRevokeBlobUrl,
-} from "@/wasm-communication/messages";
+} from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createPortfolioState(editor: Editor) {
diff --git a/frontend/src/state-providers/workspace.ts b/frontend/src/state-providers/workspace.ts
index b5b7a9f5..da5a5d8b 100644
--- a/frontend/src/state-providers/workspace.ts
+++ b/frontend/src/state-providers/workspace.ts
@@ -3,8 +3,8 @@
 import {tick} from "svelte";
 import {writable} from "svelte/store";
 
-import { type Editor } from "@/wasm-communication/editor";
-import { UpdateNodeGraphVisibility } from "@/wasm-communication/messages";
+import { type Editor } from "@graphite/wasm-communication/editor";
+import { UpdateNodeGraphVisibility } from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createWorkspaceState(editor: Editor) {
diff --git a/frontend/src/utility-functions/icons.ts b/frontend/src/utility-functions/icons.ts
index 154d1396..d00f97cb 100644
--- a/frontend/src/utility-functions/icons.ts
+++ b/frontend/src/utility-functions/icons.ts
@@ -1,47 +1,47 @@
 /* eslint-disable import/first */
 
 // Graphics
-import GraphiteLogotypeSolid from "@/../assets/graphics/graphite-logotype-solid.svg";
+import GraphiteLogotypeSolid from "@graphite/../assets/graphics/graphite-logotype-solid.svg";
 
 const GRAPHICS = {
 	GraphiteLogotypeSolid: { svg: GraphiteLogotypeSolid, size: undefined },
 } as const;
 
 // 12px Solid
-import Add from "@/../assets/icon-12px-solid/add.svg";
-import Checkmark from "@/../assets/icon-12px-solid/checkmark.svg";
-import CloseX from "@/../assets/icon-12px-solid/close-x.svg";
-import DropdownArrow from "@/../assets/icon-12px-solid/dropdown-arrow.svg";
-import Edit from "@/../assets/icon-12px-solid/edit.svg";
-import Empty12px from "@/../assets/icon-12px-solid/empty-12px.svg";
-import FullscreenEnter from "@/../assets/icon-12px-solid/fullscreen-enter.svg";
-import FullscreenExit from "@/../assets/icon-12px-solid/fullscreen-exit.svg";
-import Grid from "@/../assets/icon-12px-solid/grid.svg";
-import Info from "@/../assets/icon-12px-solid/info.svg";
-import KeyboardArrowDown from "@/../assets/icon-12px-solid/keyboard-arrow-down.svg";
-import KeyboardArrowLeft from "@/../assets/icon-12px-solid/keyboard-arrow-left.svg";
-import KeyboardArrowRight from "@/../assets/icon-12px-solid/keyboard-arrow-right.svg";
-import KeyboardArrowUp from "@/../assets/icon-12px-solid/keyboard-arrow-up.svg";
-import KeyboardBackspace from "@/../assets/icon-12px-solid/keyboard-backspace.svg";
-import KeyboardCommand from "@/../assets/icon-12px-solid/keyboard-command.svg";
-import KeyboardControl from "@/../assets/icon-12px-solid/keyboard-control.svg";
-import KeyboardEnter from "@/../assets/icon-12px-solid/keyboard-enter.svg";
-import KeyboardOption from "@/../assets/icon-12px-solid/keyboard-option.svg";
-import KeyboardShift from "@/../assets/icon-12px-solid/keyboard-shift.svg";
-import KeyboardSpace from "@/../assets/icon-12px-solid/keyboard-space.svg";
-import KeyboardTab from "@/../assets/icon-12px-solid/keyboard-tab.svg";
-import Link from "@/../assets/icon-12px-solid/link.svg";
-import Overlays from "@/../assets/icon-12px-solid/overlays.svg";
-import Remove from "@/../assets/icon-12px-solid/remove.svg";
-import ResetColors from "@/../assets/icon-12px-solid/reset-colors.svg";
-import Snapping from "@/../assets/icon-12px-solid/snapping.svg";
-import Swap from "@/../assets/icon-12px-solid/swap.svg";
-import VerticalEllipsis from "@/../assets/icon-12px-solid/vertical-ellipsis.svg";
-import Warning from "@/../assets/icon-12px-solid/warning.svg";
-import WindowButtonWinClose from "@/../assets/icon-12px-solid/window-button-win-close.svg";
-import WindowButtonWinMaximize from "@/../assets/icon-12px-solid/window-button-win-maximize.svg";
-import WindowButtonWinMinimize from "@/../assets/icon-12px-solid/window-button-win-minimize.svg";
-import WindowButtonWinRestoreDown from "@/../assets/icon-12px-solid/window-button-win-restore-down.svg";
+import Add from "@graphite/../assets/icon-12px-solid/add.svg";
+import Checkmark from "@graphite/../assets/icon-12px-solid/checkmark.svg";
+import CloseX from "@graphite/../assets/icon-12px-solid/close-x.svg";
+import DropdownArrow from "@graphite/../assets/icon-12px-solid/dropdown-arrow.svg";
+import Edit from "@graphite/../assets/icon-12px-solid/edit.svg";
+import Empty12px from "@graphite/../assets/icon-12px-solid/empty-12px.svg";
+import FullscreenEnter from "@graphite/../assets/icon-12px-solid/fullscreen-enter.svg";
+import FullscreenExit from "@graphite/../assets/icon-12px-solid/fullscreen-exit.svg";
+import Grid from "@graphite/../assets/icon-12px-solid/grid.svg";
+import Info from "@graphite/../assets/icon-12px-solid/info.svg";
+import KeyboardArrowDown from "@graphite/../assets/icon-12px-solid/keyboard-arrow-down.svg";
+import KeyboardArrowLeft from "@graphite/../assets/icon-12px-solid/keyboard-arrow-left.svg";
+import KeyboardArrowRight from "@graphite/../assets/icon-12px-solid/keyboard-arrow-right.svg";
+import KeyboardArrowUp from "@graphite/../assets/icon-12px-solid/keyboard-arrow-up.svg";
+import KeyboardBackspace from "@graphite/../assets/icon-12px-solid/keyboard-backspace.svg";
+import KeyboardCommand from "@graphite/../assets/icon-12px-solid/keyboard-command.svg";
+import KeyboardControl from "@graphite/../assets/icon-12px-solid/keyboard-control.svg";
+import KeyboardEnter from "@graphite/../assets/icon-12px-solid/keyboard-enter.svg";
+import KeyboardOption from "@graphite/../assets/icon-12px-solid/keyboard-option.svg";
+import KeyboardShift from "@graphite/../assets/icon-12px-solid/keyboard-shift.svg";
+import KeyboardSpace from "@graphite/../assets/icon-12px-solid/keyboard-space.svg";
+import KeyboardTab from "@graphite/../assets/icon-12px-solid/keyboard-tab.svg";
+import Link from "@graphite/../assets/icon-12px-solid/link.svg";
+import Overlays from "@graphite/../assets/icon-12px-solid/overlays.svg";
+import Remove from "@graphite/../assets/icon-12px-solid/remove.svg";
+import ResetColors from "@graphite/../assets/icon-12px-solid/reset-colors.svg";
+import Snapping from "@graphite/../assets/icon-12px-solid/snapping.svg";
+import Swap from "@graphite/../assets/icon-12px-solid/swap.svg";
+import VerticalEllipsis from "@graphite/../assets/icon-12px-solid/vertical-ellipsis.svg";
+import Warning from "@graphite/../assets/icon-12px-solid/warning.svg";
+import WindowButtonWinClose from "@graphite/../assets/icon-12px-solid/window-button-win-close.svg";
+import WindowButtonWinMaximize from "@graphite/../assets/icon-12px-solid/window-button-win-maximize.svg";
+import WindowButtonWinMinimize from "@graphite/../assets/icon-12px-solid/window-button-win-minimize.svg";
+import WindowButtonWinRestoreDown from "@graphite/../assets/icon-12px-solid/window-button-win-restore-down.svg";
 
 const SOLID_12PX = {
 	Add: { svg: Add, size: 12 },
@@ -81,61 +81,61 @@ const SOLID_12PX = {
 } as const;
 
 // 16px Solid
-import AlignBottom from "@/../assets/icon-16px-solid/align-bottom.svg";
-import AlignHorizontalCenter from "@/../assets/icon-16px-solid/align-horizontal-center.svg";
-import AlignLeft from "@/../assets/icon-16px-solid/align-left.svg";
-import AlignRight from "@/../assets/icon-16px-solid/align-right.svg";
-import AlignTop from "@/../assets/icon-16px-solid/align-top.svg";
-import AlignVerticalCenter from "@/../assets/icon-16px-solid/align-vertical-center.svg";
-import BooleanDifference from "@/../assets/icon-16px-solid/boolean-difference.svg";
-import BooleanIntersect from "@/../assets/icon-16px-solid/boolean-intersect.svg";
-import BooleanSubtractBack from "@/../assets/icon-16px-solid/boolean-subtract-back.svg";
-import BooleanSubtractFront from "@/../assets/icon-16px-solid/boolean-subtract-front.svg";
-import BooleanUnion from "@/../assets/icon-16px-solid/boolean-union.svg";
-import CheckboxChecked from "@/../assets/icon-16px-solid/checkbox-checked.svg";
-import CheckboxUnchecked from "@/../assets/icon-16px-solid/checkbox-unchecked.svg";
-import Copy from "@/../assets/icon-16px-solid/copy.svg";
-import EyeHidden from "@/../assets/icon-16px-solid/eye-hidden.svg";
-import EyeVisible from "@/../assets/icon-16px-solid/eye-visible.svg";
-import Eyedropper from "@/../assets/icon-16px-solid/eyedropper.svg";
-import File from "@/../assets/icon-16px-solid/file.svg";
-import FlipHorizontal from "@/../assets/icon-16px-solid/flip-horizontal.svg";
-import FlipVertical from "@/../assets/icon-16px-solid/flip-vertical.svg";
-import Folder from "@/../assets/icon-16px-solid/folder.svg";
-import GraphiteLogo from "@/../assets/icon-16px-solid/graphite-logo.svg";
-import NodeArtboard from "@/../assets/icon-16px-solid/node-artboard.svg";
-import NodeBlur from "@/../assets/icon-16px-solid/node-blur.svg";
-import NodeBrushwork from "@/../assets/icon-16px-solid/node-brushwork.svg";
-import NodeColorCorrection from "@/../assets/icon-16px-solid/node-color-correction.svg";
-import NodeFolder from "@/../assets/icon-16px-solid/node-folder.svg";
-import NodeGradient from "@/../assets/icon-16px-solid/node-gradient.svg";
-import NodeImage from "@/../assets/icon-16px-solid/node-image.svg";
-import NodeImaginate from "@/../assets/icon-16px-solid/node-imaginate.svg";
-import NodeMagicWand from "@/../assets/icon-16px-solid/node-magic-wand.svg";
-import NodeMask from "@/../assets/icon-16px-solid/node-mask.svg";
-import NodeMotionBlur from "@/../assets/icon-16px-solid/node-motion-blur.svg";
-import NodeNodes from "@/../assets/icon-16px-solid/node-nodes.svg";
-import NodeOutput from "@/../assets/icon-16px-solid/node-output.svg";
-import NodeShape from "@/../assets/icon-16px-solid/node-shape.svg";
-import NodeText from "@/../assets/icon-16px-solid/node-text.svg";
-import NodeTransform from "@/../assets/icon-16px-solid/node-transform.svg";
-import Paste from "@/../assets/icon-16px-solid/paste.svg";
-import Random from "@/../assets/icon-16px-solid/random.svg";
-import Regenerate from "@/../assets/icon-16px-solid/regenerate.svg";
-import Reload from "@/../assets/icon-16px-solid/reload.svg";
-import Rescale from "@/../assets/icon-16px-solid/rescale.svg";
-import Reset from "@/../assets/icon-16px-solid/reset.svg";
-import Settings from "@/../assets/icon-16px-solid/settings.svg";
-import Trash from "@/../assets/icon-16px-solid/trash.svg";
-import ViewModeNormal from "@/../assets/icon-16px-solid/view-mode-normal.svg";
-import ViewModeOutline from "@/../assets/icon-16px-solid/view-mode-outline.svg";
-import ViewModePixels from "@/../assets/icon-16px-solid/view-mode-pixels.svg";
-import ViewportDesignMode from "@/../assets/icon-16px-solid/viewport-design-mode.svg";
-import ViewportGuideMode from "@/../assets/icon-16px-solid/viewport-guide-mode.svg";
-import ViewportSelectMode from "@/../assets/icon-16px-solid/viewport-select-mode.svg";
-import ZoomIn from "@/../assets/icon-16px-solid/zoom-in.svg";
-import ZoomOut from "@/../assets/icon-16px-solid/zoom-out.svg";
-import ZoomReset from "@/../assets/icon-16px-solid/zoom-reset.svg";
+import AlignBottom from "@graphite/../assets/icon-16px-solid/align-bottom.svg";
+import AlignHorizontalCenter from "@graphite/../assets/icon-16px-solid/align-horizontal-center.svg";
+import AlignLeft from "@graphite/../assets/icon-16px-solid/align-left.svg";
+import AlignRight from "@graphite/../assets/icon-16px-solid/align-right.svg";
+import AlignTop from "@graphite/../assets/icon-16px-solid/align-top.svg";
+import AlignVerticalCenter from "@graphite/../assets/icon-16px-solid/align-vertical-center.svg";
+import BooleanDifference from "@graphite/../assets/icon-16px-solid/boolean-difference.svg";
+import BooleanIntersect from "@graphite/../assets/icon-16px-solid/boolean-intersect.svg";
+import BooleanSubtractBack from "@graphite/../assets/icon-16px-solid/boolean-subtract-back.svg";
+import BooleanSubtractFront from "@graphite/../assets/icon-16px-solid/boolean-subtract-front.svg";
+import BooleanUnion from "@graphite/../assets/icon-16px-solid/boolean-union.svg";
+import CheckboxChecked from "@graphite/../assets/icon-16px-solid/checkbox-checked.svg";
+import CheckboxUnchecked from "@graphite/../assets/icon-16px-solid/checkbox-unchecked.svg";
+import Copy from "@graphite/../assets/icon-16px-solid/copy.svg";
+import EyeHidden from "@graphite/../assets/icon-16px-solid/eye-hidden.svg";
+import EyeVisible from "@graphite/../assets/icon-16px-solid/eye-visible.svg";
+import Eyedropper from "@graphite/../assets/icon-16px-solid/eyedropper.svg";
+import File from "@graphite/../assets/icon-16px-solid/file.svg";
+import FlipHorizontal from "@graphite/../assets/icon-16px-solid/flip-horizontal.svg";
+import FlipVertical from "@graphite/../assets/icon-16px-solid/flip-vertical.svg";
+import Folder from "@graphite/../assets/icon-16px-solid/folder.svg";
+import GraphiteLogo from "@graphite/../assets/icon-16px-solid/graphite-logo.svg";
+import NodeArtboard from "@graphite/../assets/icon-16px-solid/node-artboard.svg";
+import NodeBlur from "@graphite/../assets/icon-16px-solid/node-blur.svg";
+import NodeBrushwork from "@graphite/../assets/icon-16px-solid/node-brushwork.svg";
+import NodeColorCorrection from "@graphite/../assets/icon-16px-solid/node-color-correction.svg";
+import NodeFolder from "@graphite/../assets/icon-16px-solid/node-folder.svg";
+import NodeGradient from "@graphite/../assets/icon-16px-solid/node-gradient.svg";
+import NodeImage from "@graphite/../assets/icon-16px-solid/node-image.svg";
+import NodeImaginate from "@graphite/../assets/icon-16px-solid/node-imaginate.svg";
+import NodeMagicWand from "@graphite/../assets/icon-16px-solid/node-magic-wand.svg";
+import NodeMask from "@graphite/../assets/icon-16px-solid/node-mask.svg";
+import NodeMotionBlur from "@graphite/../assets/icon-16px-solid/node-motion-blur.svg";
+import NodeNodes from "@graphite/../assets/icon-16px-solid/node-nodes.svg";
+import NodeOutput from "@graphite/../assets/icon-16px-solid/node-output.svg";
+import NodeShape from "@graphite/../assets/icon-16px-solid/node-shape.svg";
+import NodeText from "@graphite/../assets/icon-16px-solid/node-text.svg";
+import NodeTransform from "@graphite/../assets/icon-16px-solid/node-transform.svg";
+import Paste from "@graphite/../assets/icon-16px-solid/paste.svg";
+import Random from "@graphite/../assets/icon-16px-solid/random.svg";
+import Regenerate from "@graphite/../assets/icon-16px-solid/regenerate.svg";
+import Reload from "@graphite/../assets/icon-16px-solid/reload.svg";
+import Rescale from "@graphite/../assets/icon-16px-solid/rescale.svg";
+import Reset from "@graphite/../assets/icon-16px-solid/reset.svg";
+import Settings from "@graphite/../assets/icon-16px-solid/settings.svg";
+import Trash from "@graphite/../assets/icon-16px-solid/trash.svg";
+import ViewModeNormal from "@graphite/../assets/icon-16px-solid/view-mode-normal.svg";
+import ViewModeOutline from "@graphite/../assets/icon-16px-solid/view-mode-outline.svg";
+import ViewModePixels from "@graphite/../assets/icon-16px-solid/view-mode-pixels.svg";
+import ViewportDesignMode from "@graphite/../assets/icon-16px-solid/viewport-design-mode.svg";
+import ViewportGuideMode from "@graphite/../assets/icon-16px-solid/viewport-guide-mode.svg";
+import ViewportSelectMode from "@graphite/../assets/icon-16px-solid/viewport-select-mode.svg";
+import ZoomIn from "@graphite/../assets/icon-16px-solid/zoom-in.svg";
+import ZoomOut from "@graphite/../assets/icon-16px-solid/zoom-out.svg";
+import ZoomReset from "@graphite/../assets/icon-16px-solid/zoom-reset.svg";
 
 const SOLID_16PX = {
 	AlignBottom: { svg: AlignBottom, size: 16 },
@@ -196,17 +196,17 @@ const SOLID_16PX = {
 } as const;
 
 // 16px Two-Tone
-import MouseHintDrag from "@/../assets/icon-16px-two-tone/mouse-hint-drag.svg";
-import MouseHintLmbDouble from "@/../assets/icon-16px-two-tone/mouse-hint-lmb-double.svg";
-import MouseHintLmbDrag from "@/../assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg";
-import MouseHintLmb from "@/../assets/icon-16px-two-tone/mouse-hint-lmb.svg";
-import MouseHintMmbDrag from "@/../assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg";
-import MouseHintMmb from "@/../assets/icon-16px-two-tone/mouse-hint-mmb.svg";
-import MouseHintNone from "@/../assets/icon-16px-two-tone/mouse-hint-none.svg";
-import MouseHintRmbDrag from "@/../assets/icon-16px-two-tone/mouse-hint-rmb-drag.svg";
-import MouseHintRmb from "@/../assets/icon-16px-two-tone/mouse-hint-rmb.svg";
-import MouseHintScrollDown from "@/../assets/icon-16px-two-tone/mouse-hint-scroll-down.svg";
-import MouseHintScrollUp from "@/../assets/icon-16px-two-tone/mouse-hint-scroll-up.svg";
+import MouseHintDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-drag.svg";
+import MouseHintLmbDouble from "@graphite/../assets/icon-16px-two-tone/mouse-hint-lmb-double.svg";
+import MouseHintLmbDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg";
+import MouseHintLmb from "@graphite/../assets/icon-16px-two-tone/mouse-hint-lmb.svg";
+import MouseHintMmbDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg";
+import MouseHintMmb from "@graphite/../assets/icon-16px-two-tone/mouse-hint-mmb.svg";
+import MouseHintNone from "@graphite/../assets/icon-16px-two-tone/mouse-hint-none.svg";
+import MouseHintRmbDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-rmb-drag.svg";
+import MouseHintRmb from "@graphite/../assets/icon-16px-two-tone/mouse-hint-rmb.svg";
+import MouseHintScrollDown from "@graphite/../assets/icon-16px-two-tone/mouse-hint-scroll-down.svg";
+import MouseHintScrollUp from "@graphite/../assets/icon-16px-two-tone/mouse-hint-scroll-up.svg";
 
 const TWO_TONE_16PX = {
 	MouseHintDrag: { svg: MouseHintDrag, size: 16 },
@@ -223,29 +223,29 @@ const TWO_TONE_16PX = {
 } as const;
 
 // 24px Two-Tone
-import GeneralArtboardTool from "@/../assets/icon-24px-two-tone/general-artboard-tool.svg";
-import GeneralEyedropperTool from "@/../assets/icon-24px-two-tone/general-eyedropper-tool.svg";
-import GeneralFillTool from "@/../assets/icon-24px-two-tone/general-fill-tool.svg";
-import GeneralGradientTool from "@/../assets/icon-24px-two-tone/general-gradient-tool.svg";
-import GeneralNavigateTool from "@/../assets/icon-24px-two-tone/general-navigate-tool.svg";
-import GeneralSelectTool from "@/../assets/icon-24px-two-tone/general-select-tool.svg";
-import RasterBrushTool from "@/../assets/icon-24px-two-tone/raster-brush-tool.svg";
-import RasterCloneTool from "@/../assets/icon-24px-two-tone/raster-clone-tool.svg";
-import RasterDetailTool from "@/../assets/icon-24px-two-tone/raster-detail-tool.svg";
-import RasterHealTool from "@/../assets/icon-24px-two-tone/raster-heal-tool.svg";
-import RasterImaginateTool from "@/../assets/icon-24px-two-tone/raster-imaginate-tool.svg";
-import RasterNodesTool from "@/../assets/icon-24px-two-tone/raster-nodes-tool.svg";
-import RasterPatchTool from "@/../assets/icon-24px-two-tone/raster-patch-tool.svg";
-import RasterRelightTool from "@/../assets/icon-24px-two-tone/raster-relight-tool.svg";
-import VectorEllipseTool from "@/../assets/icon-24px-two-tone/vector-ellipse-tool.svg";
-import VectorFreehandTool from "@/../assets/icon-24px-two-tone/vector-freehand-tool.svg";
-import VectorLineTool from "@/../assets/icon-24px-two-tone/vector-line-tool.svg";
-import VectorPathTool from "@/../assets/icon-24px-two-tone/vector-path-tool.svg";
-import VectorPenTool from "@/../assets/icon-24px-two-tone/vector-pen-tool.svg";
-import VectorRectangleTool from "@/../assets/icon-24px-two-tone/vector-rectangle-tool.svg";
-import VectorShapeTool from "@/../assets/icon-24px-two-tone/vector-shape-tool.svg";
-import VectorSplineTool from "@/../assets/icon-24px-two-tone/vector-spline-tool.svg";
-import VectorTextTool from "@/../assets/icon-24px-two-tone/vector-text-tool.svg";
+import GeneralArtboardTool from "@graphite/../assets/icon-24px-two-tone/general-artboard-tool.svg";
+import GeneralEyedropperTool from "@graphite/../assets/icon-24px-two-tone/general-eyedropper-tool.svg";
+import GeneralFillTool from "@graphite/../assets/icon-24px-two-tone/general-fill-tool.svg";
+import GeneralGradientTool from "@graphite/../assets/icon-24px-two-tone/general-gradient-tool.svg";
+import GeneralNavigateTool from "@graphite/../assets/icon-24px-two-tone/general-navigate-tool.svg";
+import GeneralSelectTool from "@graphite/../assets/icon-24px-two-tone/general-select-tool.svg";
+import RasterBrushTool from "@graphite/../assets/icon-24px-two-tone/raster-brush-tool.svg";
+import RasterCloneTool from "@graphite/../assets/icon-24px-two-tone/raster-clone-tool.svg";
+import RasterDetailTool from "@graphite/../assets/icon-24px-two-tone/raster-detail-tool.svg";
+import RasterHealTool from "@graphite/../assets/icon-24px-two-tone/raster-heal-tool.svg";
+import RasterImaginateTool from "@graphite/../assets/icon-24px-two-tone/raster-imaginate-tool.svg";
+import RasterNodesTool from "@graphite/../assets/icon-24px-two-tone/raster-nodes-tool.svg";
+import RasterPatchTool from "@graphite/../assets/icon-24px-two-tone/raster-patch-tool.svg";
+import RasterRelightTool from "@graphite/../assets/icon-24px-two-tone/raster-relight-tool.svg";
+import VectorEllipseTool from "@graphite/../assets/icon-24px-two-tone/vector-ellipse-tool.svg";
+import VectorFreehandTool from "@graphite/../assets/icon-24px-two-tone/vector-freehand-tool.svg";
+import VectorLineTool from "@graphite/../assets/icon-24px-two-tone/vector-line-tool.svg";
+import VectorPathTool from "@graphite/../assets/icon-24px-two-tone/vector-path-tool.svg";
+import VectorPenTool from "@graphite/../assets/icon-24px-two-tone/vector-pen-tool.svg";
+import VectorRectangleTool from "@graphite/../assets/icon-24px-two-tone/vector-rectangle-tool.svg";
+import VectorShapeTool from "@graphite/../assets/icon-24px-two-tone/vector-shape-tool.svg";
+import VectorSplineTool from "@graphite/../assets/icon-24px-two-tone/vector-spline-tool.svg";
+import VectorTextTool from "@graphite/../assets/icon-24px-two-tone/vector-text-tool.svg";
 
 const TWO_TONE_24PX = {
 	GeneralArtboardTool: { svg: GeneralArtboardTool, size: 24 },
diff --git a/frontend/src/utility-functions/imaginate.ts b/frontend/src/utility-functions/imaginate.ts
index 7f829185..fa6ca393 100644
--- a/frontend/src/utility-functions/imaginate.ts
+++ b/frontend/src/utility-functions/imaginate.ts
@@ -1,11 +1,11 @@
 /* eslint-disable camelcase */
 
-// import { escapeJSON } from "@/utility-functions/escape";
-import { blobToBase64 } from "@/utility-functions/files";
-import { type RequestResult, requestWithUploadDownloadProgress } from "@/utility-functions/network";
-import { type Editor } from "@/wasm-communication/editor";
-import type { XY } from "@/wasm-communication/messages";
-import { type ImaginateGenerationParameters } from "@/wasm-communication/messages";
+// import { escapeJSON } from "@graphite/utility-functions/escape";
+import { blobToBase64 } from "@graphite/utility-functions/files";
+import { type RequestResult, requestWithUploadDownloadProgress } from "@graphite/utility-functions/network";
+import { type Editor } from "@graphite/wasm-communication/editor";
+import type { XY } from "@graphite/wasm-communication/messages";
+import { type ImaginateGenerationParameters } from "@graphite/wasm-communication/messages";
 
 const MAX_POLLING_RETRIES = 4;
 const SERVER_STATUS_CHECK_TIMEOUT = 5000;
diff --git a/frontend/src/utility-functions/rasterization.ts b/frontend/src/utility-functions/rasterization.ts
index 8cb13c99..6bad8847 100644
--- a/frontend/src/utility-functions/rasterization.ts
+++ b/frontend/src/utility-functions/rasterization.ts
@@ -1,4 +1,4 @@
-import { replaceBlobURLsWithBase64 } from "@/utility-functions/files";
+import { replaceBlobURLsWithBase64 } from "@graphite/utility-functions/files";
 
 // Rasterize the string of an SVG document at a given width and height and return the canvas it was drawn onto during the rasterization process
 export async function rasterizeSVGCanvas(svg: string, width: number, height: number, backgroundColor?: string): Promise<HTMLCanvasElement> {
diff --git a/frontend/src/wasm-communication/editor.ts b/frontend/src/wasm-communication/editor.ts
index 3011e161..11d8b0a3 100644
--- a/frontend/src/wasm-communication/editor.ts
+++ b/frontend/src/wasm-communication/editor.ts
@@ -1,7 +1,7 @@
-import type WasmBindgenPackage from "@/../wasm/pkg";
-import { panicProxy } from "@/utility-functions/panic-proxy";
-import { type JsMessageType } from "@/wasm-communication/messages";
-import { createSubscriptionRouter, type SubscriptionRouter } from "@/wasm-communication/subscription-router";
+import type WasmBindgenPackage from "@graphite/../wasm/pkg";
+import { panicProxy } from "@graphite/utility-functions/panic-proxy";
+import { type JsMessageType } from "@graphite/wasm-communication/messages";
+import { createSubscriptionRouter, type SubscriptionRouter } from "@graphite/wasm-communication/subscription-router";
 
 export type WasmRawInstance = typeof WasmBindgenPackage;
 export type WasmEditorInstance = InstanceType<WasmRawInstance["JsEditorHandle"]>;
@@ -58,7 +58,7 @@ export async function initWasm(): Promise<void> {
 
 	// Import the WASM module JS bindings and wrap them in the panic proxy
 	// eslint-disable-next-line import/no-cycle
-	wasmImport = await import("@/../wasm/pkg").then(panicProxy);
+	wasmImport = await import("@graphite/../wasm/pkg").then(panicProxy);
 
 	// Provide a random starter seed which must occur after initializing the WASM module, since WASM can't generate its own random numbers
 	const randomSeedFloat = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts
index a9c970b4..7275867e 100644
--- a/frontend/src/wasm-communication/messages.ts
+++ b/frontend/src/wasm-communication/messages.ts
@@ -2,10 +2,10 @@
 
 import { Transform, Type, plainToClass } from "class-transformer";
 
-import { type IconName, type IconSize } from "@/utility-functions/icons";
-import { type WasmEditorInstance, type WasmRawInstance } from "@/wasm-communication/editor";
+import { type IconName, type IconSize } from "@graphite/utility-functions/icons";
+import { type WasmEditorInstance, type WasmRawInstance } from "@graphite/wasm-communication/editor";
 
-import type MenuList from "@/components/floating-menus/MenuList.svelte";
+import type MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 
 export class JsMessage {
 	// The marker provides a way to check if an object is a sub-class constructor for a jsMessage.
diff --git a/frontend/src/wasm-communication/subscription-router.ts b/frontend/src/wasm-communication/subscription-router.ts
index 483bb9d5..4a29c2ca 100644
--- a/frontend/src/wasm-communication/subscription-router.ts
+++ b/frontend/src/wasm-communication/subscription-router.ts
@@ -1,7 +1,7 @@
 import { plainToInstance } from "class-transformer";
 
-import { type WasmEditorInstance, type WasmRawInstance } from "@/wasm-communication/editor";
-import { type JsMessageType, messageMakers, type JsMessage } from "@/wasm-communication/messages";
+import { type WasmEditorInstance, type WasmRawInstance } from "@graphite/wasm-communication/editor";
+import { type JsMessageType, messageMakers, type JsMessage } from "@graphite/wasm-communication/messages";
 
 type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;
 // Don't know a better way of typing this since it can be any subclass of JsMessage
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 5cccd089..f72628cf 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -14,7 +14,7 @@
 		"baseUrl": ".",
 		"types": ["node", "svelte", "svelte/store", "svelte/motion", "svelte/transition", "svelte/animate", "svelte/easing"],
 		"paths": {
-			"@/*": ["src/*"]
+			"@graphite/*": ["src/*"]
 		},
 		"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
 	},
diff --git a/frontend/wasm/src/editor_api.rs b/frontend/wasm/src/editor_api.rs
index d2e204ff..bbd25bc1 100644
--- a/frontend/wasm/src/editor_api.rs
+++ b/frontend/wasm/src/editor_api.rs
@@ -30,7 +30,7 @@ pub fn set_random_seed(seed: u64) {
 
 /// We directly interface with the updateImage JS function for massively increased performance over serializing and deserializing.
 /// This avoids creating a json with a list millions of numbers long.
-#[wasm_bindgen(module = "@/wasm-communication/editor")]
+#[wasm_bindgen(module = "@graphite/wasm-communication/editor")]
 extern "C" {
 	fn updateImage(path: Vec<u64>, mime: String, imageData: &[u8], document_id: u64);
 	fn fetchImage(path: Vec<u64>, mime: String, document_id: u64, identifier: String);
diff --git a/frontend/webpack.config.ts b/frontend/webpack.config.ts
index 27760a80..ed9e92ec 100644
--- a/frontend/webpack.config.ts
+++ b/frontend/webpack.config.ts
@@ -113,7 +113,7 @@ const config: webpack.Configuration = {
 	},
 	plugins: [
 		// WASM Pack Plugin integrates compiled Rust code (.wasm) and generated wasm-bindgen code (.js) with the webpack bundle
-		// Use this JS to import the bundled Rust entry points: const wasm = import("@/../wasm/pkg").then(panicProxy);
+		// Use this JS to import the bundled Rust entry points: const wasm = import("@graphite/../wasm/pkg").then(panicProxy);
 		// Then call WASM functions with: (await wasm).functionName()
 		// https://github.com/wasm-tool/wasm-pack-plugin
 		new WasmPackPlugin({
diff --git a/website/.eslintrc.js b/website/.eslintrc.js
index 6f537e24..e4f6d915 100644
--- a/website/.eslintrc.js
+++ b/website/.eslintrc.js
@@ -46,7 +46,7 @@ module.exports = {
 		"no-bitwise": "off",
 		"no-shadow": "off",
 		"no-use-before-define": "off",
-		"no-restricted-imports": ["error", { patterns: [".*", "!@/*"] }],
+		"no-restricted-imports": ["error", { patterns: [".*", "!@graphite/*"] }],
 
 		// Import plugin config (used to intelligently validate module import statements)
 		"import/prefer-default-export": "off",
diff --git a/website/other/bezier-rs-demos/.eslintrc.js b/website/other/bezier-rs-demos/.eslintrc.js
index 58b5afe0..f1762d35 100644
--- a/website/other/bezier-rs-demos/.eslintrc.js
+++ b/website/other/bezier-rs-demos/.eslintrc.js
@@ -65,7 +65,7 @@ module.exports = {
 		"no-bitwise": "off",
 		"no-shadow": "off",
 		"no-use-before-define": "off",
-		"no-restricted-imports": ["error", { patterns: [".*", "!@/*"] }],
+		"no-restricted-imports": ["error", { patterns: [".*", "!@graphite/*"] }],
 
 		// TypeScript plugin config
 		"@typescript-eslint/indent": "off",
diff --git a/website/other/bezier-rs-demos/src/components/BezierDemo.ts b/website/other/bezier-rs-demos/src/components/BezierDemo.ts
index f3ae8f71..2b9a6064 100644
--- a/website/other/bezier-rs-demos/src/components/BezierDemo.ts
+++ b/website/other/bezier-rs-demos/src/components/BezierDemo.ts
@@ -1,7 +1,7 @@
-import { WasmBezier } from "@/../wasm/pkg";
-import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
-import { renderDemo } from "@/utils/render";
-import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, InputOption, WasmBezierManipulatorKey, Demo } from "@/utils/types";
+import { WasmBezier } from "@graphite/../wasm/pkg";
+import bezierFeatures, { BezierFeatureKey } from "@graphite/features/bezier-features";
+import { renderDemo } from "@graphite/utils/render";
+import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, InputOption, WasmBezierManipulatorKey, Demo } from "@graphite/utils/types";
 
 const SELECTABLE_RANGE = 10;
 
@@ -54,7 +54,7 @@ class BezierDemo extends HTMLElement implements Demo {
 		this.render();
 
 		const figure = this.querySelector("figure") as HTMLElement;
-		const wasm = await import("@/../wasm/pkg");
+		const wasm = await import("@graphite/../wasm/pkg");
 		this.bezier = wasm.WasmBezier[getConstructorKey(curveType)](this.points);
 		this.drawDemo(figure);
 	}
diff --git a/website/other/bezier-rs-demos/src/components/BezierDemoPane.ts b/website/other/bezier-rs-demos/src/components/BezierDemoPane.ts
index 139ec7ed..2b29b569 100644
--- a/website/other/bezier-rs-demos/src/components/BezierDemoPane.ts
+++ b/website/other/bezier-rs-demos/src/components/BezierDemoPane.ts
@@ -1,6 +1,6 @@
-import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
-import { renderDemoPane } from "@/utils/render";
-import { BezierCurveType, BEZIER_CURVE_TYPE, BezierDemoOptions, InputOption, Demo, DemoPane, BezierDemoArgs } from "@/utils/types";
+import bezierFeatures, { BezierFeatureKey } from "@graphite/features/bezier-features";
+import { renderDemoPane } from "@graphite/utils/render";
+import { BezierCurveType, BEZIER_CURVE_TYPE, BezierDemoOptions, InputOption, Demo, DemoPane, BezierDemoArgs } from "@graphite/utils/types";
 
 const demoDefaults = {
 	Linear: {
diff --git a/website/other/bezier-rs-demos/src/components/SubpathDemo.ts b/website/other/bezier-rs-demos/src/components/SubpathDemo.ts
index f037cd26..10ab4529 100644
--- a/website/other/bezier-rs-demos/src/components/SubpathDemo.ts
+++ b/website/other/bezier-rs-demos/src/components/SubpathDemo.ts
@@ -1,8 +1,8 @@
-import { WasmSubpath } from "@/../wasm/pkg";
-import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
-import { renderDemo } from "@/utils/render";
+import { WasmSubpath } from "@graphite/../wasm/pkg";
+import subpathFeatures, { SubpathFeatureKey } from "@graphite/features/subpath-features";
+import { renderDemo } from "@graphite/utils/render";
 
-import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, InputOption } from "@/utils/types";
+import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, InputOption } from "@graphite/utils/types";
 
 const SELECTABLE_RANGE = 10;
 const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "set_in_handle", "set_out_handle"];
@@ -48,7 +48,7 @@ class SubpathDemo extends HTMLElement {
 		this.render();
 
 		const figure = this.querySelector("figure") as HTMLElement;
-		const wasm = await import("@/../wasm/pkg");
+		const wasm = await import("@graphite/../wasm/pkg");
 		this.subpath = wasm.WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
 		this.drawDemo(figure);
 	}
diff --git a/website/other/bezier-rs-demos/src/components/SubpathDemoPane.ts b/website/other/bezier-rs-demos/src/components/SubpathDemoPane.ts
index a60e8923..50592655 100644
--- a/website/other/bezier-rs-demos/src/components/SubpathDemoPane.ts
+++ b/website/other/bezier-rs-demos/src/components/SubpathDemoPane.ts
@@ -1,6 +1,6 @@
-import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
-import { renderDemoPane } from "@/utils/render";
-import { Demo, DemoPane, InputOption, SubpathDemoArgs } from "@/utils/types";
+import subpathFeatures, { SubpathFeatureKey } from "@graphite/features/subpath-features";
+import { renderDemoPane } from "@graphite/utils/render";
+import { Demo, DemoPane, InputOption, SubpathDemoArgs } from "@graphite/utils/types";
 
 class SubpathDemoPane extends HTMLElement implements DemoPane {
 	// Props
diff --git a/website/other/bezier-rs-demos/src/features/bezier-features.ts b/website/other/bezier-rs-demos/src/features/bezier-features.ts
index be6d2c68..2a798351 100644
--- a/website/other/bezier-rs-demos/src/features/bezier-features.ts
+++ b/website/other/bezier-rs-demos/src/features/bezier-features.ts
@@ -1,6 +1,6 @@
-import { WasmBezier } from "@/../wasm/pkg";
-import { tSliderOptions, bezierTValueVariantOptions, errorOptions, minimumSeparationOptions } from "@/utils/options";
-import { BezierDemoOptions, WasmBezierInstance, BezierCallback, InputOption, BEZIER_T_VALUE_VARIANTS } from "@/utils/types";
+import { WasmBezier } from "@graphite/../wasm/pkg";
+import { tSliderOptions, bezierTValueVariantOptions, errorOptions, minimumSeparationOptions } from "@graphite/utils/options";
+import { BezierDemoOptions, WasmBezierInstance, BezierCallback, InputOption, BEZIER_T_VALUE_VARIANTS } from "@graphite/utils/types";
 
 const bezierFeatures = {
 	constructor: {
diff --git a/website/other/bezier-rs-demos/src/features/subpath-features.ts b/website/other/bezier-rs-demos/src/features/subpath-features.ts
index 39e0a68a..570cda07 100644
--- a/website/other/bezier-rs-demos/src/features/subpath-features.ts
+++ b/website/other/bezier-rs-demos/src/features/subpath-features.ts
@@ -1,5 +1,5 @@
-import { tSliderOptions, subpathTValueVariantOptions, intersectionErrorOptions, minimumSeparationOptions } from "@/utils/options";
-import { InputOption, SubpathCallback, WasmSubpathInstance, SUBPATH_T_VALUE_VARIANTS } from "@/utils/types";
+import { tSliderOptions, subpathTValueVariantOptions, intersectionErrorOptions, minimumSeparationOptions } from "@graphite/utils/options";
+import { InputOption, SubpathCallback, WasmSubpathInstance, SUBPATH_T_VALUE_VARIANTS } from "@graphite/utils/types";
 
 const subpathFeatures = {
 	constructor: {
diff --git a/website/other/bezier-rs-demos/src/main.ts b/website/other/bezier-rs-demos/src/main.ts
index 81a54353..2b42ba94 100644
--- a/website/other/bezier-rs-demos/src/main.ts
+++ b/website/other/bezier-rs-demos/src/main.ts
@@ -1,12 +1,12 @@
-import BezierDemo from "@/components/BezierDemo";
-import BezierDemoPane from "@/components/BezierDemoPane";
-import SubpathDemo from "@/components/SubpathDemo";
-import SubpathDemoPane from "@/components/SubpathDemoPane";
+import BezierDemo from "@graphite/components/BezierDemo";
+import BezierDemoPane from "@graphite/components/BezierDemoPane";
+import SubpathDemo from "@graphite/components/SubpathDemo";
+import SubpathDemoPane from "@graphite/components/SubpathDemoPane";
 
-import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
-import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
+import bezierFeatures, { BezierFeatureKey } from "@graphite/features/bezier-features";
+import subpathFeatures, { SubpathFeatureKey } from "@graphite/features/subpath-features";
 
-import "@/style.css";
+import "@graphite/style.css";
 
 declare global {
 	interface HTMLElementTagNameMap {
diff --git a/website/other/bezier-rs-demos/src/utils/options.ts b/website/other/bezier-rs-demos/src/utils/options.ts
index ad08866f..2503d740 100644
--- a/website/other/bezier-rs-demos/src/utils/options.ts
+++ b/website/other/bezier-rs-demos/src/utils/options.ts
@@ -1,4 +1,4 @@
-import { BEZIER_T_VALUE_VARIANTS, SUBPATH_T_VALUE_VARIANTS } from "@/utils/types";
+import { BEZIER_T_VALUE_VARIANTS, SUBPATH_T_VALUE_VARIANTS } from "@graphite/utils/types";
 
 export const tSliderOptions = {
 	min: 0,
diff --git a/website/other/bezier-rs-demos/src/utils/render.ts b/website/other/bezier-rs-demos/src/utils/render.ts
index cfb19f5e..17fdc6a9 100644
--- a/website/other/bezier-rs-demos/src/utils/render.ts
+++ b/website/other/bezier-rs-demos/src/utils/render.ts
@@ -1,4 +1,4 @@
-import { Demo, DemoPane, InputOption } from "@/utils/types";
+import { Demo, DemoPane, InputOption } from "@graphite/utils/types";
 
 export function renderDemo(demo: Demo): void {
 	const header = document.createElement("h4");
diff --git a/website/other/bezier-rs-demos/src/utils/types.ts b/website/other/bezier-rs-demos/src/utils/types.ts
index b883fb15..ed795753 100644
--- a/website/other/bezier-rs-demos/src/utils/types.ts
+++ b/website/other/bezier-rs-demos/src/utils/types.ts
@@ -1,4 +1,4 @@
-export type WasmRawInstance = typeof import("@/../wasm/pkg");
+export type WasmRawInstance = typeof import("@graphite/../wasm/pkg");
 export type WasmBezierInstance = InstanceType<WasmRawInstance["WasmBezier"]>;
 
 export type WasmBezierKey = keyof WasmBezierInstance;
diff --git a/website/other/bezier-rs-demos/tsconfig.json b/website/other/bezier-rs-demos/tsconfig.json
index 4f94c0a8..151bce48 100644
--- a/website/other/bezier-rs-demos/tsconfig.json
+++ b/website/other/bezier-rs-demos/tsconfig.json
@@ -16,7 +16,7 @@
 			"node"
 		],
 		"paths": {
-			"@/*": [
+			"@graphite/*": [
 				"src/*"
 			]
 		},
diff --git a/website/other/bezier-rs-demos/vue.config.js b/website/other/bezier-rs-demos/vue.config.js
index dc251f5a..663f3758 100644
--- a/website/other/bezier-rs-demos/vue.config.js
+++ b/website/other/bezier-rs-demos/vue.config.js
@@ -10,7 +10,7 @@ module.exports = defineConfig({
 	// https://cli.vuejs.org/guide/webpack.html
 	chainWebpack: (config) => {
 		// WASM Pack Plugin integrates compiled Rust code (.wasm) and generated wasm-bindgen code (.js) with the webpack bundle
-		// Use this JS to import the bundled Rust entry points: const wasm = import("@/../wasm/pkg").then(panicProxy);
+		// Use this JS to import the bundled Rust entry points: const wasm = import("@graphite/../wasm/pkg").then(panicProxy);
 		// Then call WASM functions with: (await wasm).function_name()
 		// https://github.com/wasm-tool/wasm-pack-plugin
 		config