From ef87da4c193a08e089e48044906a4f5ce9959a22 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 6 Feb 2025 12:44:30 +0200
Subject: [PATCH] feat: Add reusable frontend `composables` package (#13077)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com>
---
 codecov.yml                                   |   1 +
 packages/design-system/.eslintrc.js           |  10 +-
 packages/design-system/package.json           |   8 +-
 .../N8nKeyboardShortcut.vue                   |   2 +-
 .../components/N8nUserStack/UserStack.test.ts |   3 +-
 .../design-system/src/{main.ts => index.ts}   |   1 -
 packages/design-system/tsconfig.json          |  23 +-
 packages/design-system/vite.config.mts        |  30 +-
 packages/editor-ui/.eslintrc.js               |  10 +-
 packages/editor-ui/package.json               |   4 +
 .../src/components/CanvasControls.vue         |   2 +-
 packages/editor-ui/src/components/Node.vue    |   3 +-
 .../src/components/NodeDetailsView.vue        |   2 +-
 packages/editor-ui/src/components/Sticky.vue  |   2 +-
 .../src/components/canvas/Canvas.test.ts      |   2 +-
 .../src/components/canvas/Canvas.vue          |   3 +-
 .../src/composables/useCanvasMouseSelect.ts   |   2 +-
 .../src/composables/useCanvasPanning.ts       |   2 +-
 .../src/composables/useDebugInfo.test.ts      |   2 +-
 .../editor-ui/src/composables/useDebugInfo.ts |   2 +-
 .../src/composables/useHistoryHelper.ts       |   2 +-
 .../src/composables/useKeybindings.ts         |   2 +-
 .../editor-ui/src/composables/useNodeBase.ts  |   2 +-
 packages/editor-ui/src/views/NodeView.vue     |   2 +-
 packages/editor-ui/tsconfig.json              |  23 +-
 packages/editor-ui/vite.config.mts            |   8 +-
 .../frontend/@n8n/composables/.eslintrc.cjs   |   3 +
 packages/frontend/@n8n/composables/.gitignore |  24 +
 packages/frontend/@n8n/composables/README.md  |  24 +
 .../frontend/@n8n/composables/biome.jsonc     |   4 +
 .../frontend/@n8n/composables/package.json    |  46 ++
 .../@n8n/composables/src/__tests__/setup.ts   |   4 +
 .../frontend/@n8n/composables/src/shims.d.ts  |   1 +
 .../composables/src}/useDeviceSupport.test.ts |   2 +-
 .../@n8n/composables/src}/useDeviceSupport.ts |   0
 .../frontend/@n8n/composables/tsconfig.json   |  10 +
 .../frontend/@n8n/composables/tsup.config.ts  |  11 +
 .../frontend/@n8n/composables/vite.config.ts  |   4 +
 .../frontend/tooling/eslint-config/index.cjs  |  14 +
 .../frontend/tooling/eslint-config/index.d.ts |   3 +
 .../tooling/eslint-config/package.json        |  23 +
 .../tooling/typescript-config/package.json    |  18 +
 .../tooling/typescript-config/tsconfig.json   |  13 +
 .../frontend/tooling/vitest-config/index.d.ts |   3 +
 .../frontend/tooling/vitest-config/index.mjs  |  30 +
 .../tooling/vitest-config/package.json        |  27 +
 pnpm-lock.yaml                                | 566 +++++++++++-------
 pnpm-workspace.yaml                           |   8 +
 turbo.json                                    |   2 +
 49 files changed, 684 insertions(+), 309 deletions(-)
 rename packages/design-system/src/{main.ts => index.ts} (74%)
 create mode 100644 packages/frontend/@n8n/composables/.eslintrc.cjs
 create mode 100644 packages/frontend/@n8n/composables/.gitignore
 create mode 100644 packages/frontend/@n8n/composables/README.md
 create mode 100644 packages/frontend/@n8n/composables/biome.jsonc
 create mode 100644 packages/frontend/@n8n/composables/package.json
 create mode 100644 packages/frontend/@n8n/composables/src/__tests__/setup.ts
 create mode 100644 packages/frontend/@n8n/composables/src/shims.d.ts
 rename packages/{design-system/src/composables => frontend/@n8n/composables/src}/useDeviceSupport.test.ts (98%)
 rename packages/{design-system/src/composables => frontend/@n8n/composables/src}/useDeviceSupport.ts (100%)
 create mode 100644 packages/frontend/@n8n/composables/tsconfig.json
 create mode 100644 packages/frontend/@n8n/composables/tsup.config.ts
 create mode 100644 packages/frontend/@n8n/composables/vite.config.ts
 create mode 100644 packages/frontend/tooling/eslint-config/index.cjs
 create mode 100644 packages/frontend/tooling/eslint-config/index.d.ts
 create mode 100644 packages/frontend/tooling/eslint-config/package.json
 create mode 100644 packages/frontend/tooling/typescript-config/package.json
 create mode 100644 packages/frontend/tooling/typescript-config/tsconfig.json
 create mode 100644 packages/frontend/tooling/vitest-config/index.d.ts
 create mode 100644 packages/frontend/tooling/vitest-config/index.mjs
 create mode 100644 packages/frontend/tooling/vitest-config/package.json

diff --git a/codecov.yml b/codecov.yml
index 362ebcb760..dfcd2b0d9c 100644
--- a/codecov.yml
+++ b/codecov.yml
@@ -46,6 +46,7 @@ component_management:
         - packages/@n8n/codemirror-lang/**
         - packages/design-system/**
         - packages/editor-ui/**
+        - packages/frontend/**
     - component_id: nodes_packages
       name: Nodes
       paths:
diff --git a/packages/design-system/.eslintrc.js b/packages/design-system/.eslintrc.js
index deece11c63..99d5ff4c6e 100644
--- a/packages/design-system/.eslintrc.js
+++ b/packages/design-system/.eslintrc.js
@@ -1,13 +1,9 @@
-const sharedOptions = require('@n8n_io/eslint-config/shared');
+const { createFrontendEslintConfig } = require('@n8n/frontend-eslint-config');
 
 /**
  * @type {import('@types/eslint').ESLint.ConfigData}
  */
-module.exports = {
-	extends: ['@n8n_io/eslint-config/frontend'],
-
-	...sharedOptions(__dirname, 'frontend'),
-
+module.exports = createFrontendEslintConfig(__dirname, {
 	rules: {
 		// TODO: Remove these
 		'import/no-default-export': 'warn',
@@ -44,4 +40,4 @@ module.exports = {
 			},
 		},
 	],
-};
+});
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 730593efbd..f9b569a677 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -1,8 +1,8 @@
 {
   "name": "n8n-design-system",
   "version": "1.67.0",
-  "main": "src/main.ts",
-  "import": "src/main.ts",
+  "main": "src/index.ts",
+  "import": "src/index.ts",
   "scripts": {
     "dev": "pnpm run storybook",
     "clean": "rimraf dist .turbo",
@@ -19,6 +19,9 @@
     "lintfix": "eslint src --ext .js,.ts,.vue --fix"
   },
   "devDependencies": {
+    "@n8n/frontend-eslint-config": "workspace:*",
+    "@n8n/frontend-typescript-config": "workspace:*",
+    "@n8n/frontend-vitest-config": "workspace:*",
     "@n8n/storybook": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.0",
@@ -41,6 +44,7 @@
     "vue-tsc": "catalog:frontend"
   },
   "dependencies": {
+    "@n8n/composables": "workspace:*",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.3",
diff --git a/packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue b/packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue
index 77bbc2d8c0..ea237e5531 100644
--- a/packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue
+++ b/packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { computed } from 'vue';
 
-import { useDeviceSupport } from '../../composables/useDeviceSupport';
 import type { KeyboardShortcut } from '../../types/keyboardshortcut';
 
 const props = defineProps<KeyboardShortcut>();
diff --git a/packages/design-system/src/components/N8nUserStack/UserStack.test.ts b/packages/design-system/src/components/N8nUserStack/UserStack.test.ts
index 1b5ae600ae..5e2d1e10fa 100644
--- a/packages/design-system/src/components/N8nUserStack/UserStack.test.ts
+++ b/packages/design-system/src/components/N8nUserStack/UserStack.test.ts
@@ -1,8 +1,7 @@
 import { render } from '@testing-library/vue';
 
-import { N8nAvatar, N8nUserInfo } from 'n8n-design-system/main';
-
 import UserStack from './UserStack.vue';
+import { N8nAvatar, N8nUserInfo } from '../index';
 
 describe('UserStack', () => {
 	it('should render flat user list', () => {
diff --git a/packages/design-system/src/main.ts b/packages/design-system/src/index.ts
similarity index 74%
rename from packages/design-system/src/main.ts
rename to packages/design-system/src/index.ts
index dddb89f888..d96d74532f 100644
--- a/packages/design-system/src/main.ts
+++ b/packages/design-system/src/index.ts
@@ -1,6 +1,5 @@
 import * as locale from './locale';
 
-export { useDeviceSupport } from './composables/useDeviceSupport';
 export * from './components';
 export * from './plugin';
 export * from './types';
diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json
index 1b96b238c1..4a3a72f3fc 100644
--- a/packages/design-system/tsconfig.json
+++ b/packages/design-system/tsconfig.json
@@ -1,16 +1,10 @@
 {
-	"extends": "../../tsconfig.json",
+	"extends": "@n8n/frontend-typescript-config",
 	"compilerOptions": {
-		"rootDir": ".",
-		"outDir": "dist",
-		"target": "esnext",
-		"module": "esnext",
-		"importHelpers": true,
-		"allowJs": true,
-		"incremental": false,
-		"allowSyntheticDefaultImports": true,
 		"baseUrl": ".",
-		"types": ["vitest/globals"],
+		"rootDirs": [".", "../../frontend/@n8n/composables/src"],
+		"outDir": "dist",
+		"types": ["vite/client", "vitest/globals"],
 		"typeRoots": [
 			"./node_modules/@testing-library",
 			"./node_modules/@types",
@@ -18,12 +12,9 @@
 			"../../node_modules/@types"
 		],
 		"paths": {
-			"n8n-design-system/*": ["./src/*"]
-		},
-		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
-		// TODO: remove all options below this line
-		"noImplicitAny": false,
-		"noImplicitReturns": false
+			"n8n-design-system*": ["./src*"],
+			"@n8n/composables*": ["../frontend/@n8n/composables/src*"]
+		}
 	},
 	"include": ["src/**/*.ts", "src/**/*.vue"]
 }
diff --git a/packages/design-system/vite.config.mts b/packages/design-system/vite.config.mts
index 783218b793..1a6c504c02 100644
--- a/packages/design-system/vite.config.mts
+++ b/packages/design-system/vite.config.mts
@@ -1,35 +1,12 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { defineConfig, mergeConfig } from 'vite';
-import { type UserConfig } from 'vitest';
-import { defineConfig as defineVitestConfig } from 'vitest/config';
 import components from 'unplugin-vue-components/vite';
 import icons from 'unplugin-icons/vite';
 import iconsResolver from 'unplugin-icons/resolver';
+import { vitestConfig } from '@n8n/frontend-vitest-config';
 
-export const vitestConfig = defineVitestConfig({
-	test: {
-		silent: true,
-		globals: true,
-		environment: 'jsdom',
-		setupFiles: ['./src/__tests__/setup.ts'],
-		...(process.env.COVERAGE_ENABLED === 'true'
-			? {
-					coverage: {
-						enabled: true,
-						provider: 'v8',
-						reporter: process.env.CI === 'true' ? 'cobertura' : 'text-summary',
-						all: true,
-					},
-				}
-			: {}),
-		css: {
-			modules: {
-				classNameStrategy: 'non-scoped',
-			},
-		},
-	},
-}) as UserConfig;
+const frontendDir = resolve(__dirname, '..', 'frontend');
 
 export default mergeConfig(
 	defineConfig({
@@ -53,12 +30,13 @@ export default mergeConfig(
 			alias: {
 				'@': resolve(__dirname, 'src'),
 				'n8n-design-system': resolve(__dirname, 'src'),
+				'@n8n/composables(.*)': resolve(frontendDir, '@n8n', 'composables', 'src$1'),
 				lodash: 'lodash-es',
 			},
 		},
 		build: {
 			lib: {
-				entry: resolve(__dirname, 'src', 'main.ts'),
+				entry: resolve(__dirname, 'src', 'index.ts'),
 				name: 'N8nDesignSystem',
 				fileName: (format) => `n8n-design-system.${format}.js`,
 			},
diff --git a/packages/editor-ui/.eslintrc.js b/packages/editor-ui/.eslintrc.js
index 96dcf7d915..a32d3a3d62 100644
--- a/packages/editor-ui/.eslintrc.js
+++ b/packages/editor-ui/.eslintrc.js
@@ -1,13 +1,9 @@
-const sharedOptions = require('@n8n_io/eslint-config/shared');
+const { createFrontendEslintConfig } = require('@n8n/frontend-eslint-config');
 
 /**
  * @type {import('@types/eslint').ESLint.ConfigData}
  */
-module.exports = {
-	extends: ['@n8n_io/eslint-config/frontend'],
-
-	...sharedOptions(__dirname, 'frontend'),
-
+module.exports = createFrontendEslintConfig(__dirname, {
 	rules: {
 		'n8n-local-rules/dangerously-use-html-string-missing': 'error',
 
@@ -41,4 +37,4 @@ module.exports = {
 		'@typescript-eslint/no-redundant-type-constituents': 'warn',
 		'@typescript-eslint/no-unsafe-enum-comparison': 'warn',
 	},
-};
+});
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index da8b74dfe8..cd32f29cff 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -39,6 +39,7 @@
     "@n8n/chat": "workspace:*",
     "@n8n/codemirror-lang": "workspace:*",
     "@n8n/codemirror-lang-sql": "^1.0.2",
+    "@n8n/composables": "workspace:*",
     "@n8n/permissions": "workspace:*",
     "@replit/codemirror-indentation-markers": "^6.5.3",
     "@sentry/vue": "catalog:frontend",
@@ -92,6 +93,9 @@
     "xss": "catalog:"
   },
   "devDependencies": {
+    "@n8n/frontend-eslint-config": "workspace:*",
+    "@n8n/frontend-vitest-config": "workspace:*",
+    "@n8n/frontend-typescript-config": "workspace:*",
     "@faker-js/faker": "^8.0.2",
     "@iconify/json": "^2.2.228",
     "@pinia/testing": "^0.1.6",
diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue
index 223c1cc8de..e0bced9be0 100644
--- a/packages/editor-ui/src/components/CanvasControls.vue
+++ b/packages/editor-ui/src/components/CanvasControls.vue
@@ -3,7 +3,7 @@ import { onBeforeMount, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCanvasStore } from '@/stores/canvas.store';
 import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useI18n } from '@/composables/useI18n';
 
 const canvasStore = useCanvasStore();
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index f20724bd5f..5c2336f4df 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -46,7 +46,8 @@ import { getTriggerNodeServiceName } from '@/utils/nodeTypesUtils';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 import { get } from 'lodash-es';
-import { N8nIconButton, useDeviceSupport } from 'n8n-design-system';
+import { N8nIconButton } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 
 type Props = {
 	name: string;
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 212fc4c91e..e05f2db7fb 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -28,7 +28,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useMessage } from '@/composables/useMessage';
 import { useExternalHooks } from '@/composables/useExternalHooks';
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index ea4e2d7aa2..53ea66747d 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -12,7 +12,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useContextMenu } from '@/composables/useContextMenu';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { GRID_SIZE } from '@/utils/nodeViewUtils';
 import { useToast } from '@/composables/useToast';
 import { assert } from '@/utils/assert';
diff --git a/packages/editor-ui/src/components/canvas/Canvas.test.ts b/packages/editor-ui/src/components/canvas/Canvas.test.ts
index bf7dae71a7..41f1f7ad0f 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.test.ts
+++ b/packages/editor-ui/src/components/canvas/Canvas.test.ts
@@ -6,7 +6,7 @@ import { createPinia, setActivePinia } from 'pinia';
 import type { CanvasConnection, CanvasNode } from '@/types';
 import { createCanvasConnection, createCanvasNodeElement } from '@/__tests__/data';
 import { NodeConnectionType } from 'n8n-workflow';
-import type { useDeviceSupport } from 'n8n-design-system';
+import type { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 
 const matchMedia = global.window.matchMedia;
 // @ts-expect-error Initialize window object
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 44a5ceaed4..34a3756f9f 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -19,7 +19,8 @@ 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, useDeviceSupport } from 'n8n-design-system';
+import { createEventBus } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useContextMenu, type ContextMenuAction } from '@/composables/useContextMenu';
 import { useKeybindings } from '@/composables/useKeybindings';
 import ContextMenu from '@/components/ContextMenu/ContextMenu.vue';
diff --git a/packages/editor-ui/src/composables/useCanvasMouseSelect.ts b/packages/editor-ui/src/composables/useCanvasMouseSelect.ts
index 83c1edbe42..449edfd5db 100644
--- a/packages/editor-ui/src/composables/useCanvasMouseSelect.ts
+++ b/packages/editor-ui/src/composables/useCanvasMouseSelect.ts
@@ -1,6 +1,6 @@
 import type { INodeUi, XYPosition } from '@/Interface';
 
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { getMousePosition, getRelativePosition } from '@/utils/nodeViewUtils';
diff --git a/packages/editor-ui/src/composables/useCanvasPanning.ts b/packages/editor-ui/src/composables/useCanvasPanning.ts
index e260424cf5..88aee9ba09 100644
--- a/packages/editor-ui/src/composables/useCanvasPanning.ts
+++ b/packages/editor-ui/src/composables/useCanvasPanning.ts
@@ -3,7 +3,7 @@ import { ref, unref } from 'vue';
 
 import { getMousePosition } from '@/utils/nodeViewUtils';
 import { useUIStore } from '@/stores/ui.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { MOUSE_EVENT_BUTTON, MOUSE_EVENT_BUTTONS } from '@/constants';
 
 /**
diff --git a/packages/editor-ui/src/composables/useDebugInfo.test.ts b/packages/editor-ui/src/composables/useDebugInfo.test.ts
index 7bcea3601d..35acae7279 100644
--- a/packages/editor-ui/src/composables/useDebugInfo.test.ts
+++ b/packages/editor-ui/src/composables/useDebugInfo.test.ts
@@ -49,7 +49,7 @@ vi.mock('@/stores/settings.store', () => ({
 	useSettingsStore,
 }));
 
-vi.mock('n8n-design-system', () => ({
+vi.mock('@n8n/composables/useDeviceSupport', () => ({
 	useDeviceSupport: () => ({
 		isTouchDevice: false,
 		userAgent: 'Mozilla/5.0',
diff --git a/packages/editor-ui/src/composables/useDebugInfo.ts b/packages/editor-ui/src/composables/useDebugInfo.ts
index 13bd94ec17..ebe48ec828 100644
--- a/packages/editor-ui/src/composables/useDebugInfo.ts
+++ b/packages/editor-ui/src/composables/useDebugInfo.ts
@@ -1,6 +1,6 @@
 import { useRootStore } from '@/stores/root.store';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import type { WorkflowSettings } from 'n8n-workflow';
 
 type DebugInfo = {
diff --git a/packages/editor-ui/src/composables/useHistoryHelper.ts b/packages/editor-ui/src/composables/useHistoryHelper.ts
index 98d80fd4d1..5ea09bd9bb 100644
--- a/packages/editor-ui/src/composables/useHistoryHelper.ts
+++ b/packages/editor-ui/src/composables/useHistoryHelper.ts
@@ -6,7 +6,7 @@ import { useHistoryStore } from '@/stores/history.store';
 import { useUIStore } from '@/stores/ui.store';
 
 import { onMounted, onUnmounted, nextTick } from 'vue';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { getNodeViewTab } from '@/utils/canvasUtils';
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 import { useTelemetry } from './useTelemetry';
diff --git a/packages/editor-ui/src/composables/useKeybindings.ts b/packages/editor-ui/src/composables/useKeybindings.ts
index 2598fe28e8..3de381fd6c 100644
--- a/packages/editor-ui/src/composables/useKeybindings.ts
+++ b/packages/editor-ui/src/composables/useKeybindings.ts
@@ -1,5 +1,5 @@
 import { useActiveElement, useEventListener } from '@vueuse/core';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import type { MaybeRef, Ref } from 'vue';
 import { computed, unref } from 'vue';
 
diff --git a/packages/editor-ui/src/composables/useNodeBase.ts b/packages/editor-ui/src/composables/useNodeBase.ts
index 970594bb7e..e051422b45 100644
--- a/packages/editor-ui/src/composables/useNodeBase.ts
+++ b/packages/editor-ui/src/composables/useNodeBase.ts
@@ -22,7 +22,7 @@ import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 import type { Endpoint, EndpointOptions } from '@jsplumb/core';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import type { EndpointSpec } from '@jsplumb/common';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import type { N8nEndpointLabelLength } from '@/plugins/jsplumb/N8nPlusEndpointType';
 import { isValidNodeConnectionType } from '@/utils/typeGuards';
 import { useI18n } from '@/composables/useI18n';
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 87569a4f52..adcd2a0768 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -166,7 +166,7 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useClipboard } from '@/composables/useClipboard';
 import { usePinnedData } from '@/composables/usePinnedData';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useDebounce } from '@/composables/useDebounce';
 import { useExecutionsStore } from '@/stores/executions.store';
 import { useCanvasPanning } from '@/composables/useCanvasPanning';
diff --git a/packages/editor-ui/tsconfig.json b/packages/editor-ui/tsconfig.json
index 7ba161b78d..f0b5642a9d 100644
--- a/packages/editor-ui/tsconfig.json
+++ b/packages/editor-ui/tsconfig.json
@@ -1,16 +1,14 @@
 {
-	"extends": "../../tsconfig.json",
+	"extends": "@n8n/frontend-typescript-config",
 	"compilerOptions": {
-		"rootDirs": [".", "../design-system/src", "../@n8n/chat/src"],
-		"outDir": "dist",
-		"target": "esnext",
-		"module": "esnext",
-		"allowJs": true,
-		"importHelpers": true,
-		"incremental": false,
-		"allowSyntheticDefaultImports": true,
-		"resolveJsonModule": true,
 		"baseUrl": ".",
+		"rootDirs": [
+			".",
+			"../../frontend/@n8n/composables/src",
+			"../design-system/src",
+			"../@n8n/chat/src"
+		],
+		"outDir": "dist",
 		"types": [
 			"vitest/globals",
 			"unplugin-icons/types/vue",
@@ -18,12 +16,11 @@
 		],
 		"paths": {
 			"@/*": ["./src/*"],
-			"n8n-design-system": ["../design-system/src/main.ts"],
-			"n8n-design-system/*": ["../design-system/src/*"],
+			"n8n-design-system*": ["../design-system/src*"],
+			"@n8n/composables*": ["../frontend/@n8n/composables/src*"],
 			"@n8n/chat/*": ["../@n8n/chat/src/*"],
 			"@n8n/api-types*": ["../@n8n/api-types/src*"]
 		},
-		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
 		// TODO: remove all options below this line
 		"useUnknownInCatchVariables": false
 	},
diff --git a/packages/editor-ui/vite.config.mts b/packages/editor-ui/vite.config.mts
index 0a5c157c39..bac402629b 100644
--- a/packages/editor-ui/vite.config.mts
+++ b/packages/editor-ui/vite.config.mts
@@ -3,7 +3,7 @@ import { resolve } from 'path';
 import { defineConfig, mergeConfig } from 'vite';
 import svgLoader from 'vite-svg-loader';
 
-import { vitestConfig } from '../design-system/vite.config.mts';
+import { vitestConfig } from '@n8n/frontend-vitest-config';
 import icons from 'unplugin-icons/vite';
 import iconsResolver from 'unplugin-icons/resolver';
 import components from 'unplugin-vue-components/vite';
@@ -22,7 +22,7 @@ const alias = [
 	{ find: 'stream', replacement: 'stream-browserify' },
 	{
 		find: /^n8n-design-system$/,
-		replacement: resolve(__dirname, '..', 'design-system', 'src', 'main.ts'),
+		replacement: resolve(__dirname, '..', 'design-system', 'src', 'index.ts'),
 	},
 	{
 		find: /^n8n-design-system\//,
@@ -36,6 +36,10 @@ const alias = [
 		find: /^@n8n\/chat\//,
 		replacement: resolve(__dirname, '..', '@n8n', 'chat', 'src') + '/',
 	},
+	{
+		find: /^@n8n\/composables(.+)$/,
+		replacement: resolve(__dirname, '..', 'frontend', '@n8n', 'composables', 'src$1'),
+	},
 	...['orderBy', 'camelCase', 'cloneDeep', 'startCase'].map((name) => ({
 		find: new RegExp(`^lodash.${name}$`, 'i'),
 		replacement: `lodash-es/${name}`,
diff --git a/packages/frontend/@n8n/composables/.eslintrc.cjs b/packages/frontend/@n8n/composables/.eslintrc.cjs
new file mode 100644
index 0000000000..94152c01f7
--- /dev/null
+++ b/packages/frontend/@n8n/composables/.eslintrc.cjs
@@ -0,0 +1,3 @@
+const { createFrontendEslintConfig } = require('@n8n/frontend-eslint-config');
+
+module.exports = createFrontendEslintConfig(__dirname);
diff --git a/packages/frontend/@n8n/composables/.gitignore b/packages/frontend/@n8n/composables/.gitignore
new file mode 100644
index 0000000000..a547bf36d8
--- /dev/null
+++ b/packages/frontend/@n8n/composables/.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?
diff --git a/packages/frontend/@n8n/composables/README.md b/packages/frontend/@n8n/composables/README.md
new file mode 100644
index 0000000000..6f97856b69
--- /dev/null
+++ b/packages/frontend/@n8n/composables/README.md
@@ -0,0 +1,24 @@
+# @n8n/composables
+
+A collection of Vue composables that provide common functionality across n8n's Front-End packages.
+
+## Table of Contents
+
+- [Features](#features)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+
+- **Reusable Logic**: Encapsulate complex stateful logic into composable functions.
+- **Consistency**: Ensure consistent patterns and practices across our Vue components.
+- **Extensible**: Easily add new composables as our project grows.
+- **Optimized**: Fully compatible with the Composition API.
+
+## Contributing
+
+For more details, please read our [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## License
+
+For more details, please read our [LICENSE.md](LICENSE.md).
diff --git a/packages/frontend/@n8n/composables/biome.jsonc b/packages/frontend/@n8n/composables/biome.jsonc
new file mode 100644
index 0000000000..f882da95a5
--- /dev/null
+++ b/packages/frontend/@n8n/composables/biome.jsonc
@@ -0,0 +1,4 @@
+{
+	"$schema": "../../../../node_modules/@biomejs/biome/configuration_schema.json",
+	"extends": ["../../../../biome.jsonc"]
+}
diff --git a/packages/frontend/@n8n/composables/package.json b/packages/frontend/@n8n/composables/package.json
new file mode 100644
index 0000000000..f74347aae1
--- /dev/null
+++ b/packages/frontend/@n8n/composables/package.json
@@ -0,0 +1,46 @@
+{
+	"name": "@n8n/composables",
+	"type": "module",
+	"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": "vue-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"
+	},
+	"dependencies": {
+		"vue": "catalog:frontend"
+	},
+	"devDependencies": {
+		"@n8n/frontend-eslint-config": "workspace:*",
+		"@n8n/frontend-typescript-config": "workspace:*",
+		"@n8n/frontend-vitest-config": "workspace:*",
+		"@testing-library/jest-dom": "catalog:frontend",
+		"@testing-library/user-event": "catalog:frontend",
+		"@testing-library/vue": "catalog:frontend",
+		"@vitejs/plugin-vue": "catalog:frontend",
+		"@vue/tsconfig": "catalog:frontend",
+		"tsup": "catalog:frontend",
+		"typescript": "catalog:frontend",
+		"vite": "catalog:frontend",
+		"vite-plugin-dts": "catalog:frontend",
+		"vitest": "catalog:frontend",
+		"vue-tsc": "catalog:frontend"
+	},
+	"license": "See LICENSE.md file in the root of the repository"
+}
diff --git a/packages/frontend/@n8n/composables/src/__tests__/setup.ts b/packages/frontend/@n8n/composables/src/__tests__/setup.ts
new file mode 100644
index 0000000000..92354816ad
--- /dev/null
+++ b/packages/frontend/@n8n/composables/src/__tests__/setup.ts
@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+import { configure } from '@testing-library/vue';
+
+configure({ testIdAttribute: 'data-test-id' });
diff --git a/packages/frontend/@n8n/composables/src/shims.d.ts b/packages/frontend/@n8n/composables/src/shims.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/packages/frontend/@n8n/composables/src/shims.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/design-system/src/composables/useDeviceSupport.test.ts b/packages/frontend/@n8n/composables/src/useDeviceSupport.test.ts
similarity index 98%
rename from packages/design-system/src/composables/useDeviceSupport.test.ts
rename to packages/frontend/@n8n/composables/src/useDeviceSupport.test.ts
index 4cfc5f3533..8d4b712e5d 100644
--- a/packages/design-system/src/composables/useDeviceSupport.test.ts
+++ b/packages/frontend/@n8n/composables/src/useDeviceSupport.test.ts
@@ -1,4 +1,4 @@
-import { useDeviceSupport } from 'n8n-design-system/composables/useDeviceSupport';
+import { useDeviceSupport } from './useDeviceSupport';
 
 const detectPointerType = (query: string) => {
 	const isCoarse = query === '(any-pointer: coarse)';
diff --git a/packages/design-system/src/composables/useDeviceSupport.ts b/packages/frontend/@n8n/composables/src/useDeviceSupport.ts
similarity index 100%
rename from packages/design-system/src/composables/useDeviceSupport.ts
rename to packages/frontend/@n8n/composables/src/useDeviceSupport.ts
diff --git a/packages/frontend/@n8n/composables/tsconfig.json b/packages/frontend/@n8n/composables/tsconfig.json
new file mode 100644
index 0000000000..3884b84bf2
--- /dev/null
+++ b/packages/frontend/@n8n/composables/tsconfig.json
@@ -0,0 +1,10 @@
+{
+	"extends": "@n8n/frontend-typescript-config",
+	"compilerOptions": {
+		"baseUrl": ".",
+		"rootDir": ".",
+		"outDir": "dist",
+		"types": ["vite/client", "vitest/globals"]
+	},
+	"include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts", "tsup.config.ts"]
+}
diff --git a/packages/frontend/@n8n/composables/tsup.config.ts b/packages/frontend/@n8n/composables/tsup.config.ts
new file mode 100644
index 0000000000..a9dc991b43
--- /dev/null
+++ b/packages/frontend/@n8n/composables/tsup.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+	entry: ['src/useDeviceSupport.ts'],
+	format: ['cjs', 'esm'],
+	clean: true,
+	dts: true,
+	cjsInterop: true,
+	splitting: true,
+	sourcemap: true,
+});
diff --git a/packages/frontend/@n8n/composables/vite.config.ts b/packages/frontend/@n8n/composables/vite.config.ts
new file mode 100644
index 0000000000..68833e7059
--- /dev/null
+++ b/packages/frontend/@n8n/composables/vite.config.ts
@@ -0,0 +1,4 @@
+import { defineConfig, mergeConfig } from 'vite';
+import { vitestConfig } from '@n8n/frontend-vitest-config';
+
+export default mergeConfig(defineConfig({}), vitestConfig);
diff --git a/packages/frontend/tooling/eslint-config/index.cjs b/packages/frontend/tooling/eslint-config/index.cjs
new file mode 100644
index 0000000000..c50ec4f16c
--- /dev/null
+++ b/packages/frontend/tooling/eslint-config/index.cjs
@@ -0,0 +1,14 @@
+const sharedOptions = require('@n8n_io/eslint-config/shared');
+
+/**
+ * @param {string} path
+ * @param {import('@types/eslint').ESLint.ConfigData} config
+ * @returns {import('@types/eslint').ESLint.ConfigData}
+ */
+module.exports.createFrontendEslintConfig = function (path, config = {}) {
+	return {
+		extends: ['@n8n_io/eslint-config/frontend'],
+		...sharedOptions(path, 'frontend'),
+		...config,
+	};
+};
diff --git a/packages/frontend/tooling/eslint-config/index.d.ts b/packages/frontend/tooling/eslint-config/index.d.ts
new file mode 100644
index 0000000000..ff0f8a329b
--- /dev/null
+++ b/packages/frontend/tooling/eslint-config/index.d.ts
@@ -0,0 +1,3 @@
+import type { ESLint } from '@types/eslint';
+
+export function createFrontendEslintConfig(path: string): ESLint.ConfigData;
diff --git a/packages/frontend/tooling/eslint-config/package.json b/packages/frontend/tooling/eslint-config/package.json
new file mode 100644
index 0000000000..a84cb57f26
--- /dev/null
+++ b/packages/frontend/tooling/eslint-config/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@n8n/frontend-eslint-config",
+  "version": "1.0.0",
+  "type": "module",
+  "dependencies": {
+    "@n8n_io/eslint-config": "workspace:*",
+    "eslint-plugin-n8n-local-rules": "^1.0.0"
+  },
+  "files": [
+    "index.cjs"
+  ],
+  "main": "./index.cjs",
+  "module": "./index.cjs",
+  "exports": {
+    ".": {
+      "import": "./index.cjs",
+      "require": "./index.cjs",
+      "types": "./index.d.ts"
+    },
+    "./*": "./*"
+  },
+  "license": "See LICENSE.md file in the root of the repository"
+}
diff --git a/packages/frontend/tooling/typescript-config/package.json b/packages/frontend/tooling/typescript-config/package.json
new file mode 100644
index 0000000000..8f209803dc
--- /dev/null
+++ b/packages/frontend/tooling/typescript-config/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@n8n/frontend-typescript-config",
+  "version": "1.0.0",
+  "type": "module",
+  "files": [
+    "tsconfig.json"
+  ],
+  "main": "./tsconfig.json",
+  "module": "./tsconfig.json",
+  "exports": {
+    ".": {
+      "import": "./tsconfig.json",
+      "require": "./tsconfig.json"
+    },
+    "./*": "./*"
+  },
+  "license": "See LICENSE.md file in the root of the repository"
+}
diff --git a/packages/frontend/tooling/typescript-config/tsconfig.json b/packages/frontend/tooling/typescript-config/tsconfig.json
new file mode 100644
index 0000000000..2ceacaaac3
--- /dev/null
+++ b/packages/frontend/tooling/typescript-config/tsconfig.json
@@ -0,0 +1,13 @@
+{
+	"extends": "../../../../tsconfig.json",
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "esnext",
+		"importHelpers": true,
+		"allowJs": true,
+		"incremental": false,
+		"allowSyntheticDefaultImports": true,
+		"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+	},
+	"include": ["src/**/*.ts", "src/**/*.vue"]
+}
diff --git a/packages/frontend/tooling/vitest-config/index.d.ts b/packages/frontend/tooling/vitest-config/index.d.ts
new file mode 100644
index 0000000000..d6ecb6d5d5
--- /dev/null
+++ b/packages/frontend/tooling/vitest-config/index.d.ts
@@ -0,0 +1,3 @@
+import type { UserConfig } from 'vitest/node';
+
+export const vitestConfig: UserConfig;
diff --git a/packages/frontend/tooling/vitest-config/index.mjs b/packages/frontend/tooling/vitest-config/index.mjs
new file mode 100644
index 0000000000..5e68f23f7a
--- /dev/null
+++ b/packages/frontend/tooling/vitest-config/index.mjs
@@ -0,0 +1,30 @@
+import { defineConfig as defineVitestConfig } from 'vitest/config';
+
+/**
+ * Define a Vitest configuration
+ *
+ * @returns {import('vitest/node').UserConfig}
+ */
+export const vitestConfig = defineVitestConfig({
+	test: {
+		silent: true,
+		globals: true,
+		environment: 'jsdom',
+		setupFiles: ['./src/__tests__/setup.ts'],
+		...(process.env.COVERAGE_ENABLED === 'true'
+			? {
+					coverage: {
+						enabled: true,
+						provider: 'v8',
+						reporter: process.env.CI === 'true' ? 'cobertura' : 'text-summary',
+						all: true,
+					},
+				}
+			: {}),
+		css: {
+			modules: {
+				classNameStrategy: 'non-scoped',
+			},
+		},
+	},
+});
diff --git a/packages/frontend/tooling/vitest-config/package.json b/packages/frontend/tooling/vitest-config/package.json
new file mode 100644
index 0000000000..19a617b03d
--- /dev/null
+++ b/packages/frontend/tooling/vitest-config/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@n8n/frontend-vitest-config",
+  "version": "1.0.0",
+  "type": "module",
+  "peerDependencies": {
+    "vite": "catalog:frontend",
+    "vitest": "catalog:frontend"
+  },
+  "devDependencies": {
+    "vite": "catalog:frontend",
+    "vitest": "catalog:frontend"
+  },
+  "files": [
+    "index.mjs"
+  ],
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.mjs",
+      "types": "./index.d.ts"
+    },
+    "./*": "./*"
+  },
+  "license": "See LICENSE.md file in the root of the repository"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a18c773a3b..95be658ed2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,18 +79,36 @@ catalogs:
     '@sentry/vue':
       specifier: ^8.33.1
       version: 8.33.1
+    '@testing-library/jest-dom':
+      specifier: ^6.6.3
+      version: 6.6.3
+    '@testing-library/user-event':
+      specifier: ^14.6.0
+      version: 14.6.0
+    '@testing-library/vue':
+      specifier: ^8.1.0
+      version: 8.1.0
     '@vitejs/plugin-vue':
       specifier: ^5.2.1
       version: 5.2.1
     '@vitest/coverage-v8':
       specifier: ^3.0.2
       version: 3.0.2
+    '@vue/tsconfig':
+      specifier: ^0.7.0
+      version: 0.7.0
     highlight.js:
       specifier: ^11.8.0
       version: 11.9.0
+    tsup:
+      specifier: ^8.3.6
+      version: 8.3.6
     vite:
       specifier: ^6.0.2
       version: 6.0.2
+    vite-plugin-dts:
+      specifier: ^4.3.0
+      version: 4.3.0
     vitest:
       specifier: ^3.0.2
       version: 3.0.2
@@ -443,7 +461,7 @@ importers:
         version: 3.666.0(@aws-sdk/client-sts@3.666.0)
       '@getzep/zep-cloud':
         specifier: 1.0.12
-        version: 1.0.12(@langchain/core@0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(langchain@0.3.11(uhxpxbd3xjubkjdqqkxxpkezmi))
+        version: 1.0.12(@langchain/core@0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(langchain@0.3.11(ilqk5sp4kmqg6yh3rv76amkknm))
       '@getzep/zep-js':
         specifier: 0.9.0
         version: 0.9.0
@@ -470,7 +488,7 @@ importers:
         version: 0.3.2(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@langchain/core@0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
       '@langchain/community':
         specifier: 0.3.24
-        version: 0.3.24(xbnzedcvjhnriori3dst4asz2q)
+        version: 0.3.24(knkgly4tvsbdesqmuf53sm5qpe)
       '@langchain/core':
         specifier: 'catalog:'
         version: 0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1))
@@ -557,7 +575,7 @@ importers:
         version: 23.0.1
       langchain:
         specifier: 0.3.11
-        version: 0.3.11(uhxpxbd3xjubkjdqqkxxpkezmi)
+        version: 0.3.11(ilqk5sp4kmqg6yh3rv76amkknm)
       lodash:
         specifier: 'catalog:'
         version: 4.17.21
@@ -1251,6 +1269,9 @@ importers:
       '@fortawesome/vue-fontawesome':
         specifier: ^3.0.3
         version: 3.0.3(@fortawesome/fontawesome-svg-core@1.2.36)(vue@3.5.13(typescript@5.7.2))
+      '@n8n/composables':
+        specifier: workspace:*
+        version: link:../frontend/@n8n/composables
       '@vueuse/core':
         specifier: '*'
         version: 10.11.0(vue@3.5.13(typescript@5.7.2))
@@ -1291,6 +1312,15 @@ importers:
         specifier: 'catalog:'
         version: 1.0.15
     devDependencies:
+      '@n8n/frontend-eslint-config':
+        specifier: workspace:*
+        version: link:../frontend/tooling/eslint-config
+      '@n8n/frontend-typescript-config':
+        specifier: workspace:*
+        version: link:../frontend/tooling/typescript-config
+      '@n8n/frontend-vitest-config':
+        specifier: workspace:*
+        version: link:../frontend/tooling/vitest-config
       '@n8n/storybook':
         specifier: workspace:*
         version: link:../@n8n/storybook
@@ -1429,6 +1459,9 @@ importers:
       '@n8n/codemirror-lang-sql':
         specifier: ^1.0.2
         version: 1.0.2(@codemirror/view@6.26.3)(@lezer/common@1.1.0)
+      '@n8n/composables':
+        specifier: workspace:*
+        version: link:../frontend/@n8n/composables
       '@n8n/permissions':
         specifier: workspace:*
         version: link:../@n8n/permissions
@@ -1589,6 +1622,15 @@ importers:
       '@iconify/json':
         specifier: ^2.2.228
         version: 2.2.230
+      '@n8n/frontend-eslint-config':
+        specifier: workspace:*
+        version: link:../frontend/tooling/eslint-config
+      '@n8n/frontend-typescript-config':
+        specifier: workspace:*
+        version: link:../frontend/tooling/typescript-config
+      '@n8n/frontend-vitest-config':
+        specifier: workspace:*
+        version: link:../frontend/tooling/vitest-config
       '@pinia/testing':
         specifier: ^0.1.6
         version: 0.1.6(pinia@2.2.4(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
@@ -1653,6 +1695,75 @@ importers:
         specifier: ^2.1.10
         version: 2.1.10(patch_hash=z2iuqlt7ype4qnrwd5eymeecl4)(typescript@5.7.2)
 
+  packages/frontend/@n8n/composables:
+    dependencies:
+      vue:
+        specifier: catalog:frontend
+        version: 3.5.13(typescript@5.7.2)
+    devDependencies:
+      '@n8n/frontend-eslint-config':
+        specifier: workspace:*
+        version: link:../../tooling/eslint-config
+      '@n8n/frontend-typescript-config':
+        specifier: workspace:*
+        version: link:../../tooling/typescript-config
+      '@n8n/frontend-vitest-config':
+        specifier: workspace:*
+        version: link:../../tooling/vitest-config
+      '@testing-library/jest-dom':
+        specifier: catalog:frontend
+        version: 6.6.3
+      '@testing-library/user-event':
+        specifier: catalog:frontend
+        version: 14.6.0(@testing-library/dom@10.4.0)
+      '@testing-library/vue':
+        specifier: catalog:frontend
+        version: 8.1.0(@vue/compiler-sfc@3.5.13)(vue@3.5.13(typescript@5.7.2))
+      '@vitejs/plugin-vue':
+        specifier: catalog:frontend
+        version: 5.2.1(vite@6.0.2(@types/node@18.16.16)(jiti@1.21.0)(sass@1.64.1)(terser@5.16.1))(vue@3.5.13(typescript@5.7.2))
+      '@vue/tsconfig':
+        specifier: catalog:frontend
+        version: 0.7.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
+      tsup:
+        specifier: catalog:frontend
+        version: 8.3.6(@microsoft/api-extractor@7.48.0(@types/node@18.16.16))(jiti@1.21.0)(postcss@8.4.49)(typescript@5.7.2)
+      typescript:
+        specifier: ^5.7.2
+        version: 5.7.2
+      vite:
+        specifier: catalog:frontend
+        version: 6.0.2(@types/node@18.16.16)(jiti@1.21.0)(sass@1.64.1)(terser@5.16.1)
+      vite-plugin-dts:
+        specifier: catalog:frontend
+        version: 4.3.0(@types/node@18.16.16)(rollup@4.24.0)(typescript@5.7.2)(vite@6.0.2(@types/node@18.16.16)(jiti@1.21.0)(sass@1.64.1)(terser@5.16.1))
+      vitest:
+        specifier: catalog:frontend
+        version: 3.0.2(@types/node@18.16.16)(jiti@1.21.0)(jsdom@23.0.1)(sass@1.64.1)(terser@5.16.1)
+      vue-tsc:
+        specifier: ^2.1.10
+        version: 2.1.10(patch_hash=z2iuqlt7ype4qnrwd5eymeecl4)(typescript@5.7.2)
+
+  packages/frontend/tooling/eslint-config:
+    dependencies:
+      '@n8n_io/eslint-config':
+        specifier: workspace:*
+        version: link:../../../@n8n_io/eslint-config
+      eslint-plugin-n8n-local-rules:
+        specifier: ^1.0.0
+        version: 1.0.0
+
+  packages/frontend/tooling/typescript-config: {}
+
+  packages/frontend/tooling/vitest-config:
+    devDependencies:
+      vite:
+        specifier: catalog:frontend
+        version: 6.0.2(@types/node@18.16.16)(jiti@1.21.0)(sass@1.64.1)(terser@5.16.1)
+      vitest:
+        specifier: catalog:frontend
+        version: 3.0.2(@types/node@18.16.16)(jiti@1.21.0)(jsdom@23.0.1)(sass@1.64.1)(terser@5.16.1)
+
   packages/node-dev:
     dependencies:
       '@n8n/di':
@@ -2406,10 +2517,6 @@ packages:
     resolution: {integrity: sha512-BzBZJobMoDyjJsPRMLNHvqHycTGrT8R/dtcTx9qUFcqwSRfGVK9A/cZ7Nx38UQydT9usZGbaDCN75QRNjezSAA==}
     engines: {node: '>=14.0.0'}
 
-  '@babel/code-frame@7.24.6':
-    resolution: {integrity: sha512-ZJhac6FkEd1yhG2AHOmfcXG4ceoLltoCVJjN5XsWN9BifBQr+cHJbWi0h68HZuSORq+3WtJ2z0hwF2NG1b5kcA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/code-frame@7.26.2':
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
@@ -2543,10 +2650,6 @@ packages:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.24.8':
-    resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.25.9':
     resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
@@ -2555,10 +2658,6 @@ packages:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.24.7':
-    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-validator-identifier@7.25.9':
     resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
@@ -2583,20 +2682,6 @@ packages:
     resolution: {integrity: sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.24.6':
-    resolution: {integrity: sha512-2YnuOp4HAk2BsBrJJvYCbItHx0zWscI1C3zgWkz+wDyD9I7GIVrfnLyrR4Y1VR+7p+chAEcrgRQYZAGIKMV7vQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/parser@7.25.6':
-    resolution: {integrity: sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/parser@7.26.2':
-    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
   '@babel/parser@7.26.3':
     resolution: {integrity: sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==}
     engines: {node: '>=6.0.0'}
@@ -3060,14 +3145,6 @@ packages:
     resolution: {integrity: sha512-yTmc8J+Sj8yLzwr4PD5Xb/WF3bOYu2C2OoSZPzbuqRm4n98XirsbzaX+GloeO376UnSYIYJ4NCanwV5/ugZkwA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.25.6':
-    resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.26.0':
-    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.26.3':
     resolution: {integrity: sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==}
     engines: {node: '>=6.9.0'}
@@ -3810,9 +3887,6 @@ packages:
   '@jridgewell/source-map@0.3.6':
     resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
 
-  '@jridgewell/sourcemap-codec@1.4.15':
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
@@ -6373,6 +6447,17 @@ packages:
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
+  '@vue/tsconfig@0.7.0':
+    resolution: {integrity: sha512-ku2uNz5MaZ9IerPPUyOHzyjhXoX2kVJaVf7hL315DC17vS6IiZRmmCPfggNbU16QTvM80+uYYy3eYJB59WCtvg==}
+    peerDependencies:
+      typescript: ^5.7.2
+      vue: ^3.4.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue:
+        optional: true
+
   '@vueuse/components@10.11.0':
     resolution: {integrity: sha512-ZvLZI23d5ZAtva5fGyYh/jQtZO8l+zJ5tAXyYNqHJZkq1o5yWyqZhENvSv5mfDmN5IuAOp4tq02mRmX/ipFGcg==}
 
@@ -6541,10 +6626,6 @@ packages:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
 
-  ansi-styles@3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
-
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -6963,6 +7044,12 @@ packages:
     resolution: {integrity: sha512-ft4hTmex7WGSHt56mydw9uRKskkvgiNwqTYiV9b6q3ubhplglQmjo9OZrHlcUVNwBqSBhnzlsJQ9N/Wd7nhENA==}
     engines: {node: '>=12'}
 
+  bundle-require@5.1.0:
+    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: ^0.24.0
+
   busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
@@ -7038,10 +7125,6 @@ packages:
     resolution: {integrity: sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==}
     engines: {node: '>=12'}
 
-  chalk@2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
-
   chalk@3.0.0:
     resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
     engines: {node: '>=8'}
@@ -7343,6 +7426,10 @@ packages:
   confusing-browser-globals@1.0.11:
     resolution: {integrity: sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==}
 
+  consola@3.4.0:
+    resolution: {integrity: sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
 
@@ -8457,6 +8544,14 @@ packages:
   fd-slicer@1.1.0:
     resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
 
+  fdir@6.4.3:
+    resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   fecha@4.2.3:
     resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
 
@@ -8881,10 +8976,6 @@ packages:
   hash-sum@2.0.0:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
 
-  hasown@2.0.0:
-    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
-    engines: {node: '>= 0.4'}
-
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
@@ -9568,6 +9659,10 @@ packages:
   join-component@1.1.0:
     resolution: {integrity: sha512-bF7vcQxbODoGK1imE2P9GS9aw4zD0Sd+Hni68IMZLj7zRnquH7dXUmMw9hDI5S/Jzt7q+IyTXN0rSg2GI0IKhQ==}
 
+  joycon@3.1.1:
+    resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
+    engines: {node: '>=10'}
+
   js-base64@3.7.2:
     resolution: {integrity: sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ==}
 
@@ -9688,9 +9783,6 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  jsonc-parser@3.2.0:
-    resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
-
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
@@ -9939,6 +10031,10 @@ packages:
       enquirer:
         optional: true
 
+  load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   local-pkg@0.5.0:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
@@ -10020,6 +10116,9 @@ packages:
   lodash.orderby@4.6.0:
     resolution: {integrity: sha512-T0rZxKmghOOf5YPnn8EY5iLYeWCpZq8G41FfqoVHH5QDTAFaghJRmAdLiadEDq+ztgM2q5PjA+Z1fOwGrLgmtg==}
 
+  lodash.sortby@4.7.0:
+    resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
+
   lodash.throttle@4.1.1:
     resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
 
@@ -10458,9 +10557,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  mlly@1.4.2:
-    resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==}
-
   mlly@1.7.1:
     resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
 
@@ -11186,6 +11282,10 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
+
   pidtree@0.6.0:
     resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
     engines: {node: '>=0.10'}
@@ -11218,9 +11318,6 @@ packages:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
 
-  pkg-types@1.0.3:
-    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
-
   pkg-types@1.1.3:
     resolution: {integrity: sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==}
 
@@ -11273,6 +11370,24 @@ packages:
       ts-node:
         optional: true
 
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   postcss-nested@6.0.1:
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
@@ -11810,10 +11925,6 @@ packages:
     resolution: {integrity: sha512-6K/gDlqgQscOlg9fSRpWstA8sYe8rbELsSTNpx+3kTrsVCzvSl0zIvRErM7fdl9ERWDsKnrLnwB+Ne89918XOg==}
     engines: {node: '>=10'}
 
-  resolve@1.22.3:
-    resolution: {integrity: sha512-P8ur/gp/AmbEzjr729bZnLjXK5Z+4P0zhIJgBgzqRih7hL7BOukHGtSTA3ACMY467GRFz3duQsi0bDZdR7DKdw==}
-    hasBin: true
-
   resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -12178,6 +12289,10 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.8.0-beta.0:
+    resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
+    engines: {node: '>= 8'}
+
   sparse-bitfield@3.0.3:
     resolution: {integrity: sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==}
 
@@ -12578,6 +12693,10 @@ packages:
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
+  tinyglobby@0.2.10:
+    resolution: {integrity: sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==}
+    engines: {node: '>=12.0.0'}
+
   tinypool@1.0.2:
     resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -12619,10 +12738,6 @@ packages:
   tmpl@1.0.5:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
 
-  to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -12655,6 +12770,9 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tr46@1.0.1:
+    resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
+
   tr46@3.0.0:
     resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
     engines: {node: '>=12'}
@@ -12780,6 +12898,25 @@ packages:
     resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
     engines: {node: '>=0.6.x'}
 
+  tsup@8.3.6:
+    resolution: {integrity: sha512-XkVtlDV/58S9Ye0JxUUTcrQk4S+EqlOHKzg6Roa62rdjL1nGWNUstG0xgI4vanHdfIpjP448J8vlN0oK6XOJ5g==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      '@microsoft/api-extractor': ^7.36.0
+      '@swc/core': ^1
+      postcss: ^8.4.12
+      typescript: ^5.7.2
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      '@swc/core':
+        optional: true
+      postcss:
+        optional: true
+      typescript:
+        optional: true
+
   tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
 
@@ -12929,9 +13066,6 @@ packages:
   uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
 
-  ufo@1.3.2:
-    resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==}
-
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
@@ -13405,6 +13539,9 @@ packages:
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
+  webidl-conversions@4.0.2:
+    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
+
   webidl-conversions@7.0.0:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
@@ -13450,6 +13587,9 @@ packages:
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
+  whatwg-url@7.1.0:
+    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
+
   which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
 
@@ -13702,7 +13842,7 @@ snapshots:
   '@acuminous/bitsyntax@0.1.2':
     dependencies:
       buffer-more-ints: 1.0.0
-      debug: 4.3.7
+      debug: 4.4.0
       safe-buffer: 5.1.2
     transitivePeerDependencies:
       - supports-color
@@ -14766,11 +14906,6 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@babel/code-frame@7.24.6':
-    dependencies:
-      '@babel/highlight': 7.24.6
-      picocolors: 1.1.1
-
   '@babel/code-frame@7.26.2':
     dependencies:
       '@babel/helper-validator-identifier': 7.25.9
@@ -14794,7 +14929,7 @@ snapshots:
       '@babel/traverse': 7.24.0
       '@babel/types': 7.26.3
       convert-source-map: 2.0.0
-      debug: 4.3.7
+      debug: 4.4.0
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 7.6.0
@@ -14809,12 +14944,12 @@ snapshots:
       '@babel/helper-compilation-targets': 7.25.9
       '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
       '@babel/helpers': 7.26.0
-      '@babel/parser': 7.26.2
+      '@babel/parser': 7.26.3
       '@babel/template': 7.25.9
       '@babel/traverse': 7.26.3
-      '@babel/types': 7.26.0
+      '@babel/types': 7.26.3
       convert-source-map: 2.0.0
-      debug: 4.3.7
+      debug: 4.4.0
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 7.6.0
@@ -14845,7 +14980,7 @@ snapshots:
 
   '@babel/helper-annotate-as-pure@7.25.9':
     dependencies:
-      '@babel/types': 7.26.0
+      '@babel/types': 7.26.3
 
   '@babel/helper-compilation-targets@7.23.6':
     dependencies:
@@ -14888,7 +15023,7 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/helper-compilation-targets': 7.25.9
       '@babel/helper-plugin-utils': 7.25.9
-      debug: 4.3.7
+      debug: 4.4.0
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -14919,7 +15054,7 @@ snapshots:
   '@babel/helper-module-imports@7.25.9':
     dependencies:
       '@babel/traverse': 7.26.3
-      '@babel/types': 7.26.0
+      '@babel/types': 7.26.3
     transitivePeerDependencies:
       - supports-color
 
@@ -14974,7 +15109,7 @@ snapshots:
   '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
     dependencies:
       '@babel/traverse': 7.26.3
-      '@babel/types': 7.26.0
+      '@babel/types': 7.26.3
     transitivePeerDependencies:
       - supports-color
 
@@ -14982,14 +15117,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.26.3
 
-  '@babel/helper-string-parser@7.24.8': {}
-
   '@babel/helper-string-parser@7.25.9': {}
 
   '@babel/helper-validator-identifier@7.22.20': {}
 
-  '@babel/helper-validator-identifier@7.24.7': {}
-
   '@babel/helper-validator-identifier@7.25.9': {}
 
   '@babel/helper-validator-option@7.23.5': {}
@@ -15017,21 +15148,6 @@ snapshots:
       '@babel/template': 7.25.9
       '@babel/types': 7.26.3
 
-  '@babel/highlight@7.24.6':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
-  '@babel/parser@7.25.6':
-    dependencies:
-      '@babel/types': 7.25.6
-
-  '@babel/parser@7.26.2':
-    dependencies:
-      '@babel/types': 7.26.3
-
   '@babel/parser@7.26.3':
     dependencies:
       '@babel/types': 7.26.3
@@ -15559,7 +15675,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
-      '@babel/types': 7.26.0
+      '@babel/types': 7.26.3
       esutils: 2.0.3
 
   '@babel/runtime@7.24.7':
@@ -15588,7 +15704,7 @@ snapshots:
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/parser': 7.26.3
       '@babel/types': 7.26.3
-      debug: 4.3.7
+      debug: 4.4.0
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -15600,22 +15716,11 @@ snapshots:
       '@babel/parser': 7.26.3
       '@babel/template': 7.25.9
       '@babel/types': 7.26.3
-      debug: 4.3.7
+      debug: 4.4.0
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.25.6':
-    dependencies:
-      '@babel/helper-string-parser': 7.24.8
-      '@babel/helper-validator-identifier': 7.24.7
-      to-fast-properties: 2.0.0
-
-  '@babel/types@7.26.0':
-    dependencies:
-      '@babel/helper-string-parser': 7.25.9
-      '@babel/helper-validator-identifier': 7.25.9
-
   '@babel/types@7.26.3':
     dependencies:
       '@babel/helper-string-parser': 7.25.9
@@ -15978,7 +16083,7 @@ snapshots:
   '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.7
+      debug: 4.4.0
       espree: 9.6.1
       globals: 13.20.0
       ignore: 5.2.4
@@ -16033,7 +16138,7 @@ snapshots:
   '@gar/promisify@1.1.3':
     optional: true
 
-  '@getzep/zep-cloud@1.0.12(@langchain/core@0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(langchain@0.3.11(uhxpxbd3xjubkjdqqkxxpkezmi))':
+  '@getzep/zep-cloud@1.0.12(@langchain/core@0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(langchain@0.3.11(ilqk5sp4kmqg6yh3rv76amkknm))':
     dependencies:
       form-data: 4.0.0
       node-fetch: 2.7.0(encoding@0.1.13)
@@ -16042,7 +16147,7 @@ snapshots:
       zod: 3.24.1
     optionalDependencies:
       '@langchain/core': 0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1))
-      langchain: 0.3.11(uhxpxbd3xjubkjdqqkxxpkezmi)
+      langchain: 0.3.11(ilqk5sp4kmqg6yh3rv76amkknm)
     transitivePeerDependencies:
       - encoding
 
@@ -16132,7 +16237,7 @@ snapshots:
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.2
-      debug: 4.3.7
+      debug: 4.4.0
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -16483,8 +16588,6 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@jridgewell/sourcemap-codec@1.4.15': {}
-
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
   '@jridgewell/trace-mapping@0.3.25':
@@ -16538,7 +16641,7 @@ snapshots:
 
   '@kwsites/file-exists@1.1.1':
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
@@ -16581,7 +16684,7 @@ snapshots:
       - aws-crt
       - encoding
 
-  '@langchain/community@0.3.24(xbnzedcvjhnriori3dst4asz2q)':
+  '@langchain/community@0.3.24(knkgly4tvsbdesqmuf53sm5qpe)':
     dependencies:
       '@browserbasehq/stagehand': 1.9.0(@playwright/test@1.49.1)(deepmerge@4.3.1)(dotenv@16.4.5)(encoding@0.1.13)(openai@4.78.1(encoding@0.1.13)(zod@3.24.1))(zod@3.24.1)
       '@ibm-cloud/watsonx-ai': 1.1.2
@@ -16592,7 +16695,7 @@ snapshots:
       flat: 5.0.2
       ibm-cloud-sdk-core: 5.1.0
       js-yaml: 4.1.0
-      langchain: 0.3.11(uhxpxbd3xjubkjdqqkxxpkezmi)
+      langchain: 0.3.11(ilqk5sp4kmqg6yh3rv76amkknm)
       langsmith: 0.2.15(openai@4.78.1(encoding@0.1.13)(zod@3.24.1))
       openai: 4.78.1(encoding@0.1.13)(zod@3.24.1)
       uuid: 10.0.0
@@ -16607,7 +16710,7 @@ snapshots:
       '@aws-sdk/credential-provider-node': 3.666.0(@aws-sdk/client-sso-oidc@3.666.0(@aws-sdk/client-sts@3.666.0))(@aws-sdk/client-sts@3.666.0)
       '@azure/storage-blob': 12.18.0(encoding@0.1.13)
       '@browserbasehq/sdk': 2.0.0(encoding@0.1.13)
-      '@getzep/zep-cloud': 1.0.12(@langchain/core@0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(langchain@0.3.11(uhxpxbd3xjubkjdqqkxxpkezmi))
+      '@getzep/zep-cloud': 1.0.12(@langchain/core@0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)(langchain@0.3.11(ilqk5sp4kmqg6yh3rv76amkknm))
       '@getzep/zep-js': 0.9.0
       '@google-ai/generativelanguage': 2.6.0(encoding@0.1.13)
       '@google-cloud/storage': 7.12.1(encoding@0.1.13)
@@ -18543,7 +18646,7 @@ snapshots:
 
   '@testing-library/dom@9.3.4':
     dependencies:
-      '@babel/code-frame': 7.24.6
+      '@babel/code-frame': 7.26.2
       '@babel/runtime': 7.24.7
       '@types/aria-query': 5.0.1
       aria-query: 5.1.3
@@ -19150,7 +19253,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 7.2.0(typescript@5.7.2)
       '@typescript-eslint/utils': 7.2.0(eslint@8.57.0)(typescript@5.7.2)
-      debug: 4.3.7
+      debug: 4.4.0
       eslint: 8.57.0
       ts-api-utils: 1.0.1(typescript@5.7.2)
     optionalDependencies:
@@ -19166,7 +19269,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7
+      debug: 4.4.0
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -19181,7 +19284,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 7.2.0
       '@typescript-eslint/visitor-keys': 7.2.0
-      debug: 4.3.7
+      debug: 4.4.0
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -19397,7 +19500,7 @@ snapshots:
 
   '@vue/compiler-core@3.5.13':
     dependencies:
-      '@babel/parser': 7.25.6
+      '@babel/parser': 7.26.3
       '@vue/shared': 3.5.13
       entities: 4.5.0
       estree-walker: 2.0.2
@@ -19416,7 +19519,7 @@ snapshots:
       '@vue/compiler-ssr': 3.5.13
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
-      magic-string: 0.30.14
+      magic-string: 0.30.17
       postcss: 8.4.49
       source-map-js: 1.2.1
 
@@ -19501,6 +19604,11 @@ snapshots:
       js-beautify: 1.14.9
       vue-component-type-helpers: 2.2.0
 
+  '@vue/tsconfig@0.7.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))':
+    optionalDependencies:
+      typescript: 5.7.2
+      vue: 3.5.13(typescript@5.7.2)
+
   '@vueuse/components@10.11.0(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@vueuse/core': 10.11.0(vue@3.5.13(typescript@5.7.2))
@@ -19598,19 +19706,19 @@ snapshots:
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
   agent-base@7.1.0:
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
   agentkeepalive@4.2.1:
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
       depd: 1.1.2
       humanize-ms: 1.2.1
     transitivePeerDependencies:
@@ -19693,10 +19801,6 @@ snapshots:
 
   ansi-regex@6.0.1: {}
 
-  ansi-styles@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
-
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -19933,14 +20037,6 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  axios@1.7.4(debug@4.4.0):
-    dependencies:
-      follow-redirects: 1.15.6(debug@4.4.0)
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-
   axios@1.7.7:
     dependencies:
       follow-redirects: 1.15.6(debug@4.3.6)
@@ -20219,6 +20315,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  bundle-require@5.1.0(esbuild@0.24.0):
+    dependencies:
+      esbuild: 0.24.0
+      load-tsconfig: 0.2.5
+
   busboy@1.6.0:
     dependencies:
       streamsearch: 1.1.0
@@ -20310,12 +20411,6 @@ snapshots:
       loupe: 3.1.2
       pathval: 2.0.0
 
-  chalk@2.4.2:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-
   chalk@3.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -20655,6 +20750,8 @@ snapshots:
 
   confusing-browser-globals@1.0.11: {}
 
+  consola@3.4.0: {}
+
   console-control-strings@1.1.0:
     optional: true
 
@@ -21587,7 +21684,7 @@ snapshots:
 
   esbuild-register@3.5.0(esbuild@0.24.0):
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
       esbuild: 0.24.0
     transitivePeerDependencies:
       - supports-color
@@ -22122,6 +22219,10 @@ snapshots:
     dependencies:
       pend: 1.2.0
 
+  fdir@6.4.3(picomatch@4.0.2):
+    optionalDependencies:
+      picomatch: 4.0.2
+
   fecha@4.2.3: {}
 
   fengari-interop@0.1.3(fengari@0.1.4):
@@ -22211,10 +22312,6 @@ snapshots:
     optionalDependencies:
       debug: 4.3.7
 
-  follow-redirects@1.15.6(debug@4.4.0):
-    optionalDependencies:
-      debug: 4.4.0
-
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
@@ -22643,10 +22740,6 @@ snapshots:
 
   hash-sum@2.0.0: {}
 
-  hasown@2.0.0:
-    dependencies:
-      function-bind: 1.1.2
-
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
@@ -22752,7 +22845,7 @@ snapshots:
     dependencies:
       '@tootallnate/once': 1.1.2
       agent-base: 6.0.2
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
     optional: true
@@ -22761,14 +22854,14 @@ snapshots:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
   http-proxy-agent@7.0.0:
     dependencies:
       agent-base: 7.1.0
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
@@ -22783,21 +22876,21 @@ snapshots:
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.0
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.5:
     dependencies:
       agent-base: 7.1.0
-      debug: 4.3.7
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
 
@@ -22816,7 +22909,7 @@ snapshots:
       '@types/debug': 4.1.12
       '@types/node': 18.16.16
       '@types/tough-cookie': 4.0.2
-      axios: 1.7.4(debug@4.4.0)
+      axios: 1.7.4
       camelcase: 6.3.0
       debug: 4.4.0
       dotenv: 16.4.5
@@ -22826,7 +22919,7 @@ snapshots:
       isstream: 0.1.2
       jsonwebtoken: 9.0.2
       mime-types: 2.1.35
-      retry-axios: 2.6.0(axios@1.7.4)
+      retry-axios: 2.6.0(axios@1.7.4(debug@4.4.0))
       tough-cookie: 4.1.3
     transitivePeerDependencies:
       - supports-color
@@ -23016,7 +23109,7 @@ snapshots:
 
   is-core-module@2.13.1:
     dependencies:
-      hasown: 2.0.0
+      hasown: 2.0.2
 
   is-data-view@1.0.1:
     dependencies:
@@ -23174,7 +23267,7 @@ snapshots:
 
   istanbul-lib-source-maps@4.0.1:
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
       istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -23385,7 +23478,7 @@ snapshots:
 
   jest-message-util@29.5.0:
     dependencies:
-      '@babel/code-frame': 7.24.6
+      '@babel/code-frame': 7.26.2
       '@jest/types': 29.6.1
       '@types/stack-utils': 2.0.1
       chalk: 4.1.2
@@ -23397,7 +23490,7 @@ snapshots:
 
   jest-message-util@29.6.2:
     dependencies:
-      '@babel/code-frame': 7.24.6
+      '@babel/code-frame': 7.26.2
       '@jest/types': 29.6.1
       '@types/stack-utils': 2.0.1
       chalk: 4.1.2
@@ -23503,7 +23596,7 @@ snapshots:
       '@babel/generator': 7.22.9
       '@babel/plugin-syntax-jsx': 7.18.6(@babel/core@7.24.0)
       '@babel/plugin-syntax-typescript': 7.20.0(@babel/core@7.24.0)
-      '@babel/types': 7.25.6
+      '@babel/types': 7.26.3
       '@jest/expect-utils': 29.6.2
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
@@ -23595,6 +23688,8 @@ snapshots:
 
   join-component@1.1.0: {}
 
+  joycon@3.1.1: {}
+
   js-base64@3.7.2: {}
 
   js-beautify@1.14.9:
@@ -23735,8 +23830,6 @@ snapshots:
 
   json5@2.2.3: {}
 
-  jsonc-parser@3.2.0: {}
-
   jsonfile@4.0.0:
     optionalDependencies:
       graceful-fs: 4.2.11
@@ -23833,7 +23926,7 @@ snapshots:
 
   kuler@2.0.0: {}
 
-  langchain@0.3.11(uhxpxbd3xjubkjdqqkxxpkezmi):
+  langchain@0.3.11(ilqk5sp4kmqg6yh3rv76amkknm):
     dependencies:
       '@langchain/core': 0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1))
       '@langchain/openai': 0.3.17(@langchain/core@0.3.30(openai@4.78.1(encoding@0.1.13)(zod@3.24.1)))(encoding@0.1.13)
@@ -23998,10 +24091,12 @@ snapshots:
     optionalDependencies:
       enquirer: 2.3.6
 
+  load-tsconfig@0.2.5: {}
+
   local-pkg@0.5.0:
     dependencies:
-      mlly: 1.4.2
-      pkg-types: 1.0.3
+      mlly: 1.7.1
+      pkg-types: 1.1.3
 
   locate-path@5.0.0:
     dependencies:
@@ -24057,6 +24152,8 @@ snapshots:
 
   lodash.orderby@4.6.0: {}
 
+  lodash.sortby@4.7.0: {}
+
   lodash.throttle@4.1.1: {}
 
   lodash@4.17.21: {}
@@ -24137,7 +24234,7 @@ snapshots:
 
   magic-string@0.30.10:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   magic-string@0.30.14:
     dependencies:
@@ -24698,13 +24795,6 @@ snapshots:
 
   mkdirp@2.1.3: {}
 
-  mlly@1.4.2:
-    dependencies:
-      acorn: 8.14.0
-      pathe: 1.1.2
-      pkg-types: 1.0.3
-      ufo: 1.3.2
-
   mlly@1.7.1:
     dependencies:
       acorn: 8.14.0
@@ -24758,7 +24848,7 @@ snapshots:
   mqtt-packet@9.0.0:
     dependencies:
       bl: 6.0.12
-      debug: 4.3.7
+      debug: 4.4.0
       process-nextick-args: 2.0.1
     transitivePeerDependencies:
       - supports-color
@@ -25058,7 +25148,7 @@ snapshots:
 
   number-allocator@1.0.14:
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
       js-sdsl: 4.3.0
     transitivePeerDependencies:
       - supports-color
@@ -25330,7 +25420,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.24.6
+      '@babel/code-frame': 7.26.2
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -25492,6 +25582,8 @@ snapshots:
 
   picomatch@2.3.1: {}
 
+  picomatch@4.0.2: {}
+
   pidtree@0.6.0: {}
 
   pify@2.3.0: {}
@@ -25514,12 +25606,6 @@ snapshots:
     dependencies:
       find-up: 4.1.0
 
-  pkg-types@1.0.3:
-    dependencies:
-      jsonc-parser: 3.2.0
-      mlly: 1.4.2
-      pathe: 1.1.2
-
   pkg-types@1.1.3:
     dependencies:
       confbox: 0.1.7
@@ -25566,6 +25652,13 @@ snapshots:
       postcss: 8.4.38
       ts-node: 10.9.2(@types/node@18.16.16)(typescript@5.7.2)
 
+  postcss-load-config@6.0.1(jiti@1.21.0)(postcss@8.4.49):
+    dependencies:
+      lilconfig: 3.1.2
+    optionalDependencies:
+      jiti: 1.21.0
+      postcss: 8.4.49
+
   postcss-nested@6.0.1(postcss@8.4.38):
     dependencies:
       postcss: 8.4.38
@@ -26050,7 +26143,7 @@ snapshots:
 
   rechoir@0.6.2:
     dependencies:
-      resolve: 1.22.3
+      resolve: 1.22.8
 
   redent@3.0.0:
     dependencies:
@@ -26219,12 +26312,6 @@ snapshots:
 
   resolve.exports@2.0.0: {}
 
-  resolve@1.22.3:
-    dependencies:
-      is-core-module: 2.13.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
   resolve@1.22.8:
     dependencies:
       is-core-module: 2.13.1
@@ -26238,7 +26325,7 @@ snapshots:
 
   ret@0.1.15: {}
 
-  retry-axios@2.6.0(axios@1.7.4):
+  retry-axios@2.6.0(axios@1.7.4(debug@4.4.0)):
     dependencies:
       axios: 1.7.4
 
@@ -26621,7 +26708,7 @@ snapshots:
 
   simple-websocket@9.1.0:
     dependencies:
-      debug: 4.3.7
+      debug: 4.4.0
       queue-microtask: 1.2.3
       randombytes: 2.1.0
       readable-stream: 3.6.0
@@ -26701,7 +26788,7 @@ snapshots:
   socks-proxy-agent@6.2.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.7
+      debug: 4.4.0
       socks: 2.8.3
     transitivePeerDependencies:
       - supports-color
@@ -26731,6 +26818,10 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  source-map@0.8.0-beta.0:
+    dependencies:
+      whatwg-url: 7.1.0
+
   sparse-bitfield@3.0.3:
     dependencies:
       memory-pager: 1.5.0
@@ -27039,7 +27130,7 @@ snapshots:
     dependencies:
       component-emitter: 1.3.0
       cookiejar: 2.1.4
-      debug: 4.3.7
+      debug: 4.4.0
       fast-safe-stringify: 2.1.1
       form-data: 4.0.0
       formidable: 3.5.1
@@ -27245,6 +27336,11 @@ snapshots:
 
   tinyexec@0.3.2: {}
 
+  tinyglobby@0.2.10:
+    dependencies:
+      fdir: 6.4.3(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   tinypool@1.0.2: {}
 
   tinyrainbow@1.2.0: {}
@@ -27275,8 +27371,6 @@ snapshots:
 
   tmpl@1.0.5: {}
 
-  to-fast-properties@2.0.0: {}
-
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -27307,6 +27401,10 @@ snapshots:
 
   tr46@0.0.3: {}
 
+  tr46@1.0.1:
+    dependencies:
+      punycode: 2.3.1
+
   tr46@3.0.0:
     dependencies:
       punycode: 2.3.1
@@ -27424,6 +27522,34 @@ snapshots:
 
   tsscmp@1.0.6: {}
 
+  tsup@8.3.6(@microsoft/api-extractor@7.48.0(@types/node@18.16.16))(jiti@1.21.0)(postcss@8.4.49)(typescript@5.7.2):
+    dependencies:
+      bundle-require: 5.1.0(esbuild@0.24.0)
+      cac: 6.7.14
+      chokidar: 4.0.1
+      consola: 3.4.0
+      debug: 4.4.0
+      esbuild: 0.24.0
+      joycon: 3.1.1
+      picocolors: 1.1.1
+      postcss-load-config: 6.0.1(jiti@1.21.0)(postcss@8.4.49)
+      resolve-from: 5.0.0
+      rollup: 4.24.0
+      source-map: 0.8.0-beta.0
+      sucrase: 3.35.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.10
+      tree-kill: 1.2.2
+    optionalDependencies:
+      '@microsoft/api-extractor': 7.48.0(@types/node@18.16.16)
+      postcss: 8.4.49
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - jiti
+      - supports-color
+      - tsx
+      - yaml
+
   tunnel-agent@0.6.0:
     dependencies:
       safe-buffer: 5.2.1
@@ -27572,8 +27698,6 @@ snapshots:
 
   uc.micro@2.1.0: {}
 
-  ufo@1.3.2: {}
-
   ufo@1.5.4: {}
 
   uglify-js@3.17.4: {}
@@ -27799,10 +27923,10 @@ snapshots:
       '@volar/typescript': 2.4.10
       '@vue/language-core': 2.1.6(typescript@5.7.2)
       compare-versions: 6.1.1
-      debug: 4.3.7
+      debug: 4.4.0
       kolorist: 1.8.0
       local-pkg: 0.5.0
-      magic-string: 0.30.14
+      magic-string: 0.30.17
       typescript: 5.7.2
     optionalDependencies:
       vite: 6.0.2(@types/node@18.16.16)(jiti@1.21.0)(sass@1.64.1)(terser@5.16.1)
@@ -28057,6 +28181,8 @@ snapshots:
 
   webidl-conversions@3.0.1: {}
 
+  webidl-conversions@4.0.2: {}
+
   webidl-conversions@7.0.0: {}
 
   webpack-sources@3.2.3: {}
@@ -28097,6 +28223,12 @@ snapshots:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
 
+  whatwg-url@7.1.0:
+    dependencies:
+      lodash.sortby: 4.7.0
+      tr46: 1.0.1
+      webidl-conversions: 4.0.2
+
   which-boxed-primitive@1.0.2:
     dependencies:
       is-bigint: 1.0.4
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index f410928c4d..0ee9c1c265 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,6 +2,7 @@ packages:
   - packages/*
   - packages/@n8n/*
   - packages/@n8n_io/*
+  - packages/frontend/**
   - cypress
 
 catalog:
@@ -32,10 +33,17 @@ catalog:
 
 catalogs:
   frontend:
+    '@testing-library/jest-dom': ^6.6.3
+    '@testing-library/user-event': ^14.6.0
+    '@testing-library/vue': ^8.1.0
+    '@vue/tsconfig': ^0.7.0
     '@vitest/coverage-v8': ^3.0.2
     '@vitejs/plugin-vue': ^5.2.1
     '@sentry/vue': ^8.33.1
+    tsup: ^8.3.6
+    typescript: ^5.6.2
     vite: ^6.0.2
+    vite-plugin-dts: ^4.3.0
     vitest: ^3.0.2
     vitest-mock-extended: ^2.0.2
     vue: ^3.5.13
diff --git a/turbo.json b/turbo.json
index 53ac21655e..5851fb4572 100644
--- a/turbo.json
+++ b/turbo.json
@@ -45,6 +45,7 @@
 				"@n8n/codemirror-lang#lint",
 				"@n8n/storybook#lint",
 				"n8n-cypress#lint",
+				"@n8n/composables#build",
 				"n8n-design-system#lint",
 				"n8n-editor-ui#lint"
 			]
@@ -77,6 +78,7 @@
 			"dependsOn": [
 				"@n8n/chat#test",
 				"@n8n/codemirror-lang#test",
+				"@n8n/composables#build",
 				"n8n-design-system#test",
 				"n8n-editor-ui#test"
 			],