refactor(editor): Extract canvas code into features (no-changelog) (#20541)

packages/frontend/editor-ui/src/__tests__/data/canvas.ts

@@ -9,8 +9,8 @@ import type {
 	CanvasNodeInjectionData,
 	ConnectStartEvent,
 	ExecutionOutputMapData,
-} from '@/types';
-import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
+} from '@/features/canvas/canvas.types';
+import { CanvasConnectionMode, CanvasNodeRenderType } from '@/features/canvas/canvas.types';
 import type { NodeConnectionType } from 'n8n-workflow';
 import { NodeConnectionTypes } from 'n8n-workflow';
 import type { GraphEdge, GraphNode, ViewportTransform } from '@vue-flow/core';

packages/frontend/editor-ui/src/__tests__/mocks.ts

@@ -29,7 +29,7 @@ import {
 	STICKY_NODE_TYPE,
 } from '@/constants';
 import type { IExecutionResponse, INodeUi, IWorkflowDb } from '@/Interface';
-import { CanvasNodeRenderType } from '@/types';
+import { CanvasNodeRenderType } from '@/features/canvas/canvas.types';
 import type { FrontendSettings } from '@n8n/api-types';
 import type { ExpressionLocalResolveContext } from '@/types/expressions';
 

packages/frontend/editor-ui/src/components/AssignmentCollection/AssignmentCollection.vue

@@ -16,9 +16,9 @@ import Assignment from './Assignment.vue';
 import { inputDataToAssignments, typeFromExpression } from './utils';
 import { propertyNameFromExpression } from '@/utils/mappingUtils';
 import Draggable from 'vuedraggable';
-import ExperimentalEmbeddedNdvMapper from '@/components/canvas/experimental/components/ExperimentalEmbeddedNdvMapper.vue';
+import ExperimentalEmbeddedNdvMapper from '@/features/canvas/experimental/components/ExperimentalEmbeddedNdvMapper.vue';
 import { ExpressionLocalResolveContextSymbol } from '@/constants';
-import { useExperimentalNdvStore } from '@/components/canvas/experimental/experimentalNdv.store';
+import { useExperimentalNdvStore } from '@/features/canvas/experimental/experimentalNdv.store';
 
 import { N8nInputLabel } from '@n8n/design-system';
 interface Props {

packages/frontend/editor-ui/src/components/ExpressionParameterInput.vue

@@ -18,7 +18,7 @@ import type { EditorState, SelectionRange } from '@codemirror/state';
 import type { IDataObject } from 'n8n-workflow';
 import { createEventBus, type EventBus } from '@n8n/utils/event-bus';
 import { CanvasKey } from '@/constants';
-import { useIsInExperimentalNdv } from '@/components/canvas/experimental/composables/useIsInExperimentalNdv';
+import { useIsInExperimentalNdv } from '@/features/canvas/experimental/composables/useIsInExperimentalNdv';
 import { isEventTargetContainedBy } from '@/utils/htmlUtils';
 
 import { N8nButton } from '@n8n/design-system';

packages/frontend/editor-ui/src/components/FocusPanel.test.ts

@@ -11,7 +11,7 @@ import { useVueFlow } from '@vue-flow/core';
 import type { INodeProperties } from 'n8n-workflow';
 import { setActivePinia } from 'pinia';
 import { reactive } from 'vue';
-import { useExperimentalNdvStore } from './canvas/experimental/experimentalNdv.store';
+import { useExperimentalNdvStore } from '@/features/canvas/experimental/experimentalNdv.store';
 import FocusPanel from './FocusPanel.vue';
 
 vi.mock('vue-router', () => ({

packages/frontend/editor-ui/src/components/FocusPanel.vue

@@ -40,14 +40,14 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import { useActiveElement, useThrottleFn } from '@vueuse/core';
 import { useExecutionData } from '@/composables/useExecutionData';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import ExperimentalNodeDetailsDrawer from '@/components/canvas/experimental/components/ExperimentalNodeDetailsDrawer.vue';
-import { useExperimentalNdvStore } from '@/components/canvas/experimental/experimentalNdv.store';
+import ExperimentalNodeDetailsDrawer from '@/features/canvas/experimental/components/ExperimentalNodeDetailsDrawer.vue';
+import { useExperimentalNdvStore } from '@/features/canvas/experimental/experimentalNdv.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useVueFlow } from '@vue-flow/core';
-import ExperimentalFocusPanelHeader from '@/components/canvas/experimental/components/ExperimentalFocusPanelHeader.vue';
+import ExperimentalFocusPanelHeader from '@/features/canvas/experimental/components/ExperimentalFocusPanelHeader.vue';
 import { useTelemetryContext } from '@/composables/useTelemetryContext';
 import { type ContextMenuAction } from '@/composables/useContextMenuItems';
-import { type CanvasNode, CanvasNodeRenderType } from '@/types';
+import { type CanvasNode, CanvasNodeRenderType } from '@/features/canvas/canvas.types';
 import { useCanvasOperations } from '@/composables/useCanvasOperations';
 
 import {

packages/frontend/editor-ui/src/components/InputPanel.vue

@@ -29,7 +29,7 @@ import WireMeUp from './WireMeUp.vue';
 import { usePostHog } from '@/stores/posthog.store';
 import { type IRunDataDisplayMode } from '@/Interface';
 import { I18nT } from 'vue-i18n';
-import { type SearchShortcut } from '@/types';
+import { type SearchShortcut } from '@/features/canvas/canvas.types';
 import { useRouter } from 'vue-router';
 import { useRunWorkflow } from '@/composables/useRunWorkflow';
 

packages/frontend/editor-ui/src/components/NodeSettings.vue

@@ -24,7 +24,7 @@ import NodeWebhooks from '@/components/NodeWebhooks.vue';
 import ParameterInputList from '@/components/ParameterInputList.vue';
 import get from 'lodash/get';
 
-import ExperimentalEmbeddedNdvHeader from '@/components/canvas/experimental/components/ExperimentalEmbeddedNdvHeader.vue';
+import ExperimentalEmbeddedNdvHeader from '@/features/canvas/experimental/components/ExperimentalEmbeddedNdvHeader.vue';
 import FreeAiCreditsCallout from '@/components/FreeAiCreditsCallout.vue';
 import NodeActionsList from '@/components/NodeActionsList.vue';
 import NodeSettingsInvalidNodeWarning from '@/components/NodeSettingsInvalidNodeWarning.vue';

packages/frontend/editor-ui/src/components/OutputPanel.vue

@@ -14,7 +14,7 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@n8n/i18n';
 import { waitingNodeTooltip } from '@/utils/executionUtils';
 import { useNodeDirtiness } from '@/composables/useNodeDirtiness';
-import { CanvasNodeDirtiness } from '@/types';
+import { CanvasNodeDirtiness } from '@/features/canvas/canvas.types';
 import { NDV_UI_OVERHAUL_EXPERIMENT } from '@/constants';
 import { usePostHog } from '@/stores/posthog.store';
 import { type IRunDataDisplayMode } from '@/Interface';

packages/frontend/editor-ui/src/components/ParameterInput.vue

@@ -91,8 +91,8 @@ import {
 import { completeExpressionSyntax, shouldConvertToExpression } from '@/utils/expressions';
 import CssEditor from '@/features/editors/components/CssEditor/CssEditor.vue';
 import { useFocusPanelStore } from '@/stores/focusPanel.store';
-import ExperimentalEmbeddedNdvMapper from '@/components/canvas/experimental/components/ExperimentalEmbeddedNdvMapper.vue';
-import { useExperimentalNdvStore } from '@/components/canvas/experimental/experimentalNdv.store';
+import ExperimentalEmbeddedNdvMapper from '@/features/canvas/experimental/components/ExperimentalEmbeddedNdvMapper.vue';
+import { useExperimentalNdvStore } from '@/features/canvas/experimental/experimentalNdv.store';
 import { useProjectsStore } from '@/stores/projects.store';
 import { getParameterDisplayableOptions } from '@/utils/nodes/nodeTransforms';
 

packages/frontend/editor-ui/src/components/ParameterOptions.vue

@@ -10,8 +10,8 @@ import { computed } from 'vue';
 import { useNDVStore } from '@/stores/ndv.store';
 import { AI_TRANSFORM_NODE_TYPE } from '@/constants';
 import { getParameterTypeOption } from '@/utils/nodeSettingsUtils';
-import { useIsInExperimentalNdv } from '@/components/canvas/experimental/composables/useIsInExperimentalNdv';
-import { useExperimentalNdvStore } from '@/components/canvas/experimental/experimentalNdv.store';
+import { useIsInExperimentalNdv } from '@/features/canvas/experimental/composables/useIsInExperimentalNdv';
+import { useExperimentalNdvStore } from '@/features/canvas/experimental/experimentalNdv.store';
 
 import { N8nActionToggle, N8nIcon, N8nRadioButtons, N8nText, N8nTooltip } from '@n8n/design-system';
 interface Props {

packages/frontend/editor-ui/src/components/RunData.vue

@@ -75,7 +75,7 @@ import { I18nT } from 'vue-i18n';
 import RunDataBinary from '@/components/RunDataBinary.vue';
 import { hasTrimmedRunData } from '@/utils/executionUtils';
 import NDVEmptyState from '@/components/NDVEmptyState.vue';
-import { type SearchShortcut } from '@/types';
+import { type SearchShortcut } from '@/features/canvas/canvas.types';
 
 import {
 	N8nBlockUi,

packages/frontend/editor-ui/src/components/RunDataSearch.vue

@@ -6,7 +6,7 @@ import { useDebounce } from '@/composables/useDebounce';
 import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useEventListener } from '@vueuse/core';
 import { PopOutWindowKey } from '@/constants';
-import { type SearchShortcut } from '@/types';
+import { type SearchShortcut } from '@/features/canvas/canvas.types';
 
 import { N8nIcon, N8nInput } from '@n8n/design-system';
 type Props = {

packages/frontend/editor-ui/src/composables/useCanvasOperations.test.ts

@@ -8,8 +8,8 @@ import type {
 	WorkflowExecuteMode,
 } from 'n8n-workflow';
 import { NodeConnectionTypes, NodeHelpers, UserError } from 'n8n-workflow';
-import type { CanvasConnection, CanvasNode } from '@/types';
-import { CanvasConnectionMode } from '@/types';
+import type { CanvasConnection, CanvasNode } from '@/features/canvas/canvas.types';
+import { CanvasConnectionMode } from '@/features/canvas/canvas.types';
 import type {
 	ICredentialsResponse,
 	IExecutionResponse,
@@ -50,9 +50,9 @@ import {
 import { STORES } from '@n8n/stores';
 import type { Connection } from '@vue-flow/core';
 import { useClipboard } from '@/composables/useClipboard';
-import { createCanvasConnectionHandleString } from '@/utils/canvasUtils';
+import { createCanvasConnectionHandleString } from '@/features/canvas/canvas.utils';
 import { nextTick, reactive, ref } from 'vue';
-import type { CanvasLayoutEvent } from './useCanvasLayout';
+import type { CanvasLayoutEvent } from '@/features/canvas/composables/useCanvasLayout';
 import { useTelemetry } from './useTelemetry';
 import { useToast } from '@/composables/useToast';
 import * as nodeHelpers from '@/composables/useNodeHelpers';

packages/frontend/editor-ui/src/composables/useCanvasOperations.ts

@@ -63,15 +63,15 @@ import type {
 	CanvasNode,
 	CanvasNodeMoveEvent,
 	ViewportBoundaries,
-} from '@/types';
-import { CanvasConnectionMode } from '@/types';
+} from '@/features/canvas/canvas.types';
+import { CanvasConnectionMode } from '@/features/canvas/canvas.types';
 import {
 	createCanvasConnectionHandleString,
 	mapCanvasConnectionToLegacyConnection,
 	mapLegacyConnectionsToCanvasConnections,
 	mapLegacyConnectionToCanvasConnection,
 	parseCanvasConnectionHandleString,
-} from '@/utils/canvasUtils';
+} from '@/features/canvas/canvas.utils';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import {
 	GRID_SIZE,
@@ -108,15 +108,15 @@ import { computed, nextTick, ref } from 'vue';
 import { useClipboard } from '@/composables/useClipboard';
 import { useUniqueNodeName } from '@/composables/useUniqueNodeName';
 import { injectWorkflowState } from '@/composables/useWorkflowState';
-import { isPresent } from '../utils/typesUtils';
+import { isPresent } from '@/utils/typesUtils';
 import { useProjectsStore } from '@/stores/projects.store';
-import type { CanvasLayoutEvent } from './useCanvasLayout';
+import type { CanvasLayoutEvent } from '@/features/canvas/composables/useCanvasLayout';
 import { chatEventBus } from '@n8n/chat/event-buses';
 import { useLogsStore } from '@/stores/logs.store';
 import { isChatNode } from '@/utils/aiUtils';
 import cloneDeep from 'lodash/cloneDeep';
 import uniq from 'lodash/uniq';
-import { useExperimentalNdvStore } from '@/components/canvas/experimental/experimentalNdv.store';
+import { useExperimentalNdvStore } from '@/features/canvas/experimental/experimentalNdv.store';
 import { canvasEventBus } from '@/event-bus/canvas';
 import { useFocusPanelStore } from '@/stores/focusPanel.store';
 import type { TelemetryNdvSource, TelemetryNdvType } from '@/types/telemetry';

packages/frontend/editor-ui/src/composables/useHistoryHelper.ts

@@ -11,7 +11,7 @@ import { getNodeViewTab } from '@/utils/nodeViewUtils';
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 import { useTelemetry } from './useTelemetry';
 import { useDebounce } from '@/composables/useDebounce';
-import { shouldIgnoreCanvasShortcut } from '@/utils/canvasUtils';
+import { shouldIgnoreCanvasShortcut } from '@/features/canvas/canvas.utils';
 
 const UNDO_REDO_DEBOUNCE_INTERVAL = 100;
 const ELEMENT_UI_OVERLAY_SELECTOR = '.el-overlay';

packages/frontend/editor-ui/src/composables/useKeybindings.ts

@@ -1,5 +1,5 @@
 import { PopOutWindowKey } from '@/constants';
-import { shouldIgnoreCanvasShortcut } from '@/utils/canvasUtils';
+import { shouldIgnoreCanvasShortcut } from '@/features/canvas/canvas.utils';
 import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useActiveElement, useEventListener } from '@vueuse/core';
 import type { MaybeRefOrGetter } from 'vue';

packages/frontend/editor-ui/src/composables/useNodeConnections.test.ts

@@ -1,9 +1,9 @@
 import { ref } from 'vue';
 import { NodeConnectionTypes } from 'n8n-workflow';
 import { useNodeConnections } from '@/composables/useNodeConnections';
-import type { CanvasNodeData } from '@/types';
-import { CanvasConnectionMode } from '@/types';
-import { createCanvasConnectionHandleString } from '@/utils/canvasUtils';
+import type { CanvasNodeData } from '@/features/canvas/canvas.types';
+import { CanvasConnectionMode } from '@/features/canvas/canvas.types';
+import { createCanvasConnectionHandleString } from '@/features/canvas/canvas.utils';
 
 describe('useNodeConnections', () => {
 	const defaultConnections = {

packages/frontend/editor-ui/src/composables/useNodeConnections.ts

@@ -1,10 +1,10 @@
-import type { CanvasNodeData } from '@/types';
-import { CanvasConnectionMode } from '@/types';
+import type { CanvasNodeData } from '@/features/canvas/canvas.types';
+import { CanvasConnectionMode } from '@/features/canvas/canvas.types';
 import type { MaybeRef } from 'vue';
 import { computed, unref } from 'vue';
 import { NodeConnectionTypes } from 'n8n-workflow';
 import type { Connection } from '@vue-flow/core';
-import { parseCanvasConnectionHandleString } from '@/utils/canvasUtils';
+import { parseCanvasConnectionHandleString } from '@/features/canvas/canvas.utils';
 
 export function useNodeConnections({
 	inputs,

packages/frontend/editor-ui/src/composables/useNodeDirtiness.test.ts

@@ -8,7 +8,7 @@ import { type INodeUi } from '@/Interface';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { CanvasNodeDirtiness } from '@/types';
+import { CanvasNodeDirtiness } from '@/features/canvas/canvas.types';
 import { createTestingPinia } from '@pinia/testing';
 import { NodeConnectionTypes, type IConnections, type IRunData } from 'n8n-workflow';
 import { defineComponent } from 'vue';

packages/frontend/editor-ui/src/composables/useNodeDirtiness.ts

@@ -9,7 +9,7 @@ import {
 } from '@/models/history';
 import { useHistoryStore } from '@/stores/history.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { CanvasNodeDirtiness, type CanvasNodeDirtinessType } from '@/types';
+import { CanvasNodeDirtiness, type CanvasNodeDirtinessType } from '@/features/canvas/canvas.types';
 import type { INodeConnections, NodeConnectionType } from 'n8n-workflow';
 import { NodeConnectionTypes } from 'n8n-workflow';
 import { computed } from 'vue';

packages/frontend/editor-ui/src/constants.ts

@@ -9,7 +9,7 @@ import type {
 	CanvasInjectionData,
 	CanvasNodeHandleInjectionData,
 	CanvasNodeInjectionData,
-} from '@/types';
+} from '@/features/canvas/canvas.types';
 import type { ComputedRef, InjectionKey, Ref } from 'vue';
 import type { ExpressionLocalResolveContext } from './types/expressions';
 import { DATA_TABLE_MODULE_NAME } from './features/dataTable/constants';

packages/frontend/editor-ui/src/event-bus/canvas.ts

@@ -1,4 +1,4 @@
-import type { CanvasEventBusEvents } from '@/types';
+import type { CanvasEventBusEvents } from '@/features/canvas/canvas.types';
 import { createEventBus } from '@n8n/utils/event-bus';
 
 export const canvasEventBus = createEventBus<CanvasEventBusEvents>();

packages/frontend/editor-ui/src/features/assistant/components/Agent/ExecuteMessage.vue

@@ -9,7 +9,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch, type WatchStopHandle
 import { useRouter } from 'vue-router';
 
 import NodeIssueItem from './NodeIssueItem.vue';
-import CanvasRunWorkflowButton from '@/components/canvas/elements/buttons/CanvasRunWorkflowButton.vue';
+import CanvasRunWorkflowButton from '@/features/canvas/components/elements/buttons/CanvasRunWorkflowButton.vue';
 import { useLogsStore } from '@/stores/logs.store';
 import { isChatNode } from '@/utils/aiUtils';
 import { useToast } from '@/composables/useToast';

packages/frontend/editor-ui/src/features/canvas/canvas.types.ts

@@ -10,8 +10,8 @@ import type {
 import type { IExecutionResponse, INodeUi } from '@/Interface';
 import type { ComputedRef, Ref } from 'vue';
 import type { EventBus } from '@n8n/utils/event-bus';
-import type { CanvasLayoutSource } from '@/composables/useCanvasLayout';
-import type { NodeIconSource } from '../utils/nodeIcon';
+import type { CanvasLayoutSource } from '@/features/canvas/composables/useCanvasLayout';
+import type { NodeIconSource } from '@/utils/nodeIcon';
 
 export const enum CanvasConnectionMode {
 	Input = 'inputs',

packages/frontend/editor-ui/src/features/canvas/canvas.utils.test.ts

@@ -8,11 +8,11 @@ import {
 	mapLegacyEndpointsToCanvasConnectionPort,
 	parseCanvasConnectionHandleString,
 	shouldIgnoreCanvasShortcut,
-} from '@/utils/canvasUtils';
+} from './canvas.utils';
 import type { IConnection, IConnections, INodeTypeDescription } from 'n8n-workflow';
 import { NodeConnectionTypes } from 'n8n-workflow';
-import type { CanvasConnection } from '@/types';
-import { CanvasConnectionMode } from '@/types';
+import type { CanvasConnection } from './canvas.types';
+import { CanvasConnectionMode } from './canvas.types';
 import type { INodeUi } from '@/Interface';
 import type { Connection } from '@vue-flow/core';
 import { createTestNode } from '@/__tests__/mocks';

packages/frontend/editor-ui/src/features/canvas/canvas.utils.ts

@@ -5,8 +5,8 @@ import type {
 	NodeConnectionType,
 } from 'n8n-workflow';
 import type { INodeUi } from '@/Interface';
-import type { BoundingBox, CanvasConnection, CanvasConnectionPort } from '@/types';
-import { CanvasConnectionMode } from '@/types';
+import type { BoundingBox, CanvasConnection, CanvasConnectionPort } from './canvas.types';
+import { CanvasConnectionMode } from './canvas.types';
 import type { Connection } from '@vue-flow/core';
 import { isValidCanvasConnectionMode, isValidNodeConnectionType } from '@/utils/typeGuards';
 import { NodeConnectionTypes } from 'n8n-workflow';

packages/frontend/editor-ui/src/features/canvas/components/Canvas.test.ts

@@ -1,9 +1,9 @@
 // @vitest-environment jsdom
 import { fireEvent, waitFor } from '@testing-library/vue';
 import { createComponentRenderer } from '@/__tests__/render';
-import Canvas from '@/components/canvas/Canvas.vue';
+import Canvas from './Canvas.vue';
 import { createPinia, setActivePinia } from 'pinia';
-import type { CanvasConnection, CanvasNode } from '@/types';
+import type { CanvasConnection, CanvasNode } from '../canvas.types';
 import { createCanvasConnection, createCanvasNodeElement } from '@/__tests__/data';
 import { NodeConnectionTypes } from 'n8n-workflow';
 import type { useDeviceSupport } from '@n8n/composables/useDeviceSupport';

packages/frontend/editor-ui/src/features/canvas/components/Canvas.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import ContextMenu from '@/components/ContextMenu/ContextMenu.vue';
-import type { CanvasLayoutEvent } from '@/composables/useCanvasLayout';
-import { useCanvasLayout } from '@/composables/useCanvasLayout';
-import { useCanvasNodeHover } from '@/composables/useCanvasNodeHover';
-import { useCanvasTraversal } from '@/composables/useCanvasTraversal';
+import type { CanvasLayoutEvent } from '../composables/useCanvasLayout';
+import { useCanvasLayout } from '../composables/useCanvasLayout';
+import { useCanvasNodeHover } from '../composables/useCanvasNodeHover';
+import { useCanvasTraversal } from '../composables/useCanvasTraversal';
 import type { ContextMenuTarget } from '@/composables/useContextMenu';
 import { useContextMenu } from '@/composables/useContextMenu';
 import { type KeyMap, useKeybindings } from '@/composables/useKeybindings';
@@ -17,8 +17,8 @@ import type {
 	CanvasNodeData,
 	CanvasNodeMoveEvent,
 	ConnectStartEvent,
-} from '@/types';
-import { CanvasNodeRenderType } from '@/types';
+} from '../canvas.types';
+import { CanvasNodeRenderType } from '../canvas.types';
 import { isOutsideSelected } from '@/utils/htmlUtils';
 import { getMousePosition, GRID_SIZE, updateViewportToContainNodes } from '@/utils/nodeViewUtils';
 import { isPresent } from '@/utils/typesUtils';
@@ -50,14 +50,14 @@ import {
 	useCssModule,
 	watch,
 } from 'vue';
-import { useViewportAutoAdjust } from './composables/useViewportAutoAdjust';
+import { useViewportAutoAdjust } from '../composables/useViewportAutoAdjust';
 import CanvasBackground from './elements/background/CanvasBackground.vue';
 import CanvasArrowHeadMarker from './elements/edges/CanvasArrowHeadMarker.vue';
 import CanvasConnectionLine from './elements/edges/CanvasConnectionLine.vue';
 import CanvasControlButtons from './elements/buttons/CanvasControlButtons.vue';
 import Edge from './elements/edges/CanvasEdge.vue';
 import Node from './elements/nodes/CanvasNode.vue';
-import { useExperimentalNdvStore } from './experimental/experimentalNdv.store';
+import { useExperimentalNdvStore } from '../experimental/experimentalNdv.store';
 import { type ContextMenuAction } from '@/composables/useContextMenuItems';
 
 const $style = useCssModule();

packages/frontend/editor-ui/src/features/canvas/components/WorkflowCanvas.test.ts

@@ -1,11 +1,11 @@
 import { waitFor } from '@testing-library/vue';
 import { createPinia, setActivePinia } from 'pinia';
-import WorkflowCanvas from '@/components/canvas/WorkflowCanvas.vue';
+import WorkflowCanvas from './WorkflowCanvas.vue';
 import { createEventBus } from '@n8n/utils/event-bus';
 import type { Workflow } from 'n8n-workflow';
 import { createComponentRenderer } from '@/__tests__/render';
 import { STICKY_NODE_TYPE } from '@/constants';
-import { CanvasNodeRenderType } from '@/types';
+import { CanvasNodeRenderType } from '../canvas.types';
 import {
 	createTestNode,
 	createTestWorkflow,

packages/frontend/editor-ui/src/features/canvas/components/WorkflowCanvas.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import Canvas from '@/components/canvas/Canvas.vue';
+import Canvas from './Canvas.vue';
 import { computed, ref, toRef, useCssModule, useTemplateRef } from 'vue';
 import type { Workflow } from 'n8n-workflow';
 import type { IWorkflowDb } from '@/Interface';
-import { useCanvasMapping } from '@/composables/useCanvasMapping';
+import { useCanvasMapping } from '../composables/useCanvasMapping';
 import type { EventBus } from '@n8n/utils/event-bus';
 import { createEventBus } from '@n8n/utils/event-bus';
-import type { CanvasEventBusEvents } from '@/types';
+import type { CanvasEventBusEvents } from '../canvas.types';
 import { useVueFlow } from '@vue-flow/core';
 import { throttledRef } from '@vueuse/core';
-import { type ContextMenuAction } from '@/composables/useContextMenuItems';
+import type { ContextMenuAction } from '@/composables/useContextMenuItems';
 
 defineOptions({
 	inheritAttrs: false,

packages/frontend/editor-ui/src/features/canvas/components/elements/background/CanvasBackground.test.ts

@@ -1,5 +1,5 @@
 import { createComponentRenderer } from '@/__tests__/render';
-import CanvasBackground from '@/components/canvas/elements/background/CanvasBackground.vue';
+import CanvasBackground from './CanvasBackground.vue';
 
 const renderComponent = createComponentRenderer(CanvasBackground);
 

packages/frontend/editor-ui/src/features/canvas/components/elements/buttons/CanvasControlButtons.vue

@@ -4,7 +4,7 @@ import TidyUpIcon from '@/components/TidyUpIcon.vue';
 import { useI18n } from '@n8n/i18n';
 import { Controls } from '@vue-flow/controls';
 import { computed } from 'vue';
-import { useExperimentalNdvStore } from '../../experimental/experimentalNdv.store';
+import { useExperimentalNdvStore } from '../../../experimental/experimentalNdv.store';
 import { N8nButton, N8nIconButton, N8nTooltip } from '@n8n/design-system';
 const props = withDefaults(
 	defineProps<{

packages/frontend/editor-ui/src/features/canvas/components/elements/edges/CanvasConnectionLine.vue

@@ -4,9 +4,9 @@ import type { ConnectionLineProps } from '@vue-flow/core';
 import { BaseEdge } from '@vue-flow/core';
 import { computed, onMounted, ref, useCssModule } from 'vue';
 import { getEdgeRenderData } from './utils';
-import { useCanvas } from '@/composables/useCanvas';
+import { useCanvas } from '../../../composables/useCanvas';
 import { NodeConnectionTypes } from 'n8n-workflow';
-import { parseCanvasConnectionHandleString } from '@/utils/canvasUtils';
+import { parseCanvasConnectionHandleString } from '../../../canvas.utils';
 
 const props = defineProps<ConnectionLineProps>();
 

packages/frontend/editor-ui/src/features/canvas/components/elements/edges/CanvasEdge.test.ts

@@ -5,7 +5,7 @@ import { Position } from '@vue-flow/core';
 import { NodeConnectionTypes } from 'n8n-workflow';
 import { setActivePinia } from 'pinia';
 import CanvasEdge, { type CanvasEdgeProps } from './CanvasEdge.vue';
-import type { CanvasConnectionPort } from '@/types';
+import type { CanvasConnectionPort } from '../../../canvas.types';
 
 const DEFAULT_PROPS = {
 	sourceX: 0,

packages/frontend/editor-ui/src/features/canvas/components/elements/edges/CanvasEdge.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 /* eslint-disable vue/no-multiple-template-root */
-import type { CanvasConnectionData } from '@/types';
+import type { CanvasConnectionData } from '../../../canvas.types';
 import { isValidNodeConnectionType } from '@/utils/typeGuards';
 import type { Connection, EdgeProps } from '@vue-flow/core';
 import { BaseEdge, EdgeLabelRenderer } from '@vue-flow/core';

packages/frontend/editor-ui/src/features/canvas/components/elements/handles/CanvasHandleRenderer.test.ts

@@ -1,9 +1,9 @@
-import CanvasHandleRenderer from '@/components/canvas/elements/handles/CanvasHandleRenderer.vue';
+import CanvasHandleRenderer from './CanvasHandleRenderer.vue';
 import { NodeConnectionTypes } from 'n8n-workflow';
 import { createComponentRenderer } from '@/__tests__/render';
 import { CanvasNodeHandleKey } from '@/constants';
 import { ref } from 'vue';
-import { CanvasConnectionMode, type CanvasElementPortWithRenderData } from '@/types';
+import { CanvasConnectionMode, type CanvasElementPortWithRenderData } from '../../../canvas.types';
 import { Position } from '@vue-flow/core';
 
 const renderComponent = createComponentRenderer(CanvasHandleRenderer);

packages/frontend/editor-ui/src/features/canvas/components/elements/handles/CanvasHandleRenderer.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import { computed, h, provide, toRef, useCssModule } from 'vue';
-import type { CanvasConnectionPort, CanvasElementPortWithRenderData } from '@/types';
-import { CanvasConnectionMode } from '@/types';
+import type { CanvasConnectionPort, CanvasElementPortWithRenderData } from '../../../canvas.types';
+import { CanvasConnectionMode } from '../../../canvas.types';
 import type { ValidConnectionFunc } from '@vue-flow/core';
 import { Handle } from '@vue-flow/core';
 import { NodeConnectionTypes } from 'n8n-workflow';
-import CanvasHandleMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue';
-import CanvasHandleMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue';
-import CanvasHandleNonMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.vue';
-import CanvasHandleNonMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.vue';
+import CanvasHandleMainInput from './render-types/CanvasHandleMainInput.vue';
+import CanvasHandleMainOutput from './render-types/CanvasHandleMainOutput.vue';
+import CanvasHandleNonMainInput from './render-types/CanvasHandleNonMainInput.vue';
+import CanvasHandleNonMainOutput from './render-types/CanvasHandleNonMainOutput.vue';
 import { CanvasNodeHandleKey } from '@/constants';
-import { useCanvasNode } from '@/composables/useCanvasNode';
+import { useCanvasNode } from '../../../composables/useCanvasNode';
 
 const props = defineProps<
 	CanvasElementPortWithRenderData & {

packages/frontend/editor-ui/src/features/canvas/components/elements/handles/render-types/CanvasHandleMainInput.test.ts

@@ -1,4 +1,4 @@
-import CanvasHandleMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue';
+import CanvasHandleMainInput from './CanvasHandleMainInput.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createCanvasHandleProvide } from '@/__tests__/data';
 

packages/frontend/editor-ui/src/features/canvas/components/elements/handles/render-types/CanvasHandleMainInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useCanvasNodeHandle } from '@/composables/useCanvasNodeHandle';
+import { useCanvasNodeHandle } from '../../../../composables/useCanvasNodeHandle';
 import { computed, useCssModule } from 'vue';
-import CanvasHandleRectangle from '@/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.vue';
+import CanvasHandleRectangle from './parts/CanvasHandleRectangle.vue';
 
 const $style = useCssModule();
 

packages/frontend/editor-ui/src/features/canvas/components/elements/handles/render-types/CanvasHandleMainOutput.test.ts

@@ -1,4 +1,4 @@
-import CanvasHandleMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue';
+import CanvasHandleMainOutput from './CanvasHandleMainOutput.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createCanvasHandleProvide } from '@/__tests__/data';
 

packages/frontend/editor-ui/src/features/canvas/components/elements/handles/render-types/CanvasHandleMainOutput.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { useCanvasNodeHandle } from '@/composables/useCanvasNodeHandle';
-import { useCanvasNode } from '@/composables/useCanvasNode';
+import { useCanvasNodeHandle } from '../../../../composables/useCanvasNodeHandle';
+import { useCanvasNode } from '../../../../composables/useCanvasNode';
 import { computed, ref, useCssModule } from 'vue';
-import type { CanvasNodeDefaultRender } from '@/types';
+import type { CanvasNodeDefaultRender } from '../../../../canvas.types';
 import { useI18n } from '@n8n/i18n';
-import CanvasHandleDot from '@/components/canvas/elements/handles/render-types/parts/CanvasHandleDot.vue';
-import CanvasHandlePlus from '@/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue';
+import CanvasHandleDot from './parts/CanvasHandleDot.vue';
+import CanvasHandlePlus from './parts/CanvasHandlePlus.vue';
 
 const emit = defineEmits<{
 	add: [];

packages/frontend/editor-ui/src/features/canvas/components/elements/handles/render-types/CanvasHandleNonMainInput.test.ts

@@ -1,4 +1,4 @@
-import CanvasHandleNonMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.vue';
+import CanvasHandleNonMainInput from './CanvasHandleNonMainInput.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createCanvasHandleProvide } from '@/__tests__/data';
 

packages/frontend/editor-ui/src/features/canvas/components/elements/handles/render-types/CanvasHandleNonMainInput.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import CanvasHandlePlus from '@/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue';
-import { useCanvasNodeHandle } from '@/composables/useCanvasNodeHandle';
+import CanvasHandlePlus from './parts/CanvasHandlePlus.vue';
+import { useCanvasNodeHandle } from '../../../../composables/useCanvasNodeHandle';
 import { computed, ref, useCssModule } from 'vue';
-import CanvasHandleDiamond from '@/components/canvas/elements/handles/render-types/parts/CanvasHandleDiamond.vue';
+import CanvasHandleDiamond from './parts/CanvasHandleDiamond.vue';
 
 const emit = defineEmits<{
 	add: [];

packages/frontend/editor-ui/src/features/canvas/components/elements/handles/render-types/CanvasHandleNonMainOutput.test.ts

@@ -1,4 +1,4 @@
-import CanvasHandleNonMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.vue';
+import CanvasHandleNonMainOutput from './CanvasHandleNonMainOutput.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createCanvasHandleProvide } from '@/__tests__/data';
 

packages/frontend/editor-ui/src/features/canvas/components/elements/handles/render-types/CanvasHandleNonMainOutput.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useCanvasNodeHandle } from '@/composables/useCanvasNodeHandle';
+import { useCanvasNodeHandle } from '../../../../composables/useCanvasNodeHandle';
 import { computed, useCssModule } from 'vue';
-import CanvasHandleDiamond from '@/components/canvas/elements/handles/render-types/parts/CanvasHandleDiamond.vue';
+import CanvasHandleDiamond from './parts/CanvasHandleDiamond.vue';
 
 const $style = useCssModule();
 const { label, isRequired } = useCanvasNodeHandle();

packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/CanvasNode.test.ts

@@ -1,10 +1,10 @@
-import CanvasNode from '@/components/canvas/elements/nodes/CanvasNode.vue';
+import CanvasNode from './CanvasNode.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createPinia, setActivePinia } from 'pinia';
 import { NodeConnectionTypes } from 'n8n-workflow';
 import { fireEvent } from '@testing-library/vue';
 import { createCanvasNodeData, createCanvasNodeProps, createCanvasProvide } from '@/__tests__/data';
-import { CanvasNodeRenderType } from '@/types';
+import { CanvasNodeRenderType } from '../../../canvas.types';
 
 vi.mock('@/stores/nodeTypes.store', () => ({
 	useNodeTypesStore: vi.fn(() => ({

packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/CanvasNode.vue

@@ -15,25 +15,25 @@ import type {
 	CanvasNodeData,
 	CanvasNodeEventBusEvents,
 	CanvasEventBusEvents,
-} from '@/types';
-import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
-import CanvasNodeToolbar from '@/components/canvas/elements/nodes/CanvasNodeToolbar.vue';
-import CanvasNodeRenderer from '@/components/canvas/elements/nodes/CanvasNodeRenderer.vue';
-import CanvasHandleRenderer from '@/components/canvas/elements/handles/CanvasHandleRenderer.vue';
+} from '../../../canvas.types';
+import { CanvasConnectionMode, CanvasNodeRenderType } from '../../../canvas.types';
+import CanvasNodeToolbar from './CanvasNodeToolbar.vue';
+import CanvasNodeRenderer from './CanvasNodeRenderer.vue';
+import CanvasHandleRenderer from '../handles/CanvasHandleRenderer.vue';
 import { useNodeConnections } from '@/composables/useNodeConnections';
 import { CanvasNodeKey } from '@/constants';
 import { useContextMenu } from '@/composables/useContextMenu';
 import type { NodeProps, XYPosition } from '@vue-flow/core';
 import { Position } from '@vue-flow/core';
-import { useCanvas } from '@/composables/useCanvas';
+import { useCanvas } from '../../../composables/useCanvas';
 import {
 	createCanvasConnectionHandleString,
 	insertSpacersBetweenEndpoints,
-} from '@/utils/canvasUtils';
+} from '../../../canvas.utils';
 import type { EventBus } from '@n8n/utils/event-bus';
 import { createEventBus } from '@n8n/utils/event-bus';
 import isEqual from 'lodash/isEqual';
-import CanvasNodeTrigger from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeTrigger.vue';
+import CanvasNodeTrigger from './render-types/parts/CanvasNodeTrigger.vue';
 import { CONFIGURATION_NODE_RADIUS, GRID_SIZE } from '@/utils/nodeViewUtils';
 
 type Props = NodeProps<CanvasNodeData> & {

packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/CanvasNodeRenderer.test.ts

@@ -1,9 +1,9 @@
-import CanvasNodeRenderer from '@/components/canvas/elements/nodes/CanvasNodeRenderer.vue';
+import CanvasNodeRenderer from './CanvasNodeRenderer.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createCanvasNodeProvide, createCanvasProvide } from '@/__tests__/data';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
-import { CanvasNodeRenderType } from '@/types';
+import { CanvasNodeRenderType } from '../../../canvas.types';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { createTestWorkflowObject } from '@/__tests__/mocks';
 

packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/CanvasNodeRenderer.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { h, inject } from 'vue';
-import CanvasNodeDefault from '@/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue';
-import CanvasNodeStickyNote from '@/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue';
-import CanvasNodeAddNodes from '@/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue';
-import CanvasNodeChoicePrompt from '@/components/canvas/elements/nodes/render-types/CanvasNodeChoicePrompt.vue';
+import CanvasNodeDefault from './render-types/CanvasNodeDefault.vue';
+import CanvasNodeStickyNote from './render-types/CanvasNodeStickyNote.vue';
+import CanvasNodeAddNodes from './render-types/CanvasNodeAddNodes.vue';
+import CanvasNodeChoicePrompt from './render-types/CanvasNodeChoicePrompt.vue';
 import { CanvasNodeKey } from '@/constants';
-import { CanvasNodeRenderType } from '@/types';
+import { CanvasNodeRenderType } from '../../../canvas.types';
 
 const node = inject(CanvasNodeKey);
 

packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/CanvasNodeToolbar.test.ts

@@ -1,9 +1,9 @@
 import { waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import CanvasNodeToolbar from '@/components/canvas/elements/nodes/CanvasNodeToolbar.vue';
+import CanvasNodeToolbar from './CanvasNodeToolbar.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createCanvasNodeProvide, createCanvasProvide } from '@/__tests__/data';
-import { CanvasNodeRenderType } from '@/types';
+import { CanvasNodeRenderType } from '../../../canvas.types';
 import { createPinia, setActivePinia, type Pinia } from 'pinia';
 
 const renderComponent = createComponentRenderer(CanvasNodeToolbar);

packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/CanvasNodeToolbar.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed, ref, useCssModule } from 'vue';
 import { useI18n } from '@n8n/i18n';
-import { useCanvasNode } from '@/composables/useCanvasNode';
-import { CanvasNodeRenderType } from '@/types';
-import { useCanvas } from '@/composables/useCanvas';
+import { useCanvasNode } from '../../../composables/useCanvasNode';
+import { CanvasNodeRenderType } from '../../../canvas.types';
+import { useCanvas } from '../../../composables/useCanvas';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useExperimentalNdvStore } from '../../experimental/experimentalNdv.store';
-import CanvasNodeStatusIcons from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue';
+import { useExperimentalNdvStore } from '../../../experimental/experimentalNdv.store';
+import CanvasNodeStatusIcons from './render-types/parts/CanvasNodeStatusIcons.vue';
 
 import { N8nIconButton, N8nTooltip } from '@n8n/design-system';
-import CanvasNodeStickyColorSelector from '@/components/canvas/elements/nodes/toolbar/CanvasNodeStickyColorSelector.vue';
+import CanvasNodeStickyColorSelector from './toolbar/CanvasNodeStickyColorSelector.vue';
 
 const emit = defineEmits<{
 	delete: [];

packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/render-types/CanvasNodeDefault.test.ts

@@ -1,10 +1,10 @@
-import CanvasNodeDefault from '@/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue';
+import CanvasNodeDefault from './CanvasNodeDefault.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { NodeConnectionTypes } from 'n8n-workflow';
 import { createCanvasNodeProvide, createCanvasProvide } from '@/__tests__/data';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
-import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
+import { CanvasConnectionMode, CanvasNodeRenderType } from '../../../../canvas.types';
 import { fireEvent } from '@testing-library/vue';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { createTestWorkflowObject } from '@/__tests__/mocks';

packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/render-types/CanvasNodeDefault.vue

@@ -2,16 +2,16 @@
 import { computed, ref, useCssModule, watch } from 'vue';
 import { useNodeConnections } from '@/composables/useNodeConnections';
 import { useI18n } from '@n8n/i18n';
-import { useCanvasNode } from '@/composables/useCanvasNode';
-import type { CanvasNodeDefaultRender } from '@/types';
-import { useCanvas } from '@/composables/useCanvas';
-import CanvasNodeSettingsIcons from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeSettingsIcons.vue';
+import { useCanvasNode } from '../../../../composables/useCanvasNode';
+import type { CanvasNodeDefaultRender } from '../../../../canvas.types';
+import { useCanvas } from '../../../../composables/useCanvas';
+import CanvasNodeSettingsIcons from './parts/CanvasNodeSettingsIcons.vue';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { calculateNodeSize } from '@/utils/nodeViewUtils';
-import ExperimentalInPlaceNodeSettings from '@/components/canvas/experimental/components/ExperimentalEmbeddedNodeDetails.vue';
-import CanvasNodeTooltip from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeTooltip.vue';
-import CanvasNodeDisabledStrikeThrough from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.vue';
-import CanvasNodeStatusIcons from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue';
+import ExperimentalInPlaceNodeSettings from '../../../../experimental/components/ExperimentalEmbeddedNodeDetails.vue';
+import CanvasNodeTooltip from './parts/CanvasNodeTooltip.vue';
+import CanvasNodeDisabledStrikeThrough from './parts/CanvasNodeDisabledStrikeThrough.vue';
+import CanvasNodeStatusIcons from './parts/CanvasNodeStatusIcons.vue';
 import NodeIcon from '@/components/NodeIcon.vue';
 
 const $style = useCssModule();

packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/render-types/CanvasNodeStickyNote.test.ts

@@ -1,4 +1,4 @@
-import CanvasNodeStickyNote from '@/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue';
+import CanvasNodeStickyNote from './CanvasNodeStickyNote.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createCanvasNodeProvide } from '@/__tests__/data';
 import { createTestingPinia } from '@pinia/testing';

packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/render-types/CanvasNodeStickyNote.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /* eslint-disable vue/no-multiple-template-root */
-import { useCanvasNode } from '@/composables/useCanvasNode';
-import type { CanvasNodeStickyNoteRender } from '@/types';
+import { useCanvasNode } from '../../../../composables/useCanvasNode';
+import type { CanvasNodeStickyNoteRender } from '../../../../canvas.types';
 import { ref, computed, useCssModule, onMounted, onBeforeUnmount } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import type { OnResize } from '@vue-flow/node-resizer';