feat: use path-alias (#771)

gui/.eslintrc.json

@@ -4,7 +4,7 @@
     "es2021": true,
     "jest": true
   },
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@dword-design/import-alias/recommended"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
@@ -30,6 +30,14 @@
         "argsIgnorePattern": "^_",
         "varsIgnorePattern": "^_"
       }
+    ],
+    "@dword-design/import-alias/prefer-alias": [
+      "error",
+      {
+        "alias": {
+          "@": "./src/"
+        }
+      }
     ]
   },
   "settings": {

gui/package.json

@@ -71,6 +71,7 @@
     ]
   },
   "devDependencies": {
+    "@dword-design/eslint-plugin-import-alias": "^4.0.8",
     "@tailwindcss/forms": "^0.5.3",
     "@tauri-apps/cli": "^2.0.0-alpha.10",
     "@types/file-saver": "^2.0.5",

gui/src/components/BVHButton.tsx

@@ -5,7 +5,7 @@ import {
   RecordBVHStatusT,
   RpcMessage,
 } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { BigButton } from './commons/BigButton';
 import { RecordIcon } from './commons/icon/RecordIcon';
 

gui/src/components/ClearDriftCompensationButton.tsx

@@ -1,6 +1,6 @@
 import { useLocalization } from '@fluent/react';
 import { ClearDriftCompensationRequestT, RpcMessage } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { BigButton } from './commons/BigButton';
 import { TrashIcon } from './commons/icon/TrashIcon';
 

gui/src/components/ClearMountingButton.tsx

@@ -1,11 +1,11 @@
 import { useLocalization } from '@fluent/react';
 import { ClearMountingResetRequestT, RpcMessage } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { BigButton } from './commons/BigButton';
 import { TrashIcon } from './commons/icon/TrashIcon';
-import { useTrackers } from '../hooks/tracker';
+import { useTrackers } from '@/hooks/tracker';
 import { Quaternion } from 'three';
-import { QuaternionFromQuatT, similarQuaternions } from '../maths/quaternion';
+import { QuaternionFromQuatT, similarQuaternions } from '@/maths/quaternion';
 import { useMemo } from 'react';
 
 const _q = new Quaternion();

gui/src/components/MainLayout.tsx

@@ -6,10 +6,10 @@ import {
   RpcMessage,
   SettingsRequestT,
 } from 'solarxr-protocol';
-import { useElemSize, useLayout } from '../hooks/layout';
+import { useElemSize, useLayout } from '@/hooks/layout';
 import { Navbar } from './Navbar';
 import { TopBar } from './TopBar';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { WidgetsComponent } from './WidgetsComponent';
 
 export function MainLayoutRoute({

gui/src/components/Navbar.tsx

@@ -8,7 +8,7 @@ import { HumanIcon } from './commons/icon/HumanIcon';
 import { RulerIcon } from './commons/icon/RulerIcon';
 import { SparkleIcon } from './commons/icon/SparkleIcon';
 import { WrenchIcon } from './commons/icon/WrenchIcons';
-import { useBreakpoint } from '../hooks/breakpoint';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export function NavButton({
   to,

gui/src/components/SerialDetectionModal.tsx

@@ -6,9 +6,9 @@ import {
   RpcMessage,
   SerialDeviceT,
 } from 'solarxr-protocol';
-import { useConfig } from '../hooks/config';
-import { useWebsocketAPI } from '../hooks/websocket-api';
-import { useWifiForm, WifiFormData } from '../hooks/wifi-form';
+import { useConfig } from '@/hooks/config';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { useWifiForm, WifiFormData } from '@/hooks/wifi-form';
 import { BaseModal } from './commons/BaseModal';
 import { Button } from './commons/Button';
 import { BulbIcon } from './commons/icon/BulbIcon';

gui/src/components/TopBar.tsx

@@ -6,7 +6,7 @@ import {
   ServerInfosRequestT,
   ServerInfosResponseT,
 } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { CloseIcon } from './commons/icon/CloseIcon';
 import { MaximiseIcon } from './commons/icon/MaximiseIcon';
 import { MinimiseIcon } from './commons/icon/MinimiseIcon';
@@ -15,10 +15,10 @@ import { ProgressBar } from './commons/ProgressBar';
 import { Typography } from './commons/Typography';
 import { DownloadIcon } from './commons/icon/DownloadIcon';
 import { open } from '@tauri-apps/plugin-shell';
-import { GH_REPO, VersionContext, DOCS_SITE } from '../App';
+import { GH_REPO, VersionContext, DOCS_SITE } from '@/App';
 import classNames from 'classnames';
 import { QuestionIcon } from './commons/icon/QuestionIcon';
-import { useBreakpoint, useIsTauri } from '../hooks/breakpoint';
+import { useBreakpoint, useIsTauri } from '@/hooks/breakpoint';
 import { GearIcon } from './commons/icon/GearIcon';
 import { invoke } from '@tauri-apps/api';
 

gui/src/components/TrackingPauseButton.tsx

@@ -1,7 +1,7 @@
 import { useLocalization } from '@fluent/react';
 import { useState } from 'react';
 import { SetPauseTrackingRequestT, RpcMessage } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { BigButton } from './commons/BigButton';
 import { PlayIcon } from './commons/icon/PlayIcon';
 import { PauseIcon } from './commons/icon/PauseIcon';

gui/src/components/VersionUpdateModal.tsx

@@ -5,8 +5,8 @@ import { Button } from './commons/Button';
 import { Typography } from './commons/Typography';
 import { open } from '@tauri-apps/plugin-shell';
 import semver from 'semver';
-import { GH_REPO, VersionContext } from '../App';
-import { error } from '../utils/logging';
+import { GH_REPO, VersionContext } from '@/App';
+import { error } from '@/utils/logging';
 
 export function VersionUpdateModal() {
   const { l10n } = useLocalization();

gui/src/components/WidgetsComponent.tsx

@@ -6,7 +6,7 @@ import { ResetButton } from './home/ResetButton';
 import { OverlayWidget } from './widgets/OverlayWidget';
 import { TipBox } from './commons/TipBox';
 import { DeveloperModeWidget } from './widgets/DeveloperModeWidget';
-import { useConfig } from '../hooks/config';
+import { useConfig } from '@/hooks/config';
 import {
   ResetType,
   RpcMessage,
@@ -15,9 +15,9 @@ import {
   StatusData,
 } from 'solarxr-protocol';
 import { useEffect, useMemo, useState } from 'react';
-import { parseStatusToLocale, useStatusContext } from '../hooks/status-system';
-import { useWebsocketAPI } from '../hooks/websocket-api';
-import { useAppContext } from '../hooks/app';
+import { parseStatusToLocale, useStatusContext } from '@/hooks/status-system';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { useAppContext } from '@/hooks/app';
 import { ClearMountingButton } from './ClearMountingButton';
 
 export function WidgetsComponent() {

gui/src/components/commons/BodyDisplay.tsx

@@ -8,8 +8,8 @@ import {
   useState,
 } from 'react';
 import { BodyPart, TrackerDataT } from 'solarxr-protocol';
-import { FlatDeviceTracker } from '../../hooks/app';
-import { useTracker } from '../../hooks/tracker';
+import { FlatDeviceTracker } from '@/hooks/app';
+import { useTracker } from '@/hooks/tracker';
 import { PersonFrontIcon } from './PersonFrontIcon';
 
 interface SlotDot {

gui/src/components/commons/BodyInteractions.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
 import { BodyPart } from 'solarxr-protocol';
 import { PersonFrontIcon } from './PersonFrontIcon';
-import { useBreakpoint } from '../../hooks/breakpoint';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export function BodyInteractions({
   leftControls,

gui/src/components/commons/BodyPartIcon.tsx

@@ -1,5 +1,5 @@
 import { BodyPart } from 'solarxr-protocol';
-import { useLocaleConfig } from '../../i18n/config';
+import { useLocaleConfig } from '@/i18n/config';
 import { AnkleIcon } from './icon/AnkleIcon';
 import { ChestIcon } from './icon/ChestIcon';
 import { ControllerIcon } from './icon/ControllerIcon';

gui/src/components/commons/Dropdown.tsx

@@ -6,7 +6,7 @@ import {
   UseFormGetValues,
   useWatch,
 } from 'react-hook-form';
-import { a11yClick } from '../../utils/a11y';
+import { a11yClick } from '@/utils/a11y';
 
 export interface DropdownItem {
   label: string;

gui/src/components/commons/LangSelector.tsx

@@ -1,8 +1,8 @@
 import { useLocalization } from '@fluent/react';
 import { useEffect, useMemo, useContext } from 'react';
 import { useForm } from 'react-hook-form';
-import { useConfig } from '../../hooks/config';
-import { langs, LangContext } from '../../i18n/config';
+import { useConfig } from '@/hooks/config';
+import { langs, LangContext } from '@/i18n/config';
 import { Dropdown, DropdownDirection } from './Dropdown';
 
 export function LangSelector({

gui/src/components/home/Home.tsx

@@ -1,19 +1,19 @@
 import { Localized, useLocalization } from '@fluent/react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { StatusData, TrackerDataT } from 'solarxr-protocol';
-import { useConfig } from '../../hooks/config';
-import { useTrackers } from '../../hooks/tracker';
-import { Typography } from '../commons/Typography';
-import { TrackerCard } from '../tracker/TrackerCard';
-import { TrackersTable } from '../tracker/TrackersTable';
+import { useConfig } from '@/hooks/config';
+import { useTrackers } from '@/hooks/tracker';
+import { Typography } from '@/components/commons/Typography';
+import { TrackerCard } from '@/components/tracker/TrackerCard';
+import { TrackersTable } from '@/components/tracker/TrackersTable';
 import {
   parseStatusToLocale,
   trackerStatusRelated,
   useStatusContext,
-} from '../../hooks/status-system';
+} from '@/hooks/status-system';
 import { useMemo } from 'react';
-import { WarningBox } from '../commons/TipBox';
-import { HeadsetIcon } from '../commons/icon/HeadsetIcon';
+import { WarningBox } from '@/components/commons/TipBox';
+import { HeadsetIcon } from '@/components/commons/icon/HeadsetIcon';
 import classNames from 'classnames';
 
 const DONT_REPEAT_STATUSES = [StatusData.StatusTrackerReset];

gui/src/components/home/ResetButton.tsx

@@ -6,18 +6,18 @@ import {
   RpcMessage,
   StatusData,
 } from 'solarxr-protocol';
-import { useConfig } from '../../hooks/config';
-import { useCountdown } from '../../hooks/countdown';
-import { useWebsocketAPI } from '../../hooks/websocket-api';
-import { playSoundOnResetStarted } from '../../sounds/sounds';
-import { BigButton } from '../commons/BigButton';
-import { Button } from '../commons/Button';
+import { useConfig } from '@/hooks/config';
+import { useCountdown } from '@/hooks/countdown';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { playSoundOnResetStarted } from '@/sounds/sounds';
+import { BigButton } from '@/components/commons/BigButton';
+import { Button } from '@/components/commons/Button';
 import {
   MountingResetIcon,
   YawResetIcon,
   FullResetIcon,
-} from '../commons/icon/ResetIcon';
-import { useStatusContext } from '../../hooks/status-system';
+} from '@/components/commons/icon/ResetIcon';
+import { useStatusContext } from '@/hooks/status-system';
 
 export function ResetButton({
   type,

gui/src/components/onboarding/BodyAssignment.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { BodyPart } from 'solarxr-protocol';
-import { FlatDeviceTracker } from '../../hooks/app';
-import { useTrackers } from '../../hooks/tracker';
-import { BodyInteractions } from '../commons/BodyInteractions';
-import { TrackerPartCard } from '../tracker/TrackerPartCard';
+import { FlatDeviceTracker } from '@/hooks/app';
+import { useTrackers } from '@/hooks/tracker';
+import { BodyInteractions } from '@/components/commons/BodyInteractions';
+import { TrackerPartCard } from '@/components/tracker/TrackerPartCard';
 import { BodyPartError } from './pages/trackers-assign/TrackerAssignment';
 
 export const SPINE_PARTS = [

gui/src/components/onboarding/NeckWarningModal.tsx

@@ -1,7 +1,7 @@
-import { Button } from '../commons/Button';
-import { WarningBox } from '../commons/TipBox';
+import { Button } from '@/components/commons/Button';
+import { WarningBox } from '@/components/commons/TipBox';
 import { Localized, useLocalization } from '@fluent/react';
-import { BaseModal } from '../commons/BaseModal';
+import { BaseModal } from '@/components/commons/BaseModal';
 import ReactModal from 'react-modal';
 
 export function NeckWarningModal({

gui/src/components/onboarding/OnboardingContextProvicer.tsx

@@ -1,8 +1,5 @@
 import { ReactNode } from 'react';
-import {
-  OnboardingContextC,
-  useProvideOnboarding,
-} from '../../hooks/onboarding';
+import { OnboardingContextC, useProvideOnboarding } from '@/hooks/onboarding';
 
 export function OnboardingContextProvider({
   children,

gui/src/components/onboarding/OnboardingLayout.tsx

@@ -1,9 +1,9 @@
 import { ReactNode, useState } from 'react';
-import { useLayout } from '../../hooks/layout';
-import { useOnboarding } from '../../hooks/onboarding';
-import { MainLayoutRoute } from '../MainLayout';
-import { TopBar } from '../TopBar';
-import { useBreakpoint } from '../../hooks/breakpoint';
+import { useLayout } from '@/hooks/layout';
+import { useOnboarding } from '@/hooks/onboarding';
+import { MainLayoutRoute } from '@/components/MainLayout';
+import { TopBar } from '@/components/TopBar';
+import { useBreakpoint } from '@/hooks/breakpoint';
 import { SkipSetupButton } from './SkipSetupButton';
 import { SkipSetupWarningModal } from './SkipSetupWarningModal';
 

gui/src/components/onboarding/SkipSetupButton.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { useEffect } from 'react';
-import { EscapeIcon } from '../commons/icon/EscapeIcon';
+import { EscapeIcon } from '@/components/commons/icon/EscapeIcon';
 
 export function SkipSetupButton({
   modalVisible,

gui/src/components/onboarding/SkipSetupWarningModal.tsx

@@ -1,7 +1,7 @@
-import { Button } from '../commons/Button';
-import { WarningBox } from '../commons/TipBox';
+import { Button } from '@/components/commons/Button';
+import { WarningBox } from '@/components/commons/TipBox';
 import { Localized, useLocalization } from '@fluent/react';
-import { BaseModal } from '../commons/BaseModal';
+import { BaseModal } from '@/components/commons/BaseModal';
 import ReactModal from 'react-modal';
 import { useNavigate } from 'react-router-dom';
 

gui/src/components/onboarding/StepperSlider.tsx

@@ -7,9 +7,9 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useElemSize } from '../../hooks/layout';
-import { CheckIcon } from '../commons/icon/CheckIcon';
-import { Typography } from '../commons/Typography';
+import { useElemSize } from '@/hooks/layout';
+import { CheckIcon } from '@/components/commons/icon/CheckIcon';
+import { Typography } from '@/components/commons/Typography';
 
 type StepComponentType = FC<{
   nextStep: () => void;

gui/src/components/onboarding/pages/CalibrationTutorial.tsx

@@ -1,13 +1,13 @@
 import { Localized, useLocalization } from '@fluent/react';
-import { useOnboarding } from '../../../hooks/onboarding';
-import { Button } from '../../commons/Button';
-import { Typography } from '../../commons/Typography';
+import { useOnboarding } from '@/hooks/onboarding';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
 import { useMemo, useState } from 'react';
-import { ProgressBar } from '../../commons/ProgressBar';
-import { LoaderIcon, SlimeState } from '../../commons/icon/LoaderIcon';
-import { useCountdown } from '../../../hooks/countdown';
+import { ProgressBar } from '@/components/commons/ProgressBar';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import { useCountdown } from '@/hooks/countdown';
 import classNames from 'classnames';
-import { TaybolIcon } from '../../commons/icon/TaybolIcon';
+import { TaybolIcon } from '@/components/commons/icon/TaybolIcon';
 
 export enum CalibrationStatus {
   SUCCESS,

gui/src/components/onboarding/pages/ConnectTracker.tsx

@@ -9,19 +9,19 @@ import {
   WifiProvisioningStatus,
   WifiProvisioningStatusResponseT,
 } from 'solarxr-protocol';
-import { useLayout } from '../../../hooks/layout';
-import { useOnboarding } from '../../../hooks/onboarding';
-import { useTrackers } from '../../../hooks/tracker';
-import { useWebsocketAPI } from '../../../hooks/websocket-api';
-import { ArrowLink } from '../../commons/ArrowLink';
-import { Button } from '../../commons/Button';
-import { LoaderIcon, SlimeState } from '../../commons/icon/LoaderIcon';
-import { ProgressBar } from '../../commons/ProgressBar';
-import { TipBox } from '../../commons/TipBox';
-import { Typography } from '../../commons/Typography';
-import { TrackerCard } from '../../tracker/TrackerCard';
-import { useBnoExists } from '../../../hooks/imu-logic';
-import { useBreakpoint } from '../../../hooks/breakpoint';
+import { useLayout } from '@/hooks/layout';
+import { useOnboarding } from '@/hooks/onboarding';
+import { useTrackers } from '@/hooks/tracker';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { ArrowLink } from '@/components/commons/ArrowLink';
+import { Button } from '@/components/commons/Button';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import { ProgressBar } from '@/components/commons/ProgressBar';
+import { TipBox } from '@/components/commons/TipBox';
+import { Typography } from '@/components/commons/Typography';
+import { TrackerCard } from '@/components/tracker/TrackerCard';
+import { useBnoExists } from '@/hooks/imu-logic';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 const BOTTOM_HEIGHT = 80;
 

gui/src/components/onboarding/pages/Done.tsx

@@ -1,8 +1,8 @@
 import { useLocalization } from '@fluent/react';
-import { useOnboarding } from '../../../hooks/onboarding';
-import { Button } from '../../commons/Button';
-import { SlimeVRIcon } from '../../commons/icon/SimevrIcon';
-import { Typography } from '../../commons/Typography';
+import { useOnboarding } from '@/hooks/onboarding';
+import { Button } from '@/components/commons/Button';
+import { SlimeVRIcon } from '@/components/commons/icon/SimevrIcon';
+import { Typography } from '@/components/commons/Typography';
 
 export function DonePage() {
   const { l10n } = useLocalization();

gui/src/components/onboarding/pages/EnterVR.tsx

@@ -1,8 +1,8 @@
 import { useLocalization } from '@fluent/react';
-import { useOnboarding } from '../../../hooks/onboarding';
-import { ArrowLink } from '../../commons/ArrowLink';
-import { Button } from '../../commons/Button';
-import { Typography } from '../../commons/Typography';
+import { useOnboarding } from '@/hooks/onboarding';
+import { ArrowLink } from '@/components/commons/ArrowLink';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
 
 export function EnterVRPage() {
   const { l10n } = useLocalization();

gui/src/components/onboarding/pages/Home.tsx

@@ -1,9 +1,9 @@
 import { useLocalization } from '@fluent/react';
-import { useOnboarding } from '../../../hooks/onboarding';
-import { Button } from '../../commons/Button';
-import { SlimeVRIcon } from '../../commons/icon/SimevrIcon';
-import { LangSelector } from '../../commons/LangSelector';
-import { Typography } from '../../commons/Typography';
+import { useOnboarding } from '@/hooks/onboarding';
+import { Button } from '@/components/commons/Button';
+import { SlimeVRIcon } from '@/components/commons/icon/SimevrIcon';
+import { LangSelector } from '@/components/commons/LangSelector';
+import { Typography } from '@/components/commons/Typography';
 
 export function HomePage() {
   const { l10n } = useLocalization();

gui/src/components/onboarding/pages/ResetTutorial.tsx

@@ -1,7 +1,7 @@
 import { useLocalization } from '@fluent/react';
-import { useOnboarding } from '../../../hooks/onboarding';
-import { Button } from '../../commons/Button';
-import { Typography } from '../../commons/Typography';
+import { useOnboarding } from '@/hooks/onboarding';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
 import { useState, useMemo, useEffect } from 'react';
 import {
   BodyPart,
@@ -12,12 +12,12 @@ import {
   SettingsRequestT,
   SettingsResponseT,
 } from 'solarxr-protocol';
-import { useTrackers } from '../../../hooks/tracker';
-import { BodyDisplay } from '../../commons/BodyDisplay';
-import { useWebsocketAPI } from '../../../hooks/websocket-api';
+import { useTrackers } from '@/hooks/tracker';
+import { BodyDisplay } from '@/components/commons/BodyDisplay';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import classNames from 'classnames';
-import { useBreakpoint } from '../../../hooks/breakpoint';
-import { log } from '../../../utils/logging';
+import { useBreakpoint } from '@/hooks/breakpoint';
+import { log } from '@/utils/logging';
 
 export function ResetTutorialPage() {
   const { isMobile } = useBreakpoint('mobile');

gui/src/components/onboarding/pages/WifiCreds.tsx

@@ -1,12 +1,12 @@
 import { Localized, useLocalization } from '@fluent/react';
-import { useOnboarding } from '../../../hooks/onboarding';
-import { useWifiForm } from '../../../hooks/wifi-form';
-import { Button } from '../../commons/Button';
-import { Input } from '../../commons/Input';
-import { Typography } from '../../commons/Typography';
+import { useOnboarding } from '@/hooks/onboarding';
+import { useWifiForm } from '@/hooks/wifi-form';
+import { Button } from '@/components/commons/Button';
+import { Input } from '@/components/commons/Input';
+import { Typography } from '@/components/commons/Typography';
 import classNames from 'classnames';
-import { useTrackers } from '../../../hooks/tracker';
-import { useBnoExists } from '../../../hooks/imu-logic';
+import { useTrackers } from '@/hooks/tracker';
+import { useBnoExists } from '@/hooks/imu-logic';
 
 export function WifiCredsPage() {
   const { l10n } = useLocalization();

gui/src/components/onboarding/pages/assignment-preparation/AssignmentTutorial.tsx

@@ -1,9 +1,9 @@
 import { useLocalization } from '@fluent/react';
-import { useOnboarding } from '../../../../hooks/onboarding';
-import { Button } from '../../../commons/Button';
-import { Typography } from '../../../commons/Typography';
-import { useTrackers } from '../../../../hooks/tracker';
-import { useBnoExists } from '../../../../hooks/imu-logic';
+import { useOnboarding } from '@/hooks/onboarding';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
+import { useTrackers } from '@/hooks/tracker';
+import { useBnoExists } from '@/hooks/imu-logic';
 import { StickerSlime } from './StickerSlime';
 import { TrackerArrow } from './TrackerArrow';
 import { ExtensionArrow } from './ExtensionArrow';

gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx

@@ -1,21 +1,18 @@
 import { useLocalization } from '@fluent/react';
 import { RpcMessage, SkeletonResetAllRequestT } from 'solarxr-protocol';
-import {
-  AutoboneContextC,
-  useProvideAutobone,
-} from '../../../../hooks/autobone';
-import { useOnboarding } from '../../../../hooks/onboarding';
-import { useWebsocketAPI } from '../../../../hooks/websocket-api';
-import { Button } from '../../../commons/Button';
-import { Typography } from '../../../commons/Typography';
-import { StepperSlider } from '../../StepperSlider';
+import { AutoboneContextC, useProvideAutobone } from '@/hooks/autobone';
+import { useOnboarding } from '@/hooks/onboarding';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
+import { StepperSlider } from '@/components/onboarding/StepperSlider';
 import { DoneStep } from './autobone-steps/Done';
 import { RequirementsStep } from './autobone-steps/Requirements';
 import { PutTrackersOnStep } from './autobone-steps/PutTrackersOn';
 import { Recording } from './autobone-steps/Recording';
 import { StartRecording } from './autobone-steps/StartRecording';
 import { VerifyResultsStep } from './autobone-steps/VerifyResults';
-import { useCountdown } from '../../../../hooks/countdown';
+import { useCountdown } from '@/hooks/countdown';
 import { CheckHeight } from './autobone-steps/СheckHeight';
 
 export function AutomaticProportionsPage() {

gui/src/components/onboarding/pages/body-proportions/BodyProportions.tsx

@@ -12,12 +12,15 @@ import {
   LabelType,
   ProportionChangeType,
   useManualProportions,
-} from '../../../../hooks/manual-proportions';
-import { useLocaleConfig } from '../../../../i18n/config';
-import { Typography } from '../../../commons/Typography';
-import { ArrowDownIcon, ArrowUpIcon } from '../../../commons/icon/ArrowIcons';
-import { useBreakpoint } from '../../../../hooks/breakpoint';
-import { debounce } from '../../../../hooks/timeout';
+} from '@/hooks/manual-proportions';
+import { useLocaleConfig } from '@/i18n/config';
+import { Typography } from '@/components/commons/Typography';
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+} from '@/components/commons/icon/ArrowIcons';
+import { useBreakpoint } from '@/hooks/breakpoint';
+import { debounce } from '@/hooks/timeout';
 
 function IncrementButton({
   children,

gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx

@@ -1,15 +1,15 @@
 import { useForm } from 'react-hook-form';
 import { RpcMessage, SkeletonResetAllRequestT } from 'solarxr-protocol';
-import { useOnboarding } from '../../../../hooks/onboarding';
-import { useWebsocketAPI } from '../../../../hooks/websocket-api';
-import { Button } from '../../../commons/Button';
-import { CheckBox } from '../../../commons/Checkbox';
-import { PersonFrontIcon } from '../../../commons/PersonFrontIcon';
-import { Typography } from '../../../commons/Typography';
+import { useOnboarding } from '@/hooks/onboarding';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { Button } from '@/components/commons/Button';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { PersonFrontIcon } from '@/components/commons/PersonFrontIcon';
+import { Typography } from '@/components/commons/Typography';
 import { BodyProportions } from './BodyProportions';
 import { useLocalization } from '@fluent/react';
 import { useEffect, useMemo } from 'react';
-import { useBreakpoint } from '../../../../hooks/breakpoint';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export function ButtonsControl() {
   const { l10n } = useLocalization();

gui/src/components/onboarding/pages/body-proportions/ProportionsChoose.tsx

@@ -1,23 +1,23 @@
-import { useOnboarding } from '../../../../hooks/onboarding';
+import { useOnboarding } from '@/hooks/onboarding';
 import { Localized, useLocalization } from '@fluent/react';
 import { useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { Typography } from '../../../commons/Typography';
-import { Button } from '../../../commons/Button';
+import { Typography } from '@/components/commons/Typography';
+import { Button } from '@/components/commons/Button';
 import {
   RpcMessage,
   SkeletonConfigRequestT,
   SkeletonBone,
   ChangeSkeletonConfigRequestT,
 } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../../../../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { save } from '@tauri-apps/plugin-dialog';
 import { writeTextFile } from '@tauri-apps/plugin-fs';
-import { useIsTauri } from '../../../../hooks/breakpoint';
-import { useAppContext } from '../../../../hooks/app';
-import { error } from '../../../../utils/logging';
+import { useIsTauri } from '@/hooks/breakpoint';
+import { useAppContext } from '@/hooks/app';
+import { error } from '@/utils/logging';
 import { fileOpen, fileSave } from 'browser-fs-access';
-import { useDebouncedEffect } from '../../../../hooks/timeout';
+import { useDebouncedEffect } from '@/hooks/timeout';
 
 export const MIN_HEIGHT = 0.4;
 export const MAX_HEIGHT = 4;

gui/src/components/onboarding/pages/body-proportions/autobone-steps/AutoboneErrorModal.tsx

@@ -1,10 +1,10 @@
 import { Localized, useLocalization } from '@fluent/react';
 import ReactModal from 'react-modal';
-import { BaseModal } from '../../../../commons/BaseModal';
-import { WarningBox } from '../../../../commons/TipBox';
-import { Button } from '../../../../commons/Button';
-import { A } from '../../../../commons/A';
-import { DOCS_SITE, SLIMEVR_DISCORD } from '../../../../../App';
+import { BaseModal } from '@/components/commons/BaseModal';
+import { WarningBox } from '@/components/commons/TipBox';
+import { Button } from '@/components/commons/Button';
+import { A } from '@/components/commons/A';
+import { DOCS_SITE, SLIMEVR_DISCORD } from '@/App';
 
 export function AutoboneErrorModal({
   isOpen = true,

gui/src/components/onboarding/pages/body-proportions/autobone-steps/Done.tsx

@@ -1,6 +1,6 @@
-import { Typography } from '../../../../commons/Typography';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
-import { Button } from '../../../../commons/Button';
+import { Button } from '@/components/commons/Button';
 
 export function DoneStep({ variant }: { variant: 'onboarding' | 'alone' }) {
   const { l10n } = useLocalization();

gui/src/components/onboarding/pages/body-proportions/autobone-steps/PutTrackersOn.tsx

@@ -1,9 +1,9 @@
-import { useBreakpoint } from '../../../../../hooks/breakpoint';
-import { useTrackers } from '../../../../../hooks/tracker';
-import { BodyDisplay } from '../../../../commons/BodyDisplay';
-import { Button } from '../../../../commons/Button';
-import { TipBox } from '../../../../commons/TipBox';
-import { Typography } from '../../../../commons/Typography';
+import { useBreakpoint } from '@/hooks/breakpoint';
+import { useTrackers } from '@/hooks/tracker';
+import { BodyDisplay } from '@/components/commons/BodyDisplay';
+import { Button } from '@/components/commons/Button';
+import { TipBox } from '@/components/commons/TipBox';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
 
 export function PutTrackersOnStep({

gui/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx

@@ -1,8 +1,8 @@
 import { ReactNode, useEffect, useState } from 'react';
-import { ProcessStatus, useAutobone } from '../../../../../hooks/autobone';
-import { ProgressBar } from '../../../../commons/ProgressBar';
-import { TipBox } from '../../../../commons/TipBox';
-import { Typography } from '../../../../commons/Typography';
+import { ProcessStatus, useAutobone } from '@/hooks/autobone';
+import { ProgressBar } from '@/components/commons/ProgressBar';
+import { TipBox } from '@/components/commons/TipBox';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
 import { P, match } from 'ts-pattern';
 import { AutoboneErrorModal } from './AutoboneErrorModal';

gui/src/components/onboarding/pages/body-proportions/autobone-steps/Requirements.tsx

@@ -1,5 +1,5 @@
-import { Button } from '../../../../commons/Button';
-import { Typography } from '../../../../commons/Typography';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
 
 export function RequirementsStep({

gui/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx

@@ -1,7 +1,7 @@
-import { useAutobone } from '../../../../../hooks/autobone';
-import { Button } from '../../../../commons/Button';
-import { TipBox } from '../../../../commons/TipBox';
-import { Typography } from '../../../../commons/Typography';
+import { useAutobone } from '@/hooks/autobone';
+import { Button } from '@/components/commons/Button';
+import { TipBox } from '@/components/commons/TipBox';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
 
 export function StartRecording({

gui/src/components/onboarding/pages/body-proportions/autobone-steps/VerifyResults.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import { ProcessStatus, useAutobone } from '../../../../../hooks/autobone';
-import { Button } from '../../../../commons/Button';
-import { Typography } from '../../../../commons/Typography';
+import { ProcessStatus, useAutobone } from '@/hooks/autobone';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
 
 export function VerifyResultsStep({

gui/src/components/onboarding/pages/body-proportions/autobone-steps/СheckHeight.tsx

@@ -5,16 +5,19 @@ import {
   HeightResponseT,
   RpcMessage,
 } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../../../../../hooks/websocket-api';
-import { Button } from '../../../../commons/Button';
-import { Typography } from '../../../../commons/Typography';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
 import { Localized, useLocalization } from '@fluent/react';
 import { useForm } from 'react-hook-form';
 import { useMemo, useState } from 'react';
-import { NumberSelector } from '../../../../commons/NumberSelector';
-import { DEFAULT_HEIGHT, MIN_HEIGHT } from '../ProportionsChoose';
-import { useLocaleConfig } from '../../../../../i18n/config';
-import { useCountdown } from '../../../../../hooks/countdown';
+import { NumberSelector } from '@/components/commons/NumberSelector';
+import {
+  DEFAULT_HEIGHT,
+  MIN_HEIGHT,
+} from '@/components/onboarding/pages/body-proportions/ProportionsChoose';
+import { useLocaleConfig } from '@/i18n/config';
+import { useCountdown } from '@/hooks/countdown';
 
 interface HeightForm {
   height: number;

gui/src/components/onboarding/pages/mounting/AutomaticMounting.tsx

@@ -1,6 +1,6 @@
-import { useOnboarding } from '../../../../hooks/onboarding';
-import { Typography } from '../../../commons/Typography';
-import { Step, StepperSlider } from '../../StepperSlider';
+import { useOnboarding } from '@/hooks/onboarding';
+import { Typography } from '@/components/commons/Typography';
+import { Step, StepperSlider } from '@/components/onboarding/StepperSlider';
 import { DoneStep } from './mounting-steps/Done';
 import { MountingResetStep } from './mounting-steps/MountingReset';
 import { PreparationStep } from './mounting-steps/Preparation';

gui/src/components/onboarding/pages/mounting/ManualMounting.tsx

@@ -1,17 +1,17 @@
 import { useMemo, useState } from 'react';
 import { AssignTrackerRequestT, BodyPart, RpcMessage } from 'solarxr-protocol';
-import { FlatDeviceTracker } from '../../../../hooks/app';
-import { useOnboarding } from '../../../../hooks/onboarding';
-import { useTrackers } from '../../../../hooks/tracker';
-import { useWebsocketAPI } from '../../../../hooks/websocket-api';
-import { MountingOrientationDegreesToQuatT } from '../../../../maths/quaternion';
-import { Button } from '../../../commons/Button';
-import { TipBox } from '../../../commons/TipBox';
-import { Typography } from '../../../commons/Typography';
-import { BodyAssignment } from '../../BodyAssignment';
+import { FlatDeviceTracker } from '@/hooks/app';
+import { useOnboarding } from '@/hooks/onboarding';
+import { useTrackers } from '@/hooks/tracker';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { MountingOrientationDegreesToQuatT } from '@/maths/quaternion';
+import { Button } from '@/components/commons/Button';
+import { TipBox } from '@/components/commons/TipBox';
+import { Typography } from '@/components/commons/Typography';
+import { BodyAssignment } from '@/components/onboarding/BodyAssignment';
 import { MountingSelectionMenu } from './MountingSelectionMenu';
 import { useLocalization } from '@fluent/react';
-import { useBreakpoint } from '../../../../hooks/breakpoint';
+import { useBreakpoint } from '@/hooks/breakpoint';
 import { Quaternion } from 'three';
 
 export function ManualMountingPage() {

gui/src/components/onboarding/pages/mounting/MountingChoose.tsx

@@ -1,10 +1,10 @@
-import { useOnboarding } from '../../../../hooks/onboarding';
+import { useOnboarding } from '@/hooks/onboarding';
 import { useLocalization } from '@fluent/react';
 import { useState } from 'react';
-import { SkipSetupWarningModal } from '../../SkipSetupWarningModal';
+import { SkipSetupWarningModal } from '@/components/onboarding/SkipSetupWarningModal';
 import classNames from 'classnames';
-import { Typography } from '../../../commons/Typography';
-import { Button } from '../../../commons/Button';
+import { Typography } from '@/components/commons/Typography';
+import { Button } from '@/components/commons/Button';
 
 export function MountingChoose() {
   const { l10n } = useLocalization();

gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx

@@ -1,17 +1,17 @@
 import classNames from 'classnames';
 import { MouseEventHandler } from 'react';
 import ReactModal from 'react-modal';
-import { useElemSize, useLayout } from '../../../../hooks/layout';
-import { Button } from '../../../commons/Button';
-import { Typography } from '../../../commons/Typography';
+import { useElemSize, useLayout } from '@/hooks/layout';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
-import { FootIcon } from '../../../commons/icon/FootIcon';
-import { rotationToQuatMap } from '../../../../maths/quaternion';
+import { FootIcon } from '@/components/commons/icon/FootIcon';
+import { rotationToQuatMap } from '@/maths/quaternion';
 import { Quaternion } from 'three';
-import { SlimeUpIcon } from '../../../commons/icon/SlimeUpIcon';
+import { SlimeUpIcon } from '@/components/commons/icon/SlimeUpIcon';
 import { BodyPart } from 'solarxr-protocol';
-import { PawIcon } from '../../../commons/icon/PawIcon';
-import { useLocaleConfig } from '../../../../i18n/config';
+import { PawIcon } from '@/components/commons/icon/PawIcon';
+import { useLocaleConfig } from '@/i18n/config';
 
 // All body parts that are right or left, are by default left!
 export const mapPart: Record<

gui/src/components/onboarding/pages/mounting/mounting-steps/Done.tsx

@@ -1,5 +1,5 @@
-import { Button } from '../../../../commons/Button';
-import { Typography } from '../../../../commons/Typography';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
 
 export function DoneStep({

gui/src/components/onboarding/pages/mounting/mounting-steps/MountingReset.tsx

@@ -1,9 +1,9 @@
 import { ResetType } from 'solarxr-protocol';
-import { Button } from '../../../../commons/Button';
-import { Typography } from '../../../../commons/Typography';
-import { ResetButton } from '../../../../home/ResetButton';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
+import { ResetButton } from '@/components/home/ResetButton';
 import { useLocalization } from '@fluent/react';
-import { useBreakpoint } from '../../../../../hooks/breakpoint';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export function MountingResetStep({
   nextStep,

gui/src/components/onboarding/pages/mounting/mounting-steps/Preparation.tsx

@@ -1,9 +1,9 @@
 import { ResetType } from 'solarxr-protocol';
-import { Button } from '../../../../commons/Button';
-import { Typography } from '../../../../commons/Typography';
-import { ResetButton } from '../../../../home/ResetButton';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
+import { ResetButton } from '@/components/home/ResetButton';
 import { useLocalization } from '@fluent/react';
-import { useBreakpoint } from '../../../../../hooks/breakpoint';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export function PreparationStep({
   nextStep,

gui/src/components/onboarding/pages/mounting/mounting-steps/PutTrackersOn.tsx

@@ -1,9 +1,9 @@
-import { useBreakpoint } from '../../../../../hooks/breakpoint';
-import { useTrackers } from '../../../../../hooks/tracker';
-import { BodyDisplay } from '../../../../commons/BodyDisplay';
-import { Button } from '../../../../commons/Button';
-import { TipBox } from '../../../../commons/TipBox';
-import { Typography } from '../../../../commons/Typography';
+import { useBreakpoint } from '@/hooks/breakpoint';
+import { useTrackers } from '@/hooks/tracker';
+import { BodyDisplay } from '@/components/commons/BodyDisplay';
+import { Button } from '@/components/commons/Button';
+import { TipBox } from '@/components/commons/TipBox';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
 
 export function PutTrackersOnStep({

gui/src/components/onboarding/pages/trackers-assign/TrackerAssignment.tsx

@@ -14,21 +14,24 @@ import {
   ChangeSettingsRequestT,
   TapDetectionSetupNotificationT,
 } from 'solarxr-protocol';
-import { FlatDeviceTracker } from '../../../../hooks/app';
-import { useChokerWarning } from '../../../../hooks/choker-warning';
-import { useOnboarding } from '../../../../hooks/onboarding';
-import { useTrackers } from '../../../../hooks/tracker';
-import { useWebsocketAPI } from '../../../../hooks/websocket-api';
-import { Button } from '../../../commons/Button';
-import { CheckBox } from '../../../commons/Checkbox';
-import { TipBox } from '../../../commons/TipBox';
-import { Typography } from '../../../commons/Typography';
-import { ASSIGNMENT_RULES, BodyAssignment } from '../../BodyAssignment';
-import { NeckWarningModal } from '../../NeckWarningModal';
+import { FlatDeviceTracker } from '@/hooks/app';
+import { useChokerWarning } from '@/hooks/choker-warning';
+import { useOnboarding } from '@/hooks/onboarding';
+import { useTrackers } from '@/hooks/tracker';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { Button } from '@/components/commons/Button';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { TipBox } from '@/components/commons/TipBox';
+import { Typography } from '@/components/commons/Typography';
+import {
+  ASSIGNMENT_RULES,
+  BodyAssignment,
+} from '@/components/onboarding/BodyAssignment';
+import { NeckWarningModal } from '@/components/onboarding/NeckWarningModal';
 import { TrackerSelectionMenu } from './TrackerSelectionMenu';
-import { useConfig } from '../../../../hooks/config';
-import { playTapSetupSound } from '../../../../sounds/sounds';
-import { useBreakpoint } from '../../../../hooks/breakpoint';
+import { useConfig } from '@/hooks/config';
+import { playTapSetupSound } from '@/sounds/sounds';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export type BodyPartError = {
   label: string | undefined;

gui/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx

@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import ReactModal from 'react-modal';
 import { BodyPart } from 'solarxr-protocol';
-import { FlatDeviceTracker } from '../../../../hooks/app';
-import { useElemSize, useLayout } from '../../../../hooks/layout';
-import { useTrackers } from '../../../../hooks/tracker';
-import { Button } from '../../../commons/Button';
-import { TipBox } from '../../../commons/TipBox';
-import { Typography } from '../../../commons/Typography';
-import { TrackerCard } from '../../../tracker/TrackerCard';
+import { FlatDeviceTracker } from '@/hooks/app';
+import { useElemSize, useLayout } from '@/hooks/layout';
+import { useTrackers } from '@/hooks/tracker';
+import { Button } from '@/components/commons/Button';
+import { TipBox } from '@/components/commons/TipBox';
+import { Typography } from '@/components/commons/Typography';
+import { TrackerCard } from '@/components/tracker/TrackerCard';
 import { useLocalization } from '@fluent/react';
 
 export function TrackerSelectionMenu({

gui/src/components/providers/AppContext.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { AppContextC, useProvideAppContext } from '../../hooks/app';
+import { AppContextC, useProvideAppContext } from '@/hooks/app';
 
 export function AppContextProvider({ children }: { children: ReactNode }) {
   const context = useProvideAppContext();

gui/src/components/providers/ConfigContext.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useContext } from 'react';
-import { ConfigContextC, useConfigProvider } from '../../hooks/config';
-import { DEFAULT_LOCALE, LangContext } from '../../i18n/config';
+import { ConfigContextC, useConfigProvider } from '@/hooks/config';
+import { DEFAULT_LOCALE, LangContext } from '@/i18n/config';
 
 export function ConfigContextProvider({ children }: { children: ReactNode }) {
   const context = useConfigProvider();

gui/src/components/providers/StatusSystemContext.tsx

@@ -1,8 +1,5 @@
 import { ReactNode } from 'react';
-import {
-  StatusSystemC,
-  useProvideStatusContext,
-} from '../../hooks/status-system';
+import { StatusSystemC, useProvideStatusContext } from '@/hooks/status-system';
 
 export function StatusProvider({ children }: { children: ReactNode }) {
   const context = useProvideStatusContext();

gui/src/components/settings/SettingsLayout.tsx

@@ -1,10 +1,10 @@
 import { ReactNode, useEffect } from 'react';
-import { useElemSize, useLayout } from '../../hooks/layout';
-import { Navbar } from '../Navbar';
-import { TopBar } from '../TopBar';
+import { useElemSize, useLayout } from '@/hooks/layout';
+import { Navbar } from '@/components/Navbar';
+import { TopBar } from '@/components/TopBar';
 import { SettingsSidebar } from './SettingsSidebar';
-import { useBreakpoint } from '../../hooks/breakpoint';
-import { Dropdown } from '../commons/Dropdown';
+import { useBreakpoint } from '@/hooks/breakpoint';
+import { Dropdown } from '@/components/commons/Dropdown';
 import { useForm } from 'react-hook-form';
 import { useLocalization } from '@fluent/react';
 import { useLocation, useNavigate } from 'react-router-dom';

gui/src/components/settings/SettingsPageLayout.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { ReactNode, useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useBreakpoint } from '../../hooks/breakpoint';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export function SettingsPageLayout({
   children,

gui/src/components/settings/SettingsSidebar.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { ReactNode, useMemo } from 'react';
 import { NavLink, useLocation, useMatch } from 'react-router-dom';
-import { Typography } from '../commons/Typography';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
 
 export function SettingsLink({

gui/src/components/settings/pages/GeneralSettings.tsx

@@ -17,19 +17,19 @@ import {
   SteamVRTrackersSettingT,
   TapDetectionSettingsT,
 } from 'solarxr-protocol';
-import { useConfig } from '../../../hooks/config';
-import { useWebsocketAPI } from '../../../hooks/websocket-api';
-import { useLocaleConfig } from '../../../i18n/config';
-import { CheckBox } from '../../commons/Checkbox';
-import { SteamIcon } from '../../commons/icon/SteamIcon';
-import { WrenchIcon } from '../../commons/icon/WrenchIcons';
-import { NumberSelector } from '../../commons/NumberSelector';
-import { Radio } from '../../commons/Radio';
-import { Typography } from '../../commons/Typography';
+import { useConfig } from '@/hooks/config';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { useLocaleConfig } from '@/i18n/config';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { SteamIcon } from '@/components/commons/icon/SteamIcon';
+import { WrenchIcon } from '@/components/commons/icon/WrenchIcons';
+import { NumberSelector } from '@/components/commons/NumberSelector';
+import { Radio } from '@/components/commons/Radio';
+import { Typography } from '@/components/commons/Typography';
 import {
   SettingsPageLayout,
   SettingsPagePaneLayout,
-} from '../SettingsPageLayout';
+} from '@/components/settings/SettingsPageLayout';
 
 interface SettingsForm {
   trackers: {

gui/src/components/settings/pages/InterfaceSettings.tsx

@@ -1,21 +1,21 @@
 import { useLocalization } from '@fluent/react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { CheckBox } from '../../commons/Checkbox';
-import { Typography } from '../../commons/Typography';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { Typography } from '@/components/commons/Typography';
 import {
   SettingsPageLayout,
   SettingsPagePaneLayout,
-} from '../SettingsPageLayout';
-import { defaultConfig, useConfig } from '../../../hooks/config';
-import { ThemeSelector } from '../../commons/ThemeSelector';
-import { SquaresIcon } from '../../commons/icon/SquaresIcon';
-import { NumberSelector } from '../../commons/NumberSelector';
-import { useLocaleConfig } from '../../../i18n/config';
-import { LangSelector } from '../../commons/LangSelector';
-import { BellIcon } from '../../commons/icon/BellIcon';
-import { Range } from '../../commons/Range';
-import { Dropdown } from '../../commons/Dropdown';
+} from '@/components/settings/SettingsPageLayout';
+import { defaultConfig, useConfig } from '@/hooks/config';
+import { ThemeSelector } from '@/components/commons/ThemeSelector';
+import { SquaresIcon } from '@/components/commons/icon/SquaresIcon';
+import { NumberSelector } from '@/components/commons/NumberSelector';
+import { useLocaleConfig } from '@/i18n/config';
+import { LangSelector } from '@/components/commons/LangSelector';
+import { BellIcon } from '@/components/commons/icon/BellIcon';
+import { Range } from '@/components/commons/Range';
+import { Dropdown } from '@/components/commons/Dropdown';
 
 interface InterfaceSettingsForm {
   appearance: {

gui/src/components/settings/pages/OSCRouterSettings.tsx

@@ -9,15 +9,15 @@ import {
   SettingsRequestT,
   SettingsResponseT,
 } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../../../hooks/websocket-api';
-import { CheckBox } from '../../commons/Checkbox';
-import { RouterIcon } from '../../commons/icon/RouterIcon';
-import { Input } from '../../commons/Input';
-import { Typography } from '../../commons/Typography';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { RouterIcon } from '@/components/commons/icon/RouterIcon';
+import { Input } from '@/components/commons/Input';
+import { Typography } from '@/components/commons/Typography';
 import {
   SettingsPageLayout,
   SettingsPagePaneLayout,
-} from '../SettingsPageLayout';
+} from '@/components/settings/SettingsPageLayout';
 
 interface OSCRouterSettingsForm {
   router: {

gui/src/components/settings/pages/Serial.tsx

@@ -13,15 +13,15 @@ import {
   SerialTrackerRebootRequestT,
   SerialUpdateResponseT,
 } from 'solarxr-protocol';
-import { useElemSize, useLayout } from '../../../hooks/layout';
-import { useWebsocketAPI } from '../../../hooks/websocket-api';
-import { Button } from '../../commons/Button';
-import { Dropdown } from '../../commons/Dropdown';
-import { Typography } from '../../commons/Typography';
+import { useElemSize, useLayout } from '@/hooks/layout';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { Button } from '@/components/commons/Button';
+import { Dropdown } from '@/components/commons/Dropdown';
+import { Typography } from '@/components/commons/Typography';
 import { Localized, useLocalization } from '@fluent/react';
-import { BaseModal } from '../../commons/BaseModal';
-import { WarningBox } from '../../commons/TipBox';
-import { useBreakpoint } from '../../../hooks/breakpoint';
+import { BaseModal } from '@/components/commons/BaseModal';
+import { WarningBox } from '@/components/commons/TipBox';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export interface SerialForm {
   port: string;

gui/src/components/settings/pages/VMCSettings.tsx

@@ -9,18 +9,18 @@ import {
   OSCSettingsT,
   VMCOSCSettingsT,
 } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../../../hooks/websocket-api';
-import { CheckBox } from '../../commons/Checkbox';
-import { FileInput } from '../../commons/FileInput';
-import { VMCIcon } from '../../commons/icon/VMCIcon';
-import { Input } from '../../commons/Input';
-import { Typography } from '../../commons/Typography';
-import { magic } from '../../../utils/formatting';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { FileInput } from '@/components/commons/FileInput';
+import { VMCIcon } from '@/components/commons/icon/VMCIcon';
+import { Input } from '@/components/commons/Input';
+import { Typography } from '@/components/commons/Typography';
+import { magic } from '@/utils/formatting';
 import {
   SettingsPageLayout,
   SettingsPagePaneLayout,
-} from '../SettingsPageLayout';
-import { error } from '../../../utils/logging';
+} from '@/components/settings/SettingsPageLayout';
+import { error } from '@/utils/logging';
 
 interface VMCSettingsForm {
   vmc: {

gui/src/components/settings/pages/VRCOSCSettings.tsx

@@ -10,15 +10,15 @@ import {
   SettingsResponseT,
   VRCOSCSettingsT,
 } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../../../hooks/websocket-api';
-import { CheckBox } from '../../commons/Checkbox';
-import { VRCIcon } from '../../commons/icon/VRCIcon';
-import { Input } from '../../commons/Input';
-import { Typography } from '../../commons/Typography';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { VRCIcon } from '@/components/commons/icon/VRCIcon';
+import { Input } from '@/components/commons/Input';
+import { Typography } from '@/components/commons/Typography';
 import {
   SettingsPageLayout,
   SettingsPagePaneLayout,
-} from '../SettingsPageLayout';
+} from '@/components/settings/SettingsPageLayout';
 
 interface VRCOSCSettingsForm {
   vrchat: {

gui/src/components/tracker/SingleTrackerBodyAssignmentMenu.tsx

@@ -2,14 +2,14 @@ import classNames from 'classnames';
 import { useForm } from 'react-hook-form';
 import ReactModal from 'react-modal';
 import { BodyPart } from 'solarxr-protocol';
-import { Button } from '../commons/Button';
-import { CheckBox } from '../commons/Checkbox';
-import { Typography } from '../commons/Typography';
-import { BodyAssignment } from '../onboarding/BodyAssignment';
+import { Button } from '@/components/commons/Button';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { Typography } from '@/components/commons/Typography';
+import { BodyAssignment } from '@/components/onboarding/BodyAssignment';
 import { useLocalization } from '@fluent/react';
-import { NeckWarningModal } from '../onboarding/NeckWarningModal';
-import { useChokerWarning } from '../../hooks/choker-warning';
-import { useBreakpoint } from '../../hooks/breakpoint';
+import { NeckWarningModal } from '@/components/onboarding/NeckWarningModal';
+import { useChokerWarning } from '@/hooks/choker-warning';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export function SingleTrackerBodyAssignmentMenu({
   isOpen,

gui/src/components/tracker/TrackerBattery.tsx

@@ -1,7 +1,7 @@
-import { useConfig } from '../../hooks/config';
-import { useLocaleConfig } from '../../i18n/config';
-import { BatteryIcon } from '../commons/icon/BatteryIcon';
-import { Typography } from '../commons/Typography';
+import { useConfig } from '@/hooks/config';
+import { useLocaleConfig } from '@/i18n/config';
+import { BatteryIcon } from '@/components/commons/icon/BatteryIcon';
+import { Typography } from '@/components/commons/Typography';
 
 export function TrackerBattery({
   value,

gui/src/components/tracker/TrackerCard.tsx

@@ -4,13 +4,13 @@ import {
   TrackerDataT,
   TrackerStatus as TrackerStatusEnum,
 } from 'solarxr-protocol';
-import { Typography } from '../commons/Typography';
+import { Typography } from '@/components/commons/Typography';
 import { TrackerBattery } from './TrackerBattery';
 import { TrackerWifi } from './TrackerWifi';
 import { TrackerStatus } from './TrackerStatus';
 import classNames from 'classnames';
-import { useTracker } from '../../hooks/tracker';
-import { BodyPartIcon } from '../commons/BodyPartIcon';
+import { useTracker } from '@/hooks/tracker';
+import { BodyPartIcon } from '@/components/commons/BodyPartIcon';
 
 function TrackerBig({
   device,

gui/src/components/tracker/TrackerPartCard.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import { MouseEventHandler, useEffect, useMemo, useState } from 'react';
 import { BodyPart, TrackerDataT } from 'solarxr-protocol';
-import { FlatDeviceTracker } from '../../hooks/app';
-import { useTracker } from '../../hooks/tracker';
-import { Typography } from '../commons/Typography';
+import { FlatDeviceTracker } from '@/hooks/app';
+import { useTracker } from '@/hooks/tracker';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
-import { WarningIcon } from '../commons/icon/WarningIcon';
+import { WarningIcon } from '@/components/commons/icon/WarningIcon';
 
 function Tracker({
   tracker,

gui/src/components/tracker/TrackerSettings.tsx

@@ -10,24 +10,24 @@ import {
   ImuType,
   RpcMessage,
 } from 'solarxr-protocol';
-import { useDebouncedEffect } from '../../hooks/timeout';
-import { useTrackerFromId } from '../../hooks/tracker';
-import { useWebsocketAPI } from '../../hooks/websocket-api';
+import { useDebouncedEffect } from '@/hooks/timeout';
+import { useTrackerFromId } from '@/hooks/tracker';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import {
   MountingOrientationDegreesToQuatT,
   QuaternionFromQuatT,
   rotationToQuatMap,
   similarQuaternions,
-} from '../../maths/quaternion';
-import { ArrowLink } from '../commons/ArrowLink';
-import { BodyPartIcon } from '../commons/BodyPartIcon';
-import { Button } from '../commons/Button';
-import { CheckBox } from '../commons/Checkbox';
-import { WarningIcon } from '../commons/icon/WarningIcon';
-import { Input } from '../commons/Input';
-import { Typography } from '../commons/Typography';
-import { MountingSelectionMenu } from '../onboarding/pages/mounting/MountingSelectionMenu';
-import { IMUVisualizerWidget } from '../widgets/IMUVisualizerWidget';
+} from '@/maths/quaternion';
+import { ArrowLink } from '@/components/commons/ArrowLink';
+import { BodyPartIcon } from '@/components/commons/BodyPartIcon';
+import { Button } from '@/components/commons/Button';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { WarningIcon } from '@/components/commons/icon/WarningIcon';
+import { Input } from '@/components/commons/Input';
+import { Typography } from '@/components/commons/Typography';
+import { MountingSelectionMenu } from '@/components/onboarding/pages/mounting/MountingSelectionMenu';
+import { IMUVisualizerWidget } from '@/components/widgets/IMUVisualizerWidget';
 import { SingleTrackerBodyAssignmentMenu } from './SingleTrackerBodyAssignmentMenu';
 import { TrackerCard } from './TrackerCard';
 import { Quaternion } from 'three';

gui/src/components/tracker/TrackerStatus.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { TrackerStatus as TrackerStatusEnum } from 'solarxr-protocol';
-import { Typography } from '../commons/Typography';
+import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
 
 const statusLabelMap: { [key: number]: string } = {

gui/src/components/tracker/TrackerWifi.tsx

@@ -1,5 +1,5 @@
-import { WifiIcon } from '../commons/icon/WifiIcon';
-import { Typography } from '../commons/Typography';
+import { WifiIcon } from '@/components/commons/icon/WifiIcon';
+import { Typography } from '@/components/commons/Typography';
 
 export function TrackerWifi({
   rssi,

gui/src/components/tracker/TrackersTable.tsx

@@ -7,19 +7,16 @@ import {
   TrackerIdT,
   TrackerStatus as TrackerStatusEnum,
 } from 'solarxr-protocol';
-import { FlatDeviceTracker } from '../../hooks/app';
-import { useConfig } from '../../hooks/config';
-import { useTracker } from '../../hooks/tracker';
-import { BodyPartIcon } from '../commons/BodyPartIcon';
-import { Typography } from '../commons/Typography';
-import { formatVector3 } from '../../utils/formatting';
+import { FlatDeviceTracker } from '@/hooks/app';
+import { useConfig } from '@/hooks/config';
+import { useTracker } from '@/hooks/tracker';
+import { BodyPartIcon } from '@/components/commons/BodyPartIcon';
+import { Typography } from '@/components/commons/Typography';
+import { formatVector3 } from '@/utils/formatting';
 import { TrackerBattery } from './TrackerBattery';
 import { TrackerStatus } from './TrackerStatus';
 import { TrackerWifi } from './TrackerWifi';
-import {
-  trackerStatusRelated,
-  useStatusContext,
-} from '../../hooks/status-system';
+import { trackerStatusRelated, useStatusContext } from '@/hooks/status-system';
 
 enum DisplayColumn {
   NAME,

gui/src/components/vr-mode/VRModePage.tsx

@@ -1,4 +1,4 @@
-import { WidgetsComponent } from '../WidgetsComponent';
+import { WidgetsComponent } from '@/components/WidgetsComponent';
 
 export function VRModePage() {
   return (

gui/src/components/widgets/DeveloperModeWidget.tsx

@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { useConfig } from '../../hooks/config';
-import { useWebsocketAPI } from '../../hooks/websocket-api';
-import { CheckBox } from '../commons/Checkbox';
+import { useConfig } from '@/hooks/config';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { CheckBox } from '@/components/commons/Checkbox';
 import { useLocalization } from '@fluent/react';
-import { Typography } from '../commons/Typography';
+import { Typography } from '@/components/commons/Typography';
 
 export interface DeveloperModeWidgetForm {
   highContrast: boolean;

gui/src/components/widgets/IMUVisualizerWidget.tsx

@@ -1,16 +1,16 @@
 import { useEffect, useMemo, useState } from 'react';
 import { TrackerDataT } from 'solarxr-protocol';
-import { useTracker } from '../../hooks/tracker';
-import { Typography } from '../commons/Typography';
-import { formatVector3 } from '../../utils/formatting';
+import { useTracker } from '@/hooks/tracker';
+import { Typography } from '@/components/commons/Typography';
+import { formatVector3 } from '@/utils/formatting';
 import { Canvas, useLoader } from '@react-three/fiber';
 import * as THREE from 'three';
 import { PerspectiveCamera, Vector3 } from 'three';
-import { Button } from '../commons/Button';
-import { QuatObject } from '../../maths/quaternion';
+import { Button } from '@/components/commons/Button';
+import { QuatObject } from '@/maths/quaternion';
 import { useLocalization } from '@fluent/react';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { Vector3Object } from '../../maths/vector3';
+import { Vector3Object } from '@/maths/vector3';
 
 const groundColor = '#4444aa';
 

gui/src/components/widgets/OverlayWidget.tsx

@@ -6,9 +6,9 @@ import {
   OVERLAY_DISPLAY_SETTINGS_TOPIC,
   PayloadData,
   usePubSub,
-} from '../../hooks/pubSub';
-import { CheckBox } from '../commons/Checkbox';
-import { Typography } from '../commons/Typography';
+} from '@/hooks/pubSub';
+import { CheckBox } from '@/components/commons/Checkbox';
+import { Typography } from '@/components/commons/Typography';
 
 export function OverlayWidget() {
   const { l10n } = useLocalization();

gui/src/components/widgets/SkeletonVisualizerWidget.tsx

@@ -1,10 +1,10 @@
 import { Canvas } from '@react-three/fiber';
-import { useAppContext } from '../../hooks/app';
+import { useAppContext } from '@/hooks/app';
 import { Bone, PerspectiveCamera, Quaternion, Skeleton } from 'three';
 import { getHelperFromSkeleton } from 'three/examples/jsm/utils/SkeletonUtils';
 import { useMemo } from 'react';
-import { Vector3FromVec3fT } from '../../maths/vector3';
-import { QuaternionFromQuatT } from '../../maths/quaternion';
+import { Vector3FromVec3fT } from '@/maths/vector3';
+import { QuaternionFromQuatT } from '@/maths/quaternion';
 
 export const threeSkeleton = (() => {
   const bones = [];

gui/src/hooks/app.ts

@@ -18,11 +18,11 @@ import {
   StartDataFeedT,
   TrackerDataT,
 } from 'solarxr-protocol';
-import { playSoundOnResetStarted } from '../sounds/sounds';
+import { playSoundOnResetStarted } from '@/sounds/sounds';
 import { useConfig } from './config';
 import { useDataFeedConfig } from './datafeed-config';
 import { useWebsocketAPI } from './websocket-api';
-import { error } from '../utils/logging';
+import { error } from '@/utils/logging';
 
 export interface FlatDeviceTracker {
   device?: DeviceDataT;

gui/src/hooks/autobone.ts

@@ -11,7 +11,7 @@ import {
 } from 'solarxr-protocol';
 import { useWebsocketAPI } from './websocket-api';
 import { useLocalization } from '@fluent/react';
-import { log } from '../utils/logging';
+import { log } from '@/utils/logging';
 
 export enum ProcessStatus {
   PENDING,

gui/src/hooks/config.ts

@@ -1,8 +1,8 @@
 import { BaseDirectory, readTextFile } from '@tauri-apps/plugin-fs';
 
 import { createContext, useContext, useState } from 'react';
-import { DeveloperModeWidgetForm } from '../components/widgets/DeveloperModeWidget';
-import { error } from '../utils/logging';
+import { DeveloperModeWidgetForm } from '@/components/widgets/DeveloperModeWidget';
+import { error } from '@/utils/logging';
 import { useDebouncedEffect } from './timeout';
 
 export interface WindowConfig {

gui/src/hooks/tracker.ts

@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { BodyPart, TrackerDataT, TrackerStatus } from 'solarxr-protocol';
-import { QuaternionFromQuatT, QuaternionToEulerDegrees } from '../maths/quaternion';
+import { QuaternionFromQuatT, QuaternionToEulerDegrees } from '@/maths/quaternion';
 import { useAppContext } from './app';
 import { useLocalization } from '@fluent/react';
 import { useDataFeedConfig } from './datafeed-config';
 import { Quaternion, Vector3 } from 'three';
-import { Vector3FromVec3fT } from '../maths/vector3';
+import { Vector3FromVec3fT } from '@/maths/vector3';
 
 export function useTrackers() {
   const { trackers } = useAppContext();

gui/src/hooks/websocket-api.ts

@@ -13,7 +13,7 @@ import {
 
 import { Builder, ByteBuffer } from 'flatbuffers';
 import { useInterval } from './timeout';
-import { log } from '../utils/logging';
+import { log } from '@/utils/logging';
 
 export interface WebSocketApi {
   isConnected: boolean;

gui/src/i18n/config.tsx

@@ -10,7 +10,7 @@ import {
   useContext,
 } from 'react';
 import { exists, readTextFile, BaseDirectory } from '@tauri-apps/plugin-fs';
-import { error } from '../utils/logging';
+import { error } from '@/utils/logging';
 
 export const defaultNS = 'translation';
 export const DEFAULT_LOCALE = 'en';

gui/tsconfig.json

@@ -14,7 +14,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+        "@/*": [
+            "./src/*"
+        ],
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

gui/vite.config.ts

@@ -1,6 +1,7 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig, PluginOption } from 'vite';
 import { execSync } from 'child_process';
+import path from 'path'
 import { visualizer } from 'rollup-plugin-visualizer';
 
 const commitHash = execSync('git rev-parse --verify --short HEAD').toString().trim();
@@ -48,4 +49,9 @@ export default defineConfig({
     needsInterop: ['solarxr-protocol'],
     include: ['solarxr-protocol'],
   },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
 });

package-lock.json

@@ -59,6 +59,7 @@
         "typescript": "^5.1.6"
       },
       "devDependencies": {
+        "@dword-design/eslint-plugin-import-alias": "^4.0.8",
         "@tailwindcss/forms": "^0.5.3",
         "@tauri-apps/cli": "^2.0.0-alpha.10",
         "@types/file-saver": "^2.0.5",
@@ -2328,6 +2329,63 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@dword-design/dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@dword-design/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha512-OFmAmzKiDUh9m7WRMYcoEOPI7b5tS5hdqQmtKDwF+ZssVJv8a+GHo9VOtFsmlw3h8Roh/9QzFWIsjSFZyQUMdg==",
+      "dev": true,
+      "dependencies": {
+        "babel-plugin-add-module-exports": "^1.0.2"
+      }
+    },
+    "node_modules/@dword-design/endent": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@dword-design/endent/-/endent-1.4.1.tgz",
+      "integrity": "sha512-e2sCTzth5kyRdM0o+yEb5wBVzUdJL8Y6HblRGRV0Bif0knf1ZjRLhUjdCrqM+Muirb68X/xJzgdRDJVmLqgXGA==",
+      "dev": true,
+      "dependencies": {
+        "@dword-design/dedent": "^0.7.0",
+        "fast-json-parse": "^1.0.3",
+        "objectorarray": "^1.0.3"
+      }
+    },
+    "node_modules/@dword-design/eslint-plugin-import-alias": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@dword-design/eslint-plugin-import-alias/-/eslint-plugin-import-alias-4.0.8.tgz",
+      "integrity": "sha512-u20BC0eJ6MHhGen+lG38nf/dvlQI7g1GdXLZbgJfOeGT+GKYey7SVTdotY0X4iKWFGGqElkW0bbOuF07T90VOA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.10.2",
+        "@dword-design/functions": "^5.0.22",
+        "babel-plugin-module-resolver": "^5.0.0",
+        "deepmerge": "^4.3.1",
+        "jiti": "^1.18.2"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/dword-design"
+      }
+    },
+    "node_modules/@dword-design/functions": {
+      "version": "5.0.24",
+      "resolved": "https://registry.npmjs.org/@dword-design/functions/-/functions-5.0.24.tgz",
+      "integrity": "sha512-gTNkRMMAnmQa29sExIdYxqYxHWZtPo7b5sk0vHVK5iKKQu41QBTD6QHZH9mmohdkXGndA+qkVP3+KYKU3iMo7Q==",
+      "dev": true,
+      "dependencies": {
+        "@dword-design/endent": "^1.0.0",
+        "delay": "^5.0.0",
+        "lodash": "^4.17.15",
+        "tinycolor2": "^1.4.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/dword-design"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -4127,6 +4185,12 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/babel-plugin-add-module-exports": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-1.0.4.tgz",
+      "integrity": "sha512-g+8yxHUZ60RcyaUpfNzy56OtWW+x9cyEe9j+CranqLiqbju2yf/Cy6ZtYK40EZxtrdHllzlVZgLmcOUCTlJ7Jg==",
+      "dev": true
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -4141,6 +4205,62 @@
         "npm": ">=6"
       }
     },
+    "node_modules/babel-plugin-module-resolver": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-5.0.0.tgz",
+      "integrity": "sha512-g0u+/ChLSJ5+PzYwLwP8Rp8Rcfowz58TJNCe+L/ui4rpzE/mg//JVX0EWBUYoxaextqnwuGHzfGp2hh0PPV25Q==",
+      "dev": true,
+      "dependencies": {
+        "find-babel-config": "^2.0.0",
+        "glob": "^8.0.3",
+        "pkg-up": "^3.1.0",
+        "reselect": "^4.1.7",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/babel-plugin-module-resolver/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/babel-plugin-module-resolver/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/babel-plugin-module-resolver/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz",
@@ -4781,6 +4901,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delay": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/delay/-/delay-5.0.0.tgz",
+      "integrity": "sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -5770,6 +5902,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fast-json-parse": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fast-json-parse/-/fast-json-parse-1.0.3.tgz",
+      "integrity": "sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==",
+      "dev": true
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -5818,6 +5956,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-babel-config": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-babel-config/-/find-babel-config-2.0.0.tgz",
+      "integrity": "sha512-dOKT7jvF3hGzlW60Gc3ONox/0rRZ/tz7WCil0bqA1In/3I8f1BctpXahRnEKDySZqci7u+dqq93sZST9fOJpFw==",
+      "dev": true,
+      "dependencies": {
+        "json5": "^2.1.1",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -7825,6 +7976,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/objectorarray": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/objectorarray/-/objectorarray-1.0.5.tgz",
+      "integrity": "sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==",
+      "dev": true
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -9421,6 +9578,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==",
+      "dev": true
+    },
     "node_modules/resolve": {
       "version": "1.22.4",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
@@ -10255,6 +10418,12 @@
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
       "dev": true
     },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
+      "dev": true
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",