chore: Normalize paths to '@/' alias

Commands used:

```bash
  cd packages

  while read -r file
  do
    echo file is $file
    path="${file##*/src}"
    path="${path%/*}"
    path="${path#/}"
    path="${path:-.}"
    echo file=$file
    echo path=$path
    sed -i  -r "s|(import .*')(\..*)';|printf  \"\1@/\"\; realpath --relative-to=. -m \"${path}/\2\" \| tr -d \"\n\" \; printf \"'; \"\;|ge" "$file"
  done < <(fd . legacy/src -t f -e ts -e tsx)

  while read -r file
  do
    echo file is $file
    path="${file##*/src}"
    path="${path%/*}"
    path="${path#/}"
    path="${path:-.}"
    echo file=$file
    echo path=$path
    sed -i  -r "s|(import .*')(\..*)';|printf  \"\1@/\"\; realpath --relative-to=. -m \"${path}/\2\" \| tr -d \"\n\" \; printf \"'; \"\;|ge" "$file"
  done < <(fd . libmmel/src -t f -e ts -e tsx)
```

packages/legacy/src/Main.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import MainExtension from './Main';
+import MainExtension from '@/Main';
 
 test('MainExtension is a function', () => {
   expect(MainExtension).toBeInstanceOf(Function);

packages/legacy/src/Main.tsx

@@ -2,10 +2,10 @@ import { FocusStyleManager, HotkeysProvider } from '@blueprintjs/core';
 import { DatasetContext } from '@riboseinc/paneron-extension-kit/context';
 import React from 'react';
 import { useContext, useMemo, useState } from 'react';
-import RepositoryView from './smart/ui/app/RepoView';
-import { RepoIndex, repoIndexPath } from './smart/model/repo';
-import { LoadingScreen } from './smart/ui/common/Loading';
-import { createEmptyIndex } from './smart/utils/repo/CommonFunctions';
+import RepositoryView from '@/smart/ui/app/RepoView';
+import { RepoIndex, repoIndexPath } from '@/smart/model/repo';
+import { LoadingScreen } from '@/smart/ui/common/Loading';
+import { createEmptyIndex } from '@/smart/utils/repo/CommonFunctions';
 
 const MainExtension: React.FC<Record<never, never>> = function () {
   const { useObjectData } = useContext(DatasetContext);

packages/legacy/src/css/MGDButton.ts

@@ -5,7 +5,7 @@
 
 import { css, SerializedStyles } from '@emotion/react';
 import { CSSProperties } from 'react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 export const mgdButton: CSSProperties = {
   fontWeight    : CSSROOTVARIABLES.fontWeightRegular,

packages/legacy/src/css/MGDComponentBar.ts

@@ -4,7 +4,7 @@
  */
 
 import { CSSProperties } from 'react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 export const mgdComponentBar: CSSProperties = {
   backgroundColor : CSSROOTVARIABLES['--colour--bsi-light-teal'],

packages/legacy/src/css/MGDDisplayPane.ts

@@ -5,7 +5,7 @@
 
 import { css } from '@emotion/react';
 import { CSSProperties } from 'react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 export const mgd_display_pane = css`
   background-color: ${CSSROOTVARIABLES['--colour--bsi-pale-red']};

packages/legacy/src/css/MGDLegend.ts

@@ -4,7 +4,7 @@
  */
 
 import { CSSProperties } from 'react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 export const mgdLegend: CSSProperties = {
   fontWeight      : CSSROOTVARIABLES.fontWeightRegular,

packages/legacy/src/css/MGDLegendEntry.ts

@@ -4,7 +4,7 @@
  */
 
 import { CSSProperties } from 'react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 export const mgdLegendEntry: CSSProperties = {
   display        : 'flex',

packages/legacy/src/css/MGDProcessBox.ts

@@ -7,7 +7,7 @@
 /** @jsxFrag React.Fragment */
 
 import { css } from '@emotion/react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 export const mgd_process_box = css`
   font-weight: ${CSSROOTVARIABLES['--font-weight--regular']};

packages/legacy/src/css/MGDSidebar.ts

@@ -4,7 +4,7 @@
  */
 
 import { CSSProperties } from 'react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 export const mgdSidebar: CSSProperties = {
   fontWeight      : CSSROOTVARIABLES.fontWeightRegular,

packages/legacy/src/css/MGDTabs.ts

@@ -4,7 +4,7 @@
  */
 
 import { css } from '@emotion/react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 

packages/legacy/src/css/components.ts

@@ -4,7 +4,7 @@
  */
 
 import { css } from '@emotion/react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 export const vertical_line = css`
   border-left: 2px solid ${CSSROOTVARIABLES['--colour--black']};

packages/legacy/src/css/form.ts

@@ -5,7 +5,7 @@
 
 import { css } from '@emotion/react';
 import { CSSProperties } from 'react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 const normal_font_style = css`
   font-weight: ${CSSROOTVARIABLES['--font-weight--regular']};

packages/legacy/src/css/layout.ts

@@ -5,7 +5,7 @@
 
 import { css } from '@emotion/react';
 import { CSSProperties } from 'react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 export const flownode_top_left_button_layout = css`
   position: fixed;

packages/legacy/src/css/shame.ts

@@ -9,7 +9,7 @@
 
 import { css } from '@emotion/react';
 import { CSSProperties } from 'react';
-import { CSSROOTVARIABLES } from './root.css';
+import { CSSROOTVARIABLES } from '@/css/root.css';
 
 export const shameLabel: CSSProperties = {
   fontWeight : CSSROOTVARIABLES.fontWeightRegular,

packages/legacy/src/smart/MGDComponents/MGDButtonGroup.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { mgdButtonGroup } from '../../css/MGDButtonGroup';
+import { mgdButtonGroup } from '@/css/MGDButtonGroup';
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 

packages/legacy/src/smart/MGDComponents/MGDComponentBar.tsx

@@ -4,7 +4,7 @@
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 import React from 'react';
-import { mgdComponentBar } from '../../css/MGDComponentBar';
+import { mgdComponentBar } from '@/css/MGDComponentBar';
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 

packages/legacy/src/smart/MGDComponents/MGDContainer.tsx

@@ -5,7 +5,7 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
 import React from 'react';
-import { mgdContainer } from '../../css/MGDContainer';
+import { mgdContainer } from '@/css/MGDContainer';
 
 interface OwnProps {
   children: React.ReactNode;

packages/legacy/src/smart/MGDComponents/MGDHeading.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { mgdHeading } from '../../css/form';
+import { mgdHeading } from '@/css/form';
 
 interface OwnProps {
   children: React.ReactNode;

packages/legacy/src/smart/MGDComponents/MGDLabel.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { mgdLabel } from '../../css/form';
+import { mgdLabel } from '@/css/form';
 
 interface OwnProps {
   children: React.ReactNode;

packages/legacy/src/smart/MGDComponents/MGDProcessBox.tsx

@@ -7,7 +7,7 @@
 /** @jsxFrag React.Fragment */
 
 import { jsx, SerializedStyles } from '@emotion/react';
-import { mgd_process_box } from '../../css/MGDProcessBox';
+import { mgd_process_box } from '@/css/MGDProcessBox';
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 

packages/legacy/src/smart/MGDComponents/MGDSidebar.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { mgdSidebar } from '../../css/MGDSidebar';
+import { mgdSidebar } from '@/css/MGDSidebar';
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 

packages/legacy/src/smart/MGDComponents/MGDTextarea.tsx

@@ -6,7 +6,7 @@
 
 import { TextArea } from '@blueprintjs/core';
 import React, { ChangeEvent } from 'react';
-import { mgdTextarea } from '../../css/form';
+import { mgdTextarea } from '@/css/form';
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 

packages/legacy/src/smart/model/FlowContainer.ts

@@ -13,7 +13,7 @@ import {
   isEditorData,
   ModelType,
 } from './editormodel';
-import { MMELtoFlowEntries } from './States';
+import { MMELtoFlowEntries } from '@/smart/model/States';
 import {
   MMELComment,
   MMELFigure,
@@ -23,7 +23,7 @@ import {
 } from '@paneron/libmmel/interface/supportinterface';
 import { SerializedStyles } from '@emotion/react';
 import React from 'react';
-import { MMELRepo, RepoIndex } from './repo';
+import { MMELRepo, RepoIndex } from '@/smart/model/repo';
 
 export interface EdgeContainer {
   id: string;

packages/legacy/src/smart/model/Measurement.ts

@@ -7,7 +7,7 @@ import {
   MMELView,
   VarType,
 } from '@paneron/libmmel/interface/supportinterface';
-import { EditorModel } from './editormodel';
+import { EditorModel } from '@/smart/model/editormodel';
 
 export interface MTreeNode {
   action: string; // if data is a value, action = ''

packages/legacy/src/smart/model/States.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { NodeProps } from 'react-flow-renderer';
-import { HistoryItem, PageHistory } from './history';
-import { ModelWrapper } from './modelwrapper';
+import { HistoryItem, PageHistory } from '@/smart/model/history';
+import { ModelWrapper } from '@/smart/model/modelwrapper';
 import { DataType } from '@paneron/libmmel/interface/baseinterface';
-import { DataLinkEdge, NormalEdge, SelfLoopEdge } from '../ui/flowui/edgeUI';
+import { DataLinkEdge, NormalEdge, SelfLoopEdge } from '@/smart/ui/flowui/edgeUI';
 import {
   ApprovalComponent,
   Datacube,
@@ -14,8 +14,8 @@ import {
   StartComponent,
   TimerComponent,
 } from '../ui/flowui/nodeUI';
-import { EditorModel, ModelType } from './editormodel';
-import { MMELDocument } from './document';
+import { EditorModel, ModelType } from '@/smart/model/editormodel';
+import { MMELDocument } from '@/smart/model/document';
 
 export interface FunModel {
   mw: ModelWrapper;

packages/legacy/src/smart/model/ViewFunctionModel.ts

@@ -6,8 +6,8 @@ import {
   MMELProvision,
   MMELReference,
 } from '@paneron/libmmel/interface/supportinterface';
-import { EditorNode } from './editormodel';
-import { LegendInterface } from './States';
+import { EditorNode } from '@/smart/model/editormodel';
+import { LegendInterface } from '@/smart/model/States';
 
 
 console.log(textToMMEL);

packages/legacy/src/smart/model/changelog.ts

@@ -2,8 +2,8 @@
  * The data model for change log and some utility functions for the change log
  */
 
-import { ModelAction } from './editor/model';
-import { EditorModel } from './editormodel';
+import { ModelAction } from '@/smart/model/editor/model';
+import { EditorModel } from '@/smart/model/editormodel';
 
 interface CommandEvent {
   type: 'command';

packages/legacy/src/smart/model/editor/commands/comment.ts

@@ -3,7 +3,7 @@
  */
 
 import { MMELComment } from '@paneron/libmmel/interface/supportinterface';
-import { ModelAction } from '../model';
+import { ModelAction } from '@/smart/model/editor/model';
 
 /**
  * Add a new comment to the model

packages/legacy/src/smart/model/editor/commands/data.ts

@@ -3,9 +3,9 @@
  */
 
 import { MMELReference } from '@paneron/libmmel/interface/supportinterface';
-import { EditorDataClass } from '../../editormodel';
-import { RegistryCombined } from '../components/element/registry';
-import { ModelAction } from '../model';
+import { EditorDataClass } from '@/smart/model/editormodel';
+import { RegistryCombined } from '@/smart/model/editor/components/element/registry';
+import { ModelAction } from '@/smart/model/editor/model';
 
 /**
  * Delete the registries from the model

packages/legacy/src/smart/model/editor/commands/elements.ts

@@ -16,7 +16,7 @@ import {
   EditorProcess,
   isEditorProcess,
 } from '../../editormodel';
-import { ModelAction } from '../model';
+import { ModelAction } from '@/smart/model/editor/model';
 
 /**
  * Edit the node elements. It can include gateway, approval, process, timer / signal events.

packages/legacy/src/smart/model/editor/commands/history.ts

@@ -2,8 +2,8 @@
  * This file centralizes the commands related to page change
  */
 
-import { HistoryItem } from '../../history';
-import { HistoryAction } from '../history';
+import { HistoryItem } from '@/smart/model/history';
+import { HistoryAction } from '@/smart/model/editor/history';
 
 /**
  * Go to a new page (subprocess) of a process on the current page

packages/legacy/src/smart/model/editor/commands/import.ts

@@ -2,8 +2,8 @@
  * This file centralizes the commands related to import
  */
 
-import { EditorModel } from '../../editormodel';
-import { ModelAction } from '../model';
+import { EditorModel } from '@/smart/model/editormodel';
+import { ModelAction } from '@/smart/model/editor/model';
 
 /**
  * Import an element from another model

packages/legacy/src/smart/model/editor/commands/page.ts

@@ -3,10 +3,10 @@
  */
 
 import { Node } from 'react-flow-renderer';
-import { createEdge } from '../../../utils/EditorFactory';
-import { findUniqueID } from '../../../utils/ModelFunctions';
-import { EditorModel, EditorSubprocess, isEditorData } from '../../editormodel';
-import { ModelAction } from '../model';
+import { createEdge } from '@/smart/utils/EditorFactory';
+import { findUniqueID } from '@/smart/utils/ModelFunctions';
+import { EditorModel, EditorSubprocess, isEditorData } from '@/smart/model/editormodel';
+import { ModelAction } from '@/smart/model/editor/model';
 
 /**
  * Remove an edge of a subprocess (page)

packages/legacy/src/smart/model/editor/commands/reference.ts

@@ -3,7 +3,7 @@
  */
 
 import { MMELReference } from '@paneron/libmmel/interface/supportinterface';
-import { ModelAction } from '../model';
+import { ModelAction } from '@/smart/model/editor/model';
 
 /**
  * Delete references

packages/legacy/src/smart/model/editor/commands/role.ts

@@ -3,7 +3,7 @@
  */
 
 import { MMELRole } from '@paneron/libmmel/interface/supportinterface';
-import { ModelAction } from '../model';
+import { ModelAction } from '@/smart/model/editor/model';
 
 /**
  * Add role

packages/legacy/src/smart/model/editor/components/comment.ts

@@ -1,8 +1,8 @@
 import { MMELComment } from '@paneron/libmmel/interface/supportinterface';
-import { EditorNode, EditorProcess } from '../../editormodel';
-import { UndoReducerInterface } from '../interface';
-import { ModelAction } from '../model';
-import { ItemAction, useItems } from './itemTemplate';
+import { EditorNode, EditorProcess } from '@/smart/model/editormodel';
+import { UndoReducerInterface } from '@/smart/model/editor/interface';
+import { ModelAction } from '@/smart/model/editor/model';
+import { ItemAction, useItems } from '@/smart/model/editor/components/itemTemplate';
 
 type command = 'comment';
 type ownType = MMELComment;

packages/legacy/src/smart/model/editor/components/element/common.ts

@@ -1,6 +1,6 @@
-import { EditorNode } from '../../../editormodel';
-import { ModelAction } from '../../model';
-import { ElmAction } from '../elements';
+import { EditorNode } from '@/smart/model/editormodel';
+import { ModelAction } from '@/smart/model/editor/model';
+import { ElmAction } from '@/smart/model/editor/components/elements';
 
 /**
  * Handle the command to delete elements in the model

packages/legacy/src/smart/model/editor/components/element/dc.ts

@@ -1,12 +1,12 @@
 import { MMELSubprocess } from '@paneron/libmmel/interface/flowcontrolinterface';
-import { fillRDCS } from '../../../../utils/ModelFunctions';
+import { fillRDCS } from '@/smart/utils/ModelFunctions';
 import {
   EditorDataClass,
   EditorNode,
   isEditorDataClass,
 } from '../../../editormodel';
-import { ModelAction } from '../../model';
-import { ElmAction, DataCascadeDCID } from '../elements';
+import { ModelAction } from '@/smart/model/editor/model';
+import { ElmAction, DataCascadeDCID } from '@/smart/model/editor/components/elements';
 
 /**
  * Add a new data class