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>
2026-10-01 11:48:12 +08:00 · 2023-03-25 17:39:38 -07:00
parent f910b45a5b
commit 5759600f95
83 changed files with 465 additions and 465 deletions
@@ -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",
@@ -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;
@@ -1,24 +1,24 @@
 <script lang="ts">
 	import { onMount, onDestroy, setContext } from "svelte";
-	import type { createEditor } from "@/wasm-communication/editor";
+	import type { createEditor } from "@graphite/wasm-communication/editor";
-	import { operatingSystem } from "@/utility-functions/platform";
+	import { operatingSystem } from "@graphite/utility-functions/platform";
-	import { createClipboardManager } from "@/io-managers/clipboard";
+	import { createClipboardManager } from "@graphite/io-managers/clipboard";
-	import { createDragManager } from "@/io-managers/drag";
+	import { createDragManager } from "@graphite/io-managers/drag";
-	import { createHyperlinkManager } from "@/io-managers/hyperlinks";
+	import { createHyperlinkManager } from "@graphite/io-managers/hyperlinks";
-	import { createInputManager } from "@/io-managers/input";
+	import { createInputManager } from "@graphite/io-managers/input";
-	import { createLocalizationManager } from "@/io-managers/localization";
+	import { createLocalizationManager } from "@graphite/io-managers/localization";
-	import { createPanicManager } from "@/io-managers/panic";
+	import { createPanicManager } from "@graphite/io-managers/panic";
-	import { createPersistenceManager } from "@/io-managers/persistence";
+	import { createPersistenceManager } from "@graphite/io-managers/persistence";
-	import { createDialogState } from "@/state-providers/dialog";
+	import { createDialogState } from "@graphite/state-providers/dialog";
-	import { createDocumentState } from "@/state-providers/document";
+	import { createDocumentState } from "@graphite/state-providers/document";
-	import { createFontsState } from "@/state-providers/fonts";
+	import { createFontsState } from "@graphite/state-providers/fonts";
-	import { createFullscreenState } from "@/state-providers/fullscreen";
+	import { createFullscreenState } from "@graphite/state-providers/fullscreen";
-	import { createNodeGraphState } from "@/state-providers/node-graph";
+	import { createNodeGraphState } from "@graphite/state-providers/node-graph";
-	import { createPortfolioState } from "@/state-providers/portfolio";
+	import { createPortfolioState } from "@graphite/state-providers/portfolio";
-	import { createWorkspaceState } from "@/state-providers/workspace";
+	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>;
@@ -1,20 +1,20 @@
 <script lang="ts">
 	import { onDestroy, createEventDispatcher, getContext } from "svelte";
-	import { clamp } from "@/utility-functions/math";
+	import { clamp } from "@graphite/utility-functions/math";
-	import { type HSV, type RGB } from "@/wasm-communication/messages";
+	import { type HSV, type RGB } from "@graphite/wasm-communication/messages";
-	import { Color } from "@/wasm-communication/messages";
+	import { Color } from "@graphite/wasm-communication/messages";
-	import FloatingMenu, { type MenuDirection } from "@/components/layout/FloatingMenu.svelte";
+	import FloatingMenu, { type MenuDirection } from "@graphite/components/layout/FloatingMenu.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
-	import DropdownInput from "@/components/widgets/inputs/DropdownInput.svelte";
+	import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte";
-	import NumberInput from "@/components/widgets/inputs/NumberInput.svelte";
+	import NumberInput from "@graphite/components/widgets/inputs/NumberInput.svelte";
-	import TextInput from "@/components/widgets/inputs/TextInput.svelte";
+	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
-	import Separator from "@/components/widgets/labels/Separator.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 	type PresetColors = "none" | "black" | "white" | "red" | "yellow" | "green" | "cyan" | "blue" | "magenta";
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
-	import FloatingMenu from "@/components/layout/FloatingMenu.svelte";
+	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
+	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
-	import type { DialogState } from "@/state-providers/dialog";
+	import type { DialogState } from "@graphite/state-providers/dialog";
 	const dialog = getContext<DialogState>("dialog");
@@ -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;
@@ -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 FloatingMenu, { type MenuDirection } from "@graphite/components/layout/FloatingMenu.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import Separator from "@/components/widgets/labels/Separator.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
+	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
 	let self: FloatingMenu | undefined;
 	let scroller: LayoutCol | undefined;
@@ -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;
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, tick } from "svelte";
-	import { textInputCleanup } from "@/utility-functions/keyboard-entry";
+	import { textInputCleanup } from "@graphite/utility-functions/keyboard-entry";
-	import { extractPixelData, rasterizeSVGCanvas } from "@/utility-functions/rasterization";
+	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 EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import CanvasRuler from "@/components/widgets/metrics/CanvasRuler.svelte";
+	import CanvasRuler from "@graphite/components/widgets/metrics/CanvasRuler.svelte";
-	import PersistentScrollbar from "@/components/widgets/metrics/PersistentScrollbar.svelte";
+	import PersistentScrollbar from "@graphite/components/widgets/metrics/PersistentScrollbar.svelte";
-	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
-	import type { DocumentState } from "@/state-providers/document";
+	import type { DocumentState } from "@graphite/state-providers/document";
 	let rulerHorizontal: CanvasRuler | undefined;
 	let rulerVertical: CanvasRuler | undefined;
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, tick } from "svelte";
-	import { beginDraggingElement } from "@/io-managers/drag";
+	import { beginDraggingElement } from "@graphite/io-managers/drag";
-	import { platformIsMac } from "@/utility-functions/platform";
+	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 LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 	type LayerListingInfo = {
 		folderIndex: number;
@@ -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 LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
+	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
-	import TextInput from "@/components/widgets/inputs/TextInput.svelte";
+	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
-	import type { NodeGraphState } from "@/state-providers/node-graph";
+	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 	const WHEEL_RATE = (1 / 600) * 3;
 	const GRID_COLLAPSE_SPACING = 10;
@@ -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 LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 	const editor = getContext<Editor>("editor");
@@ -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 WidgetSection from "@graphite/components/widgets/groups/WidgetSection.svelte";
-	import WidgetRow from "@/components/widgets/WidgetRow.svelte";
+	import WidgetRow from "@graphite/components/widgets/WidgetRow.svelte";
 	export let layout: WidgetLayout;
 	let className = "";
@@ -1,31 +1,31 @@
 <script lang="ts">
-	import { debouncer } from "@/utility-functions/debounce";
+	import { debouncer } from "@graphite/utility-functions/debounce";
-	import type { Widget } from "@/wasm-communication/messages";
+	import type { Widget } from "@graphite/wasm-communication/messages";
-	import { narrowWidgetProps } from "@/wasm-communication/messages";
+	import { narrowWidgetProps } from "@graphite/wasm-communication/messages";
-	import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@/wasm-communication/messages";
+	import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@graphite/wasm-communication/messages";
-	import PivotAssist from "@/components/widgets/assists/PivotAssist.svelte";
+	import PivotAssist from "@graphite/components/widgets/assists/PivotAssist.svelte";
-	import BreadcrumbTrailButtons from "@/components/widgets/buttons/BreadcrumbTrailButtons.svelte";
+	import BreadcrumbTrailButtons from "@graphite/components/widgets/buttons/BreadcrumbTrailButtons.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
-	import ParameterExposeButton from "@/components/widgets/buttons/ParameterExposeButton.svelte";
+	import ParameterExposeButton from "@graphite/components/widgets/buttons/ParameterExposeButton.svelte";
-	import PopoverButton from "@/components/widgets/buttons/PopoverButton.svelte";
+	import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte";
-	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
+	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
-	import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.svelte";
+	import CheckboxInput from "@graphite/components/widgets/inputs/CheckboxInput.svelte";
-	import ColorInput from "@/components/widgets/inputs/ColorInput.svelte";
+	import ColorInput from "@graphite/components/widgets/inputs/ColorInput.svelte";
-	import DropdownInput from "@/components/widgets/inputs/DropdownInput.svelte";
+	import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte";
-	import FontInput from "@/components/widgets/inputs/FontInput.svelte";
+	import FontInput from "@graphite/components/widgets/inputs/FontInput.svelte";
-	import LayerReferenceInput from "@/components/widgets/inputs/LayerReferenceInput.svelte";
+	import LayerReferenceInput from "@graphite/components/widgets/inputs/LayerReferenceInput.svelte";
-	import NumberInput from "@/components/widgets/inputs/NumberInput.svelte";
+	import NumberInput from "@graphite/components/widgets/inputs/NumberInput.svelte";
-	import OptionalInput from "@/components/widgets/inputs/OptionalInput.svelte";
+	import OptionalInput from "@graphite/components/widgets/inputs/OptionalInput.svelte";
-	import RadioInput from "@/components/widgets/inputs/RadioInput.svelte";
+	import RadioInput from "@graphite/components/widgets/inputs/RadioInput.svelte";
-	import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.svelte";
+	import SwatchPairInput from "@graphite/components/widgets/inputs/SwatchPairInput.svelte";
-	import TextAreaInput from "@/components/widgets/inputs/TextAreaInput.svelte";
+	import TextAreaInput from "@graphite/components/widgets/inputs/TextAreaInput.svelte";
-	import TextInput from "@/components/widgets/inputs/TextInput.svelte";
+	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import Separator from "@/components/widgets/labels/Separator.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.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"];
@@ -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 }>();
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import TextButton from "@/components/widgets/buttons/TextButton.svelte";
+	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	export let labels: string[];
 	export let disabled = false;
@@ -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;
@@ -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;
@@ -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 FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 	export let icon: IconName = "DropdownArrow";
 	export let tooltip: string | undefined = undefined;
@@ -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 IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	export let label: string;
 	export let icon: IconName | undefined = undefined;
@@ -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 LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import WidgetRow from "@/components/widgets/WidgetRow.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");
@@ -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 LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	// emits: ["update:checked"],
 	const dispatch = createEventDispatcher<{ checked: boolean }>();
@@ -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 ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	// emits: ["update:value"],
 	const dispatch = createEventDispatcher<{ value: Color }>();
@@ -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 MenuList from "@graphite/components/floating-menus/MenuList.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	const DASH_ENTRY = { label: "-" };
@@ -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<{
@@ -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 MenuList from "@graphite/components/floating-menus/MenuList.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import type { FontsState } from "@/state-providers/fonts";
+	import type { FontsState } from "@graphite/state-providers/fonts";
 	const fonts = getContext<FontsState>("fonts");
@@ -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 type { LayerType, LayerTypeData } from "@graphite/wasm-communication/messages";
-	import { layerTypeData } from "@/wasm-communication/messages";
+	import { layerTypeData } from "@graphite/wasm-communication/messages";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	// emits: ["update:value"],
 	const dispatch = createEventDispatcher<{ value: string | undefined }>();
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
-	import { platformIsMac } from "@/utility-functions/platform";
+	import { platformIsMac } from "@graphite/utility-functions/platform";
-	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@/wasm-communication/messages";
+	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/wasm-communication/messages";
-	import MenuList from "@/components/floating-menus/MenuList.svelte";
+	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	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";
@@ -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 }>();
@@ -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 LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.svelte";
+	import CheckboxInput from "@graphite/components/widgets/inputs/CheckboxInput.svelte";
 	export let checked: boolean;
 	export let disabled = false;
@@ -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 LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	// emits: ["update:selectedIndex"],
 	const dispatch = createEventDispatcher<{ selectedIndex: number }>();
@@ -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 ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 	const editor = getContext<Editor>("editor");
@@ -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 }>();
@@ -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 }>();
@@ -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 };
@@ -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";
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import type { IconName } from "@/utility-functions/icons";
+	import type { IconName } from "@graphite/utility-functions/icons";
-	import { platformIsMac } from "@/utility-functions/platform";
+	import { platformIsMac } from "@graphite/utility-functions/platform";
-	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@/wasm-communication/messages";
+	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@graphite/wasm-communication/messages";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import Separator from "@/components/widgets/labels/Separator.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.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 };
@@ -3,10 +3,10 @@
 </script>
 <script lang="ts">
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import StatusBar from "@/components/window/status-bar/StatusBar.svelte";
+	import StatusBar from "@graphite/components/window/status-bar/StatusBar.svelte";
-	import TitleBar from "@/components/window/title-bar/TitleBar.svelte";
+	import TitleBar from "@graphite/components/window/title-bar/TitleBar.svelte";
-	import Workspace from "@/components/window/workspace/Workspace.svelte";
+	import Workspace from "@graphite/components/window/workspace/Workspace.svelte";
 	let platform: ApplicationPlatform = "Web";
 	let maximized: true;
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
-	import { platformIsMac } from "@/utility-functions/platform";
+	import { platformIsMac } from "@graphite/utility-functions/platform";
-	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
+	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/wasm-communication/messages";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import Separator from "@/components/widgets/labels/Separator.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
-	import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
+	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 	const editor = getContext<Editor>("editor");
@@ -3,13 +3,13 @@
 </script>
 <script lang="ts">
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.svelte";
+	import MenuBarInput from "@graphite/components/widgets/inputs/MenuBarInput.svelte";
-	import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.svelte";
+	import WindowButtonsMac from "@graphite/components/window/title-bar/WindowButtonsMac.svelte";
-	import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.svelte";
+	import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
-	import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.svelte";
+	import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
-	import WindowTitle from "@/components/window/title-bar/WindowTitle.svelte";
+	import WindowTitle from "@graphite/components/window/title-bar/WindowTitle.svelte";
-	import type { PortfolioState } from "@/state-providers/portfolio";
+	import type { PortfolioState } from "@graphite/state-providers/portfolio";
 	import { getContext } from "svelte";
 	export let platform: Platform;
@@ -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>
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { getContext } from "svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import type { FullscreenState } from "@/state-providers/fullscreen";
+	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
 	const fullscreen = getContext<FullscreenState>("fullscreen");
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	export let maximized = false;
 </script>
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	export let text: string;
 </script>
@@ -1,11 +1,11 @@
 <script lang="ts" context="module">
-	import Document from "@/components/panels/Document.svelte";
+	import Document from "@graphite/components/panels/Document.svelte";
-	import IconButton from "@/components/widgets/buttons/IconButton.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
-	import LayerTree from "@/components/panels/LayerTree.svelte";
+	import LayerTree from "@graphite/components/panels/LayerTree.svelte";
-	import NodeGraph from "@/components/panels/NodeGraph.svelte";
+	import NodeGraph from "@graphite/components/panels/NodeGraph.svelte";
-	import PopoverButton from "@/components/widgets/buttons/PopoverButton.svelte";
+	import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte";
-	import Properties from "@/components/panels/Properties.svelte";
+	import Properties from "@graphite/components/panels/Properties.svelte";
-	import TextButton from "@/components/widgets/buttons/TextButton.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 LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
+	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 	const editor = getContext<Editor>("editor");
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import DialogModal from "@/components/floating-menus/DialogModal.svelte";
+	import DialogModal from "@graphite/components/floating-menus/DialogModal.svelte";
-	import LayoutCol from "@/components/layout/LayoutCol.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import Panel from "@/components/window/workspace/Panel.svelte";
+	import Panel from "@graphite/components/window/workspace/Panel.svelte";
 	import { getContext } from "svelte";
-	import type { Editor } from "@/wasm-communication/editor";
+	import type { Editor } from "@graphite/wasm-communication/editor";
-	import type { WorkspaceState } from "@/state-providers/workspace";
+	import type { WorkspaceState } from "@graphite/state-providers/workspace";
-	import type { PortfolioState } from "@/state-providers/portfolio";
+	import type { PortfolioState } from "@graphite/state-providers/portfolio";
-	import type { DialogState } from "@/state-providers/dialog";
+	import type { DialogState } from "@graphite/state-providers/dialog";
-	import type { FrontendDocumentDetails } from "@/wasm-communication/messages";
+	import type { FrontendDocumentDetails } from "@graphite/wasm-communication/messages";
 	const MIN_PANEL_SIZE = 100;
 	const PANEL_SIZES = {
@@ -1,5 +1,5 @@
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
-import { TriggerTextCopy } from "@/wasm-communication/messages";
+import { TriggerTextCopy } from "@graphite/wasm-communication/messages";
 export function createClipboardManager(editor: Editor): void {
 	// Subscribe to process backend event
@@ -1,5 +1,5 @@
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
-import { TriggerVisitLink } from "@/wasm-communication/messages";
+import { TriggerVisitLink } from "@graphite/wasm-communication/messages";
 export function createHyperlinkManager(editor: Editor): void {
 	// Subscribe to process backend event
@@ -1,14 +1,14 @@
 import { get } from "svelte/store";
-import { type DialogState } from "@/state-providers/dialog";
+import { type DialogState } from "@graphite/state-providers/dialog";
-import { type FullscreenState } from "@/state-providers/fullscreen";
+import { type FullscreenState } from "@graphite/state-providers/fullscreen";
-import { type PortfolioState } from "@/state-providers/portfolio";
+import { type PortfolioState } from "@graphite/state-providers/portfolio";
-import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@/utility-functions/keyboard-entry";
+import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@graphite/utility-functions/keyboard-entry";
-import { platformIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@graphite/utility-functions/platform";
-import { extractPixelData } from "@/utility-functions/rasterization";
+import { extractPixelData } from "@graphite/utility-functions/rasterization";
-import { stripIndents } from "@/utility-functions/strip-indents";
+import { stripIndents } from "@graphite/utility-functions/strip-indents";
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
-import { TriggerPaste } from "@/wasm-communication/messages";
+import { TriggerPaste } from "@graphite/wasm-communication/messages";
 type EventName = keyof HTMLElementEventMap | keyof WindowEventHandlersEventMap | "modifyinputfield";
 type EventListenerTarget = {
@@ -1,5 +1,5 @@
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
-import { TriggerAboutGraphiteLocalizedCommitDate } from "@/wasm-communication/messages";
+import { TriggerAboutGraphiteLocalizedCommitDate } from "@graphite/wasm-communication/messages";
 export function createLocalizationManager(editor: Editor): void {
 	function localizeTimestamp(utc: string): string {
@@ -1,11 +1,11 @@
-import { wipeDocuments } from "@/io-managers/persistence";
+import { wipeDocuments } from "@graphite/io-managers/persistence";
-import { type DialogState } from "@/state-providers/dialog";
+import { type DialogState } from "@graphite/state-providers/dialog";
-import { type IconName } from "@/utility-functions/icons";
+import { type IconName } from "@graphite/utility-functions/icons";
-import { browserVersion, operatingSystem } from "@/utility-functions/platform";
+import { browserVersion, operatingSystem } from "@graphite/utility-functions/platform";
-import { stripIndents } from "@/utility-functions/strip-indents";
+import { stripIndents } from "@graphite/utility-functions/strip-indents";
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
-import type { TextLabel } from "@/wasm-communication/messages";
+import type { TextLabel } from "@graphite/wasm-communication/messages";
-import { type TextButtonWidget, type WidgetLayout, Widget, DisplayDialogPanic } from "@/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
@@ -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 PortfolioState } from "@graphite/state-providers/portfolio";
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
-import { TriggerIndexedDbWriteDocument, TriggerIndexedDbRemoveDocument, TriggerSavePreferences, TriggerLoadAutoSaveDocuments, TriggerLoadPreferences } from "@/wasm-communication/messages";
+import { TriggerIndexedDbWriteDocument, TriggerIndexedDbRemoveDocument, TriggerSavePreferences, TriggerLoadAutoSaveDocuments, TriggerLoadPreferences } from "@graphite/wasm-communication/messages";
 const graphiteStore = createStore("graphite", "store");
@@ -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", "");
@@ -1,8 +1,8 @@
 import {writable} from "svelte/store";
-import { type IconName } from "@/utility-functions/icons";
+import { type IconName } from "@graphite/utility-functions/icons";
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
-import { type TextButtonWidget, type WidgetLayout, defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, patchWidgetLayout } from "@/wasm-communication/messages";
+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) {
@@ -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) {
@@ -1,7 +1,7 @@
 import { writable } from "svelte/store";
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
-import { TriggerFontLoad } from "@/wasm-communication/messages";
+import { TriggerFontLoad } from "@graphite/wasm-communication/messages";
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createFontsState(editor: Editor) {
@@ -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) {
@@ -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) {
@@ -2,10 +2,10 @@
 import {writable} from "svelte/store";
-import { downloadFileText, downloadFileBlob, upload } from "@/utility-functions/files";
+import { downloadFileText, downloadFileBlob, upload } from "@graphite/utility-functions/files";
-import { imaginateGenerate, imaginateCheckConnection, imaginateTerminate, updateBackendImage } from "@/utility-functions/imaginate";
+import { imaginateGenerate, imaginateCheckConnection, imaginateTerminate, updateBackendImage } from "@graphite/utility-functions/imaginate";
-import { extractPixelData, rasterizeSVG, rasterizeSVGCanvas } from "@/utility-functions/rasterization";
+import { extractPixelData, rasterizeSVG, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
-import { type Editor } from "@/wasm-communication/editor";
+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) {
@@ -3,8 +3,8 @@
 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 { UpdateNodeGraphVisibility } from "@/wasm-communication/messages";
+import { UpdateNodeGraphVisibility } from "@graphite/wasm-communication/messages";
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createWorkspaceState(editor: Editor) {
@@ -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 Add from "@graphite/../assets/icon-12px-solid/add.svg";
-import Checkmark from "@/../assets/icon-12px-solid/checkmark.svg";
+import Checkmark from "@graphite/../assets/icon-12px-solid/checkmark.svg";
-import CloseX from "@/../assets/icon-12px-solid/close-x.svg";
+import CloseX from "@graphite/../assets/icon-12px-solid/close-x.svg";
-import DropdownArrow from "@/../assets/icon-12px-solid/dropdown-arrow.svg";
+import DropdownArrow from "@graphite/../assets/icon-12px-solid/dropdown-arrow.svg";
-import Edit from "@/../assets/icon-12px-solid/edit.svg";
+import Edit from "@graphite/../assets/icon-12px-solid/edit.svg";
-import Empty12px from "@/../assets/icon-12px-solid/empty-12px.svg";
+import Empty12px from "@graphite/../assets/icon-12px-solid/empty-12px.svg";
-import FullscreenEnter from "@/../assets/icon-12px-solid/fullscreen-enter.svg";
+import FullscreenEnter from "@graphite/../assets/icon-12px-solid/fullscreen-enter.svg";
-import FullscreenExit from "@/../assets/icon-12px-solid/fullscreen-exit.svg";
+import FullscreenExit from "@graphite/../assets/icon-12px-solid/fullscreen-exit.svg";
-import Grid from "@/../assets/icon-12px-solid/grid.svg";
+import Grid from "@graphite/../assets/icon-12px-solid/grid.svg";
-import Info from "@/../assets/icon-12px-solid/info.svg";
+import Info from "@graphite/../assets/icon-12px-solid/info.svg";
-import KeyboardArrowDown from "@/../assets/icon-12px-solid/keyboard-arrow-down.svg";
+import KeyboardArrowDown from "@graphite/../assets/icon-12px-solid/keyboard-arrow-down.svg";
-import KeyboardArrowLeft from "@/../assets/icon-12px-solid/keyboard-arrow-left.svg";
+import KeyboardArrowLeft from "@graphite/../assets/icon-12px-solid/keyboard-arrow-left.svg";
-import KeyboardArrowRight from "@/../assets/icon-12px-solid/keyboard-arrow-right.svg";
+import KeyboardArrowRight from "@graphite/../assets/icon-12px-solid/keyboard-arrow-right.svg";
-import KeyboardArrowUp from "@/../assets/icon-12px-solid/keyboard-arrow-up.svg";
+import KeyboardArrowUp from "@graphite/../assets/icon-12px-solid/keyboard-arrow-up.svg";
-import KeyboardBackspace from "@/../assets/icon-12px-solid/keyboard-backspace.svg";
+import KeyboardBackspace from "@graphite/../assets/icon-12px-solid/keyboard-backspace.svg";
-import KeyboardCommand from "@/../assets/icon-12px-solid/keyboard-command.svg";
+import KeyboardCommand from "@graphite/../assets/icon-12px-solid/keyboard-command.svg";
-import KeyboardControl from "@/../assets/icon-12px-solid/keyboard-control.svg";
+import KeyboardControl from "@graphite/../assets/icon-12px-solid/keyboard-control.svg";
-import KeyboardEnter from "@/../assets/icon-12px-solid/keyboard-enter.svg";
+import KeyboardEnter from "@graphite/../assets/icon-12px-solid/keyboard-enter.svg";
-import KeyboardOption from "@/../assets/icon-12px-solid/keyboard-option.svg";
+import KeyboardOption from "@graphite/../assets/icon-12px-solid/keyboard-option.svg";
-import KeyboardShift from "@/../assets/icon-12px-solid/keyboard-shift.svg";
+import KeyboardShift from "@graphite/../assets/icon-12px-solid/keyboard-shift.svg";
-import KeyboardSpace from "@/../assets/icon-12px-solid/keyboard-space.svg";
+import KeyboardSpace from "@graphite/../assets/icon-12px-solid/keyboard-space.svg";
-import KeyboardTab from "@/../assets/icon-12px-solid/keyboard-tab.svg";
+import KeyboardTab from "@graphite/../assets/icon-12px-solid/keyboard-tab.svg";
-import Link from "@/../assets/icon-12px-solid/link.svg";
+import Link from "@graphite/../assets/icon-12px-solid/link.svg";
-import Overlays from "@/../assets/icon-12px-solid/overlays.svg";
+import Overlays from "@graphite/../assets/icon-12px-solid/overlays.svg";
-import Remove from "@/../assets/icon-12px-solid/remove.svg";
+import Remove from "@graphite/../assets/icon-12px-solid/remove.svg";
-import ResetColors from "@/../assets/icon-12px-solid/reset-colors.svg";
+import ResetColors from "@graphite/../assets/icon-12px-solid/reset-colors.svg";
-import Snapping from "@/../assets/icon-12px-solid/snapping.svg";
+import Snapping from "@graphite/../assets/icon-12px-solid/snapping.svg";
-import Swap from "@/../assets/icon-12px-solid/swap.svg";
+import Swap from "@graphite/../assets/icon-12px-solid/swap.svg";
-import VerticalEllipsis from "@/../assets/icon-12px-solid/vertical-ellipsis.svg";
+import VerticalEllipsis from "@graphite/../assets/icon-12px-solid/vertical-ellipsis.svg";
-import Warning from "@/../assets/icon-12px-solid/warning.svg";
+import Warning from "@graphite/../assets/icon-12px-solid/warning.svg";
-import WindowButtonWinClose from "@/../assets/icon-12px-solid/window-button-win-close.svg";
+import WindowButtonWinClose from "@graphite/../assets/icon-12px-solid/window-button-win-close.svg";
-import WindowButtonWinMaximize from "@/../assets/icon-12px-solid/window-button-win-maximize.svg";
+import WindowButtonWinMaximize from "@graphite/../assets/icon-12px-solid/window-button-win-maximize.svg";
-import WindowButtonWinMinimize from "@/../assets/icon-12px-solid/window-button-win-minimize.svg";
+import WindowButtonWinMinimize from "@graphite/../assets/icon-12px-solid/window-button-win-minimize.svg";
-import WindowButtonWinRestoreDown from "@/../assets/icon-12px-solid/window-button-win-restore-down.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 AlignBottom from "@graphite/../assets/icon-16px-solid/align-bottom.svg";
-import AlignHorizontalCenter from "@/../assets/icon-16px-solid/align-horizontal-center.svg";
+import AlignHorizontalCenter from "@graphite/../assets/icon-16px-solid/align-horizontal-center.svg";
-import AlignLeft from "@/../assets/icon-16px-solid/align-left.svg";
+import AlignLeft from "@graphite/../assets/icon-16px-solid/align-left.svg";
-import AlignRight from "@/../assets/icon-16px-solid/align-right.svg";
+import AlignRight from "@graphite/../assets/icon-16px-solid/align-right.svg";
-import AlignTop from "@/../assets/icon-16px-solid/align-top.svg";
+import AlignTop from "@graphite/../assets/icon-16px-solid/align-top.svg";
-import AlignVerticalCenter from "@/../assets/icon-16px-solid/align-vertical-center.svg";
+import AlignVerticalCenter from "@graphite/../assets/icon-16px-solid/align-vertical-center.svg";
-import BooleanDifference from "@/../assets/icon-16px-solid/boolean-difference.svg";
+import BooleanDifference from "@graphite/../assets/icon-16px-solid/boolean-difference.svg";
-import BooleanIntersect from "@/../assets/icon-16px-solid/boolean-intersect.svg";
+import BooleanIntersect from "@graphite/../assets/icon-16px-solid/boolean-intersect.svg";
-import BooleanSubtractBack from "@/../assets/icon-16px-solid/boolean-subtract-back.svg";
+import BooleanSubtractBack from "@graphite/../assets/icon-16px-solid/boolean-subtract-back.svg";
-import BooleanSubtractFront from "@/../assets/icon-16px-solid/boolean-subtract-front.svg";
+import BooleanSubtractFront from "@graphite/../assets/icon-16px-solid/boolean-subtract-front.svg";
-import BooleanUnion from "@/../assets/icon-16px-solid/boolean-union.svg";
+import BooleanUnion from "@graphite/../assets/icon-16px-solid/boolean-union.svg";
-import CheckboxChecked from "@/../assets/icon-16px-solid/checkbox-checked.svg";
+import CheckboxChecked from "@graphite/../assets/icon-16px-solid/checkbox-checked.svg";
-import CheckboxUnchecked from "@/../assets/icon-16px-solid/checkbox-unchecked.svg";
+import CheckboxUnchecked from "@graphite/../assets/icon-16px-solid/checkbox-unchecked.svg";
-import Copy from "@/../assets/icon-16px-solid/copy.svg";
+import Copy from "@graphite/../assets/icon-16px-solid/copy.svg";
-import EyeHidden from "@/../assets/icon-16px-solid/eye-hidden.svg";
+import EyeHidden from "@graphite/../assets/icon-16px-solid/eye-hidden.svg";
-import EyeVisible from "@/../assets/icon-16px-solid/eye-visible.svg";
+import EyeVisible from "@graphite/../assets/icon-16px-solid/eye-visible.svg";
-import Eyedropper from "@/../assets/icon-16px-solid/eyedropper.svg";
+import Eyedropper from "@graphite/../assets/icon-16px-solid/eyedropper.svg";
-import File from "@/../assets/icon-16px-solid/file.svg";
+import File from "@graphite/../assets/icon-16px-solid/file.svg";
-import FlipHorizontal from "@/../assets/icon-16px-solid/flip-horizontal.svg";
+import FlipHorizontal from "@graphite/../assets/icon-16px-solid/flip-horizontal.svg";
-import FlipVertical from "@/../assets/icon-16px-solid/flip-vertical.svg";
+import FlipVertical from "@graphite/../assets/icon-16px-solid/flip-vertical.svg";
-import Folder from "@/../assets/icon-16px-solid/folder.svg";
+import Folder from "@graphite/../assets/icon-16px-solid/folder.svg";
-import GraphiteLogo from "@/../assets/icon-16px-solid/graphite-logo.svg";
+import GraphiteLogo from "@graphite/../assets/icon-16px-solid/graphite-logo.svg";
-import NodeArtboard from "@/../assets/icon-16px-solid/node-artboard.svg";
+import NodeArtboard from "@graphite/../assets/icon-16px-solid/node-artboard.svg";
-import NodeBlur from "@/../assets/icon-16px-solid/node-blur.svg";
+import NodeBlur from "@graphite/../assets/icon-16px-solid/node-blur.svg";
-import NodeBrushwork from "@/../assets/icon-16px-solid/node-brushwork.svg";
+import NodeBrushwork from "@graphite/../assets/icon-16px-solid/node-brushwork.svg";
-import NodeColorCorrection from "@/../assets/icon-16px-solid/node-color-correction.svg";
+import NodeColorCorrection from "@graphite/../assets/icon-16px-solid/node-color-correction.svg";
-import NodeFolder from "@/../assets/icon-16px-solid/node-folder.svg";
+import NodeFolder from "@graphite/../assets/icon-16px-solid/node-folder.svg";
-import NodeGradient from "@/../assets/icon-16px-solid/node-gradient.svg";
+import NodeGradient from "@graphite/../assets/icon-16px-solid/node-gradient.svg";
-import NodeImage from "@/../assets/icon-16px-solid/node-image.svg";
+import NodeImage from "@graphite/../assets/icon-16px-solid/node-image.svg";
-import NodeImaginate from "@/../assets/icon-16px-solid/node-imaginate.svg";
+import NodeImaginate from "@graphite/../assets/icon-16px-solid/node-imaginate.svg";
-import NodeMagicWand from "@/../assets/icon-16px-solid/node-magic-wand.svg";
+import NodeMagicWand from "@graphite/../assets/icon-16px-solid/node-magic-wand.svg";
-import NodeMask from "@/../assets/icon-16px-solid/node-mask.svg";
+import NodeMask from "@graphite/../assets/icon-16px-solid/node-mask.svg";
-import NodeMotionBlur from "@/../assets/icon-16px-solid/node-motion-blur.svg";
+import NodeMotionBlur from "@graphite/../assets/icon-16px-solid/node-motion-blur.svg";
-import NodeNodes from "@/../assets/icon-16px-solid/node-nodes.svg";
+import NodeNodes from "@graphite/../assets/icon-16px-solid/node-nodes.svg";
-import NodeOutput from "@/../assets/icon-16px-solid/node-output.svg";
+import NodeOutput from "@graphite/../assets/icon-16px-solid/node-output.svg";
-import NodeShape from "@/../assets/icon-16px-solid/node-shape.svg";
+import NodeShape from "@graphite/../assets/icon-16px-solid/node-shape.svg";
-import NodeText from "@/../assets/icon-16px-solid/node-text.svg";
+import NodeText from "@graphite/../assets/icon-16px-solid/node-text.svg";
-import NodeTransform from "@/../assets/icon-16px-solid/node-transform.svg";
+import NodeTransform from "@graphite/../assets/icon-16px-solid/node-transform.svg";
-import Paste from "@/../assets/icon-16px-solid/paste.svg";
+import Paste from "@graphite/../assets/icon-16px-solid/paste.svg";
-import Random from "@/../assets/icon-16px-solid/random.svg";
+import Random from "@graphite/../assets/icon-16px-solid/random.svg";
-import Regenerate from "@/../assets/icon-16px-solid/regenerate.svg";
+import Regenerate from "@graphite/../assets/icon-16px-solid/regenerate.svg";
-import Reload from "@/../assets/icon-16px-solid/reload.svg";
+import Reload from "@graphite/../assets/icon-16px-solid/reload.svg";
-import Rescale from "@/../assets/icon-16px-solid/rescale.svg";
+import Rescale from "@graphite/../assets/icon-16px-solid/rescale.svg";
-import Reset from "@/../assets/icon-16px-solid/reset.svg";
+import Reset from "@graphite/../assets/icon-16px-solid/reset.svg";
-import Settings from "@/../assets/icon-16px-solid/settings.svg";
+import Settings from "@graphite/../assets/icon-16px-solid/settings.svg";
-import Trash from "@/../assets/icon-16px-solid/trash.svg";
+import Trash from "@graphite/../assets/icon-16px-solid/trash.svg";
-import ViewModeNormal from "@/../assets/icon-16px-solid/view-mode-normal.svg";
+import ViewModeNormal from "@graphite/../assets/icon-16px-solid/view-mode-normal.svg";
-import ViewModeOutline from "@/../assets/icon-16px-solid/view-mode-outline.svg";
+import ViewModeOutline from "@graphite/../assets/icon-16px-solid/view-mode-outline.svg";
-import ViewModePixels from "@/../assets/icon-16px-solid/view-mode-pixels.svg";
+import ViewModePixels from "@graphite/../assets/icon-16px-solid/view-mode-pixels.svg";
-import ViewportDesignMode from "@/../assets/icon-16px-solid/viewport-design-mode.svg";
+import ViewportDesignMode from "@graphite/../assets/icon-16px-solid/viewport-design-mode.svg";
-import ViewportGuideMode from "@/../assets/icon-16px-solid/viewport-guide-mode.svg";
+import ViewportGuideMode from "@graphite/../assets/icon-16px-solid/viewport-guide-mode.svg";
-import ViewportSelectMode from "@/../assets/icon-16px-solid/viewport-select-mode.svg";
+import ViewportSelectMode from "@graphite/../assets/icon-16px-solid/viewport-select-mode.svg";
-import ZoomIn from "@/../assets/icon-16px-solid/zoom-in.svg";
+import ZoomIn from "@graphite/../assets/icon-16px-solid/zoom-in.svg";
-import ZoomOut from "@/../assets/icon-16px-solid/zoom-out.svg";
+import ZoomOut from "@graphite/../assets/icon-16px-solid/zoom-out.svg";
-import ZoomReset from "@/../assets/icon-16px-solid/zoom-reset.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 MouseHintDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-drag.svg";
-import MouseHintLmbDouble from "@/../assets/icon-16px-two-tone/mouse-hint-lmb-double.svg";
+import MouseHintLmbDouble from "@graphite/../assets/icon-16px-two-tone/mouse-hint-lmb-double.svg";
-import MouseHintLmbDrag from "@/../assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg";
+import MouseHintLmbDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg";
-import MouseHintLmb from "@/../assets/icon-16px-two-tone/mouse-hint-lmb.svg";
+import MouseHintLmb from "@graphite/../assets/icon-16px-two-tone/mouse-hint-lmb.svg";
-import MouseHintMmbDrag from "@/../assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg";
+import MouseHintMmbDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg";
-import MouseHintMmb from "@/../assets/icon-16px-two-tone/mouse-hint-mmb.svg";
+import MouseHintMmb from "@graphite/../assets/icon-16px-two-tone/mouse-hint-mmb.svg";
-import MouseHintNone from "@/../assets/icon-16px-two-tone/mouse-hint-none.svg";
+import MouseHintNone from "@graphite/../assets/icon-16px-two-tone/mouse-hint-none.svg";
-import MouseHintRmbDrag from "@/../assets/icon-16px-two-tone/mouse-hint-rmb-drag.svg";
+import MouseHintRmbDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-rmb-drag.svg";
-import MouseHintRmb from "@/../assets/icon-16px-two-tone/mouse-hint-rmb.svg";
+import MouseHintRmb from "@graphite/../assets/icon-16px-two-tone/mouse-hint-rmb.svg";
-import MouseHintScrollDown from "@/../assets/icon-16px-two-tone/mouse-hint-scroll-down.svg";
+import MouseHintScrollDown from "@graphite/../assets/icon-16px-two-tone/mouse-hint-scroll-down.svg";
-import MouseHintScrollUp from "@/../assets/icon-16px-two-tone/mouse-hint-scroll-up.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 GeneralArtboardTool from "@graphite/../assets/icon-24px-two-tone/general-artboard-tool.svg";
-import GeneralEyedropperTool from "@/../assets/icon-24px-two-tone/general-eyedropper-tool.svg";
+import GeneralEyedropperTool from "@graphite/../assets/icon-24px-two-tone/general-eyedropper-tool.svg";
-import GeneralFillTool from "@/../assets/icon-24px-two-tone/general-fill-tool.svg";
+import GeneralFillTool from "@graphite/../assets/icon-24px-two-tone/general-fill-tool.svg";
-import GeneralGradientTool from "@/../assets/icon-24px-two-tone/general-gradient-tool.svg";
+import GeneralGradientTool from "@graphite/../assets/icon-24px-two-tone/general-gradient-tool.svg";
-import GeneralNavigateTool from "@/../assets/icon-24px-two-tone/general-navigate-tool.svg";
+import GeneralNavigateTool from "@graphite/../assets/icon-24px-two-tone/general-navigate-tool.svg";
-import GeneralSelectTool from "@/../assets/icon-24px-two-tone/general-select-tool.svg";
+import GeneralSelectTool from "@graphite/../assets/icon-24px-two-tone/general-select-tool.svg";
-import RasterBrushTool from "@/../assets/icon-24px-two-tone/raster-brush-tool.svg";
+import RasterBrushTool from "@graphite/../assets/icon-24px-two-tone/raster-brush-tool.svg";
-import RasterCloneTool from "@/../assets/icon-24px-two-tone/raster-clone-tool.svg";
+import RasterCloneTool from "@graphite/../assets/icon-24px-two-tone/raster-clone-tool.svg";
-import RasterDetailTool from "@/../assets/icon-24px-two-tone/raster-detail-tool.svg";
+import RasterDetailTool from "@graphite/../assets/icon-24px-two-tone/raster-detail-tool.svg";
-import RasterHealTool from "@/../assets/icon-24px-two-tone/raster-heal-tool.svg";
+import RasterHealTool from "@graphite/../assets/icon-24px-two-tone/raster-heal-tool.svg";
-import RasterImaginateTool from "@/../assets/icon-24px-two-tone/raster-imaginate-tool.svg";
+import RasterImaginateTool from "@graphite/../assets/icon-24px-two-tone/raster-imaginate-tool.svg";
-import RasterNodesTool from "@/../assets/icon-24px-two-tone/raster-nodes-tool.svg";
+import RasterNodesTool from "@graphite/../assets/icon-24px-two-tone/raster-nodes-tool.svg";
-import RasterPatchTool from "@/../assets/icon-24px-two-tone/raster-patch-tool.svg";
+import RasterPatchTool from "@graphite/../assets/icon-24px-two-tone/raster-patch-tool.svg";
-import RasterRelightTool from "@/../assets/icon-24px-two-tone/raster-relight-tool.svg";
+import RasterRelightTool from "@graphite/../assets/icon-24px-two-tone/raster-relight-tool.svg";
-import VectorEllipseTool from "@/../assets/icon-24px-two-tone/vector-ellipse-tool.svg";
+import VectorEllipseTool from "@graphite/../assets/icon-24px-two-tone/vector-ellipse-tool.svg";
-import VectorFreehandTool from "@/../assets/icon-24px-two-tone/vector-freehand-tool.svg";
+import VectorFreehandTool from "@graphite/../assets/icon-24px-two-tone/vector-freehand-tool.svg";
-import VectorLineTool from "@/../assets/icon-24px-two-tone/vector-line-tool.svg";
+import VectorLineTool from "@graphite/../assets/icon-24px-two-tone/vector-line-tool.svg";
-import VectorPathTool from "@/../assets/icon-24px-two-tone/vector-path-tool.svg";
+import VectorPathTool from "@graphite/../assets/icon-24px-two-tone/vector-path-tool.svg";
-import VectorPenTool from "@/../assets/icon-24px-two-tone/vector-pen-tool.svg";
+import VectorPenTool from "@graphite/../assets/icon-24px-two-tone/vector-pen-tool.svg";
-import VectorRectangleTool from "@/../assets/icon-24px-two-tone/vector-rectangle-tool.svg";
+import VectorRectangleTool from "@graphite/../assets/icon-24px-two-tone/vector-rectangle-tool.svg";
-import VectorShapeTool from "@/../assets/icon-24px-two-tone/vector-shape-tool.svg";
+import VectorShapeTool from "@graphite/../assets/icon-24px-two-tone/vector-shape-tool.svg";
-import VectorSplineTool from "@/../assets/icon-24px-two-tone/vector-spline-tool.svg";
+import VectorSplineTool from "@graphite/../assets/icon-24px-two-tone/vector-spline-tool.svg";
-import VectorTextTool from "@/../assets/icon-24px-two-tone/vector-text-tool.svg";
+import VectorTextTool from "@graphite/../assets/icon-24px-two-tone/vector-text-tool.svg";
 const TWO_TONE_24PX = {
 	GeneralArtboardTool: { svg: GeneralArtboardTool, size: 24 },
@@ -1,11 +1,11 @@
 /* eslint-disable camelcase */
-// import { escapeJSON } from "@/utility-functions/escape";
+// import { escapeJSON } from "@graphite/utility-functions/escape";
-import { blobToBase64 } from "@/utility-functions/files";
+import { blobToBase64 } from "@graphite/utility-functions/files";
-import { type RequestResult, requestWithUploadDownloadProgress } from "@/utility-functions/network";
+import { type RequestResult, requestWithUploadDownloadProgress } from "@graphite/utility-functions/network";
-import { type Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@graphite/wasm-communication/editor";
-import type { XY } from "@/wasm-communication/messages";
+import type { XY } from "@graphite/wasm-communication/messages";
-import { type ImaginateGenerationParameters } from "@/wasm-communication/messages";
+import { type ImaginateGenerationParameters } from "@graphite/wasm-communication/messages";
 const MAX_POLLING_RETRIES = 4;
 const SERVER_STATUS_CHECK_TIMEOUT = 5000;
@@ -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> {
@@ -1,7 +1,7 @@
-import type WasmBindgenPackage from "@/../wasm/pkg";
+import type WasmBindgenPackage from "@graphite/../wasm/pkg";
-import { panicProxy } from "@/utility-functions/panic-proxy";
+import { panicProxy } from "@graphite/utility-functions/panic-proxy";
-import { type JsMessageType } from "@/wasm-communication/messages";
+import { type JsMessageType } from "@graphite/wasm-communication/messages";
-import { createSubscriptionRouter, type SubscriptionRouter } from "@/wasm-communication/subscription-router";
+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);
@@ -2,10 +2,10 @@
 import { Transform, Type, plainToClass } from "class-transformer";
-import { type IconName, type IconSize } from "@/utility-functions/icons";
+import { type IconName, type IconSize } from "@graphite/utility-functions/icons";
-import { type WasmEditorInstance, type WasmRawInstance } from "@/wasm-communication/editor";
+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.
@@ -1,7 +1,7 @@
 import { plainToInstance } from "class-transformer";
-import { type WasmEditorInstance, type WasmRawInstance } from "@/wasm-communication/editor";
+import { type WasmEditorInstance, type WasmRawInstance } from "@graphite/wasm-communication/editor";
-import { type JsMessageType, messageMakers, type JsMessage } from "@/wasm-communication/messages";
+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
@@ -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"]
 	},
@@ -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);
@@ -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({
@@ -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",
@@ -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",
@@ -1,7 +1,7 @@
-import { WasmBezier } from "@/../wasm/pkg";
+import { WasmBezier } from "@graphite/../wasm/pkg";
-import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
+import bezierFeatures, { BezierFeatureKey } from "@graphite/features/bezier-features";
-import { renderDemo } from "@/utils/render";
+import { renderDemo } from "@graphite/utils/render";
-import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, InputOption, WasmBezierManipulatorKey, Demo } from "@/utils/types";
+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);
 	}
@@ -1,6 +1,6 @@
-import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
+import bezierFeatures, { BezierFeatureKey } from "@graphite/features/bezier-features";
-import { renderDemoPane } from "@/utils/render";
+import { renderDemoPane } from "@graphite/utils/render";
-import { BezierCurveType, BEZIER_CURVE_TYPE, BezierDemoOptions, InputOption, Demo, DemoPane, BezierDemoArgs } from "@/utils/types";
+import { BezierCurveType, BEZIER_CURVE_TYPE, BezierDemoOptions, InputOption, Demo, DemoPane, BezierDemoArgs } from "@graphite/utils/types";
 const demoDefaults = {
 	Linear: {
@@ -1,8 +1,8 @@
-import { WasmSubpath } from "@/../wasm/pkg";
+import { WasmSubpath } from "@graphite/../wasm/pkg";
-import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
+import subpathFeatures, { SubpathFeatureKey } from "@graphite/features/subpath-features";
-import { renderDemo } from "@/utils/render";
+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);
 	}
@@ -1,6 +1,6 @@
-import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
+import subpathFeatures, { SubpathFeatureKey } from "@graphite/features/subpath-features";
-import { renderDemoPane } from "@/utils/render";
+import { renderDemoPane } from "@graphite/utils/render";
-import { Demo, DemoPane, InputOption, SubpathDemoArgs } from "@/utils/types";
+import { Demo, DemoPane, InputOption, SubpathDemoArgs } from "@graphite/utils/types";
 class SubpathDemoPane extends HTMLElement implements DemoPane {
 	// Props
@@ -1,6 +1,6 @@
-import { WasmBezier } from "@/../wasm/pkg";
+import { WasmBezier } from "@graphite/../wasm/pkg";
-import { tSliderOptions, bezierTValueVariantOptions, errorOptions, minimumSeparationOptions } from "@/utils/options";
+import { tSliderOptions, bezierTValueVariantOptions, errorOptions, minimumSeparationOptions } from "@graphite/utils/options";
-import { BezierDemoOptions, WasmBezierInstance, BezierCallback, InputOption, BEZIER_T_VALUE_VARIANTS } from "@/utils/types";
+import { BezierDemoOptions, WasmBezierInstance, BezierCallback, InputOption, BEZIER_T_VALUE_VARIANTS } from "@graphite/utils/types";
 const bezierFeatures = {
 	constructor: {
@@ -1,5 +1,5 @@
-import { tSliderOptions, subpathTValueVariantOptions, intersectionErrorOptions, minimumSeparationOptions } from "@/utils/options";
+import { tSliderOptions, subpathTValueVariantOptions, intersectionErrorOptions, minimumSeparationOptions } from "@graphite/utils/options";
-import { InputOption, SubpathCallback, WasmSubpathInstance, SUBPATH_T_VALUE_VARIANTS } from "@/utils/types";
+import { InputOption, SubpathCallback, WasmSubpathInstance, SUBPATH_T_VALUE_VARIANTS } from "@graphite/utils/types";
 const subpathFeatures = {
 	constructor: {
@@ -1,12 +1,12 @@
-import BezierDemo from "@/components/BezierDemo";
+import BezierDemo from "@graphite/components/BezierDemo";
-import BezierDemoPane from "@/components/BezierDemoPane";
+import BezierDemoPane from "@graphite/components/BezierDemoPane";
-import SubpathDemo from "@/components/SubpathDemo";
+import SubpathDemo from "@graphite/components/SubpathDemo";
-import SubpathDemoPane from "@/components/SubpathDemoPane";
+import SubpathDemoPane from "@graphite/components/SubpathDemoPane";
-import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
+import bezierFeatures, { BezierFeatureKey } from "@graphite/features/bezier-features";
-import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
+import subpathFeatures, { SubpathFeatureKey } from "@graphite/features/subpath-features";
-import "@/style.css";
+import "@graphite/style.css";
 declare global {
 	interface HTMLElementTagNameMap {
@@ -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,
@@ -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");
@@ -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;
@@ -16,7 +16,7 @@
 			"node"
 		],
 		"paths": {
-			"@/*": [
+			"@graphite/*": [
 				"src/*"
 			]
 		},
@@ -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