feat: Add new @n8n/utils package (no-changelog) (#13536)

packages/@n8n/utils/.eslintrc.cjs

@@ -0,0 +1,10 @@
+const sharedOptions = require('@n8n/eslint-config/shared');
+
+/**
+ * @type {import('@types/eslint').ESLint.ConfigData}
+ */
+module.exports = {
+	extends: ['@n8n/eslint-config/node'],
+
+	...sharedOptions(__dirname),
+};

packages/@n8n/utils/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/@n8n/utils/README.md

@@ -0,0 +1,25 @@
+# @n8n/utils
+
+A collection of utility functions that provide common functionality for both Front-End and Back-End packages.
+
+## Table of Contents
+
+- [Features](#features)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+
+- **Reusable Logic**: Build complex, stateful functionality using modular composable functions that you can easily reuse.
+- **Consistent Patterns**: Enjoy a unified approach across n8n packages, making integration and maintenance a breeze.
+- **Type-Safe & Reliable**: Benefit from TypeScript support, which improves the developer experience and code robustness.
+- **Universal Functionality**: Designed to work seamlessly on both the front-end and back-end.
+- **Easily Testable**: A modular design that simplifies testing, maintenance, and rapid development.
+
+## Contributing
+
+For more details, please read our [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## License
+
+For more details, please read our [LICENSE.md](LICENSE.md).

packages/@n8n/utils/biome.jsonc

@@ -0,0 +1,4 @@
+{
+	"$schema": "../../../node_modules/@biomejs/biome/configuration_schema.json",
+	"extends": ["../../../biome.jsonc"]
+}

packages/@n8n/utils/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@n8n/utils",
+  "type": "module",
+  "version": "1.2.0",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm run typecheck && tsup",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:dev": "vitest --silent=false",
+    "lint": "eslint src --ext .js,.ts,.vue --quiet",
+    "lintfix": "eslint src --ext .js,.ts,.vue --fix",
+    "format": "biome format --write . && prettier --write . --ignore-path ../../../.prettierignore",
+    "format:check": "biome ci . && prettier --check . --ignore-path ../../../.prettierignore"
+  },
+  "devDependencies": {
+    "@n8n/eslint-config": "workspace:*",
+    "@n8n/typescript-config": "workspace:*",
+    "@n8n/vitest-config": "workspace:*",
+    "@testing-library/jest-dom": "catalog:frontend",
+    "@testing-library/user-event": "catalog:frontend",
+    "tsup": "catalog:frontend",
+    "typescript": "catalog:frontend",
+    "vite": "catalog:frontend",
+    "vite-plugin-dts": "catalog:frontend",
+    "vitest": "catalog:frontend"
+  },
+  "license": "See LICENSE.md file in the root of the repository"
+}

packages/@n8n/utils/src/__tests__/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

packages/@n8n/utils/src/assert.ts

@@ -3,6 +3,7 @@
  */
 export function assert(condition: unknown, message?: string): asserts condition {
 	if (!condition) {
+		// eslint-disable-next-line n8n-local-rules/no-plain-errors
 		throw new Error(message ?? 'Assertion failed');
 	}
 }

packages/@n8n/utils/src/event-bus.ts

@@ -7,7 +7,6 @@ type Payloads<ListenerMap> = {
 
 type Listener<Payload> = (payload: Payload) => void;
 
-// TODO: Fix all usages of `createEventBus` and convert `any` to `unknown`
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface EventBus<ListenerMap extends Payloads<ListenerMap> = Record<string, any>> {
 	on<EventName extends keyof ListenerMap & string>(
@@ -42,7 +41,6 @@ export interface EventBus<ListenerMap extends Payloads<ListenerMap> = Record<str
  * }>();
  */
 export function createEventBus<
-	// TODO: Fix all usages of `createEventBus` and convert `any` to `unknown`
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	ListenerMap extends Payloads<ListenerMap> = Record<string, any>,
 >(): EventBus<ListenerMap> {
@@ -77,7 +75,9 @@ export function createEventBus<
 		emit(eventName, event) {
 			const eventFns = handlers.get(eventName);
 			if (eventFns) {
-				eventFns.slice().forEach((handler) => handler(event));
+				eventFns.slice().forEach((handler) => {
+					handler(event);
+				});
 			}
 		},
 	};

packages/@n8n/utils/src/search/sublimeSearch.ts

@@ -1,8 +1,7 @@
 /*
-	Constants and utility functions used for searching for node types in node creator component
-*/
-
-// based on https://github.com/forrestthewoods/lib_fts/blob/master/code/fts_fuzzy_match.js
+ * Constants and utility functions used for searching for node types in node creator component
+ * based on https://github.com/forrestthewoods/lib_fts/blob/master/code/fts_fuzzy_match.js
+ */
 
 const SEQUENTIAL_BONUS = 60; // bonus for adjacent matches
 const SEPARATOR_BONUS = 30; // bonus if match occurs after a separator
@@ -34,33 +33,6 @@ function fuzzyMatchSimple(pattern: string, target: string): boolean {
 	return pattern.length !== 0 && target.length !== 0 && patternIdx === pattern.length;
 }
 
-/**
- * Does a fuzzy search to find pattern inside a string.
- * @param {*} pattern string        pattern to search for
- * @param {*} target     string        string which is being searched
- * @returns [boolean, number]       a boolean which tells if pattern was
- *                                  found or not and a search score
- */
-function fuzzyMatch(pattern: string, target: string): { matched: boolean; outScore: number } {
-	const recursionCount = 0;
-	const recursionLimit = 5;
-	const matches: number[] = [];
-	const maxMatches = 256;
-
-	return fuzzyMatchRecursive(
-		pattern,
-		target,
-		0 /* patternCurIndex */,
-		0 /* strCurrIndex */,
-		null /* srcMatces */,
-		matches,
-		maxMatches,
-		0 /* nextMatch */,
-		recursionCount,
-		recursionLimit,
-	);
-}
-
 function fuzzyMatchRecursive(
 	pattern: string,
 	target: string,
@@ -195,6 +167,33 @@ function fuzzyMatchRecursive(
 	return { matched: false, outScore };
 }
 
+/**
+ * Does a fuzzy search to find pattern inside a string.
+ * @param {*} pattern string        pattern to search for
+ * @param {*} target     string        string which is being searched
+ * @returns [boolean, number]       a boolean which tells if pattern was
+ *                                  found or not and a search score
+ */
+function fuzzyMatch(pattern: string, target: string): { matched: boolean; outScore: number } {
+	const recursionCount = 0;
+	const recursionLimit = 5;
+	const matches: number[] = [];
+	const maxMatches = 256;
+
+	return fuzzyMatchRecursive(
+		pattern,
+		target,
+		0 /* patternCurIndex */,
+		0 /* strCurrIndex */,
+		null /* srcMatces */,
+		matches,
+		maxMatches,
+		0 /* nextMatch */,
+		recursionCount,
+		recursionLimit,
+	);
+}
+
 // prop = 'key'
 // prop = 'key1.key2'
 // prop = ['key1', 'key2']
@@ -225,6 +224,7 @@ export function sublimeSearch<T extends object>(
 		keys.forEach(({ key, weight }) => {
 			const value = getValue(item, key);
 			if (Array.isArray(value)) {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 				values = values.concat(value.map((v) => ({ value: v, weight })));
 			} else if (typeof value === 'string') {
 				values.push({
@@ -237,24 +237,24 @@ export function sublimeSearch<T extends object>(
 		// for each item, check every key and get maximum score
 		const itemMatch = values.reduce(
 			(
-				accu: null | { matched: boolean; outScore: number },
+				result: null | { matched: boolean; outScore: number },
 				{ value, weight }: { value: string; weight: number },
 			) => {
 				if (!fuzzyMatchSimple(filter, value)) {
-					return accu;
+					return result;
 				}
 
 				const match = fuzzyMatch(filter, value);
 				match.outScore *= weight;
 
 				const { matched, outScore } = match;
-				if (!accu && matched) {
+				if (!result && matched) {
 					return match;
 				}
-				if (matched && accu && outScore > accu.outScore) {
+				if (matched && result && outScore > result.outScore) {
 					return match;
 				}
-				return accu;
+				return result;
 			},
 			null,
 		);
@@ -275,16 +275,3 @@ export function sublimeSearch<T extends object>(
 
 	return results;
 }
-
-export const sortByProperty = <T>(
-	property: keyof T,
-	arr: T[],
-	order: 'asc' | 'desc' = 'asc',
-): T[] =>
-	arr.sort((a, b) => {
-		const result = String(a[property]).localeCompare(String(b[property]), undefined, {
-			numeric: true,
-			sensitivity: 'base',
-		});
-		return order === 'asc' ? result : -result;
-	});

packages/@n8n/utils/src/shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/@n8n/utils/src/sort/sortByProperty.test.ts

@@ -1,4 +1,4 @@
-import { sortByProperty } from '@/utils/sortUtils';
+import { sortByProperty } from './sortByProperty';
 
 const arrayOfObjects = [
 	{ name: 'Álvaro', age: 30 },
@@ -7,8 +7,8 @@ const arrayOfObjects = [
 	{ name: 'Bob', age: 35 },
 ];
 
-describe('sortUtils', () => {
-	it('"sortByProperty" should sort an array of objects by a property', () => {
+describe('sortByProperty', () => {
+	it('should sort an array of objects by a property', () => {
 		const sortedArray = sortByProperty('name', arrayOfObjects);
 		expect(sortedArray).toEqual([
 			{ name: 'Álvaro', age: 30 },
@@ -18,7 +18,7 @@ describe('sortUtils', () => {
 		]);
 	});
 
-	it('"sortByProperty" should sort an array of objects by a property in descending order', () => {
+	it('should sort an array of objects by a property in descending order', () => {
 		const sortedArray = sortByProperty('name', arrayOfObjects, 'desc');
 		expect(sortedArray).toEqual([
 			{ name: 'Željko', age: 25 },
@@ -28,7 +28,7 @@ describe('sortUtils', () => {
 		]);
 	});
 
-	it('"sortByProperty" should sort an array of objects by a property if its number', () => {
+	it('should sort an array of objects by a property if its number', () => {
 		const sortedArray = sortByProperty('age', arrayOfObjects);
 		expect(sortedArray).toEqual([
 			{ name: 'Željko', age: 25 },
@@ -38,7 +38,7 @@ describe('sortUtils', () => {
 		]);
 	});
 
-	it('"sortByProperty" should sort an array of objects by a property in descending order if its number', () => {
+	it('should sort an array of objects by a property in descending order if its number', () => {
 		const sortedArray = sortByProperty('age', arrayOfObjects, 'desc');
 		expect(sortedArray).toEqual([
 			{ name: 'Bob', age: 35 },

packages/@n8n/utils/src/sort/sortByProperty.ts

@@ -0,0 +1,12 @@
+export const sortByProperty = <T>(
+	property: keyof T,
+	arr: T[],
+	order: 'asc' | 'desc' = 'asc',
+): T[] =>
+	arr.sort((a, b) => {
+		const result = String(a[property]).localeCompare(String(b[property]), undefined, {
+			numeric: true,
+			sensitivity: 'base',
+		});
+		return order === 'asc' ? result : -result;
+	});

packages/@n8n/utils/src/string/truncate.test.ts

@@ -0,0 +1,15 @@
+import { truncate } from './truncate';
+
+describe('truncate', () => {
+	it('should truncate text to 30 chars by default', () => {
+		expect(truncate('This is a very long text that should be truncated')).toBe(
+			'This is a very long text that ...',
+		);
+	});
+
+	it('should truncate text to given length', () => {
+		expect(truncate('This is a very long text that should be truncated', 25)).toBe(
+			'This is a very long text ...',
+		);
+	});
+});

packages/@n8n/utils/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "@n8n/typescript-config/tsconfig.frontend.json",
+	"compilerOptions": {
+		"baseUrl": ".",
+		"rootDir": ".",
+		"outDir": "dist",
+		"types": ["vite/client", "vitest/globals"],
+		"isolatedModules": true
+	},
+	"include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts", "tsup.config.ts"]
+}

packages/@n8n/utils/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+	entry: ['src/**/*.ts', '!src/**/*.test.ts', '!src/**/*.d.ts', '!src/__tests__**/*'],
+	format: ['cjs', 'esm'],
+	clean: true,
+	dts: true,
+	cjsInterop: true,
+	splitting: true,
+	sourcemap: true,
+});

packages/@n8n/utils/vite.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig, mergeConfig } from 'vite';
+import { vitestConfig } from '@n8n/vitest-config/frontend';
+
+export default mergeConfig(defineConfig({}), vitestConfig);

packages/design-system/package.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@n8n/composables": "workspace:*",
+    "@n8n/utils": "workspace:*",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.3",

packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { createEventBus, type EventBus } from '@n8n/utils/event-bus';
 import { onMounted, ref } from 'vue';
 
 import type { IconColor } from 'n8n-design-system/types/icon';
 
-import { createEventBus, type EventBus } from '../../utils';
 import N8nIcon from '../N8nIcon';
 import N8nText from '../N8nText';
 

packages/design-system/src/directives/n8n-truncate.ts

@@ -1,7 +1,6 @@
+import { truncate } from '@n8n/utils/string/truncate';
 import type { DirectiveBinding, ObjectDirective } from 'vue';
 
-import { truncate } from '../utils/string';
-
 /**
  * Custom directive `n8nTruncate` to truncate text content of an HTML element.
  *

packages/design-system/src/utils/form-event-bus.ts

@@ -1,4 +1,4 @@
-import { createEventBus } from './event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 
 export interface FormEventBusEvents {
 	submit: never;

packages/design-system/src/utils/index.ts

@@ -1,8 +1,6 @@
-export * from './event-bus';
 export * from './form-event-bus';
 export * from './markdown';
 export * from './typeguards';
 export * from './uid';
 export * from './valueByPath';
 export * from './testUtils';
-export * from './string';

packages/design-system/src/utils/string.test.ts

@@ -1,17 +0,0 @@
-import { truncate } from './string';
-
-describe('Utils string', () => {
-	describe('truncate', () => {
-		it('should truncate text to 30 chars by default', () => {
-			expect(truncate('This is a very long text that should be truncated')).toBe(
-				'This is a very long text that ...',
-			);
-		});
-
-		it('should truncate text to given length', () => {
-			expect(truncate('This is a very long text that should be truncated', 25)).toBe(
-				'This is a very long text ...',
-			);
-		});
-	});
-});

packages/design-system/tsconfig.json

@@ -13,7 +13,8 @@
 		],
 		"paths": {
 			"n8n-design-system*": ["./src*"],
-			"@n8n/composables*": ["../frontend/@n8n/composables/src*"]
+			"@n8n/composables*": ["../frontend/@n8n/composables/src*"],
+			"@n8n/utils*": ["../@n8n/utils/src*"]
 		}
 	},
 	"include": ["src/**/*.ts", "src/**/*.vue"]

packages/design-system/vite.config.mts

@@ -6,6 +6,7 @@ import icons from 'unplugin-icons/vite';
 import iconsResolver from 'unplugin-icons/resolver';
 import { vitestConfig } from '@n8n/vitest-config/frontend';
 
+const n8nDir = resolve(__dirname, '..', '@n8n');
 const frontendDir = resolve(__dirname, '..', 'frontend');
 
 export default mergeConfig(
@@ -31,6 +32,7 @@ export default mergeConfig(
 				'@': resolve(__dirname, 'src'),
 				'n8n-design-system': resolve(__dirname, 'src'),
 				'@n8n/composables(.*)': resolve(frontendDir, '@n8n', 'composables', 'src$1'),
+				'@n8n/utils(.*)': resolve(n8nDir, '@n8n', 'utils', 'src$1'),
 				lodash: 'lodash-es',
 			},
 		},

packages/editor-ui/package.json

@@ -36,6 +36,7 @@
     "@n8n/codemirror-lang-sql": "^1.0.2",
     "@n8n/composables": "workspace:*",
     "@n8n/permissions": "workspace:*",
+    "@n8n/utils": "workspace:*",
     "@replit/codemirror-indentation-markers": "^6.5.3",
     "@sentry/vue": "catalog:frontend",
     "@typescript/vfs": "^1.6.0",

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

@@ -12,8 +12,8 @@ import type {
 } from '@/types';
 import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
 import { NodeConnectionType } from 'n8n-workflow';
-import type { EventBus } from 'n8n-design-system';
-import { createEventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type { ViewportTransform } from '@vue-flow/core';
 
 export function createCanvasNodeData({

packages/editor-ui/src/components/AboutModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import Modal from './Modal.vue';
 import { ABOUT_MODAL_KEY } from '../constants';
 import { useRootStore } from '@/stores/root.store';

packages/editor-ui/src/components/AnnotationTagsDropdown.ee.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { useUIStore } from '@/stores/ui.store';
 import { useAnnotationTagsStore } from '@/stores/tags.store';
 import { ANNOTATION_TAGS_MANAGER_MODAL_KEY } from '@/constants';
-import type { EventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
 
 interface TagsDropdownWrapperProps {
 	placeholder?: string;

packages/editor-ui/src/components/ApiKeyCreateOrEditModal.vue

@@ -3,7 +3,7 @@ import Modal from '@/components/Modal.vue';
 import { API_KEY_CREATE_OR_EDIT_MODAL_KEY, DOCS_DOMAIN } from '@/constants';
 import { computed, onMounted, ref } from 'vue';
 import { useUIStore } from '@/stores/ui.store';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useI18n } from '@/composables/useI18n';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/root.store';

packages/editor-ui/src/components/ChangePasswordModal.vue

@@ -4,7 +4,8 @@ import { useToast } from '@/composables/useToast';
 import { CHANGE_PASSWORD_MODAL_KEY } from '../constants';
 import Modal from '@/components/Modal.vue';
 import { useUsersStore } from '@/stores/users.store';
-import { createFormEventBus, createEventBus } from 'n8n-design-system/utils';
+import { createFormEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type { IFormInputs, IFormInput } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
 

packages/editor-ui/src/components/ChatEmbedModal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import type { EventBus } from 'n8n-design-system/utils';
-import { createEventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 import Modal from './Modal.vue';
 import { CHAT_EMBED_MODAL_KEY, CHAT_TRIGGER_NODE_TYPE, WEBHOOK_NODE_TYPE } from '../constants';
 import { useRootStore } from '@/stores/root.store';

packages/editor-ui/src/components/CommunityPackageInstallModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import Modal from '@/components/Modal.vue';
 import {
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,

packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue

@@ -3,7 +3,7 @@ import Modal from '@/components/Modal.vue';
 import { COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '@/constants';
 import { useToast } from '@/composables/useToast';
 import { useCommunityNodesStore } from '@/stores/communityNodes.store';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useI18n } from '@/composables/useI18n';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { computed, ref } from 'vue';

packages/editor-ui/src/components/CommunityPlusEnrollmentModal.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup="">
 import { ref } from 'vue';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type { Validatable, IValidator } from 'n8n-design-system';
 import { N8nFormInput } from 'n8n-design-system';
 import { VALID_EMAIL_REGEX } from '@/constants';

packages/editor-ui/src/components/ContactPromptModal.vue

@@ -5,7 +5,7 @@ import { VALID_EMAIL_REGEX } from '@/constants';
 import Modal from '@/components/Modal.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/root.store';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useToast } from '@/composables/useToast';
 import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 import { useTelemetry } from '@/composables/useTelemetry';

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -37,9 +37,9 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { Project, ProjectSharingData } from '@/types/projects.types';
-import { assert } from '@/utils/assert';
+import { assert } from '@n8n/utils/assert';
 import type { IMenuItem } from 'n8n-design-system';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useI18n } from '@/composables/useI18n';

packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue

@@ -14,7 +14,7 @@ import type { ProjectListItem, ProjectSharingData } from '@/types/projects.types
 import { ProjectTypes } from '@/types/projects.types';
 import type { RoleMap } from '@/types/roles.types';
 import { splitName } from '@/utils/projects.utils';
-import type { EventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
 import type { ICredentialDataDecryptedObject } from 'n8n-workflow';
 import { computed, onMounted, ref, watch } from 'vue';
 

packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue

@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue';
 import { listenForModalChanges, useUIStore } from '@/stores/ui.store';
 import { listenForCredentialChanges, useCredentialsStore } from '@/stores/credentials.store';
-import { assert } from '@/utils/assert';
+import { assert } from '@n8n/utils/assert';
 import CredentialsDropdown from './CredentialsDropdown.vue';
 import { useI18n } from '@/composables/useI18n';
 import { CREDENTIAL_EDIT_MODAL_KEY } from '@/constants';

packages/editor-ui/src/components/CredentialsSelectModal.vue

@@ -5,7 +5,7 @@ import { useCredentialsStore } from '@/stores/credentials.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { N8nButton, N8nSelect } from 'n8n-design-system';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { onMounted, ref } from 'vue';
 import { CREDENTIAL_SELECT_MODAL_KEY } from '../constants';
 import Modal from './Modal.vue';

packages/editor-ui/src/components/DeleteUserModal.vue

@@ -5,7 +5,7 @@ import Modal from '@/components/Modal.vue';
 import ProjectSharing from '@/components/Projects/ProjectSharing.vue';
 import { useUsersStore } from '@/stores/users.store';
 import { useProjectsStore } from '@/stores/projects.store';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type { ProjectSharingData } from '@/types/projects.types';
 import { useI18n } from '@/composables/useI18n';
 

packages/editor-ui/src/components/DuplicateWorkflowDialog.vue

@@ -7,7 +7,7 @@ import Modal from '@/components/Modal.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { IWorkflowDataUpdate } from '@/Interface';
-import { createEventBus, type EventBus } from 'n8n-design-system/utils';
+import { createEventBus, type EventBus } from '@n8n/utils/event-bus';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useRouter } from 'vue-router';

packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { EventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
 import { onBeforeUnmount, onMounted, ref } from 'vue';
 import ExpandableInputBase from './ExpandableInputBase.vue';
 import { onClickOutside } from '@vueuse/core';

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

@@ -15,7 +15,7 @@ import type { Segment } from '@/types/expressions';
 import { startCompletion } from '@codemirror/autocomplete';
 import type { EditorState, SelectionRange } from '@codemirror/state';
 import type { IDataObject } from 'n8n-workflow';
-import { createEventBus, type EventBus } from 'n8n-design-system';
+import { createEventBus, type EventBus } from '@n8n/utils/event-bus';
 
 const isFocused = ref(false);
 const segments = ref<Segment[]>([]);

packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue

@@ -4,7 +4,7 @@ import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import { useToast } from '@/composables/useToast';
 import { useI18n } from '@/composables/useI18n';
 import { computed, onMounted, ref } from 'vue';
-import type { EventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
 
 const emit = defineEmits<{
 	change: [value: boolean];

packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue

@@ -2,7 +2,7 @@
 import Modal from './Modal.vue';
 import { EXTERNAL_SECRETS_PROVIDER_MODAL_KEY, MODAL_CONFIRM } from '@/constants';
 import { computed, onMounted, ref } from 'vue';
-import type { EventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
 import { useExternalSecretsProvider } from '@/composables/useExternalSecretsProvider';
 import { useI18n } from '@/composables/useI18n';
 import { useMessage } from '@/composables/useMessage';
@@ -17,7 +17,7 @@ import type {
 import type { IParameterLabel } from 'n8n-workflow';
 import ExternalSecretsProviderImage from '@/components/ExternalSecretsProviderImage.ee.vue';
 import ExternalSecretsProviderConnectionSwitch from '@/components/ExternalSecretsProviderConnectionSwitch.ee.vue';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 
 const props = defineProps<{
 	data: { eventBus: EventBus; name: string };

packages/editor-ui/src/components/ImportCurlModal.vue

@@ -3,7 +3,7 @@ import Modal from '@/components/Modal.vue';
 import { IMPORT_CURL_MODAL_KEY } from '@/constants';
 import { onMounted, ref } from 'vue';
 import { useUIStore } from '@/stores/ui.store';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 

packages/editor-ui/src/components/InlineTextEdit.vue

@@ -2,7 +2,7 @@
 import { ref, watch } from 'vue';
 import ExpandableInputEdit from '@/components/ExpandableInput/ExpandableInputEdit.vue';
 import ExpandableInputPreview from '@/components/ExpandableInput/ExpandableInputPreview.vue';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 
 const props = withDefaults(
 	defineProps<{

packages/editor-ui/src/components/InputNodeSelect.vue

@@ -7,7 +7,7 @@ import { isPresent } from '@/utils/typesUtils';
 import type { IConnectedNode, Workflow } from 'n8n-workflow';
 import { computed } from 'vue';
 import NodeIcon from './NodeIcon.vue';
-import { truncate } from 'n8n-design-system';
+import { truncate } from '@n8n/utils/string/truncate';
 
 type Props = {
 	nodes: IConnectedNode[];

packages/editor-ui/src/components/IntersectionObserved.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { nextTick } from 'vue';
 import { onBeforeUnmount, onMounted, ref } from 'vue';
-import type { EventBus } from 'n8n-design-system/utils';
-import { createEventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 
 const props = withDefaults(
 	defineProps<{

packages/editor-ui/src/components/IntersectionObserver.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue';
-import type { EventBus } from 'n8n-design-system/utils';
-import { createEventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 
 const props = withDefaults(
 	defineProps<{

packages/editor-ui/src/components/InviteUsersModal.vue

@@ -11,7 +11,8 @@ import {
 } from '@/constants';
 import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';
-import { createFormEventBus, createEventBus } from 'n8n-design-system/utils';
+import { createFormEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useClipboard } from '@/composables/useClipboard';
 import { useI18n } from '@/composables/useI18n';
 import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -37,7 +37,7 @@ import { useDocumentTitle } from '@/composables/useDocumentTitle';
 import { useMessage } from '@/composables/useMessage';
 import { useToast } from '@/composables/useToast';
 import { getResourcePermissions } from '@/permissions';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { nodeViewEventBus } from '@/event-bus';
 import { hasPermission } from '@/utils/rbac/permissions';
 import { useCanvasStore } from '@/stores/canvas.store';

packages/editor-ui/src/components/MainSidebarSourceControl.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useI18n } from '@/composables/useI18n';
 import { hasPermission } from '@/utils/rbac/permissions';
 import { useToast } from '@/composables/useToast';

packages/editor-ui/src/components/Modal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ElDialog } from 'element-plus';
 import { computed, onMounted, onBeforeUnmount } from 'vue';
-import type { EventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
 import { useUIStore } from '@/stores/ui.store';
 import type { ModalKey } from '@/Interface';
 import { APP_MODALS_ELEMENT_ID } from '@/constants';

packages/editor-ui/src/components/ModalDrawer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useUIStore } from '@/stores/ui.store';
 import { onBeforeUnmount, onMounted } from 'vue';
-import type { EventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
 import { ElDrawer } from 'element-plus';
 
 const props = withDefaults(

packages/editor-ui/src/components/Modals.vue

@@ -69,7 +69,7 @@ import ProjectMoveResourceModal from '@/components/Projects/ProjectMoveResourceM
 import NewAssistantSessionModal from '@/components/AskAssistant/NewAssistantSessionModal.vue';
 import PromptMfaCodeModal from './PromptMfaCodeModal/PromptMfaCodeModal.vue';
 import CommunityPlusEnrollmentModal from '@/components/CommunityPlusEnrollmentModal.vue';
-import type { EventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
 </script>
 
 <template>

packages/editor-ui/src/components/Node/NodeCreator/utils.ts

@@ -17,7 +17,7 @@ import {
 } from '@/constants';
 import { v4 as uuidv4 } from 'uuid';
 
-import { sublimeSearch } from '@/utils/sortUtils';
+import { sublimeSearch } from '@n8n/utils/search/sublimeSearch';
 import type { NodeViewItemSection } from './viewsData';
 import { i18n } from '@/plugins/i18n';
 import { sortBy } from 'lodash-es';

packages/editor-ui/src/components/NodeCredentials.vue

@@ -22,7 +22,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { assert } from '@/utils/assert';
+import { assert } from '@n8n/utils/assert';
 import {
 	getAllNodeCredentialForAuthType,
 	getAuthTypeForNodeCredential,

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type { IRunData, Workflow } from 'n8n-workflow';
 import { jsonParse, NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 import type { IUpdateInformation, TargetItem } from '@/Interface';

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

@@ -40,7 +40,7 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useHistoryStore } from '@/stores/history.store';
 import { RenameNodeCommand } from '@/models/history';
 import { useCredentialsStore } from '@/stores/credentials.store';
-import type { EventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useI18n } from '@/composables/useI18n';

packages/editor-ui/src/components/NpsSurvey.vue

@@ -5,7 +5,7 @@ import ModalDrawer from '@/components/ModalDrawer.vue';
 import { useToast } from '@/composables/useToast';
 import { useI18n } from '@/composables/useI18n';
 import { ref, computed, watch } from 'vue';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 import { useStyles } from '@/composables/useStyles';

packages/editor-ui/src/components/ParameterInput.test.ts

@@ -8,7 +8,7 @@ import { waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import type { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { cleanupAppModals, createAppModals } from '@/__tests__/utils';
-import { createEventBus } from 'n8n-design-system';
+import { createEventBus } from '@n8n/utils/event-bus';
 
 let mockNdvState: Partial<ReturnType<typeof useNDVStore>>;
 let mockNodeTypesState: Partial<ReturnType<typeof useNodeTypesStore>>;

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

@@ -62,8 +62,8 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { isCredentialOnlyNodeType } from '@/utils/credentialOnlyNodes';
 import { N8nIcon, N8nInput, N8nInputNumber, N8nOption, N8nSelect } from 'n8n-design-system';
-import type { EventBus } from 'n8n-design-system/utils';
-import { createEventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useRouter } from 'vue-router';
 import { useElementSize } from '@vueuse/core';
 import { completeExpressionSyntax, isStringWithExpressionSyntax } from '@/utils/expressions';

packages/editor-ui/src/components/ParameterInputExpanded.vue

@@ -4,7 +4,7 @@ import { useI18n } from '@/composables/useI18n';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { isValueExpression as isValueExpressionUtil } from '@/utils/nodeTypesUtils';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type {
 	INodeParameterResourceLocator,
 	INodeProperties,

packages/editor-ui/src/components/ParameterInputFull.vue

@@ -13,7 +13,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { getMappedResult } from '@/utils/mappingUtils';
 import { hasExpressionMapping, hasOnlyListMode, isValueExpression } from '@/utils/nodeTypesUtils';
 import { isResourceLocatorValue } from '@/utils/typeGuards';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import {
 	type INodeProperties,
 	type IParameterLabel,

packages/editor-ui/src/components/ParameterInputWrapper.vue

@@ -16,8 +16,8 @@ import useEnvironmentsStore from '@/stores/environments.ee.store';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { isValueExpression, parseResourceMapperFieldName } from '@/utils/nodeTypesUtils';
-import type { EventBus } from 'n8n-design-system/utils';
-import { createEventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { computed, useTemplateRef } from 'vue';
 
 type Props = {

packages/editor-ui/src/components/PersonalizationModal.vue

@@ -86,7 +86,8 @@ import Modal from '@/components/Modal.vue';
 import type { IFormInputs, IPersonalizationLatestVersion } from '@/Interface';
 import { useRootStore } from '@/stores/root.store';
 import { useUsersStore } from '@/stores/users.store';
-import { createEventBus, createFormEventBus } from 'n8n-design-system/utils';
+import { createFormEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { usePostHog } from '@/stores/posthog.store';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useI18n } from '@/composables/useI18n';

packages/editor-ui/src/components/Projects/ProjectCardBadge.test.ts

@@ -1,6 +1,6 @@
 import { createComponentRenderer } from '@/__tests__/render';
 import ProjectCardBadge from '@/components/Projects/ProjectCardBadge.vue';
-import { truncate } from 'n8n-design-system';
+import { truncate } from '@n8n/utils/string/truncate';
 
 const renderComponent = createComponentRenderer(ProjectCardBadge);
 

packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, h } from 'vue';
-import { truncate } from 'n8n-design-system';
+import { truncate } from '@n8n/utils/string/truncate';
 import type { ICredentialsResponse, IUsedCredential, IWorkflowDb } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
 import { useUIStore } from '@/stores/ui.store';
@@ -14,8 +14,8 @@ import ProjectMoveSuccessToastMessage from '@/components/Projects/ProjectMoveSuc
 import ProjectMoveResourceModalCredentialsList from '@/components/Projects/ProjectMoveResourceModalCredentialsList.vue';
 import { useToast } from '@/composables/useToast';
 import { getResourcePermissions } from '@/permissions';
-import { sortByProperty } from '@/utils/sortUtils';
-import type { EventBus } from 'n8n-design-system/utils';
+import { sortByProperty } from '@n8n/utils/sort/sortByProperty';
+import type { EventBus } from '@n8n/utils/event-bus';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 

packages/editor-ui/src/components/Projects/ProjectMoveSuccessToastMessage.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { truncate } from 'n8n-design-system';
+import { truncate } from '@n8n/utils/string/truncate';
 import { ResourceType, splitName } from '@/utils/projects.utils';
 import type { ProjectListItem } from '@/types/projects.types';
 import { ProjectTypes } from '@/types/projects.types';

packages/editor-ui/src/components/Projects/ProjectSharing.vue

@@ -4,7 +4,7 @@ import { useI18n } from '@/composables/useI18n';
 import type { ProjectListItem, ProjectSharingData } from '@/types/projects.types';
 import ProjectSharingInfo from '@/components/Projects/ProjectSharingInfo.vue';
 import type { RoleMap } from '@/types/roles.types';
-import { sortByProperty } from '@/utils/sortUtils';
+import { sortByProperty } from '@n8n/utils/sort/sortByProperty';
 
 const locale = useI18n();
 

packages/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue

@@ -5,7 +5,7 @@ import { PROMPT_MFA_CODE_MODAL_KEY } from '@/constants';
 import { useI18n } from '@/composables/useI18n';
 import { promptMfaCodeBus } from '@/event-bus';
 import type { IFormInputs } from '@/Interface';
-import { createFormEventBus } from 'n8n-design-system';
+import { createFormEventBus } from 'n8n-design-system/utils';
 import { validate as validateUuid } from 'uuid';
 
 const i18n = useI18n();

packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue

@@ -20,8 +20,8 @@ import {
 } from '@/utils/nodeTypesUtils';
 import { isResourceLocatorValue } from '@/utils/typeGuards';
 import stringify from 'fast-json-stable-stringify';
-import type { EventBus } from 'n8n-design-system/utils';
-import { createEventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type {
 	INode,
 	INodeListSearchItems,

packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue

@@ -2,8 +2,8 @@
 import { useI18n } from '@/composables/useI18n';
 import type { IResourceLocatorResultExpanded } from '@/Interface';
 import { N8nLoading } from 'n8n-design-system';
-import type { EventBus } from 'n8n-design-system/utils';
-import { createEventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type { NodeParameterValue } from 'n8n-workflow';
 import { computed, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';
 

packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue

@@ -6,9 +6,9 @@ import { useLogStreamingStore } from '@/stores/logStreaming.store';
 import type { MessageEventBusDestinationOptions } from 'n8n-workflow';
 import { deepCopy, defaultMessageEventBusDestinationOptions } from 'n8n-workflow';
 import type { BaseTextKey } from '@/plugins/i18n';
-import type { EventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
 import { useI18n } from '@/composables/useI18n';
-import { assert } from '@/utils/assert';
+import { assert } from '@n8n/utils/assert';
 
 const DESTINATION_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',

packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue

@@ -20,8 +20,8 @@ import {
 	defaultMessageEventBusDestinationSyslogOptions,
 	defaultMessageEventBusDestinationSentryOptions,
 } from 'n8n-workflow';
-import type { EventBus } from 'n8n-design-system';
-import { createEventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 
 import { useLogStreamingStore } from '@/stores/logStreaming.store';
 import { useNDVStore } from '@/stores/ndv.store';

packages/editor-ui/src/components/SourceControlPullModal.ee.test.ts

@@ -1,7 +1,7 @@
 import SourceControlPullModalEe from './SourceControlPullModal.ee.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createTestingPinia } from '@pinia/testing';
-import { createEventBus } from 'n8n-design-system';
+import { createEventBus } from '@n8n/utils/event-bus';
 import userEvent from '@testing-library/user-event';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { mockedStore } from '@/__tests__/utils';

packages/editor-ui/src/components/SourceControlPullModal.ee.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Modal from './Modal.vue';
 import { SOURCE_CONTROL_PULL_MODAL_KEY, VIEWS } from '@/constants';
-import type { EventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
 import { useI18n } from '@/composables/useI18n';
 import { useLoadingService } from '@/composables/useLoadingService';
 import { useToast } from '@/composables/useToast';

packages/editor-ui/src/components/SourceControlPushModal.ee.test.ts

@@ -4,7 +4,7 @@ import { useRoute } from 'vue-router';
 import { createComponentRenderer } from '@/__tests__/render';
 import SourceControlPushModal from '@/components/SourceControlPushModal.ee.vue';
 import { createTestingPinia } from '@pinia/testing';
-import { createEventBus } from 'n8n-design-system';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type { SourceControlledFile } from '@n8n/api-types';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { mockedStore } from '@/__tests__/utils';

packages/editor-ui/src/components/SourceControlPushModal.ee.vue

@@ -2,7 +2,7 @@
 import Modal from './Modal.vue';
 import { SOURCE_CONTROL_PUSH_MODAL_KEY, VIEWS } from '@/constants';
 import { computed, onMounted, ref, toRaw, watch } from 'vue';
-import type { EventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
 import { useI18n } from '@/composables/useI18n';
 import { useLoadingService } from '@/composables/useLoadingService';
 import { useToast } from '@/composables/useToast';

packages/editor-ui/src/components/TagsContainer.vue

@@ -4,7 +4,7 @@ import type { ComponentInstance } from 'vue';
 import type { ITag } from '@/Interface';
 import IntersectionObserver from './IntersectionObserver.vue';
 import IntersectionObserved from './IntersectionObserved.vue';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { debounce } from 'lodash-es';
 
 interface TagsContainerProps {

packages/editor-ui/src/components/TagsDropdown.vue

@@ -4,7 +4,7 @@ import { onClickOutside } from '@vueuse/core';
 import type { ITag } from '@/Interface';
 import { MAX_TAG_NAME_LENGTH } from '@/constants';
 import { N8nOption, N8nSelect } from 'n8n-design-system';
-import type { EventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
 import { useI18n } from '@/composables/useI18n';
 import { v4 as uuid } from 'uuid';
 import { useToast } from '@/composables/useToast';

packages/editor-ui/src/components/TagsManager/TagsManager.vue

@@ -4,7 +4,7 @@ import type { ITag } from '@/Interface';
 import TagsView from '@/components/TagsManager/TagsView/TagsView.vue';
 import NoTagsView from '@/components/TagsManager/NoTagsView.vue';
 import Modal from '@/components/Modal.vue';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useI18n } from '@/composables/useI18n';
 import type { BaseTextKey } from '@/plugins/i18n';
 

packages/editor-ui/src/components/TestDefinition/EditDefinition/NodesPinning.vue

@@ -7,7 +7,8 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { CanvasConnectionPort, CanvasEventBusEvents, CanvasNodeData } from '@/types';
 import { useVueFlow } from '@vue-flow/core';
-import { createEventBus, N8nTooltip } from 'n8n-design-system';
+import { N8nTooltip } from 'n8n-design-system';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { computed, onMounted, ref, useCssModule } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 

packages/editor-ui/src/components/TestDefinition/EditDefinition/TagsInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from '@/composables/useI18n';
 import type { ITag } from '@/Interface';
-import { createEventBus } from 'n8n-design-system';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { computed } from 'vue';
 import type { EditableField } from '../types';
 

packages/editor-ui/src/components/TriggerPanel.vue

@@ -17,7 +17,7 @@ import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useRouter } from 'vue-router';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { isTriggerPanelObject } from '@/utils/typeGuards';

packages/editor-ui/src/components/Workers/WorkerCard.ee.vue

@@ -7,7 +7,7 @@ import { averageWorkerLoadFromLoadsAsString, memAsGb } from '../../utils/workerU
 import WorkerJobAccordion from './WorkerJobAccordion.ee.vue';
 import WorkerNetAccordion from './WorkerNetAccordion.ee.vue';
 import WorkerChartsAccordion from './WorkerChartsAccordion.ee.vue';
-import { sortByProperty } from '@/utils/sortUtils';
+import { sortByProperty } from '@n8n/utils/sort/sortByProperty';
 import { useI18n } from '@/composables/useI18n';
 
 let interval: NodeJS.Timer;

packages/editor-ui/src/components/WorkflowCard.vue

@@ -24,7 +24,7 @@ import { useI18n } from '@/composables/useI18n';
 import { useRouter } from 'vue-router';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { ResourceType } from '@/utils/projects.utils';
-import type { EventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
 import type { WorkflowResource } from './layouts/ResourcesListLayout.vue';
 import { type ProjectIcon as CardProjectIcon, ProjectTypes } from '@/types/projects.types';
 

packages/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue

@@ -2,8 +2,8 @@
 import type { ComponentInstance } from 'vue';
 import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import type { EventBus } from 'n8n-design-system/utils';
-import { createEventBus } from 'n8n-design-system/utils';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type {
 	INodeParameterResourceLocator,
 	INodeProperties,

packages/editor-ui/src/components/WorkflowSettings.vue

@@ -20,7 +20,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/root.store';
 import { useWorkflowsEEStore } from '@/stores/workflows.ee.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { ProjectTypes } from '@/types/projects.types';

packages/editor-ui/src/components/WorkflowShareModal.ee.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, watch, onMounted, ref } from 'vue';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus } from '@n8n/utils/event-bus';
 
 import Modal from './Modal.vue';
 import {

packages/editor-ui/src/components/WorkflowTagsDropdown.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { useUIStore } from '@/stores/ui.store';
 import { useTagsStore } from '@/stores/tags.store';
 import { TAGS_MANAGER_MODAL_KEY } from '@/constants';
-import type { EventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
 
 interface TagsDropdownWrapperProps {
 	placeholder?: string;

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

@@ -19,8 +19,8 @@ import { MiniMap } from '@vue-flow/minimap';
 import Node from './elements/nodes/CanvasNode.vue';
 import Edge from './elements/edges/CanvasEdge.vue';
 import { computed, onMounted, onUnmounted, provide, ref, toRef, useCssModule, watch } from 'vue';
-import type { EventBus } from 'n8n-design-system';
-import { createEventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useShortKeyPress } from '@n8n/composables/useShortKeyPress';
 import { useContextMenu, type ContextMenuAction } from '@/composables/useContextMenu';

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

@@ -1,7 +1,7 @@
 import { waitFor } from '@testing-library/vue';
 import { createPinia, setActivePinia } from 'pinia';
 import WorkflowCanvas from '@/components/canvas/WorkflowCanvas.vue';
-import { createEventBus } from 'n8n-design-system';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { createCanvasNodeElement, createCanvasConnection } from '@/__tests__/data';
 import type { Workflow } from 'n8n-workflow';
 import { createComponentRenderer } from '@/__tests__/render';

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

@@ -4,8 +4,8 @@ import { computed, ref, toRef, useCssModule } from 'vue';
 import type { Workflow } from 'n8n-workflow';
 import type { IWorkflowDb } from '@/Interface';
 import { useCanvasMapping } from '@/composables/useCanvasMapping';
-import type { EventBus } from 'n8n-design-system';
-import { createEventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 import type { CanvasEventBusEvents } from '@/types';
 import { useVueFlow } from '@vue-flow/core';
 

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

@@ -32,8 +32,8 @@ import {
 	createCanvasConnectionHandleString,
 	insertSpacersBetweenEndpoints,
 } from '@/utils/canvasUtils';
-import type { EventBus } from 'n8n-design-system';
-import { createEventBus } from 'n8n-design-system';
+import type { EventBus } from '@n8n/utils/event-bus';
+import { createEventBus } from '@n8n/utils/event-bus';
 import { isEqual } from 'lodash-es';
 import CanvasNodeTrigger from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeTrigger.vue';
 

packages/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.ee.vue

@@ -3,7 +3,7 @@ import { ref, computed } from 'vue';
 import type { AnnotationVote, ExecutionSummary } from 'n8n-workflow';
 import { useExecutionsStore } from '@/stores/executions.store';
 import AnnotationTagsDropdown from '@/components/AnnotationTagsDropdown.ee.vue';
-import { createEventBus } from 'n8n-design-system';
+import { createEventBus } from '@n8n/utils/event-bus';
 import VoteButtons from '@/components/executions/workflow/VoteButtons.vue';
 import { useToast } from '@/composables/useToast';
 import { useI18n } from '@/composables/useI18n';

packages/editor-ui/src/composables/useGlobalEntityCreation.ts

@@ -2,7 +2,7 @@ import { computed, ref } from 'vue';
 import { VIEWS } from '@/constants';
 import { useRouter } from 'vue-router';
 import { useI18n } from '@/composables/useI18n';
-import { sortByProperty } from '@/utils/sortUtils';
+import { sortByProperty } from '@n8n/utils/sort/sortByProperty';
 import { useToast } from '@/composables/useToast';
 import { useProjectsStore } from '@/stores/projects.store';
 import { useSettingsStore } from '@/stores/settings.store';